Prototyping - PowerPoint PPT Presentation

Loading...

PPT – Prototyping PowerPoint presentation | free to download - id: 70a40f-ZWIwY



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Prototyping

Description:

Prototyping HCDE 518 Winter 2011 With credit to Jake Wobbrock, Dave Hendry, Andy Ko, Jennifer Turns, & Mark Zachry * Vector based diagramming and prototyping tool ... – PowerPoint PPT presentation

Number of Views:62
Avg rating:3.0/5.0
Slides: 56
Provided by: Julie460
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Prototyping


1
Prototyping
  • HCDE 518
  • Winter 2011

With credit to Jake Wobbrock, Dave Hendry, Andy
Ko, Jennifer Turns, Mark Zachry
2
Agenda
  • Announcements, Hand in assignments
  • Lecture Prototyping
  • Design Activity
  • A3 Description
  • Break 10 mins
  • Sketching Critiques
  • Lecture Practical Prototyping
  • P3 Description
  • Next Class
  • Break 10 mins
  • Group Project Work Time

3
Announcements
  • R5 returned today
  • P1 available tomorrow
  • Can email you main comments and grades
  • All remaining assignment descriptions posted on
    website
  • Except P4, will have done by tomorrow

4
lecture prototyping overview
5
Sketches vs. Prototypes
  • Sketches are about exploring ideas
  • Prototypes are about testing ideas

6
Sketch vs. Prototype
Sketch Prototype
Invite Attend
Suggest Describe
Explore Refine
Question Answer
Propose Test
Provoke Resolve
Tentative, non committal Specific Depiction
The primary differences are in the intent
7
Prototype vs. System Development
  • In engineering, prototyping is system
    development building the first example of a
    system by hand
  • In user interface design, the effort on the
    functionality of the system is minimized for the
    prototype
  • Focus on the "visible" parts of the system
  • Still a range, in terms of fidelity and level of
    activity, in relation to the final product

8
What is a prototype?
  • In designing interactive systems, it can be
  • a series of screen designs (e.g., from photoshop)
  • a storyboard, i.e. a cartoon-like series of
    scenes
  • a PowerPoint slide show or HTML pages
  • a video simulating the use of a system
  • a lump of wood (e.g. PalmPilot)
  • a cardboard mock-up
  • a piece of software with limited functionality
    written in the target language or in another
    language

9
Why prototype?
  • Evaluation and feedback are central to
    interaction design
  • Users can see, hold, interact with a prototype
    more easily than a document or a drawing
  • You can test out ideas for yourself
  • It encourages reflection important aspect of
    design
  • Prototypes answer questions, and support
    designers in choosing between alternatives

10
Low-Fidelity Prototyping (Lo-Fi)
  • Very far from the final product, e.g. paper,
    cardboard
  • Examplessketches of screens, task sequences,
    etc. Post-it notes Storyboards Scenarios

11
High-Fidelity Prototyping (Hi-Fi)
  • Prototype looks more like the final system than a
    low-fidelity version
  • Common hi-fi prototyping tools
  • Macromedia Director, Flash, Visual Basic

12
Hi-Fi vs. Lo-Fi
Lo Fi Hi Fi
Advantages Cheap Fast Easy to change Disposableb Lots of ideas Not a lot of skills Easy to update in real time No investment
Disadvantages
13
Hi-Fi vs. Lo-Fi Howd we do?
Lo Fi Hi Fi
Advantages Fast Cheap Easy kindergarten skills! Can simulate actual product Better sense of finished product Can judge aesthetic appeal More realistic experience Can evaluate experience
Disadvantages Slow response time Cant get feedback about aesthetics User may question design quality Users may focus on unnecessary details Takes a lot of time to make Users may lose track of big picture
14
Horizontal vs. Vertical
  • How much to represent?
  • Deep or vertical prototyping
  • provide a lot of detail for only a few functions
  • Broad or horizontal prototyping
  • provide a wide range of functions, but with
    little detail

15
Horizontal vs. Vertical
16
Prototyping Recommendations
  • Start early
  • Avoid evolutionary prototypes
  • Temptation is too great to stick with bad ideas
  • Start with idealistic (rather than realistic)
    prototypes
  • Level of polish should reflect maturity of the
    prototype

17
Paper Prototyping
  • Easy and fast to do
  • Helps you think of specifics
  • Usually good as a first roundprototype
  • Can still do usability testing, even with paper
  • Thoughts on Nielsen video?

18
Experience Prototyping
  • The key is making the interactions and experience
    as authentic to the real thing as possible
  • Typically a Hi-fidelity experience
  • Use Wizard-of-oz to save time and avoid
    complicated implementation

19
Wizard of Oz
From Gould, Conti Hovanvecz, Comm ACM 26(4)
1983.
  • A method of testing a system that does not exist
  • the listening typewriter, IBM 1984

Dear Henry
SpeechComputer
What the user sees
20
Wizard of Oz
From Gould, Conti Hovanvecz, Comm ACM 26(4)
1983.
  • A method of testing a system that does not exist
  • the listening typewriter, IBM 1984

Dear Henry
SpeechComputer
What the user sees
The wizard
21
Name Origin
  • From the book movie
  • http//www.youtube.com/watch?vNZR64EF3OpAfeature
    related

22
Important Note
  • Up until the point the wizard is discovered, the
    thoughts, feelings, and actions of Dorothy and
    the others were all genuine
  • They were genuinely experiencing what it would be
    like to talk to a powerful and terrible wizard

23
Wizard of Oz
  • Human wizard simulates system response
  • interprets user input according to an algorithm
  • controls computer to simulate appropriate output
  • uses real or mock interface
  • wizard sometimes visible, sometimes hidden
  • pay no attention to the man behind the curtain!
  • good for
  • adding simulated and complex vertical
    functionality
  • testing futuristic ideas

24
WoZ Example - Sketch-a-move
http//www.youtube.com/watch?vO-XNwam3LOs
25
Other WoZ Examples
  • Eye Toy prototype
  • http//www.youtube.com/watch?vIZUQqssE7Jk
  • Anti-gravity bar
  • http//www.youtube.com/watch?vDL9cAcQ-gKQfeature
    related
  • Virtual Peers for Autism
  • Tartaro Cassell (2009)

26
Break 10 minutes
27
Experience Prototypes w/ Paper
  • Spotlight an interactive foam core and paper
    sketch/storyboard Credit Sue-Tze Tan, Dept
    Industrial Design, University of Washington

28
Prototypes vs. Wireframes
  • Prototypes are usually intended to be shown to
    the end user
  • Wireframes are usually more of a design document
    to go from design to actual system
  • Usually contain annotations specific to the
    design team and are not intended for end-user
    consumption
  • Wireframes can be used as a lo-fidelity prototype
    to save time
  • Remove annotations, make it interactive

29
Example Wireframe
  • http//www.smashingmagazine.com/2009/09/01/35-exce
    llent-wireframing-resources/

30
Design Exercise Prototyping
  • A vending machine allows you to buy the following
    drinks
  • Coffee drip coffee, latte, or cappuccino
  • Tea Earl Grey or Orange pekoe
  • Hot chocolate
  • Sugar and/or milk may be added to any drink at no
    extra charge. Drinks come in 3 sizes (12oz, 16oz,
    and 20oz, for 2, 3, and 3.50 respectively).
    Payment is by cash or credit card. Change is
    provided for cash transactions.
  • In groups of 3-4, discuss what approach you might
    take for making a prototype of this system (e.g.,
    lo-fi vs. hi-fi, vertical vs. horizontal, what
    type of technique, etc.)

31
A3 Paper Prototyping
  • Due next week
  • Design a paper prototype for MoodLog, a
    hypothetical system for tracking a user's mood
    across the day and across various locations
  • Use techniques described in Nielsen paper
    prototyping video
  • Also provide a list of tasks that could be
    performed in a usability test

32
Sketching Critiques Education
  • Break into groups of about 4 people
  • Take turns showing off and explaining your 3
    sketches with each other
  • Each critic should offer advice and feedback
    about the idea
  • Strengths, Weaknesses, Originality, Feasibility
  • Sketcher take notes about what feedback was
    offered
  • Critic be critical, but constructive and
    courteous!
  • Each critic should sign the page after the
    sketches and date it with todays date

33
lecture prototyping techniques
34
Practical Prototyping Tools
  • Creating Hi-Fi, semi-functional prototypes with
    minimal effort
  • PowerPoint Prototyping
  • UX-Specific Tools
  • Axure, Balsamiq
  • Photoshop HTML/Dreamweaver
  • Visual Studio
  • OmniGraffle
  • Hardware Prototyping (Arduino, Phidgets)

35
PowerPoint
  • Advantages
  • Almost everyone has it
  • Ubiquitous format
  • Fast and easy to use
  • Can use hyperlinks to simulate interaction
  • Disadvantages
  • Must be used at a computer
  • e.g., difficult to do mobile-based interactions
  • Somewhat limited functionality
  • Cannot be reused for final implementation

36
Example Prototypes
  • http//www.boxesandarrows.com/files/banda/interact
    ive/SamplePrototype.ppt
  • http//courses.washington.edu/info360/examples/pow
    erpoint-prototype-example.ppt
  • Tutorial
  • http//www.boxesandarrows.com/view/interactive

37
Axure
  • About
  • A commercially available wireframes
    maker/prototyping tool
  • Free license for students!
  • http//www.axure.com/
  • Contains good documentation and tutorials
  • Advantages
  • Great for websites
  • Can transition from wireframe-gtPrototype-gtFunction
    al system

38
(No Transcript)
39
Balsamiq
  • Another commercially available prototyping tool
  • Free trial
  • Advantages
  • Quick and dirty
  • Can make lo-fi appearing prototypes
  • http//www.balsamiq.com/products/mockups

40
Photoshop
  • Advantages
  • Can look feel like real thing
  • Disadvantages
  • Needs use of HTML for real interactions

41
Photoshop Tools
  • Download iPhone template
  • http//www.teehanlax.com/blog/?p1628
  • Android Template
  • http//chrisbrummel.com/google-android-gui-psd
  • More free PS widgets
  • http//www.greepit.com/2009/03/25-free-psd-resourc
    es-for-designers/
  • To do screen shots (saves to clipboard)
  • Windows altprint screen button
  • Mac Command-Control-Shift-3

42
Visual Studio
  • Advantages
  • Fast to put together windows interfaces
  • Can evolve into a fully functional prototype
  • Disadvantages
  • Requires programming knowledge to start creating
    interactivity

43
(No Transcript)
44
Omnigraffle
45
Hardware Prototyping
  • Great for making devices off the screen
  • Arduino
  • Phidgets

46
Arduino
  • Prototyping tool for physical devices
  • Allows you to interface with hardware and for
    physical devices to communicate with your
    computer
  • http//www.arduino.cc/

47
Phidgets
  • Physical Widgets
  • Sliders, buttons, sensors,lights, RFID, motors,
    etc.
  • Easier than Ardunio
  • Uses snap-in and USB
  • Only requires basicknowledge of Java
    programming
  • http//www.phidgets.com/

48
General Tips
  • There are more tools here than you can learn to
    use proficiently
  • Find out whats currently being used by your
    company or in jobs youd like to do
  • Take time to learn one or two prototyping
    techniques very well
  • Perhaps your P3 assignment can be a good start

49
More Resources
  • Overviews of rapid prototyping tools
  • http//www.adaptivepath.com/blog/2009/03/24/rapid-
    prototyping-tools/

50
P3 Prototyping
  • Due in 2 weeks
  • Create an interactive prototype of your design
    idea(s) that starts to get at the details of the
    interaction
  • Method of prototyping is up to you
  • Deliverable is demo of your prototype during
    class on March 1 (plan for about 10 minutes)

51
Next Class
  • Tuesday, February 22nd
  • Evaluation
  • Due Next Week
  • A3 Paper Prototyping
  • Reflection 7
  • Sketching, Week 5
  • 3 sketches relating to Mobile Interactions
  • while out and about, driving, walking, etc.

52
Others
  • Flash / Flash Catalyst
  • ExpressionBlend
  • Sketchflow
  • Keynote
  • MockFlow
  • iMockups - 4.99 ipad app
  • Fireworks, InDesign, Illustrator
  • Mac Development Tools
  • Interface Builder (Mac/iPhone)

53
Digital Picture Frame
  • http//www.bestbuy.com/site/Insignia-Infocast8
    22InternetMediaDisplay/9854795.p?id12181853225
    84skuId9854795st9854795cp1lp1AID10474050
    PID3662453SIDskim725X253257URLhttp//www.bes
    tbuy.com/site/Insignia2B-2BInfocast2B825222BI
    nternet2BMedia2BDisplay/9854795.p3Fid3D1218185
    32258426skuId3D985479526st3D985479526cp3D12
    6lp3D1ref39CJPID3662453loc01

54
Break 10 minutes
55
Group Project Meet Time
About PowerShow.com