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

3

About Infragistics

3

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

4

Global Clients

4

5

= “The envisioned, expected, or actual experience of a user interacting with a technicalproduct.”

A user will always have an experience, no matter if you design for it or not!

User Experience

6

„What do you think?

7

Usability Checklists Screen Clutter Text Treatment Colors & Contrasts Alignments Orientation Icon Quality Chart Types Saliency Empirical Evidence

Veronique (Image Focus Australia)

UX Checklist

8

Not covered: Joy, pride, desirability, attractiveness, ...

1. Suitability for the Task2. Self-Descriptiveness3. Controllability4. Conformity with User Expectations5. Error Tolerance6. Suitability for Individualization7. Suitability for Learning

Dialogue Principles (ISO 9241-110)

9

The cursor is automatically positioned where the user should input the term to query.

A dialogue is suitable when it supports the user in the effective and efficient completion of the task.

Suitability for the Task

10

Hello?! It’s the only text entry field on the page!!!

Website Tab Hits

(Google Chrome)

Amazon.com 15

Target.com 9

Walmart.com 2

Google.com 0

Yahoo.com 0

Bing.com 0

Suitability for the Task

11

If the user should specify the printing range, provide specific information about what the choice is going to be.

A dialogue is self-descriptive when each Dialogue is immediately comprehensible through feedback from the system or is explained to the user on request.

Self-Descriptiveness

12

The user is always able to interrupt a program.

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.

Controllability

13

Dialogue behavior and information representation should be consistent in all screens.

A dialogue conforms with user expectations when it is consistent and corresponds to theuser characteristics, such as task knowledge, education, experience and to commonlyaccepted conventions.

Conformity to User Expectations

14

Conformity to User Expectations

15

Screen Transitions: -23%

Mouse Clicks: -6%

Scrolling: -45%

ASCII Input: 0%

Static Reading Load: +38%

Dynamic Reading Load: 0%

Conformity to User Expectations

16

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.

The system should support the user to discover input errors and prevent them.

Error Tolerance

17

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.

The user is able to alter the appearance of the user interface according to his/her preferences.

Suitability for Individualization

18

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.

A dialogue is suitable for learning when it supports and guides the user in learning the system.Suitability for Learning

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 required2-10 sec: “spinning thing”10+ sec: show progress bar

Bad error messages “An error occurred. The application is shutting down.”

Be concise, understandable, polite, constructive

No default values and cursor focus

No default values and cursor focus Boost efficiency by providing these

Dumping users right in Cluttered (or empty) screen with no hint of what to do

Provide orientation and guidance

No workflow support Disconnect between different UI elements, Dialogues & screens

Design for tasks and workflows

Some typical UI Cruelties

20 www.useit.com/papers/heuristic/heuristic_list.html

Visibility of system statusAlways keep users informed about what is going on, through appropriate feedback within reasonable time.

Match between system and the real worldSpeak 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 freedomUsers 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 recallMake objects, actions, and options visible. Minimize need for memorization.

Flexibility and efficiency of useAccelerators – 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 errorsError messages should be expressed in plain language, precisely indicate the problem, and be constructive.

Error preventionEven better than good error messages is a careful design which prevents a problem from occurring in the first place.

Help and documentationShould be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

Nielsen‘s 10 Heuristics

21 http://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGoldenRules.html

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

frequency be reduced, and sufficient training time be allotted for codes, mnemonics, and sequences of actions.

Shneiderman‘s 8 Golden Rules

22

Human Factors Visual clutter restricts the ability to focus Clutter limits the brain’s ability to process information

Aesthetics People have a need for structure (symmetry) The more it is shown, the less aesthetic it is rated

Screen Clutter

23

“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)

Text Legibility

24

VIEWING DISTANCE MINIMUM* OPTIMUM*

11.81 in 300 mm

0.06 in1.40 mm

0.07 – 0.08 in1.75 – 1.92 mm

19.69 in500 mm

0.09 in2.33 mm

0.12 – 0.13 in2.91 – 3.21 mm

98.43 in2500 mm

0.46 in11.66 mm

0.57 – 0.63 in14.57 – 16.03 mm

Handhelds

Computer monitors

Projection walls

*Upper-case character height

Text Size

25

25

http://sizecalc.com/

26

Text Alignment in Menus

BooksMovies, Music & GamesDigital DownloadsElectronics & ComputersHome & GardenGroceryToys, Kids & BabyApparel, Shoes & JewelryHealth & BeautySports & OutdoorsTools, Auto & Industrial

BooksMovies, Music & Games

Digital DownloadsElectronics & Computers

Home & GardenGrocery

Toys, Kids & BabyApparel, Shoes &

JewelryHealth & Beauty

Sports & OutdoorsTools, Auto & Industrial

BooksMovies, Music & Games

Digital DownloadsElectronics & Computers

Home & GardenGrocery

Toys, Kids & BabyApparel, Shoes &

JewelryHealth & Beauty

Sports & OutdoorsTools, Auto & Industrial

Left-aligned

good

Centered

bad

Right-aligned

bad

27

Text Alignment in Forms

bad good

28

Text Alignment in Forms

bad good

29

Text Alignment in Forms

good good

30

Text Alignment in Forms

bad bad

31

marquee

r o t a t e d

hor izonta l

r o

t a

t e

d

right left

Horizontal text should be used

Marquee text should NOT be used

Horizontal Marquee Rotated Left

Rotated Right

Rare Words

Frequent Words

30

25

20

15

10

5

0

Response Time (sec)

Text Orientation

32

Color Contrast

33

33

http://www.colorsontheweb.com/colorcontrast.asp

34

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.00Women: 0.43

Perceiving blue & yellow ‐ see mostly or exclusively red & green‐ may confuse blue & yellow

Men: 0.004Women: 0.002

Total color blindness cannot see any colors Men: 0.003Women: 0.002

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.)

Color Perception Deficiencies

35

35

INFRAGISTICS SERVICESDiscover Design Develop

36

36

www.vischeck.com/vischeck/

37

Grids divide the screen into even areas.

Consistency improves readability of the UI, allows quicker learning and improves aesthetics

Standardization reduces design time

Visual Structure and Flow

38

38

www.puidokas.com/portfolio/gridfox

39

Where am I?

Where have I come from?

What’s next?

→ 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.

“Think back… which keys did you press?”

Orientation

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

41

Position along scale

Angle

Area

Volume

easier

harder

How easily humans interpret information on charts depends on the chart type.

Chart type should be based on aesthetics and human cognitive abilities.

Data Visualization: Chart Types

42

Estimating Areas

43

Visual Attention – where do people look?

44

44

www.feng-gui.com

45

Saliency Modelling

46

Saliency Modelling

47

Saliency Modelling

48

Saliency Modelling

49

Identified Usability Problems

Number of tested users

75%

50%

25%

0%

100%

10 1550

Real Users

Real Tasks

Prototypes & real products

“Thinking aloud”

Qualitative & quantitative data

Usability Testing

50

Product OptimizationContinuous improvement

Decision MakingGet feedback on different front-end concepts

BenchmarkingKnow where you are compared to best-in-class

Convincing StakeholdersReality check

Why Usability Testing?

51

Over the last 15 years the trend moved away from formal labs.

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

Shapes & Flavors of Usability Testing

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”

53

53Technology advances – people stay the same

Usability Checklists Screen Clutter Text Treatment Colors & Contrasts Alignments Orientation Icon Quality Chart Types Saliency Empirical Evidence

UX Checklist

54

thank you