Guidelines, Principles, and Theories

wheatprisonΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 4 μήνες)

45 εμφανίσεις

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, Principles, and Theories


Guidelines


Government Web Usability


http://www.usability.gov/pdfs/guide
lines.html


Supported by research findings

3

Guidelines, Principles, and Theories


Guidelines


Corporate


iPhone User Interface Guidelines:
http://developer.apple.com/docume
ntation/UserExperience/Conceptual
/AppleHIGuidelines/XHIGIntro/chapt
er_1_section_1.html


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

How to Build an iPhone App that Doesn't Suck


4

Guidelines, Principles, and Theories


Guidelines


Ice Cream Sandwich


Android User Interface Guidelines:
http://developer.android.com/design/in
dex.html

ICS Guidelines

5

Guidelines, Principles, and Theories


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

Guidelines, Principles, and Theories


Accessibility and Cell Phone Access


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


Screen magnifiers


iPhone


VoiceOver screen reader


Zoom magnification feature


Compatibility with wireless braille displays


Assisted Touch


Android


Google's Eyes
-
Free Project

in 2011.



7

Guidelines, Principles, and Theories


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

Guidelines, Principles, and Theories


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

9

Guidelines, Principles, and Theories


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

10

Guidelines, Principles, and Theories


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

11

Guidelines, Principles, and Theories


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

12

Guidelines, Principles, and Theories


Organizing the Display


Consistency of Data Display


Terminology, formats, colors, capitalization


Efficient information assimilation by the user

13

Guidelines, Principles, and Theories


Organizing the Display


Consistency of Data Display


Terminology, formats, colors, capitalization


Efficient information assimilation by the user

14

Guidelines, Principles, and Theories


Organizing the Display


Consistency of Data Display


Terminology, formats, colors, capitalization


Efficient information assimilation by the user

15

Guidelines, Principles, and Theories


Organizing the Display


Consistency of Data Display


Terminology, formats, colors, capitalization


Efficient information assimilation by the user

16

Guidelines, Principles, and Theories


Organizing the Display


Consistency of Data Display


Terminology, formats, colors, capitalization


Efficient information assimilation by the user

17

Guidelines, Principles, and Theories


Organizing the Display


Consistency of Data Display


Terminology, formats, colors, capitalization


Efficient information assimilation by the user

18

Guidelines, Principles, and Theories


Organizing the Display


Consistency of Data Display


Terminology, formats, colors, capitalization


Efficient information assimilation by the user

19

Guidelines, Principles, and Theories


Organizing the Display


Consistency of Data Display


Terminology, formats, colors, capitalization


Efficient information assimilation by the user

20

Guidelines, Principles, and Theories


Organizing the Display


Minimal memory load on the user





Compatibility of data display with data entry


Data Display Version

Data Entry Version

21

Guidelines, Principles, and Theories


Organizing the Display


Flexibility for user control of data display


22

Guidelines, Principles, and Theories


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

Guidelines, Principles, and Theories


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)

A

B

24

Guidelines, Principles, and Theories


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)

A

B

25

1.
Unit A

1.
Section 1

2.
Section 2

2.
Unit B

1.
Section 1

2.
Section 2

1.
Unit A

1.
Section 1

2.
Section 2

2.
Unit B

1.
Section 1

2.
Section 2

Guidelines, Principles, and Theories


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)

A

B

26

Guidelines, Principles, and Theories


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)

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

Guidelines, Principles, and Theories


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

Guidelines, Principles, and Theories


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

Guidelines, Principles, and Theories


Principles


Differences in Users


Domain/Application Knowledge


Frequency of Use


Goals


Consequences of Errors



30

Guidelines, Principles, and Theories


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

Guidelines, Principles, and Theories

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 caller

Call 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 the

most likely next task
to be performed?

Download a
Game

Search for a

Song by title

Purchase a

song

Listen to a previously

purchased song

Create a

playlist

Play all songs

on your phone

Find a clip

on ESPN

Download a
clip from CNN

Find directions via

VZ Navigator

Music and Video

32

Guidelines, Principles, and Theories


Interaction Style


Direct Manipulation


Visual representation of familiar task objects


Can significantly simplify a task


Difficult to program






33

Guidelines, Principles, and Theories


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

Guidelines, Principles, and Theories


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

Guidelines, Principles, and Theories


Interaction Style


Command Language


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


Powerful


Difficult to Learn






36

Guidelines, Principles, and Theories


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

Guidelines, Principles, and Theories


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


Disabilities

3.
Offer informative feedback


For every user action there should be system feedback

4.
Design dialogs to yield closure


Sequence of actions should have a beginning, middle and end

5.
Prevent Errors


Enabling/Disabling fields


Formatted Fields (alpha, date, SSN, TN)


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


Auto
-
complete






38

Guidelines, Principles, and Theories


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


Disabilities

3.
Offer informative feedback


For every user action there should be system feedback

4.
Design dialogs to yield closure


Sequence of actions should have a beginning, middle and end

5.
Prevent Errors


Enabling/Disabling fields


Formatted Fields (alpha, date, SSN, TN)


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


Auto
-
complete






39

Guidelines, Principles, and Theories


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


Disabilities

3.
Offer informative feedback


For every user action there should be system feedback

4.
Design dialogs to yield closure


Sequence of actions should have a beginning, middle and end

5.
Prevent Errors


Enabling/Disabling fields


Formatted Fields (alpha, date, SSN, TN)


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


Auto
-
complete






40

Guidelines, Principles, and Theories


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


Disabilities

3.
Offer informative feedback


For every user action there should be system feedback

4.
Design dialogs to yield closure


Sequence of actions should have a beginning, middle and end

5.
Prevent Errors


Enabling/Disabling fields


Formatted Fields (alpha, date, SSN, TN)


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


Auto
-
complete






41

Guidelines, Principles, and Theories


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


Disabilities

3.
Offer informative feedback


For every user action there should be system feedback

4.
Design dialogs to yield closure


Sequence of actions should have a beginning, middle and end

5.
Prevent Errors


Enabling/Disabling entry fields


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


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


Auto
-
complete






42

Guidelines, Principles, and Theories


Shneiderman’s 8 principles of Interface Design

6.
Prevent Errors (cont.)


Verification of completion of sub
-
tasks


Single actions to accomplish an action sequence


7.
Permit easy reversal of actions


A single action


A set of data


A complete process

8.
Support internal focus of control


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

9.
Reduce short
-
term memory load


7 +/
-

2 chunks


On line access to codes, abbreviations should be provided


Drop
-
downs






43

Guidelines, Principles, and Theories


Shneiderman’s 8 prinicles of Interface Design

6.
Prevent Errors (cont.)


Verification of completion of sub
-
tasks


Single actions to accomplish an action sequence


7.
Permit easy reversal of actions


A single action


A set of data


A complete process

8.
Support internal focus of control


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

9.
Reduce short
-
term memory load


7 +/
-

2 chunks


On line access to codes, abbreviations should be provided


Drop
-
downs






44

Guidelines, Principles, and Theories


Shneiderman’s 8 prinicles of Interface Design

6.
Prevent Errors (cont.)


Verification of completion of sub
-
tasks


Single actions to accomplish an action sequence


7.
Permit easy reversal of actions


A single action


A set of data


A complete process

8.
Support internal focus of control


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

9.
Reduce short
-
term memory load


7 +/
-

2 chunks


On line access to codes, abbreviations should be provided


Drop
-
downs






45

Guidelines, Principles, and Theories


Shneiderman’s 8 principles of Interface Design

6.
Prevent Errors (cont.)


Verification of completion of sub
-
tasks


Single actions to accomplish an action sequence


7.
Permit easy reversal of actions


A single action


A set of data


A complete process

8.
Support internal focus of control


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

9.
Reduce short
-
term memory load


7 +/
-

2 chunks


Drop
-
downs






46

Guidelines, Principles, and Theories


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

Guidelines, Principles, and Theories


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

Guidelines, Principles, and Theories


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

Guidelines, Principles, and Theories


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

Guidelines, Principles, and Theories


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

Guidelines, Principles, and Theories


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

Guidelines, Principles, and Theories


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

Guidelines, Principles, and Theories


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

Guidelines, Principles, and Theories


Conceptual Model












Semantic Level


Add a Phone Number

Goal

Schedule
Appointment

Check
-
In

Patient
Demographics

Check
-
In
Information

Name

Address

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

Guidelines, Principles, and Theories

56



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





Guidelines, Principles, and Theories

57



Syntactic Level


Add a Telephone Number



Direct Entry of Phone Number



Specify Type











Click “Done”


Guidelines, Principles, and Theories

58



S
-
R
-
C Model (by Darwin Hunt)












GOAL

Perceived
Situation

Internal
Response

Predicted
Consequences

ACTUAL
RESPONSE

ACTUAL
RESULTS

ACTUAL
SITUATION

Internal Model

External Model

Guidelines, Principles, and Theories

59

Guidelines, Principles, and Theories


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

Guidelines, Principles, and Theories


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





Guidelines, Principles, and Theories

62

Guidelines, Principles, and Theories


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

Guidelines, Principles, and Theories


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