Representation at the Interface Gabriel Spitz 1 Lecture #13

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

3 Interface elements Interface aspects Application Component Info SpaceControl Function/Scope  Available functions  Missing & superfluous functions  CompletenessTBD Framework  Organizing principle (Posture)  Segmentation into components  Segmentation into info spaces  Grouping of items  Proximity  Sequencing items TBD Activity flow/Behavior  Navigation schema  Task sequence  Error recovery  Action reversal  System state info  Action constraints (error avoidance)  Guidance  Spatial workflow  Modes/temporal workflow  Closure  Feedback  Defaults  Shortcuts Representation  Metaphors / expressions  Idioms  Strategy (e.g.)  Form  Wizard  Message content (error, warning, information)  Maintaining context  Choice of control  Labels/terminology  Icon content  Object manipulation method  Affordance Presentation  Color Pallet  Typography  Preferences  Layout  Alignment  Repetition  Contrast  Color  Font style  Graphical clarity (of icons)  Resolution (details)  Manipulation dynamics Interface Design Space

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 Spitz 4

Control Choices Gabriel Spitz 5

Behavior Choices Gabriel Spitz 6 Commands VS. Options

Selection Choices Gabriel Spitz 7

8

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 Spitz 9

Representation - Example Gabriel Spitz 10

Representation - Example Gabriel Spitz 11

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 Spitz 12

Representation - Example Gabriel Spitz 13 What are the cognitive demands associated with each control?

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 Spitz 14

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 Spitz 15

Effective Representations Effective representations from a user perspectives are those that are: Easy to remember Easy to interpret Easy to use Gabriel Spitz 16

Effective Commands Easy to interpret For Example: VS. F5 For Slideshow Power Point Gabriel Spitz 17

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 Spitz 18

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 Spitz 19

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 Spitz 20

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 Spitz 21

Familiarity of words - Example Familiar words Door Read Stop Unfamiliar words Compile Substitute Scan Gabriel Spitz 22

Associated Imagery -Example High imagery words Ride Sleep Eat Low imagery words Begin Increase Evaluate Gabriel Spitz 23

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 Spitz 24

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 Spitz 25

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 Spitz 26

Icons example Gabriel Spitz 27

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 Gabriel Spitz 28