COAP:COAP-2100/Web design

Introduction

Topics presented and discussed in class ...

Usability

The general principles are: efficiency, effectiveness and sastisfaction.

These principles can be detailed as:

• easy to learn (task time)
• efficient to use (task time)
• effective to use (errors and task completion)
• provides quick recovery from errors (errors and task completion)
• easy to remember (task time)
• enjoyable to use (subjective user satisfaction)
• visually pleasing (subjective user satisfaction)

Usability.gov presents a similar list:

1. Ease of learning - How fast can a user who has never seen the user interface before learn it sufficiently well to accomplish basic tasks?
2. Efficiency of use - Once an experienced user has learned to use the system, how fast can he or she accomplish tasks?
3. Memorability - If a user has used the system before, can he or she remember enough to use it effectively the next time or does the user have to start over again learning everything?
4. Error frequency and severity - How often do users make errors while using the system, how serious are these errors, and how do users recover from these errors?
5. Subjective satisfaction - How much does the user like using the system?

Summary:

• Basically, usability testing means giving people tasks to do and observing them
• Only user experience (satisfaction and related) is measured with questionnaires

We will look at the Short (informal) usability test report template (DOC - 216KB) template from usability.gov:

Landing page optimization

The five second test according to Oli Gardner

1. What is it about?: How obvious is the core brand message?
2. Do I care?: Am I interested? Does it speak to me?
3. Is it trustworthy?: Does the design make me feel comfortable? Do they appear professional?
4. How do I participate?: What am I supposed to do first? Is the primary call to action presented in a clear manner?
5. Is it newsworthy?: Given today’s social web economy, how likely am I to want to share my experience? Is this facilitated in any way?

Contents of the landing page

• Nielson's list

Web site layout navigation principles

(Lynch and Horton):

• No dead-end pages
• Direct access
• Simplicity and consistency
• Design integrity and stability
• Feedback and dialog
• Bandwidth and interaction
• Interface design conventions (picture)

Wireframing - a first stage in proto-typing

• Drawing a sketch for a "multi-boxed" web page (e.g. a portal). Demo of Mockingbird and Mockflow
• Using a drawing tool such as Inkscape or a genral-purpose online drawing tool. Demo of Inkscape (free drawing tool), Gliffy and Creatly.
• Templating (very short introduction, this is more a self-study object for those who are able to dig into technical documentation and maybe some XML)

Reading

Read each of these texts. total reading should be less than an hour. I am not requiring recall of details, but ought to be able to locate information in these texts ....

• Top Ten Guidelines for Homepage Usability (Jakob Nielsen)
• The Elements of User Experience (the complicated picture) by Jess James Garet
• Interface Design (part of Lynch and Norton's Web Style Guide)
• Usability testing on 10 cents a day by Steve Krug
• Top 10 best designed web sites by Scratch (this is just one of many such lists, look at 1-2 examples)
• The 5 Second Rule: Critiquing the Best Websites of 2009 – Part 1 (demonstrates a method to judge initial user experience/usability)

Prototyping and wireframing (tested in exam !)

• Paper Prototyping by Shwan Medero, A List Apart, 2007.
• Website wireframe (Wikipedia)