LAB 3: DESIGNING ICONS

[pdf version] 

EXTRA  RESOURCES

Link to directions for using Paint program and saving files.

GOALS

1. To gain first hand experience with visual representation by designing icons to convey specific functionality.

2. To explore the icon design criteria proposed by Aaron Marcus: consistency, clarity, simplicity, and distinctiveness.

OVERVIEW

In this lab, you will work in small groups of 3-4 to design icons that represent four functions.  As detailed below, you may choose to represent four functions that have to do with (a) manipulating text or (b) locating areas on a train.  Your designs should draw on the principles Aaron Marcus lays out in Chapter 3 of Graphic Design of Electronic Documents and User Interfaces.  In your designs, pay particular attention to the criteria of consistency, clarity, simplicity, and distinctiveness.

HOW TO PROCEED

1. Form a group with 3-4 people.

2. Choose one of the following design challenges:

A.      Imagine you are designing the icons for a new text-based application.  Design four icons to represent, respectively, the following four functions:  (1) remove a block of text; (2) copy a block of text; (3) show the user the text in temporary storage; and (4) insert a block of text.  While you may recognize the familiar labels of cut, copy, view the clipboard, and paste, your challenge here is to “think outside the box” and design fresh icons that are not tied to these terms or metaphor.  (Don’t be fooled – this sounds easy but it’s actually a very challenging design problem!)

B.       Imagine you are designing the signage for a new high-speed train to travel between Europe, Russia and into some parts of Asia.  Design four icons to represent, respectively, the following four areas: (1) baggage; (2) sleeping cars; (3) diapering station; and (4) dining.

3. Begin by sketching three different possible solutions with graph paper and colored pencils.  These should be quick sketches and take no more than 15 minutes to do all three.  The idea here is to get several ideas on the table before you settle on one to develop and refine.

4.  Evaluate your three possible solutions.  Identify the solution you like the best (as a group) as well as features from the other two solutions that you may wish to incorporate.  Revise your sketch of the chosen solution to reflect those features.

5. Using the paint program (see the attached sheet for how to use this software), create a refined version of your solution, paying close attention to consistency, clarity, simplicity, and distinctiveness of your designs.

6. If time allows during lab, each group will have a minute or two to present its design to the class.

7. After lab:  Show your icon designs to five individuals.  You may tell the individuals the context of your icons (e.g., text application or signage in a train) but no more.  Ask each person to describe to you the function/information he or she associates with each of your icons.  How well do your icons do?

8. Prepare a 1-2 page write-up of (a) how the design principles apply to your icons, and (b) the results of your user testing.

WHAT TO TURN IN AT THE BEGINNING OF LAB NEXT WEEK

Put a copy of your design in the ‘Temporary Folders’ directory as explained on the “Using Paint” handout.  Turn in a hard copy of your initial three sketches on graph paper and your 1-2 page write-up about design principles and the results of your user testing.  Be sure to clearly label your work with all the members of your group.