Usability and Accessibility CS 4720 Mobile Application Development - - PowerPoint PPT Presentation

▶
usability and accessibility
SMART_READER_LITE
LIVE PREVIEW

Usability and Accessibility CS 4720 Mobile Application Development - - PowerPoint PPT Presentation

Oct 01, 2022 317 likes •607 views

Usability and Accessibility CS 4720 Mobile Application Development CS 4720 What makes a good interface? Don't say anything but SIS. What are it's characteristics? How do you just KNOW that you're using something that has

slide-1
SLIDE 1

CS 4720

Usability and Accessibility

CS 4720 – Mobile Application Development

slide-2
SLIDE 2

CS 4720

What makes a good interface?

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

something that has been thought out properly?

2

slide-3
SLIDE 3

CS 4720

Not Just the UI

  • The experience begins with the first time you

launch an app or go to a web site

  • There are several components here

– Initial impression – User interface – 80/20 rule (sometimes the 90/10 rule) – Graphic design – Information presentation

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

3

slide-4
SLIDE 4

CS 4720

10 Rules…

  • 10 Rules to Mobile HCI

4

slide-5
SLIDE 5

CS 4720

Evaluating 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 time.

5

slide-6
SLIDE 6

CS 4720

Evaluating an Interface

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

conventions, making information appear in natural and logical order.

6

slide-7
SLIDE 7

CS 4720

Evaluating an Interface

  • Rule 3: The “uh-oh” button
  • Users often choose system functions by

mistake (particularly 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

slide-8
SLIDE 8

CS 4720

Evaluating an Interface

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

different words, situations, or actions mean the same thing.

  • The system should follow platform

conventions.

8

slide-9
SLIDE 9

CS 4720

Evaluating an Interface

  • Rule 5: Error prevention
  • 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

slide-10
SLIDE 10

CS 4720

Evaluating an Interface

  • Rule 6: Recognition rather than recall
  • An icon should represent the action and should

immediately recognizable as to what it does

  • Part of this is following platform standards,

part is being consistent in your own application

  • An action/swipe/etc should be consistent

across screens

10

slide-11
SLIDE 11

CS 4720

Evaluating an Interface

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

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

11

slide-12
SLIDE 12

CS 4720

Evaluating an Interface

  • Rule 8: Aesthetic and minimalist design
  • Every extra unit of information in a dialog

competes with the relevant units of information and diminishes their relative visibility.

12

slide-13
SLIDE 13

CS 4720

Evaluating an Interface

  • Rule 9: Error explanations
  • Error messages should be expressed in plain

language (NO CODES), precisely indicate the problem, and constructively suggest a solution.

13

slide-14
SLIDE 14

CS 4720

Evaluating an Interface

  • Rule 10: Help!
  • Have reasonable help information available in

the app if possible.

14

slide-15
SLIDE 15

CS 4720

The Ten Rules

  • 1. Visibility of Status
  • 2. System = Real World
  • 3. The “uh-oh” button
  • 4. Consistency and Standards
  • 5. Error Prevention
  • 6. Recognition rather than Recall
  • 7. Flexibility
  • 8. Minimalist Design
  • 9. Error Explanation
  • 10. Help!

15

slide-16
SLIDE 16

CS 4720

Software Interface

16

  • Let's look at a few interfaces
slide-17
SLIDE 17

CS 4720

Image Galleries

17

slide-18
SLIDE 18

CS 4720

Empty Lists

18

slide-19
SLIDE 19

CS 4720

Describing Places

19

slide-20
SLIDE 20

CS 4720

Sending Money

20

slide-21
SLIDE 21

CS 4720

Playing Music

21

slide-22
SLIDE 22

CS 4720

Contacts

22

slide-23
SLIDE 23

CS 4720

One Hand or Two Hands?

  • Large, obvious buttons
  • 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 transitions between states obvious
  • Apps: Phone, Contacts, Urbanspoon

23

slide-24
SLIDE 24

CS 4720

One Hand or Two Hands?

24

  • Theoretically, the user is not moving, so

controls can be more complex

  • Stylus control
  • Keyboard in landscape mode (soft or hard)
  • More information to proces
  • Apps: Amazon, AllRecipes
slide-25
SLIDE 25

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-manipulation widgets for

input with immediate feedback

  • Menus must be tailored to the device input
slide-26
SLIDE 26

CS 4720

Rules of Thumb

  • Typing isn't easy – provide ways to remember

text

  • Use contextual information whenever possible

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

26

slide-27
SLIDE 27

CS 4720

My UI works great now!

  • But it still doesn't look “slick!”
  • Simple is beautiful
  • Get a friend to pick out the color scheme for
  • you. Seriously.
  • Imitation is the greatest form of flattery
  • If all else fails… ask a graphic design student
  • Or check the patterns:

– http://sixrevisions.com/user-interface/mobile-ui- design-patterns-inspiration/

27