UserInterfacePrinciples MattiasArvola 36 37 38 39 40 41 42 43 44 GROUP PROJECT1 WORK 45 45 47 48 49 50 51 52 1 2 PROJECT2 1day/week Checkpoint Research Deadline Concept Checkpoint Revisions Deadline Detailing DeadlineIdeaLog (andProcessBook) INDIVIDUAL DESIGN WORK 1day/week READINGS Seminar1 Seminar2 Seminar3 (Deadline CriticalReview) 3 Concept Design Revisionsand DetailedDesign UserResearch 4 Thesecondgroupassignment • Revisions of ideas and Detailing of solutions • Read Ch. 4 in Arvola (2014), OR Ch. 7-8 in Saffer (2009) and Ch. 1-9 in Krug (2014) • Lectures: • User Interface Principles by Mattias Arvola. • Sketching and Exploration by Martin Hanberger, • Paper Prototypes and Formative Usability Testing by Tim Overkamp. • Computer Prototypes by Mattias Arvola. • Quantitative Usability Testing by Johan Åberg. 5 RevisionofIdeas Turn your objectives and concepts into: 1.requirements 2.sketched user interfaces 1.wireframes —> wire flows 2.(sitemaps) 3.paper prototypes that covers the most important tasks that your design should support. 3.Formative usability test of the paper prototype (Thursday 2015-11-19) 6 Theindividualdesignassignment • You are now expected to have done some user research and developed a bunch of concept ideas (the WHAT and WHY phase) • Now go for one of them in the HOW phase of revisions and detailing 7 Today • • • • • Principles Usability Use-quality Heuristics If there is time: Heuristic evaluation 8 Affordance Perceived and actual properties of a thing that decide what you can do with it. 10 Buttonsonscreenalsoseemtoprovideaffordancetopress thembutnotdragthemoreditthem Reply Forward Print Delete 11 Affordencesaresequenced 12 AlsoinGUIs Selected Mouse Over Unselected Disabled 13 Whatgivesthemostobviousaffordancetoscroll? United States List Item United Arab Emirates United Kingdom United States US Minor Outlying Isl. Uruguay List Item List Item List Item List Item List Item List Item 14 Mentalmodels Users conceptions about the domain and the systems they use. How does it work in their world? 15 Mentalmodelsindesign https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/mental-models Norman(1988) 16 Designingaconceptualmodel (DanBrown,http://www.uie.com/articles/concept_models) 17 Metaphors Understanding a domain by using an analogy to another domain (metaphorical thinking) is a way to structure a conceptual model. 18 Itshouldworklikea: (Marcus,1995) • • Desk: Drawers, files, folders, papers, paper clips, stick-on note sheets • Deck of cards: Cards, stacks • Dokument: Books, chapters, bookmarks, pictures, newspapers, paragraphs, magazines, articles, news letters, forms Container: Shelves, boxes, compartments • Tree: Roots, trunk, branches, leaves • Town: People, districts, landmarks, roads, buildings, room, windows, desk • Photo: Albums, photos, photo brackets/holders • TV: Programs, channels, TVnetworks, commersial, TVguide 19 Thisfunctionshouldworklike: (Marcus,1995) • Traversing (goaloriented): navigate, drive, fly, go • Browsing (less goalorineted search for alternatives): speed reading, window shopping, flip through • Scanning (very quick browsing): roll by, pass billboards along the highway • Localising: point, touch, circle • Choosing: touch, poke, grab, catch with a lasso, place finger on and drag • Creating: add, copy • Deleting: throw away, distroy, drop, recycle, shred 20 Directmanipulation http://msdn.microsoft.com/en-us/library/windows/apps/hh465315.aspx Continously represented objects and physical actions that gives a direct effect. 21 Notdirectmanipulation http://msdn.microsoft.com/en-us/library/windows/apps/hh465315.aspx GOAL FORM INTENTION FORMACTIONPLAN EXECUTEACTION 4 EXPECTATION Norman’s actioncycle 22 EVALUATION INTERPRETATION PERCEPTION 23 Feedbackontheresultofanaction Copy Moving 1,234 Files to "Keynotopia" 36.6 MB of 126.9 MB - About 10 seconds 25 Feedforward That you know what is going to happen before you do it http://www.transformatordesign.se/case/attention-2/ GULFOF EXECUTION PHYSICAL SYSTEM GULFOF EVALUATION 26 GOALS 27 Attentionand themagicalnumber7±2 You loose what you had in working memory if something in the environment steals your focus. 28 Therefore: • Help people remembering what they are doing and the status of their objects of care • Modes are powerful and risky • Remembering instructions is with many steps is difficult. Make sure the user can se them as they perform them. 29 Fitt’sLaw The time it takes to move to an object depends on the distance and its size 30 Hicks’Law The time to choose increases for every alternative. Remove the unnecessary. People split their alternatives into categories which decreases the time it takes to choose. If something pops out they will choose that: Primary content first rahter than navigation first. 31 http://uxdesign.smashingmagazine.com/2012/02/23/redefining-hicks-law/ 32 http://uxdesign.smashingmagazine.com/2012/02/23/redefining-hicks-law/ 33 ThePoka-YokePrinciple http://pbmo.wordpress.com/2012/09/08/poka-yoke/ To fail-proof by either preventing errors or to make it easy to detect errors 80/20rule (TheParetoPrinciple) A large portion of users will use a small portion of the functionality Use user research to decide what functions that will be most used Place them close at hand 34 35 Principlesforstaticdesignalsoapplieshere • • • • • Rule of thirds Gyllene snittet Gestaltlagarna Occams razor Fibonacci-tal 36 Usability Extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use. – ISO 9241-11 37 Usability Extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use. – ISO 9241-11 38 39 Effec/veness 40 Efficiency Effec/veness 41 Efficiency Sa/sfac/on Effec/veness 42 Usabilitymeasurement Deciding if you meet your design objectives Following up between versions Assessing competitiveness 43 Usabilitygoals Identify the most important functions for the users: (a) Find contact info. (b) Fill out a form. (c) Order a product. Set up usability goals: (a) The most important tasks for the users should have a successful result at least 75% of the times. (b) On avarage it should take no longer than 1:30 minutes to find the contact info. (c) Users’ satisfaction should be at least 5 out of 7 for the most important tasks. (d) Users’ satisfaction should be better than at least two of the competitors. 44 Effectiveness • Percentage completed tasks • Quality of result • Number of features or commands actually used 45 Efficiency • • • • • • • Time on task Time to learn Time spent on errors Workload Percentage or number of errors How often help or documentation must be used Number of repeated or failed commands 46 Satisfaction Rating of usefullness Rating of satisfaction with features Number of times the user expresses frustration Rating of user’s control vs. technologies control over the task • Rating of how well the technology support the tasks that the user needs to have support for • • • • 47 Productquality DESIRABILITY FEASIBILITY VIABILITY 48 Sustainability How does the design contribute to sustainable development? Ecological: impact on envirnment and health Social: impact on sociaty and basic human needs Economical: managing human and material resources TheUseQualityPrismandtheQuality IndicatorforIxD 49 Technical Pracical Communicaional Organisaional Aestheical Ethical Impact! form and material! 1! norms! character and innovation! Ethics! power! experience of activity! 0! habits! symbolics! Communicaton! -1! constraints! cooperation and coordination! Build quality! possibilities! usefullness! business! usability! Functionality! operations! Organization! Design proposal:__________________________________ ! ! IxDQI—Interaction Design Quality Indicator. Mattias Arvola. 2011-04-15! 50 ! ! ! !Reviewer:__________________________________ ! 51 10heuristicsforusability(Nielsen,1994) 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10.Help and documentation 52 1.Visibilityofsystemstatus The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. 53 2.Matchbetweensystemandtherealworld The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. 54 3.Usercontrolandfreedom Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. 55 4.Consistencyandstandards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. 56 5.Errorprevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. 57 6.Recognitionratherthanrecall Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. 58 7.Flexibilityandefficiencyofuse Accelerators—unseen by the novice user—may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. 59 8.Aestheticandminimalistdesign Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. 9.Helpusersrecognize,diagnose,and recoverfromerrors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. 60 61 10.Helpanddocumentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large. 62 Heuristicevaluation(Nielsen,1993) • Take 3–5 experts and an established list of heuristics – Evaluators familiarize themselves with the heuristics and decide what they mean in this context – Go through the system one round individually – Go through the system again carefully (individually) • Identify problems in relation to the heuristics • Output: a list of problems related to each rule of thumb • Convene, discuss evaluations, and come to agreement • Severity rating • Best result if evaluators have expertise in both usability and the domain 63 Summasummarum • • • • • Principles Usability Use-quality and user experience Heuristics Heuristic evaluation mattias.arvola@liu @mattiasarvola www.liu.se