Monthly Archives: September, 2012

[Week 6] Blog Post 5 – Questionnaires: Good and Bad Examples

1. Introduction

“A survey is only as good as the clarity of your terms, the directness of your questions, and the relevance of your answer choices.” -inow

A questionnaire or survey takes the form of carefully selected questions that want to elicit honest and specific opinions from the participant. These opinions are important to generate statistics about a product or service for analysis. If the opinions are dishonest or vague, it will badly affect the outcome of our analysis. The above quote tells us a few key points to look out for when we create our questions.
2. Good Questions vs. Bad Questions

Here are examples of bad questions as opposed to their good counterparts.

Q1) Bad

  • Do you think you will take a long time to use this function?

Q1) Good

  • Rate on a scale of 1 to 7 how much time you think it will take you to use this function. (1-short, 7-long)

In this example above, the good example not only asks for a rating so participants can more specifically rate their response, but it also balances rating scale with 1-4-7 where 4 is the middle-point. The good example also avoids asking with a biased leading question, which the bad example does when it implies to the user to think that he will take a long time to use that function.

Q2) Bad

  • Which design do you think is best?

Q2) Good

  • Which design do you think is the prettiest and most easy to use?

In this second example, the bad part asks a very generic question that may be understood differently for each user. For some users, ‘best’ might mean prettiest, whereas for others it might mean the easiest to use. To clarify this, a good question should ask specifically and clearly what the user needs to consider.

Q3) Bad

  • Which feature in the list would you dislike to see in a product you would find hard to use?

Q3) Good

  • Which feature in the list would you like to see in an easy-to-use product?

In this third example, the bad part asks a double negative question, and by doing so will confuse the participant and cause misunderstandings in the question. This question can be worded properly in the good part without using double negatives.

Q4) Bad

  • Answer Yes or No. There is no sorting mechanism you can see in this tool.
  • Answer Yes or No. Do you see no sorting mechanism in this tool?

Q4) Good

  • Answer Yes or No. Do you see a sorting mechanism in this tool?

In this fourth example, the first bad part is not even a question, but an assertion. As such, it is important to remember to ask questions rather than assert them. Also in both bad parts, the answer to be given is ambiguous in relation to the question. Some people would answer ‘No’ to a question asking for a ‘no’ as their way of confirmation, whereas other people confirm by answering ‘Yes’ to a ‘no-question’. This is how people interpret differently so misunderstandings will cause many to answer wrongly.

Conclusion   

Not all the important parts were covered in the above examples, but in summary, a good survey or questionnaire needs:

  • Use simple words
  • Correct grammar
  • Common understanding with and about the participants
  • Avoid leading questions
  • Avoid double negatives
  • Ask questions, not assertions
  • Balance rating scales
  • Make choices list simple and short
  • Alignment of questions, choices and answer boxes should be consistent
  • Avoid open-ended questions (give choices instead of written)
  • Put questions in logic order (helps mind flow)

What happens when you do not have a common understanding about the participants:

References:

http://www.mediacollege.com/journalism/interviews/leading-questions.html

http://www.accesscable.net/~infopoll/tips.htm

http://www.thescienceforum.com/general-discussion/17572-good-survey-bad-survey.html

http://grammar.quickanddirtytips.com/double-negative.aspx

Advertisements

[Week 5] Blog Post 4 – Web Design: Good and Bad Examples

1. Introduction

Surfing the Internet gives opportunity to a user to be exposed to an infinite number of websites online. Many websites started out simple and bleak in the beginning of the Internet Age, but as the years brought forth greater user demand and experiences, it is now a sin to show that level of workmanship. Web design is the art of designing the layout, content and appearance of a website. It shows users the essence of, and even influences decision-making, response and likability to the company or persons hosting it, apart from just the website.

A good web design is vital to the host and delivers a quality user experience, which is a factor in eventually assisting the host’s purpose for a website. Poorly designed websites bring great costs otherwise, by affecting sales or reputation, or even both.
2. Good Web Design

Examples below have neat, clear and visually appealing outlooks.

For a good web design, user satisfaction is of the utmost importance, since the website is essentially created for the user. It is over-assuming to say that all users have the same kind of satisfaction needs, but generally satisfaction requirements will require following this guideline:

Essential Good Web Design Criteria:

  • Neat and Concise Layout and Prioritization of Content and Menus
  • Rich, Precise and Relevant Content
  • Visually Appealing Graphics
  • Good and Clear Navigability of Menus and Links
  • Good Color Combinations
  • No Distractions, No Confusion, No Junk
  • Fast Loading Speed
  • Central Consistent Theme/Style

Detailed explanation of each criteria is given extensively below in the list of essential ‘Good Design Features’ by Robin Williams:

Text

  •     Background does not interrupt the text
  •     Text is big enough to read, but not too big
  •     The hierarchy of information is perfectly clear
  •     Columns of text are narrower than in a book to make reading easier on the screen

Navigation

  •     Navigation buttons and bars are easy to understand and use
  •     Navigation is consistent throughout web site
  •     Navigation buttons and bars provide the visitor with a clue as to where they are, what page of the site they are currently on
  •     Frames, if used, are not obtrusive
  •     A large site has an index or site map

Links

  •     Link colors coordinate with page colors
  •     Links are underlined so they are instantly clear to the visitor

Graphics

  •     Buttons are not big and dorky
  •     Every graphic has an alt label
  •     Every graphic link has a matching text link
  •     Graphics and backgrounds use browser-safe colors
  •     Animated graphics turn off by themselves

General Design

  •     Pages download quickly
  •     First page and home page fit into 800 x 600 pixel space
  •     All of the other pages have the immediate visual impact within 800 x 600 pixels
  •     Good use of graphic elements (photos, subheads, pull quotes) to break up large areas of text
  •     Every web page in the site looks like it belongs to the same site; there are repetitive elements that carry throughout the pages

3. Bad Web Design

Examples below are untidy, full of distracting advertising, bad color schemes and visually unpleasing.

Committing sins of web design occur when the fundamental criteria of good web design are evidently reversed. Users will find the experience frustrating, offensive, distracting or confusing. It is important to know that a website is not generally bad if it fails to fulfill a good criteria, except when it actually does the reverse of a good criteria and causes grief to the user. Generally, bad web design criteria is as follows:

Sinful Bad Design Criteria

  • Untidy and Scattered Layout without Prioritization of Content and Menus
  • Poor, Chunky and Irrelevant Content
  • Visually Unpleasant
  • Bad and Unclear Navigability of Menus and Links
  • Offensive Color Combinations
  • Contains Distractions, Confusing and Junk
  • Very Slow Loading Speed
  • Inconsistent Theme/Style

Detailed explanation of each criteria is given extensively below in the list of ‘Bad Design Features’ by Robin Williams:

Backgrounds

  •     Default gray color
  •     Color combinations of text and background that make the text hard to read
  •     Busy, distracting backgrounds that make the text hard to read

Text

  •     Text that is too small to read
  •     Text crowding against the left edge
  •     Text that stretches all the way across the page
  •     Centered type over flush left body copy
  •     Paragraphs of type in all caps
  •     Paragraphs of type in bold
  •     Paragraphs of type in italic
  •     Paragraphs of type in all caps, bold, and italic all at once
  •     Underlined text that is not a link

Links

  •     Default blue links
  •     Blue link borders around graphics
  •     Links that are not clear about where they will take you
  •     Links in body copy that distract readers and lead them off to remote, useless pages
  •     Text links that are not underlined so you don’t know they are links
  •     Dead links (links that don’t work anymore)

Graphics

  •     Large graphic files that take forever to load
  •     Meaningless or useless graphics
  •     Thumbnail images that are nearly as large as the full-sized images they link to
  •     Graphics with no alt labels
  •     Missing graphics, especially missing graphics with no alt labels
  •     Graphics that don’t fit on the screen (assuming a screen of 800 x 600 pixels)

Tables

  •     Borders turned on in tables
  •     Tables used as design elements, especially with extra large (dorky) borders

Blinking and animations

  •     Anything that blinks, especially text
  •     Multiple things that blink
  •     Rainbow rules (lines)
  •     Rainbow rules that blink or animate
  •     “Under construction” signs, especially of little men working
  •     Animated “under construction” signs
  •     Animated pictures for email
  •     Animations that never stop
  •     Multiple animations that never stop

Junk

  •     Counters on pages — who cares
  •     Junky advertising
  •     Having to scroll sideways (800 x 600 pixels)
  •     Too many little pictures of meaningless awards on the first page
  •     Frame scroll bars in the middle of a page
  •     Multiple frame scroll bars in the middle of a page

Navigation

  •     Unclear navigation; over complex navigation
  •     Complicated frames, too many frames, unnecessary scroll bars in frames
  •     Orphan pages (no links back to where they came from, no identification)
  •     Useless page titles that don’t explain what the page is about

General Design

  •     Entry page or home page that does not fit within standard browser window (800 x 600 pixels)
  •     Frames that make you scroll sideways
  •     No focal point on the page
  •     Too many focal points on the page
  •     Navigation buttons as the only visual interest, especially when they’re large
  •     Cluttered, not enough alignment of elements
  •     Lack of contrast (in color, text, to create hierarchy of information, etc.)
  •     Pages that look okay in one browser but not in another

4. Conclusion

Web design is not as easy as it looks. Many elements have to contribute and collaborate as a whole in order to produce a good and complete website. It is also easy to disregard few simple rules that can make or break a website. Users are always looking for a better experience, and their demands grow larger and harder to fulfill each year. User experience will affect how they regard and make decisions concerning the host or company website. In summary, web design is driven by user satisfaction and the benchmark keeps growing higher over time. Constant updating of interactivity, creativity, aesthetics and performance are essential in web design.

Below is a client asking for unrealistic demands from a web designer:

References:

http://www.ratz.com/featuresgood.html

http://www.ratz.com/featuresbad.html

http://notalwaysright.com/tag/web-design

http://www.topdesignmag.com/20-examples-of-bad-web-design/

http://www.topdesignmag.com/25-winning-examples-of-css-based-websites/

[Week 4] Blog Post 3 – Error Message Design: Good and Bad Examples

1. Introduction

When a problem has occurred, a system alert users with an error message. Error messages can be presented as dialog boxes, in-place messages, notifications, or webpages. Effective error messages inform users that a problem occurred, explain why it happened, and provide a solution so users can fix the problem.

Well-written, helpful error messages are vital to a quality user experience. Poorly written error messages result in low product satisfaction, and are a leading cause of avoidable technical support costs.

A typical Window’s error message.

2. Good and Bad Examples of Error Message Design

1. Bad Error Messages

A bad error message usually brings frustration because they interrupt the user’s current activity and demand to be acknowledged before allowing the user to continue. Sometimes, it also bring humour because it does not make any sense to anyone other than the first person who put it there. We will take a look at some poorly written error messages.

This could quite possibly be the best Windows Vista error to date, or in other words, the OS has problems reporting a problem.

Windows gets freaky. To delete something, the user needs some space and for that he has to delete something else.

Users learn that there was an error, but have no idea what the error was or what to do about it.

2. Good Error Messages

In contrast to the previous bad examples, good error messages have:

  • A problem. States that a problem occurred.
  • A cause.        Explains why the problem occurred.
  • A solution. Provides a solution so that users can fix the problem.

We will list some well-written error messages.

These 2 error messages above is clear, concise and very helpful in guiding users.

This 404 error message is quite creative and humorous. It also provide user enough information. (catalyst studios 404)

3. Error Message Design Guideline

According to Jacob Nielsen, these following points are the key points in error message design:

1. Explicit: error message must indicate that something has gone wrong.

2. Human-readable: error message must be written in human language, not some code or abbreviation.

3. Polite: error message must not blame users or imply that they are either stupid or doing something wrong. We really like the way Firefox presents its error message.

4. Precise: error message must describe of exact problems, rather than vague generalities.

5. Constructive advice: error message must guide user how to fix the problem.

6. Visible: error message must be highly noticeable, both in terms of the message itself and how it indicates.

7. Preserve: error message must preserve users’ work and reduce the work of correcting the error.

Moreover, we find out there are some more points which are quite relevant to the design:

1. User-centered: error message must describe the problem in terms of target user actions or goals, not in terms of what the code is unhappy with.

2. Rare: error message must displayed infrequently. Frequently displayed error messages are a sign of bad design.

3. Funny: use relative humour is good but make sure it does not over-shadow your message. (For example: retardzone 404)

4. Conclusion

Often the best error message is no error message. Many errors can be avoided through better design, and there are often better alternatives to error messages. It is usually better to prevent an error than to report one.

However, error message is a crucial and unavoidable part of any system. Therefore, error message has to be carefully design to bring the best user experience.

This is one of the best 404 error message that we have found. It shows how creative an error message can be.  (bluedaniel 404)

References:

http://msdn.microsoft.com/en-us/library/windows/desktop/aa511267.aspx

http://www.useit.com/alertbox/20010624.html

http://blog.teamtreehouse.com/10-tips-on-writing-hero-worthy-error-messages