WPI Worcester Polytechnic Institute

Computer Science Department

CS3041 - Human Computer Interaction - D17

Task, User, Interaction, Icon, & Screen Design


Project 3 must be submitted on Mon 1st May
Handing it in late is not an option.

Progress reports are due on Mon 10th Apr and Tue 18th Apr


The goals of this project are to provide experience with working in design teams, to encourage creative thinking, to gain experience focusing on a particular type of user, and to practice interface design.

An HCI professional would be required to know how to work with others to design an interface from a scientific (HCI) as well as an artistic (graphic design) point-of-view.


For this project you will be working in groups of people, selected randomly (Group Assignments & Hints for working in groups).

The problem is to design the interface -- content, interaction, layout, and icons -- to a computer application for a particular task. The details of the task are provided below.

The design is to be described using storyboards (sbs). A storyboard is a picture/drawing that shows what the screen looks like at one instance of time. Several storyboards in sequence show how the screen changes in response to user interaction. It's a low-fidelity prototyping technique.

The sbs should be prepared with any drawing/painting tools you wish to use. Indicate on the sb any sounds you wish to add to actions: polite ones only please!

Creativity will be rewarded.

No implementation is to be done!

Implementing a prototype, in Visual Basic for example, will only constrain your creativity. This is an exercise in doing, and providing rationale for:

  • task analysis,
  • user analysis,
  • interaction design,
  • screen design, and
  • icon design.

The Users:

The users of your system will all be seniors: people over 65 years old. Read the AARP report "Designing Web Sites for Older Adults: Expert Review of Usability for Older Adults at 50 Web Sites" (note the heuristics in the Appendix) and Jakob Nielsen's web page "Usability for Senior Citizens" to gain insights into what additional requirements that places on your design. These will need to be discussed in your User Analysis.

Task Details:

Your task is to design screens for computer-supported communication between users that do not speak each other's languages (No! worse than British and American). For example, French and Japanese. However, you do not know in advance which pair of languages are involved in a particular interaction. You also have no control over who uses your interface as it is in a public place (e.g., think of its use at an international seniors home device fair). The two users will not be at exactly the same location. Nor are they within sight of each other.

The interaction you design is required to support the building of a simple "sentence" on the screen so that the other person will be able to receive it, see it and understand it. No words or typing are to be used in the sentence, only icons. The interface itself is also iconic.

You may assume that very simple introductory help is available for users in their own language. Apart from that, exactly the same iconic interface software is in place for every user in every location.

All communication between the two users takes place via the interface: i.e., don't worry about where/whether they're sitting, standing, etc., or how far away they are from each other.

Body language is not allowed/available as part of the communication.

The progression of the generation of the writer's sentence can be made visible to the reader if you want it to be. In that case, the way that the sentence is formed over time, and what that means, must be clear. The alternative is just to have the final sb sent to the reader to indicate the whole meaning.

Focus on conveying all the aspects of the sentence's semantics. Do not focus on the syntax. Remember that the constraints on iconic communication do not need to be the same as for textual communication.

Try not to be too concerned about possible implementation of this system. Just make design choices that you feel are possible to implement in a reasonable way (e.g., no holographic icons).

It is to be a stand-alone application, with the underlying OS invisible. Concern yourself with composing and sending only, not receiving or reading. Assume that the sender has already selected the receiver.

The information being "written" that you must show for your system is:

Anna was happy walking her dog in the park with the big trees, remembering Kezzi shooting photos beside the Thames in London, eating expensive ice cream, and watching the sun setting.

{ ** Footnote}

Hand In (progress reports):

Note that the Schedule calls for submission of two Progress Reports that describe: 1) your User Analysis & Task Analysis, and 2) your Rough Design.

Progress Report 1: Each Analysis may be up to 2 pages long (i.e., a total of 4 pages for the whole UA&TA). Provide the set of issues that you needed to consider in order to produce each Analysis, along with the answers.

Progress Report 2: The Rough Design must be clear, neat diagrams of the proposed interface, along with two other distinctly different alternative designs that you considered but rejected. Provide a Concept Scoring Matrix (from the "Models of Design" class) that supports your decision, along with associated explanatory notes. Note that all of the designs considered must be detailed enough so that the evaluation criteria used for the Concept Scoring Matrix can easily be applied. This Rough Design progress report should be no more than 10 pages long.

The cover page on these progress reports, and the final report, must include the names of the group members who participated with all their signatures. If it isn't signed, then you didn't contribute to it.

The material from these progress reports should be corrected & refined and included in the final submission.

Professional quality work is expected!

Hand In (final):

Hand in a printed document that includes your Task Analysis and User Analysis, and describes the complete Design Rationale for the interaction design, the screen design, and the icon design. There are many design decisions to be made, and a lot of rationale to provide.

The document must include the complete set of sbs for the system. Sbs showing both the initial and final screens are required: i.e., you must show the representation of the full sentence.

The sbs you hand in should show how the "writer" finds the icons s/he wants, selects them and arranges them for viewing. You do not need to include all the icon selection actions if the sequence is long, but it should be clear from those sbs you do provide how each will be done.

A system that can be used to build all possible sentences would need to offer very many icons for selection. We don't expect that your sbs will show anything other than the icons related in some way to the ones you need for the target sentence given above. However, it must be clear how additional icons would be organized, found and selected.

Also submit details of your attempt to calculate the Layout Uniformity metric for your interface, as well as one of: Visual Coherence, Task Visibility or Task Concordance. Descriptions of these usability metrics from Constantine & Lockwood's book "Software for Use" (ACM Press. 1999) will be given to you as a handout and the topic discussed in class.

Cite all sources of information and references used.

Mention the results of any user testing you may have done.

Submit one document per group. On the cover page, include everyone's names who contributed to the final report, with their signatures.

Professional quality work is expected!


In addition to what you hand in, your group will be expected to make a short presentation that shows your interface and justifies its design. See the Presentation Instructions for more information.

Concentrate on showing how your system works via the sbs. Use a computer or overhead slides. Provide some design rationale. There will be about 10 minutes per presentation.

Each presentation will be publically evaluated by the rest of the class, with questions asked after every presentation. Sample evaluation criteria are given below.

Some Evaluation Criteria:

  • Do the screen designs look attractive?
  • Is the use of the screen intuitive/natural?
  • Do the Icons show creativity?
  • Can you easily understand the "sentence"?
  • Could an African pygmy use the system successfully?
  • Would it work just as well if one were left handed?
  • Would it work just as well if one normally wrote from top to bottom, and right to left?
  • How well have all the design decisions been explained?
  • What if there were a vocabulary of 1000 words?

** Footnote:

     Hey, it could have been worse! 

     e.g., "If music be the food of love, play on."
           "Do not go gentle into that good night."
           "Who's on first?"
           "Oh no, not the Comfy Chair!"
           "Play it again Sam."
           "Hasta la vista, baby!"
           "Misery loves company."
           "Repetition is good."
           "Repetition is good."
           "Hey, it could have been worse!"
           {your favorite here}

[WPI] [CS] [CS3041]

dcb at cs wpi edu / Thu, 9 Mar 2017 13:23:15