CS 4720 Usability and Accessibility CS 4720 – Web & Mobile Systems.
-
Upload
harold-reeves -
Category
Documents
-
view
222 -
download
1
Transcript of CS 4720 Usability and Accessibility CS 4720 – Web & Mobile Systems.
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 characteristics?• How do you just KNOW that you're using
something that has been thought out properly?
2
CS 47203
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)
CS 4720
10 Rules…• 10 Rules to Mobile HCI
4
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
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
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
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
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
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
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
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
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
CS 4720
Evaluating an Interface• Rule 10: Help!• Have reasonable help information available in
the app if possible.
14
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
CS 4720
Phone-Specific Interface
16
• We need to separate two concerns here– The Hardware Interface– The Software Interface
• What are some specific hardware innovations that we use with cell phones?
• How do these address the 10 rules?
CS 4720
Hardware Interface• Consider the following hardware innovations:
– The click wheel– The rocker– The track ball– The home button
17
CS 4720
Software Interface
18
• Let's look at a few interfaces
CS 472019
Image Galleries
CS 472020
Empty Lists
CS 472021
Describing Places
CS 4720
Concepts
22
• UI's that grow and shrink– Flexible design
• Softkeys and icon buttons for common tasks• Predictive text• Others?
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
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
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
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
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