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

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? ¡ CS ¡4720 ¡ 2

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) ¡ CS ¡4720 ¡ 3

10 ¡Rules… ¡ • 10 ¡Rules ¡to ¡Mobile ¡HCI ¡ CS ¡4720 ¡ 4

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. ¡ CS ¡4720 ¡ 5

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. ¡ CS ¡4720 ¡ 6

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. ¡ CS ¡4720 ¡ 7

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. ¡ CS ¡4720 ¡ 8

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? ¡ CS ¡4720 ¡ 9

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 ¡ ¡ CS ¡4720 ¡ 10

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. ¡ CS ¡4720 ¡ 11

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. ¡ CS ¡4720 ¡ 12

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. ¡ CS ¡4720 ¡ 13

EvaluaAng ¡an ¡Interface ¡ • Rule ¡10: ¡Help! ¡ • Have ¡reasonable ¡help ¡informaAon ¡available ¡in ¡ the ¡app ¡if ¡possible. ¡ CS ¡4720 ¡ 14

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! ¡ CS ¡4720 ¡ 15

Phone-­‑Specific ¡Interface ¡ • 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 ¡ 16

Hardware ¡Interface ¡ • Consider ¡the ¡following ¡hardware ¡innovaAons: ¡ – The ¡click ¡wheel ¡ – The ¡rocker ¡ – The ¡track ¡ball ¡ – The ¡home ¡bueon ¡ CS ¡4720 ¡ 17

Sofware ¡Interface ¡ • Let's ¡look ¡at ¡a ¡few ¡interfaces ¡ CS ¡4720 ¡ 18

Image ¡Galleries ¡ CS ¡4720 ¡ 19

Empty ¡Lists ¡ CS ¡4720 ¡ 20

Describing ¡Places ¡ CS ¡4720 ¡ 21

Concepts ¡ • UI's ¡that ¡grow ¡and ¡shrink ¡ – Flexible ¡design ¡ • Sofkeys ¡and ¡icon ¡bueons ¡for ¡common ¡tasks ¡ • PredicAve ¡text ¡ • Others? ¡ CS ¡4720 ¡ 22

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 ¡ CS ¡4720 ¡ 23

One ¡Hand ¡or ¡Two ¡Hands? ¡ • 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 ¡ 24

Rules ¡of ¡Thumb ¡ • 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 ¡ 25

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) ¡ CS ¡4720 ¡ 26

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/ ¡ CS ¡4720 ¡ 27