Gabriel Spitz1

Representation at the Interface

Lecture #13

Gabriel Spitz2

Representation

• The next aspect of the interface design that we need to consider when designing or evaluating a user interface is Representation

Gabriel Spitz3

Interface elementsInterface aspects

Application Component

Info Space Control

Function/Scope Available functions Missing & superfluous functions

Completeness TBD

Framework Organizing principle (Posture)Segmentation into components

Segmentation into info spacesGrouping of itemsProximitySequencing items

TBD

Activity flow/Behavior

Navigation schemaTask sequenceError recoveryAction reversalSystem state info

Action constraints (error avoidance) GuidanceSpatial workflowModes/temporal workflow Closure

FeedbackDefaultsShortcuts

Representation Metaphors / expressionsIdioms

Strategy (e.g.) FormWizardMessage content (error, warning, information)Maintaining context

Choice of controlLabels/terminologyIcon contentObject manipulation methodAffordance

Presentation Color Pallet TypographyPreferences

LayoutAlignmentRepetitionContrast

ColorFont styleGraphical clarity (of icons) Resolution (details) Manipulation dynamics

Interface Design Space

Gabriel Spitz4

What is Representation (1)

• Representation is the choices that a designer make in:• selecting control types• conceptualizing icons• specifying labels• composing instructions

to support a function or an object at the interface

Gabriel Spitz5

Control Choices

Gabriel Spitz6

Behavior Choices

Commands

VS.

Options

Gabriel Spitz7

Selection Choices

Gabriel Spitz8

Gabriel Spitz9

What is Representation (2)

• Representation is concerned primarily with the nature of the choice rather then its implementation• For example should a command to get out

from a process be labeled ; Exit, Close, Finish, OK, OR MAYBE kill

• Implementation of the selected choice will be discussed later when we talk about Presentation

Gabriel Spitz10

Representation - Example

Gabriel Spitz11

Representation - Example

Gabriel Spitz12

Representation - Examples

• The controls in the previous examples were all:• Supporting a single task/function – date

picking• They differed in terms of how the user had to

specify a date • They also differed in terms of

• The type and intensity of (cognitive) demands placed on the users

• Speed of task performance • The likelihood of making an error

Gabriel Spitz13

Representation - Example

What are the cognitive demands associated with each control?

Gabriel Spitz14

Impact of Representation

• The choices a designer makes in selecting a control, specifying a label, or instruction at the interface can:• Impact task performance – e.g., speed, errors• Users’ workload – e.g. memory, calculation• Users’ satisfaction

Gabriel Spitz15

Effective Representation

• A representation of an item that is:• Compatible with users characteristics

• Suitable for a specific task and usability goals within a given context and culture

• Compliant with published standards and guidelines

• There is significant overlap among the above elements

Gabriel Spitz16

Effective Representations

• Effective representations from a user perspectives are those that are:• Easy to remember• Easy to interpret• Easy to use

Gabriel Spitz17

Effective Commands

• Easy to interpretFor Example:

VS.

• F5

• For Slideshow Power Point

Gabriel Spitz18

Easy to Remember

• Best commands, icons, and actions sequences are those that are easy to remember• For example

• Using the cursor to highlight a row

Vs• Recalling a sequence of keyboard commands

Gabriel Spitz19

Ease of Remembering

• The ease with which a new item can be remembered depends on its meaningfulness (Craik & Lockhart 72)

• The reason is that meaningful items are processed at a deeper level

Gabriel Spitz20

Deep Processing - Example

• Stroop Effect• Blue• Yellow • Green

• The color of the font competes with the meaning of the word because both are meaningful

• A non-English native can ignore the meaning of the word

Gabriel Spitz21

Meaningful Items

• Meaningfulness of an item is effected by:• Familiarity with the item

• In a case of a word it relates to the frequency with which it occurs in everyday life – E.g., Expunge vs. Delete

• Its associated imagery

• In the case of a word it is the extent to which the word can elicit images in our mind

Gabriel Spitz22

Familiarity of words - Example

• Familiar words• Door

• Read

• Stop

• Unfamiliar words• Compile

• Substitute

• Scan

Gabriel Spitz23

Associated Imagery -Example

• High imagery words• Ride

• Sleep

• Eat

• Low imagery words• Begin

• Increase

• Evaluate

Gabriel Spitz24

Selecting Labels

• Labels such as command names or object names used at the interface should be meaningful – well understood

• Meaningfulness should be considered within• The context in which the item is to be used• The culture• Users’ characteristics

Gabriel Spitz25

Labels - Example

• Some Unix commands have names that are difficult to remember by novice users

• For example• CAT – List content of a file• GREP – Search for a string• MV – Move• LPR – Print file

Gabriel Spitz26

Representation of Icons

• Icons are another common form of designating commands, objects, or tools

• Meaningfulness of an icon is determined by:• Context• Task• The underlying concept that we try to

represent

Gabriel Spitz27

Icons example

Gabriel Spitz28

Summary

• When selecting a label for a command• Use terms that are already known to users

rather than invent new words/labels• Use terms that are frequently used by the end

users• Use terms that elicit imagery

• Capitalize on good graphics

• Use recognition rather than recall