UI Design and Usability

Transcript

1. SAE INSTITUTE, January 2013, Sidney De Koning UI Design and Usability Cross Media Communication & Production donderdag 14 februari 13 Week
2. Introduction ✤ Who are you? ✤ Who am i? donderdag 14 februari 13 Week
3. Sidney de Koning ✤ Love coding and cooking ✤ Blogger: O’Reilly, FITC, Adobe, Funky Monkey, Culinerd ✤ Writer: Automating Actionscript Projects. ✤ Business owner - Mobile: Mannetje de Koning / Appcouture ✤ www.funky-monkey.nl ✤ www.culinerd.nl ✤ www.mannetjedekoning.nl donderdag 14 februari 13 Week
4. Course Overview ✤ What is Usability and why is it important? ✤ What is UI Design and why is it important? ✤ How do your users see the web? ✤ Ask questions and rethink you own browsing. donderdag 14 februari 13 Week
5. What is UI design? “The design of computers, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user's experience and interaction. The goal of user interface design is to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goals—what is often called user-centered design.“ donderdag 14 februari 13 Week
6. What is UI design? “Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design may be utilized to support its usability. The design process must balance technical functionality and visual elements (e.g., mental model) to create a system that is not only operational but also usable and adaptable to changing user needs.” Source: Wikipedia donderdag 14 februari 13 Week
7. But what does it mean in plain English? User interface design is the practice of creating something that a person interfaces or interacts with. Concrete objects or virtual ones. The person creating that experience has already done the thinking and makes sure that the interaction happens as simple and as efficient as possible. donderdag 14 februari 13 Week
8. What is Usability? “Usability is the ease of use and learnability of a human- made object. The object of use can be a software application, website, book, tool, machine, process, or anything a human interacts with.” Source: Wikipedia donderdag 14 februari 13 Week
9. What is Usability? “It is widely used in consumer electronics, communication, and knowledge transfer objects (such as a cookbook, a document or online help) and mechanical objects such as a door handle or a hammer.“ Source: Wikipedia donderdag 14 februari 13 Week
10. When ever you use a product (or any other object you interact with) or a website it should be easy to use and have a small (or no) learning curve. But what does it mean in plain English? donderdag 14 februari 13 Week
11. History of Usability First design principles: Vitruvius, 1st century BC. 1. Firmitas: The strength and durability of the design; 2. Utilitas: A design’s usefulness and suitability for the needs of its intended users; 3. Venustas: The beauty of the design. donderdag 14 februari 13 Week
12. History of Usability: Military WWI & WWII: Canon design - Usability resulted in greater kills and shorter training for personnel. Question at the time: “What design do we need, to kill more enemies through better matching soldier and weapon? And thus avoid getting killed ourselves.” • How quickly will a new crew member learn how to use the artillery cannon? • How many rounds per minute (ordnance) is the cannon able to fire with an inexperienced versus an experienced crew? • How does a design improvement decrease soldier fatigue (as a consequence of a lighter cognitive load)? donderdag 14 februari 13 Week
13. History of Usability: Recent Companies assume people know computers and assume people know how to use them. They are wrong. Think Apple Video: Google Chrome donderdag 14 februari 13 Week
14. Thinking is bad. Or at least when you are visiting a website. Let UI designers do the thinking for you. donderdag 14 februari 13 Week
15. Enjoy != Annoy ✤ A well designed website is enjoyable. ✤ A bad designed website is annoying. ✤ A good designed site is like good lighting in a store: everything seems better donderdag 14 februari 13 Week
16. Things that make me think. ✤ Puzzles ✤ Buttons ✤ Titles / Text ✤ Links ✤ Where am i? ✤ Where should i begin? ✤ Where did they put _____ ? ✤ What is the most important? ✤ Why did they call it that? donderdag 14 februari 13 Week
17. Things that make me think. donderdag 14 februari 13 Week
18. Things that don’t make me think. donderdag 14 februari 13 Week
19. Things that don’t make me think. donderdag 14 februari 13 Week
20. Things that make me think. donderdag 14 februari 13 Week
21. Things that make me think. donderdag 14 februari 13 Week
22. 3 second test. ✤ Focus donderdag 14 februari 13 Week
23. donderdag 14 februari 13 Week
24. 3 second test. ✤ What did you see? ✤ What did you remember? ✤ What stood out? donderdag 14 februari 13 Week
25. donderdag 14 februari 13 Week
26. 3 second test. ✤ What did you see? ✤ What did you remember? ✤ What stood out? ✤ Good site: http://www.fivesecondtest.com/ donderdag 14 februari 13 Week
27. donderdag 14 februari 13 Week
28. 3 second test. ✤ What did you see? ✤ What did you remember? ✤ What stood out? donderdag 14 februari 13 Week
29. But why is it important? ✤ Sometimes the competition is just a click away ✤ People will blame themselves and not the site donderdag 14 februari 13 Week
30. Actively thinking ✤ Google.com / Yahoo.com ✤ Amazon.com / Bol.com ✤ BBC.co.uk / Nu.nl donderdag 14 februari 13 Week
31. Actively thinking donderdag 14 februari 13 Week
32. donderdag 14 februari 13 Week
33. donderdag 14 februari 13 Week
34. donderdag 14 februari 13 Week
35. donderdag 14 februari 13 Week
36. donderdag 14 februari 13 Week
37. donderdag 14 februari 13 Week
38. Mental Models ✤ We create mental models of everything around us. ✤ They are representation in your mind, of real or imaginary objects or situations ✤ We do this to make sense of the world around us. donderdag 14 februari 13 Week
39. Mental Models ✤ Mental model of Savana: donderdag 14 februari 13 Week
40. Mental Models ✤ Mental model of Savana: donderdag 14 februari 13 Week
41. Mental Models ✤ Mental model of Savana: donderdag 14 februari 13 Week
42. Mental Models ✤ Everybody has different mental models ✤ Usability makes sure that the is no other interpretation, by making use of specific guidelines. donderdag 14 februari 13 Week
43. Mental Models ✤ What is the mental model of an elevator? donderdag 14 februari 13 Week
44. Mental Models ✤ What is the mental model of an elevator? donderdag 14 februari 13 Week
45. Mental Models ✤ What is my mental model of an button? donderdag 14 februari 13 Week
46. Mental Models ✤ What is my mental model of an button? donderdag 14 februari 13 Week
47. Mental Models ✤ What does usability have to do with mental models? ✤ Users use their own mental models to perceive and figure out how a system works. ✤ This is not an active process. ✤ We have to streamline the way a user thinks by thinking for them. donderdag 14 februari 13 Week
48. Categories Hierarchy Category: Chairs Abstraction How do humans think? donderdag 14 februari 13 Week
49. Shapes Trends Recognition Patterns How do humans think? donderdag 14 februari 13 Week
50. Recollection donderdag 14 februari 13 Week
51. Mental Models ✤ We create mental models of everything around us. ✤ They are representation in your mind, of real or imaginary objects or situations ✤ We do this to make sense of the world around us. donderdag 14 februari 13 Week
52. What do mental models have to do with usability? ✤ Users use their own mental models to perceive how a system works. If the don’t, they’ll figure something out Expected behavior UI System Actual Behavior donderdag 14 februari 13 Week
53. UI Design ✤ What are the most important Usability rules in User interface design? 1. Work flow and prioritizing functions Rank most commonly used or most important menu items from top-down left-right. Visualize work flow top-down left-right. donderdag 14 februari 13 Week
54. Workflow An example of an installation guide donderdag 14 februari 13 Week
55. Prioritizing An example of a Word processor donderdag 14 februari 13 Week
56. Workflow & Prioritizing An example of a web browser tool bar donderdag 14 februari 13 Week
57. Workflow & Prioritizing Nokia software installation guide...... ? donderdag 14 februari 13 Week
58. Workflow & Prioritizing Windows 1.01 / 1981 donderdag 14 februari 13 Week
59. Workflow & Prioritizing Gnome (Linux) Mac 2008 donderdag 14 februari 13 Week
60. Inform the user of the state of the system donderdag 14 februari 13 Week
61. Inform the user of the state of the system Media players / Pause and play buttons donderdag 14 februari 13 Week
62. UI Design ✤ What are the most important Usability rules in User interface design? Work flow and prioritizing functions 1. Rank most commonly used or most important menu items from top-down left-right. Visualize work flow top-down left-right. Match between system and the real world 2. Language, terminology, part of speech, translation, semantics donderdag 14 februari 13 Week
63. UI Design Gnome Mac 2008 donderdag 14 februari 13 Week
64. Match between system and the real world Media 1. A plural of medium. See Usage Note at medium. Medium 1. Something, such as an intermediate course of action, that occupies a position or represents a condition midway between extremes. ... 4. pl. media Usage Problem. a. A means of mass communication, such as newpapers, magazines, radio, or television. b. media (used with a sing. or pl. verb) The group of journalists and others who constitute the communications industry and profession. 5. pl. media Computer Science. An object or device, such as a disk, on which data is stored. 6. pl. mediums A person thought to have the power to communicate with the spirits of the dead or with agents of another world or dimension. Also called psychic. 7. pl. media a. A surrounding environment in which something functions and thrives. b. The substance in which a specific organism lives and thrives. c. A culture medium. ... 11. A size of paper, usually 18 × 23 inches or 17 1/2 × 22 inches. donderdag 14 februari 13 Week
65. Match between system and the real world Sheet 1. A broad rectangular piece of fabric serving as a basic article of bedding. 2. a. A broad, thin, usually rectangular mass or piece of material, such as paper, metal, glass, or plywood. b. A flat or very shallow, usually rectangular pan used for baking. 3. A broad, flat, continuous surface or expanse: a sheet of ice. 4. A moving expanse: a sheet of flames. 5. A newspaper, especially a tabloid. 6. Geology. A broad, relatively thin deposit or layer of igneous or sedimentary rock. 7. A large block of stamps printed by a single impression of a plate before the individual stamps have been separated. 8. Mathematics. A surface of revolution generated by revolving a hyperbola about one of its two symmetric axes. donderdag 14 februari 13 Week
66. Match between system and the real world Page 1. a. A leaf or one side of a leaf, as of a book, letter, newspaper, or manuscript: tore a page from the book. b. The writing or printing on one side of a leaf. c. The type set for printing one side of a leaf. 2. A noteworthy or memorable event: a new page in history. 3. Computer Science. A quantity of memory storage equal to between 512 and 4,096 bytes. 4. Computer Science. A webpage. 5. pages A source or record of knowledge: in the pages of science. donderdag 14 februari 13 Week
67. User’s Mental Models of web content.. .. how is the content accessed? .. using Analogies? .. using Metaphors? .. using Stereotypes? .. using Functions? Match between system and the real world donderdag 14 februari 13 Week
68. The content accessed through.. Grouping information visually / Semantically Text Typeface / line space / length of sentences Colors Wave length / Contrast Match between system and the real world donderdag 14 februari 13 Week
69. The content is displayed using conventions (Conventions are called conventions because they work for the large majority) For example: A shopping cart Site navigation on the left Tabs Conventions donderdag 14 februari 13 Week
70. High level navigation amazon.com nu.nl Navigation examples donderdag 14 februari 13 Week
71. Low level navigation bellen.nl (good product navigation) consumer.philips.com (Filtering and sorting are mixed up) Navigation examples donderdag 14 februari 13 Week
72. More Examples red-dot.de (Expandable menus issue) www.mediamatic.net (Good text layout) designcouncil.org.uk (Graphically busy page) page-online.de ......Where am I? More examples donderdag 14 februari 13 Week
73. Tree-categorizing” of extensive product information. 3. Match between system and the real world donderdag 14 februari 13 Week
74. “Tree-categorizing” of extensive product information. Tree - categorizing of extensive product information. donderdag 14 februari 13 Week
75. Grouping information and layout 4. Match between system and the real world ✤ What are the most important Usability rules in User interface design? donderdag 14 februari 13 Week
76. Grouping Page-online.de Designcouncil Mediamatic Red-dot.de donderdag 14 februari 13 Week
77. Avoiding Mistakes: ˒ Question conventions ˒ Informal reviewing ˒ Early prototyping ˒ Evaluation ˒ Recognized method ˒ Own method ˒ More? Click me! Avoiding mistakes donderdag 14 februari 13 Week
78. Usability Testing (on a budget) ✤ Why test? The Rules. ✤ Different methods of testing. ✤ Test? How? ✤ Scenarios ✤ Personas ✤ Online ✤ Onsite ✤ Mobile testing? donderdag 14 februari 13 Week
79. Usability Testing (on a budget) ✤ Myth #22: Usability testing is expensive. ✤ Testing can be done by students or interns ✤ No money? Offer free lunch or other fun incentives. donderdag 14 februari 13 Week
80. Why test? ✤ Jacob Nielsens study (link) shows that with 5 users you reveal 85% of your site’s problems. 15 users find pretty much all problems. (truth: zero users results in zero insight) donderdag 14 februari 13 Week
81. Why test? ✤ Knowledge + learning + change = better site or app ✤ After design changes, test! ✤ After minor changes, test. ✤ During development, test. ✤ Before, during and after site is done - test. ✤ Test, test, test! donderdag 14 februari 13 Week
82. Why test? The rules. ✤ The first rule of Usability Test Club is: You do talk about Usability Test Club. ✤ The second rule of Usability Test Club is: You do talk about Usability Test Club. ✤ Third rule of Usability Test Club: someone yells stop, goes limp, taps out, the test is over. ✤ Fourth rule: minimum of 5 people for a test. ✤ Fifth rule: one test at a time, fellas. ✤ Sixth rule: try to do a minimum of 5 tests per site or app ✤ Seventh rule: tests will go on as long as the task in the script tells you. ✤ And the eighth and final rule: if this is your first time at Usability Test Club, you have to test. donderdag 14 februari 13 Week
83. Different methods of testing ✤ Heuristic testing ✤ One person, one observer. ✤ Working prototype of site/app. ✤ Cognitive testing ✤ More people, one hall monitor. ✤ Give user specific task. ✤ Theoretical or working prototype. donderdag 14 februari 13 Week
84. Test? How? ✤ Make the user feel comfortable ✤ Be careful how you phrase your questions ✤ Do not lead the user ✤ Tell the user to “think out loud” ✤ Pay attention to facial gestures ✤ Identify frustration and emotion ✤ Keep track of hesitation and time delays ✤ Refrain from attempting to assist the user donderdag 14 februari 13 Week
85. Test? How? ✤ To perform a proper test you need: ✤ Personas - Who is this person that is visiting our site? ✤ Scenarios - Describe the user's goals and the tasks he/ she will want to accomplish. donderdag 14 februari 13 Week
86. ✤ The people and pictures can be fictional but the details should be factual. What do they do? And for how long? How do they live? And where? What do they eat? And why? ✤ Why personas? Defining a specific user's goals and needs Giving teams a focus with a common understanding Personas donderdag 14 februari 13 Week
87. ✤ Bob is 52 years old and works as a mechanic with an organization offering road service to customers when their car breaks down. He has worked in the job for the past 12 years and knows it well. Many of the younger mechanics ask Bob for advice when they meet up in the depot as he always knows the answer to tricky mechanical problems. Bob likes sharing his knowledge with the younger guys, as it makes him feel a valued part of the team. ✤ Bob wonders if he will be able to cope with the new computer system. He doesn’t mind asking his grandchildren for help when he wants to send an email to his brother overseas, but asking the guys at work for help is another story. Personas - Example donderdag 14 februari 13 Week
88. ✤ Write an engaging scenario, with style “When you got home from work you found the fire department at your home and your house in ashes. You are in shock. You need to contact your insurance company and what you should do now and also find out if they can arrange for a place for you to stay while you get this disaster sorted out. is more engaging than: “You are trying to figure out how to file a claim on your insurance policy.” Scenarios - Tips donderdag 14 februari 13 Week
89. ✤ Examples: “I want users to be able to easily use the information on my site to plan a road trip around the Southwest. My scenario: Parents of 2 pre-teens want to take a road trip around Colorado and Utah. They want to start in Denver, stop at archaeology sites, go on hikes, and find nearby camping or hotels. They find my site by doing a search on Google for ‘visiting Anasazi ruins by car.’" “I have an online jewelry store. We put our URL in our newspaper ads and most people get to us by typing the address. A shopper should be able to compare rings in a particular price range ($500 to $1000, for example), get answers to questions (can I pick the gemstone, for example), pick one, and buy it online.” Scenarios - Tips donderdag 14 februari 13 Week
90. ✤ Begin with the low hanging fruit - easy questions first - What is your general impression on this site? - What is the site about? - How long does it take before you understand what the site is about? Scenarios - Tips donderdag 14 februari 13 Week
91. ✤ Don’t ‘lead the witness’ Write the task as “find the right electric drill that will meet your needs” rather than “Click the link that says hardware. Then click on power tools. Then pick an electric drill.” Scenarios - Tips donderdag 14 februari 13 Week
92. ✤ Different tests: ✤ impression tests, 5 second test: http://clueapp.com/ and http://fivesecondtest.com/ ✤ click tests and heatmaps/confettimaps / : http://theclicktest.com/ and http://www.crazyegg.com/ ✤ humans tests (on a budget): https://www.mturk.com/ Test? How? - Online donderdag 14 februari 13 Week
93. ✤ Simple setup: Laptop / screen record setup ✤ Usability labs / camera - observer user situation. ✤ Screen record software: ✤ Silverback ✤ Camtasia / Morae ✤ iMovie ✤ Screen record App in Quicktime ✤ Cost: +/- 50 euro Test? How? - Onsite donderdag 14 februari 13 Week
94. ✤ Test setup: ✤ Old mobile phone or camera with video possibility ✤ Wood fixture / Ikea lamp / Tripod ✤ Tie wraps / sugru ✤ Reflection / Silverback ✤ Cost: -/+ 15 euro Mobile testing donderdag 14 februari 13 Week
95. Mobile testing donderdag 14 februari 13 Week
96. Mobile testing donderdag 14 februari 13 Week
97. Mobile testing donderdag 14 februari 13 Week
98. Mobile testing donderdag 14 februari 13 Week
99. Mobile testing donderdag 14 februari 13 Week
100. Mobile testing donderdag 14 februari 13 Week
101. Mobile testing donderdag 14 februari 13 Week
102. Mobile testing donderdag 14 februari 13 Week
103. Mobile testing donderdag 14 februari 13 Week