CS 422Summary

1

Reminders

2

• Project 1: 100 points A: 870 - 1000 points

• Project 2: 400 points B: 750 - 869 points

• Final: 300 points C: 620 - 749 points

• Participation: 100 points D: 500 - 619 points

• Home/Class: 100 points F: 000 - 499 points

• Total: 1000 points

3

Grades

Final

• CS 422

• Friday May 11 10:30 - 12:30 am

• Room: A6 LC

• Closed book, closed cellphones, ...

4

Evaluation forms

• Two forms

• Volunteer to collect the forms

5

Books

• Designing the User Interface 4th ed.

• Ben Schneiderman, Catherine Plaisant

Books

• Designing Visual Interfaces

• Kevin Mullet, Darrell Sano

Plan

• Introduction & Design of Everyday Things

• Information Exploration & Presentation Styles

• Principles & Golden Rules

• Interaction Devices & Direct Manipulation

Plan (cont.)

• Elegance & Simplicity / Scale, Contrast & Proportion

• Organization & Visual Structure

• Module & Program

Plan (cont.)

• Image and Representation

• Evaluation Techniques and In/Reducing Sickness

• Collaborative Interfaces and More Exotic UIs

Exercises

• Go back to first home work

• Projects 1 and 2

• Tasks and sites mentioned in class

Design of Everyday Things

Look around you...

• Start by looking at Interfaces for

• Doors, Windows

• Stove

• Projectors

• DVD players

Affordances

• Perceived and actual properties of a thing, primarily those fundamental properties that determine just how the thing could possibly be used

• Affordances provide strong clues to the operation of a thing

• Knobs are for turning

• Slots are for inserting things into

• Provide a good conceptual model and make things visible

Two conceptual models

• The designer's conceptual model

• The user's conceptual model

System Image

• The system image is the visible part of a device (including the physical structure, the documentation, instructions, etc)

• The designer only talks to the user through the system image

• If the system image doesn't make the design model clear, then the user will create a different model through their interaction.

More Examples

• Look at home, around you...

• http://www.baddesigns.com

• Things that don't work the way you expect

• Different things that are too similar

• Things that are hard to see

• Things that don't work well together

• Things that get in your way

• Things that are hard to remember

• ....

Constraints

• Physical

• Semantic

• Cultural

• Logical

7 Stages of Action

• Forming the goal - state to be achieved (often ill-formed)

• Forming the intention - goal translated into intention to perform some action

• Specifying an action - translate intention into set of internal commands

• Executing the action

• Perceiving the state of the world

• Interpreting the state of the world

• Evaluating the outcome

7 Stages as Design Aid

• How easily can a person

• Determine the function of the device

• Tell what actions are possible

• Determine mapping from intention to physical movement

• Perform the action

• Tell if system is in desired state

• Determine mapping from system state to interpretation

• Tell what state system is in

Examples

• Faucets

• Airline rapid check-in machines

• Think about these in terms of

• Visibility

• Mapping

• Feedback

• 7 Stages of Action

Design

• Visibility - User can tell the state of the device and the alternatives for action

• Good conceptual model - User given consistent in presentation of operations and results

• Good Mappings - easy to determine relationships between actions and results, controls and their effects, system state and what's visible

• Feedback - User receives full and continuous feedback

Exploration, Presentation

28

Principles

Principles

• Recognize Diversity

• Eight golden rules of interface design

• Prevent Errors

Recognize Diversity: Users• User Profile

• age, gender, education, cultural background, job

• Novice / first time users

• novice - know little of task or interface concepts

• first time users - have task concepts but shallow knowledge of interface

• need to be able to accomplish basic needs with small number of consistent actions

• Knowledgeable intermittent users

• know about the task and general knowledge about the interface - will forget specific features

• need to easily rediscover how to perform tasks

• Expert frequent users

• Thoroughly familiar with task and interface concepts

• Need ability to quickly carry out actions, get rapid responses, brief feedback

Interaction Styles

• Direct Manipulation

• Menu Selection

• Form Filling

• Command Language

• Natural Language

Eight golden rules of interface design

1. Strive for consistency

2. Cater to universal usability

• help new users through basic procedures

• enable frequent users to use shortcuts

3. Offer informative feedback

• All actions should result in system feedback

4. Design dialogues to yield closure

Eight golden rules of interface design

5. Offer error prevention and simple error handling

6. Permit easy reversal of actions

7. Support internal locus of control

• make users the initiators of actions, want users to feel they are in control

8. Reduce short term memory load

• 7 items +/- 2

Successful Products

• Radio

• Walkman

• VCR

Example

• Guidelines for Public Access Terminals

• http://www.tiresias.org/

• PDF

Interaction Devices & Direct Manipulation

• Human model

• Fits Law

• Interaction model: keystrokes, ...

• Interaction: windows, icons, menus, dialog boxes...

Elegance & Simplicity and Scale, Contrast & Proportion

Select the elements

• "maximize meaning, minimize means" - Abram Games, graphic designer

• Enhance communication by carefully selecting elements to be emphasized

Benefits of Simplicity

• Approachability - rapidly apprehended and understood to support immediate use

• Recognizability - less visual information, more easily assimilated, understood, remembered

• Immediacy - greater impact because they are recognized and understood without conscious effort

• Usability - improving approachability and memorability enhance usability

3 Principles of Simplicity

• Elements must be unified to produce a coherent whole

• Parts, and the whole, must be refined to focus the viewer's attention on the essential aspects

• Fitness of the solution to the communication problem must be ensured at every level

Common Errors

• Clutter and visual noise

• Interference between competing elements

• Using explicit structure as a crutch

• Belaboring the obvious

• Overly literal translation

• Excessive detail and embellishment

• Gratuitous dimensionality

London Underground Map

Techniques

• Reducing a design to its essence

• Regularizing the elements of the design

• Combining elements for maximum leverage

Reduction• Reinforce the message by removing non-essential elements

1. Determine the essential qualities (typically a short list of adjectives) that should be conveyed by the design, along with any fixed formal elements, such as a name or label, an essential control, or color, texture, pattern, or image.

2. Critically examine each element in the design and ask yourself why it is needed, how it relates to the essence of the design (identified above), and how the design would suffer without it. If you can't answer any of these questions, remove the element.

3. Try to remove the element from the design anyway. What happens? If the design collapses, either functionally or aesthetically, the element must be replaced. Otherwise, consider omitting it from the final solution.

Department of Transportation Icons

Department of Transportation Icons

Department of Transportation Icons

Simplicity

• Elegant solutions reveal an intimate understanding of the problem and an ability to ensure that its essence is grasped by the consumer

• Minimization of component parts and simplification of relationships between the parts

3 Principles of Simplicity

• Elements must be unified to produce a coherent whole

• Parts, and the whole, must be refined to focus the viewer's attention on the essential aspects

• Fitness of the solution to the communication problem must be ensured at every level

Common Errors

• Clutter and visual noise

• Interference between competing elements

• Using explicit structure as a crutch

• Belaboring the obvious

• Overly literal translation

• Excessive detail and embellishment

• Gratuitous dimensionality

Scale, Contrast and Proportion

• Scale, Contrast and Proportion

• Need to achieve a balance in the relationships between elements in the design

• Harmony

Scale, Contrast and Proportion

• Scale - relative size or magnitude of a given design element in relation to other design elements - always relative

• Contrast - noticeable differences along a common visual dimension (shape, size, color, position, orientation, movement)

• Proportion - ratios of dimensions

Perceptual qualities

• Visual contrasts established by manipulating perceptual qualities

• Size

• Value (saturation)

• Orientation

• Texture

• Shape

• Position

• Hue

Establishing perceptual layers• Group each item of information into a small number of

categories (7 +/-2)according to its origin or intended use. A group must be established for any group of items that will need to be processed independently. Each item must be assigned to at least one group.

• Determine the rank or importance of the various groups and organize them into an even smaller number (e.g. 3-5) of echelons based on this ranking

• Use appropriate perceptual variables to establish the layering effect. Size and value can establish clear perceptual hierarchies, while hue is most effective for non-hierarchical grouping

• Maximize the perceptual difference between groups while minimizing the difference within groups

Test it

• Use the squint test to ensure that elements in the same layer group together as a unit, but that group itself can be visually separated from the rest of the display

Benefits of structure

• Unity - tie elements together so they work towards a common goal

• Integrity - keep the design focused on the goal

• Readability - divide display into manageable subsets

• Control - allow user to predict areas of interest in the display and eases navigation

Similarity

Principles• Grouping - words in a book grouped into sentences,

paragraphs, sections, chapters. Use groups to create manageable units. Higher level structures allow the user to orient himself/herself and help establish a plan for going into the details. Bind functional units tightly together and distinguish them from the surrounding controls

• Hierarchy - hierarchy should be made obvious through the visual structures

• Relationship - position, size and value provide the most effective visual cues to reinforce relationships (which in turn reinforces groups). Meaning can be implied by location relative to other elements removing the need for explicit labeling

• Balance - equal 'weight' of design elements on either side

Grouping• Proximity - tend to associate elements more strongly with

those nearby compared to those further away

• Similarity - tend to associate elements more strongly with those that share basic visual characteristics compared to those that differ in those characteristics

• Continuity - prefer continuous unbroken contours with the simplest physical explanation

• Closure - tend to interpret visual stimuli as complete closed figures even when some information is absent

• Area - smaller of two overlapping areas will tend to be viewed as the figure while the larger is interpreted as ground

• Symmetry - tend to group based on overall form rather than constituent parts

Notes about Color

• Design for monochrome first

• Keep in mind that 5% of the population is color blind (8% of men and 1% of women)

• Be consistent

• Think about what certain colors commonly mean / represent

• Be careful what colors used together (i.e. bright red on bright blue)

• Use color to indicate a change in status

Image & Representation

Sign

• a sign is 'something that stands for someone or something in some respect or capacity'

• product of a 3-way relation between the representamen (that which represents), the object (that which is represented), and its mental interpretant (the intelligence doing the substitution)

3 Levels

• Syntactics - internal structure of the representation

• Semantics - relation between the sign and the meaning of the sign

• Pragmatics - effectiveness of the syntax/semantics for a particular person/community

Representation

• Representation depends on establishing a clear relationship between a representation and its object

• Icon - denotes its object by virtue of its own likeness or resemblance to the object

• Index - refers to the object indirectly, by means of an association

• Symbol - denotes the object by convention alone

Techniques

• Selecting the right vehicle

• Refinement through progressive abstraction

• Coordination to ensure visual consistency

Evaluation Techniques

Three Goals

• Assess the extent of the system's functionality

• Assess the effect of the interface on the user

• Identify any specific problems with the system

How evaluation is done?

• Stage of design

• Novelty of project

• Number of expected users

• Criticality of the user interface

• Costs of product and finances allocated for testing

• Time available

• Experience of the design and evaluation team

Different types of Evaluation

• Evaluating the Design

• Evaluating the Implementation

• Usability Testing