You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 13 Next »

Anand is a sophomore at MIT. He is extremely studious. Anand wants to do psets, but he is hungry, so he decides to go to his favorite restaurant, Cinderella’s. When he arrives at the restaurant, he opens up menu.io on his phone, selects Cinderella’s on the application and sits at a windowside booth. Meanwhile, he begins to view the menu. Anand is vegetarian so he filters the menu such that only vegetarian items are displayed. He is craving pasta so he also filters his menu to show only pasta dishes. Anand begins to look through his filtered menu.  He clicks on some dishes that look appealing to see the pictures at a close up.  He is very health-conscious so he wants to view the ingredients of a couple of dishes.  He decides on mushroom ravioli and calls over the waiter to make his order. Satisfied, Anand closes menu.io and starts to read his New York Times app as he waits for the food to arrive.

Motivation: Design 1 was primarily meant to excel in simplicity. Taking design patterns that users were sure to have seen across varied platforms, Design 1 is the most learnable of the 3 designs.

Design Selection: Search Bar

Anand arrives at Cinderella’s. Anand goes to menu.io and sees the search bar to find restaurants. He types in “Cinderella” because he does not feel like searching for the apostrophe on his mobile keyboard. Once he types in Cinderella, he is presented with a list of options. Because he is at Cindrella’s he picks it and not the other option of Cindrella Louveaunt, the French restaurant in Dorchester, MA. He is then presented with Cinderella’s main page with the menu attached to the bottom of page with several categories.

Learnability: The search bar is a learnable interface since it is a common part of the web. Most users are familiar with search options like Google to search terms that they want to.

Efficiency: This design is not particularly efficient because it requires the user to type the restaurant in. It does not automatically detect the restaurant, nor does it store selected particular restaurants. Every time a user arrives at a restaurant, he or she has to type the title of the restaurant in the search bar.

Safety: This design is safe in that errors are recoverable. However, it is not guaranteed that errors are few. If the user does not realize or know the title of restaurants (the exact spellings - usually), the user can be prone to errors. However, overall if the user is attentive, the system can be safe.

Design Selection: Checkbox approach

Anand wants to pick pastas that are vegetarian. He scrolls down to the menu, and sees the filter button. He clicks on the filter button and is presented with a standard checkbox filter. The checkbox filter has two different kinds of filters to be applied: ingredient-specific and item-specific. Because he wants be presented with vegetarian options, he checks the vegetarian box. Next, he wants only pastas to appear. Currently, the item-specific box is checked All so all items appear. He unchecks All, and then checks Pasta-only, so only pasta’s appear. Then, he hits the back button, and return to the menu.

 

Learnability: The filter is learnable because most people are familiar with the checkbox affordance. They know the checkbox represents a choice, and can use it to turn certain features on and off. Some users might find it hard at first to understand the item-specific approach. With some iterations, however, they will get it right.

Efficiency: This design is efficient in some ways because it is very easy to apply large, common filters such as vegetarian or vegan within 2 steps. This design is not particularly efficient because it requires the user to select the particular filter every time and perhaps not design custom filters. It also does not remember common filter selections.

Safety: This design is safe in that errors are recoverable. If the user applies the wrong filter, the user can return, and fix the filter. Errors are also few because the checkboxes are clearly specified. However, it can be hard to the user to check what filters he has applied, if he applies the wrong filter. It may be hard for the user to distinguish between filters such as vegetarian or vegan, if the user applies one or the other by mistake.

Design selection: Standard grid approach

The menu is laid out in a grid. After filtering, the pastas are the only option left on the menu. Anand selects pastas, and is presented with a selection of vegetarian pastas. He selects mushroom raviolli, checks the ingredients, description, spicy and salty factors and is content. He then calls the waiter over to order.

Learnability: This approach is extremely common for mobile apps and most people know the depth and usability associated with the grid item for viewing new item.

Efficiency: This design is efficient in that people are free to explore the depth of new options. They can go back and forth in the menu by navigating through the view tree. Their specifics can be realized easily according to their preferences. 

Safety: This design is safe in that errors are recoverable. If the user selects the wrong item, he or she can close the window. The users are also few since most of the time the user knows exactly what he or she is picking because it is specified in the picture and text.

Design Selection: GPS

Anand arrives at Cinderella’s and opens up menu.io in order to see the menu. The app presents him with 3 different options: Cinderella’s, Toscanini’s, and Desi Dhaba. These options are found through the GPS feature of Anand’s phone. These are the closest restaurants that use menu.io, based on Anand’s current location. He selects Cinderella’s, and sits down to view the menu that the app has generated for him.

Learnability: GPS is very learnable. The app does most of the heavy lifting for the user, and the user only has to choose the restaurant of his/her choice when it shows up.

Efficiency: This design is efficient because it makes sure the user only has to take 1 action: choosing the restaurant. Nothing has to be typed up or searched, and GPS can be selected immediately. The only efficiency issue arises when the wanted restaurant is not shown in the list to the user, which will be discussed in the Safety section.

Safety: This design is not very safe, especially if there are GPS issues with the phone. This requires users to type in the restaurant that they are eating at, which causes an efficiency issue.

Design Selection: Icons on top with details in the center.

The app presents Anand with a row of icons at the top of the screen. He can scroll back and forth between items and the center item is reflected in a larger detail view in the center of the screen. He is able to see a picture of the item along with price, details, and ingredients. Presented with all this information, Anand is able to make a much more educated choice about what he wants to eat. 

Learnability: This design is fairly learnable because of the scrolling elements of the icon bar. Most of the features of these menus will be made obvious to users, so there is no learning necessary here.

Efficiency: It is easy to move from dish to dish on the menu, but there is no natural sorting to make it easy to move to a dish of one’s choice quickly. This is where filters (Task 3) come in. 

Safety: There is not very much room for error here. If a user scrolls past an item of his/her choice, it is very easy for the user to scroll back to the desired item, making this design safe.

Design Section: Drag filters to menu

Anand wants to filter the menu to only show vegetarian dishes, because he is vegetarian. The filters are shown on the bottom of the screen, and he drags the vegetarian filter onto his menu view, and all of the non-vegetarian dishes disappear. He also knows he wants to eat pasta, so he drags the pasta filter onto his menu. If Anand ever wishes to remove one of the filters he has placed on his menu, he could click the corresponding filter on a new dialog that has opened on the top of the screen.

Learnability: The drag-to-filter design might pose a learnability issue for new users. It is not made obvious that filters are meant to be dragged to the menu, and users might consider interacting with them in other ways (clicking, for example) to add them to the menu. This can be remedied by having multiple methods of applying a filter with the same design.

Efficiency: This is a very efficient method of applying filters. It requires a simple click or drag, and the filter is applied immediately.

Safety: This design is fairly safe. If a wrong filter is applied, it is made obvious how to remove it, and removal of said filter is done almost instantaneously.

Design selection: QR code 

When Anand opens up the app, he is greeted by the welcome screen to menu.io.  A waiter points him to the QR code at the center of his table.  Anand touches the “Scan QR Code” button and a QR reader appears.  He scans the QR code which immediately pulls up the main page for Cinderalla’s.  Anand touches the menu button to pull up the Cinderalla’s menu.


Learnability: The QR code scanner is a popular technology in many mobile applications, so many users would recognize it.

Efficiency: The QR scanner would immediately pull up the restaurant’s menu so there would be fewer button presses for the user.  However, sometimes QR scanners take a while to scan the code, depending on the angle and proximity of the code.

Safety: Sometimes QR scanners cannot locate the code because the angle is bad or the code is too far away.  Assuming the restaurant places the codes in an appropriate location, the QR reader would be very safe because it would load the correct menu.

Design selection: Modified Lazy Susan/Scroll wheel

The first page of the menu displays the different categories of food at Cinderalla’s: pasta, pizza, appetizers, drinks, salads, and more.  Sample pictures of these categories are displayed in a circular around the main stage. The main stage displays the highlighted picture at the very top.

Anand is in the mood for pasta, so he drags the circular icons around the stage until the pasta icon is displayed.  He touches the center stage (he could also touch the bottom label) to bring up the pasta sub-menu.  Anand uses the scroll wheel to scroll through the items until he reaches mushroom ravioli.  He thinks that sounds pretty good, so he drags the ravioli on the center stage to the basket in the upper right-hand corner.  Anand keeps looking through the pasta items, and also decides to drag the fettuccine alfredo to the basket to compare later.


Learnability: The scroll wheel is not a common interface, but it is common enough that it would be recognizable. It also follows a modified-Lazy Susan metaphor which might help some users.

Efficiency: The scroll wheel is not always efficient to go through for each task. It presents an element of novelty, however, it can often be cumbersome when browsing for new dishes. Also, scrolling, dragging and then clicking can be a a time-consuming process.

Safety: The scroll wheel can be less safe if users go through the two-step process because of a lapse. However, the two-step process also remains a check that sometimes prevents errors because users can preview sub-categories before moving on.

Design selection: Comparison grid/table

Anand clicks on the basket to compare his options.  He is greeted by a screen with a large stage in the middle with three places to drop entrees.  His choices (mushroom ravioli and fettuccine alfredo) are sitting at the top of the stage.  He sees that if he decides he doesn’t want a dish he can always drag it into the trashcan in the upper right-hand corner to remove it from his basket.  He also sees that if he wants to keep searching the menu he can click the menu button in the upper left-hand corner.

Anand next drags his two dishes into the center stage.  He presses compare to pull up a table comparing the ingredients of his two selections.  He immediately sees that the fettuccine alfredo has chicken and that the mushroom ravioli does not.  Since Anand is a vegetarian, he immediately rules out the fettuccine alfredo, and waits for the waiter to take his order.


Learnability: The shopping cart metaphor is sometimes good for users to learn that they are in the final step of the decision process. It can also be hard to understand that the basket is for filtering initially, rather than just viewing.

Efficiency: The filtering mechanism is not particularly efficient in that it can’t allow you to apply large filters, and makes only small comparisons. However, some users might like comparing individual items at a time if they are between particular choices - which makes it easier for people who are indecisive between 2-3 items.

Safety: This mechanism is safe in that it requires multiple steps to get to this stage, and people can still choose what items they want to compare. A comparison is usually going to be determined, and not random. If the wrong dish is there, it can be sent to the trash can easily. Users can add as many dishes they want, and also compare as many decisions they want, without having to worry about the number of items they might have dragged into the basket.

.

  • No labels