CS124a: Investigation 5
Computer Prototyping and Evaluation
Due:
Friday, Apr 29, 5pm on Sakai
This is a pair investigation, except for part 4, the reflection. You should work with the same
partner that you worked with on Investigation
3 and Investigation 4.
This assignment is slightly larger than the last 3, and as such
you have a little more time to work on it (~2 weeks), and it's worth a
little more of your grade (15 points, see rubric). You will each
do part 4 on your own. Only one partner needs to hand in
Goals
The goals of this Investigation are:
- To learn how to use one computer prototyping tool
- To experience that benefits and limitations of computer prototyping in comparison to paper prototyping
- To experiment with and learn about aspects of visual design and interface look and feel
Before you Begin
After class
Assignment
In this final investigation you will complete another full loop of
our user-centered design loop: Requirements -> Redesign -> Build
-> Test. You will build on your interface design from I4, and
your implementation will be one step higher in fidelity than your last
implementation.
The end result of this presentation will be a
high(er)-fidelity comptuer prototype, as well as observations about the
prototyping process and users' experience with this prototype.
Part 1: Computer prototype
construction
For
this assignment we'll be using an image-based prototyping tool called
Pencil. Pencil is an open-source freely available tool that runs
as a standalone application (on Windowns and Linux) and, even easier,
as a Firefox extension. It is available here: http://pencil.evolus.vn
This tool requires absolutely no code at all. You can
create high-fidelity looking screens for your interface and link them
together through mouse clicks so that your interface seems like it's
responding to mouse input. I will briefly introduce Pencil in
class on Monday, April 18, and there is some documentation for working
with the tool at the above site. The idea behind Pencil is to
create realistic-looking interfaces that behave somewhat like the final
interface.
Your computer prototype should be:
- High fidelity in look. Use this
prototype to explore the graphic design of your final implementation.
Lay out screens as you want them to appear in your final implementation.
Make choices about colors, fonts, alignment, icons, and white space.
Your prototype need not be pixel-for-pixel identical to your final
implementation, however.
- Medium fidelity in feel.
This prototype will run on a desktop computer with a mouse and a
keyboard, so if you're building a touch-screen interface, the feel
might be a little off. (However, if you like and you can get ahold of
an iPad, you can try your prototype there). Also, Since Pencil
supports only static screenshots and links between them, your prototype
will not support some advanced interactions with high fidelity, such as
drag & drop or text entry. That's OK. You can describe what's
happening verbally or with a popup window. Part of the challenge
of lo-fi computer prototying is trying to cope with these limitations.
- Medium fidelity in breadth. Your
prototype should be able to handle at least the 3 scenarios you
described in your tasks. In addition, your prototype should
include every major screen or dialog you would have in a final
implementation.
- Low fidelity in depth.
We're using a prototyping tool that includes no back-end at all, so our
computer prototypes will necessarily be low-fi in depth.
You
should base your initial design of your computer prototype on the
results of your paper prototype from I4. You should feel free to
chance the prototype between user tests just like lask time.
The
end result of your prototype should be an HTML page which you should
post on your public web space. You will include a link to your
prototype in what you hand in.
Part 2: User testing
You
will again test your prototype in user tests. You should follow
the same procedure and use the same tasks as in I4, testing on 5 users
who are not in CS124a and who you did not test with for your paper
prototype (it's OK if they tested with another group). You can
use your same introduction and tasks as you used in I4 (unless you
think that modifying them would give better results). Because
there is no human computer this time around, one person should act as
facilitator and the other will be simply the observer who takes notes.
The facilitator should be the one who reports any limitations of
the interface, if appropriate.
As in I4, you should take plenty
of notes while the users are using the interface. You'll use
these notes in the next section
Part 3: Identification of
usability problems and interface redesign
In this assignment we will get a little more formal about reporting
usability problems. After you have tested with your 5 users, you
should report all usability problems you encountered during your tests.
Note how many users had each problem. Although, although
this is not a heuristic evaluation, try to link the usability problem
to one of Neilsen's heuristics, if appropriate. You should also
give
each problem a severity rating (cosmetic, minor, major,
catastrophic), as we discussed in class on Wednesday, April 20, and
you should organize the problems you find from most severe to least
severe.
Based
on these problems, redesign your interface and modify your prototype to
fix as many problems as possible, giving priority to the more severe
problems. Your redesigned prototype should be in a separate HTML document. You will hand in both your initial and your redesigned prototypes.
Finally,
return to your description of each usability problem and note how you
addressed this problem with your final design.
To summarize, each usability problem in your list should contain the following information:
- Problem:
- Number of Users Encountering this Problem:
- Applicable heuristic (if appropriate):
- Severity:
- How it was addressed:
Part 4: Reflection (INDIVIDUAL)
Discuss
what you learned over the course of the iterative design process. If
you did it again, what would you have done differently? Focus in this
part not on the specific design decisions of your project (which you
already discussed in the Design section), but instead on the meta-level
decisions about your design process: what features to prototype, what
prototype techniques to use, and how to evaluate the results.
Write a few paragraphs here. The quality of your thought
process and exposition is more important than the length of your text.
What to Hand In
In two documents (Word or PDF) you should hand in the following:
Document 1 (Pair materials--only 1 partner needs to submit this):
- The link to your INITIAL and FINAL computer prototypes (links to 2 different pages)
- Your user study materials (introduction, instructions, tasks).
- Your writeup of usability problems encountered in your user studies from Part 3
Document 2 (Part 4: Individual)- Your reflection from Part 4 (EACH PARTNER SHOULD SUBMIT THIS SEPARATELY)
Grading
Investigation 5 grading rubric
Back
to CS124 Investigations Page