© De Montfort University, Design Process Howell Istance Department of Computer Science De Montfort University

© De Montfort University, 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, 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, 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, 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, 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, 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, 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, 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, Hierarchical and linear structure Hierarchical structure Linear structure

© De Montfort University, 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, 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, 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, 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, Example of a template (SiliconReport)

© De Montfort University, 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, Formatting recommendations split strings more than 6 alpha numerics into smaller groups (bad) (good) ABBA347686A2 ABBA A2 ABBA456388A3 ABBA A3 identical data should be presented in the same way even if varaitions in input format are tolerated Nov > 30/11/95 (for example) th nov 95

© De Montfort University, 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, Formatting recommendations numeric codes displayed with right justification lists of numeric with decimal points should be aligned around the point

© De Montfort University, 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, 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 ambiguity e.g. engine size(cc): [ ]

© De Montfort University, 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, Style guides and sources of design guidance Plenty of these…. Manufacturers Web-based style guides e.g Yale Style Manual – List of style guides –

© De Montfort University, 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, 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)