click to edit master subtitle style usability and user interface design application

33
Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Upload: branden-wilson

Post on 12-Jan-2016

220 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Click to edit Master subtitle style

USABILITY and USER INTERFACE DESIGN

Application

Page 2: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Exercise – Part 1

Design the web-site for your customer. (we will take the example of wikipedia website and analyse it).

Consider: What is the purpose of the web-site? Who are the users? What features and tools are needed in such a web-site?

Are these already documented as requirements?

Have you documented any usability requirements?

Choose the look-and-feel and layout.

Create a site map.

You should have done this already. Right?

Page 3: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Site map

Page 4: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Exercise – Part 2

Create a scenario for one part of the site based on your most important use case .

Create a (possibly paper) prototype that realizes your scenario.

Walk through the prototype yourself (pretend to be a user).

Think about the flow of the site, layout, visual appeal, use of colors, icons, etc.

Save your work!!!!!

Page 5: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Interface/Dialogue Design

The team needs to worry about:Layout (of buttons, text, table data, …)Controlling data input (validation and format controls)Feedback (prompting, status, warning, and error messages)Dialogue sequencing

Page 6: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

What Is a Dialogue?

A sequence of interactions between the system and a user

Dialogue design involves:Designing a dialogue sequence

Building a prototype

Assessing usability

Page 7: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

GUI Design Guidelines

User in control

Consistency

Personalization & Customization

Forgiveness

Feedback

Aesthetics & Usability

Page 8: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

User in Control

users should feel that they initiate and control actions

Page 9: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Consistency

The conformance to the naming, coding and other GUI-related standards developed internally by the organization

This includes the naming and coding of menus, action buttons, screen fields, etc. It also includes standards for the placement of screen objects and consistent use of other GUI elements across applications.

Page 10: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Personalization & Customization

GUI personalization is customization for personal use

e.g. a user reorders and resizes columns in a grid display and saves these changes as preferences

GUI customization is an administrative task of tailoring the software to different groups of users

e.g. when the program operates differently for novice and advanced users

Page 11: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Forgiveness

A good interface allows users to experiment and make mistakes in a “forgiving” way

Forgiveness encourages interface exploration because the user is allowed to take erroneous routes that can be “rolled back”.

Page 12: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Feedback

It tells the user what’s happening, or what’s going to happen next, and without it the user is left guessing or frustrated.

Page 13: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Aesthetics & Usability

Aesthetics is about visual appeal.

Usability is about the ease, simplicity, efficiency, reliability in using the interface.

Page 14: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Aesthetics and Usability

The issues to consider includethe use of colors,

the alignment and spacing of elements,

the sense of proportion,

the grouping of related elements, etc.

Page 15: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Exercise – Part 3

Choose one more scenario for your web-site based on your use cases.Create a prototype (paper, HTML, Visio, …) for this scenario.Save your work!!!!!

Page 16: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Ten Golden Usability RulesA great set of guidelines created by Jakob Nielsen in his book Usability Engineering.

1. Use simple and natural dialog/language.

User interfaces should be simplified as much as possible, eliminating as much as possible the additional features.

Page 17: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Ten Golden Usability Rules

2. Use language that fits the user group.

The language should be based on user’s language. Time, currency, phrases, metaphors, measurements, etc. must fit the culture of the user group.

Page 18: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Ten Golden Usability Rules

3. Minimize the load on short-term memory.

Users should not have to remember information from one part of the dialogue to another.

Page 19: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Ten Golden Usability Rules

4. Make the graphical user interface coherent and consistent.

The same action should always have the same effect. Users will feel confident in using the system.Example: open in a new tab

Page 20: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Ten Golden Usability Rules

5. Give the ability to use shortcuts. function keys, command keys, macros,

etc. to speed up the interaction for the expert’s users

Page 21: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Ten Golden Usability Rules

6. Give feedback to the user's actions. The system should always keep users

informed about what is going on, through appropriate feedback within reasonable time.

Page 22: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Ten Golden Usability Rules

7. Avoid error situations. Ask the user if s/he really wants to do

the action especially if the action leads to serious consequences. Avoid having too similar commands in the interface.

Commands whose actions are opposite should not be placed close to each other.

Page 23: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Ten Golden Usability Rules

8. Give clear exit marks. In the navigation bars, the users should

be able to back up.

Page 24: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Ten Golden Usability Rules

9. Give clear and understandable error messages.

Simple rules for error messages: should be phrased clearly and avoid obscure codesmessages should be polite and not intimidate the user or put the blame explicitly on the user

Page 25: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Ten Golden Usability Rules

10. Give clear help and understandable documentation.

Information should be easy to search.

The help manual should not be too large.

Page 26: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Usability testing

Page 27: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Step 1: Plan the Tests

Determine how many users will participate in the testEstimate how many tests will be required over the development cycleDetermine usability objectives and what functions will be testedDevelop evaluation measures (timing data, error counts, rating scales, etc.)

Page 28: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Step 2: Conduct the Tests

Provide introduction/overview for users (reinforce the fact that the application or website is being tested; the users are NOT the subjects of the test)Provide training for usersHave observers watch, listen, and take notes

Page 29: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Watch Users Work!!

Sometimes users will say they are likely to do something, but their actual behavior indicates otherwise.Better to learn from observing direct user behavior.Watch them as they attempt to use your application or website.DTM (Duct-Tape Method)

Page 30: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Step 3: Debrief the Users

Collect observation/evaluation data from users

Have users complete evaluation forms

Allow users to express their reactions about the test

Page 31: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Post-Test Work

Analyze data

Identify usability problems AND SOLUTIONS

Identify problem severity

Identify software bugs (maybe)

Conduct second round of testing (if necessary) and if time/resources permit

Page 32: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Exercise – Part 4

Evaluate your GUI for your web-site (consider the usability principles and testing techniques).

Plan tests for at least the four scenarios that you have previously created.

Get at least three users (people who are NOT in this class) to walk through and evaluate your design.

Perform your measurements, interviews, observations, etc.

Page 33: Click to edit Master subtitle style USABILITY and USER INTERFACE DESIGN Application

Exercise – Part 5

Summarize what you have learned in terms of usability principles.