An Introduction to the Key Principles of Interaction Design

1. { PRINCIPLES OF INTERACTION DESIGN }
1
AnIntroductiontotheKey
PrinciplesofInteraction
Design

2. { PRINCIPLES OF INTERACTION DESIGN }
2
Howdoyoubegintocreatevisualsolutionstosolve
complexuserinteractionproblems?
Discuss
smartdevicescomputersinformationportalphonescontro

3. { PRINCIPLES OF INTERACTION DESIGN }
How do interaction designers succeed at creating
design solutions that are powerful, effective, func-
tionalandaestheticallyappealing?
Discuss
3

4. { PRINCIPLES OF INTERACTION DESIGN }
44
Why should an MAstudent consider and apply the
PrinciplesofInteractionDesigntotheirworkpattern
withinthedesignprocess?
Discuss

5. { PRINCIPLES OF INTERACTION DESIGN }
5
WHY USE PRINCIPLES OF INTERACTION DESIGN?
DesignPrinciplescanhelpguideadesignerthoughthedesignpro-
cess.channelLingcreativethinking,andcanbeusedtoselfeval-
uateandcritiquedesignconcepts.
““
Channel

6. { PRINCIPLES OF INTERACTION DESIGN }
6
WHY USE PRINCIPLES OF INTERACTION DESIGN?
FacilitatingYOU(thestudent)tobecomeamoreproductiveandef-
fective designer and helping you focus on the key features of an
effectivedesign.
“ “
Productivity

7. { PRINCIPLES OF INTERACTION DESIGN }
7
WHY USE PRINCIPLES OF INTERACTION DESIGN?
All the Design principles interact in complex ways, often effecting
and conflicting with each other, but helping focus the designer to
featuresofeffectivedesign.
“ “
Interact
note:

8. { PRINCIPLES OF INTERACTION DESIGN }
8
BeforeconsideringwhichprinciplesofInteractionDesigntoapply.
Youshouldfirstconsiderthree
maininfluences

9. { PRINCIPLES OF INTERACTION DESIGN }
9
CONSIDERATIONS OF INTERACTIVE DESIGN
TASK(S)andcontext
What Task do you require your
target demographic to preform,
andinwhatenvironment?
Scenario“
“

10. { PRINCIPLES OF INTERACTION DESIGN }
10
CONSIDERATIONS OF INTERACTIVE DESIGN
TARGETMARKET
Whoisyourtargetdemographic?
Personia“ “

11. { PRINCIPLES OF INTERACTION DESIGN }
11
CONSIDERATIONS OF INTERACTIVE DESIGN
TECHNOLOGIES
What technology do you have at
yourdisposal?
Construct
application
“ “

12. { PRINCIPLES OF INTERACTION DESIGN }
12
Therearetwooverarchingprinciples:
Comprehensibility
Learnability
“ “

13. { PRINCIPLES OF INTERACTION DESIGN }
13
COMPREHENSIBILITY
An interface design that is easy to comprehend
willbeefficientandeffective.
core
effective“
“

14. { PRINCIPLES OF INTERACTION DESIGN }
14
{ PRINCIPLES OF INTERACTION DESIGN }
COMPREHENSIBILITY
A design’s comprehensibility is highly dependent
onthewayinwhichtheinterface
communicatesitsfunctionality
core
communicate“
“

15. { PRINCIPLES OF INTERACTION DESIGN }
15
LEARNABILITY
Thelearnabilityofadesignisbasedonit’scompre-
hensibility, if the user can’t understand it,
theycan’tlearnit.
core
understand“
“

16. { PRINCIPLES OF INTERACTION DESIGN }
16
ease of Access
Mostpeopleareinterestedincompletingtheirtasksanddonotenjoy
strugglingwiththetoolstheyneedtouse.
6 rules
easeofaccess senseofcontrol securily&safely usercentered

17. { PRINCIPLES OF INTERACTION DESIGN }
17
VISIBILITY
Ensurefunctionsarevisibletotheuser,sotheycan
seewhatisavailableandwhatthesystemisdoing.
ease of Access

18. { PRINCIPLES OF INTERACTION DESIGN }
18
{ PRINCIPLES OF INTERACTION DESIGN }
VISIBILITY
Designers Dilema: Show everything at once, and the result is
chaos.Don’tshoweverything,andtheninformationgetslost.
ease of Access
AndroidInterface

19. { PRINCIPLES OF INTERACTION DESIGN }
19
CONSISTENCY
Be consistent in the use of design features and be
consistentwithsimilarsystems.
ease of Access

20. { PRINCIPLES OF INTERACTION DESIGN }
20
consistentfeatures
symbolstypographylayoutcolourinteractionsinstruction

21. { PRINCIPLES OF INTERACTION DESIGN }
21
functional layeringease of use
80/20Rule-
20%ofthefunctionalityisused80%ofthetime.
Makethemostcommonorimportantfunctions
easiesttofind.Hideorreducingtheprominenceof
infrequentlyusedfunctions.
hierarchyofcontrols

22. { PRINCIPLES OF INTERACTION DESIGN }
22
hierarchyofcontrols

23. { PRINCIPLES OF INTERACTION DESIGN }
23
simplicity
Showtheuseronlywhatisnecessary
This Involves limiting the actions that can be per-
formedatanyonetime.
ease of use

24. { PRINCIPLES OF INTERACTION DESIGN }
24
Bymatchingthesequenceofsteps,layoutofinformationandtermi-
nologyusedtothepriorexperiencesoftheuser, youwillreducethe
discomfortoflearninganewsystem.
familiarityease of Access

25. { PRINCIPLES OF INTERACTION DESIGN }
25
{ PRINCIPLES OF INTERACTION DESIGN }
ease of Access
Wherethisisnotpossiblebecausetheconceptisdistinctlydifferent
fromwhathasgonebefore,tryusingsuitablemetaphorstohelpthe
userrelate.
familiarity

26. { PRINCIPLES OF INTERACTION DESIGN }
26
AFFORDANCE
Design your assets so that they
areclearwhattheyarefor.
Affordance refers to the proper-
tiesassetshaveorarepreceived
tohave.
ease of Access
buttonsareforpressing“
“

27. { PRINCIPLES OF INTERACTION DESIGN }
27
sense of control
3 rules
easeofaccess senseofcontrol securily&safely usercentered
Providetheuserwithasenseofbeenincontrol.

28. { PRINCIPLES OF INTERACTION DESIGN }
28
NAVIGATION
Providesupporttoenabletheusertomovearound
thepartsofthesystem.
sense of control
Make the steps of
navigation obvious
andlodgical.

29. { PRINCIPLES OF INTERACTION DESIGN }
29
CONTROLsense of control
A sense of Control is enhanced if there is a clear, logical map-
pingbetweenthecontrolsandtheeffecttheyhave.
Makeitclearwhoor
whatisincontrol
“ “

30. { PRINCIPLES OF INTERACTION DESIGN }
30
FEEDBACK
Feedback from the system to the users, so they
knowwhateffecttheiractionhavehad.
Constantandconsistentfeedbackwillenhancethefeelingofusercontrol
sense of control
Rapidlyfeedback
information

31. { PRINCIPLES OF INTERACTION DESIGN }
31
AppBuilder

32. { PRINCIPLES OF INTERACTION DESIGN }
32
securely & safely
2 rules
easeofaccess senseofcontrol securily&safely usercentered
Howsafelyandsecurlytheusersexperienceis.

33. { PRINCIPLES OF INTERACTION DESIGN }
33
RECOVERY
Particularly from mistakes and errors. Enable this
quicklyandeffectively.
SECURELY & safely
Enablerecovery
fromactions

34. { PRINCIPLES OF INTERACTION DESIGN }
34
CONSTRAINTSSECURELY & safely
physical“
“
RestrictthepossibleactionsthatcanbeperformedthusHelpingpre-
ventusersfromselectingincorrectoptions.

35. { PRINCIPLES OF INTERACTION DESIGN }
35
Restrictthepossibleactionsthatcanbe
performed thus Helping prevent users
fromselectingincorrectoptions.
cultural“
“
{ PRINCIPLES OF INTERACTION DESIGN }
CONSTRAINTSSECURELY & safely

36. { PRINCIPLES OF INTERACTION DESIGN }
36
User Centered
5 rules
easeofaccess senseofcontrol securily&safely usercentered
Identifingdifferentpeoplesexperiencesandreactingto
thosedifferences.

37. { PRINCIPLES OF INTERACTION DESIGN }
37
FLEXIBILITYuser centered
Accommodatingpeoplewithdifferentlevelsofexperience.
Provide people with the opportunity to change the way things look
andbehavesothattheycanpersonalisethesystem.
Allowusersmultiple
waysofdoingthings

38. { PRINCIPLES OF INTERACTION DESIGN }
38
Photoshopinterface

39. { PRINCIPLES OF INTERACTION DESIGN }
39
cognitive load
CognitiveLoadTheorysuggeststhatusercanabsorbandre-
taininformationeffectivelyonlyifitisprovidedinsuchawaythatit
doesnotoverloadtheirmentalcapacity.
Reducetheamountofloadthatisbeing
placedupontheusersworkingmemory
user centered
“ “

40. { PRINCIPLES OF INTERACTION DESIGN }
40
VISUAL DESIGN
visualdesignprinciples:
whitespace,contrast,similarity,emphasis,
proximity,repetition,unity.
user centered
alignment“
“

41. { PRINCIPLES OF INTERACTION DESIGN }
41
CONVIVIALITYuser centered
Interactivesystemsshouldbepolite,friendly
andpleasent.Designforpoliteness
[instantgratification]-[responsive] [trustworthy]
[wellinformed]-[forthcoming]-[clarity]-[quality]

42. { PRINCIPLES OF INTERACTION DESIGN }
42
engagement
The product your designing must engage with the
targetdemographic.
user centered
demographic
Measurestheextenttowhichauser
hasameaningfulexperience.

43. { PRINCIPLES OF INTERACTION DESIGN }
43
engagement
Theusershouldfeelliketheyareincontrolofthe
experienceatalltimes,theymustconstantlyfeel
likethey’reachievingsomething.
user centered
25seconds“ “

44. { PRINCIPLES OF INTERACTION DESIGN }
44
1. Identify theindividualprin-
ciples of interaction design that
where applied, analysis and
evaluate the benefits brought to
thefinalproduct.
2. Discuss how the different
principles complemented and
contradicted each. Identify why
certain principles were given
prominence, while others were
omitted.
exercise
InGroupsofthree,selectanartefactofappliedinteractiondesign: