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