UserInterfacePrinciplesMattiasArvola

ConceptDesign

RevisionsandDetailedDesign

UserResearch

Thesecondgroupassignment 3

• 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:

• Sketching and Exploration by Mattias Arvola • User Interface Principles by Mattias Arvola. • Paper Prototypes and Formative Usability Testing

by Tim Overkamp. • Computer Prototypes by Mattias Arvola. • Information Architecture, Andrea Resmini • Quantitative Usability Testing by Johan Åberg.

RevisionofIdeas

4

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. In study class.

Theindividualdesignassignment

5

• 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

Today

6

• Principles • Usability • Use-quality • Heuristics • If there is time: Heuristic evaluation

Affordance

7

Perceived and actual properties of a thing that decide what you can do with it.

9

Reply

Forward

Print

Delete

Buttonsonscreenalsoseemtoprovideaffordancetopressthembutnotdragthemoreditthem

10

Affordencesaresequenced

11

AlsoinGUIs

Selected

Mouse Over

Unselected

Disabled

12

Whatgivesthemostobviousaffordancetoscroll?

List Item

List Item

List Item

List Item

List Item

List Item

List Item

United States

United Arab EmiratesUnited KingdomUnited StatesUS Minor Outlying Isl.Uruguay

Mentalmodels

13

Users conceptions about the domain and the systems they use. How does it work in their world?

14

Mentalmodelsindesign https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/mental-modelsNorman(1988)

15

Designingaconceptualmodel (DanBrown,http://www.uie.com/articles/concept_models)

Metaphors

16

Understanding a domain by using an analogy to another domain (metaphorical thinking) is a way to structure a conceptual model.

Itshouldworklikea: (Marcus,1995)

17

• Desk: Drawers, files, folders, papers, paper clips, stick-on note sheets

• Dokument: Books, chapters, bookmarks, pictures, newspapers, paragraphs, magazines, articles, news letters, forms

• Photo: Albums, photos, photo brackets/holders

• TV: Programs, channels, TV-networks, commersial, TV-guide

• Deck of cards: Cards, stacks • Container: Shelves, boxes,

compartments • Tree: Roots, trunk, branches,

leaves • Town: People, districts,

landmarks, roads, buildings, room, windows, desk

Thisfunctionshouldworklike: (Marcus,1995)

18

• Traversing (goal-oriented): navigate, drive, fly, go

• Browsing (less goal-orineted 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

Directmanipulation http://msdn.microsoft.com/en-us/library/windows/apps/hh465315.aspx

19

Continously represented objects and physical actions that gives a direct effect.

Notdirectmanipulation http://msdn.microsoft.com/en-us/library/windows/apps/hh465315.aspx

20

21

Norman’s actioncycle

4

FORMACTIONPLAN

EXPECTATION

GOAL

EVALUATIONFORM

INTENTION

INTERPRETATION

EXECUTEACTION PERCEPTION

22

Feedbackontheresultofanaction

Copy

Moving 1,234 Files to "Keynotopia"

36.6 MB of 126.9 MB - About 10 seconds

Feedforward

24

That you know what is going to happen before you do it http://www.transformatordesign.se/case/attention-2/

25

GULFOFEXECUTION

GULFOFEVALUATION

PHYSICAL SYSTEM

GOALS

Attentionand themagicalnumber7±2

26

You loose what you had in working memory if something in the environment steals your focus.

Therefore:

27

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

Fitt’sLaw

28

The time it takes to move to an object depends on the distance and its size

Hicks’Law

29

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.

30

http://uxdesign.smashingmagazine.com/2012/02/23/redefining-hicks-law/

31

http://uxdesign.smashingmagazine.com/2012/02/23/redefining-hicks-law/ ThePoka-YokePrinciple http://pbmo.wordpress.com/2012/09/08/poka-yoke/

32

To fail-proof by either preventing errors or to make it easy to detect errors

80/20rule (TheParetoPrinciple)

33

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

Principlesforstaticdesignalsoapplieshere

34

• Rule of thirds • Gyllene snittet • Gestaltlagarna • Occams razor • Fibonacci-tal

Usability

35

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

Usability

36

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 38

Effec%veness

39

Effec%venessEfficiency

40

Effec%venessEfficiency

Sa%sfac%on

Usabilitymeasurement

41

Deciding if you meet your design objectives Following up between versions Assessing competitiveness

Usabilitygoals

42

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.

Effectiveness

43

• Percentage completed tasks • Quality of result • Number of features or commands actually used

Efficiency

44

• 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

Satisfaction

45

• 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

46

Productquality

DESIRABILITY FEASIBILITY

VIABILITY

Sustainability

47

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

48

TheUseQualityPrismandtheQualityIndicatorforIxD

Technical

Pracgcal

Communicagonal

Organisagonal

Aesthegcal

Ethical

49

Ethics!

Build quality!

Organization!

Functionality!

Communicaton!

Impact!

Design proposal:__________________________________ !! ! !! ! !!Reviewer:__________________________________ !!IxDQI—Interaction Design Quality Indicator. Mattias Arvola. 2011-04-15!

-1!

0!

1!form and material!

character and innovation!

experience of activity!

symbolics!

cooperation and coordination!

usefullness!

usability!

operations!

business!

possibilities!

constraints!

habits!

power!

norms!

10heuristicsforusability(Nielsen,1994)

50

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

1.Visibilityofsystemstatus

51

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

2.Matchbetweensystemandtherealworld

52

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.

3.Usercontrolandfreedom

53

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.

4.Consistencyandstandards

54

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

5.Errorprevention

55

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.

6.Recognitionratherthanrecall

56

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.

7.Flexibilityandefficiencyofuse

57

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.

8.Aestheticandminimalistdesign

58

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,andrecoverfromerrors

59

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

10.Helpanddocumentation

60

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.

Heuristicevaluation(Nielsen,1993)

61

• 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

Summasummarum

62

• Principles • Usability • Use-quality and user experience • Heuristics • Heuristic evaluation

www.liu.se

mattias.arvola@liu

@mattiasarvola