MyHealthyLivingApp was developed after carefully considering all the usability problems encountered by users in Study 3 (see Chapter 4) in the evaluation of MyDrinkApp, as well as their comments and suggestions for the re-design of the app and users’ opinions and
preferences for the interaction techniques for number entry tasks in Study 4 (see Chapter 6).
MyHealthyLivingApp was developed using Web-based technologies including Hypertext Preprocessor (PHP), Cascading Style Sheet (CSS), and JavaScript, as well as MySQL as the database system. The app uses a responsive Web design approach that supports dynamic adaptation of the app interface to a device’s characteristics (for example the screen size and device orientation).
The font size for the text was at least 18px. The target size for the buttons was at least 1.5cm (height) x 1.5cm (width) each (Kobayashi et al., 2011). The gap in between targets was at least 5mm (Jin et al., 2007). All text was black on a white background.
The features of the MyHealthyLivingApp consist of the ability to create a profile, update FV and liquid intake, view congratulation messages upon reaching a daily target, view progress on FV and liquid intakes, and read tips on healthy living particularly the importance of FV and proper hydration. To maintain consistency, avoid confusion and reduce mental demand, the design to update intakes, view congratulation messages, view intakes progress, and read tips were similar for both FV and liquid.
Main Screen
The users in Study 3 did not favour the dark blue background colour for the Main Screen.
The background colour in MyHealthyLivingApp was therefore changed to white. The image was also changed to suit the context of use of both eating FV and drinking liquid.
Figure 7.1 shows the Main Screen for MyDrinkApp and Figure 7.2 shows the Main Screen for MyHealthyLivingApp.
Figure 7.1. The Main Screen for MyDrinkApp
Figure 7.2. The Main screen for MyHealthyLivingApp
Set Profile
The users in Study 3 were concerned about providing information such as their email address, password and username to create a user profile. Thus, in the MyHealthyLivingApp, users were given a unique username to log into the app. To complete their profile, users needed only to provide their name, gender and liquid
measurement preference. To set their name, an input box was designed. To set their gender, a pull-down menu with the option of “Male” and “Female” was designed. To set their liquid measurement preference, a pull-down menu with three preferences was designed. The preferences included cup, glass, and pint glass, as suggested by the users in Study 3. Users could update their profile, if needed, on the “My Profile” screen.
Home Screen
The users in Study 3 did not like the use of the blocks of buttons in the Home Screen in MyDrinkApp (see Figure 7.3) and suggested using a list style to present the features. The users were also confused with the naming of the buttons. Therefore, for MyHealthyLivingApp (see Figure 7.4), a list style was used to present the features in the app. To ease the understanding of each feature, a brief explanation was given underneath each feature.
In both the previous apps, users could add their intake, view their progress and read tips.
Figure 7.5 shows the list of features for “My Liquid Intake App”.
Figure 7.3. The Home screen in MyDrinkApp
Figure 7.4. The Home screen in MyHealthyLivingApp
Figure 7.5. List of features for the My Liquid Intake App in MyHealthyLivingApp
Updating intakes
A number of users in Study 3 raised concerns about setting their own daily liquid intake recommendation. To address this, I referred to the British Nutrition Foundation (BNF)26. BNF recommends drinking 1.6L of fluid per day for women and 2L of fluid per day for men. For the FV, I referred to the National Health Service (NHS)27 5-A-DAY campaign, which recommends five servings of FV per day.
26 https://www.nutrition.org.uk/healthyliving/hydration/healthy-hydration-guide.html
27 http://www.nhs.uk/Livewell/5ADAY/Pages/5ADAYhome.aspx
Users in Study 3 suggested having different measurement options for updating liquid intake. Three options were designed to meet this requirement. Figure 7.6 shows the designs using cups, pint glass and glass as the measurement option. The number of these items tallies with the recommended liquid intake given by BNF.
Figure 7.6 (from top to bottom): Updating liquid via(a) cups, (b) glass, and (c) pint glass in MyHealthyLivingApp
To update intakes in MyHealthyLivingApp, I referred to the users’ opinions and preferences in Study 4. The use of buttons for number entry tasks was found the fastest for the iPad. The users were also more satisfied, confident, and thought they were faster to complete tasks when using buttons compared to other interaction techniques, especially the picker. The use of buttons was also found to be easier than the keypad and picker.
Thus, to update intakes, four buttons were designed. To update liquid via cup (see Figure 7.6a), the “add ½ cup”, “add 1 cup”, “remove ½ cup”, and “remove 1 cup” buttons were designed. Similar buttons were designed for the glass option (see Figure 7.6b). For the pint option (see Figure 7.6c), the “add 1 pint” and “remove 1 pint” buttons were removed as 1 pint is 560ml, and this could be a large volume to be drinking in one sitting, especially for older adults. All “add” buttons were green, and all “remove” buttons were red. To update the intakes, user would just simply tap on any of the buttons.
The users in Study 3 were concerned about the amount of instructions and feedback messages available throughout the MyDrinkApp. Therefore, in MyHealthyLivingApp an instruction to do a task is only provided at the beginning of a task and immediate feedback is given after completing a task.
Figures 7.7 to 7.9 show the process to update a FV intake. Figure 7.7 shows the add FV screen in MyHealthyLivingApp. The instruction to update an intake, at the top of the screen, appears only once each day. Upon updating an intake, the daily progress is shown in two options: 1) a text message showing the number of servings and the total percentage of the overall daily target (located at the top of the screen, replacing the previous instruction on how to update an intake) and 2) the colour change in the images of the hearts (see Figure 7.8).
Figure 7.7. The instruction how to add an intake appears only one time each day in MyHealthyLivingApp
Figure 7.8. Immediate feedback of daily progress is displayed in both text and images upon updating an intake in MyHealthyLivingApp
Upon reaching the daily target, a congratulation message is shown (see Figure 7.9).
Figure 7.9 The congratulation message is shown upon reaching the daily target in MyHealthyLivingApp
There are two options to view one’s progress in MyHealthyLivingApp. The first option is a coloured list of all consumptions (see Figure 7.10a). The second is a coloured chart of the last seven consumptions (see Figure 7.10b). The use of the traffic light metaphor to represent progress is similar to that used in MyDrinkApp.
Figure 7.10 (from left): The two options to view one’s progress (a) coloured list of overall FV consumptions, and (b) coloured chart of the last 7 FV consumptions in MyHealthyLivingApp
There were two options to read tips about healthy eating and drinking. For example for tips on healthy drinking, the first option is by tapping the “More Information on liquid intakes!” button (see Figure 7.4), which brings the user to a screen that consists of a series of buttons that link to external websites (e.g. NHS, BNF) about liquid consumption. The
second option is when each time users update a liquid consumption, the tips at the bottom of the screen change randomly (see Figure 7.6). The second option also features on the progress intake screen (see Figure 7.10a). However, since there is no interaction apart from scrolling the progress list on this screen, only one tip is randomly provided each time the users view this screen. The tips were all taken from reliable sources in the UK such as from the NHS and BNF.
7.2.3 Experts
Three experts participated in the CHE. They were members of the HCI Research Group in the Department of Computer Science, University of York. One expert was a professional and two experts were postgraduate students in the group. All the experts had experience with CHE and with interactive systems for older adults. Two experts were Apple users and one was an Android user.
7.2.4 Evaluation Tasks
Five tasks were designed for the experts to use in the evaluation. Each task was situated within a realistic scenario of use. The tasks and scenario can be found in Appendix 24.
Each time an expert proposed a potential usability problem, all experts would then match the problems with the heuristics developed by Petrie and Power (2012). All experts would then privately rate its severity problem using a five-point scale, where 0 = no a problem in that expert’s opinion, 1 = very minor, 2 = minor, 3 = moderate, 4 = major and 5 = very major.