...
The home page is where parents can search for meals by ingredient or by what a certain child likes
The search bar accepts ingredients from a list (based on the limited number of recipes in our database), or from clicking on one of the children tiles. Hovering over the Max tile prompts the user to “Search for max’s likes”, something we added after doing heuristic evaluations, because not all users found it intuitive that the tiles could be clicked on. We felt adding the tool tip was an elegant way to signal this capability to the users without having to add an extra button.
Additionally, we learned from the heuristic evaluations that users were confused by the ingredients listed in the tiles, and thought they were buttons that could be clicked. To alleviate this, we made them less prominent and made them look more like a list of likes instead of a button.
Unlike the paper prototype, we had no general “recommended ingredients” listed below the tiles. We found that users either did not notice these ingredients were even there, or thought they were the only ingredients they had to choose from.
Learnability
- Typing in an ingredient and selecting it from the list populates the search bar with an icon.
- Hovering over a tile changes the color of the tile (feedback), and clicking on a tile populates the search bar and colors the tile green (more feedback).
- There is internal consistency for search items: every time something populates the search bar it is put in a little tile, so the user can assume it’s a valid search parameter.
- The tiles are meant to have the affordances of large buttons, shown by rounded corners and shading.
- The search and clear buttons have the affordances of buttons, and are also colored based on their function (i.e. “clear” is red). However, they have multiple visual to indicate their function-- both color, text, and icons.
...
The user arrives at the results page after searching for something on the home page.
This page allows the user to easily return to the search page by clicking on the “Back to Search” button, and lets the user know what they had just searched for. Additionally, it displays an ordered list of results. Each result includes a picture of the dish, the title of the dish, a taste score, the significant ingredients, and which child (if any) it is recommended for. The taste score and recommendations comes from the childrens’ feedback.
This page is intended to give a helpful overview of the different recipes that match the search criteria, such that the parent won’t need any additional information to decide on a recipe.
When the user hovers over one of the tiles, it changes color, and clicking on any part of the tile brings the user to the recipe page.
...
- The user can quickly return to the search page by clicking on the “Back to Search” button. When they do so, their search parameters still populate the search box, so they can make incremental changes to their query.
- If the user manipulates the URL, they are either directed back to the search page or sent to a “no results found” page. This also lets the user know that the queries that return actual results are based on their input.
Design decisions
- What should we include in the recipe tiles?
- We decided to include a bit of information in the results tiles so that the user would be able to make a decision without having to make any more clicks. However, we wanted to make the information within the tile easy to read, which is why we made the title large and highlighted the taste score. This lets the parent make a quick decision based on taste score.
- Do we need an explicit button to return back to the search page?
- We decided that we needed the button to allow users to return to the search page and have their previous query still present in the search bar.
...
The recipe page allows the parents to do a few key things.
First, this page allows parents to navigate back to the results page and begin a new search with a single click. Additionally, it lets them go to the feedback page, where their children can give feedback. The recipe page also displays the title and picture of the dish, as well as a shopping list and list of steps in the recipe. The page also lets the user print out the recipe/ingredients or share the information with someone, such as a partner that is going to the grocery store for them.
Based on heuristic evaluations and user tests, we felt that it was best to combine the shopping list and recipe into a single page.Additionally, our user test made it seem like people appreciated being able to check off the ingredients they already had. Checking the box next to an ingredient crosses out the ingredient and indicates to the user that they already have the ingredient.
...
- Previous query still populates the search bar/results page when the user returns to them from the navigation bar.
- Users can easily return to search results after selecting a recipe.
- Ingredients can be checked and unchecked (so the user doesn’t get stuck in one state)
- There is error checking in the “share” modal, to ensure that the recipe will be sent.
Design decisions
- Should the recipe and shopping list be on the same page?
- We ultimately decided to put the recipe and shopping list on the same page, as they are in classic recipe books (natural mapping). During our user tests, we found that people had forgotten the ingredient amounts when they went to the recipe page, and we felt it was safer to include them together. This also made it easier for users to share/print the two sets of information.
- Should checking the checkbox indicate that the user already has the ingredient?
- Users viewed the shopping list like one they would have on paper, so when they had bought an ingredient, they wanted to cross it out. Therefore, we felt having the checkbox function as a crossing out mechanism made the most sense.
- What should we put in the navigation bar?
- Although we wanted to make the navigation bar simple, we found that users thought it was valuable to have a button for returning to search and results.
...
The feedback page is meant for the children to rate what they thought of the meal, and help parents make meals in the future. First, they are presented with a modal window where the child or parent can click on the current child giving feedback.
After choosing the correct child, the child is presented with a page that reminds them of the meal they just ate and allows them to rate what they thought of the meal as a whole and each separate ingredient.
The smiley face changes based on where it is on the sliding bar, and moves the ingredient yes/no choice based on if the smiley face is on the “happy” side or the “sad” side. If the smiley is dragged toward the left, the ingredient preferences toggle to ‘no.’
However, once the toggles are changed manually, they are no longer tied to the slider. After the child has moved the slider accordingly and toggled the ingredients based on their preferences, they click submit and are prompted with another modal window. The idea is that once one kid finishes, they will pass the app off to another kid, who will complete their feedback -- – continuing until all kids have given feedback.
The modal window that appears after one kid has given feedback has grayed out the picture of any child who previously submitted, and provides an alert saying that the feedback has been sent to the parents.
...