Rapid prototyping
Download
1 / 29

Rapid Prototyping - PowerPoint PPT Presentation


  • 95 Views
  • Uploaded on

Rapid Prototyping. CS 160, Spring 2002 Professor James Landay March 11, 2002. Hall of Fame or Shame?. Page setup for printing in IE5. Hall of Shame. Page setup for printing in IE5 Problems codes for header & footer information recognition over recall! no equivalent GUI

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Rapid Prototyping' - candice-bowers


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Rapid prototyping

Rapid Prototyping

CS 160, Spring 2002

Professor James Landay

March 11, 2002


Hall of fame or shame
Hall of Fame or Shame?

  • Page setup for printing in IE5


Hall of shame
Hall of Shame

  • Page setup for printing in IE5

  • Problems

    • codes for header & footer information

    • recognition over recall!

    • no equivalent GUI

    • help is the way to find out, but not obvious how


Hall of fame or shame1
Hall of Fame or Shame?

  • Password dialog in Eudora Pro for Mac


Hall of fame
Hall of Fame!

  • Password dialog in Eudora Pro for Mac

  • Most passwords are mixed case

    • caps lock often leads to failure to authenticate

  • Good idea to inform user that Caps Lock is on

  • Flashing and “!” unnecessary


Interesting survey results
Interesting Survey Results...

In 1997, Harris Research found that employees who use PCs can lose up to 3 weeks/year tackling technology problems. Why?

  • Learning/installing new systems

    • each employee lost 100 minutes a week in the 1st month a new system was introduced

  • Dealing with PC/software malfunction or misuse

    http://guir.berkeley.edu/courses/cs160/spring2002/readings_files/harris-research-survey.htm


Who adapts to who
Who Adapts to Who?

“It is a far better to adapt the technology to the user than to force the user to adapt to the technology.”

Larry Marine, Intuitive Design


Rapid prototyping1

Rapid Prototyping

CS 160, Spring 2002

Professor James Landay

March 11, 2002


Outline
Outline

  • Review Web vs. GUI design

  • Why build prototypes?

  • Tools for prototyping

  • Widgets

  • What prototyping tools lack

  • Administrivia

  • Videos of research systems


Review web vs gui design

overly long download times

out of date information

non-standard link colors

lack of navigation support

long scrolling pages

orphan pages

complex URLs

constantly running animations

gratuitous use of technology

misuse of frames

Review Web vs. GUI Design

  • Web page represents

    1) Customer’s view of information on screen

    2) Unit of navigation

    3) Address to get info. over net (URL)

    4) Storage of the information

  • Differences between Web & desktop apps

    • when does the application state get modified? (“back”)

    • dialog boxes on the Web often lack context

    • don’t know what type of client customer will have

    • customer controls navigation on Web (don’t know where they come from)

  • Top 10 Mistakes in Web Design


Problems with low fi prototypes
Problems with Low-fi Prototypes?

  • Slow compared to real computer

  • End-users can’t do it themselves

  • Computer inherently buggy

  • Sometimes hard for participants to recognize widgets

  • Hard to implement interactive functionality, like pulldowns

  • Won’t look like the final product

  • Not in context of user’s work environment


Problems with low fi prototypes1
Problems with Low-fi Prototypes?

  • Doesn’t map well to what will actual fit on the screen

  • Couldn’t hold in your hand -- different ergonomics from target device

  • Timing in real-time hard to do (slooooow computer)

  • Some things could not be simulated (highlighting)

  • Writing on paper not the same as writing on target device

  • Appearance unrealistic

  • Dynamic widgets hard to simulate (pop-ups)

  • Some items had to be static!

  • Dragging hard to simulate


Problems with low fi prototypes2
Problems with Low-fi Prototypes?

  • Couldn’t measure realistic I/O

    • mouse (can’t sketch the same way)

    • slow response

  • Lack of interactive feedback

    • button highlights

  • “Computer” has to keep track of a lot of paper

  • Hard to draw well (recognition of elmts)

  • Users wouldn’t criticize UI

  • Can’t get accurate time measurement

  • Couldn’t give proper affordance that something wasn’t selectable


Why build prototypes
Why Build Prototypes?

  • Must test & observe ideas with customers

  • Paper mock-ups don’t go far enough

    • how would you show a drag operation?

    • not realistic of how interface will be used

  • Building final app. now is a mistake (?)

    • changes in the UI can cause huge code changes

      • need to convince programmer & hope they get it right

    • takes too much time

    • what did Cooper say it is harder than????

  • Drag & drop prototyping tool appropriate

    • but only after we have iterated on design

    • why is Cooper against prototyping?


Why use tools rather than code
Why Use Tools(rather than code)?

  • Faster

  • Easier to incorporate testing changes

  • Multiple UIs for same application

  • Consistent user interfaces

  • Easier to involve variety of specialists

  • Separation of UI code from app. code

    • easier to change and maintain

  • More reliable

    • bugs found in the tool are fixed for all applications


Prototyping tools historical
Prototyping Tools (historical)

  • HyperCard

    • for Macintosh – built by Bill Atkinson

    • metaphor: card transitions on button clicks

    • comes with widget set

    • drawing & animation limited

  • Director

    • still commonly used by designers

    • intended for multimedia -> until recently lacked interface widgets or controls

    • good for non-widget UIs or the “insides” of app

  • Both have “scripting” languages


Hypercard
HyperCard

  • Tool palettes


Director cast
Director Cast

  • Basic objects used in interface

  • Mainly multimedia in nature

    • images, audio, video, etc.

    • synchronize with cue points


Director score
Director Score

  • Overview of events in time


Director behavior inspector
Director Behavior Inspector

  • Connect events to actions

  • Drag & drop


Ui builders
UI Builders

  • Visual Basic

    • lots of widgets (AKA controls)

    • simple language

    • slower than other UI builders

  • NeXT UIB, SpecTCL, PowerBuilder...

    • widgets sets

    • easily connect to code via “callbacks”

    • “commercial” strength languages


What s the difference
What’s the Difference?

  • Performance

    • prototyping tools produce slow programs

    • UI builders depend on underlying language

  • Widgets

    • prototyping tools may not have complete set

    • UI builders have widget set common to platform

  • Insides of application

    • UIBs do little, prototypers offer some support

  • Final product

    • generally use UI builders, though occasionally see things created in a prototyping tool (multimedia)


Widgets
Widgets

  • Buttons (several types)

  • Scroll bars and sliders

  • Pulldown menus


Widgets cont
Widgets (cont.)

  • Palettes

  • Dialog boxes

  • Windows and many more...


What is missing
What is Missing?

  • Support for the “insides” of applications


Administrivia
Administrivia

  • Team meetings with me today & tomorrow

    • break now to agree on time

      • 30 minute slots

      • Monday, starting from 1-3 PM & 4-4:30 PM

      • Tuesday, starting from 12-12:30 PM & 3:30-4:30 PM

      • Wednesday, starting from 3:00-4:30 PM

  • Web sites must be up by next Friday with all of your previous assignments

    • look at good examples from Fall 2000

      • E-finder, Red Ink, Mobile interior Designer


Videos of research systems
Videos of Research Systems

  • Forms VBT

    • two-view approach

  • Lapidary

    • precursor to many of today’s UI builders

  • Visual Obliq

    • for building distributed applications

  • Morphic

    • directness & liveness


Summary
Summary

  • UI tools good for testing more developed UI ideas

  • Two styles of tools

    • “Prototyping” vs. UI builders

    • what is the difference?

  • Both types generally ignore the “insides” of application -> this is research


Next time
Next Time

  • Information Design

    • Schneiderman paper online