Interactive Prototype

From CS160 User Interfaces Fa06

Revision as of 02:32, 27 November 2006; Maneesh Agrawala (Talk | contribs)
(diff) ←Older revision | Current revision | Newer revision→ (diff)
Jump to: navigation, search

Due: before class on October 30, 2006

100 Points

Interactive Prototype Presentation Schedule

Contents

[edit]

Overview

In this assignment you will build a working prototype of you interface. You will first revise your user interface ideas based on the evaluation of your low-fidelity prototype from the previous assignment. You will then an interactive prototype of your revised design that makes use of the Anoto Digital Pen system.

[edit]

Interface Redesign

Use the results of your low-fi prototype tests to design a revised user interface. Develop new and/or revised scenarios for your tasks by storyboarding your ideas. The tasks that most of you used in the low-fi assignment should be sufficient for this, but some were simple or partial tasks that did not adequately cover your proposed functionality. Make sure to revise those tasks based on the feedback from your users. If you are signficantly changing your tasks, make an appointment with us to present your new tasks, design ideas, and storyboards for discussion.

[edit]

Prototyping

You will prototype your interface design using the Anoto Digital Pen system. If you are planning to run the code on your own machine make sure you follow the directions on the course wiki for installing the Anoto Pen Driver, SDK, and R3. If you wish to use the bluetooth streaming capability, be sure to follow instructions on how to upgrade the firmware. The libraries can be installed on a student laptop, or is available already installed on the machines in 330 Soda. Talk to us if there are other tools you would like to use.

Your prototype should implement the three scenarios that you developed for your tasks. In addition, the design of the prototype should now start to account for the size, resolution, colors, and other attributes of your target platform.

You should implement enough functionality so that a user could adequately evaluate the interface. While the underlying functionality does not have to be fully implemented, there should be enough there so that you can ask users to tell you whether or not the interface would address their task-specific needs. For example, applications requiring handwriting recognition could instead build a wizard-of-oz interface in which a human-operator could manually do the recognition behind the scenes.

You have a short period of time to complete this prototype, so you should focus on showing only what is essential and try to avoid writing code where it is not necessary. You will likely have to make some difficult choices! Make sure you talk with us if you have any questions about how much of your project you should implement.

Note: You should not consider this interactive prototype to be your final implementation. You will be evaluating this prototype in the next assignment and we expect that you will continue revising the implementation through the remainder of the class.

[edit]

Deliverables

  • Prototype: Your prototype must be accessible and/or executable by everyone in the class from the wiki. It must be accompanied by a README file that describes any installation requirements and operating instructions, including any limitations in the implementation. You should include your source code as well,a (working) executable of the computer based side of the interface and a pdf file for the paper side of the interface.
  • Report: You must submit one copy of a printed report of about 6 pages of text in class. You must also put a copy of the report on the wiki.
  • Presentation: On either Oct 30 or Nov 1 your team will present your project to the teaching staff, including a demo of your prototype. Presentations will be short (~ 15 mins) because of the class size. We will be arranging presentation sessions for all day on Oct 30 and Nov 1 and arrange for signing up for a presentation time in class or in section. Practice in advance and leave time for questions! At most two people from your group should actively speak during the presentation (there just isn't enough time for everyone to speak). You must use PowerPoint slides and make them available for download on the wiki.
[edit]

Report

The report should follow this outline with separate sections for the top-level items.

  • Each team member’s name and role in this assignment
  • Problem and solution overview (1 paragraph)
  • Tasks (1/2 page)
    • 3 representative tasks to test your interface (easy, medium, hard)
  • Revised interface design (1 page plus screenshots or scripts)
    • Changes as a result of low-fi testing and rationale behind the changes (refer to screenshots or scripts).
    • Sketches or scripts for unimplemented portions of the interface
    • Storyboards of tasks (annotated screenshots or scripts)
  • Prototype overview (2 pages)
    • Overview of the UI implemented (reference figures or scripts from next section)
    • What was left out and why
    • Any wizard of oz techniques that are required to make it work
  • Prototype screenshots or scripts (as many as needed)
[edit]

Grading

The report and prototype will be graded together, and the presentation will be graded separately. Here is the grading for the report and prototype (60 pts total):

[edit]

Design (20 Points)

  • Tasks (3 pts)
    • Do the tasks cover the interesting features of the project?
    • Do the tasks have an appropriate difficulty/complexity specified?
    • Do the tasks altogether form a compelling story for the project?
  • Changes (5 pts)
    • Were appropriate changes made to address the important problems discovered?
    • Are these changes well illustrated with screenshots or scripts?
  • Transition from low-fi to interactive prototype (12 pts)
    • Were the limitations of the low-fi addressed?
    • Were appropriate constraints fron the Anoto Digital Pen system considered?
    • Were any non-standard interactions described and justified?
[edit]

Prototype (20 pts)

  • Is the prototype accessible and working?
  • Can users complete the three tasks with the prototype?
  • Were appropriate tradeoffs made between functionality and completeness?
  • Are the limitations and tradeoffs described and justified in the report?
  • Does the README file summarize these limitations and any other details needed?
[edit]

Report (20 pts)

  • Writing
    • Does the report cover all the topics in the outline?
    • Does the organization follow the outline?
    • Are sub-sections used for easy scanning of important parts?
  • Screenshots and Storyboards or Scripts
    • Are important figures referenced and placed inline with the text?
    • Are they clearly annotated (i.e. with explanatory captions)?
[edit]

Presentation

The presentation grading will be broken into two components: a grade for the design of the presentation itself and grade for the information conveyed in the presentation. The grades for each of these components are explained in more detail below.

[edit]

Design of Presentation (20 pts)

  • Suggested Organization
    • Overview
    • Overall problem
    • Representative tasks
    • Overall UI idea including design changes from the previous iteration, rationale behind changes
    • Summary
  • Presentation
    • Use slides. Ensure that the presentation shows appropriate preparation, and that visual aids are effective, properly prepared, and properly employed. Try to replace text with images wherever possible. Make sure text is not too small.
    • Cover the required scope within the 15 minute time period. Practice and time your presentation.
    • Ensure the presenter makes eye contact and projects well.
  • Demo and Team Work
    • The most common mistake in CS160 presentations is the trying to demo while speaking. One person in ten can do this effectively. Most lose the audience.
    • Have one person do the demo while the other speaks. Practice coordination.
    • At most 2 people from your group should speak during the presentation. There isn't enough time to switch between all group members. However all group members should be prepared to answer questions.
[edit]

Information in Presentation (20 pts)

  • Representative Tasks
    • Did they provide coverage of the functionality?
    • Where the tasks too easy or too hard?
  • User Interface
    • Was the interface novel and creative?
    • Was it appropriate for the supported tasks?
    • Does it follow from the task analysis, low-fi prototype, and other sound reasoning?
  • Presentation of Functionality
    • Was enough presented to illustrate the representative tasks?
    • Was enough presented to give a flavor of the interface?
    • Was there an appropriate amount given the difficulty of interface ideas?
[edit]

Submission

[edit]

Uploading Images

To upload images to the wiki, first create a link for the image of the form [[Image:image_name.jpg]] (replacing image_name.jpg with a unique image name for use by the server). This will create a link you can follow that will then allow you to upload the image. Alternatively, you can use the "Upload file" link in the toolbox to upload the image first, and then subsequently create a link to it on your wiki page.

[edit]

Hand in Printout in Class

Print your assignment and hand it in at the begining of class on Oct 30.

[edit]

Add Link to Your Group's Page

Edit your group's page to add a link to a new wiki page for this assignment. The wiki syntax should look like this:

[[InteractivePrototype-Group:ExampleGroup|Interactive Prototype]]

Again replace ExampleGroup with your group's name. Look at Group:ExampleGroup for an example. Then click on the link and enter the information about your assignment. Be sure to clearly address everything mentioned in the writing guidelines above.

[edit]

Add Link to Your Finished Assignment

One you are finished editing the page, add a link to it here with your group name as the title link. The wiki syntax will look like this: *[[LoFi-Group:ExampleGroup|Group:ExampleGroup]]. Hit the edit button for this section to see how I created the link for the ExampleGroup.


[add comment]
Retrieved from "http://vis.berkeley.edu/courses/cs160-fa06/wiki/index.php/Interactive_Prototype"