of the design considerations involved in developing a ... a relatively simple navigation system. ... drawings from Adobe Illustrator to Photoshop for the addition.
Design Considerations in the Creation of a User-Tailored Meal Visualization Tool for Adolescent Girls with Eating Disorders
Desmond Ballance and Jodie Jenkinson
In response to the absence of effective media-based nutrition counseling resources for adolescents with eating disorders, MyMeal – a web-based, user- tailored, interactive meal-visualization prototype, was developed. Its intended purpose is to offer teenaged girls the opportunity to become comfortable with food portion size and to practice creating balanced meals. The tool allows users to create personalized daily meal plans and access feedback about the number of servings from each food group they have included in their daily diet, compared with national recommendations. In this paper we discuss the some of the design considerations involved in developing a WRROWRDGGUHVVWKHVSHFL¿FQHHGVRIWKLVDXGLHQFH
Introduction Nutrition counseling is a critical part of the recovery process for adolescents coping with eating disorders. Food guides, three- dimensional models, and sample meal menus are often used to teach teenagers about healthy portion sizes, but none provides the necessary visual context for a balanced meal, complete with proper serving sizes. Since people with eating disorders have demonstrably abnormal perceptions of the size of food portions, a meal visualization tool could help these individuals feel more FRPIRUWDEOHDQGFRQ¿GHQWDERXWWKHUHODWLYHVL]HVRIIRRGSRUWLRQV by helping them understand what these portions look like as part of a balanced meal. Existing visual nutrition references tend to be limited in their ability to: a) provide adequate representation of food portion size in the context of a complete meal for adolescents with eating disorders and b) enable them to comfortably practice making appropriate food choices using a cost-effective and accessible tool (Ballance and Jenkinson 2010). The purpose of our research is to explore the development of an electronic interactive meal visualization program that addresses these concerns. Our goal was to design a user-tailored planning prototype, integrating portion control, daily feedback and meal tracking functionality. MyMeal was designed as a user-tailored, interactive, meal- JBC Vol. 36, No. 3 2010
visualization web application that offers teenaged girls the opportunity to become comfortable with food portion size, practice creating balanced meals, and better understand what the components of a “normal” meal should look like on a plate. The end user can then create personalized daily meal plans by selecting food items and dragging them onto the appropriate tableware. The user can also access feedback about the number of servings from each food group she has included in her daily meal plan, compare it to the recommended range of servings for a single day, and make adjustments to personalized menus as necessary. When the user’s daily meal plan is complete, it can EHVDYHGWRDVSHFL¿FFDOHQGDUGDWHRUGDWHV7KHXVHUFDQWKHQ access these saved meals for future referencing or editing as desired.
Design considerations MyMeal was designed to address the functional concerns of meal planning as well as the psychological concerns commonly associated with eating disorders. Functionally, the design needed to accommodate the numerous elements of the program, including a complete place setting, food menus, a portion-sizing scale, a meal-log and daily feedback window, while maintaining a relatively simple navigation system. Psychologically, it needed to appeal to an audience of individuals who are highly sensitive to the visual appearance of food. The interface was designed to incorporate a meal-planning zone in the centre of the screen, where food items are ultimately positioned as the user plans a meal (Figure 1). Familiar components of a place setting, including a large and small plate, bowl, cup and cutlery were included in accordance with a healthy user’s mental model of a normal healthful meal. These elements were designed DV KLJKO\ VLPSOL¿HG ORZLQWHQVLW\ LQDFWLYH REMHFWV LQ RUGHU WR limit the interactive complexity of the program, minimize the visual noise and reduce the visual competition between the dishes and the food items. The white background of the user interface contrasts with the highly saturated colours of the food images, focusing the user’s attention on the meal items. This background also ensures that the colours used for the food images are IDLWKIXOO\ UHSUHVHQWHG DQG DUH QRW LQÀXHQFHG E\ VXUURXQGLQJ hues, since the colour of food can be a determinant of its selection for consumption (Hutchings 2003).
E95
www.jbiocommunication.org
Design Considerations in the Creation of a User-Tailored Meal Visualization Tool for Adolescent Girls with Eating Disorders
Figure 1 a) Graphical user interface and b)Meal feedback and tracking options.
To ensure that food images remained the user’s primary focus, many of the other interactive elements were designed to be simple and unobtrusive. For example, navigation items (menu lists, buttons, etc.) were designed with as little visual detail as JBC Vol. 36, No. 3 2010
possible in an attempt to reduce extraneous visual noise and focus the user’s attention on the food items within the interface. With the exception of food objects, all graphical user interface elements were designed to respond to a single mouse click. Typically, when a graphic object is activated by a user (when the mouse cursor is hovering over the object or the user has clicked upon the object), the object will provide feedback as an indicator of its activated state (a colour change, for example). However, the visual interaction and direct manipulation of the food objects by the user in the MyMeal program was designed to imitate and normalize the actual meal-planning process that is a common challenge for those recovering from eating disorders (Herrin 2003). Users are given direct control over food items and may “drag” them from one location to another. A drag-and-drop operation (pressing the mouse button, moving the mouse to a new position and releasing it) supports the user’s knowledge of real world activity (Apple Human Interface Guidelines 2006), is congruent with the user’s familiarity with the process of meal-planning, and raises the expectation that the food images could be moved into the meal-planning zone from their initial position on the screen. Similarly, the Trash icon, a familiar metaphor for disposal, implies that if a food image were dragged over top of it, the food would disappear from the interface. Since the visual representation of food is a major focus of the program, several different illustration styles were considered.
E96
www.jbiocommunication.org
Design Considerations in the Creation of a User-Tailored Meal Visualization Tool for Adolescent Girls with Eating Disorders While using photographic representations of food would have enabled the rapid production of an extensive food library, our SUHOLPLQDU\ ¿QGLQJV VXJJHVWHG WKDW WKLV DXGLHQFH PLJKW EH more receptive to a schematic representation. This is supported by research examining the impact of virtual environments on individuals with eating disorders, in which Lozano et al. (2002) found that more realistic food depictions evoked greater feelings of anxiety amongst users. Ultimately, a method was developed for producing non-photorealistic food items by exporting vector drawings from Adobe Illustrator to Photoshop for the addition of simple textures, highlights, and shadows. This proved to be WKH PRVW HI¿FLHQW PHDQV RI FUHDWLQJ DHVWKHWLFDOO\ UH¿QHG QRQ threatening, and visually consistent food images (Figure 2). Food portion sizes were based on Canada’s Food Guide for Healthy Living (Health Canada 2007).
Figure 3 Food portion scale and relative serving size.
of physical size (for example, area). Accordingly, circles of increasing diameter are used as an indicator of portion size, to aid the user in recognizing an order in the iconic values along a dimension and understanding the difference between “more” and ³OHVV´ )LJXUH ,QDQDWWHPSWWRIXUWKHUPLQLPL]HXVHU¿[DWLRQ on changes in portion size, the change in the iconic scale f rom the smallest to the largest circle was kept to a minimum. Thus, the portion-control tool addresses both functional and psychological needs of its user.
Formative Evaluation
Figure 2 Comparison between photographic and schematic representation of food items.
6W\OL]DWLRQRIWKHIRRGSRUWLRQVFDOHDOVRGHPDQGHGVLJQL¿FDQW experimentation as well, since adolescents with eating disorders often have a distorted perception of food portion size (Yellowlees et al. 1988) and struggle with increasing the amount of food in their diet during recovery. Currently, to our knowledge, no research has examined the visual representation of food portion sizes for individuals with eating disorders. The widely recognized symbols for small (S), medium (M), large (L) and extra-large (XL) were avoided because, while they are commonly observed in fast food restaurants, these symbols are rarely seen in everyday household food products, and standard treatment for eating disorders involves normalizing food as much as possible. &KDQJHV LQ YDOXH DUH RIWHQ H[SUHVVHG XVLQJ YLVXDO TXDQWL¿HUV such as shape, colour, and saturation. However, these visual features are not necessarily understood to represent changes in size or volume, which is the intended function of the portion- control tool. Rather, an ordered perception of size may be more readily conveyed using a variable that is more representative JBC Vol. 36, No. 3 2010
Preliminary evaluation of the MyMeal prototype was conducted as a case study involving a 13-year-old female patient and her health care team at the North York General Hospital, Toronto, Canada. The patient participant and both the psychologist and registered dietician assigned to her case were interviewed individually. Each was also invited to use MyMeal and provide feedback. The tool was very well received and a number of insightful suggestions were made to help guide its future development. These included ÀH[LELOLW\LQFRQWURORYHUSRUWLRQVWRUHÀHFWWKRVHPHDVXUHVXVHG by individual institutions (i.e. those not using the Canada Food *XLGH LQDGGLWLRQWRHODERUDWLRQRIWKHSRUWLRQVFDOHWRUHÀHFW conventional measurements (1/2 cup, 1 cup, etc.). The suggestion was also made that progress through the program be gated so that patients initially learn to be comfortable making decisions with non-realistic food representations and progress to photorealistic representations over time.
Potential Applications A meal visualization tool such as MyMeal could play a VLJQL¿FDQWUROHLQKHOSLQJDGROHVFHQWJLUOVZLWKHDWLQJGLVRUGHUV become more comfortable with choosing appropriate food portion sizes for a balanced meal, and ultimately help to normalize the meal-planning process. Several researchers have suggested that patients undergoing treatment for anorexia nervosa have some degree of visual misrepresentation when it comes to food portion size and quantity (Yellowlees et al. 1998, Vinai et al. 2004), a characteristic not too surprising given that many persons with HDWLQJGLVRUGHUVKDYHGLI¿FXOW\SHUFHLYLQJERG\VL]H
E97
www.jbiocommunication.org
Design Considerations in the Creation of a User-Tailored Meal Visualization Tool for Adolescent Girls with Eating Disorders Since this audience are known to have ongoing obsessive thoughts about food and eating, it is possible that misperceptions about portion size and meal size begin before the individual actually sees the food. People suffering from eating disorders VSHQGVLJQL¿FDQWDPRXQWVRIWLPHWKLQNLQJDERXWIRRGD¿QGLQJ WKDW ZDV ¿UVW GHPRQVWUDWHG E\ .H\V et al. (1950;; as cited by Bennett and Gurin 1982). The longer a person with an eating disorder thinks about food, the more time he or she has to develop misconceptions about food portion size and become apprehensive about a meal. Visualization tools are important in education EHFDXVHRIWKHLUDELOLW\WRFRQYHUWDEVWUDFWFRQFHSWVLQWRVSHFL¿F visual objects that can be mentally manipulated (McClean et al. 2005). Meal visualization may offer those with eating disorders a way of converting their misconceptions about food size into more representational, mental food objects that can be referred to and focused on as they become increasingly anxious about a meal. In addition to helping adolescent females with eating disorders recognize and address their misconceptions about food portion size, the MyMeal program may have the potential to help adolescents acclimatize to food and reduce their food phobias. Food phobia is a common characteristic among people with eating disorders and, as is the case with phobic associations, an attention bias to emotionally provocative stimuli is common;; for those struggling with eating disorders, this stimulus is food.
Future Developments Our preliminary investigation into the application of an interactive meal visualization tool for assisting adolescent females with eating disorders in improving their understanding of food portion sizes and balanced meals has been encouraging. Plans for extensive further development and evaluation of the MyMeal program are underway. This will include an investigation into the potential applications of the program beyond its use in meal planning (for example, as a history-taking tool for measuring the dietary intake of adolescents related to a variety of health concerns). Ultimately, a tool such as MyMeal may offer adolescent girls a highly interactive, non-threatening way to reduce their anxiety associated with eating and meal planning.
Acknowledgements The authors would like to thank Brian Sutherland, Instructional Technology Coordinator, University of Toronto at Scarborough and Jill Fraleigh, Registered Dietician, Southlake Regional Health Centre, for their generous contributions to this project.
References Apple Computer Inc. 2006. Apple Human Interface Guidelines. Cupertino, CA: Apple Computer Incorporated. Ballance, D., and Jenkinson, J. 2010. MyMeal: An Interactive User-Tailored MealVisualization Tool for Teenagers Battling Eating Disorders. Interactions 17(2): 60-63. JBC Vol. 36, No. 3 2010
Bennett, W., and J. Gurin. 1982. The Dieter’s Dilemma: eating less and weighing more. New York, NY: Basic Books. Health Canada. 2007. Canada’s Food Guide to Healthy Eating. . Herrin, M. 2003. Nutrition counseling in the treatment of eating disorders. New York, NY: Taylor and Francis. Hutchings, J. B. 2003. Expectations and the food industry: The impact of color and appearance1HZ
