CS5340 Human-Computer Interaction

Assignment #

Due Date

Description

I0

1/17, by 6pm

Please do the following:

1. Create a personal course webpage with a photo, your name and email address at the top and post it to a server somewhere. You will use this during the semester to post all of your individual homework assignments. You can organize this however you want, but make sure the instructor and TA can quickly find each week's work on the page. Send an email with your name, email, and the web address to the instructor and TA. (If you need to acquire server space to host your webpage see this page for obtaining a CCIS account and this page for setting up a website.)
2. Respond to the email you will receive with questions about your goals for the course.

I1

1/15, 1/17, by 6pm

Skim the research papers on health interfaces and CSCW, and think about project ideas for the course (see Team Assignment #1 for more details on the project). Come up with three different project ideas that you would be interested in working on for a team project, and write a 1 paragraph proposal for each, further fleshing out the idea. Specifically, indicate what health problems/challenges you are interested in addressing and the platforms you are interested in exploring (e.g., mobile, web, touchscreen). If you have initial ideas for a design concept, describe this as well. (Note that you will be doing extensive design ideation & iteration during the course and that your final system is likely to differ significantly from these initial ideas). Also note any programming language preferences you have.

What to Post

There are two parts to this assignment [15 points possible]:

• Part 1 [5 points]. Post your 1 paragraph proposal for each idea and your programming language preferences on the Piazza newsgroup under #projectbrainstormingideas (Do this by 1/15 6PM). Monitor the website and see how other students, the instructor, and the TA respond to your ideas. Comment on ideas from your peers.
• Part 2 [10 points]. Revise your ideas (or come up with new ones) based on the newsgroup feedback and post your three best ideas and write-ups and sketches on your web page in your order of preference (these will be used to help form project teams).

I2

1/31, by 6pm

Please refer to the instructions in Team Assignment #2.

I3

3/21, by 6pm

Remdedial Programming

If you're new to programming or not comfortable with it, you should begin working immediately on tutorials in your language of choice. If you are not sure what language to use, pick Java and start working your way through the Sun Java tutorial: Trails Covering the Basics.

Assignment

Find 2 examples of good user interface design, and 2 examples of bad user interface design.

Your examples should be specific. It's very hard to find a large interface that's completely good or completely bad, so don't try. Instead, focus on a particular feature(s) or aspect(s) of a user interface that makes your case. Avoid fuzzy words like "intuitive" and "user-friendly". Be as precise as possible about what makes it good or bad. For example, don't just say that it "looks professional." Explain what makes it look that way. Don't just say the interface "is confusing." Explain what specifically makes it so.

You aren't limited to desktop software. Web sites offer many great candidates for fame and shame. Mobile applications are also great options.

What to Post

Your report should include 2 good examples and 2 bad examples. For each example:

• provide a paragraph briefly describing what the application allows users to do (its overall purpose)
• provide screenshots that help illustrate your points (if screenshots are not possible, provide sketches)
• in a bullet list, provide 5 reasons why it's good or bad by making explicit reference to the "design rules" described in class (e.g., Nielsen and Norman's heuristics and rules; the design principles laid out in the DFAB book). Do not just list a design principle, rather use this principle to critique the system, providing your rationale for why you feel the system honors or violates the principle.
• for each of your 5 "bad design" critiques, speculate why it might have been designed that way, and suggest a better design

Your document needs to be well organized, easy to read, and free of typos.

I4

3/28, by 9pm

This is an in-class assignment.

In this assignment, you will do a heuristic evaluation of a computer prototype developed by your classmates. In class you will be assigned a team prototype to evaluate. You will be given the URL for your assigned team's website, where you will find instructions for running the prototype and background information about the project. This is not an anonymous evaluation, so feel free to contact a team directly if you need more information than you were given.

Follow the heuristic evaluation procedure to carefully evaluate the interface. Use Nielsen's 10 heuristic categories and/or Schneiderman's 8 Golden Rules of Interface Design to assess the usability of the interface. Make a numbered list of usability problems and successes you find. For each problem or positive comment, you should: describe the problem or positive feature, identify the relevant usability heuristics (from Nielsen's Ten Usability Heuristics) estimate the severity of problems (Cosmetic, Minor, Major, Catastrophe). You may use your notes and any course readings to assist you in your evaluation.

You are not required to recommend solutions for the problems, but any ideas you have would no doubt be appreciated.

Be thorough. You should have at least 10 useful comments (positive or negative) about the interface that you evaluate. Write your reports in a readable style. The usability of your report to its recipients will matter in your grade. In particular, don't bury the problems you found in reams of free-flowing prose. Where possible, include screenshots to illustrate your comments. In general, make your report easy to read and understand.

What to Post

At the end of class, email a PDF of your report to the appropriate team members and CC' Prof. Parker & the TA .

I5

4/11, by 6pm

Your mission in this exercise is to design the best interface you can to address the task described below. Employ the skills you have learned to date to develop the design for an interface. Your goal will be to conduct a user and task analysis, design a storyboard, and implement a test screen. Your UI should show that you have the ability to use basic GUI components in your language of choice.

The Task

You have just purchased a new bistro, which is one of the new hippest spots to socialize and eat in town. As part of the experience that makes the restaurant unique, it uses the latest and greatest technology. The previous owner ordered enough tablet computing devices so that each diner could have a tablet for electronic ordering and service during the meal. You goal is to figure out how to use these tablets to enhance the social dining experience.

In this assignment, you will do the following:

• Stakeholder analysis. Identify the various stakeholders that are relevant to this scenario. Who would the primary, secondary, tertiary, and facilitating user groups be? Briefly describe each user groups - what characteristics are relevant to the system you trying to develop?
• Task analysis. Brainstorm 3 tasks that restaurant patrons engage in. These tasks must be relevant to your focus for this assignment: designing a tablet application for electronic ordering & service. Analyze each task's characteristics, and answer at least 4 of the general questions about tasks we discussed in lecture (you answered these questions in T3, refer to that assignment and the Feb 7 lecture). Every task should have a goal, preconditions, and exceptions (what can go wrong). Do a hierarchical decomposition of the task, depicting in a diagram subtasks and plans.
• Storyboard. Develop a storyboard showing how users will use your system as they complete the three tasks you've identified. Be sure to include a short (1 sentence) caption beneath each illustration to provide context for what is depicted. Your storyboard should be neat and demonstrate what you've learned about storyboarding (e.g., that it's more than a set of screenshots but rather a depiction of the use of your system and the context of use.)
• Basic GUI. In your language of choice you will write a demonstration program with a basic GUI. This should be one or more screens of your interface. Your GUI must show features that support the 3 tasks you've identified in your task analysis (you do not need to implement any backend). Take care in your design of the GUI to ensure that it is aesthetically pleasing. Think carefully about how the UI elements are organized, arranged, and when/where they are presented to the user. This is all the instruction you will get. Design is an open-ended iterative process. You probably have questions about other details related to this broadly specified application. Make some educated guesses, and show your ideas to other people to elicit feedback. When you come up with a final solution, render it as convincingly as possible. A well-designed interface will include some consideration of the following principles (among others, refer to the graphic design readings):
  • Placing
  • Grouping
  • Emphasis
  • Color (we want this to be eye-catching but not overwhelming)
  • Typography (Serif, Sans Serif, or both?)
  You must use these GUI components:
  • Two Labels, one with an icon.
  • Two Buttons, one with an icon.
  • One ButtonGroup with at least 3 RadioButton options (with toggling between buttons functional).
  • Two CheckBoxes.
  • One ComboBox with at least two items.
  • One TextField One Panel with a titled border enclosing at least one other component.
  • One tool tip on one component.
  • One Menu with at least two options.

Important note: Your interface may not require all of these widgets. If that is the case, use the ones that you need and then create another screen that includes all the rest and shows you know how to implement them. You do not need to implement the actual operation of the interface, just show screens that clearly demonstrate that you know how to use the widgets.

What to Post

Post your report to blackboard and your GUI to your personal site.

Report. Your report should include the following parts (post on blackboard):

• Title: Give your application a title.
• Stakeholder & Task Analysis: Describe the stakeholders and tasks as discussed above.
• Storyboard: See above.
• The written portion of this assignment (User & task analysis) must be no more than 5 pages long (double-spaced, 1 inch margins, 12 point font, PDF format). Any text over 5 pages will not be graded.

Basic GUI program & instructions. On your personal site, post an executable or URL and instructions on how to run your GUI. It must be easy for us to run the software! If the software is too complex to run, it will not be graded.