SIMS 213: User Interface Design & Development

Marti HearstTues, Feb 12, 2002

Today

Combine ideas from two lectures– Cognitive considerations + interface metaphor

Practice creating personasIntro to Design

Slide adapted from Saul Greenberg

Interface Metaphors Revisited

Definition of Metaphor– application of name or descriptive term to an object to which it is not

literally applicable

Purpose– function as natural models – leverages our knowledge of familiar, concrete objects/experiences to

understand abstract computer and task concepts

Problem– metaphor may portray inaccurate or naive conceptual model of the system

A presentation toolis like

a slide projector

Slide adapted from Saul Greenberg

Interface Metaphors

Use metaphors that matches user's task – desktop metaphor for office workers– paintbrush metaphor for artists...

Given a choice, choose the metaphor close to the way the system works

Ensure emotional tone is appropriate to usersE.g., file deletion metaphors

• trashcan• black hole• paper shredder• pit bull terrier• nuclear disposal unit...

The Metaphor of Direct Manipulation

Direct Engagement– the feeling of working directly on the task

Direct Manipulation– An interface that behaves as though the interaction was with a real-world

object rather than with an abstract systemCentral ideas– visibility of the objects of interest– rapid, reversible, incremental actions– manipulation by pointing and moving– immediate and continuous display of results

Almost always based on a metaphor– mapped onto some facet of the real world task semantics)

Slide adapted from Saul Greenberg

Object-Action vs Action-Object

Select object, then do action– interface emphasizes 'nouns' (visible objects) rather than 'verbs' (actions)

Advantages– closer to real world– modeless interaction– actions always within context of object

• inappropriate ones can be hidden– generic commands

• the same type of action can be performed on the object• eg drag ‘n drop:

my.doc

move

Slide adapted from Saul Greenberg

Direct manipulation

Representation directly determines what can manipulated

Slide adapted from Saul Greenberg

Phone list

List metaphor Rolodex metaphor

Slide adapted from Saul Greenberg

Games

Direct Manipulation

Xerox Star: pioneered in early '80s, copied by almost everyone– simulates desktop with icons

• in and out baskets• file folders and documents• calculators• printers• blank forms for letters and memos

– small number of generic actions applicable system wide• move, copy, delete, show properties, again, undo, help

– eg same way to move text, documents, etc• property sheets

– pop-up form, alterable by user

– What you see is what you get (WYSIWYG)

Slide adapted from Saul Greenberg

Is direct manipulation the way to go?

Some Disadvantages– Ill-suited for abstract operations

• spell-checker?Tedium

• manually search large database vs queryTask domain may not have adequate physical/visual metaphorMetaphor may be overly-restrictive

Solution: Most systems combine direct manipulation and abstractions

• word processor:– WYSIWYG document (direct manipulation)– buttons, menus, dialog boxes (abstractions, but direct manipulation “in

the small”)

Based on slide by Saul Greenberg

Guidelines for Design

Provide a good conceptual model– allows users to predict consequences of actions– communicated thorugh the image of the system

Make things visible– relations between user’s intentions, required actions, and

results should be• sensible• consistent• meaningful (non-arbitrary)

– make use of visible affordances, mappings, and constraints– remind person of what can be done and how to do it

Summary

Direct manipulation– visibility of the objects of interest– rapid, reversible, incremental actions– manipulation by pointing and moving– immediate and continuous display of results

Good Representations– captures essential elements of the event / world– deliberately leaves out / mutes the irrelevant– appropriate for the person, their task, and their interpretation

Metaphors– uses our knowledge of the familiar and concrete to represent abstract concepts– need not be literal– has limitations that must be understood

Practice Persona Development

In-Class exercise

Persona Development

What are the reasons for doing it?

What are the steps for doing it?

Clevis McCloud

What is his motto?How does his persona shape the interface design?

Design Personas for …

A new interface for buying BART tickets with credit cards

Project TimelineFe

brur

ay 5

Mar

ch 1

4

Apr

il 18

May

13

Proj

ect I

dea

Pers

onas

, Int

ervi

ews,

Task

s Ana

lysis

Low

-fi U

ser T

est

UI P

roto

type

#1

Heu

ristic

Eva

luat

ion

UI P

roto

type

#2

Use

r Tes

ting

UI P

roto

type

#3

Design Principles and Process

Web Site Design Process

Production

Design Refinement

Design Exploration

Discovery

… followed by implementation & maintenance

Slide adapted from James Landay

Design Process: Discovery

Assess needs– understand client’s

expectations– determine scope of

project– characteristics of users– evaluate existing site

and/or competitionProduction

Design Refinement

Design Exploration

Discovery

Slide adapted from James Landay

Design Process: Design Exploration

Production

Design Refinement

Design Exploration

Discovery Generate multiple designs

* visualize solutions to discovered issues

* information & navigation design

* early graphic design

* select one design for development

Slide adapted from James Landay

Design Process: Design Refinement

Production

Design Refinement

Design Exploration

Discovery Develop the design

* increasing level of detail

* heavy emphasis on graphic design

* iterate on design

Slide adapted from James Landay

Prepare design for handoff

* create final deliverable

* specifications, guidelines, and prototypes

* as much detail as possible

Design Process: Production

Production

Design Refinement

Design Exploration

Discovery

Slide adapted from James Landay