Senior Director of Design at Infragistics. Adjunct Professor at Rutgers State University of New Jersey Studied the stuff (Master s & Ph.D.

Transcription

1 1 Assessing UX

2 Senior Director of Design at Infragistics Adjunct Professor at Rutgers State University of New Jersey Studied the stuff (Master s & Ph.D.) 15+ years experience in research, development, consulting Published 40+ technical papers, gave 50+ public talks 2

3 About Infragistics Global leader in user experience controls, components, and consulting Windows Forms ASP.NET WPF LightSwitch Sharepoint jquery & HTML5 Report Plus Share Plus Indigo Studio UX Prototyping ios Android Windows Phone 3 3

4 Global Clients 4 4

5 User Experience = The envisioned, expected, or actual experience of a user interacting with a technical product. A user will always have an experience, no matter if you design for it or not! 5

6 6 What do you think?

7 UX Checklist Usability Checklists Screen Clutter Text Treatment Colors & Contrasts Alignments Orientation Icon Quality Chart Types Saliency Empirical Evidence Veronique (Image Focus Australia) 7

8 Dialogue Principles (ISO ) 1. Suitability for the Task 2. Self-Descriptiveness 3. Controllability 4. Conformity with User Expectations 5. Error Tolerance 6. Suitability for Individualization 7. Suitability for Learning Not covered: Joy, pride, desirability, attractiveness,... 8

9 Suitability for the Task A dialogue is suitable when it supports the user in the effective and efficient completion of the task. The cursor is automatically positioned where the user should input the term to query. 9

10 Suitability for the Task Website Amazon.com 15 Target.com 9 Walmart.com 2 Google.com 0 Yahoo.com 0 Bing.com 0 Tab Hits (Google Chrome) 10 Hello?! It s the only text entry field on the page!!!

11 Self-Descriptiveness A dialogue is self-descriptive when each Dialogue is immediately comprehensible through feedback from the system or is explained to the user on request. If the user should specify the printing range, provide specific information about what the choice is going to be. 11

12 Controllability A dialogue is controllable when the user is able to initiate and control the direction and pace of the interaction until the point at which the goal has been met. The user is always able to interrupt a program. 12

13 Conformity to User Expectations A dialogue conforms with user expectations when it is consistent and corresponds to the user characteristics, such as task knowledge, education, experience and to commonly accepted conventions. Dialogue behavior and information representation should be consistent in all screens. 13

14 14 Conformity to User Expectations

15 Conformity to User Expectations Mouse Clicks: -6% Dynamic Reading Load: 0% Scrolling: -45% Static Reading Load: +38% ASCII Input: 0% Screen Transitions: -23% 15

16 Error Tolerance A dialogue is error tolerant if despite errors in input, the intended result may be achieved with either no or minimal corrective action by the user. 16 The system should support the user to discover input errors and prevent them.

17 Suitability for Individualization A dialogue is capable of individualization when the interface software can be modified to suit the tasks needs, individual preference, and skills of the user. 17 The user is able to alter the appearance of the user interface according to his/her preferences.

18 Suitability for Learning A dialogue is suitable for learning when it supports and guides the user in learning the system. Rules and concepts which are useful for learning should be made accessible to the user so that s/he is able to develop an own mental model. 18

19 Some typical UI Cruelties 19 CRUELTY SYMPTOM MITIGATION Non-standard GUI controls Controls with unique look & feel for standard functions Use controls the users are familiar and efficient with Inconsistency Different button names for same function Be consistent in layout, location, naming, required input, etc. No perceived affordance Can I click there??? Visually convey if something can be manipulated No feedback Hello??? Did it crash? 0-2 sec: nothing required 2-10 sec: spinning thing 10+ sec: show progress bar Bad error messages No default values and cursor focus Dumping users right in No workflow support An error occurred. The application is shutting down. No default values and cursor focus Cluttered (or empty) screen with no hint of what to do Disconnect between different UI elements, Dialogues & screens Be concise, understandable, polite, constructive Boost efficiency by providing these Provide orientation and guidance Design for tasks and workflows

20 Nielsen s 10 Heuristics Visibility of system status Always keep users informed about what is going on, through appropriate feedback within reasonable time. Match between system and the real world Speak the users language, with words, phrases, and concepts familiar to the user. Follow real-world conventions, making information appear in a natural and logical order. User control and freedom 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. Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Recognition rather than recall Make objects, actions, and options visible. Minimize need for memorization. Flexibility and efficiency of use Accelerators unseen by the novice user may often speed up the interaction for the expert user. Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language, precisely indicate the problem, and be constructive. Error prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Help and documentation 20 Should be easy to search, focused on the user s task, list concrete steps to be carried out, and not be too large.

21 Shneiderman s 8 Golden Rules Strive for consistency Consistent sequences of actions should be required in similar situations; identical terminology should be used in prompts, menus, and help screens; and consistent commands should be employed throughout. Enable frequent users to use shortcuts As the frequency of use increases, so do the user's desires to reduce the number of interactions and to increase the pace of interaction. Abbreviations, function keys, hidden commands, and macro facilities are very helpful to an expert user. Offer informative feedback For every operator action, there should be some system feedback. For frequent and minor actions, the response can be modest, while for infrequent and major actions, the response should be more substantial. Design Dialogue to yield closure Sequences of actions should be organized into groups with a beginning, middle, and end. The informative feedback at the completion of a group of actions gives the operators the satisfaction of accomplishment, a sense of relief, the signal to drop contingency plans and options from their minds, and an indication that the way is clear to prepare for the next group of actions. Offer simple error handling As much as possible, design the system so the user cannot make a serious error. If an error is made, the system should be able to detect the error and offer simple, comprehensible mechanisms for handling the error. Permit easy reversal of actions This feature relieves anxiety, since the user knows that errors can be undone; it thus encourages exploration of unfamiliar options. The units of reversibility may be a single action, a data entry, or a complete group of actions. Support internal locus of control Experienced operators strongly desire the sense that they are in charge of the system and that the system responds to their actions. Design the system to make users the initiators of actions rather than the responders. Reduce short-term memory load The limitation of human information processing in short-term memory requires that displays be kept simple, multiple page displays be consolidated, window-motion 21 frequency be reduced, and sufficient training time be allotted for codes, mnemonics, and sequences of actions.

22 Screen Clutter 22 Aesthetics People have a need for structure (symmetry) The more it is shown, the less aesthetic it is rated Human Factors Visual clutter restricts the ability to focus Clutter limits the brain s ability to process information

23 Text Legibility Text legibility is still the biggest issue. Web sites most frequently failed Forrester s evaluation of text legibility. But that s not new news. Text legibility has been a major issue on Web sites for many years. (Forrester Research) 23

24 Text Size VIEWING DISTANCE MINIMUM* OPTIMUM* Handhelds in 300 mm 0.06 in 1.40 mm in mm Computer monitors in 500 mm 0.09 in 2.33 mm in mm Projection walls in 2500 mm 0.46 in mm in mm *Upper-case character height 24

25

26 Text Alignment in Menus Books Movies, Music & Games Digital Downloads Electronics & Computers Home & Garden Grocery Toys, Kids & Baby Apparel, Shoes & Jewelry Health & Beauty Sports & Outdoors Tools, Auto & Industrial Left-aligned good Books Movies, Music & Games Digital Downloads Electronics & Computers Home & Garden Grocery Toys, Kids & Baby Apparel, Shoes & Jewelry Health & Beauty Sports & Outdoors Tools, Auto & Industrial Centered bad Books Movies, Music & Games Digital Downloads Electronics & Computers Home & Garden Grocery Toys, Kids & Baby Apparel, Shoes & Jewelry Health & Beauty Sports & Outdoors Tools, Auto & Industrial 26 Right-aligned bad

27 Text Alignment in Forms bad good 27

28 Text Alignment in Forms bad good 28

29 Text Alignment in Forms good good 29

30 Text Alignment in Forms bad bad 30

31 r o t a t e d Text Orientation horizontal Response Time (sec) Rare Words Frequent Words m ar q u ee r o t a t e d right left Horizontal text should be used Marquee text should NOT be used 0 Horizontal Marquee Rotated Left Rotated Right

32 32 Color Contrast

33

34 Color Perception Deficiencies Color Vision Deficiency Color Vision Spectrum Incidence [%] - can see all colors Men: 92.0 Women: 99.6 Perceiving red & green see mostly or exclusively blue & yellow may confuse red & green Men: 8.00 Women: 0.43 Perceiving blue & yellow see mostly or exclusively red & green may confuse blue & yellow Men: Women: Total color blindness cannot see any colors Men: Women: UI should not rely on color alone to differentiate elements or convey meaning Status-indicating UI elements should be multi-coded (shape, icons, labels, etc.) 34

35 35 35 INFRAGISTICS SERVICES

36

37 37 Visual Structure and Flow Grids divide the screen into even areas. Consistency improves readability of the UI, allows quicker learning and improves aesthetics Standardization reduces design time

38

39 Orientation Where am I? Where have I come from? What s next? Think back which keys did you press? 39 At any time the UI has to provide clear answers to the 3 questions above. Use of labels, user guidance, wizards, fixed navigation click targets, breadcrumbs, etc.

40 Icon Quality Concreteness = Degree of pictorial resemblance to the real world counterpart The more the better Complexity = Richness of details depicted Less is more Semantic Distance = Closeness between icon and represented function Less is more 40

41 Data Visualization: Chart Types How easily humans interpret information on charts depends on the chart type. easier Position along scale Angle Area harder Volume 41 Chart type should be based on aesthetics and human cognitive abilities.

42 Estimating Areas 42

43 43 Visual Attention where do people look?

44

45 Saliency Modelling 45

46 Saliency Modelling 46

47 Saliency Modelling 47

48 Saliency Modelling 48

49 Usability Testing Real Users Real Tasks Prototypes & real products Thinking aloud Qualitative & quantitative data Identified Usability Problems 100% 75% 50% 25% 0% Number of tested users 49

50 Why Usability Testing? Product Optimization Continuous improvement Decision Making Get feedback on different front-end concepts Benchmarking Know where you are compared to best-in-class Convincing Stakeholders Reality check 50

51 Shapes & Flavors of Usability Testing FORMAL LAB ON-SITE REMOTE Artificial Environment Authentic Environment Authentic Environment Participants have to get there Facilitator has to get there No travel necessary Participants feel nervous Participants are at ease Participants are at ease Test conditions controllable Test conditions not controllable Test conditions not controllable High cost High cost Low cost High Effectiveness High Effectiveness High Effectiveness Intermediate Efficiency Intermediate Efficiency High Efficiency Over the last 15 years the trend moved away from formal labs. 51

52 52 Demo Usability Test: Create a DVD Choose NTSC format Add file Usability Test Example.wmv Choose Baby Pink background for menu Add file Wildlife.wmv 52

53 UX Checklist Usability Checklists Screen Clutter Text Treatment Colors & Contrasts Alignments Orientation Icon Quality Chart Types Saliency Empirical Evidence Technology advances people stay the same 53 53

54 54 thank you