Your SlideShare is downloading. ×
low fidelity prototyping pearl pu EPFL                                                                                    ...
low fidelity prototyping pearl pu EPFL                                      low fidelity prototyping pearl pu EPFLLofi 6 s...
low fidelity prototyping pearl pu EPFLConstructing the Paper Model of GUI     Set a deadline          don’t think too lo...
Interaction                                        low fidelity prototyping pearl pu EPFL                                 ...
5
Interaction                                                                                                   Flow        ...
low fidelity prototyping pearl pu EPFL                                                                low fidelity prototy...
Upcoming SlideShare
Loading in...5
×

Lecture5 lofi proto(low fidelity)

761

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
761
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Lecture5 lofi proto(low fidelity)"

  1. 1. low fidelity prototyping pearl pu EPFL Why Do We Prototype? Low Fidelity UI Prototyping   Get feedback from users faster Part of the Human Computer Interaction Course Notes   saves money Dr. Pearl PU   Experiment with alternative designs Human Computer Interaction Group Institute for Core Computing Science   Fix problems before code is written Faculty of Communication and Information Sciences EPFL   Keep the design centered on the user Attribution: some of the slides have been adapted from Marti Hearst with permission Slide adapted from James Landay low fidelity prototyping pearl pu EPFL low fidelity prototyping pearl pu EPFLFidelity in Prototyping Advantage of lowfi   Cheap = less time and easier to change   Fidelity refers to the level of detail   Quick feedback   High fidelity ?   More cycles of testing, more prototype   prototypes look like the final product   Widely practiced in industry, even though it   Low fidelity ? (Paper prototyping) sounds silly in the beginning   artists renditions with many details missing - Read documents on our website regarding lowfi prototyping Slide adapted from James Landay low fidelity prototyping pearl pu EPFL low fidelity prototyping pearl pu EPFLHow to do a paper prototyping Paper prototyping in architecture  Main idea:   Paper models of a house before it’s   Sketch out prototypes of the interface on built, so that habitants can “walk paper through” it;   Build interaction flow chart   Similarly, potential users can “walk   Potential users “walk through” task through” task scenarios and critique scenarios using the paper interface on the UI   A designer “plays computer”   Change the design on-the-fly if helpful 1
  2. 2. low fidelity prototyping pearl pu EPFL low fidelity prototyping pearl pu EPFLLofi 6 steps Materials  Review task analysis results   Poster papers  Identify lofi scope   Paper, pencils, and markers  Produce lofi   Glue sticks and scissors  Produce interaction flow chart   Post-it notes  Walk through lofi; redesign   Transparencies  Produce high fidelity prototype low fidelity prototyping pearl pu EPFL low fidelity prototyping pearl pu EPFLWhich part of a software to prototype In reality   You prototype most frequently Horizontal prototype performed tasks from most important users   Prototype until the rest of the tasks become similar to what has been Vertical prototyped prototype   The decision to stop prototyping is to ask yourself whether your major personas will be able to walk through it. 2
  3. 3. low fidelity prototyping pearl pu EPFLConstructing the Paper Model of GUI   Set a deadline   don’t think too long - build it!   Draw a window frame on large paper   Put different screen regions on cards   anything that moves, changes, appears/disappears   Ready response for any user action   e.g., have those pull-down menus already made   Use photocopier to make many versions Slide adapted from James Landay low fidelity prototyping pearl pu EPFL Interaction Flow Chart   It is a diagram with directed arrows denoting ordering and steps in user interaction   Each node of the chart is a GUI   Building interaction flow charts for main user tasks is part of paper prototyping 3
  4. 4. Interaction low fidelity prototyping pearl pu EPFL FlowExample Example  Example from Last Year: McInterface   Linda Harjono, Saifon Obromsook, John Wai   http://www.sims.berkeley.edu/courses/ is213/s01/projects/P2/  Main idea:   Walk up kiosk for McDonalds  Main goals   Easy   Fast Interaction Flow Example Interaction Flow Example Interaction Flow Example 4
  5. 5. 5
  6. 6. Interaction Flow Example low fidelity prototyping pearl pu EPFL low fidelity prototyping pearl pu EPFLInteraction Flow Chart Example How to do a walk through  Some details missing from the   The goal of a walk through is to diagram discover usability problems  First branch not labeled correctly   Two methods  Let’s complete the example   Heuristic evaluation (see another teaching notes)   Testing lowfi prototype by choosing someone from a priority user group and ask him to perform tasks described in task scenarios. low fidelity prototyping pearl pu EPFL low fidelity prototyping pearl pu EPFLPreparing for an informal test Conducting a Test   Select your participants   Four testers (preferable)   understand background of intended users   facilitator - gives instructions & encourages   Prepare scenarios that are thoughts, opinions   important according to task analysis   computer - knows application logic & controls it   write up a sequence of actions for each of   always simulates the response, w/o explanation these tasks according to task scenarios   observer(s) - take notes & recommendations - Typical session is approximately 1 hour Slide adapted from James Landay   preparation, the Slide adapted from James Landay test, debriefing 6
  7. 7. low fidelity prototyping pearl pu EPFL low fidelity prototyping pearl pu EPFLConducting a Test (cont.) Conducting a Test (cont.)  Test   Debrief   facilitator hands out written task   fill out post-evaluation questionnaire scenarios to the user   ask questions about parts you saw   must be clear & detailed problems on   facilitator keeps getting “output” from   gather impressions participant   give thanks   “What are you thinking right now?”, “Think aloud”   observe -> no “a-ha”, laugh, gape, etc. Slide adapted from James Landay Slide adapted from James Landay low fidelity prototyping pearl pu EPFL low fidelity prototyping pearl pu EPFLEvaluating Results Potential difficulties  Sort & prioritize observations   Interfaces with large focus on content   what was important?   Dynamic or static; both are ill-suited   lots of problems in the same area?   Use word processor for large sets of text For search/database applications Create a written report on findings      Have pre-planned searches (not very realistic)   gives agenda for meeting on design   Write up search results on the fly changes   Maybe have a printer nearby that can produced typed results  Make changes & iterate   Bottom line: can only prototype the main interaction this way; search needs to be hooked up to really test the search mechanism Slide adapted from James Landay low fidelity prototyping pearl pu EPFLSummary of advantages of Low-fi  Takes only a few hours   no expensive equipment needed  Can test multiple alternatives  Can change the design as you test End   If users are trying to use the interface in a way you didn’t design it – go with what they think! Adapt!  Allows designers to work together Slide adapted from James Landay 7

×