Usability for a Self-monitoring Health Solution- a Case Study on WebDANTE Hemma Patel Computing for Business (Industry) Session (2009/2010)

Transcription

1 Usability for a Self-monitoring Health Solution- a Case Study on WebDANTE Hemma Patel Computing for Business (Industry) Session (2009/2010) The candidate confirms that the work submitted is their own and the appropriate credit has been given where reference has been made to the work of others. I understand that failure to attribute material which is obtained from another source may be considered as plagiarism. (Signature of student)

2 Summary WebDANTE is a web based application that allows users to monitor their diets by recording food logs into the system. The application is part of the Mobile Health Project that has been developed by researchers at the University of Leeds. Currently, WebDANTE is running as a pilot and requires feedback on the site. This project report provides feedback by investigating how useful the system is in terms of usability and utility, through requirements gathering and a detailed evaluation. Following this evaluation, the design for a second version is produced. A suitable methodology was chosen to provide a structured approach in completing this project and ensuring that the relevant stages were applied to reach the solution. [i]

3 Acknowledgements I would like to thank my supervisor Lydia Lau for the constant help and support she has provided, and for the constructive comments throughout the project. I would also like to give credit to Alison Marshall, owner of WebDANTE who let me use this application as the case study for my project and for giving up time to assist in evaluations and provide the information necessary to complete this project. Finally I would like to thank those involved with the evaluation of WebDANTE and of the designs for a second version the feedback received was very valuable. [ii]

4 Table of Contents Chapter 1 Introduction Project Motivation & Challenge Aim & Objectives Minimum Requirements Possible Further Enhancements Project Approach & Schedule Report Structure Chapter 2 Background Research Background to WebDANTE What is WebDANTE? How it helps in Self monitoring health Comparison with Similar Applications Evaluation of Usefulness Evaluation Techniques Prototyping Chapter 3 Analysis The Stakeholders Requirements Refinement Requirements Analysis Use Case Diagram Requirements Specification Chapter 4 HCI Evaluation of WebDANTE v Current Architecture Presentation Tier for WebDANTE v [iii]

5 4.2. Evaluation of Current System Chapter 5 Re-design of WebDANTE Introduction Design Iteration 1 Paper Based Sketches Evaluation Focus Group Iteration Storyboard Designs Evaluation Walkthrough Inspection Re-design Specification Changes to Presentation Layer Changes to Business Logic Changes to Data Tier Chapter 6 Evaluation Evaluation of Solution Evaluation against Similar Applications (Post-design) Evaluation Techniques Used Effectiveness of Chosen Design Methodology Project Evaluation Meeting Objectives Time Management & Project Schedule Chapter 7 Conclusion Main Achievements Future Developments References [iv]

6 APPENDIX A Personal Reflection.. 52 APPENDIX B Project Schedules 53 APPENDIX C MobileDANTE Database Structure.. 55 APPENDIX D- Briefing Sheet for Evaluation APPENDIX E Evaluation Form for WebDANTE v APPENDIX F Design (Paper Sketches). 67 APPENDIX G User Feedback of Focus Group. 70 APPENDIX H Storyboard Design APPENDIX I Evaluation of Iteration 2 Feedback APPENDIX J Design Specification 78 [v]

7 Chapter 1 Introduction 1.1. Project Motivation & Challenges There has been an increase in the use of self monitoring applications to help improve health care. In order for such applications to work effectively, usability and utility are important issues to consider, which is where this project begins. Using WebDANTE as the case study [University of Leeds, 2009], as it is currently a prototype- and has not yet been evaluated in terms of usability and utility- this project will evaluate the application to test how useful it is. The outcome of the evaluation will be used to inform the design for a second prototype (WebDANTE v.2) in order to improve the application further. Motivation for this project is the opportunity to get involved with a current development being undertaken by researchers in the University of Leeds and to build on knowledge attained from University modules. This project will extend on aspects of modules in Human-Computer Interaction (HCI) and Business Information Systems. HCI involved looking at human centred approaches and usability of systems whilst Business Information Systems supports the project in terms of systems development from requirements gathering through to the design, and also more recent lectures on prototyping and evaluation techniques Aim and Objectives The aim of this project is to investigate the usability and utility of WebDANTE, through evaluation of the current system which will then lead to the design of a second prototype, thus improving the system in terms of usability. The project objectives are to: Further the understanding on the requirements of WebDANTE and conduct an evaluation of the usability and utility of this original system against the requirements. Use the evaluation to design a new prototype of WebDANTE. Present the design for WebDANTE v.2 to the owner & developer to help them in the development of a second prototype. [1]

8 1.3. Minimum Requirements By the end of the project, the following minimum requirements will be fulfilled: To produce a list of requirements to use as evaluation criteria for WebDANTE To produce a design specification for the presentation tier of the system for developers Storyboard a prototype of the re-design 1.4. Possible Further Enhancements Further enhancements that could be made to this project are: To look at the design for the data tier (structure of system) to inform developers of how to implement the features. Evaluation against similar self monitoring applications to compare whether the new design for WebDANTE is on the same level as these other systems Project Approach and Schedule A methodology is a documented procedure taken in a project for one or more phases of the software lifecycle, to provide structure [Howe, 1995]. It is important to apply a methodology so that the project can be managed more efficiently and on time. Since the main focus of this project is to look at the usefulness of WebDANTE which is already an existing prototype, usability aspects must be considered in the development process. The development process is the different stages taken to complete the project based on the methodology applied. The project also requires a development approach that repeats the processes of design through prototyping. The decision has therefore been made to use aspects from the usability engineering lifecycle and the ISO standard related to this. Usability Engineering Lifecycle Usability is a key aspect in the design of a second prototype of WebDANTE, thus the usability engineering life cycle model (proposed by Mayhew, 1999) will be used a guide for this project. This model looks at quality of design at each stage and includes 3 main stages [Nielsen, 1993]: 1. Pre-design [2]

9 This first stage aims at understanding the users and their tasks. This involves evaluating the usability of the existing system and looking at how users currently carry out tasks. Analysing similar products can also help to identify usability problems with these systems. 2. Design This phase focuses on designing a prototype that is suitable for implementation. This includes iterative design and producing several designs with feedback provided by representative users in each step. The prototype designs gradually move from low-fidelity to high-fidelity as you come closer to the final design. 3. Post- design The post-design stage involves collecting feedback on the systems use after implementation to fix any immediate problems. This usability lifecycle will provide guidance for the development of this project with relevance to the pre-design and design stages. The current prototype of WebDANTE will form the basis for the redesign. The implementation for WebDANTE v.2 will not be carried out by the project author the design specification will be passed on to the developers of the current system. ISO is an international standard which provides guidance on human centred design activities throughout the development lifecycle [Sharp, Rogers & Preece, 2006]. The standard specifies 4 design activities as being important in system development: 1. To understand and specify the context of use 2. Specify the user and organisational requirements 3. To produce design solutions 4. To evaluate the designs against requirements The lifecycle model for this standard should repeat until the design meets the system requirements. This standard will provide general guidance in relation to the usability engineering lifecycle on the steps required to reach the desired solution. By drawing upon aspects from these lifecycle models, the project should be completed successfully providing an appropriate schedule is followed. This project will be split into the following stages: 1. Requirements gathering 2. Evaluate the existing system (WebDANTE v.1) 3. Produce design prototypes (iteration 1) [3]

10 4. Evaluate the design 5. Design iteration 2 6. Evaluate solution (against requirements) 7. Produce the design specification for developers Schedule A schedule was implemented in the form of a Gantt chart, helping to set a time scale for each section of the project and project deadlines. The chart breaks down the project into sections, based on the chosen methodology, and will aid in ensuring the project is completed on time. The focus in the first semester was on the system requirements and background research providing a basis for the evaluation and design in the second semester. Appendix B1 displays the initial project schedule and the planned completion dates. However due to stages of the project being revised the schedule was amended. Appendix B2 shows the revised schedule 1.6. Report Structure My report will take the following structure: Chapter 2 provides an overview of WebDANTE, highlighting how it helps in self monitoring health and comparing this application to similar applications that focus on monitoring health. Research into usability and user experience and the evaluation techniques considered for this project will also be discussed here. Chapter 3 is an analysis of the current system and its stakeholders. A detailed requirements analysis is done to produce a list of requirements that will be used to evaluate WebDANTE v.1. Chapter 4 provides an evaluation of the current prototype of WebDANTE. It includes an analysis of the systems architecture and the navigational hierarchy to get a better understanding of the current system. This is followed by the evaluation of the system which will form the basis for chapter 5. Chapter 5 presents the design for a second prototype of WebDANTE, with two iterations and review phases to evaluate the design and make amendments accordingly. This chapter will also re-assess the architecture for the new prototype. Chapter 6 provides an evaluation of the solution including a discussion of future work, project limitations, and the effectiveness of the project approach taken. [4]

11 Chapter 2 Background Research 2.1. Background to WebDANTE What is WebDANTE? The case study used in this project is WebDANTE [University of Leeds, 2009], an online application that allows users to monitor their health by keeping records of their diet. Its purpose is to allow users to enter diet records through the system or via their mobile phone easily and quickly, and to allow feedback to be provided by health supervisors. The current prototype of WebDANTE has been developed by a team in the University of Leeds led by Alison Marshall. The project involves people within the School of Computing and researchers in the University of Leeds epidemiology department. WebDANTE is part of the Mobile Health Project and is the companion website to MobileDANTE, the mobile food dietary monitor which allows nutritional content to be monitored through a stored database. The system is currently running as a pilot to allow improvements to be made before the system goes live. The aim of this project is to evaluate the current system and produce the design for a second version How it helps in self-monitoring health People on strict diets such as those with chronic illnesses need to keep records but this can become difficult for example when they are at work or out. The rise of mobile phones and applications are expanding [Katz et al, 2005] and it is important to see how effective such applications are in self monitoring health. Phones and applications can help users to store health information and share with professionals for feedback. Data entered using such applications can be transferred easily and quickly enhancing the ability of self monitoring health by enabling real time feedback [Lefebvre, 2008]. Future studies need to identify whether certain delivery devices are more appropriate for different health behaviours and how care can benefit from patients use of portable devices [Revere & Dunbar, 2001]. Bielli et al found in a study, that the use of mobile phones for health reporting was successful for 58%; with the remaining percent being those who were less educated or older [Katz et al, 2005]. WebDANTE is a new development that addresses the demand of using applications to self monitor health more efficiently by allowing users to enter data easily into the system and share this information with professionals for feedback. [5]

12 Comparison with Similar Applications There are already some existing applications that help people to change their diet through self monitoring. A previous study, carried out to develop and test a real time diet monitoring and feedback system, showed a significant increase in self monitoring of diets as the system enabled immediate feedback and accurate self monitoring [Glanz et al. 2006]. The study involved patients trialling the device and providing feedback; and the strengths highlighted were the amount of feedback received. The study allowed designers to receive feedback and make changes to the prototype. The project on WebDANTE is following a similar process involving an evaluation of the current prototype followed by the re-design based on the feedback received. FoodFocus (2007) and MyFoodDiary (2010) are two online food diary applications similar to WebDANTE. A quick comparison of WebDANTE with these applications (Table 2.1) will offer an insight into what features are missing from WebDANTE that could help in improving it. Food Focus My Food Diary WebDANTE v.1 Mobile Food Diary Search food database Personal Assessment Profile -Personal Goals Food Log -Manual Food Log Entry -Create Meals -My Favourites -Reciple Builder -Personal Notes -Calendar Exercise Log -Motivational Charts Reports Forum Help Guide/FAQs Body log Table 2.1: Comparison of WebDANTE v.1 against other applications [6]

13 Table 2.1 shows that Food Focus is well established and incorporates many different features that enhance the user experience. An important feature which WebDANTE lacks is a help guide which is a particularly important feature in helping users utilise the system more effectively. Another important feature is the personal assessment function which measures the user s BMI and provides guidance for the user based on this information. My Food Diary allows users to monitor their health in a similar way to WebDANTE. The main tools on this application are the food diary, an exercise log, reports (which provide feedback) and a weight loss forum that helps users to interact. The forum in particular is a function that could help improve WebDANTE by allowing interaction between users, and the reports would allow feedback to be received through the system, something which is not currently present on WebDANTE but is important in enhancing the experience for users. It is apparent from table 2.1 that the current version of WebDANTE lacks some of the important features such as a help guide. The analytical evaluation (section 4.2) will provide further analysis and help to identify which of these limitations shown in table 2.1 need to be addressed in the design of the second version. The design of the new prototype will consider some of the aspects from Food Focus and My Food Diary to help improve the system in terms of usefulness and user experience. A further comparison against these applications will be done after the re-design of WebDANTE (See Chapter 6.1.1) to evaluate the new prototype and see how it measures against these Evaluation of Usefulness First we consider the issue of system acceptability. This is whether the system is good enough to meet the user needs and requirements. To determine this we look at social and practical acceptability. Social acceptability looks at the extent to which the system improves quality of life for the users. We have already established that the purpose of WebDANTE is to improve the methods of monitoring diets for users with chronic illnesses, thus the system is helping to improve health care. Practical acceptability considers several factors including usefulness [Nielsen, 1993]. Usefulness focuses on whether the system can be used to achieve the goals set. It includes both usability (how well users can use the system), and utility which ensures that the functions of the system can do what is required. Usability is an important issue that should be considered during the design of the user interface. According to Bevan & Macleod (1994), difficult to use software wastes the user s time, causes worry and frustration and discourages further use of the software [Smith, 1997]. The interface [7]

14 should allow for easy learning and daily processes to be recorded more efficiently using this application. Usability is regarded as ensuring products are easy to use and learn. [Lindgaard, 1994] suggested 4 dimensions to usability: Effectiveness how good is the system at achieving what is required? Flexibility the variation in methods of task completion using the system. Learnability how easy it is to learn and use the system and how long it takes to learn the functionality. Attitude how easily the user accepts the system. User Experience As well as the functionality of a system, it is also important to consider user experience. User experience focuses on the overall experience and satisfaction a user has when using a system. This experience is important so users can enjoying and easily use all the functions of the system [DesignMess, 2009]. The aim of creating a good user experience is to improve efficiency so that users can work quickly with few errors. It is often hard to distinguish between usability and user experience but both need to be considered in the design. Aspects of user experience such as the look and feel are linked with how usable the system is. The look includes aesthetics (aspects such as colour and styles) whereas feel aspects consider menu structures, shortcuts, mouse mappings [IBM, 2000]. To create a good user experience, it is important to take into account different factors such as visibility, feedback, constraints, consistency and affordances [Sharp, Rogers & Preece, 2007]. Visibility Visible functions enable users to know what to do next more easily. Feedback Receiving feedback when actions have been carried out so user can see confirmation and continue with activity. Constraints Restricting interactions to reduce errors, such as the use of inactive fields to prevent users from selecting incorrect options. Consistency Interface should be consistent in design and use similar elements for similar tasks. Affordance Design objects so that it is obvious to users how they should use it (e.g. clicking, buttons etc). In order to account for user experience, the designer should take account of user needs and site objectives, content requirements and functional specification, information architecture, visual design and interface design [Garrett, 2003]. Information Architecture is a key aspect in designing user [8]

15 experience. It looks at how the data is structured and the user interactions within the system. Organising the data in a structured way improves the overall usability of the system, therefore leading to an enhanced user experience. User Experience is important to get users to continue using the system and enjoy using the features on it. Therefore it is particularly important for a self monitoring application such as WebDANTE, whose purpose is to make self monitoring health easy and enjoyable so that users make use of the system regularly and are able to keep record of their diet more efficiently. User experience improves the overall usability of the system and this is why there is an increased focus on user experience when designing a new product or system. Personalisation is an important aspect of user experience. It focuses on individual user needs by modifying content to suit individual preferences. Customisation is a method of personalisation that gives users the choice to change aspects of the system to suit their interests [Mohanty & Jagatram, 2008]. An advantage of this is that customisation makes the system much easier to use enhancing the experience for the user. The design for the second prototype will consider aspects of customisation as part of the focus on user experience Evaluation Techniques To test how usable the current system is, an evaluation needs to be carried out. This evaluation is important as it will lead to the design of a new prototype. In order to carry out an evaluation, there should be a list of requirements as criteria to evaluate against [Rubin, 1994]. Chapter 3 discusses the requirements specification for the system. Based on the development methodology chosen, this project will involve multiple stages of evaluation. As the design is developing on an existing system, the initial evaluation will focus on this current working prototype in order to improve the design to meet usability goals. This evaluation will help to amend problems before the application is released. Three common evaluation approaches are: Usability Testing this approach involves measuring user performance on tasks and is carried out in a test environment which the evaluator controls. Field Studies Evaluation is carried out in natural settings to identify problems and establish requirements for the design. [9]

16 Analytical Evaluation This involves 2 categories; inspection method (which includes Heuristic evaluation and walkthroughs) and theoretically based models. The approach chosen for the initial evaluation of the current system is analytical evaluation using inspection methods. This approach helps to see how well users can use the system and helps identify problems found in the interface [Sharp, Rogers & Preece, 2007]. A combination of heuristic evaluation and walkthroughs will be used to identify the usability problems of the current prototype. Walkthrough method involves experts walking through a scenario whilst noting down problems as they progress through each step. This method helps to evaluate for ease of learning, which is a dimension of usability. Heuristic evaluation helps to recognise problems in the design [Nielsen, 1994]. This technique involves evaluating aspects of the interface against a set of usability principles known as heuristics. Again, these heuristics assess the application in terms of usefulness. Jakob Nielsen developed a set of heuristics to use in system evaluation: Visibility of system status Match between system and real world (i.e. speak the users language) User control and freedom Consistency and standards Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic design Help users recognise and recover from errors Help and documentation Some of these heuristics will be adapted to fit the prototype being evaluated and used as guidelines to evaluate against. A limitation with these inspection methods are that there are no users involved so it may be difficult to predict how a typical user would act. There is also the problem of heuristics causing trivial problems to be noted. [10]

17 Further evaluation will also be carried out during the design of the new prototype, to receive feedback on the designs and enable improvements to be made. For these evaluations, a mixture of approaches will be employed including the data gathering technique of a focus group and a further walkthrough technique: Focus Group Focus groups are used to interview a group of people together and allows for discussion to take place between the participants. The advantage of this is that issues can be made aware to all participants and discussion can lead to further evaluation. An initial agenda may be set to lead the session but focus groups allow more unstructured discussion to take place and any further issues not listed in the agenda can be noted. The feedback from the session can then be used to modify the next design iteration Prototyping Creating a prototype allows stakeholders to interact with a product to investigate its use and test aspects of the products functionality [Sharp, Rogers & Preece. 2007]. Prototypes open up new ideas and allow for feedback and changes to be made. Prototyping can be achieved through low-fidelity prototypes or high-fidelity prototyping. Low-fidelity Prototyping Low-fidelity prototypes do not look like the final product and are usually paper or cardboard based. The advantage of developing a low-fidelity prototype is that it is cheap, simple and quick thus enabling it to be modified easily. This type of prototype is ideal for expanding on ideas and a method often used to present low-fidelity prototypes are storyboards which use scenarios and show a series of sketches to complete a task. High-fidelity Prototyping High-fidelity prototypes use materials that may be used in the final product, allowing stakeholders to get a better sense of the final system. There are different methods of high-fidelity prototyping such as using software to build a prototype. However problems with this are that it takes longer and may be frustrating to change too much. This project involves more than one design iteration and it has been decided that the first design will involve low-fidelity prototypes by creating sketches for the new design. This will then be evaluated and the design will be further enhanced using PowerPoint. This has characteristics of high and low fidelity as it combines the idea of paper-based mock-ups with the appearance of software prototypes. As there is already an existing prototype of WebDANTE, using PowerPoint is more straightforward as the appearance of the system can be captured easily. [11]

18 Chapter 3 Analysis 3.1. Stakeholders Before gathering the requirements for WebDANTE, it is important to identify the stakeholders so that a detailed analysis can be achieved. There are several classes of stakeholders involved with Web DANTE and the system should ensure that it meets the needs of all the these groups, as the requirements for one group of stakeholders may be different to another: Owner The owner of the system will be involved throughout the project from the initial stages through to the design of a second prototype. They will be consulted on how the system will be developed. The owner will manage the day-to-day running of the system but is not required to use the system, bar the occasional use to keep track of how it is running. Developers The development team is responsible for implementing the system. They need to be informed of any changes that need to be made and also must be aware of the requirements of the system in order to develop the application accordingly. The developers may occasionally use the system to carry out tests or make changes if necessary. Patients Patients with chronic illnesses that need to monitor their health (e.g. obesity). These are the primary users of the system as they will be using it on a regular basis to enter and keep records of their diet. Health Supervisors (Dieticians) The health supervisors are another group of primary users who will be using WebDANTE frequently to monitor the diets of patients and provide feedback. Health Professionals These are the nutritional epidemiologists who do not use the system but will help in planning diets for patients and will be interested in data collection. These are tertiary users of the system as they will be affected by the introduction of WebDANTE. [12]

19 From this stakeholder analysis, it is necessary for all stakeholders to be aware of the new design. However the main focus in this project is on the patients and health supervisors, and the requirements gathered will be specified to these user needs as these groups are the main users of the system. These users will vary in terms of their expertise and experience from novice users to expert users [Sharp, Rogers & Preece, 2007]. The other stakeholders (owner, developers and health professionals) are not actual users of the system but are still involved with WebDANTE and the development of it Requirements Refinement WebDANTE started with some high level objectives and assumptions of the system requirements which lead to the development of prototype 1. This project started at this point, to review prototype 1 in order to design a second prototype. It emerged that a more detailed understanding of requirements is needed to produce a new design. There are different types of requirements that can be gathered such as functional requirements which look at what the system should do and non functional requirements which look at constraints on the system and its development [Sharp, Rogers & Preece, 2007]. The requirements gathering for the design of the new prototype will focus on both of these. An initial meeting with the owner of WebDANTE revealed that a set of user requirements had already been created for prototype 1. These were established by the owner of WebDANTE after discussion with the health professionals regarding the initial proposal of the system. The user requirements for the existing version of WebDANTE are to: 1. Enable individuals to monitor/obtain real time feedback on dietary intake 2. Enable dieticians/health professionals to view remotely, individual users diets and hence provide more detailed guidance. 3. Enable epidemiologists to collect dietary data more efficiently. These objectives are quite basic and do not specify what the system should be required to do, hence a further round of requirements gathering was seen essential for this project, to aid the design of the new prototype. There are several methods of data gathering and research and brainstorming with the owner were applied to gather data to produce a set of requirements. Brainstorming This method of data gathering allows interaction with stakeholders to get an in-depth understanding of the system requirements [Bocij, P et al. 2006]. This analysis technique was carried out with the owner [13]

20 and a developer of WebDANTE. Although these users won t be using the system directly, the owner provided essential information on what the system is required to do and was aware of the health supervisors requirements, whilst the developer was able to give important input on how the system can be developed and any constraints that need to be noted to gather the requirements. The session enabled the current system processes to be evaluated to find out what already existed. Research Bocij, P et. al. suggest a method of data gathering is through gathering information on existing systems [Bocij,P et al. 2006], which in this case is the current system of WebDANTE and other similar self monitoring health applications (See 2.1.3). By researching similar applications in self monitoring health and gathering data on WebDANTE v.1, information on system processes and requirements can be collected. In addition to this, the existing user requirements for WebDANTE were considered as they form the basis for the new, detailed set of requirements. These methods provided sufficient data to be gathered in determining a new set of requirements Requirements Analysis The information acquired from the requirements gathering should be analysed to produce a list of requirements that can then be used to evaluate the current system and design the new prototype. As the aim of the project is to investigate WebDANTE in terms of usability and utility, it is necessary to also consider usability and utility goals and ensure that appropriate requirements are produced that meet these goals Use Case Diagram Use case diagrams help to show the functionality of WebDANTE, by presenting the different actions between the user and the system [Sharp, Rogers & Preece, 2007]. They define the requirements of the system being modelled and help stakeholders to understand the system processes. As there is more than one user group for WebDANTE, a use case diagram will allow us to define which actions are carried out by which user. The use case (figure 3.1) was created to help recognise the current processes of the system in order to identify what is missing from this prototype and thus what functions the new system should be able to perform. The diagram was shown to the owner of the system to better represent the system characteristics and aid in defining a more detailed set of requirements for the new prototype. [14]

21 Figure 3.1: Use Case diagram showing the current processes of WebDANTE Requirements Specification Based on the requirements analysis, a list of requirements was developed. The requirements are an extension on the initial user requirements for prototype 1 and are developed from the processes described above. These requirements will be used as evaluation criteria to evaluate the current system and the new design will be evaluated against these requirements to ensure they are all met. Requirements: 1. Enable individuals to monitor/obtain real time feedback on dietary intake Allow individuals to search for foods easily using the search function by typing in exact text matches for the word or part of the word to make options visible. Use a database of validated foods to make it easier to enter specific foods and to keep entries consistent without confusion. Allow food that is regularly entered into food logs to appear in my favourites so that it saves time in searching the database every time the user enters data. Allow the user to select from a choice of portion sizes for each food item, based on standard practice, to aid the user in estimating quantities. [15]

22 Allow the user to override the standard portion size choices by entering an exact amount in grams. Enable users to search through their food logs using the calendar to review past entries for self monitoring and allow them to edit/delete entries. Review diet daily summary details such as intake of protein, calories, carbohydrates, etc., compared to guideline daily amounts (GDAs) consumed to help monitor and amend diet should they need to. To enter food log giving portions and date and time of meal so that it can be stored and remembered for later use. Allow users to log into their own profile with a user name and password to keep data secure and confidential so that only their dietician can review their profile if they wish. To make the interface simple and easy to use by clear tabs and entry functions so that is efficient for patient to easily enter and monitor their health. Provide guide/instructions to help novice users in using the site effectively. Enable the user to maintain a food blog by data entry by SMS, MMS or manual entry, including text and pictures. Enable the user to manually transfer details from the food blog to the food log database through a simple split screen. Enable the user to update personal information, including GDAs, physiological information and personal data. 2. Enable dieticians/ health professionals to view remotely, individuals users diets and hence provide more detailed guidance Create higher level of users (super-users or administrators) who can view a group of individual users. Allow dieticians/health professionals to select individual users and view their food logs regularly and easily without personal meetings and thus enabling them to provide feedback & guidance more often. Allow individual users to share their food blogs with super-users if they wish. [16]

23 Chapter 4 HCI Evaluation of WebDANTE v Current Architecture Once the requirements are established, the design of the new interface can be focused upon. The system architecture is a key aspect in designing for user experience (Chapter 2.2). This section will look at the current architecture for the system to help with the new design. The structure and organisation of data within the system helps to improve user-friendliness thus enhancing overall usability and user experience. A well designed interface helps to order information logically but a well designed architecture ensures the content and interactive features required at the presentation layer are supported by the other two layers of the architecture. Looking at the architecture for the existing system provides a better understanding of the system structure and will help in the design for the new prototype. Breaking the architecture model into separate layers shows the different elements and can help in the development, as modifications only affect a specific layer rather than the whole application [Ramirez, 2000]. The general 3-tier architecture consists of the presentation layer, business logic layer and a data tier. Figure 4.1: showing the structure of the info architecture Presentation Layer Top level of application which shows the front end processes. Business Logic Handles information exchange between user interface (presentation layer) and the database (data tier). This layer describes the processes between the data tier and the presentation layer. Data Tier This tier consists of tables where information is stored and retrieved. [17]

24 Each layer performs different functions and works with the other layers to perform a specific task. Creating an architecture diagram such as this for WebDANTE v.1 allows easy modifications to be made in the new design as changes can be made or added to one layer without necessarily affecting the other layers. Therefore the architecture design for version 2 will be included in the design specification for the developers to use. In order to produce the architecture diagram for the current system, a meeting was scheduled to discuss the functionality and structure of WebDANTE with the owner and developer. There was no documentation of a diagram showing the architecture; however there was a plan of the database structure for the mobile phone application, MobileDANTE. This schema shows the tables in the mobile application, related to WebDANTE, including the fields of each table. Appendix C shows this database schema for the mobile application. The database structure for WebDANTE is similar to that of MobileDANTE with the additional table which stores the phone information. The tables in the database schema are Users, FoodLog, Food List, FoodGroups, Portion table and Phone Messages From this database schema, the data tier for the architecture can be illustrated. In order to demonstrate the mechanisms of the business logic and presentation tier, an understanding of the systems functions is required. This understanding was attained by the meeting with the developer & owner and also through using the system. As the functionality varies for the different users of WebDANTE- patients and health supervisors- this needs to be considered in the architecture design. E.g. selecting a user to review is a feature that only the health supervisor requires and thus the design of the architecture diagram should ensure that there is a clear distinction between these users and the processes. [18]

25 Figure 4.1: System Architecture showing the structure of WebDANTE v Presentation Tier for WebDANTE v.1 The main focus in designing a second prototype of WebDANTE is of the design of the interface. Nielsen (2000) concentrates on 3 main areas [Bocij, et al, 2006]: Site design and structure [19]

26 Page design (layout of each page) Content design (the text and content on each page) Hoffman and Novak (1997) stress the importance of the concept of flow in governing site usability (i.e. how easy it is for users to find the information they need as they move from one page to the next) [Bocij, et al., 2006]. The navigational hierarchy for a system represents the different display pages within the application and how these are linked. It includes 3 different activities [Zaphiris & Kurniawan, 2007]: Understanding the objects within the environment Showing the relationship between the pages The navigation path to a particular display page The navigational hierarchy for the current prototype shows the different pages across the system from a top down structure: Figure 4.2: Navigational Hierarchy for the presentation layer of WebDANTE v.1 [20]

27 4.2. Evaluation of current System The purpose of designing a new prototype for WebDANTE is to make the system more usable and more efficient than the current version. By looking at the current methods of Human-Computer Interaction (HCI), and through evaluation of the current user interface, a more effective design can be achieved for the new prototype. The aim of the evaluation is to identify usability problems and issues with the existing system that have been overlooked and use this as a basis for the new design. The issue of usability is important and must be addressed in the design of the new user interface. The evaluation will show the current functionality of the application. As discussed in the Background Research (Chapter 2.3), the evaluation method chosen for the current system is analytical evaluation using a combination of walk-through scenarios and a heuristic evaluation. Preparation was essential to conduct the evaluation and it was important to select participants to carry out the inspection. Preparation Nielsen recommends 3-5 evaluators are sufficient to carry out the evaluation as this allows enough problems to be identified and key details may be missed by just one evaluator [Sharp, Rogers & Preece, 2007]. As there are several stakeholders of WebDANTE, it is useful to involve a range of people in the evaluation. Heuristic evaluation is best carried out with experts who understand usability methods. Self-evaluation A self evaluation will be carried out by the project author as this will provide a better understanding of WebDANTE to help in the design of the new prototype. Owner The owner already has a full understanding of the system and has knowledge of usability methods and therefore may find it easier to give a more in-depth evaluation of the functions of WebDANTE. Health Supervisor Evaluation is of benefit to health supervisors as they are one of the user groups of WebDANTE so will be required to use the system to review patient diets. The health supervisor carrying out this evaluation has not previously used the system but is aware of its purpose and can provide useful feedback in terms of features included in the application and how efficient it is in self monitoring health. Potential User ( Patient ) Involving a potential user in the evaluation is important to get feedback of how a typical user would use the application. [21]

28 The evaluation allows aspects of the user interface to be assessed such as online help and navigation structure. To prepare the criteria for the evaluation, typical user tasks were identified and used as scenarios. 3 scenarios were put together as part of the evaluation to try and capture an adequate amount of information about the application. The walkthrough scenarios focus on ease of learning (one of the dimensions of usability). The heuristic evaluation was based on usability guidelines and the heuristics used in the evaluation were those most relevant to WebDANTE: Visibility of system status Match between system and real world Consistency and standards Recognition rather than recall Flexibility and minimalist design Help & documentation The questions under each heuristic relate to the features of WebDANTE. An evaluation sheet was put together with the walkthrough scenarios and heuristic questions on this, allowing the evaluator to write their comments as they follow the inspection. A briefing sheet was also put together providing instructions on how to complete the evaluation as well as information of the purpose of the task. (See Appendix D for the briefing sheet that was given to the participants). Once the evaluation sheet was put together, this was tested to ensure it was easy to follow and there were no errors. Some heuristic questions were revised to fit the system requirements and questions were added under each walkthrough scenario for additional feedback. An additional notes section was added to the end of the feedback sheet to allow evaluators to note any additional problems that don t fit under the questions or walkthrough tasks. Procedure Step 1: The evaluation was sent to each participant in an along with a set of requirements to compare against. Step 2: Each participant was introduced to the session and given the chance to explore WebDANTE to become familiar with it. The evaluation was carried out individually and feedback was recorded on the evaluation sheet provided for later analysis. [22]

29 Step 3: Each evaluator completed the walkthrough scenarios (series of tasks designed to test different features of WebDANTE), whilst noting down any problems encountered. Step 4: They then had a set of heuristics with specific questions to answer, again noting down any usability issues. During the evaluation, participants were also asked to note down any positive features of the system. This is important so that they are kept the same in the new design. Results By carrying out these usability inspections, a sufficient amount of data was collected. See Appendix D for the evaluation results. The results were then collated and a table was created listing all the problems found, possible solutions to these problems and recording how many evaluators noted the problem. The problems were categorised by the heuristics used in evaluating the current system to make it easier to identify which usability issue each problem relates to. Visibility of System Status Usability Problem Possible Problem Solution Noted by how many Evaluators When submitting an entry, the system Dialog box to confirm user action before doesn't confirm whether the user wishes action is carried out to prevent error/mistakes. to take this action, so if user clicks submit by accident, system will automatically submit data. Small font and contents of each page aren't clearly described. Increase font size and vary font sizes so that headers or more important things stand out. Not clear which page the user is Selected pages should have their header or currently on as page headers, tabs aren't page tab stand out either in bold or maybe by 2 highlighted when selected. shading in the tab so that the user knows which page has been selected. Header is quite small and different to the Keep terminology consistent or add brief header you click on the tab bar. (i.e. user explanations at the start of each page. clicks on 'your diet diary', but header on the side of page reads 'Food Log' causing inconsistencies). Match Between System and Real World [23]

30 Usability Problem Possible Problem Solution Noted by how many Evaluators Not clear what portion is to the user. Although there are different portion sizes to choose from, there should be some guide to help users decide on portion sizes. -Online guide explaining terminology used and how users should enter data. -Examples of the data users need to enter for each entry form. Consistency & Standards Usability Problem Possible Problem Solution Noted by how many Evaluators Phone sections can confuse users. Display window for phone where users can view/add messages but then under Either put all phone information on one page in the same section to stop confusion or put a hyperlink, linking the pages together. 2 your 'diet diary' user can enter phone data which is quite confusing. Doesn't have a list of everything in the food database, and if it's not in the list then the user is unable to enter it. e.g. Expand database to include a wider range of terms or allow users to enter something that is not in the database. Problem with this is that 3 When entering pizza, it was found that there was only an option of cheese and tomato as a topping. the system may not be able to provide information on diet as they will not have it recorded. No structure to the database so hard to find things. Some structure required such as categories when listing items so search is easier to recognize. Recognition rather than Recall Usability Problem Possible Problem Solution Noted by how many Evaluators [24]

31 Calendar doesn't highlight/mark days of Calendar should use bold text or a different entry so if a user does not enter their colour to mark which days user has entered a diet regularly, it is difficult to review food log so that instead of looking through the unless they remember date of entry. whole calendar, user can more easily see dates of entry. User can review food log i.e. food they Diet page should maybe list what was eaten so have eaten and their actual diet (intake that the user can see/compare products to their of calories, sugar etc.) but these are diet. displayed in separate windows and the user is required to switch between pages to see what they ate against the diet information. Privacy policy and contact us is not very visible at the bottom of the screen. Unreliable MMS; phone number and Number and instructions should be repeated on instructions only listed on homepage. add message screen not just the homepage. Flexibility & minimalist design Usability Problem Possible Problem Solution Noted by how many Evaluators Instead of being able to undo an action straight after data entry, user has to select 'review food log' from the menu -Function should be alongside the food log. - Disable submit after log entry or clear entry screen to prevent users from submitting the 4 and delete/edit entry from there which is same entry accidentally. a long process and not immediately clear that the user has to navigate to a different display window for this. 'My favourites' section food items automatically get entered into this section after having been entered once -User should be able to set preferences where they can select items to be stored under 'favourites' or the system should only place rather than actual favourites that the user items into this section after the user has entered has chosen or items which have been selected regularly, making the list quite it a set number of times e.g. after entering a cup of coffee into food log 10times, system can then [25]

32 long. add it to favourites. -Order favourites in alphabetical order rather than chronological for better structure. No feedback method through the Should be a messaging system of some sort application between the user and the enabling users to interact with their supervisors health supervisor. They would need to where they can ask questions, receive feedback get in touch via /phone to provide etc. Either a messaging system or real time feedback or discuss problems, limiting messaging that allows conversations between the system. the user and supervisor. Spaces between the search box and food log results could be bigger as information looks cramped. More general use of bold fonts or larger text. Not clear where users can allow Maybe should appear on other pages or inform supervisors to view their profile as it is user in the guide as to where it is. under manage account. 4 Help and Documentation Usability Problem Possible Problem Solution Noted by how many Evaluators No help section/online guide for users - Online help section which gives a brief explaining how to use the web application or for users to get help guideline on how to use the system and a set of predefined FAQs answering common queries 3 with problems. from users. -Good to show steps to add items to diary on screen. No section for users to post queries Forum section where users can post questions or discussions and allows interaction with other users/monitors. This can help users engage with people with similar problems and opens up discussions that may be of use to all users. Additional Problems/Issues [26]

33 Expand display to fit the whole screen Add auto complete to fields where you enter food items to save time. Positive Features of WebDANTE Inactive fields become disabled Good colour scheme My Favourites section saves a lot of time as it lists all the items entered before. Good update to notify user when changes have been made Users are able to view data entered through the phone and edit this. Analysis Most Important Issues Online help guide Feedback method between patient and supervisor 'My Favourites' section users being able to customise this list. Food database The online help guide and feedback method are most important as the requirements specification for WebDANTE specify that these should be included in the system. Although the food database was noted by all evaluators, this will not be focused on in the design of the new prototype as this problem requires expanding the database to include more terms and therefore cannot be shown in the design of the user interface. Some of the findings were common amongst the evaluators and a large number of the problems were trivial issues that require small changes but they still affect the experience for the user. The design of a second prototype of WebDANTE will focus on adding new features such as the help section and feedback method and features that create a better user experience will also be considered as some of the problems highlighted are related to this, such as visibility of functions (e.g. shaded tabs so user knows which page they are currently on). Once the results were collated and analysed, a debriefing session was arranged (5.1.2) with the evaluators to discuss the findings and possible solutions. The first design prototype was also evaluated in this session. [27]

34 Chapter 5 Re-design of WebDANTE 5.1. Introduction Without a suitable design, the usability issues discussed in the previous chapter will not be overcome. The analysis from chapter 4 will aid the design of the new prototype. The re-design of WebDANTE went through 2 iterations with a review stage between each of these to receive user feedback on the design prototypes. A design specification was produced following the most recent prototype design for the developers. The first iteration will involve producing paper based mock-ups of the new design. This will help illustrate the various features of the new design based on the evaluation of the existing system. The evaluation phase following this will provide a foundation for the second design iteration. The second iteration will involve further prototype design but higher in-fidelity than the paper based mock-ups. This design will be created on PowerPoint thus providing a better representation of the system to be developed. An evaluation of this will be carried out to capture the perspectives of stakeholders, leading to further modifications. This prototype will also help the developers in understanding the functionality of the system. Once this has been done, a design specification will be produced which will be presented to the owner and developers for the implementation of the new design Design Iteration 1- Paper-based sketches Aim To produce paper based mock up designs for WebDANTE v.2. To evaluate these designs using participants, to allow feedback to be collected on the proposed solutions & designs so that the designs can be modified. Procedure The design of the new prototype is based on the results from the evaluation section (See chapter 4.2) and it was decided that the most important issues to focus on are the messaging feature to allow [28]

35 feedback between patient and health supervisor, and the help section as these are both basic requirements listed in the requirements specification (See 3.3.2). The sketches were designed based on the current version of WebDANTE, keeping the layout and general design the same. The sketches for the help section and the messaging function show the user interface design, with the main features of these sections. The sketches do not show detail such as how the features work, solely how the interface will appear on the system. These sketches give a general overview of the new prototype in order to gather feedback before considering the functionality in more detail. A design for the My Favourites section was also done as this was one of the issues found in the initial evaluation- that items automatically get stored in this section after one entry rather than users being able to choose what to have in this section. The design shows an improved My Favourites section by allowing users to delete items in this section and allowing them to order them alphabetically or chronologically for ease of use. Deliverable Paper based sketches showing the design for the new features to be added to WebDANTE. Appendix F shows these sketches for the new prototype Evaluation Focus Group Aim Towards the end of iteration 1, an evaluation was carried out of the low-fidelity design. The goal of prototyping is to receive feedback on the design to allow modifications to be made. The evaluation method chosen for this iteration was a focus group (explained in Chapter 2.3.). The session also allowed feedback of the previous evaluation to be provided. Preparation The focus group session was scheduled with those participants involved in the initial evaluation of the current system. To ensure that everything was covered in the session, preparation was essential. The focus group was required to cover: Discussion on the feedback from initial evaluation (section 4.2) Feedback on the prototype designs (sketches) (Section 5.1.2) [29]

36 Revisit requirements specification (3.3.2) to ensure all requirements are now met from the new design Any further problems Procedure The focus group lasted 1 hour and information gathered from this session was noted down on paper. The feedback was through open discussion, as there were only 4 participants so there was no difficulty in participants offering their feedback. The focus group was separated into the topics listed under preparation. Feedback Item 1: This step involved discussion of the results from the initial feedback. An agreement was made that the most important usability issues to focus on were those listed in the analysis of initial evaluation (See chapter 4.2.). Item 2: The prototype sketches were then observed by the participants and these were discussed as a group. For the messaging feature, it was decided that this should be implemented into the system itself to enable supervisors to provide feedback to the patient more easily & for messages to be stored in the system. There was also discussion on including user settings in the message function including options such as receiving text alerts when the user gets an and automated s with diet information in. Another feature of this messaging design, should be to incorporate a forum section that allows user-user interaction and open discussion to take place, so all users are able to see messages posted here. The sketches of the help function were then observed. It was suggested that as well as a general help section that includes a help guide and frequently asked questions section, there should be context sensitive help across the application to help with data entry. E.g. when entering a food log entry, the user may not know what data to enter, so a help function next to entry field, should give the user an example of what to enter. It was also decided to include other user options with the design for the My Favourites function such as personal target section where users can set their own targets. Item 3: The aim of this step was to check whether the new designs met the requirements specification. By including a help section and messaging feature and making small modifications to some existing features, the requirements will be met. Item 4: The session also lead to possible further developments that could be made: [30]

37 Reward system Personal Notes section that allows users to write additional comments when entering data (e.g. how they feel when eating certain foods) Portion guide Scanner device on mobile phone for users to scan food items instead of typing in data Build-a-meal function where users can add food items to a group to create a meal and save time in data entry by selecting the meal rather than individual items. Some of these will be considered in iteration 2 as they will enhance the system in terms of user experience, such as the personal notes section. Also from the comparison with similar self monitoring applications, some of these proposed enhancements currently exist on such applications, thus by including them into the new design, the second prototype of WebDANTE will be on closer proximity to these. Analysis The focus group session proved to be successful in capturing feedback from the evaluators on the prototype designs and allowed for open discussion, to develop on ideas. The feedback from the focus group session underlined the need for more features that will enhance the user experience such as a reward system and the ability to customise functions to improve efficiency such as a build-a-meal function which will reduce time spent in data entry. Thus the modifications made to the prototype designs will focus more on customisation by allowing users to edit options within the application to suit their personal requirements Iteration 2 The second iteration will use storyboards, created on PowerPoint to present the design. The help section will be modified to include context sensitive help across the application to assist users with data entry. A forum section will also be included within the messaging feature to increase interaction between users and the My Favourites section will be expanded to be part of a User Preferences section along with other customisable functions Storyboard Designs Aim The aim of producing a second prototype design for WebDANTE v.2 is to: [31]

38 Make modifications to the design in iteration 1 Produce a higher-fidelity prototype (PowerPoint storyboards) Help developers understand the functionality of the new prototype better through illustrating the functions of the new designs. Design of Storyboards The storyboard designs were produced as a walkthrough with each slide showing a different action progressing to the next step. Four storyboards were produced for the messaging feature, help section, personal notes and user preferences. Apart from the personal notes section, the other features are to be created as new sections. The storyboards were created using aspects of the current system, such as the general layout, colour and general menu sections. The designs for all features consist of some general modifications that fix some of the trivial issues that were found in the initial evaluation. These modifications in the new design are: Shaded tabs when page has been selected from the top menu so that user knows which display page they are currently on. Each page will display title at the top to make it clear which page the user is on. So if the user has selected 'Forum' within the Messages tab, the page will have the title 'Forum' at the top. Use of inactive fields this currently exists on data entry pages, but is also part of the new design to stop users making errors. Dialog boxes to confirm action has been completed. These appear after any action the user takes which makes changes to their account/profile. Messaging Feature: The message feature is to be added as a new section of WebDANTE and will be a feature for all users of the system (patients and supervisors). The design shows the different functions of the messaging feature. From the homepage, there is a 'Messages' tab alongside the other tabs in the top menu. This is where the user clicks to go to the section which will automatically display the 'Inbox' page. The submenus within the messaging section are the 'Inbox', 'New message', 'Settings' & 'Forum' and these are listed on the side menu once the messages tab is selected. [32]

39 Inbox Inbox lists all messages, showing message title, sender & date. To view message, user clicks on message title. There is also a 'Reply' button to reply to the message. Inbox also allows users to delete messages by clicking the check box next to the message which selects message, followed by a Delete button. New Message Forum Settings User can send messages by clicking on the New Message tab on the side menu, or by replying to a message. The interface for writing a new message includes a text box to write message, a Subject field & 'To' field. To select user to send message to, the To button (when clicked on) will list all the users of the system. To insert name into this field, the name is selected. 'Send' & 'Cancel' options included to proceed with action. Once message is sent, a dialog box will appear confirming action. Forum displays discussion board allowing users to post messages and begin a thread where other users can respond to discussion. Forum interface lists the message title, author, date and no. of posts to each message. There is also a search bar where users can search for a particular message as the discussion board might become long and difficult to find a message. To start a discussion, there is a sub menu under forum where users can compose post (in the same way as they write an ) but there is an option to allow other users to view/add post as they may wish to keep post private. Users can also add to a thread by opening up the messaging and clicking 'Add Post'. This section lists options that users can choose such as receiving text alerts when they have a new message, receiving reports with feedback of their progress on & allowing other users of the system to send messages to them. The design also shows an example of the type of report they would receive, there is an option to view this by clicking on the little icon next to this option. The example report lists food eaten, a graph showing progress, target, and a history button so users can view past reports. To opt for any of the settings, there are check boxes next to the options which are selected, followed by 'Save'. Help Section: The help section for WebDANTE v.2 can be accessed before user logs into the application for assistance with how to use the site and also after log-in, appearing on the top menu bar. The help [33]

40 section consists of a 'Getting Started Guide', 'FAQs' with context sensitive help also designed to be included across the system. The help section is necessary for both patients and health supervisors, although the context sensitive help will vary for users as supervisors are not required to enter food logs. Getting started guide FAQs Post a question Contextsensitive help The getting started guide will provide information for users on how to use the site, giving details on what each area of the application is about and any terminology or functions in these areas. This section lists frequently asked questions which are submitted by the support team and are made up of any general queries users have about the application. Questions are listed as links which, when clicked on, will display the answer. There is a link at the bottom of the page to post a question as well as a sub-menu under 'FAQs' to post a query. This section allows users to post any queries/problems they have. This will direct the user to the same interface as composing a message (message feature) but the To field will be automatically filled with the WebDANTE support team id who deal with the queries. Confirmation box once the message is sent. This is help across areas of the system, for example on the data entry page. Small? icons will appear next to entry fields. When these buttons are clicked on, a description box appears explaining to the user what to enter in this field. To close this box, click on the button again. Manage Account: The user preferences section will be added to the Manage Account section as a separate sub menu within this where users can manage their profile and account settings. The preferences section will only be designed for use by patients as supervisors do not need to use these features.under user account are 4 sub menus of this: My Favourites, Personal targets, Build a meal & Rewards. User Preferences This interface has buttons linking to the sub-menus within it, with a description of what each of these pages are. To go to one of these pages, the user can either click on one of the buttons from this page, or click on the tabs from the side menu. [34]

41 My Favourites Personal Targets Build-a-Meal Rewards User can change the way their My Favourites is displayed by removing foods that they don t want as a favourite or ordering the list chronologically or alphabetically. To re-order the list, a drop-down menu has been designed. Once changes have been made, user can save or delete changes with a confirmation box to show action has been carried out. This page allows users to enter any information they want of personal targets they are aiming to reach. User simply types in text and clicks Save. These targets will be displayed in reports to remind the user. User can create meals by adding foods into a list to help save time when entering food logs. The first page shows the meals already created with a button to Create New Meal. There is a search field where user searches database to select foods and Add, with another field to type in the name of the meal, followed by Save and confirmation that action is complete. To enter meals into food logs, an extra link has been added onto the Enter Food Log page which will access the list of meals created for user to select from. This page has been designed to motivate patients with their diet. The page will display how many points the user has, which they get given by their supervisor when targets have been met or there is progress being made. Once a number of points are collected, the user will receive a reward (chosen by WebDANTE team). Personal Notes: This is a feature that is to be added in the data entry section when entering a food log. The purpose of this feature is to enable users to record any extra notes with their food log, for example, how they feel when eating certain foods. These notes can help users to identify why they have eaten certain foods or how eating something makes them feel. The design for this is a text box on the same page as Enter Food Log, where users type in text and click Add. This text will then appear when reviewing the food log. Again this feature is only necessary for patients as they are the only users that need to enter food logs Evaluation Walkthrough Inspection Aim: [35]

42 To receive feedback on the designs Evaluate the functionality so that modifications can be made Preparation: Storyboard designs (See Appendix H) Questions to assist with walkthrough and to provide feedback (See Appendix I which shows the collated results from the evaluation from participants) Procedure: The storyboard designs were sent to the same evaluators but instead of providing scenarios for them to follow, the storyboards were designed as a series of steps, showing all the features, so the walkthrough involved just following the steps on each slide identifying any problems found and also answering a set of questions for each storyboard. Results The feedback from the evaluation of these storyboards proposes some small amendments to be made to the designs: The rewards section, currently under user preferences, should be in a separate section as it is not something that the user controls or sets preferences on. Also a section in supervisors area for them to configure. Privacy/Contact us link at the bottom of the page is in white bold text as it is difficult to see on the existing system. Split the forum into categories, as people post about different topics so it is easier to search. When posting message on the forum, there is no button that performs this (e.g. add ). Restrictions on who messages can be sent to (in the Message settings), maybe only to those in the same group each supervisor has a group of patients that they monitor. Report produced for supervisor to see feedback of all patients in their group. Message alert to patients to remind them if they have missed a meal (user settings). The feedback from these walkthroughs has been analysed: Analysis [36]

43 This project will involve the storyboards being modified further based on the above evaluation. Some issues will not be addressed such as the forum being split into categories, as this should maybe be put in later when there are a lot of messages in the group. At present it is not known what discussion will take place here and therefore is difficult to add categories. Also the message alert to remind patients when they have missed a meal shall not be included in this final design as more discussion is required to determine the features of this and how this function should work. The design for this should also be considered in conjunction with the mobile application. Storyboard Modifications This stage involves modifying the storyboards from the last iteration. The changes made to the storyboards were: The rewards section design shows the reward section from the health supervisor perspective, and how they give points, as well as the reward interface for the patient. The interface for the supervisor will require the supervisor to enter points for each patient they monitor which they can save. This then appears on the reward interface which the patient views. This reward section has been moved from user preferences but still remains under Manage Account. Privacy/Contact Us link at the page footer is now in bold Extra button added to forum feature so that users can add the message Iteration 2 (5.2.1) lists the main features of the designs and the functionality. Appendix J, section 4 (Design Specification) shows the storyboard prototypes for the new design. Although further iterations can be made, the evaluation of the previous prototype designs (section and 5.2.2) have ensured that the this last design will be sufficient enough to pass onto the developers to for implementation as they resolve the main usability issues and problems identified in the initial evaluation and reviewing the requirements specification (3.3.2), the new design has met all the requirements specified Re-design Specification Now that the interface design for WebDANTE v.2 has been produced, the system architecture can be analysed and additional features will be added to the relevant layer. Most of the changes will be to the presentation layer and business logic; however there will be some changes to the data tier. The changes to each layer are described below: [37]

44 Figure 5.1: System Architecture for design of WebDANTE v.2 [38]

45 Changes to Presentation Layer: Messages: The changes to the presentation layer affect both patient and supervisors as this feature has been designed for use by all users. Within the messaging section, there are different interfaces for the inbox, creating a new message, message settings and the forum. Help: The help section can be accessed before and after log-in as users may require help before they log in on using the application. Manage Account: This section is split across the architecture. The user preferences - create a meal, set personal targets and sort favourites functions are specific to the patient. The reward interface will appear differently to the patient and health supervisor. For the patient, this page is simply an interface that is viewed, whereas for the supervisor, this is a data entry page where supervisors enter points. The navigational hierarchy for the new version of WebDANTE shows the added pages across the system. The hierarchy helps to show the navigation path to a particular display page. Figure 5.2: Navigational Hierarchy for WebDANTE v.2 [39]

46 Changes to Business Logic: Messaging Feature: The messaging section will allow users to view and delete messages from the inbox by identifying the user ID and retrieving the messages from the Messages table. To delete a message, the message is removed from the messages table and the inbox is updated. Users can edit message settings and these settings will be stored in the User database. For supervisors to review a patient report, the system will find the user record from the database and generate a report based on the food log entries. This will then be displayed on screen. When creating a new message, the system will identify the user ID of the person creating the message and will also link to the Users table to retrieve the ID of the user receiving the message. If sending message to a group, group ID will list all the individual users. Once the message is sent, the message table is updated with a new message. A date and time stamp will also be added to the message. The forum section allows users to view, add or search messages. Forum messages will be stored in a separate table within the message database. To add a message, the system retrieves the person ID from the user table and the forum table is updated with a new message. Personal Notes: The Add note function only applies to the patient and is linked to the Food Log table which stores the information. Patients add notes in the text box and when viewing a food log, this personal note will appear with the entry. This function comes under the Entry form for food log in the presentation layer. Help: To view a question under the FAQs section, this interface will display a list of questions. To view an answer, the question heading is selected. This help section does not refer to a table in the database as it does not need to retrieve data from the data tier. The help guide and FAQ s will only affect the presentation layer and business logic. To post a question/query to the support team, the system retrieves the ID for the support team from the Users table and the message will automatically be sent to the support team without having to search for contact. This function will work in the same way as creating a new message by identifying the ID of the person creating the message. Once message has been sent, the messages table will be updated for both user IDs. Manage Account (User Preferences): Patients create meals by searching the food database and adding foods to a group to create a meal. This meal will then be stored in the User Settings table and can be accessed when entering a food log. As a meal is created, the nutritional information for the meal is also combined to give the data for the overall meal. [40]

47 To select a meal to add to the food log, the list of created meals are obtained from the user account and displayed. The relevant meal is then selected by the patient and this is stored in the food log entry. Another function under user preferences is sorting My Favourites. Items in this section are automatically added once entered in the food log but patients can delete items from this section if they do not want it as a favourite. They can also list the favourites alphabetically or chronologically to make it easier for them to view. Again the settings on My Favourites will be stored in the User Settings table. Patients can also add personal targets in this section by entering targets in the text box which will then be added to the user account under user settings. These targets will be displayed in reports and feedback provided for the patient. A function under manage account for the supervisor is entering points in the reward section for each patient. Once they have entered the points and saved, these points are added to the user account and the reward interface for the patient will be updated with the number of points received Changes to Data Tier The new version of WebDANTE will require some additional tables to be added as shown in the architecture for the new system. Some changes to existing tables are also required. The messaging feature will require a new database to be implemented with two tables for the s and the forum section. The tables in the Messages database will store the following: The Messages table will store the messages, including the message text and date/time stamp. The SenderID is the id of the user sending the message and the PersonID is the user that the message is being sent to which links to the Users table to retrieve PersonID from this table. A table for the forum should also be created within the Messages database, storing the messages, date, time and PersonID. [41]

48 Another table to be created within the User Accounts is User Settings, which will store all the user settings and options. This table will store the settings from user preferences and message settings and will use Boolean expressions to set these values. E.g. to receive text alerts under message settings, set this to true if user wishes to receive text and false if not. Meals Targets User Settings Receive text alerts with new (True/False) Receive automated reports via (True/False) Favourites stored alphabetically (True/False) Update points for patient (True/False) The food log table also requires additional fields to store the meals and additional notes entered by patient: Foodlog PersonID Date Time ProductID Amount Index Meal Note The designs for the remaining functions do not require new tables to be added to the system as they will link to existing tables. [42]

49 The E-R diagram below shows the relationship between the tables in the new system. Messages is the only new server to be added for the new system. The Users and Food Log table have been modified and the diagram also shows the User Settings and Forum table even though they are tables within other servers, just to show how they fit in. User Settings 1 * Phone Messages Users 1 * * Food Log * Food List 1 1 Portion Table Messages Forum This detailed design considers how the individual modules will function and how information is transferred between them, which will help developers get a better understanding of the functionality and help them in building WebDANTE v.2.. [43]

50 Chapter 6 Evaluation This chapter reviews the overall project and looks at the final solution against the objectives set in the introduction. The methodology and evaluation techniques will be inspected as well as a further analysis against the similar applications identified in chapter (Background Research) Evaluation of Solution Evaluation has been carried out during the project between the different stages of design. User evaluation of the new design (solution) for WebDANTE is presented in chapter 5, which looks at whether the new design resolves the usability issues found in the initial evaluation from the users perspective and compares the new design against the requirements specification Evaluation against Similar Applications (Post design) In section a benchmark comparison of WebDANTE v.1 with similar applications showed the limitations of this version. In this section, a comparison of version 2 against the other applications will be done to see if any improvements have been made and what these are. Looking at the new design, table 6.1 shows which features WebDANTE v.2 now contain. Food Focus My Food Diary WebDANTE v.2 Mobile Food Diary Search food database Personal Assessment Profile -Personal Goals -Reward section Food Log -Manual Food Log Entry -Create Meals -My Favourites -Recipe Builder -Personal Notes -Calendar [44]

51 Exercise Log -Motivational Charts Reports Forum Help Guide/FAQs Body log Messaging Section Table 6.1: Comparison of WebDANTE v.2 against other applications The table shows that the design for the new prototype now contains several of the features that exist on the other applications. These features were added based on the evaluation of the existing system. Improvements Help section Messaging section (& Forum) Reports Food Log enhancements - Create meal function, personal notes and My Favourites Reward system Personal goals The help section and messaging section are the most important additions to the new version of WebDANTE as the requirements specification (3.3.2) lists the need for a help guide and the messaging section will enable feedback to be provided through the system. The enhancements to the food log are based on the evaluation of version 1 and the first design and help to improve the user experience through customisable features such as the create meal function. Limitations Exercise log Body log Motivational charts Manual food log entry Recipe builder These features were not considered in the design for version 2 as they were not noted in the evaluation of version 1 as necessary features required, with the exception of the manual food log entry. This was [45]

52 noted in the evaluation of version 1 and is something that should be addressed as it prevents the user from recording anything that is not in the database. The motivational charts which appears in My Food Diary is something that would enhance the user experience and motivate the users in monitoring their health. However the new design has incorporated a reward system as a motivational feature to help users to keep records and collect points. Although the added features in version 2 improve WebDANTE greatly, some of these features still lack elements that appear on the other applications. For example, although the new design now includes a forum, the forum on My Food Diary is more complex with categories and group options. Thus the design for the forum can still be improved further and may be something to consider in future versions improve the application in terms of usability and utility. Overall the design for the new prototype includes several of the features that previously did not exist, thus improving the system and bringing it on a closer level to the other applications Evaluation Techniques Used This section will reflect upon the evaluation techniques used in this project to assess how appropriate they were and whether the outcome was as expected. A combination of analytical evaluation (heuristic evaluation and walkthrough scenarios) and focus group were used in this project (See chapter 2.3 for a review of these techniques). The inspection methods focus on characteristics of the likely user and were used in evaluating version 1 of WebDANTE as they are specific approaches in measuring usability problems by using usability principles as criteria. The focus group session was used to evaluate the paper based mock up designs (5.1.2). This approach was chosen to allow open discussion to take place between the participants to initiate new ideas. The techniques used were most appropriate for the approach taken as the analytical inspections enabled a number of usability problems to be identified and using scenarios and heuristics allowed a set procedure to be followed by the participants, giving consistency in the way the results were structured. The focus group was a suitable method for evaluating the design as it enabled ideas to do develop through discussion which lead to a more detailed design. Following the focus group session, feedback was received from the participants evaluating the usefulness of the session. This can be found in Appendix E. This feedback supports that the technique was useful and that group discussion was important in evaluating the design. [46]

53 Overall the outcome from using these evaluation methods was as expected as they helped to test the usability and utility through inspecting the designs. 4 people were involved in the evaluation which was a sufficient number for the chosen methods and the sample was a good representation of the stakeholders of WebDANTE to avoid bias Effectiveness of Chosen Design Methodology The methodology used for this project was the usability engineering lifecycle (1.5) and the ISO standard involved with this (IS ). Reflecting from the project experience, the methodology approach taken was a very useful guide, allowing regular communication between the project author and the owner. As it is important to ensure that the new design resolves the problems identified in the initial evaluation and meets all the requirements, applying 2 iterations was important to ensure the design covered these and adequate feedback was provided between each stage. The usability engineering lifecycle and ISO standard provided a good structure for this project as they include the exact processes taken in this project and are specific for usability studies. The approach was selected to help split the project into suitable stages to ensure sufficient time was spent on each stage and considering the outcome of the project, this was successfully achieved Project Evaluation Meeting Objectives The objectives were established in section 1.2 and are listed below with an explanation of how they were met: Further the understanding on the requirements of WebDANTE and conduct an evaluation of the usability and utility of this original system against the requirements. The understanding of the requirements was presented in Chapter 3, where an in-depth analysis was carried out to produce a detailed set of requirements that were used as evaluation criteria. This requirements analysis involved interviewing the owner and developer and reviewing the existing requirements for version 1. The evaluation of the original system was completed against the requirements using analytical methods and a comparison against similar applications also helped to identify usability problems. [47]

54 Use the evaluation to design a new prototype of WebDANTE The evaluation carried out in Chapter 4 of the current system was used to design a new prototype (See chapter 5). The evaluation identified usability problems with version 1 and some of these problems were addressed in the new design. The design began with paper based mock-ups which were then evaluated using a focus group to provide feedback and make further improvements on the design. The second design iteration was higher level using PowerPoint to create storyboards, capturing the functionality of particular features. The new design resolves the main issues identified in the evaluation and meets the requirements produced for version 2. Present the design for WebDANTE v.2 to the owner & developer to help them in the development of a second prototype The design specification presented to the owner of WebDANTE is attached to the report (See Appendix J) and includes a list of the problems identified in the initial evaluation, as not all of these are covered in the design so need to be documented for further work. The decision as to which problems would be covered in the design was from identifying which ones would ensure that all the requirements were met and prioritising accordingly. A copy of the final storyboard designs is also included as well as an electronic copy of the storyboards on PowerPoint to view how the features work. A detailed design for the new prototype is also included, giving an overview of the architecture and the design for the different layers including the design for the data tier to aid developers with the implementation of version Time Management and Project Schedule The use of a methodology made time management easier as the project was separated into different stages and was controlled using an initial schedule which was put together at the start of the project (See Appendix B1). The final schedule was revised following the Christmas break due to changes made to the project approach from the initial plan. These changes were made after the decision to focus on a detailed design as the solution rather than including the implementation, both of which were not possible in the time available. The final schedule (Appendix B2) was followed successfully as it separated the project into stages of requirements gathering, evaluation and design making it easier to complete the sections to deadlines. More time would have been sufficient to include another design iteration as the changes made to the schedule reduced the amount of time spent on design. However the last iteration did ensure that all the requirements for this project were met. [48]

55 Chapter 7 Conclusion 7.1. Main Achievements Overall, this project has been a success as the objectives set in the introduction have been met (6.4.1) and a design has been produced which will aid in the development of WebDANTE v.2. A personal achievement is that not only has this project been completed to the deadline but that the solution will provide significance for the owner and developers in developing the application further. Thus the project does not only have value for the project author as part of the degree but is also relevant to a valid project currently being carried out by researchers at the University. This project is also of benefit for the stakeholders as it provides an insight into the system and requirements and by involving different stakeholders in the evaluation phases, the design meets the requirements for the different stakeholders. The aim of this project was to investigate the usability and utility of WebDANTE, through evaluation of the current system which will then lead to the design of a second prototype, thus improving the system in terms of usability. By following the methodology described in section 1.5, the design for a second version of WebDANTE has been produced resolving some of the usability issues identified. This new design should ensure that the application is more effective and easy for users to monitor their diets Future Developments Following this project, further developments can be made by: Build the new prototype using the design specification (Appendix J), and allow for feedback to be provided on the systems use, for a better evaluation of the system functionality. Consider the design of other features to be included in future versions such as a text alert to remind patients when they have missed a meal and developing the forum section further to include categories for discussion. Such features should be considered in future versions to improve the application and enhance the user experience. Monitoring the use of WebDANTE v.2 is crucial in getting user feedback to evaluate the new prototype, and help develop or make changes to the system if necessary. This will help to ensure that the system is meeting all the user requirements and can provide data on user interaction and how the system is used. [49]

56 References BOCIJ, P. CHAFFEY, D. GREASLEY, A & HICKIE, S, (2006), Business Information Systems: Technology, Development & Management For the E-business. 3 rd ed. Essex. Pearson Education Limited. GENG, S, (2010), What Does User Experience Mean to You? DesignMess: Online Community of Designers. [Accessed: 12 th Feb 2010]. Available from: FOOD FOCUS, (2007), Food Focus [online]. [Last Accessed: 23 rd April 2010]. Available from: GARRETT, J.J, (2003), The Elements of User Experience: User-Centred Design for the Web. Berkeley. New Riders GLANZ, K. MURPHY, S. MOYLAN, J. EVENSEN, D. & CURN, J.D, (2006), Improving Dietary Self-monitoring and Adherence with Hand-held Computers: A Pilot Study. The Science of Health Promotion. [online]. 20(3). [Accessed: 2 nd Dec 2009]. pp Available from: %20palm%20pilots.pdf HOWE, D, (1995), Methodology [online]. The Free Online Dictionary of Computing. [Accessed 20 th April 2010]. Available from: IBM, (2000), The User Experience: The Iceberg Analogy of Usability. IBM. [Accessed: 10 th Feb 2010]. Available from: KATZ, J.E. ACORD, S.K & RICE, R.E, (2005), Uses of Internet & Mobile Technology in Health Systems: Organization and Sociocultural Issues in a Comparative Context. International Journal of Medical Informatics [online]. 4-5 [Accessed: 4 TH /Dec 2009]. Available from: LEFEBVRE, C.R, (2008), Mobile Health Applications: Turning Up the Volume [online]. On Social Marketing and Social Change. [Accessed: 6 th Dec 2009] Available from: LINDGAARD, G, (1994), Usability Testing and System Evaluation: A Guide for Designing Useful Computer Systems, Taylor & Francis. MOHANTY, V. & JAGATRAM, D, (2008), Personalisation vs. Customisation. User Experience Issues- A Case Study. [Accessed: 14 th March 2010]. Downloaded from: Slideshare MY FOOD DIARY & ALIGNED WEB SOLUTIONS, INC, (2010), My Food Diary [online]. [Last Accessed: 22 nd April 2010] Available from: NIELSEN, J, (1993), Usability Engineering. 1 st ed. London. Academic Press. NIELSEN, J. & MACK, L.R, (1994), Usability Inspection Methods. New York. J Wiley & Sons [50]

57 RAMIREZ, O.A, (2000), Three-Tier Architecture. Linux Journal [online]. (#75) [Accessed: 1 st Dec 2009]. Available from: REVERE & DUNBAR, (2000), Mobile ehealth Interventions for Obesity: A Timely Opportunity to Leverage Convergence Trends. Journal of Medical Internet Research [online]. 7(5). [Accessed: 2 ND Dec 2009]. Available from: RUBIN, J., (1994), Handbook of Usability Testing. How to Plan, Design & Conduct Effective Tests.J. Wiley & Sons, Inc. SHARP, H. ROGERS, Y. & PREECE, J, (2007), Interaction Design: beyond human-computer interaction. 2 nd ed. Chichester. J Wiley & Sons, Ltd. SMITH, A., (1997), Human Computer Factors: A Study of Users and Information Systems. Maidenhead. McGraw Hill Company. SMITH, M.F., (1991), Software Prototyping: Adoption, Practice and Management. London. McGraw-Hill. ZAPHIRIS, P. & KURNIAWAN, S., (2007), Human Computer Interaction Research in Web Design & Evaluation. London. Idea Group Publishing. UNIVERSITY OF LEEDS, (2009), WebDANTE [online]. Mobile Health Project: University of Leeds. [Last Accessed: 24/04/10]. Available from: [51]

58 APPENDIX A Personal Reflection Overall I was pleased with the project outcome as the objectives were met and exceeded. It was a privilege to have been involved with a real project taking place within the University of Leeds and to provide a design to help in developing the project further. Given the opportunity to work on this project and have regular communication with the owner has been a good experience and provided an insight into project development, skills which will be very useful in future careers. Time was spent in getting the project started as the scope of the project was not defined until later into the first term. The initial idea was to carry out the implementation stage after designing the solution, but as it was important to produce more than one prototype to achieve a better design, it was decided that the focus of the project would be on the design stage. It is suggested that time is spent efficiently in the first few months as these are vital in completing the project to deadline. Time management was crucial and the project schedule helped to split the project into stages, making it easier to complete sections on time. Even carrying out background research is time consuming and is required throughout the project so it is necessary to utilise all the time available. The main difficulty of the project was coming up with an idea initially. After some meetings with my project supervisor, the idea of this project was suggested and it was important to do a project that I would enjoy and be able to draw on knowledge gained from the last 3 years at University, hence this project seemed practical. The supervisor meetings helped greatly by providing guidance and ensuring I stuck to the schedule. Given a similar opportunity I would advise that time management is fundamental in project success. Experience from my placement year helped me in realising the importance of good time management particularly for large scale projects. Another important point is the significance of background research as it really does help throughout the project and usually time should be kept aside to ensure sufficient research is carried out as this will take place throughout the project not only in the initial stages. Having had more time, a more detailed design for the business logic would have been useful, using psuedo code to help in the development of the new design as this would have provided more guidance in coding. I hope the skills gained from this project experience can be applied in the future and I hope the project has been beneficial for the WebDANTE team and will help in moving the project forward. [52]

59 APPENDIX B Project Schedules APPENDIX B1: Initial Project Schedule [53]

60 APPENDIX B2: Revised Project Schedule [54]

61 APPENDIX C MobileDANTE Database Structure This database structure is for the mobile application and was used to produce the data tier for WebDANTE as the tables for the web application are the same with an extra table which stores phone information. This structure helped to illustrate the tables involved in the application in order to write a detailed design for the data tier. [55]

62 APPENDIX D Briefing for Evaluation 1 I am carrying out an evaluation of Web DANTE, a web application that allows people to self monitor their diet, as part of my final year project. You can use Web DANTE to enter your diet records or synchronise with Mobile DANTE to view and analyse data entered by phone. The aim of the project is to investigate the usability of Web DANTE. I am evaluating Web DANTE to find usability problems which will then lead to the re-design and implementation of a new prototype. I have chosen to evaluate Web DANTE using an analytical method of Heuristic Evaluation and walk through. These methods allow evaluators to find problems in the user interface. I have attached the evaluation checklist for you to complete. To evaluate, begin with the walk-through scenarios and complete each step making any comments as you go along. Remember to note down features you like as well as usability problems. Then go through the interface and compare various elements with the heuristics, listing any problems you find. I have provided some questions under each heuristic to guide you in inspecting some elements. If you find any usability problems that you think are not related with any of the heuristics listed, please note them down on a separate page. I have attached the original requirements of Web DANTE. Please read these through before beginning the evaluation so that you understand the objectives of Web DANTE and can use these in your evaluation. Before you inspect the interfaces for problems please look through the whole system first to get an idea of how it works. The evaluation overall should take not take you more than a couple of hours in total and once you have finished your evaluation, please could you me with your results/findings. Once all evaluators have ed me their results, I will look over them and get back to you with feedback. A meeting may need to be held to discuss any differences but I will inform you of this once evaluation has been completed. How to Complete the Walk-through & Heuristic Checklist point: Read through each scenario before completing; complete each step writing comments about any usability problems you face and also anything you particularly like. á Underneath each scenario, there are a few questions relating to the action taken in that scenario it may be a good idea to read through these questions first to save you from having to repeat the scenario to answer these questions. To complete the heuristic evaluation, read each heuristic and focus on this point when evaluating. The questions below each heuristic are provided as a guide to finding problems. To answer these questions, inspect the interface and answer yes/no to each question adding additional comments where necessary. If the question is not relevant to Web DANTE or you cannot find any related element, you can leave this field blank. The comments field is to add any comments on the problems. For example if you find problems/inconsistencies with the question: 'Is there a clear help function and is it always visible?', then you can explain in more detail in this field. You may also add your own comments and other problems either under the relevant heuristic or at the bottom of the evaluation sheet. The questions are only there to help in your evaluation so please make sure to look for general problems you come across as well. [56]

63 APPENDIX E Evaluation Form for WebDANTE v.1 APPENDIX E1: Evaluation Feedback Form 1 Evaluation of Current System Scenario 1: Enter today's diet. Make sure you enter more than one food into the food log. Log in as user TASK Fine COMMENT Use search function to enter food to log Enter portion size Edit portion size if possible by changing the grams Should give examples of the type of food to search for individual ingredients or meals? Limited food options to pick there is beef enchiladas but no vegetable enchiladas Fine Submit entry Fine Now imagine you have entered information incorrectly Can you undo your last action Fine Repeat data entry with another item, checking whether suitable options come up from search and try varying between upper and lower case to check if both formats work Fine Are menu instructions, prompts and other messages consistent in where they appear on the page? (Yes) Comments Would be good to show steps to add items to diary on screen while the user is doing it. Is there feedback once an action has been carried out? (e.g. Once user has entered a log) (Yes) Comments + confirmation message when food added to diary When the user has completed a task, does the system wait for a signal to confirm completion from the user before processing? (No) Comments Scenario 2: You now want to review and edit your previous blog TASK Log in as user if not already logged in Fine COMMENT Add message or picture to the phone blog [57] Fine

64 Review previous log entered in scenario 1 Fine Delete/edit this log Can update it easily, not sure how to delete the message though! Enter another log using the same food from scenario 1- is there an easy method of selecting this same item (i.e. can the user set preferences?) Allow supervisor to view blog Yes favorites show all the items entered before. Saved a lot of time. Is it easy to find data entered through the phone for users to edit instead of having to recall information? (yes) Comments -There was no clear way to delete the message Fine Can users make data entry easier by copying existing data or having saved preferences? (Yes) Comments Scenario 3: As a health supervisor you want to review the user s diet Log in as supervisor TASK FINE COMMENT Select the user you wish to review FINE Using the keyboard instead of mouse (if possible), navigate around the interface to review user s food log. Note user s diet and feedback methods? Takes a long time to keep tabbing through all the links. Also cannot open the calendar to select the date using the keyboard. Not sure what this means? Can users and secondary users (health monitors) interact easily with each other through the system? (i.e. To provide feedback) (no) Comments Could not find a way to leave the user a note when logged on as the health supervisor Can the health monitors easily switch between the patients they are monitoring? (yes) Comments The link to go to switch the user is on the totally opposite end of the bar to where the user was selected in the first place. It would be good to move it closer. Do users have the option of either using their mouse to select functions or using keyboard shortcuts? (no) Comments Cannot open the calendar with the keyboard so users will never be able to select the date they want to review. [58]

65 Heuristic Checklist: Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. Checklist Yes/No Comments YES 1.1 Does every display begin with a title or header describing the contents? 1.2 Is there some sort of feedback to notify the user for every action taken? 1.4 Is there visual feedback for objects that have been selected? And is it made obvious which choice the cursor is currently on? 1.6 Do you think high levels of concentration is required in finding information? YES NO NO Header is quite small and is different to the header you click on the tab bar When selecting a tab on the top bar there is no feedback and you cannot see which tab you are on. Match between system and real world The system should speak the users' language, using words, phrases and concepts that are familiar to the user, rather than system-oriented terms Checklist Yes/No Comments 2.1 Are menu choices ordered logically? (i.e. are YES they ordered in a structure to how users actually monitor their diet, e.g. with data entry before reviewing diet?) 2.2 On data entry screens, is the terminology easy for users to understand? YES Would be good to have examples of the data users need to enter for each entry form 2.3 Is terminology consistent across all pages? NO Headers do not match with top bar. E.g. when you click your phone messages the header on the left reads your phone blog 2.4 Are the menus listing appropriate categories? NO enter phone data is an option in your diet diary, seems like this should be in the phone tab Consistency & Standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. Checklist Yes/No Comments 3.1 Does each window have a title/header? YES 3.2 Does every page have the same design layout? YES (e.g. Titles on the left hand side) 3.3 Are field labels consistent for data entry? YES 3.4 Is there consistency in font size, type & colour? YES 3.5 Are sensible options suggested when entering data (such as food) to save time in data entry and to keep entries consistent? NO You have to enter the food item and then search for it, which does not always bring back the right [59]

66 3.6 Is there a consistent design scheme across all interfaces? YES items Recognition rather than recall Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. Checklist Yes/No Comments 4.1 Does the system make clear of inactive YES They become disabled good. keys/fields? 4.2 Have lines, spaces, colour, shaded area been YES used to separate information into sectors? 4.3 Is it clear and easy to view past food log entries YES for particular dates? 4.4 Is there a good contrast between text and background colours and is the colour coding consistent across the system? YES Privicy policy and Contact us is not very visible near the bottom of the screen. 4.5 Is there a search keyword function where the system can recognise keywords and match results? YES For food only Flexibility & Minimalist Design Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Dialogues should not contain information which is irrelevant or rarely needed. Checklist Yes/ No Comments 5.1 Does the system use different settings/functions for novice and advanced users? NO 5.2 Is only the essential information displayed on the YES screen to stop confusion? 5.3 Is there use of bold, large fonts and large objects YES to distinguish items on a page? 5.4 Are field labels brief but descriptive? YES 5.5 Is there use of pop-up or pull-down menus to YES Date selection good limit the amount of information on the page? 5.6 Is there a split screen function for ease of data entry? YES 5.7 Does the system recognise and remember regular YES Favorites saves a lot of time entered data and make it easy for users to retrieve this information instead of re-entering each time? Help & Documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large. [60]

67 Checklist Yes/No Comments 6.1 Is there an on-line guide or instructions to give NO information on using the site? 6.2 Is there a clear help function and is it always NO visible? 6.3 Is it easy to navigate and find information? YES 6.4 Can users post any queries/questions they have? NO 6.5 Is there already a list of common questions that users may need to know on using the system? NO Additional Notes Additional Requirements/Enhancements - Help would be good to have a? symbol next to each entry form where users can click for an explanation of what to enter. - More food items are required. Missing simple foods such as jacket potato. - Highlight the tab the user is currently viewing. - When viewing phone messages, there is a huge SMS logo is it needed? - Expand the page to fill the whole screen. - Add auto complete to field where you enter the food items to save time. - Add an undo button Comments - The clear frame splits are a good way of separating information - The colour scheme is good with a good contrast. - Good feedback and instant updates when changes are made. [61]

68 APPENDIX E2: Evaluation Feedback Form 2 Evaluation of Current System Scenario 1: Enter today's diet. Make sure you enter more than one food into the food log. Log in as user TASK Yes COMMENT Use search function to enter food to log Enter portion size Edit portion size if possible by changing the grams Submit entry Yes search function easy to use although first foods I searched for not able to find yes yes yes Now imagine you have entered information incorrectly Can you undo your last action Yes can do this but not immediately clear to me I expected the delete/edit function would be alongside the food not to go to the right hand side box. Repeat data entry with another item, checking whether suitable options come up from search and try varying between upper and lower case to check if both formats work Upper and lower case both worked fine Are menu instructions, prompts and other messages consistent in where they appear on the page? (Yes/No)Comments Yes no issues Is there feedback once an action has been carried out? (e.g. Once user has entered a log) (Yes/No) Yes no issues When the user has completed a task, does the system wait for a signal to confirm completion from the user before processing? (Yes/No) Comments Yes no issue Scenario 2: You now want to review and edit your previous blog TASK Log in as user if not already logged in yes COMMENT Add message or picture to the phone blog I tried to do this from my mobile but it didn t [62]

69 appear in the log. I followed the instructions to send by phone on the home page. Review previous log entered in scenario 1 yes Delete/edit this log yes Enter another log using the same food from scenario 1- Yes stored in favourites is there an easy method of selecting this same item (i.e. can the user set preferences?) Allow supervisor to Ok no problems view blog Is it easy to find data entered through the phone for users to edit instead of having to recall information? (yes/no) Comments Information sent via phone hasn t worked Can users make data entry easier by copying existing data or having saved preferences? (Yes/No) Comments yes Scenario 3: As a health supervisor you want to review the user s diet Log in as supervisor TASK yes COMMENT Select the user you wish to review Using the keyboard instead of mouse (if possible), navigate around the interface to review user s food log. Note user s diet and feedback methods? yes Unable to navigate using keyboard, I can only do it with the mouse. Yes Can users and secondary users (health monitors) interact easily with each other through the system? (i.e. To provide feedback) (yes/no) Comments I can see all of the information I wouldn t know how to feedback on it via Dante. Can the health monitors easily switch between the patients they are monitoring? (yes/no) Comments yes Do users have the option of either using their mouse to select functions or using keyboard shortcuts? (yes/no) [63]

70 Comments I don t know how to use the keyboard functions Heuristic Checklist: Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. Checklist Yes/No Comments 1.1 Does every display begin with a title or header Y describing the contents? 1.2 Is there some sort of feedback to notify the user Y for every action taken? 1.4 Is there visual feedback for objects that have Y been selected? And is it made obvious which choice the cursor is currently on? 1.6 Do you think high levels of concentration is required in finding information? n Match between system and real world The system should speak the users' language, using words, phrases and concepts that are familiar to the user, rather than system-oriented terms Checklist Yes/No Comments 2.1 Are menu choices ordered logically? (i.e. are Y they ordered in a structure to how users actually monitor their diet, e.g. with data entry before reviewing diet?) 2.2 On data entry screens, is the terminology easy Y for users to understand? 2.3 Is terminology consistent across all pages? Y 2.4 Are the menus listing appropriate categories? Y Consistency & Standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. Checklist Yes/No Comments 3.1 Does each window have a title/header? Y 3.2 Does every page have the same design layout? Y (e.g. Titles on the left hand side) 3.3 Are field labels consistent for data entry? Y 3.4 Is there consistency in font size, type & colour? Y 3.5 Are sensible options suggested when entering n Searched for pears first options [64]

71 data (such as food) to save time in data entry and to keep entries consistent? 3.6 Is there a consistent design scheme across all y interfaces? pearl barley. Recognition rather than recall Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. Checklist Yes/No Comments 4.1 Does the system make clear of inactive y keys/fields? 4.2 Have lines, spaces, colour, shaded area been used to separate information into sectors? n Feel like spaces could be bigger between seach box and food log results for instance. Looks a bit cramped 4.3 Is it clear and easy to view past food log entries y for particular dates? 4.4 Is there a good contrast between text and y background colours and is the colour coding consistent across the system? 4.5 Is there a search keyword function where the system can recognise keywords and match results? y Flexibility & Minimalist Design Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Dialogues should not contain information which is irrelevant or rarely needed. Checklist Yes/ No Comments 5.1 Does the system use different settings/functions for novice and advanced users?? 5.2 Is only the essential information displayed on the Y screen to stop confusion? 5.3 Is there use of bold, large fonts and large objects n Could do with bold fonts its all very to distinguish items on a page? small text 5.4 Are field labels brief but descriptive? y 5.5 Is there use of pop-up or pull-down menus to y limit the amount of information on the page? 5.6 Is there a split screen function for ease of data entry? y 5.7 Does the system recognise and remember regular y entered data and make it easy for users to retrieve this information instead of re-entering each time? [65]

72 Help & Documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large. Checklist Yes/No Comments 6.1 Is there an on-line guide or instructions to give N information on using the site? 6.2 Is there a clear help function and is it always N visible? 6.3 Is it easy to navigate and find information? Y 6.4 Can users post any queries/questions they have? N 6.5 Is there already a list of common questions that users may need to know on using the system? N Additional Notes Additional Requirements/Enhancements Comments [66]

73 APPENDIX F Design 1 (Paper Sketches) Sketch 1: Messaging Section [67]

74 Sketch 2: Help Section [68]

75 Sketch 3: My Favourites [69]

76 APPENDIX G User Feedback of Focus Group APPENDIX E1: Participant 1 Feedback Evaluation Feedback Participant 1 1. How useful was the overall evaluation for you? Was good to exchange ideas with other evaluators. Allowed me to see the full extent to which this service could be used. 2. Were there any outcomes you found to be particularly surprising or useful to you? Quite interesting to find out how the SMS system worked. 3. Do you feel that the main objective of the evaluation was achieved? (that is to find usability issues with WebDANTE in order to design a second prototype focusing on these problems?) Yes we all identified the major issues and each then brought unique ideas to the table so there was a wide range of improvement points. 4. Was the evaluation process easy to follow and appropriate to achieve the results you wanted? Yes quite straight forward to follow the script covered all the actions a user would normally perform on the system. 5. Any further comments? Would have been useful if the priority of each improvement was decided on to pick out the most important points. APPENDIX E2: Participant 2 Feedback Evaluation Feedback Name: Participant 2 1. How useful was the overall evaluation for you? It was helpful as the process was well structured, which enabled us to focus on key issues. It was encouraging that all 3 evaluators identified some common problems. The discussion of what could be done to further enhance the application was useful. [70]

77 2. Were there any outcomes you found to be particularly surprising or useful to you? Not really. Having been involved in the design, there were a couple of things that I thought were reasonably clear, which it turned out were confusing to users, but mostly it was as I expected. 3. Do you feel that the main objective of the evaluation was achieved? (that is to find usability issues with WebDANTE in order to design a second prototype focusing on these problems?) Yes, but the challenge now will be to write this up and communicate the ideas for the next phase. 4. Was the evaluation process easy to follow and appropriate to achieve the results you wanted? Yes, very well organised. 5. Any further comments? The key task now is to collate all the ideas in a systematic way and communicate them clearly, since there will not be time to do the development work itself. In design, there is always a need for visual specifications/early stage concepts/prototypes, which can only be overcome if the client and programmer work very closely and iterate frequently (how Web DANTE was developed to this stage). However, it is much more common to have a team working and then you need to have better processes. APPENDIX E3: Participant 3 Feedback Evaluation Feedback Name: Participant 3 1. How useful was the overall evaluation for you? The evaluation was useful as it was a good chance to think about the potential for webdante and its further development. It was useful to discuss the usability issues and solutions for the future when somebody has more time to work on it. 2. Were there any outcomes you found to be particularly surprising or useful to you? I thought that it was useful to discuss the improvements which could be made to make it more useable to a layperson. For example, the help manual and portion size guides. 3. Do you feel that the main objective of the evaluation was achieved? (that is to find usability issues with WebDANTE in order to design a second prototype focusing on these problems?) Yes It seemed that the main issues were uncovered with suitable solutions. [71]

78 4. Was the evaluation process easy to follow and appropriate to achieve the results you wanted? It was a very good evaluation form and easy to follow. As someone without a technical background I found it fine to work through. I thought the focus group session was useful as well in thinking about these issues and well facilitated. 5. Any further comments? [72]

79 APPENDIX H Storyboard Design 1 The storyboard designs that have been included here for the first iteration are the User Preferences Section as this has significant changes from the storyboard design 2. For the other storyboards, only small changes were made, so a copy of these has not been added here See design specification for the final design of these storyboards. Click here to go to User Preferences User Preferences -User Preferences -My Favourites -Personal Targets -Build a Meal -Rewards To customize your profile to suit your needs, click on one of the following buttons to change your preferences. My Favourites Change the way your My Favourites section is displayed Personal Targets Set some personal targets that will help you with your diet Click on any of these buttons to go to that section Build a Meal Rewards Select a group of foods to create one meal to save time in adding all the foods separately Receive points from your supervisor when you are progressing well. Get enough points and we ll offer you a surprise reward User Preferences -User Preferences My Favourites: (Change the way you see what is listed in your favourites by removing, grouping or reordering the list) User Preferences -My Favourites -Personal Targets -Build a Meal -Rewards Sort: Grapes, Average Pizza, Cheese & Tomato Chips, French Fried Click here to sort your favourites alphabetically or chronologically. -User Preferences -My Favourites -Personal Targets -Build a Meal -Rewards My Favourites: (Change the way you see what is listed in your favourites by removing, grouping or reordering the list) Sort: Grapes, Average Chronologically Alphabetically Pizza, Cheese & Tomato Chips, French Fried Save Delete Save Delete User Preferences -User Preferences My Favourites: (Change the way you see what is listed in your favourites by removing, grouping or reordering the list) User Preferences -My Favourites -Personal Targets Sort: Alphabetically -User Preferences My Favourites: (Change the way you see what is listed in your favourites by removing, grouping or reordering the list) -Build a Meal -Rewards Chips, French Fried Grapes, Average -My Favourites -Personal Targets -Build a Meal Sort: Alphabetically Chips, French Fried Pizza, Cheese & Tomato Click save to save changes -Rewards Grapes, Average My Favourites has been updated Pizza, Cheese & Tomato Save Delete Save Delete [73]

80 User Preferences User Preferences -User Preferences -My Favourites -Personal Targets -Build a Meal Personal Targets: (Use this space to set your own personal targets which will appear in your feedback reports to help you stay motivated). -My Favourites -Personal Targets Build-a- Meal: (Create a meal by adding items of food together to make it easier when entering your food log) Meals: -Rewards -Build a Meal Chicken curry and rice -Rewards Sausages and Mash Enter any personal targets you want here. These will be displayed in reports detailing feedback. Save Create New Meal -User Preferences -My Favourites -Personal Targets -Build a Meal -Rewards User Preferences Build-a- Meal: (Create a meal by adding items of food together to make it easier when entering your food log) Search Food: Add Search foods from database and click add to Potato add to meal group. Cheese Users can add food items to create meal groups here to save time in data entry. They enter a name for the meal and delete/save groups made. -User Preferences -My Favourites -Personal Targets -Build a Meal -Rewards User Preferences Enter Meal Complete Dialogue box to confirm action taken by users. Beans Name Meal: Jacket Potato Save Delete Once a meal has been created, users can save or delete this. -User Preferences -My Favourites User Preferences Rewards This page shows a reward system where users can view points received by their supervisor. -Personal Targets Upload a meal to food log -Build a Meal -Rewards Points received by supervisor = 4 Click here to add a meal that you have created in Build-a-Meal section. Collect 6 more to receive a free surprise reward [74]

81 APPENDIX I Evaluation of Iteration 2 Feedback This appendix shows the collated feedback from the participants on the storyboard designs (iteration 2). These are the questions that assisted the walkthrough. The storyboards used to carry out the walkthrough can be found in Appendix H. 1. Any further changes required to any of the designs? - Not sure why the report summary is in message settings. Maybe have a completely seperate tab for reports because its probably the most important part of the system where users can view their statistics? - Maybe split the forum up into categories? - Rewards section should not be under user preferences as this isn t something that the user can change. May still be kept under manage account. The design does not show the reward interface for the supervisor which would be different to the patient view. 2. Any problems found? - 'Privacy Policy Contact Us' links near the bottom still need to be made clearer. Needs more contrast with background colour. - No action button exists to add message to forum 3. Isit clear what actions to take? It is reasonably clear but maybe add numbers to each section so users know what order to fill them in. 4. On a scale of 1-5 (5 being high), how well do you think these storyboards have been designed? 4 (Average score) 5. On a scale of 1-5, how do you rate the experience when using the functions? 4 (Average score) 6. Do the new designs solve issues found in the initial evaluation? and have the original requirements been met? Yes... with just a few tiny issues to do with the prototype 7. Any further comments? [75]

82 The new prototype has a number of features that will increase the usability of the system a lot. In particular I like the 'build a meal' option. It will save users a lot of time and encourages them to keep using it. The rewards are also a good idea. I think it would be good to categorise the forum as people post about many different topics and putting them all onto one page may make it hard for users to browse. When they are looking for a specific topic they can use the search, but for general browsing it would be good to split. [76]

83 APPENDIX J Design Specification Attached is the design specification that was presented to the owner of WebDANTE. This specification will be passed on to the developers to review and will help them with the implementation of WebDANTE v.2. [77]

84 Design Specification for WebDANTE v.2 F.A.O: Alison Marshall & the development team of WebDANTE. Author: Hemma Patel Date: 20/04/10 [78]

85 Contents 1. Design Brief 2. Requirements Specification 3. Checklist for design of usability problems 4. Storyboard designs 5. Detailed Design [79]

86 1. Design Brief The current version of WebDANTE is running as a pilot and feedback on this application will help the development team to improve the system. From meeting with Alison Marshall, it has been decided that a design for a second version of WebDANTE is required. This new design should improve the application in terms of usability and utility- making it more efficient to use. As the current version has not yet been evaluated, this specification will provide valuable feedback on the current prototype. The steps taken to produce the design for a second prototype were through: Understanding the requirements of WebDANTE and presenting a more detailed set of requirements for version 2 Conducting an evaluation of the current system through analytical inspection to identify usability problems Using the evaluation to design a new prototype of WebDANTE Evaluation of this new design and consider the architecture for the design to aid in implementation 1.1. Method The new design was produced following an in-depth evaluation of the current system. In order to evaluate the current version of WebDANTE, the requirements for this version were reviewed and after a meeting with Alison, it was decided to produce a more detailed set of requirements for the new version. (See section 2 for the requirements specification). Following this, the requirements were used as evaluation criteria to evaluate the current system. Using analytical methods of heuristic evaluation and walkthroughs, an evaluation was conducted with 4 participants (representing the stakeholders of the system). From the evaluation, a list of usability problems were identified (See section 3 for the list of all issues) and the main problems were addressed in the new design such as there being no help section or method of feedback between patient and supervisor. The design consisted of 2 iterations to ensure all the requirements were met and to evaluate the design and make amendments where necessary. The feedback from the evaluation phases are not described but any problems identified were resolved in the second iteration and any further requirements have been added to the checklist of problems. The design from the second iteration was produced as storyboards on PowerPoint and a copy of these [80]

87 will be sent electronically. The storyboards (section 4) show the features of the new design following a step by step process and should enable you to see how the new prototype will work. The new design was kept consistent with the current version of WebDANTE in terms of layout and page design. Following the storyboard designs, a detailed design has also been written which considers the architecture for the new prototype and the design for the data tier. This detailed design will aid with the implementation of version 2. [81]

88 2. Requirements Specification 3. Enable individuals to monitor/obtain real time feedback on dietary intake Allow individuals to search for foods easily using the search function by typing in exact text matches for the word or part of the word to make options visible. Use a database of validated foods to make it easier to enter specific foods and to keep entries consistent without confusion. Allow food that is regularly entered into food logs to appear in my favourites so that it saves time in searching the database every time the user enters data. Allow the user to select from a choice of portion sizes for each food item, based on standard practice, to aid the user in estimating quantities. Allow the user to override the standard portion size choices by entering an exact amount in grams. Enable users to search through their food logs using the calendar to review past entries for self monitoring and allow them to edit/delete entries. Review diet daily summary details such as intake of protein, calories, carbohydrates, etc., compared to guideline daily amounts (GDAs) consumed to help monitor and amend diet should they need to. To enter food log giving portions and date and time of meal so that it can be stored and remembered for later use. Allow users to log into their own profile with a user name and password to keep data secure and confidential so that only their dietician can review their profile if they wish. To make the interface simple and easy to use by clear tabs and entry functions so that is efficient for patient to easily enter and monitor their health. Provide guide/instructions to help novice users in using the site effectively. Enable the user to maintain a food blog by data entry by SMS, MMS or manual entry, including text and pictures. [82]

89 Enable the user to manually transfer details from the food blog to the food log database through a simple split screen. Enable the user to update personal information, including GDAs, physiological information and personal data. 4. Enable dieticians/ health professionals to view remotely, individuals users diets and hence provide more detailed guidance Create higher level of users (super-users or administrators) who can view a group of individual users. Allow dieticians/health professionals to select individual users and view their food logs regularly and easily without personal meetings and thus enabling them to provide feedback & guidance more often. Allow individual users to share their food blogs with super-users if they wish. [83]

90 5. Checklist for the New Design From the evaluation of WebDANTE version 1, a list of problems were identified. These are presented below and have been split into sections based on the heuristics they were measured against. The checklist below describes the problems identified and the possible solutions, where possible, with a check list for the design and implementation so that you can see which problems the new design has covered. None of the features listed have been implemented, but this checklist should be completed as implementation takes place. Additional features/enhancements that were discussed in the evaluation phases of the new design have also been included here: Visibility of System Status Usability Problem Possible Problem Solution Design Implement When submitting an entry, the system Dialog box to confirm user action doesn't confirm whether the user wishes to take this action, so if user before action is carried out to prevent error/mistakes. clicks submit by accident, system will automatically submit data. Small font and contents of each page Increase font size and vary font aren't clearly described. sizes so that headers or more important things stand out. Not clear which page the user is Selected pages should have their currently on as page headers, tabs header or page tab stand out aren't highlighted when selected. either in bold or maybe by shading in the tab so that the user knows which page has been selected. Header is quite small and different to Keep terminology consistent or the header you click on the tab bar. add brief explanations at the start (i.e. user clicks on 'your diet diary', of each page. but header on the side of page reads 'Food Log' causing inconsistencies). Match Between System and Real World Usability Problem Possible Problem Solution Design Implement [84]

91 Not clear what portion is to the user. Although there are different portion sizes to choose from, there should be some guide to help users decide on portion sizes. -Online guide explaining terminology used and how users should enter data. -Examples of the data users need to enter for each entry form. Consistency & Standards Usability Problem Possible Problem Solution Design Implement Phone sections can confuse users. Display window for phone where users can view/add messages but then under your 'diet diary' user can enter phone data which is quite confusing. Either put all phone information on one page in the same section to stop confusion or put a hyperlink, linking the pages together. Doesn't have a list of everything in the Expand database to include a wider food database, and if it's not in the list range of terms or allow users to then the user is unable to enter it. e.g. enter something that is not in the When entering pizza, it was found that there was only an option of cheese and tomato as a topping. database. Problem with this is that the system may not be able to provide information on diet as they will not have it recorded. No structure to the database so hard to find things. Some structure required such as categories when listing items so search is easier to recognize. Recognition rather than Recall Usability Problem Possible Problem Solution Design Implement Calendar doesn't highlight/mark days Calendar should use bold text or a of entry so if a user does not enter their diet regularly, it is difficult to different colour to mark which days user has entered a food log so that review unless they remember date of instead of looking through the whole entry. calendar, user can more easily see dates of entry. [85]

92 User can review food log i.e. food they have eaten and their actual diet (intake of calories, sugar etc.) but these are displayed in separate windows and the user is required to switch between pages to see what they ate against the diet information. Privacy policy and contact us is not very visible at the bottom of the screen. Unreliable MMS; phone number and instructions only listed on homepage. Diet page should maybe list what was eaten so that the user can see/compare products to their diet. Number and instructions should be repeated on add message screen not just the homepage. Flexibility & minimalist design Usability Problem Possible Problem Solution Design Implement Instead of being able to undo an action straight after data entry, user has to select 'review food log' from the menu and delete/edit entry from -Function should be alongside the food log. - Disable submit after log entry or clear entry screen to prevent users there which is a long process and not from submitting the same entry immediately clear that the user has to accidentally. navigate to a different display window for this. 'My favourites' section food items automatically get entered into this section after having been entered -User should be able to set preferences where they can select items to be stored under 'favourites' once rather than actual favourites that or the system should only place the user has chosen or items which items into this section after the user have been selected regularly, making has entered it a set number of times the list quite long. e.g. after entering a cup of coffee into food log 10times, system can then add it to favourites. [86]

93 -Order favourites in alphabetical order rather than chronological for better structure. No feedback method through the Should be a messaging system of application between the user and the some sort enabling users to interact health supervisor. They would need to with their supervisors where they get in touch via /phone to can ask questions, receive feedback provide feedback or discuss etc. Either a messaging system or problems, limiting the system. real time messaging that allows conversations between the user and supervisor. Spaces between the search box and food log results could be bigger as information looks cramped. More general use of bold fonts or larger text. Not clear where users can allow Maybe should appear on other supervisors to view their profile as it is pages or inform user in the guide as under manage account. to where it is. Help and Documentation Usability Problem Possible Problem Solution Design Implement No help section/online guide for - Online help section which gives a users explaining how to use the brief guideline on how to use the web application or for users to get system and a set of predefined FAQs help with problems. answering common queries from users. -Good to show steps to add items to diary on screen. No section for users to post queries Forum section where users can post questions or discussions and allows interaction with other users/monitors. [87]

94 This can help users engage with people with similar problems and opens up discussions that may be of use to all users. Some further features/design that were considered in the evaluation phases of the design are as follows. These are not resolving problems identified in the evaluation of version 1 but features that will help to enhance the system for users. Scanner device on mobile application so foods can be scanned instead of typing data Build a meal function so users can add meals when entering food logs to save time in data entry Add auto complete to fields when entering food items to save time Message notifications to alert patients if they have missed a meal Split forum into categories to make it easier to find messages Personal notes section that allows users to write additional comments when entering data (e.g. how they felt when eating a particular food) Reward system motivate users with diets by a points system which offers a reward when a certain number of points are collected Design Implement The storyboard designs for WebDANTE v.2 are shown in the next section. These should aid in the implementation of version 2. Positive Features of WebDANTE [88]

95 Positive features of version 1 were also identified in the evaluation to ensure that these are kept the same in the new version. 2. Inactive fields become disabled 3. Good colour scheme 4. My Favourites section saves a lot of time as it lists all the items entered before. 5. Good update to notify user when changes have been made 6. Users are able to view data entered through the phone and edit this. [89]

96 6. Storyboard Design for Version 2 An electronic copy of the storyboard designs have also been sent so that the functionality of the new design and features can be seen. After 2 design iterations, the storyboard designs in this specification resolve the main usability issues that were identified through the evaluations. The requirements specification has also been evaluated and the new design meets all the requirements specified. Viewing the electronic version of the storyboards will provide a better understanding of the functions of the new design. The design for the following features has been created: Messaging Section this resolves one of the main problems identified in the evaluation of providing feedback through the system. The messaging section also includes a forum section to allow discussion to take place between users; the storyboard for this design will show all the features within this section. (Storyboard 1) Help Section this is another key feature required to make the system more efficient. Version 1 did not include a help section and this was a major weakness. The design for the help section (Storyboard 2) includes a Getting Started Guide which provides information on the different sections of WebDANTE and how to use them. An FAQs section is also included giving answers to the most common queries and context sensitive help has been implemented across the system to assist with data entry. Personal Notes This is a feature that is to be added in the data entry section when entering a food log. The purpose of this feature is to enable users to record any extra notes with their food log, for example, how they feel when eating certain foods. These notes can help users to identify why they have eaten certain foods or how eating something makes them feel. This text will then appear when reviewing the food log. Again this feature is only necessary for patients as they are the only users that need to enter food logs.(storyboard 3) The user preferences section will be added to the Manage Account section as a separate sub menu within this where users can manage their profile and account settings. The preferences section will only be designed for use by patients as supervisors do not need to use these features.under user account are 3 sub menus of this: My Favourites, Personal targets, Build a meal. An additional feature under [90]

97 Manage Account is a Rewards section where patients can receive points to receive a prize. The idea of this is to motivate them with their diets (Storyboard 4) STORYBOARD FOR MESSAGING SECTION: Click Message tab on the homepage to view and send messages. Message tab is shaded to show the user which display page they are on. Side menu lists the sub menus within messages Messages -Inbox -New Message -Settings -Forum Inbox To delete a message from your message list, click this box to highlight the message Inbox page lists messages, along with who sent them, date sent and check boxes to select the message so the user can delete. Privacy Policy Contact Us Delete Delete button is inactive until a message is selected Privacy Policy Contact Us Messages -Inbox -New Message -Settings -Forum Inbox Message is shaded as it has now been selected. Messages -Inbox -New Message -Settings -Forum Inbox To view a message click on the message you wish to view. Delete Now click on delete button to delete the message. Delete Privacy Policy Contact Us Privacy Policy Contact Us Messages -Inbox -New Message -Settings -Forum Message is displayed here, with the subject, date sent and who sent the Inbox message listed at the top. Diet Feedback From: Alison To: Sent: 22/02/10 To reply to the message click on the reply tab. User can also click on Message is displayed here along with who sent it and date sent above. new message tab on the left hand side. Messages -Inbox -New Message -Settings -Forum When a tab in this menu is selected, the text appears in bold to inform the user what screen they are on. Subject: New Message To find the address to send message to, user can either enter name or search address book by clicking on the To button. Reply Privacy Policy Contact Us Privacy Policy Contact Us [91]

98 Messages -Inbox -New Message -Settings -Forum New Message Alison Marshall Hemma Patel Michelle Carter Xgjgkjj hjyjjukk Aswad treyrtj Sdddd aaaaaa Aaaaaaa bbbbbb Select the contact you wish to send the to by clicking on the name Messages -Inbox -New Message -Settings -Forum New Message Hemma Patel Click on send when message is complete to send the message. Alternatively click on cancel if you do not want to send message this will take you back to message inbox. Clicking on To displays all other users of WebDANTE and messages can be sent to any other users of the system unless they have privacy settings. Privacy Policy Contact Us Privacy Policy Contact Us Messages -Inbox Inbox Once a message has been sent, application goes back to Message homepage, which is the inbox Messages -Inbox New Message Hemma Patel -New Message -New Message -Settings -Settings -Forum -Forum Click on Settings to edit message settings. Sub menus become inactive until user confirm message in dialogue box Click OK on message confirmation. Privacy Policy Contact Us Privacy Policy Contact Us Messages -Inbox -New Message -Settings -Forum Message Settings Receive text alerts when you get a new Receive a daily summarising your daily intake Receive a weekly of your progress Allow other users (other than your health supervisor) to send you messages? Select options as you wish and click on save to save settings. Messages -Inbox -New Message -Settings -Forum Message Settings Receive text alerts when you get a new Receive a daily summarising your daily intake Receive a weekly of your progress Allow other users (other than your health supervisor) to send you messages?? Icon next to receive a weekly shows the user an example of the type of report they would receive. Click on the button to view. Save To view the forum section, click here Save Privacy Policy Contact Us Privacy Policy Contact Us Messages -Inbox Back to Settings Report Summary Example of a weekly report summary (patient view) that users can have the option of receiving by . Report shows all the food eaten that week, along with a graph to show progress. Users can also click on the history bar to see a list of past reports. This will enable to compare and track progress -New Message -Settings -Forum To view the forum section, click here List of food eaten in that week Series 1 Series 2 Target History Target The Target icon will show the user any targets they have set Messages -Inbox -New Message -Settings -Forum -Post Message Click on Post Message to add a new message. Users can type in keywords in the Forum search bar to search for past messages they want to view/post to. Search To view a post, click on the message. Date Message Author No. of Posts 17/02/10 Best Diet Plan? Hemma 3 19/02/10 Diet Tips Alison 3 20/02/10 Anyone else. Hemma 2 No. of Posts shows the number of people who have posted a thread to the message. Privacy Policy Contact Us Privacy Policy Contact Us [92]

99 Forum Messages Forum -Inbox -New Message -Settings Subject: Best Diet Plan Author: Hemma Posted: 17/02/10 Messages -Inbox -New Message -Settings -Forum Subject: -Forum -Post Message Does anyone have any good diet tips they would like to share? Re: Tom Posted: 23/02/10 -Post Message Add Post Allow other users to add to post? Post Privacy Policy Contact Us Privacy Policy Contact Us Message Section Report function & Create message for Health Supervisor Report summary that health supervisors receive by showing progress of the patients they monitor. Clicking on the patient link at the side will give further information on the patients diet. Messages -Inbox -New Message -Settings -Forum -Post Message Back to Settings Report Summary Patient 1 Patient 2 Patient 3 Patient 1 Patient 2 Patient 3 Patient 4 Click on a patient to get a more indepth review of their diet Messages -Inbox -New Message -Settings -Forum New Message Group Hemma Patel Aaaaa ccccc Alison Marshall Clicking on To displays all other users of WebDANTE and messages can be sent to any other users of the system unless they have privacy settings. Select the contact you wish to send the to by clicking on the name or can send to group by clicking on group which saves time in entering each contact Privacy Policy Contact Us Privacy Policy Contact Us STORYBOARD HELP SECTION: User can click the help guide before logging in to view how to use the site. Help? Once logged into the homepage, you can click Help? from the menu. Help? Alternatively log in to use the application Privacy Policy Contact Us Privacy Policy Contact Us [93]

100 Help? Help Section -Getting Started -FAQS -Post a Question Click on FAQs tab to see frequently asked questions and to ask for help. Help? The help section takes you straight to the Getting started page which explains how to use each section of WebDANTE. Getting Started Guide Welcome to WebDANTE. If this is your first visit take look at this guide to help you in using the system. There is also help available across the pages to assist with data entry Your Diet Diary Here you can enter food logs of what you ve eaten. Use the search function to search key words and select the matching option. Then enter the portion size on the right hand side Your Phone Messages Here you can view or add to messages that have been uploaded using your mobile. Any messages sent via SMS/MMS will appear in this section which you can then view or add to. Help Section -Getting Started -FAQs -Post a Question FAQs What do I do if something I ve searched for doesn t appear as an option? How do I edit data entered from the phone? Can other users see my profile and diet information? Click on the I keep getting a log in error? question you need, to view the answer Help? Manage Account You can edit profile details in this section. Still having trouble? Send us a message with your query and we ll get back to you as soon as possible Privacy Policy Contact Us Privacy Policy Contact Us Users can post a question or ask for help by ing support. This page will be linked to the Messages page ; New Message but users will be able to send the message from this page rather than being navigated to a different display page. Help? Help? Help? Help? Help Section -Getting Started -FAQs -Post a Question FAQs What do I do if something I ve searched for doesn t appear as an option? If you search for something in Your Diet Diary that you wish to enter in your food log and it doesn t appear, please choose the option that you think is most similar to what you want. You can also send us a message telling us of the food/drink you would like to see on the list and we will do our best to add it to the options. Help Section -Getting Started -FAQs -Post a Question Subject: WebDANTE Support By clicking on Post a Question, users will automatically be taken to this page to post a question and the To box will already have WebDANTE Support in so users do not need to find who to send message to. Privacy Policy Contact Us Privacy Policy Contact Us This page shows the use of context sensitive help across the application to help users with some of the functions such as data entry. Help? Help? Help? Help? Help Section WebDANTE Support -Getting Started -FAQs Subject: -Post a Question This help button can help a user with what to enter in the search field. Click on the button for a brief description. Privacy Policy Contact Us Privacy Policy Contact Us Help? Click button again to close description box. Help? Type in keyword such as Chicken in the search bar and click search. Will then search for all foods with chicken in it. Privacy Policy Contact Us Privacy Policy Contact Us [94]

101 STORYBOARD FOR PERSONAL NOTES FUNCTION: Click on this tab to go to your diet entry page Personal Note: Type in additional notes if necessary to record in food log. Add Privacy Policy Contact Us Note: Busy day so didn t get time for lunch. Ended up eating crisps. Notes entered in Enter Food Log page will appear here alongside food log entry. USER PREFERENCES STORYBOARD: Click here to go to User Preferences User Preferences -User Preferences -My Favourites -Personal Targets -Build a Meal -Rewards To customize your profile to suit your needs, click on one of the following buttons to change your preferences. My Favourites Change the way your My Favourites section is displayed Personal Targets Set some personal targets that will help you with your diet Click on any of these buttons to go to that section Build a Meal Rewards Select a group of foods to create one meal to save time in adding all the foods separately Receive points from your supervisor when you are progressing well. Get enough points and we ll offer you a surprise reward Privacy Policy Contact Us Privacy Policy Contact Us [95]