Usability and Accessibility CS 4720 Web & Mobile - - PowerPoint PPT Presentation

CS ¡4720 ¡

Usability ¡and ¡Accessibility ¡

CS ¡4720 ¡– ¡Web ¡& ¡Mobile ¡Systems ¡ ¡

CS ¡4720 ¡

What ¡makes ¡a ¡good ¡interface? ¡

• Don't ¡say ¡“anything ¡but ¡SIS.” ¡
• What ¡are ¡it's ¡characterisAcs? ¡
• How ¡do ¡you ¡just ¡KNOW ¡that ¡you're ¡using ¡

something ¡that ¡has ¡been ¡thought ¡out ¡properly? ¡

2

CS ¡4720 ¡

Not ¡Just ¡the ¡UI ¡

• The ¡experience ¡begins ¡with ¡the ¡first ¡Ame ¡you ¡

launch ¡an ¡app ¡or ¡go ¡to ¡a ¡web ¡site ¡

• There ¡are ¡several ¡components ¡here ¡

– IniAal ¡impression ¡ – User ¡interface ¡ – 80/20 ¡rule ¡(someAmes ¡the ¡90/10 ¡rule) ¡ – Graphic ¡design ¡ – InformaAon ¡presentaAon ¡

• All ¡of ¡this ¡adds ¡up ¡to ¡the ¡user ¡experience ¡(UX) ¡

3

CS ¡4720 ¡

10 ¡Rules… ¡

• 10 ¡Rules ¡to ¡Mobile ¡HCI ¡

4

CS ¡4720 ¡

EvaluaAng ¡an ¡Interface ¡

• Rule ¡1: ¡Visibility ¡of ¡system ¡status ¡
• The ¡system ¡should ¡always ¡keep ¡users ¡informed ¡

about ¡what ¡is ¡going ¡on ¡through ¡appropriate ¡ feedback ¡within ¡reasonable ¡Ame. ¡

5

CS ¡4720 ¡

EvaluaAng ¡an ¡Interface ¡

• Rule ¡2: ¡Match ¡the ¡system ¡to ¡the ¡real ¡world ¡
• The ¡system ¡should ¡follow ¡real-­‑world ¡

convenAons, ¡making ¡informaAon ¡appear ¡in ¡ natural ¡and ¡logical ¡order. ¡

6

CS ¡4720 ¡

EvaluaAng ¡an ¡Interface ¡

• Rule ¡3: ¡The ¡“uh-­‑oh” ¡bueon ¡
• Users ¡ofen ¡choose ¡system ¡funcAons ¡by ¡

mistake ¡(parAcularly ¡on ¡mobile) ¡and ¡will ¡need ¡a ¡ clearly ¡marked ¡“emergency ¡exit” ¡to ¡leave ¡the ¡ unwanted ¡state ¡without ¡having ¡to ¡go ¡through ¡ extended ¡steps. ¡

• Systems ¡should ¡support ¡undo ¡and ¡redo. ¡

7

CS ¡4720 ¡

EvaluaAng ¡an ¡Interface ¡

• Rule ¡4: ¡Consistency ¡and ¡standards ¡
• User ¡should ¡not ¡have ¡to ¡wonder ¡whether ¡

different ¡words, ¡situaAons, ¡or ¡acAons ¡mean ¡the ¡ same ¡thing. ¡

• The ¡system ¡should ¡follow ¡plahorm ¡
• convenAons. ¡

8

CS ¡4720 ¡

EvaluaAng ¡an ¡Interface ¡

• Rule ¡5: ¡Error ¡prevenAon ¡
• Add ¡input ¡checks ¡

– How ¡many ¡digits ¡in ¡that ¡phone ¡number? ¡ – How ¡many ¡digits ¡in ¡that ¡credit ¡card ¡number? ¡ – Are ¡there ¡really ¡39 ¡days ¡in ¡July? ¡

9

CS ¡4720 ¡

EvaluaAng ¡an ¡Interface ¡

• Rule ¡6: ¡RecogniAon ¡rather ¡than ¡recall ¡
• An ¡icon ¡should ¡represent ¡the ¡acAon ¡and ¡should ¡

immediately ¡recognizable ¡as ¡to ¡what ¡it ¡does ¡

• Part ¡of ¡this ¡is ¡following ¡plahorm ¡standards, ¡

part ¡is ¡being ¡consistent ¡in ¡your ¡own ¡applicaAon ¡

• An ¡acAon/swipe/etc ¡should ¡be ¡consistent ¡

across ¡screens ¡ ¡

10

CS ¡4720 ¡

EvaluaAng ¡an ¡Interface ¡

• Rule ¡7: ¡Flexibility ¡
• Accelerators, ¡shortcuts, ¡etc ¡(which ¡are ¡unseen ¡

by ¡the ¡novice ¡user) ¡can ¡speed ¡up ¡interacAons ¡ for ¡the ¡expert ¡user ¡to ¡such ¡an ¡extent ¡that ¡the ¡ system ¡can ¡cater ¡to ¡both ¡inexperienced ¡and ¡ experienced ¡users. ¡

11

CS ¡4720 ¡

EvaluaAng ¡an ¡Interface ¡

• Rule ¡8: ¡AestheAc ¡and ¡minimalist ¡design ¡
• Every ¡extra ¡unit ¡of ¡informaAon ¡in ¡a ¡dialog ¡

competes ¡with ¡the ¡relevant ¡units ¡of ¡ informaAon ¡and ¡diminishes ¡their ¡relaAve ¡

• visibility. ¡

12

CS ¡4720 ¡

EvaluaAng ¡an ¡Interface ¡

• Rule ¡9: ¡Error ¡explanaAons ¡
• Error ¡messages ¡should ¡be ¡expressed ¡in ¡plain ¡

language ¡(NO ¡CODES), ¡precisely ¡indicate ¡the ¡ problem, ¡and ¡construcAvely ¡suggest ¡a ¡soluAon. ¡

13

CS ¡4720 ¡

EvaluaAng ¡an ¡Interface ¡

• Rule ¡10: ¡Help! ¡
• Have ¡reasonable ¡help ¡informaAon ¡available ¡in ¡

the ¡app ¡if ¡possible. ¡

14

CS ¡4720 ¡

The ¡Ten ¡Rules ¡

• 1. ¡Visibility ¡of ¡Status ¡
• 2. ¡System ¡= ¡Real ¡World ¡
• 3. ¡The ¡“uh-­‑oh” ¡bueon ¡
• 4. ¡Consistency ¡and ¡Standards ¡
• 5. ¡Error ¡PrevenAon ¡
• 6. ¡RecogniAon ¡rather ¡than ¡Recall ¡
• 7. ¡Flexibility ¡
• 8. ¡Minimalist ¡Design ¡
• 9. ¡Error ¡ExplanaAon ¡
• 10. ¡Help! ¡

15

CS ¡4720 ¡

Phone-­‑Specific ¡Interface ¡

16

• We ¡need ¡to ¡separate ¡two ¡concerns ¡here ¡

– The ¡Hardware ¡Interface ¡ – The ¡Sofware ¡Interface ¡

• What ¡are ¡some ¡specific ¡hardware ¡innovaAons ¡

that ¡we ¡use ¡with ¡cell ¡phones? ¡

• How ¡do ¡these ¡address ¡the ¡10 ¡rules? ¡

CS ¡4720 ¡

Hardware ¡Interface ¡

• Consider ¡the ¡following ¡hardware ¡innovaAons: ¡

– The ¡click ¡wheel ¡ – The ¡rocker ¡ – The ¡track ¡ball ¡ – The ¡home ¡bueon ¡

17

CS ¡4720 ¡

Sofware ¡Interface ¡

18

• Let's ¡look ¡at ¡a ¡few ¡interfaces ¡

CS ¡4720 ¡

Image ¡Galleries ¡

19

CS ¡4720 ¡

Empty ¡Lists ¡

20

CS ¡4720 ¡

Describing ¡Places ¡

21

CS ¡4720 ¡

Concepts ¡

22

• UI's ¡that ¡grow ¡and ¡shrink ¡

– Flexible ¡design ¡

• Sofkeys ¡and ¡icon ¡bueons ¡for ¡common ¡tasks ¡
• PredicAve ¡text ¡
• Others? ¡

CS ¡4720 ¡

One ¡Hand ¡or ¡Two ¡Hands? ¡

• Large, ¡obvious ¡bueons ¡
• Controls ¡toward ¡the ¡center ¡of ¡the ¡screen ¡so ¡

you ¡don't ¡have ¡to ¡stretch ¡

• Controls ¡have ¡space ¡between ¡them ¡if ¡possible ¡
• Put ¡only ¡needed ¡items ¡on ¡the ¡screen ¡
• Eliminate ¡unnecessary ¡words ¡
• Make ¡transiAons ¡between ¡states ¡obvious ¡
• Apps: ¡Phone, ¡Contacts, ¡Urbanspoon ¡

23

CS ¡4720 ¡

One ¡Hand ¡or ¡Two ¡Hands? ¡

24

• TheoreAcally, ¡the ¡user ¡is ¡not ¡moving, ¡so ¡

controls ¡can ¡be ¡more ¡complex ¡

• Stylus ¡control ¡
• Keyboard ¡in ¡landscape ¡mode ¡(sof ¡or ¡hard) ¡
• More ¡informaAon ¡to ¡proces ¡
• Apps: ¡Amazon, ¡AllRecipes ¡

CS ¡4720 ¡

Rules ¡of ¡Thumb ¡

25

• Easy ¡traversals ¡between ¡states ¡
• Audio ¡sparingly ¡(remember ¡– ¡audio ¡may ¡be ¡

turned ¡off!) ¡

• Build ¡for ¡the ¡input ¡device ¡(click ¡wheel, ¡touch ¡

screen, ¡stylus) ¡

• Provide ¡shortcuts ¡when ¡possible ¡
• Try ¡to ¡use ¡direct-­‑manipulaAon ¡widgets ¡for ¡

input ¡with ¡immediate ¡feedback ¡

• Menus ¡must ¡be ¡tailored ¡to ¡the ¡device ¡input ¡

CS ¡4720 ¡

Rules ¡of ¡Thumb ¡

• Typing ¡isn't ¡easy ¡– ¡provide ¡ways ¡to ¡remember ¡

text ¡

• Use ¡contextual ¡informaAon ¡whenever ¡possible ¡

(use ¡GPS ¡coords ¡automaAcally ¡in ¡a ¡Google ¡ search, ¡have ¡the ¡last ¡contact ¡up ¡for ¡making ¡a ¡ phone ¡call, ¡etc) ¡

26

CS ¡4720 ¡

My ¡UI ¡works ¡great ¡now! ¡

• But ¡it ¡sAll ¡doesn't ¡look ¡“slick!” ¡
• Simple ¡is ¡beauAful ¡
• Get ¡a ¡friend ¡to ¡pick ¡out ¡the ¡color ¡scheme ¡for ¡
• you. ¡ ¡Seriously. ¡
• ImitaAon ¡is ¡the ¡greatest ¡form ¡of ¡flaeery ¡
• If ¡all ¡else ¡fails… ¡ask ¡a ¡graphic ¡design ¡student ¡
• Or ¡check ¡the ¡paeerns: ¡

– hep://sixrevisions.com/user-­‑interface/mobile-­‑ui-­‑ design-­‑paeerns-­‑inspiraAon/ ¡

27