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