1 / 45

Chapter 7 User Interface Design

Chapter 7 User Interface Design. Chapter 16 of textbook. Memory Game. In the following slide you will see a collection of objects. Have a look for 15 seconds. Results. On a piece of paper write down what you remember. How many items did you remember? Average = 7+/-2. How to improve STM.

trinh
Télécharger la présentation

Chapter 7 User Interface Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 7User Interface Design Chapter 16 of textbook

  2. Memory Game In the following slide you will see a collection of objects. Have a look for 15 seconds.

  3. Results On a piece of paper write down what you remember. How many items did you remember? Average = 7+/-2

  4. How to improve STM New study finds that short-term memory is improved 20% by walking in nature, or even just by looking at an image of a natural scene.

  5. Human factors in interface design • Limited short-term memory • People can instantaneously remember about 7 items of information. If you present more than this, they are more liable to make mistakes. • People make mistakes • When people make mistakes and systems go wrong, inappropriate alarms and messages can increase stress and hence the likelihood of more mistakes. • People are different • People have a wide range of physical capabilities. Designers should not just design for their own capabilities. • People have different interaction preferences • Some like pictures, some like text.

  6. Class Activity What do you think makes a good interface? Share your thoughts with the rest of the class.

  7. User interface design principles

  8. User Interaction

  9. Sample User Interfaces Have a look at the following user interfaces and try to identify the method of user interaction (how the user provides input to the system).

  10. User interfaces • Pizzatron • Mosquito Basher • Chinese Table • Amazon.com • Windows prompt • Firefox Ubiquity

  11. Interaction styles • Direct manipulation • Menu selection • Form fill-in • Command language • Natural language What do you think are the advantages and disadvantages of each method?

  12. Interaction styles

  13. Web-based interfaces What user interaction elements might you see on a web-based interface? Have a look at the following video and make a list of interface options. Expedi.com

  14. Information presentation Style Color Messages

  15. Information presentation

  16. Information display factors • Is the user interested in precise information or data relationships? • How quickly do information values change? Must the change be indicated immediately? • Must the user take some action in response to a change? • Is there a direct manipulation interface? • Is the information textual or numeric? Are relative values important?

  17. Alternative information presentations

  18. Presentation methods • Dynamic numeric information is displayed using analogue representation. • It may supplemented with a precise digital display

  19. Displaying relative values • Continuous analogue display gives the viewer a sense of relative value.

  20. Data visualisation • Concerned with techniques for displaying large amounts of information. • Visualisation can reveal relationships between entities and trends in the data.

  21. Example data visualizations • The ksu-it website (hyper linking) • What do the colors mean?blue: for links (the A tag)red: for tables (TABLE, TR and TD tags)green: for the DIV tagviolet: for images (the IMG tag)yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)orange: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)black: the HTML tag, the root nodegray: all other tags • GapMinder Trendalyzer • Google Earth

  22. Data visualization -resources • Gapminder http://www.gapminder.org • Web pages as graph http://www.aharef.info/static/htmlgraph/ • CrazyEgg http://crazyegg.com/ • Time magazine http://www.time.com/time/covers/20061030/where_we_live/

  23. Color

  24. What’s your verdict?

  25. Colour displays • Colour adds an extra dimension to an interface and can help the user understand complex information structures. • Colour can be used to highlight exceptional events. • Common mistakes in the use of colour in interface design is the over-use of colour in the display.

  26. Colour use guidelines • Limit the number of colours used and be conservative in their use. • Use colour change to show a change in system status. • Use colour coding to support the task that users are trying to perform. • Use colour coding in a thoughtful and consistent way. • Be careful about colour pairings.

  27. More about color • Colour Matters • http://www.colormatters.com/ • Colour combinations: • http://www.webdevelopersnotes.com/design/color_combinations.php3

  28. Error Messages Watch the following clip and comment on the error message displayed. The video clip shows a staff member trying to change the password

  29. Error messages What do you think error messages should look like (wording)? What factors are necessary for considering when writing error messages?

  30. Design factors in message wording

  31. User error • Assume that a nurse misspells the name of a patient whose records he is trying to retrieve.

  32. Good and bad message design

  33. References • Nature Walk improves short term memory • http://www.spring.org.uk/2009/01/memory-improved-20-by-nature-walk.php • An example of a bad interface • http://www.angelfire.com/super/badwebs/

More Related