Usability and Accessibility CS 4720 Web & Mobile Systems

Size: px

Start display at page:

Download "Usability and Accessibility CS 4720 Web & Mobile Systems"

Shannon Reeves
5 years ago
Views:

1 Usability and Accessibility Web & Mobile Systems

2 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

3 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

4 10 Rules to Mobile HCI 10 Rules 4

5 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

6 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

7 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

8 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

9 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

10 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

11 Rule 7: Flexibility EvaluaAng an Interface 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

12 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

13 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

14 Rule 10: Help! EvaluaAng an Interface Have reasonable help informaaon available in the app if possible. 14

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

16 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? 16

17 Hardware Interface Consider the following hardware innovaaons: The click wheel The rocker The track ball The home bueon 17

18 Sofware Interface Let's look at a few interfaces 18

19 Image Galleries 19 CS 4720

20 Empty Lists 20

21 Describing Places 21

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

23 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

24 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 24

25 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 25

26 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

27 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

Heuristic Evaluation. Jon Kolko Professor, Austin Center for Design

Heuristic Evaluation. Jon Kolko Professor, Austin Center for Design Heuristic Evaluation Jon Kolko Professor, Austin Center for Design Heuristic Evaluation Compare an interface to an established list of heuristics best practices to identify usability problems. Heuristic