GR2 - Designs
Objective
Help people with dietary restrictions safely explore the food options offered by restaurants.
Individual UI Elements
Damian
- Server entry of the daily special
- User search of restaurant specials in the area
- Menu inspection with focus on Safety
Server entry of the daily special
User search of restaurant specials in the area
Menu inspection of restaurant specials in the area
Scenario
Sasha browses the restaurant's menu over on FoodAware. She filters the menu by her restrictions and preferences and she sees an item she wants but it conflicts with her diet. She sees that she can make a substitution on the menu and makes a vegetarian substitution on that item. She then proceeds to the restaurant and orders the item through her server.
Group Designs
We present three designs:
- Single Window Design
- Dual Window Design
- Shopping Cart Design
Single Window Design
The focus of this idea is on the food; details appear in an overlay when the food items are clicked on, and dietary restrictions are moved off to the side.
Allows a restaurant to upload daily specials to the menu listings.
Pros:
- Devotes large amounts of space to the primary 'target' of the UI, the food itself.
- The single window design also has an affordance to upload food items to the server/database using a GUI window devoted to the task.
- This menu presentation also highlights food specials with a border and food that are suitable with a substitution with a border.
- Menu items that are sorted to show specials first, regular menu items second, and restricted items with substitutions last.
- Pictorial representations of restrictions and menu items are shown in a format discernible to all languages.
Cons:
- Might be difficult to select restrictions, both due to limited screen estate and difficulty of finding them.
- No ability is maintained to keep a user preference history.
- Interface is scaled to one restaurant and does not show browsing multiple restaurant menus at once.
Dual Display:
The idea of the dual display is to keep both the information of food items and ingredients on the same screen.
Manipulation of items on the food panel alters what is being displayed on the ingredients panel. The same action on the ingredients panel produces a similar effect on the food panel side.
For instance, selecting a menu item brings up the ingredients of that menu item in the ingredients panel, giving the user feedback on what goes into the dish.
Conversely, selecting a preference or restricting the ingredients filters and re-orders the menu items, reflecting the user's choices.
Pros:
- High level of feedback between the interplay of food versus ingredients.
- Learnability is very high because menu and food items are shown simply.
- High level of language independence with large picture icons
Cons:
- Screen space might become cluttered;
- Having two independently-scrolling panes might be confusing
Shopping Cart:
The flow here is designed to be similar to a shopping cart, with entering of dietary restrictions and preferences kept separate from food selection. We also provide here a 'summary' view at the end so that users can view all the food that they have chosen and see the total price. We also use text entry as opposed to pictorial selection to choose allergens/preferences.
Pros:
- Text entry obviates the need to hunt through a list of pictures to find their allergens/preferences
- Save user profile allows for tracking of preferences over time.
- Many opportunities allowed to fix an incorrect entry for a safer design. For example, the user can remove items from the queue on the "checkout" screen.
Cons:
- 'Linearity' might be excessive and cause an efficiency issue for long time users.
- Text entry can be difficult and auto-complete is required for implementation. For example what if the user doesn't know spells oregano 'aregano'?
