UI Design and Usability

Slide 1

Slide 1 text

SAE INSTITUTE, January 2013, Sidney De Koning UI Design and Usability Cross Media Communication & Production donderdag 14 februari 13 Week

Slide 2

Slide 2 text

Introduction ✤ Who are you? ✤ Who am i? donderdag 14 februari 13 Week

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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 efﬁcient as possible, in terms of accomplishing user goals—what is often called user-centered design.“ donderdag 14 februari 13 Week

Slide 6

Slide 6 text

What is UI design? “Good user interface design facilitates ﬁnishing 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

Slide 7

Slide 7 text

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 efﬁcient as possible. donderdag 14 februari 13 Week

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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 ﬁre 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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Things that make me think. donderdag 14 februari 13 Week

Slide 18

Slide 18 text

Things that don’t make me think. donderdag 14 februari 13 Week

Slide 19

Slide 19 text

Things that don’t make me think. donderdag 14 februari 13 Week

Slide 20

Slide 20 text

Things that make me think. donderdag 14 februari 13 Week

Slide 21

Slide 21 text

Things that make me think. donderdag 14 februari 13 Week

Slide 22

Slide 22 text

3 second test. ✤ Focus donderdag 14 februari 13 Week

Slide 23

Slide 23 text

donderdag 14 februari 13 Week

Slide 24

Slide 24 text

3 second test. ✤ What did you see? ✤ What did you remember? ✤ What stood out? donderdag 14 februari 13 Week

Slide 25

Slide 25 text

donderdag 14 februari 13 Week

Slide 26

Slide 26 text

3 second test. ✤ What did you see? ✤ What did you remember? ✤ What stood out? ✤ Good site: http://www.ﬁvesecondtest.com/ donderdag 14 februari 13 Week

Slide 27

Slide 27 text

donderdag 14 februari 13 Week

Slide 28

Slide 28 text

3 second test. ✤ What did you see? ✤ What did you remember? ✤ What stood out? donderdag 14 februari 13 Week

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Actively thinking ✤ Google.com / Yahoo.com ✤ Amazon.com / Bol.com ✤ BBC.co.uk / Nu.nl donderdag 14 februari 13 Week

Slide 31

Slide 31 text

Actively thinking donderdag 14 februari 13 Week

Slide 32

Slide 32 text

donderdag 14 februari 13 Week

Slide 33

Slide 33 text

donderdag 14 februari 13 Week

Slide 34

Slide 34 text

donderdag 14 februari 13 Week

Slide 35

Slide 35 text

donderdag 14 februari 13 Week

Slide 36

Slide 36 text

donderdag 14 februari 13 Week

Slide 37

Slide 37 text

donderdag 14 februari 13 Week

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Mental Models ✤ Mental model of Savana: donderdag 14 februari 13 Week

Slide 40

Slide 40 text

Mental Models ✤ Mental model of Savana: donderdag 14 februari 13 Week

Slide 41

Slide 41 text

Mental Models ✤ Mental model of Savana: donderdag 14 februari 13 Week

Slide 42

Slide 42 text

Mental Models ✤ Everybody has different mental models ✤ Usability makes sure that the is no other interpretation, by making use of speciﬁc guidelines. donderdag 14 februari 13 Week

Slide 43

Slide 43 text

Mental Models ✤ What is the mental model of an elevator? donderdag 14 februari 13 Week

Slide 44

Slide 44 text

Mental Models ✤ What is the mental model of an elevator? donderdag 14 februari 13 Week

Slide 45

Slide 45 text

Mental Models ✤ What is my mental model of an button? donderdag 14 februari 13 Week

Slide 46

Slide 46 text

Mental Models ✤ What is my mental model of an button? donderdag 14 februari 13 Week

Slide 47

Slide 47 text

Mental Models ✤ What does usability have to do with mental models? ✤ Users use their own mental models to perceive and ﬁgure 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

Slide 48

Slide 48 text

Categories Hierarchy Category: Chairs Abstraction How do humans think? donderdag 14 februari 13 Week

Slide 49

Slide 49 text

Shapes Trends Recognition Patterns How do humans think? donderdag 14 februari 13 Week

Slide 50

Slide 50 text

Recollection donderdag 14 februari 13 Week

Slide 51

Slide 51 text

Slide 52

Slide 52 text

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 ﬁgure something out Expected behavior UI System Actual Behavior donderdag 14 februari 13 Week

Slide 53

Slide 53 text

UI Design ✤ What are the most important Usability rules in User interface design? 1. Work ﬂow and prioritizing functions Rank most commonly used or most important menu items from top-down left-right. Visualize work ﬂow top-down left-right. donderdag 14 februari 13 Week

Slide 54

Slide 54 text

Workflow An example of an installation guide donderdag 14 februari 13 Week

Slide 55

Slide 55 text

Prioritizing An example of a Word processor donderdag 14 februari 13 Week

Slide 56

Slide 56 text

Workflow & Prioritizing An example of a web browser tool bar donderdag 14 februari 13 Week

Slide 57

Slide 57 text

Workflow & Prioritizing Nokia software installation guide...... ? donderdag 14 februari 13 Week

Slide 58

Slide 58 text

Workflow & Prioritizing Windows 1.01 / 1981 donderdag 14 februari 13 Week

Slide 59

Slide 59 text

Workflow & Prioritizing Gnome (Linux) Mac 2008 donderdag 14 februari 13 Week

Slide 60

Slide 60 text

Inform the user of the state of the system donderdag 14 februari 13 Week

Slide 61

Slide 61 text

Inform the user of the state of the system Media players / Pause and play buttons donderdag 14 februari 13 Week

Slide 62

Slide 62 text

UI Design ✤ What are the most important Usability rules in User interface design? Work ﬂow and prioritizing functions 1. Rank most commonly used or most important menu items from top-down left-right. Visualize work ﬂow top-down left-right. Match between system and the real world 2. Language, terminology, part of speech, translation, semantics donderdag 14 februari 13 Week

Slide 63

Slide 63 text

UI Design Gnome Mac 2008 donderdag 14 februari 13 Week

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

High level navigation amazon.com nu.nl Navigation examples donderdag 14 februari 13 Week

Slide 71

Slide 71 text

Low level navigation bellen.nl (good product navigation) consumer.philips.com (Filtering and sorting are mixed up) Navigation examples donderdag 14 februari 13 Week

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

Tree-categorizing” of extensive product information. 3. Match between system and the real world donderdag 14 februari 13 Week

Slide 74

Slide 74 text

“Tree-categorizing” of extensive product information. Tree - categorizing of extensive product information. donderdag 14 februari 13 Week

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

Grouping Page-online.de Designcouncil Mediamatic Red-dot.de donderdag 14 februari 13 Week

Slide 77

Slide 77 text

Avoiding Mistakes: ˒ Question conventions ˒ Informal reviewing ˒ Early prototyping ˒ Evaluation ˒ Recognized method ˒ Own method ˒ More? Click me! Avoiding mistakes donderdag 14 februari 13 Week

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

Why test? ✤ Jacob Nielsens study (link) shows that with 5 users you reveal 85% of your site’s problems. 15 users ﬁnd pretty much all problems. (truth: zero users results in zero insight) donderdag 14 februari 13 Week

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

Different methods of testing ✤ Heuristic testing ✤ One person, one observer. ✤ Working prototype of site/app. ✤ Cognitive testing ✤ More people, one hall monitor. ✤ Give user speciﬁc task. ✤ Theoretical or working prototype. donderdag 14 februari 13 Week

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

✤ 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

Slide 87

Slide 87 text

✤ 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

Slide 88

Slide 88 text

✤ 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

Slide 89

Slide 89 text

✤ 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 ﬁnd nearby camping or hotels. They ﬁnd 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

Slide 90

Slide 90 text

✤ Begin with the low hanging fruit - easy questions ﬁrst - 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

Slide 91

Slide 91 text

✤ Don’t ‘lead the witness’ Write the task as “ﬁnd 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

Slide 92

Slide 92 text

✤ Different tests: ✤ impression tests, 5 second test: http://clueapp.com/ and http://ﬁvesecondtest.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

Slide 93

Slide 93 text

✤ 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

Slide 94

Slide 94 text

✤ Test setup: ✤ Old mobile phone or camera with video possibility ✤ Wood ﬁxture / Ikea lamp / Tripod ✤ Tie wraps / sugru ✤ Reﬂection / Silverback ✤ Cost: -/+ 15 euro Mobile testing donderdag 14 februari 13 Week