1. Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

2. 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?

3. Site map

4. 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!!!!!

5. 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

6. 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

7. GUI Design Guidelines User in control Consistency Personalization & Customization Forgiveness Feedback Aesthetics & Usability

8. User in Control users should feel that they initiate and control actions

9. 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.

10. 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

11. 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”.

12. 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.

13. Aesthetics & Usability Aesthetics is about visual appeal. Usability is about the ease, simplicity, efficiency, reliability in using the interface.

14. Aesthetics and Usability The issues to consider include the use of colors, the alignment and spacing of elements, the sense of proportion, the grouping of related elements, etc.

15. 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!!!!!

16. Ten Golden Usability Rules A 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.

17. 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.

18. 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.

19. 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

20. 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

21. 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.

22. 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.

23. Ten Golden Usability Rules 8. Give clear exit marks. In the navigation bars, the users should be able to back up.

24. Ten Golden Usability Rules 9. Give clear and understandable error messages. Simple rules for error messages: should be phrased clearly and avoid obscure codes messages should be polite and not intimidate the user or put the blame explicitly on the user

25. 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.

26. Usability testing

27. Step 1: Plan the Tests Determine how many users will participate in the test Estimate how many tests will be required over the development cycle Determine usability objectives and what functions will be tested Develop evaluation measures (timing data, error counts, rating scales, etc.)

28. 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 users Have observers watch, listen, and take notes

29. 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)

30. 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

31. 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

32. 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.

33. Exercise – Part 5 Summarize what you have learned in terms of usability principles.