CPSC 222: Interface Design

Professor: Ellen L. Walker

Administrative links

• Syllabus

Resources on the Internet

• Textbook: Interaction Design: beyond human-computer interaction, by Helen Sharp, Yvonne Rogers, and Jenny Preece
• Bad Designs
• Web Pages That Suck
• Jakob Nielsen on Usability and Web Design
• Web Accessibility Evaluation Tool (overview)
• Web Accessibility Evaluation Tool (page submission)
• Universial Usability
• GotAPI - Searchable interface to documentation for HTML, JavaScript, Java, etc
• Webmonkey (tutorials)
• W3Schools (tutorials and examples)

Class Notes / Topics Covered

• Chapter 1
• Chapter 9
• Chapter 10
• Chapter 2
• Chapter 7
• Chapter 3
• Chapter 11
• Chapter 6
• JavaScript Introduction
• Chapter 12
• Chapter 14

Quizzes

1. Chapters 1 and 9
2. Chapters 2, 3, 6, 10 and 11
3. Chapters 7, 12, 14 and the Java Script slides

Lab / Homework Assignments

• Lab 1 (In-class, 4/23)
• Reading assignment: Chapters 9 & 10 (by 10am 4/24/09)
• Homework 1: Due 10am Monday (4/27) - Chapter 9 Assignment, p. 464. This assignment should be done individually.
• Lab 2 (In-class, 5/1)
• Lab 3 (in-class, 5/4 and 5/5 as needed) Work through the JavaScript and Forms tutorials from WebMonkey:
  • JavaScript Tutorial
  • HTML Forms Tutorial
  While you will not hand anything in for this lab, you will use what you learn in Homework 2.
• Homework 2: Due 10am Thursday (5/7). This assignment must be done individually.

Project

• Part 1: Requirements, due 5/1 at 9am.

  Carry out the Assignment at the end of Chapter 10 (page 519) for your team's website (not a ticketing site). Additional details for each part follow.
  1. Interview and/or observe a minimum of two potential users outside your team for this part. You may also include your own experiences. Turn in both "raw notes" and a summary of what you learned from the data.
  2. Turn in descriptions of your personas and the scenarios that you developed.
  3. Identify and justify what you consider the 'main task' of your website. Then perform a task analysis on it.
  4. (as written, for your site)
  5. (as written, for your site)
  Hint: There are some good additional notes and partial examples on the textbook website. Select Chapters, click 10, and then choose Assignment Notes. You can download Volere templates under Web Resources on the same site.

• Part 2: Prototype, due 5/4 at 9am.

  Carry out the Assignment at the end of Chapter 11 (page 574) for your team's website. Additions and changes follow.
  1. Suggest two different conceptual models for your system. List advantages and disadvantages of each model. Explain which one you will use, and justify your choice.
  2. You should have, at minimum, a storyboard for the scenario from Part 1, but it would be better to have additional scenarios covering the most common uses of the system. Show your scenarios to at least one potential user (outside your group) for feedback and report on your results.

     Your card-based prototype should cover as much of the project as possible. It is preferable to have a prototype for at least part of a second very different design. Have at least two potential users (outside your team) interact with your prototype(s) and record the feedback that you receive. Include a summary report of what you learned.

     You do not need to do anything for part (iii) of the textbook assignment.

  3. Do this part as written (only for the first page the user encounters).

• Design Presentation: in class on 5/4.

  Your presentation should begin with the requirements for your site, including at least a brief description of how you collected information and what you learned (including any surpruses). Then you should use your card-based prototype to walk through at least one scenaro (more, as needed to demonstrate the important features of your site). Everyone is expected to participate in their site's presentation, as well as to provide constructive feedback to the other sites. Each presentation (plus questions) should take no more than 1/2 hour.

• Part 3: Implementation, due 5/12 at 5pm

  Implement a high-fidelity prototype of your team's website, suitable for testing with users. The interface should be as fully developed as possible, even if the underlying functionality is faked with static pages. (I am happy to talk with individuals about how to do this). Be sure that users will be able to get a sufficiently realistic experience for you to carry out the usability studies of Part 4. Although this will not be submitted to me until the end of class, you should try to have it done as soon as possible so that you have more time for evaluation.

  Your implementation must use JavaScript in at least some form, and most, if not all, of the code (and all of the HTML) should be developed by your team. If you do use anything from another source (e.g. a JavaScript example from w3schools.com), you must carefully document where the code that is not yours came from, where it begins, and where it ends.

  Although you will not turn this implementation in to me until the end of the course, you will need a working prototype for user testing. Therefore, I strongly recommend that you have a working prototype no later than Friday, May 7.

• Part 4: Evaluation, due 5/12 at 5pm

  I am giving you until 5pm to polish your writeup, but in order to present it, you will have to have all of the work completed before class on Tuesday.

  Your evaluation assignment is based on the assignment for Chapter 14, page 677. Additions and changes follow. Note that parts e and f here do not follow the textbook at all.

  1. Choose enough tasks that the users will fully explore your interface. This will most likely be more than one. Of course, you need to be sure that your prototype can support the tasks you will ask your users to do. List your tasks and why you chose them.
  2. Do this part as written. Although Hiram College does have an IRB, for time reasons, we will not go through them. Please make sure all testers know that their participation is voluntary, and that you appreciate their time. Also (especially for the mass email) that you are not representing any official body of the college, and that no decision to change the current mass email has been made. Submit the signed consent forms (if any) as part of your complete submission.
  3. You should have a minimum of three users. If possible, include users from at least two different groups, rather than having all your testers be your friends or members of this class. If possible, test with even more users. For each user, describe their 'group' and perhaps some background information. Unless the user is a member of a unique category (e.g. we have only one computer center director), you should anonymize the user, e.g. "Student A is a sophomore computer science major..."
  4. Be sure to carry out the testing similarly for all users. Decide in advance how long (if at all) you will give the user to explore before asking the user to complete the tasks. It generally works best if one person is interacting with the user (and even answering questions, if asked) while the second person is timing and taking notes. Produce a complete report on each user -- how long did the tasks take, what problems were encountered, what seemed easy. Report on any spontaneous positive or negative comments made by users.
  5. (Replaces part e from textbook). Follow up the usability study with either a short interview or a short questionnaire to determine what the user liked and disliked about your system. Include your interview script or questionnaire, along with your writeup.
  6. (Replaces part f from textbook). Summarize your findings and write a conclusion for your study. What have you learned? What aspects of your interface were most and least usable? Which aspects were most and least enjoyed by users? If you had more time, what would you change in your interface and why?

  Final Presentation, in class on 5/12

  This presentation should present parts 3 and 4 of the project. Begin with a review of the (revised) requirements of the system and a walkthrough of your prototype. Then describe your testing and your results.