COSC 6357 Web Engineering
A Research Paper on Web Engineering
We learn the principles of Web engineering in this course. Many times, we gain better insight and understanding by studying the counterexamples that violate these principles, than merely memorizing the rules. You are going to write a research paper investigating the principles and counterexamples in Web engineering that violate them.
The research paper should consist of following parts:
I. Read the textbook, and read other books, research papers and online resources about the design principles in Web engineering. Clearly list these principles as 1, 2, 3, …… Also explain, elaborate and discuss with your own understanding.
II. Find and show 25 bad examples of Web engineering that violate the principles and cause poor usability. Label and list them 1 through 25. Most of the bad design examples that an end user is sensitive to (and suffer from) are in the user interface designs. However, your examples are not limited to user interfaces. You are encouraged to find the bad examples through your own experience. Second hand examples are allowed. For example, if you browse the Web, you can easily find something like top 20 bad Web designs. However, original examples of your own may carry more points in the grade of this assignment, compared to the examples that you find on the Internet. (I don’t have a formula and I will not use a formula to calculate your grade mechanically).
For each example, describe the problem and explain why it is bad; what design principles it violates, and suggest a fix to this design. That is, what you think is the best way of doing it.
Screenshot for each example is not required but is beneficial and will help you to earn more points in your grade. Even if you decide not to provide screenshots for all the examples, screenshots for some examples are still helpful.
For each example, you must clearly state or label whether this is your own contribution, or give credit and reference to the source (book, journal, Web URL, etc.) If you don’t say anything whether it is your original example or cite a reference, you will not receive credit for that example. In the case that you use reference sources, you need to describe using your own words. Simple “copy and paste” violates the copyright of the original work.
Copying from other students is cheating and is prohibited. This is an individual assignment. Team work, or “working together” is not allowed. If word for word copy is found among students, all students involved will be penalized, and subject to university disciplinary actions on academic dishonesty.
III. With your own investigation, you must have discovered more principles of software design that other books and papers have not covered. Write about your own principles that you have discovered through the bad examples. Relate these principles to the examples in Part II that violate them.
IV. A toggle button is a button which makes the switch between two states when repeatedly clicked, like on/off, enabled/disabled, show/hide, play/pause. This is a special topic in GUI design but toggle buttons cause the most confusions in user experience. The confusing part is whether
• the label “on” should indicate the current state, meaning it is currently on; if you click it, it will be turned off,
• or, the label “on” should indicate the “call of action”, meaning it is currently off; if you click it, it will be turned on.
Investigate the current theories and opinions on toggle button design. Make your own theory on the best practices and guidelines on the use of toggle switches and justify with examples.
V. A list of references, including books, research papers in journals, Web URLs.
Your submission should in PDF or Word document format.
There is no requirement regarding minimum or maximum number of pages.
In the following, I will give a few examples of bad design with my own experience. (You cannot use any of the examples I give below in your paper. Otherwise you will not get credit.)
1. A common type of confusion is in GUI forms, in particular, check boxes. Look at the following example in a Web form.
Select the payment type
It is a confusion whether the checkbox in between should be associated to the left or right. This happens in many areas other than software, like on forms printed on paper,
and in an elevator, the labels beside the buttons for different floor levels:
The best way to fix the payment type should be
Select the payment type
2. Blackboard 9: Some of the navigation and workflow is poorly designed and is confusing. If a student submitted a homework assignment and wants to go back and review what he/she has submitted, there are only two buttons available, “Begin” and “Cancel”. To review your submission, you have to click “Begin”, which does not make sense.
When you click “Begin”, you are shown two choices, “review results of last attempt”, or “take the test again”. Even so, the design is not consistent. You click the “OK” button at the bottom to take the first action. To take the Test again, there is no button. You need to click the hyperlinked text, which may take a while for the first time user to figure it out.
3. Blackboard 9: When composing a message, the system stubbornly put hyper link to text, when it sees “http:” or “www”. The user has no choice to remove the hyperlink.
4. Blackboard 9 messages (emails): The icon, the sender/recipient fields are not clickable to open a message. Only the subject is clickable. The sender/recipient field has a variable width instead of fixed width. When the sender/recipient list gets long, they display a long list and push the rest of the fields including subject (the only clickable) out of the screen.
5. Blackboard 9 messages (emails): When a message is displayed, there is an OK button at the lower right corner of the page. What does the OK button do, after you have read the page? The label of the button is not self-explaining. What is really does is to take you to the last folder where you came from. The navigation within the message (email) is not convenient either. After reading a message, you cannot move to the next or the previous directly without moving back to the folder. You cannot compose a new message without moving back to the folder.