ENG1003 Lecture Notes - Lecture 11: Affordance, Usability Testing, Multi-Touch
30 May 2018
School
Department
Course
Professor
User%interface%(UI)
Needs%to%be%designed%specially,%instead%of%just%adapting%existing%interfaces%of%
desktop%apps/websites%that%mobile%app%is%being%created%for
Key%hardware differences
○
Methods%of%interaction
○
Types%of%use of%mobile%devices
○
•
Make%use%of%features%of%device
Connected%to%Internet
○
Sense%location%and%orientation
○
Provides%info%like%light%levels,%camera%or%mic%input
○
•
**need%to%be%able%to%test%app's%UI%on%that%device%+%users%try%out
User-centred%design is%a%software%design%approach%that%involves%soliciting
feedback%frm%end%users%throughout development%process.
Differences%in%desktop/laptop%and%smartphone/tablet%interactions
Factor
Desktop/laptop
Smartphone/tablet
Brief
windows%
of%activity
App%used%for%short%time%with focused%purposes
(eg.%wearable%apps%like%Apple%Watch).%Designed%
to%quickly%put%info/decisions%in%front%of%user%to%
deal%with%before%efficiently%moving%on.
-->%common%ops have%to%be%accessible%w/%min%
actions%(eg.%mapping%and%navigation%apps%w/%
prominent%onscreen controls%to%pan)
Design
considerati
ons
Small screens
Placement%on%screen
•
Density%of%controls%on%screen
•
*usually%why%set%of%features%is%reduced
Extra%challenges:
Frequent%movement%btwn%screens
NOTlong%lists
○
•
Fonts readable%at%low%reso
•
Buttons/controls%large%enough%for%fingers
•
Input%
methods
Traditional,%uses%
keyboard%and%
mouse
Touch-based/gesture-based%actions (eg.%
swiping,%tapping,%dragging,%flicking,%pinching)
*powerful%but%complex%interaction%
technique%made%possible%by%multi-touch%
screen%technology
Requires%users%to%know how%to%interact%
(introduced%in%2007%w/%iPhone)
Not%easily%discoverable by%novices/non-
tech-savvy%users
Often%best%used%as%shortcuts for%
more%complicated%actions
○
•
Platform%conventions
Impt%because%consumers%expect certain%behaviours%and%appearances%
for%certain%mobile%platforms%like%Android%and%iOS
Would%feel%jarring and%out%of%place%if%apps%were%imported%w/o%
attention%to%target%environment
○
•
Can%take%advantage%of%users'%prior%knowledge so%less%instructions%
needed
Completely%new%interface%w/%diff%interactn%techniques%will%
require%more%teaching%to%users
○
•
Each%platform%has%a%set%of%design%guidelines%advising%how%to:
Present%info
○
Handle%certain%interactions
○
Guidance%on%making%UI%feel%familiar to%users
○
•
Design%principles%(for%usability)
=%used%by%interaction%designers%to%aid%their%thinking%when%designing%for%the%
user%experience,%intended%to%orient%designers%towards%thinking%about%diff%
aspects%of%their%designs
Donald%Norman's%principles%[author%of%'The%Design%of%Everyday%Things']
Visibility (eg.%highlight/enlarge/make%more%prominent%impt%buttons)
Relevant%elements%in%view
○
Obvious%what%they%are%for
○
•
Affordance(eg.%toggle%switches%in%MDL%and%iOS%that%look%like%real-world%
switches)
Appearance%indicate%usage%(eg.%buttons)
○
Probably%flawed%if%need%too%many%labels
○
•
Constraints (eg.%"swipe%to%unlock"%reduces%possibility%of%accidental%
unlocking)
Limitations%of%possible%actions%of%obj%-->%reduces%likelihood%of%
accidents/errors
○
•
Cognitive aids%(eg.%counters%on%missed%calls/msgs,%pop-up%windows%on%
Messenger)
External%representations%intended%to%gain%our%attention%at%a%time%
relevant%to%the%task
○
•
Transfer effects%(eg.%people%transferring%knowledge%of%using%mobile%
gestures%btwn%apps/devices)
Learning%and%expectations%of%similar%objs/interfaces%are%
transferred
○
•
Natural%mapping(eg.%volume%slider%placed%vertically%-->%naturally%
assume%lowest%@%bottom)
Relationship%btwn%controls%and%effects%in%real%world
○
How%objs,%devices%and%screens%are%laid%out%to%better%represent%
their%function
○
•
(eg.)%The%steering%wheel is%positioned%in%front%of%the%driver’s%hands%and%
is visible between%them%and%their%view%of%the%road.%The%shape%and%design%of%a%
wheel%obviously afford turning,%and%it%has%a natural%mapping in%that%turning%
the%wheel%left%causes%the%car%to%turn%left%and%turning%the%wheel%right%causes%
the%car%to%turn%right.%The%wheel%is constrained with%weight%so%it%can’t%be%
swung%instantaneously%from%one%extreme%to%another,%which%would%be%
dangerous%at%high%speeds.%Most%wheels%have%a%visual%“straight”%position%which%
always%maps%to%the%wheels%of%the%car%being%straight,%this%is%a%cognitive%aid that%
helps%the%driver%understand%the%position%of%the%steering%when%entering%the%
car.%Steering%wheels%act%the%same%way%in%almost%every%car%(and%many%other%
vehicles%including%power%boats)%allowing%the%controls%to%benefit%from transfer%
effects.
Ben%Shneiderman's 8%Golden%Rules%of%Interface%Design%["pioneer%of%usability"]%
**more)app-specific
Strive%for%consistency (eg.%language,%layout,%design,%appearance)
Easier%to%learn%and%use
More%predictable%and%easy%to%understand
§
○
•
Cater%to%universal%usability
Take%into%account%knowledge,%experience,% preferences,%physical%
and%intellectual% abilities
○
•
Offer%informative%feedback (eg.%sounds,%highlighting,%progress%bars)
User%feedback%abt%actions%to%inform%them%abt%what%is%happening
○
•
Design%dialogs to%yield%closure%(eg.%"success"%after%transaction)
User%feedback%@%end%of%a%transaction
○
Feedback%about%any%user%input%-saved%or%lost
○
•
Prevent%errors
Detect%and%correct%when%they%occur
○
Reduce%consequences%(eg.%undo)
○
•
Permit%easy%reversal of%actions%(eg.%quit%to%Home%screen,%undo)
Users%often%change%their%mind/interrupted/become%confused
○
Offer%an%easy%way%out
○
•
Support%internal%locus%of%control (eg.%don't%impose%popups/random%
updates%w/o%warning)
Giving%user%a%sense%of%control,%so%they%know%what%to%do,%when%and%
how%to%do
○
Allow%user%to%initiate%and%control%actions
○
•
Reduce%short-term%memory%load (eg.%predict%user's%location%instead%of%
manual%typing,%popup%Calendar%dialog%instead%of%forced%manual%typing)
Use%meaningful%mnemonices/icons/abbs/"hint"
○
Don't%make%overly%complex
○
•
Evaluating%usability
Human%Factors
A%field%of%research%focusing%on%interaction%btwn%humans%and%
physical%objs%(including%computers)
○
Encompasses%usability%testing%and%other%empirical% testing%
methods
○
•
Skeuomorphism
=%the%practice%of%engineering%software%to%look%like%a%physical%
device/obj
○
Can%be%effective%since%it%creates%familiarity,%relates%functionality%to%
sth%user%has%previous%experience%with
○
Works%well%ONLY%IN%MODERATION
Important%to%ask if%any%part%of%UI%is%helping/hindering user
Easy%to%get%carried%away%with%overdesigning (eg.%
shadows,%animations)%since%it%looks%cool%and%different
□
§
When%popular%(recently),%was%heavily%overused%in%mobile%
interfaces
Over-designed,%links%btwn%software%&%real%world%were%
sometimes%tenuous
□
Being%used%only%because%it%looked%cool,%not%because%it%
made%sense
□
§
○
•
Week$11:$User$Experience
Monday,%15%May%2017
22:01
User%interface%(UI)
Needs%to%be%designed%specially,%instead%of%just%adapting%existing%interfaces%of%
desktop%apps/websites%that%mobile%app%is%being%created%for
Key%hardware differences
○
Methods%of%interaction
○
Types%of%use of%mobile%devices
○
•
Make%use%of%features%of%device
Connected%to%Internet
○
Sense%location%and%orientation
○
Provides%info%like%light%levels,%camera%or%mic%input
○
•
**need%to%be%able%to%test%app's%UI%on%that%device%+%users%try%out
User-centred%design is%a%software%design%approach%that%involves%soliciting
feedback%frm%end%users%throughout development%process.
Differences%in%desktop/laptop%and%smartphone/tablet%interactions
Factor Desktop/laptop Smartphone/tablet
Brief
windows%
of%activity
App%used%for%short%time%with focused%purposes
(eg.%wearable%apps%like%Apple%Watch).%Designed%
to%quickly%put%info/decisions%in%front%of%user%to%
deal%with%before%efficiently%moving%on.
-->%common%ops have%to%be%accessible%w/%min%
actions%(eg.%mapping%and%navigation%apps%w/%
prominent%onscreen controls%to%pan)
Design
considerati
ons
Small screens
Placement%on%screen•
Density%of%controls%on%screen•
*usually%why%set%of%features%is%reduced
Extra%challenges:
Frequent%movement%btwn%screens
NOTlong%lists
○
•
Fonts readable%at%low%reso•
Buttons/controls%large%enough%for%fingers•
Input%
methods
Traditional,%uses%
keyboard%and%
mouse
Touch-based/gesture-based%actions (eg.%
swiping,%tapping,%dragging,%flicking,%pinching)
*powerful%but%complex%interaction%
technique%made%possible%by%multi-touch%
screen%technology
Requires%users%to%know how%to%interact%
(introduced%in%2007%w/%iPhone)
Not%easily%discoverable by%novices/non-
tech-savvy%users
Often%best%used%as%shortcuts for%
more%complicated%actions
○
•
Platform%conventions
Impt%because%consumers%expect certain%behaviours%and%appearances%
for%certain%mobile%platforms%like%Android%and%iOS
Would%feel%jarring and%out%of%place%if%apps%were%imported%w/o%
attention%to%target%environment
○
•
Can%take%advantage%of%users'%prior%knowledge so%less%instructions%
needed
Completely%new%interface%w/%diff%interactn%techniques%will%
require%more%teaching%to%users
○
•
Each%platform%has%a%set%of%design%guidelines%advising%how%to:
Present%info
○
Handle%certain%interactions
○
Guidance%on%making%UI%feel%familiar to%users
○
•
Design%principles%(for%usability)
=%used%by%interaction%designers%to%aid%their%thinking%when%designing%for%the%
user%experience,%intended%to%orient%designers%towards%thinking%about%diff%
aspects%of%their%designs
Donald%Norman's%principles%[author%of%'The%Design%of%Everyday%Things']
Visibility (eg.%highlight/enlarge/make%more%prominent%impt%buttons)
Relevant%elements%in%view
○
Obvious%what%they%are%for
○
•
Affordance(eg.%toggle%switches%in%MDL%and%iOS%that%look%like%real-world%
switches)
Appearance%indicate%usage%(eg.%buttons)
○
Probably%flawed%if%need%too%many%labels
○
•
Constraints (eg.%"swipe%to%unlock"%reduces%possibility%of%accidental%
unlocking)
Limitations%of%possible%actions%of%obj%-->%reduces%likelihood%of%
accidents/errors
○
•
Cognitive aids%(eg.%counters%on%missed%calls/msgs,%pop-up%windows%on%
Messenger)
External%representations%intended%to%gain%our%attention%at%a%time%
relevant%to%the%task
○
•
Transfer effects%(eg.%people%transferring%knowledge%of%using%mobile%
gestures%btwn%apps/devices)
Learning%and%expectations%of%similar%objs/interfaces%are%
transferred
○
•
Natural%mapping(eg.%volume%slider%placed%vertically%-->%naturally%
assume%lowest%@%bottom)
Relationship%btwn%controls%and%effects%in%real%world
○
How%objs,%devices%and%screens%are%laid%out%to%better%represent%
their%function
○
•
(eg.)%The%steering%wheel is%positioned%in%front%of%the%driver’s%hands%and%
is visible between%them%and%their%view%of%the%road.%The%shape%and%design%of%a%
wheel%obviously afford turning,%and%it%has%a natural%mapping in%that%turning%
the%wheel%left%causes%the%car%to%turn%left%and%turning%the%wheel%right%causes%
the%car%to%turn%right.%The%wheel%is constrained with%weight%so%it%can’t%be%
swung%instantaneously%from%one%extreme%to%another,%which%would%be%
dangerous%at%high%speeds.%Most%wheels%have%a%visual%“straight”%position%which%
always%maps%to%the%wheels%of%the%car%being%straight,%this%is%a%cognitive%aid that%
helps%the%driver%understand%the%position%of%the%steering%when%entering%the%
car.%Steering%wheels%act%the%same%way%in%almost%every%car%(and%many%other%
vehicles%including%power%boats)%allowing%the%controls%to%benefit%from transfer%
effects.
Ben%Shneiderman's 8%Golden%Rules%of%Interface%Design%["pioneer%of%usability"]%
**more)app-specific
Strive%for%consistency (eg.%language,%layout,%design,%appearance)
Easier%to%learn%and%use
More%predictable%and%easy%to%understand
§
○
•
Cater%to%universal%usability
Take%into%account%knowledge,%experience,% preferences,%physical%
and%intellectual% abilities
○
•
Offer%informative%feedback (eg.%sounds,%highlighting,%progress%bars)
User%feedback%abt%actions%to%inform%them%abt%what%is%happening
○
•
Design%dialogs to%yield%closure%(eg.%"success"%after%transaction)
User%feedback%@%end%of%a%transaction
○
Feedback%about%any%user%input%-saved%or%lost
○
•
Prevent%errors
Detect%and%correct%when%they%occur
○
Reduce%consequences%(eg.%undo)
○
•
Permit%easy%reversal of%actions%(eg.%quit%to%Home%screen,%undo)
Users%often%change%their%mind/interrupted/become%confused
○
Offer%an%easy%way%out
○
•
Support%internal%locus%of%control (eg.%don't%impose%popups/random%
updates%w/o%warning)
Giving%user%a%sense%of%control,%so%they%know%what%to%do,%when%and%
how%to%do
○
Allow%user%to%initiate%and%control%actions
○
•
Reduce%short-term%memory%load (eg.%predict%user's%location%instead%of%
manual%typing,%popup%Calendar%dialog%instead%of%forced%manual%typing)
Use%meaningful%mnemonices/icons/abbs/"hint"
○
Don't%make%overly%complex
○
•
Evaluating%usability
Human%Factors
A%field%of%research%focusing%on%interaction%btwn%humans%and%
physical%objs%(including%computers)
○
Encompasses%usability%testing%and%other%empirical% testing%
methods
○
•
Skeuomorphism
=%the%practice%of%engineering%software%to%look%like%a%physical%
device/obj
○
Can%be%effective%since%it%creates%familiarity,%relates%functionality%to%
sth%user%has%previous%experience%with
○
Works%well%ONLY%IN%MODERATION
Important%to%ask if%any%part%of%UI%is%helping/hindering user
Easy%to%get%carried%away%with%overdesigning (eg.%
shadows,%animations)%since%it%looks%cool%and%different
□
§
When%popular%(recently),%was%heavily%overused%in%mobile%
interfaces
Over-designed,%links%btwn%software%&%real%world%were%
sometimes%tenuous
□
Being%used%only%because%it%looked%cool,%not%because%it%
made%sense
□
§
○
•
Week$11:$User$Experience
Monday,%15%May%2017 22:01
Document Summary
Needs to be designed specially, instead of just adapting existing interfaces of desktop apps/websites that mobile app is being created for. Provides info like light levels, camera or mic input. **need to be able to test app"s ui on that device + users try out. User-centred design is a software design approach that involves soliciting feedback frm end users throughout development process. App used for short time with focused purposes (eg. wearable apps like apple watch). Designed to quickly put info/decisions in front of user to deal with before efficiently moving on. -> common ops have to be accessible w/ min actions (eg. mapping and navigation apps w/ prominent onscreen controls to pan) Touch-based/gesture-based actions (eg. swiping, tapping, dragging, flicking, pinching) *powerful but complex interaction technique made possible by multi-touch screen technology. Requires users to know how to interact (introduced in 2007 w/ iphone) Often best used as shortcuts for more complicated actions.
