sims 213: user interface design & development marti hearst thurs, jan 18, 2001
Post on 20-Dec-2015
213 views
TRANSCRIPT
SIMS 213: User Interface Design &
Development
Marti Hearst
Thurs, Jan 18, 2001
Announcements
Sign up for the is213 mailing list– Mail to majordomo@sims– “subscribe is213”– Do the necessary email exchanges
Talk on Tuesday– Paul Pangaro: Who's Wants To Be Prototyper? The End-User
Does - A Subversive Perspective for HCI– 4:00-5:30, 202 South Hall
An additional required book
Readings
Do indicated readings before the class Required:
– Course Reader (available early next week)– Jakob Nielsen’s Usability Engineering– Jeff Johnson, Jeff Johnson, GUI BloopersGUI Bloopers
Class Projects
Design, prototype, and evaluate an interface– Iterate four times– Emphasis on web-based interfaces– Ok to redesign an existing interface
MUST work in groups of 3-4 people– Team structure– Students will assess amount of work being done by
others in the group
Slide adapted from James Landay
Teams vs. Managed Groups
Managed Groups– strong leader– individual accountability
– organizational purpose– individual work products– efficient meetings– measures performance by
influence on others– delegates work
Teams– shared leadership– individual & mutual
accountability– specific team purpose– collective work products– open-ended meetings– measures performance
from work products– does real work together
Teams & good performance are inseparable
Slide adapted from James Landay
Keys to Team Success
Common commitment– requires a purpose in which team members can believe
“prove that all children can learn”, “revolutionizing X…” Specific performance goals
– comes directly from the common purpose “increasing the scores of graduates form 40% to 95%”
– helps maintain focus – start w/ something achievable A right mix of skills
– technical/functional expertise (programming/cogsci/writing)– problem-solving & decision-making skills– interpersonal skills
Agreement– who will do particular jobs, when to meet & work, schedules
Slide adapted from James Landay
Team Action Items
Meet and get used to each other Figure out strengths of team members Assign each person a role
– responsible for seeing work is organized & done– not responsible for doing it themselves
Roles– design (visual & interaction)– software– user testing
– group manager (coordinate big picture)
– documentation (writing)
Assignment: Project Proposal
Decide on project goals and members– Use class list to exchange ideas
Recommendations:– Find a project for which you have ready access to people who
would be real users of the system– Look at the projects from last time to get a feeling for the
scope. Due date:
– Proposals due Tuesday Jan 30th (< 2 weeks)– We’ll give feedback and might ask you to revise it.
Why is Usability Important?
Good design promotes– Effectiveness and efficiency– Feelings of satisfaction, enjoyment
Bad design threatens– Safety– Accuracy
Designing for Usability
Interaction design is humbling– Your attempt may work right, look great– But … users may not be able to use it– Don’t take it personally! That’s why we iterate!
Good vs. Bad Design
Avoiding bad design– It is often easy to detect a bad design – just try it with a few
users– It can be fun to spot the flows
UI Hall of Shame http://www.iarchitect.com/mshame.htm Web Pages that S*ck http://www.webpagesthats*ck.com/
It is a bit harder to learn / teach good design– Strategies:
Look at & appreciate good examples Follow best practices Be willing to redesign Get lots of practice!
Studying Good Examples
Some sites just do things well– Amazon has pioneered many excellent interaction designs for
the web Suggesting related products in an effective way (sometimes) Useful and timely content Tabs to organize main kinds of content 1-click purchasing Good checkout mechanism Willing to experiment
– Yahoo also (although the structure of the hierarchy is now broken)
– Epicurious.com – an excellent recipe site
Studying Good Examples
Good design ideas can be taken too far …
Amazon’s current use of tabs
What are the motivations? More or less effective than earlier?
Metaphor and Analogy
Metaphor– L. metaphora, fr. to carry over, transfer; meta` beyond, over– The transference of the relation between one set of objects to another
set for the purpose of brief explanation (Webster’s revised) Analogy
– A resemblance of relations; an agreement or likeness between things in some circumstances or effects, when the things are otherwise entirely different. (Webster’s revised)
– 1. Similarity in some respect between things that are otherwise dissimilar: "the operation of a computer presents an interesting analogy to the working of the brain“ (WordNet)
– 2: (logic) inference that if things agree in some respects they probably agree in others (WordNet)
Slide adapted from James Landay
Metaphor
Lakoff & Johnson– “...the way we think, what we experience, and what we do
every day is very much a matter of metaphor.'' – in our language & thinking - “argument is war”
…he attacked every weak point ... criticisms right on target ... if you use that strategy
We can use metaphor to highlight certain features & suppress others
– There is some systematicity to the transference
What are some example interface metaphors?
Direct Manipulation uses a Metaphor
Metaphor– Computer objects as visible, moveable objects
Consequences– Items represented as icons– Items can be “picked up” and “moved” on a surface– Items can be “thrown out”– Items can be “copied”
Do we really want to have to drag them to a photocopier?
How much is too much?
Direct Manipulation Metaphor
DLITE makes heavy use of direct manipulation metaphors But it isn’t supposed to be just like in the real world Take what works, omit the rest
The Desktop Metaphor
Started at Xerox PARC – Xerox Star (see video)– Bitmapped screens made it possible
Not meant to be a real desktop– Idea is to organize information in a way to allow people to use it in the way
they user information on their desktops– Allow windows to overlap – make the screen act as if there were objects on it
Apple took it farther– Waste basket, etc
Microsoft took it to extremes– Microsoft Bob – a recognized failure
Macintosh Desktop
Caldera’s Desktop
Microsoft Bob’s Desktop Metaphor
Microsoft Bob’s Livingroom –
Almost not a metaphor anymore!
Selection Dialog Boxes
How are they using metaphors? How are they breaking them? Do they work well or is there a better
alternative?
SPSS Selection Dialog
SPSS Selection Dialog
Identify the mis-matched metaphors(from the Interface Hall of Shame)
The classic (from the mac desktop)– To eject a disk you drag it to the trashcan
Identify the mis-matched metaphors(from the Interface Hall of Shame)
VCR buttons to control a printer??
Identify the mis-matched metaphors(from the Interface Hall of Shame)
Using tabs to make arbitrary groups
For next time:
Read Cooper chapters 9-11 Read Johnson chapter 1