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

2. © De Montfort University, 20012 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

3. © De Montfort University, 20013 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

4. © De Montfort University, 20014 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

5. © De Montfort University, 20015 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

6. © De Montfort University, 20016 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

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

8. © De Montfort University, 20018 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

9. © De Montfort University, 20019 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

10. © De Montfort University, 200110 Hierarchical and linear structure Hierarchical structure Linear structure

11. © De Montfort University, 200111 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

12. © De Montfort University, 200112 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

13. © De Montfort University, 200113 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

14. © De Montfort University, 200114 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

15. © De Montfort University, 200115 Example of a template (SiliconReport)

16. © De Montfort University, 200116 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

17. © De Montfort University, 200117 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

18. © De Montfort University, 200118 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

19. © De Montfort University, 200119 Formatting recommendations numeric codes displayed with right justification 47321 539 67 482645 lists of numeric with decimal points should be aligned around the point 34.723 43.908 2341.5

20. © De Montfort University, 200120 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

21. © De Montfort University, 200121 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): [ ]

22. © De Montfort University, 200122 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

23. © De Montfort University, 200123 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.htmlhttp://www.indiana.edu/~iirg/REFERENCES/guidelines.html

24. © De Montfort University, 200124 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

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