© De Montfort University, 2001 1

Design Process

Howell Istance

Department of Computer Science

De Montfort University

© De Montfort University, 2001 2

Task or information focus?

• In many web-based applications, the user’s primary task is often to find information of interest.

• Main design objective is – To define ‘content’( ie information) that is relevant

– To present this information in a manner appropriate to the user group and their needs

– To provide a means of navigating around pages of information, such that the user knows where they are in the information ‘space’

• Structure is determined by the information

© De Montfort University, 2001 3

Task or information focus?

• In tool-based applications (such as databases), the variety of user tasks is usually much greater

• It is often appropriate to structure the application around specific tasks by providing screens or pages where the user carries out groups of related tasks and where information needed for those tasks is presented or directly accessible.

• Some toolbased applications (such as wordprocessors) using ‘anything, anytime’ provide the user with a view or views on the object created (such as a document) and provide access to all the commands or actions to change the object

© De Montfort University, 2001 4

Stage 1: define content

• Content definition– Brainstorm to identify areas of information and how these are

related (build a ‘concept map’)

– plan for growth and the addition of new material so that this can fit into the existing structure, otherwise there is a danger that the site structure will need to be changed to accommodate new information

• Identify natural structure of the information– people looking for information make inspired ‘guesses’ about

which link to follow based on what they see at the interface - grouping information in a logical or ‘natural’ way increases the likelihood that users will guess their way correctly to where information will be found

• Identify user tasks

© De Montfort University, 2001 5

Stage 1: define content

• Content definition

• Identify natural structure of the information

• Identify user tasks– define what tasks users will use a site for, what information they

will need in order to complete the task and what sequence activities will be carried out in.

– Define what input actions the user will make

– Define what feedback from the system will be provided in response to each input action

© De Montfort University, 2001 6

Stage 2: define structure

• Choose a dialogue style appropriate to user group• Define how information and tasks will be structured into

one or more pages or screens– Should reflect natural and task-based structure– Produce a paper-based storyboard

• Define a navigation scheme showing how pages or screens are linked– based on information structure and knowledge of the order in

which activities are likely to be carried out– often a combination of a hierarchical structure and a linear

structure– Draw a structure chart

© De Montfort University, 2001 7

Example of structure

• Tasks for a rail-enquiry system

• Inform user of services available from application

• User enters required journey details

• System provides list of railservices meeting user requirements

• User selects one journey to view details

• User selects other information associated with journey

© De Montfort University, 2001 8

Structure of journey enquiry task

Inform user of services available from application

enter required journey details

list of railservices meeting user requirements

view one journey details

view other journey information

© De Montfort University, 2001 9

Example of simple structure

Inform user of services available from application

enter required journey details

list of railservices meeting user requirements

view one journey details

view other journey information

Change details

Change selection

Select information

© De Montfort University, 2001 10

Hierarchical and linear structure

• Hierarchical structure • Linear structure

© De Montfort University, 2001 11

Combined Hierarchical and linear structure

• Used where more than one ‘page’ or screen is needed to contain information or tasks related to the same thing at a particular place in the hierarchy

• Easy to see how one can get ‘lost’ in information space

© De Montfort University, 2001 12

Navigation around structure

• At any point in information space, user needs to know:– Where can I go from here?

– How can I get back to where I have just come from?

– How can I get back to where I started?

• The structure of the application or site has to be conveyed to the user and the means of how to move around the space has to be clear

• Consistency of behaviour and location of navigation devices is important.

• Also have to avoid too many branches which can confuse or clutter

© De Montfort University, 2001 13

Stage 3: Design user support

• Determine what level of help and error handling will be provided

• In simple applications, explicit help should not be necessary and well designed on-screen instructions should be sufficient

• In other applications, providing additional help requires careful design

• define appropriate help provision

• define error messages, if needed

• define additional training support

© De Montfort University, 2001 14

Stage 4: Produce a layout template

• The layout of objects (buttons, menus, application data, instructions, error messages and other feedback) should be consistent across screens

• The use of graphical elements (colours, fonts, graphics) should be consistent

• Produce a generic screen layout showing location of elements common across screens and use of typographic elements

• Effectively defines the ‘style’ of the application• Plenty of style guides available with generic advice• Design the template on paper then on machine

© De Montfort University, 2001 15

Example of a template (SiliconReport)

© De Montfort University, 2001 16

Functional Objectives with Screen Layout

• arrange items on screen to give highest probability of elicting an acceptable level of human performance

• the user will be able– extract information she is seeking

– identify related groups of information

– distinguish exceptional items (warnings and error messages)

– determine what action is necessary

© De Montfort University, 2001 17

Formatting recommendations

• split strings more than 6 alpha numerics into smaller groups

(bad) (good)

ABBA347686A2 ABBA 347686 A2

ABBA456388A3 ABBA 456388 A3

• identical data should be presented in the same way even if varaitions in input format are tolerated

30 11 95

30 Nov 1995 -> 30/11/95 (for example)

30 11 1995

30th nov 95

© De Montfort University, 2001 18

Formatting recommendations

• data should be presented in full version even if abbreviated input allowed, provide feedback to user

Party:[ ]

Party:[ ch,cai] Chemical Bank, Cairo

© De Montfort University, 2001 19

Formatting recommendations

• numeric codes displayed with right justification47321 47321

539 539

67 67

482645 482645

• lists of numeric with decimal points should be aligned around the point

34.723

43.908

2341.5

© De Montfort University, 2001 20

Labeling in screen design

• descriptive title or phrase adjacent to a group of related items or information

• ensure labels are meaningful to the user

• labelling should be visually distinct from the data

• data labelling should not be able to be confused with help messages or command descriptions

© De Montfort University, 2001 21

Labeling in screen design

• use consistent relationship between labels and data being described

e.g. above and left justified

Name:

[ ]

• include units in label to reduce ambiguitye.g. engine size(cc):

[ ]

© De Montfort University, 2001 22

Aesthetic issues

• Visual language - visual characteristics of a set of objects (point, line, plane, volume) and the way in which they are related to each other (balance, rhythms, structure, proportion)

• Design is valued for its fitness to a particular user and task, design aesthetic is always related to the intended function of the resulting product

• 3 design themes– Elegance and Simplicity

– Scale, Contrast and Proportion

– Organisation and Visual Structure

© De Montfort University, 2001 23

Style guides and sources of design guidance

• Plenty of these….

• Manufacturers

• Web-based style guides e.g Yale Style Manual– http://info.med.yale.edu/caim/manual/index.html

• List of style guides– http://www.indiana.edu/~iirg/REFERENCES/guidelines.html

© De Montfort University, 2001 24

Stage 5: Map content to screens/pages

• We have defined content (stage 1) and structure (stage 2)

• We have defined a generic look and feel for the pages or screens in the form of a template (stage 4), as well as defining appropriate user support (stage 3)

• We can now build individual screens or pages and link these together into the structure we have defined

• In some cases they may be too much or too little content for one page/screen. Options..– (too much) – split content over several screens (linear structure)

– (too little) – combine pages

– Leave alone

© De Montfort University, 2001 25

Stage 6 – Evaluate prototype

• Once the individual screens have been constructed then a machine prototype can be built using a tool such as Visual Basic or Director

• Apply procedures for evaluation (covered in their own lectures)