Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application
Click to edit Master subtitle style
USABILITY and USER INTERFACE DESIGN
Application
Exercise – Part 1
Design the web-site for your customer. (we will take the example of wikipedia website and analyse it).
Consider: What is the purpose of the web-site? Who are the users? What features and tools are needed in such a web-site?
Are these already documented as requirements?
Have you documented any usability requirements?
Choose the look-and-feel and layout.
Create a site map.
You should have done this already. Right?
Site map
Exercise – Part 2
Create a scenario for one part of the site based on your most important use case .
Create a (possibly paper) prototype that realizes your scenario.
Walk through the prototype yourself (pretend to be a user).
Think about the flow of the site, layout, visual appeal, use of colors, icons, etc.
Save your work!!!!!
Interface/Dialogue Design
The team needs to worry about:Layout (of buttons, text, table data, …)Controlling data input (validation and format controls)Feedback (prompting, status, warning, and error messages)Dialogue sequencing
What Is a Dialogue?
A sequence of interactions between the system and a user
Dialogue design involves:Designing a dialogue sequence
Building a prototype
Assessing usability
GUI Design Guidelines
User in control
Consistency
Personalization & Customization
Forgiveness
Feedback
Aesthetics & Usability
User in Control
users should feel that they initiate and control actions
Consistency
The conformance to the naming, coding and other GUI-related standards developed internally by the organization
This includes the naming and coding of menus, action buttons, screen fields, etc. It also includes standards for the placement of screen objects and consistent use of other GUI elements across applications.
Personalization & Customization
GUI personalization is customization for personal use
e.g. a user reorders and resizes columns in a grid display and saves these changes as preferences
GUI customization is an administrative task of tailoring the software to different groups of users
e.g. when the program operates differently for novice and advanced users
Forgiveness
A good interface allows users to experiment and make mistakes in a “forgiving” way
Forgiveness encourages interface exploration because the user is allowed to take erroneous routes that can be “rolled back”.
Feedback
It tells the user what’s happening, or what’s going to happen next, and without it the user is left guessing or frustrated.
Aesthetics & Usability
Aesthetics is about visual appeal.
Usability is about the ease, simplicity, efficiency, reliability in using the interface.
Aesthetics and Usability
The issues to consider includethe use of colors,
the alignment and spacing of elements,
the sense of proportion,
the grouping of related elements, etc.
Exercise – Part 3
Choose one more scenario for your web-site based on your use cases.Create a prototype (paper, HTML, Visio, …) for this scenario.Save your work!!!!!
Ten Golden Usability RulesA great set of guidelines created by Jakob Nielsen in his book Usability Engineering.
1. Use simple and natural dialog/language.
User interfaces should be simplified as much as possible, eliminating as much as possible the additional features.
Ten Golden Usability Rules
2. Use language that fits the user group.
The language should be based on user’s language. Time, currency, phrases, metaphors, measurements, etc. must fit the culture of the user group.
Ten Golden Usability Rules
3. Minimize the load on short-term memory.
Users should not have to remember information from one part of the dialogue to another.
Ten Golden Usability Rules
4. Make the graphical user interface coherent and consistent.
The same action should always have the same effect. Users will feel confident in using the system.Example: open in a new tab
Ten Golden Usability Rules
5. Give the ability to use shortcuts. function keys, command keys, macros,
etc. to speed up the interaction for the expert’s users
Ten Golden Usability Rules
6. Give feedback to the user's actions. The system should always keep users
informed about what is going on, through appropriate feedback within reasonable time.
Ten Golden Usability Rules
7. Avoid error situations. Ask the user if s/he really wants to do
the action especially if the action leads to serious consequences. Avoid having too similar commands in the interface.
Commands whose actions are opposite should not be placed close to each other.
Ten Golden Usability Rules
8. Give clear exit marks. In the navigation bars, the users should
be able to back up.
Ten Golden Usability Rules
9. Give clear and understandable error messages.
Simple rules for error messages: should be phrased clearly and avoid obscure codesmessages should be polite and not intimidate the user or put the blame explicitly on the user
Ten Golden Usability Rules
10. Give clear help and understandable documentation.
Information should be easy to search.
The help manual should not be too large.
Usability testing
Step 1: Plan the Tests
Determine how many users will participate in the testEstimate how many tests will be required over the development cycleDetermine usability objectives and what functions will be testedDevelop evaluation measures (timing data, error counts, rating scales, etc.)
Step 2: Conduct the Tests
Provide introduction/overview for users (reinforce the fact that the application or website is being tested; the users are NOT the subjects of the test)Provide training for usersHave observers watch, listen, and take notes
Watch Users Work!!
Sometimes users will say they are likely to do something, but their actual behavior indicates otherwise.Better to learn from observing direct user behavior.Watch them as they attempt to use your application or website.DTM (Duct-Tape Method)
Step 3: Debrief the Users
Collect observation/evaluation data from users
Have users complete evaluation forms
Allow users to express their reactions about the test
Post-Test Work
Analyze data
Identify usability problems AND SOLUTIONS
Identify problem severity
Identify software bugs (maybe)
Conduct second round of testing (if necessary) and if time/resources permit
Exercise – Part 4
Evaluate your GUI for your web-site (consider the usability principles and testing techniques).
Plan tests for at least the four scenarios that you have previously created.
Get at least three users (people who are NOT in this class) to walk through and evaluate your design.
Perform your measurements, interviews, observations, etc.
Exercise – Part 5
Summarize what you have learned in terms of usability principles.