CS 4720 Usability and Accessibility CS 4720 – Web & Mobile Systems.
Usability and Accessibility - CS 4720 · 2017-02-17 · CS 4720 Not Just the UI •The experience...
Transcript of Usability and Accessibility - CS 4720 · 2017-02-17 · CS 4720 Not Just the UI •The experience...
CS4720
UsabilityandAccessibility
CS4720– MobileApplicationDevelopment
CS4720
Whatmakesagoodinterface?• Don'tsay“anythingbutSIS.”• Whatareit'scharacteristics?• HowdoyoujustKNOWthatyou'reusingsomethingthathasbeenthoughtoutproperly?
2
CS4720
NotJusttheUI• Theexperiencebeginswiththefirsttimeyoulaunchanapporgotoawebsite
• Thereareseveralcomponentshere– Initialimpression– Userinterface– 80/20rule(sometimesthe90/10rule)– Graphicdesign– Informationpresentation
• Allofthisaddsuptotheuserexperience(UX)
3
CS4720
10Rules…• 10RulestoMobileHCI
4
CS4720
EvaluatinganInterface• Rule1:Visibilityofsystemstatus• Thesystemshouldalwayskeepusersinformedaboutwhatisgoingonthroughappropriatefeedbackwithinreasonabletime.
5
CS4720
EvaluatinganInterface• Rule2:Matchthesystemtotherealworld• Thesystemshouldfollowreal-worldconventions,makinginformationappearinnaturalandlogicalorder.
6
CS4720
EvaluatinganInterface• Rule3:The“uh-oh”button• Usersoftenchoosesystemfunctionsbymistake(particularlyonmobile)andwillneedaclearlymarked“emergencyexit” toleavetheunwantedstatewithouthavingtogothroughextendedsteps.
• Systemsshouldsupportundoandredo.
7
CS4720
EvaluatinganInterface• Rule4:Consistencyandstandards• Usershouldnothavetowonderwhetherdifferentwords,situations,oractionsmeanthesamething.
• Thesystemshouldfollowplatformconventions.
8
CS4720
EvaluatinganInterface• Rule5:Errorprevention• Addinputchecks
– Howmanydigitsinthatphonenumber?– Howmanydigitsinthatcreditcardnumber?– Aretherereally39daysinJuly?
9
CS4720
EvaluatinganInterface• Rule6:Recognitionratherthanrecall• Aniconshouldrepresenttheactionandshouldimmediatelyrecognizableastowhatitdoes
• Partofthisisfollowingplatformstandards,partisbeingconsistentinyourownapplication
• Anaction/swipe/etc shouldbeconsistentacrossscreens
10
CS4720
EvaluatinganInterface• Rule7:Flexibility• Accelerators,shortcuts,etc.(whichareunseenbythenoviceuser)canspeedupinteractionsfortheexpertusertosuchanextentthatthesystemcancatertobothinexperiencedandexperiencedusers.
11
CS4720
EvaluatinganInterface• Rule8:Aestheticandminimalistdesign• Everyextraunitofinformationinadialogcompeteswiththerelevantunitsofinformationanddiminishestheirrelativevisibility.
12
CS4720
EvaluatinganInterface• Rule9:Errorexplanations• Errormessagesshouldbeexpressedinplainlanguage(NOCODES),preciselyindicatetheproblem,andconstructivelysuggestasolution.
13
CS4720
EvaluatinganInterface• Rule10:Help!• Havereasonablehelpinformationavailableintheappifpossible.
14
CS4720
TheTenRules• 1.VisibilityofStatus• 2.System=RealWorld• 3.The“uh-oh”button• 4.ConsistencyandStandards• 5.ErrorPrevention• 6.RecognitionratherthanRecall• 7.Flexibility• 8.MinimalistDesign• 9.ErrorExplanation• 10.Help!
15
CS4720
SoftwareInterface
16
• Let'slookatafewinterfaces
CS4720
ImageGalleries
17
CS4720
EmptyLists
18
CS4720
DescribingPlaces
19
CS4720
SendingMoney
20
CS4720
PlayingMusic
21
CS4720
Contacts
22
CS4720
OneHandorTwoHands?• Large,obviousbuttons• Controlstowardthecenterofthescreensoyoudon'thavetostretch
• Controlshavespacebetweenthemifpossible• Putonlyneededitemsonthescreen• Eliminateunnecessarywords• Maketransitionsbetweenstatesobvious• Apps:Phone,Contacts,Urbanspoon
23
CS4720
OneHandorTwoHands?
24
• Theoretically,theuserisnotmoving,socontrolscanbemorecomplex
• Styluscontrol• Keyboardinlandscapemode(softorhard)• Moreinformationtoproces• Apps:Amazon,AllRecipes
CS4720
RulesofThumb
25
• Easytraversalsbetweenstates• Audiosparingly(remember– audiomaybeturnedoff!)
• Buildfortheinputdevice(clickwheel,touchscreen,stylus)
• Provideshortcutswhenpossible• Trytousedirect-manipulationwidgetsforinputwithimmediatefeedback
• Menusmustbetailoredtothedeviceinput
CS4720
RulesofThumb• Typingisn'teasy– providewaystoremembertext
• Usecontextualinformationwheneverpossible(useGPScoordsautomaticallyinaGooglesearch,havethelastcontactupformakingaphonecall,etc)
26
CS4720
MyUIworksgreatnow!• Butitstilldoesn't look“slick!”• Simpleisbeautiful• Getafriendtopickoutthecolorschemeforyou.Seriously.
• Imitationisthegreatestformofflattery• Ifallelsefails…askagraphicdesignstudent• Orcheckthepatterns:
– http://sixrevisions.com/user-interface/mobile-ui-design-patterns-inspiration/
27