Design project 1

Icon design

Aim and structure

This is an exercise in design which should be attempted towards the beginning of the course. It fits in well after the introductory part of the book has been covered (Chapters 1-3). The aim is to encourage students to think about some of the problems involved in providing clear, unambiguous interfaces, even to familiar applications. It also helps them to begin to evaluate designs critically. Students should be able to draw on their knowledge of human cognition and of interaction styles, but do not need to use any particular modelling or evaluation techniques. These will come later.

This two-part project should be attempted in groups.

First, each group should discuss the problem and try to reach a consensus on their designs. They can choose to draw upon their experience of other systems if they wish, although it should be pointed out that the developers of the new package do not wish to become engaged in law suits over copied designs! They should then sketch their designs as clearly as possible. It is easier if graph paper is available for this part.

Secondly, the group should display their designs and assess them and those of the other groups. This should be done critically but fairly - it is worth pointing out to students that their work is being assessed as well! They should identify what they believe to be good designs and, most importantly, the reasons why they are good.

Instructions for the students

You are part of a development team charged with producing a new drawing package. You have to develop the full set of icons. This is a new product and so there is no set house style. It is to appear on a new platform and so does not have to follow any particular set of user interface style guidelines. The platform usually supports colour on a high-resolution bitmapped monitor, but icons must be suitable for use on black and white as well as colour screens - design in black and white first, then add colour. Text can be used if required. Each icon needs an unselected and a selected state.

The following is a list of all the functionality required: you may choose a form other than an icon to provide the function but you should justify your choice.

• freehand draw with pencil
• freehand draw with paintbrush
• smoothed freehand drawing
• draw rectangular box
• draw round-edged box
• draw ellipse
• fill or shade items
• move or resize item
• write text
• draw irregular polygon
• draw straight lines
• draw arc
• scale object
• rotate object
• edit shape

Icons should be designed on 64x64 grids. Try to draw them as clearly as possible and use colour if required.

When you have completed your designs, display them, marking them clearly with their associated functionality. Now look at the designs produced by other groups. Try to assess them using the following questions to help you:

• is the meaning of the icon clear?
• is colour used sensibly and consistently?
• will the icon's meaning still be clear in black and white?
• what is the overall effect of the icons when viewed together?
• how original are the designs and is the originality effective or simply novelty for novelty's sake?

Discuss your assessment within your group and with other groups. How does your work compare to that of others? Make any adjustments you think necessary to your designs.

HCI 2e home page || changes and additions || resources || search || contents || authors || ordering
feedback to feedback@hcibook.com http://www.hcibook.com/hcibook/	designed and hosted by hiraeth mixed media webmaster@hiraeth.com