7.1 Trial II
8.2.1 Conceptual models
I developed following conceptual models for user interactions of functions for search and comparison of food items. They were based on the findings from literature survey (2.1.3 and 3.2), Inquiries 3 and 4 as well as consideration into constraints by both technical possibilities and time respect. Related works to the suggested designs are summarized in a master thesis [248] by the master student whom I was a collaborating with.
8.2.1.1 Search of food items – “Food Map”
The literature survey showed the problems with a text-based user interface for search of a food item in a category-based information structure. I reached a concept of using a food circle as a “map” of food items to search as a potential solution to the problems. Table 8.2
summarizes the conceptual model for a function to search food items.
Table 8.2 Description of conceptual model for search of food items
Items of conceptual model Description
The major metaphor and analogy Web mapping services that enables:
zooming in and out to switch the view point between getting an overview and looking into detail
panning on a map to shift the place to focus on at the same level of view point
It has a certain analogy with finding a food item in a grocery store.
The concepts Task-domain objects: Food items and a food circle where items are located
Attributes: Category and sub-category that a food item belongs to, images of food items, information about nutrition, location of food items on a food circle, size of food circle, zoom level, level of details to display at a zoom level, division of a food circle by categories and sub-categories
Operations / actions: searching food items on a food circle, viewing details of information about a food item
The relationships between concepts Food items are visually recognizable on a food circle in a corresponding part that represents a category and a sub-category. Details of food information can be accessed from the image of the item on the map.
106
The mappings When a user zooms in a food circle that shows an
overview of included items and positions of categories, it displays a more detailed view of the area of interest. The user operates the food circle by zooming and/or panning to find an item that s/he is searching. By clicking on the image of the item, the user can view detailed information about the food item.
Web mapping services, for example Google Maps®35, enable zooming in/out and panning on a map. By zooming in/out, web mapping shifts image files to show on a browser depending on the scale. The bigger the scale is, the less the details are shown (Figure 8.8). A user can pan on a map to move around the map at the scale, if a target is outside of the frame of a map.
Figure 8.8 Zooming of web mapping (screenshots were obtained from Google Maps®) Applying this idea on a food circle might have the following potentials. Firstly, the panning feature enables a user to go across the boundaries between categories, sub-categories, or even lower levels of the hierarchical structure. By locating similar categories or groups close to each other and positioning food items near borderline, it may reduce steps back upward to the root of the hierarchy to go to the other. In addition, as represented by a wide use of thumbnail view in many of modern operating systems (OS)36, images of food items might be easier for a user to find an item regardless of the level of literacy or knowledge about name of food items.
Figure 8.9 illustrates the Food Map concept.
35 https://developers.google.com/maps/
36 http://en.wikipedia.org/wiki/Thumbnail
107
Figure 8.9 Concept of "Food Map" for search of food items (Paper 5, Figure 1)
8.2.1.2 Comparison of food items – “Scatter Plot”
Trial I revealed that the participants needed “fact sheets” of food items. Inquiry 3 also revealed the user-needs for suggestions of alternative food items. To fulfill these needs by incorporating Suggestion 2 obtained from Inquiry 4 (to use a slider on a scale to set a condition for search of food items), I reached an idea to apply scatter plotting technique to comparison of food items as shown in Figure 8.10.
Figure 8.10 Concept of “Scatter Plot” for comparison of food items
Table 8.3 summarizes the conceptual model for a function to compare food items. This conceptual model does not have any analogy to other things.
Table 8.3 Description of conceptual model for comparison of food items
Items of conceptual model Description
The major metaphor Ordinary “scatter plot diagram” that enables:
mapping objects according to its values in two attributes
The concepts Task-domain objects: Food items and a scatter plot field
108
where items are mapped
Attributes: images of food items, types of information (such as nutrients), numerical values that explain the property of a food item in terms of each type of
information, axes of a scatter plot, parameters that axes express
Operations / actions: compare food items of interest in one or two parameters of interest
The relationships between concepts Food items are visually recognizable on a scatter plot field at a location corresponding to their properties, which are values of parameters that x- and y-axes represent.
Parameters represented by x- and y-axes are those included as attributes of food items in terms of its nutritional
property. Details of food information can be accessed by clicking on the image of the item on the map.
The mappings When a user compares (selected) food items, it displays the images of the food items mapped on a scatter plot field according to their properties regarding two parameters that are represented by x- and y-axes. When a user clicks on an axis, s/he can change the parameter from a list. This will change the mapping of the food items on the scatter plot according to their values of the selected parameter.
A scatter plot diagram is a widely used method for information visualization in simple
statistics, where normally plots are shown on an X-Y area corresponding to its values for each attribute of an axis (Figure 8.10, left).
This design was proposed based on notion that it is important for people with T2DM who are not using insulin for treatment to get ideas about approximate amounts of nutrients in food items rather than very precise amounts [3]. Besides, amount of nutrients in one portion of a food item can vary, especially when it is non-processed food items such as raw potatoes, vegetables, fruits and berries.
As an idea for enhancing ease of understanding information, I also proposed use of color-coding of the background of the scatter plot according to the value of each axis. (Figure 8.10, middle). A screen that shows nutrition information of a food item can also take advantage of this back ground color as that of cells in a table of nutrients so that the design will keep consistency (Figure 8.10, right).