Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UI Design and Usability

De0f8ba991b57769a21bbedc76045c6a?s=47 Sidney de Koning
February 14, 2013

UI Design and Usability

De0f8ba991b57769a21bbedc76045c6a?s=128

Sidney de Koning

February 14, 2013
Tweet

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