autumn 2007

CS147: Introduction to Human-Computer Interaction Design

Project overview

The goal of the final group project is to use the methods discussed in class to design and test a working prototype of an interactive system that solves a problem that is significant to some group of users. This is a time-consuming project, so please be aware of the deadlines. The project starts early in the quarter to give you as much time as you can to produce a great project, so good luck!

This year, the project theme is "mobile." All projects must have a strong mobile UI or interaction design component. We encourage you to build directly on the work your group has done earlier in the quarter, in previous assignments, but this is not strictly required—your design choices and tasks may mutate and evolve over time as you continue to engage with your design, re-framing problems and reflecting along the way.

Final Presentations: Thursday, December 13 - 7:00pm - 9:00pm - Hewlett 201 (presentations), followed by Gates Lobby (posters)

Late Policy: Please note that there are NO late days given for project deliverables.

Deliverables: There are three "deliverables" associated with the final project:

• 1-Minute Madness Presentation: Each group will have 1 minute to present their project. The goal of this presentation should be to generate interest in your project so that people will visit you during the poster session that follows. More specifically, the presentation should answer the questions: what did you design? why is it cool? and why was it hard?. You may prepare exactly one static slide as a 1024 x 768 JPEG image for this presentation (animations and video are disallowed due to the complexity involved in getting everyone's slides to work in one slide deck). By Thursday, Dec. 13 at 11am, submit the slide you've prepared as a 1024 x 768 pixel JPEG image using the course submission system. We'll take care of putting this into a slide deck and projecting it during your presentation.
• Poster: After the presentations, there will be a poster session in the Gates lobby. During this poster session, you'll have an opportunity to show your projects to individuals from Nokia Research and Yahoo!, as well as other professors and students. Prepare a 30 inch x 40 inch (approx.) poster in portrait orientation that explains your project. This poster should serve both to explain your entire project by itself, and as a visual aid while demonstrating your project to others. Be sure to explain the entire design process in your poster, from initial discovery through final polishing. We'll provide easels to display your poster on.
• Your Final Prototype!: Make sure you bring your prototype to the poster session so you can demonstrate it to the judges as well as other students. You should make improvements to your prototype based on what you found in your user tests, as well as polish the user interface — it should look done.
• Team Assessment (done individually): After finishing the project, you will have an opportunity to assess your other team members. This will be used to help determine each student's participation grade. This will be submitted online.

---

Grading

The final project / presentation is worth 22.5% of your final grade, which will be the same for all members of the team. (Note: all registered students will receive a letter grade—the "credit/no credit" option is not available.)

Grading criteria: The final project will be graded on the following criteria. We are putting this information on the overview page so you can get a better idea of the kind of project we are looking for.

• Project Idea and Discovery: We are NOT grading your team simply on the coolness of the idea. We are interested in a good design and evaluation of some new interactive system that solves a realistic problem. The idea should be arrived at through the process of discovery taught in class. For feedback on your ideas and designs, please send mail to cs147@cs or drop by office hours.

• Project Design: As you design your project, ask yourself:
  • What are the big design decisions to be made? What constitutes a good one of these? How will you know if you've gotten it right or wrong? What should one do that's not immediately obvious at first blush? Note: while some of the design decisions will be macro-scale, others will be micro-scale, and you'll want to think through both.
  • Your group's final presentation and poster should make it clear that you thought hard and worked through these issues.
    
• Testing: Similar to needfinding, we will grade this based on the quality of your method. In particular, we are interested in seeing how you integrate the results from your tests and comments from your users into real improvements in your interface.
  
  
• Final Prototype : We will grade this based on how well your prototype deals with the representative tasks you have constructed, and how well it deals with errors. Suppose you are interested in using your mobile phone to help you do trip navigation:
  • Bad: Your final implementation runs at full-screen resolution (1280x1024). This is bad because it does not accurately model the phone's resolution. It only has the representative tasks you came up with. However, they are canned, so that if anyone wanders off the pre-planned interaction path, your system does not work.
  • Better: Your prototype runs in a limited resolution that models a phone (320x240). Instead of only implementing an error-free path for each of your representative tasks, users can make and recover from errors. Your prototype runs in Java or Flash or HTML (with some good JavaScript).
  • Great: Everything from better, but you use a development kit from Nokia or Adobe to prototype your app on a mobile device. Doing so, you learn how your design works outside the confines of the lab.
• Teamwork : At the end of the quarter, each student will submit a team assessment, reflecting on their own and their teammates' contributions.

Aesthetics: This is not a graphic design class. As long as your interface prototype is clean and well-organized, this is fine. You do not need have to have fancy animations or amazing 3D icons (unless for some reason your needfinding has discovered that amazing 3D icons are what is most important for a usable prototype).

Resources

• Flash Lite and Python Tutorials (and a mobile prototyping wiki page)
• Topic-specific resources for CS147
• CS147 Frequently Asked Questions

Webapp development

• Joe Hewitt's iUI -- an iPhone JavaScript/CSS navigation toolkit
• iPhoney -- a pixel-accurate iPhone web browser simulator
• The Yahoo! User Interface library

Prototyping tools:

• Adobe Flash CS3 Pro (download a free trial -- also available on campus lab machines)
• DENIM ("An Informal Tool For Early Stage Web Site and UI Design")
• Apple Keynote (available on campus lab Macs)
• Camping, a microframework