1 Guidelines, Principles, and Theories Lesson 3 will cover the following aspects of user interface design Guidelines User interface guidelines that

1

Guidelines, Principles, and Theories

Lesson 3 will cover the following aspects of user interface design

Guidelines

• User interface guidelines that can be used by designers to improve the usability

of their applications

• Based on government and corporate research

• Organized display of information Principles

• Interaction Styles

• Shneiderman’s rules of interface design

• Automated systems and human control Theories

• Descriptive and Explanatory

• Predictive

• Taxonomies

• Object-Action Interface Model

2


Guidelines

Government Web Usability

• http://www.usability.gov/pdfs/

guidelines.html

• Supported by research findings

3


Guidelines

Corporate

• iPhone User Interface Guidelines:

http://developer.apple.com/docume

ntation/UserExperience/Conceptual

/AppleHIGuidelines/XHIGIntro/

chapter_1_section_1.html

http://www.youtube.com/watch?v=ENyzcXRPeeIHow to Build an iPhone App that Doesn't Suck

4


Guidelines

Jelly Bean

• Android User Interface Guidelines:

http://developer.android.com/design/i

ndex.html

ICS Guidelines

5


Accessibility Guidelines

Making websites usable by people with disabilities

• Visual: blindness, low vision and color blindness

• Motor/Mobility: difficulty or inability to use the hands, including tremors, muscle

slowness, loss of fine muscle control

• Auditory: deafness or hearing impairments or hard of hearing

• Seizures: photo-epileptic seizures caused by visual strobe or flashing effects

• Cognitive/Intellectual: developmental disabilities, learning disabilities and cognitive

disabilities of various origins, affecting memory, attention, developmental "maturity,"

problem-solving and logic skills http://www.w3.org/TR/WCAG10/

Examples

• Provide a text equivalent for every non-text element

• Ensure that all information conveyed with color is also available w/o color

6


Accessibility and Cell Phone Access

Nuance's TALKS and Code Factory's Mobile Speak screen readers

Screen magnifiers

iPhone

Voice-Over screen reader

Zoom magnification feature

Compatibility with wireless braille displays

Assisted Touch

Android

Google's Talkback.

http://www.youtube.com/watch?v=rubTwsrftPo

7


Organizing the Display

Consistency of Data Display

• Terminology, formats, colors, capitalization Efficient information assimilation by the user

• Left justified alpha data, right justified numeric data

8






9






10






11






12





13





14





15





16





17





18





19





20



Minimal memory load on the user

Compatibility of data display with data entry

Data Display Version

Data Entry Version

21



Flexibility for user control of data display

22


Getting the user’s attention

Intensity (luminance, contrast)

Color (up to four)

Size (up to four sizes)

Choice of formats (up to three fonts)

Inverse video

Blinking

Audio (distinguishing between signals)

23




Color (up to four)



Inverse video

Blinking


A

B

24




Color (up to four)



Inverse video

Blinking


A

B

25

1. Unit A1. Section 12. Section 2

2. Unit B1. Section 12. Section 2

1. Unit A1. Section 12. Section 2

2. Unit B1. Section 12. Section 2




Color (up to four)



Inverse video

Blinking


A

B

26




Color (up to four)



Inverse video

Blinking


This is a paragraph that does not really say anything; however inverse video can be used to draw attention to specific words.

inverse video

27


Facilitating Data Entry

Consistency of transactions

• (E.g. insurance Companies vs. individuals) Minimal input actions by the user

• Single key press (restricted to keypad, no mousing around)

• Pre-population of defaults

28


Facilitating Data Entry

Minimal memory load on users (e.g., auto-complete)

Compatibility of data entry with data display (e.g., Explanation of Benefits)

Flexibility for user control of data entry (e.g., user defined order of columns)

29


Principles Differences in Users

• Domain/Application Knowledge

• Frequency of Use

• Goals

• Consequences of Errors

30


Principles User Skills Levels

• Novice Users

– Limit terminology

– Simplified actions

– Feedback

• Knowledgeable Intermittent Users

– Broad knowledge of the interface

– Reduce memory load (e.g., where to find functions)

– Protection from danger of actions (relaxes exploration)

• Expert Frequent Users

– Need speed (short-cuts)

– Don’t reduce speed as a result of lengthy feedback

31


Assumed starting point for all users

Change wallpaper

Change ringtone

Send a text message to a

contact

Reply to a text message

Send a picture message

Specify a unique ring for

a callerCall a number

Show the callers picture when they

call

Remove a number from your directory

Play a game

Read the news

Download a new ringtone

View photos you have taken with

your camera

Add a number to your directory

Set phone to silent mode

Send a text message

Talking

Messaging

Personalizing

Gaming

Photographs

Information Gathering

View missed calls

What is themost likely next task

to be performed?

Download a Game

Search for a Song by title

Purchase a song

Listen to a previouslypurchased song

Create a playlist

Play all songson your phone

Find a clip on ESPN

Download a clip from CNN

Find directions viaVZ Navigator

Music and Video

32


Interaction Style Direct Manipulation

• Visual representation of familiar task objects

• Can significantly simplify a task

• Difficult to program

33


Interaction Style Menu Selection

• Read a list of menu items

• Select an item

• Observe the effect

• Are all needed functions listed on the menu?

34


Interaction Style Form Fill-In

• For data entry applications

• Field labels should be clear

• Permissible values should be known (e.g., mm/dd/yyyy)

• Support is provided to respond to error message

35


Interaction Style

Command Language

• E.g., [CMD: u 800-222-2222 CA=ATX]

• Powerful

• Difficult to Learn

36


Interaction Style

Natural Language

• Typed– Requires clarification dialog

• Verbal– Difficulty with context (e.g., “Put that object on top of that

object there”)

– Dialog is constrained (e.g., “If English is your preferred language, speak or say one)

– Difficulty in traversing menu structures (e.g., I just want to speak to someone directly)

37


Shneiderman’s 8 Principles of Interface Design

1. Consistency

• Terms, color, layout, fonts, patterns (e.g., yes/no buttons in same order)2. Cater to universal usability

• Novice vs. Expert (adaptability to short-cuts)

• Previous computer experience

• Domain expertise

• Disabilities3. Offer informative feedback

• For every user action there should be system feedback4. Design dialogs to yield closure

• Sequence of actions should have a beginning, middle and end5. Prevent Errors

• Enabling/Disabling fields

• Formatted Fields (alpha, date, SSN, TN)

• Error Messages (simple, constructive, specific instructions for recovery)

• Auto-complete

38



1. Consistency











• Auto-complete

39



1. Consistency











• Auto-complete

40



1. Consistency











• Auto-complete

41



1. Consistency








• Enabling/Disabling entry fields

• Formatted Fields (alpha, numeric, date, SSN, TN)


• Auto-complete

42


Shneiderman’s 8 principles of Interface Design

5. Prevent Errors (cont.)

• Verification of completion of sub-tasks

• Single actions to accomplish an action sequence

6. Permit easy reversal of actions

• A single action

• A set of data

• A complete process

7. Support internal focus of control

• Users should be the initiators of actions, not the responders to actions

8. Reduce short-term memory load

• 7 +/- 2 chunks

• On line access to codes, abbreviations should be provided

• Drop-downs

43


Shneiderman’s 8 prinicles of Interface Design





• A single action

• A set of data





• 7 +/- 2 chunks


• Drop-downs

44


Shneiderman’s 8 prinicles of Interface Design





• A single action

• A set of data





• 7 +/- 2 chunks


• Drop-downs

45


Shneiderman’s 8 principles of Interface Design





• A single action

• A set of data





• 7 +/- 2 chunks

• Drop-downs

46


Integrating automation while preserving human control Supervisory Control

• The real world is an open system (unlimited number of unpredictable events)

• Computers are closed systems (limited number of events)• Human’s must be able to support the unpredictable events

(safety, failures, quality)• The human should be in the loop

47


Integrating automation while preserving human control Human Strengths

• Recognize constant patterns in varying situations• Sense unusual and unexpected events• Remembers principles and strategies• Adapt decisions to the situation• Select alternatives if original approach fails• Generalize from observations• Develop new solutions

48


Integrating automation while preserving human control

Computer Strengths

• Sense stimuli outside human’s range• Store quantities of coded information accurately• Monitor pre-specified events, especially infrequent ones• Make rapid and consistent responses to input signals• Recall quantities of detailed information accurately• Process quantitative data in pre-specified ways• Perform repetitive pre-programmed actions reliably

49


Adaptive Interface

The application adapts to the user’s expertise based on the user model

• Contents of menus

• Order of menu items

• Consider the violation of user expectations

50


Theories Description and Explanatory

• Consistent nomenclature for objects and actions (e.g., click, drag) Predictive

• Allow a comparison of proposed designs for execution times and error rates

– E.g., effect of font type Other Type of Theories

• Motor-Task (e.g., pointing with a mouse)

• Perceptual Activities (e.g., finding an item on a display)

• Cognitive Aspects (e.g., changing a font style) Taxonomy

Classifies a complex set of phenomena into understandable categories

• Task Structured vs. Unstructured

• Technical Aptitude (e.g., website, CAD/CAM)

• UI Styles (forms, menus, commands)

51


Levels of Analysis

Conceptual Level – The User’s Mental Model of the Application

• E.g., Paint and Draw Programs Semantic Level

• The meanings conveyed by the user’s input and the computer’s input

• E.g., Delete an object Syntactic Level

• Sentences provided by the user to instruct the computer to perform a task

• E.g., Select an object – keystroke – confirm deletion Lexical Level

• Mechanisms by which users specify the syntax

• E.g., Mouse-Click

52


Stages-of-action model: Norman (1988) Explanatory Model of HCI Stages:

• Form the goal

• Form the intention

• Specify the action

• Execute the action

• Perceive the system state

• Interpret the system state

• Evaluation the outcome Gulf of execution

• Mismatch between the user’s intentions and the allowable actions

– E.g., Copy the format of a letter Gulf of evaluation

• Mismatch between the system’s representation and the user’s expectation

– E.g., difficulty of drawing an object directly in Microsoft Word

53


Norman Error Analysis

Where errors occur:

• Users form an inadequate goal

• User may not find the correct interface object because of an

incomprehensible label or icon

• User may not now how to specify or execute a desired action

• Users may receive inappropriate or misleading feedback

54


Conceptual Model

Semantic Level

Add a Phone Number

GoalGoal

Schedule Appointment

Schedule Appointment

Check-InCheck-In

Patient Demographics

Patient Demographics

Check-In Information

Check-In Information

NameName

AddressAddress

55

Syntactic Level – Add a Telephone Number

Select “Check-In” Hyperlink from the Home Page

Locate the Patient via a Locator

Enter SSN, Last Name, MRN, etc.

Semantic Match or Full Match

Select from list of results or create a new patient

Navigate to the Address/Phone Tab

Direct Entry of Phone Number


56


Select “Check-In” Hyperlink from the Home Page

Locate the Patient via a Locator

Enter SSN, Last Name, MRN, etc.

Semantic Match or Full Match

Select from list of results or create a new patient

Navigate to the Address/Phone Tab


57


Direct Entry of Phone Number

Specify Type

Click “Done”


58

S-R-C Model (by Darwin Hunt)

GOALPerceived Situation

Internal Response

Predicted Consequences

ACTUAL RESPONSE

ACTUAL RESULTS

ACTUAL SITUATION

Internal Model

External Model


59


GOMS – Goals, Operators, Methods, Selection Rules Users formulate a goal (e.g., create a letter) and sub-goals (e.g., insert a word)

Users think in terms of operators – “elementary perceptual, motor, or cognitive acts, whose execution is necessary to change any aspect of the user’s mental state or to affect the task environment.”. E.g., press arrow key, move mouse

Users achieve their goals by using methods (e.g., move cursor and click on a button)

Selection rules are control structures for choosing between several methods to accomplish a goal E.g., multiple methods of delete

60


Widget-level Theories Patterns for HCI exists for desktop and web based applications

A pattern is a proven solution to a problem in a context

Alexander: "Each pattern is a three-part rule, which expresses a relation between a certain context, a problem, and a solution.”

61

Pattern Example: Error Handling


62


Object-Action Interface Model Direct Manipulation has largely replaced Command Languages

Task actions start from high-level intentions that are decomposed into intermediate goals and individual steps (e.g., drag a file to a trash can)

Define the task objects and actions (e.g., select a patient, check the patient in to the facility)

The metaphoric representation is then created (e.g., drag a patient icon into a bed)

The interface is easier to learn since the syntactic details are minimized.

Standard widgets with familiar syntax

• Click, Double-Click

Simple forms of feedback

• Highlighting

UI Designers often need to take training courses, read workbooks, and interview users to gain the knowledge needed to create an object/action hierarchy

63


Object-Action Interface Model Multiple complex actions needed to complete a task (e.g., write a letter)

• Writing (task action)• Letter (task object)• Letter is stored as a document (interface object)• Know the details of the save command (interface action)• Middle Level Concept (construct a sentence)• Low level details of spell each word (low-level task object)• Know where the keys are for each letter (low-level interface object

64

Guidelines, Principles and Theories

Kit Kat – October 2013

New immersive mode, which automatically hides everything except what you really want to see.

Making calling easier

• Search across your contacts, nearby places, or even Google Apps accounts (like your company’s directory), directly from within the app.

65

Cover – context specific application for simplification

http://techcrunch.com/2013/10/24/cover-android/


66

Aviate: intelligent home screen for Androidhttp://www.theverge.com/2013/10/15/4839182/aviate-for-android-screenshots


67

Improving beyond direct manipulation of mobile?


68

Go Launcher EX - An app for customizing android home screens (March 2013).

http://www.youtube.com/watch?v=3SvEYlqfXQI

http://www.youtube.com/watch?v=3SvEYlqfXQI


Documents

1 Guidelines, Principles, and Theories Lesson 3 will cover the following aspects of user interface design Guidelines User interface guidelines that