Transcript of Prototyping and Design HCC 729 2/27/14. What’s new? Inspirations / UI design Questions about...
- Slide 1
- Prototyping and Design HCC 729 2/27/14
- Slide 2
- Whats new? Inspirations / UI design Questions about assignments
Feedback on user tests Interesting UARs Other surprises
- Slide 3
- How to prototype your ideas Partially adapted from ac4d online
materials
- Slide 4
- http://library.ac4d.com/
- Slide 5
- DAVID KELLY, IDEO Humans are really interesting. If you show
them your idea in a prototype form, very few people will tell you
whats right about it But everybody will tell you whats wrong with
it.
- Slide 6
- What is a Prototype?
- Slide 7
- What is a prototype? Prototype = working model Common in almost
every field of engineering design Airplanes, chemical structures,
architecture In HCI Prototypes are Full-size or to scale Fully or
partially functioning Limited representation of an idea Virtual or
physical
- Slide 8
- Prototype examples
- Slide 9
- Prototype Examples A series of screen sketches (paper) A
storyboard, cartoon-like series of scenes illustrating key points
of a scenario A PowerPoint Slide show A video simulating the use of
a system A piece of software with limited functionality written in
the target language or in another language An electronic mock-up
(hardware) A cardboard mock-up
- Slide 10
- Why Prototype? Why bother making one? We are all experts,
right?
- Slide 11
- Why Prototype? To identify user interface and functional
requirements Almost impossible to specify in advance Cant always
get things right the first time
- Slide 12
- Why Prototype? Reveals problems/prevents mistakes Building
artifacts immediately leads to costly errors We can often avoid
expensive development by building reasonable prototypes
- Slide 13
- Why Prototype? Enables quick evaluation and feedback throughout
design process Fosters discussion, reflection and innovative ideas
(from designers and users): concrete artifact Keeps design focused
on users Cheap, easy way to test designs with users Help choose
between design alternatives (risky/critical features, go/no-go
decisions) Help answer specific questions Users enjoy prototyping
and feel involved Provides continuous feedback on the current
design situation
- Slide 14
- Prototyping: When/How? Brainstorm different representations
Choose a representation Rough out interface Style Task centered
walkthrough and redesign Fine tune interface, screen design
Heuristic evaluation and redesign Usability testing and redesign
Limited field testing Alpha/Beta tests Low fidelity paper
prototypes Medium fidelity prototypes High fidelity prototypes
Working Systems Early Design Late Design
- Slide 15
- Prototyping Stages Redesign Evaluate Prototype Design
- Slide 16
- ALL PROTOTYPES INVOLVE COMPROMISE Choose your compromises
wisely
- Slide 17
- Prototype Compromises Examples of compromises in software-
based prototyping: Slow reaction time Limited functionality Use
placeholder images: clipart, stock icons Simulate data or input Two
common types of compromise: horizontal and vertical
- Slide 18
- Horizontal vs. Vertical Horizontal thin prototype Vertical
thick prototype
- Slide 19
- Horizontal vs. Vertical Horizontal Designs First level of user
interface is fully present No, or limited, functionality (but looks
complete) Fast implementation Full extent of interface can be
tested, but not in a real-use context Often does not capture the
interaction feel Vertical Designs Restricted to a subset of the
system This subset offers the interface and functionality Can
undertake realistic testing
- Slide 20
- Fidelity Designers create prototypes at multiple levels of
detail, or Fidelity Example: Web sites are iteratively refined at
all levels of detail Site Maps Storyboards Schematics Mock-ups Low
High Fidelity
- Slide 21
- Fidelity Example
- Slide 22
- Fidelity in Prototyping Low Fidelity Quickly made
representations of interface, interaction is imagined Medium
Fidelity Prototypes that are more finalized than low fidelity,
simulate interaction High Fidelity Prototypes that look like the
final product, build interaction elements Will cover in a future
lecture.
- Slide 23
- Slide 24
- What tools do I need? Suggestions?
- Slide 25
- What is this device?
- Slide 26
- Slide 27
- A prototyping tale Anyone know what this device is?
- Slide 28
- The Apple Newton First significant PDA (1993) Handwriting
recognition built into it! Huge failure on the market. Too big and
heavy to carry Too slow to run most applications Handwriting
detection was not very accurate
- Slide 29
- Redesigning the Newton After failure of the Newton, two of its
inventors left Apple to design a new device and used techniques
from all areas of HCI. Identified that the Newton failed because it
was too big and too slow. Focused on exploring the form of the
device through block of wood prototypes which Jeff Hawkins carried
around to decide what the correct form should be. Redesigned the
hardware specifications so it would fit with the smaller form. The
basic Pilot 1000 retailed for $299, half the price of a
Newton.
- Slide 30
- Additional information When working out the Palm's handwriting
recognition system, Graffiti, Hawkins said he scribbled notes all
day on a pad of paper. But he didn't write the letters side by
side. Instead he scrawled them one on top of each other -- just the
way it's done on the Palm -- ending up with indecipherable blobs on
the page. Hawkins told how his make-pretend method led him to
conclude that voice recognition will never be a good way to control
computers -- a notion that goes against current wisdom, including
Microsoft's, which is sinking millions of dollars into researching
the endeavor. Hawkins said when he's sat around pretending to
control his computer by voice the experience is unsatisfactory and
uncompelling. Quotes from wired.com article about Jeff Hawkins:
http://www.wired.com/science/discoveries/news/1999/10/32010
- Slide 31
- Result of Newton Redesign
- Slide 32
- Low Fidelity Prototyping
- Slide 33
- Low Fidelity Prototypes Paper Prototypes Paper mock-up of the
interface look, feel, functionality Quick and cheap to prepare and
modify Purpose Brainstorm competing representations Elicit user
reactions Elicit user modifications / suggestions
- Slide 34
- Why Use Low Fidelity Prototypes Traditional methods take too
long Sketches -> prototype -> evaluate -> iterate Can
simulate the prototype Sketches -> evaluate -> iterate
Sketches act as prototypes Designer plays computer Other design
team members observe and record Kindergarten implementation skills.
Allows non-programmers to participate
- Slide 35
- Low Fidelity Prototyping Uses a medium which is unlike the
final medium, e.g. paper, cardboard represent software Quick, cheap
and easily changed Support the exploration of alternative designs
and ideas Best in early stage of development and not intended to be
final product For exploration ONLY: concepts, look and feel, iron
out usability issues early on Examples Sketches of screens, task
sequences, etc Post - it notes Storyboards
- Slide 36
- Low Fidelity Prototypes Sketching is important Dont be
inhibited about drawing ability, practice simple symbols Develop
your own symbols and icons PeopleComputer Interactions
- Slide 37
- Paper Prototyping Rules Set deadline (dont spend too long) Draw
window on large paper Draw different screen regions on index cards
and them put on the window paper Ready responses for any user
action (magic mouse can make anything a link) Photocopy to make
test version Test, markup, and iterate
- Slide 38
- Tools of the trade
- Slide 39
- Index Cards Index cards (3x5) a great size! Each card
represents one screen or one element of a task Great for software
prototypes with multiple screens Website design Mobile devices
Windows of software
- Slide 40
- Index Cards (Example) Include enough detail for users to
interact with the prototype
- Slide 41
- Make a Low Fidelity Prototype This example gives an overview of
the layout without any detail - a good starting point Numerous
alternatives can be quickly created without worrying about details
Should be produced in pencil (so you can easily change it) Should
be hand-drawn (rulers take too much effort)
- Slide 42
- Is this a good low fidelity prototype? An example of a tidy
prototype More difficult to change this prototype than hand drawn
sketches (even if you use a fancy drawing package) It is highly
unlikely that the first (or 2nd, or 3rd, or 4th) designs will be
completely correct Designs that are hard to amend, wont be amended.
No benefit over the hand-drawn sketches, just took longer to make,
and less likely to get good feedback Do you really want to make one
of these for all 10 of the designs you want to evaluate? Prototype
at the right fidelity!!! WRONG!!
- Slide 43
- Make a Low Fidelity Prototype Once you like your layout, you
can focus on details of the design example data values, menu
content, buttons, labels, etc More specific layout of interface
objects You can even annotate your paper prototype!
- Slide 44
- Fancier Low Fidelity Prototypes Once the details are ironed
out, you can create your interface toolkit Cut out each of the
components (windows, dialogs, menus, etc) into its own window These
can be used to dynamically simulate the entire interface following
a storyboard, or flow.
- Slide 45
- Useful Low Fidelity Tools Large, heavy, white paper Index cards
Tape, stick glue, correction tape Pens & markers (many colors
and sizes) Large sheet of foam core, poster board, butcher paper
Scissors, X-acto knives Band-aids Explore your local art store for
supplies!
- Slide 46
- Low Fidelity Advantages Can build entire site quickly No
expensive equipment required Can simulate almost anything Anyone
can implement prototypes Anyone can participate in your design
process! Fast iterations: # iterations has positive impact on
quality of final design. Always want to explore multiple ideas, so
you dont fall into Local Maximum
- Slide 47
- Low Fidelity Disadvantages Not detailed enough to implement
from Need to be facilitated when presented to users Does not
address issues that arise from implementation Some interactions are
hard to simulate with paper dragging, pull down menus, selections
system speed/latency Form is not always clear device size
ergonomics appearance Can be a barrier to spend the effort to
create prototypes
- Slide 48
- Summary: Low Fidelity Prototypes Traditional methods take too
long, can do in a few hours No expensive equipment required Can
simulate almost anything Anyone can implement Fast iterations: #
iterations has impact on quality of final design.
- Slide 49
- Testing with low fidelity prototypes Like conducting a user
test / think aloud Concrete tasks Quiet environment Let the user
guide the process One experimenter acts as the computer
- Slide 50
- Medium Fidelity Wizard of Oz (to come later)
- Slide 51
- High Fidelity Prototyping Not covered in this class
- Slide 52
- Additional Prototyping Examples
- Slide 53
-
http://www.nngroup.com/reportsprototyping/video_stills.html
- Slide 54
- Slide 55
- Slide 56
- Slide 57
- Prototyping Examples Pieces of paper
http://www.youtube.com/watch?v=ykJ60H4Qkvg&feature=related
Simulated screen with paper
http://www.youtube.com/watch?v=oITeUEjrY3Q&feature=related Cell
phone testing
http://www.youtube.com/watch?v=Bq1rkVTZLtU&feature=related
Prototype usability testing
http://www.youtube.com/watch?v=L7oPR2aTGlM&feature=related
http://www.youtube.com/watch?v=L7oPR2aTGlM&feature=related
Complete prototyping process
http://www.youtube.com/watch?v=5Ch3VsautWQ Kids game design (what
not to do)
http://www.youtube.com/watch?v=L3yl9vaJuFE&feature=related
http://www.youtube.com/watch?v=L3yl9vaJuFE&feature=related
- Slide 58
- Remember the Hick-Hyman Law With every additional choice, the
time it will take for one to make a selection increases. When
prototyping products, systems, and services, Less = More. Try to
prototype the variables that need the most attention or are vital
to the user achieving their goal.
- Slide 59
- For next week Assignment Readings
- Slide 60
- Required Usability Engineering, Chapter 7
- Slide 61
- Assignment Create a low-fidelity prototype of a redesign for
the website you are studying This prototype should support 5 tasks
that you have identified as problematic in either the HE or TA.
Your prototype must be on paper Your prototype can be hand drawn,
or created on the computer You do not have to worry about color /
type
- Slide 62
- Assignment (deliverables) Bring it in Feel free to design with
your users. Write 100-200 words about what you focused on in your
design, and the design decisions you made
- Slide 63
- In-Class Exercise Identify (in groups) the most important
interactions for your redesign May need to revisit CI UARs May need
to revisit proposed solutions Decide what medium you will use to
prototype those interactions Sketch out a paper prototype of *one*
solution