GR2 - Designs (OpenMenu)

Joe, Jane, John, and Julie, seniors at Dininghall College, are going on a double-date to a nice Italian restaurant, Mama Mia, on a Saturday night to celebrate Valentine’s Day. They arrive at Mama Mia and check in to their reservation, so they are seated immediately by the host at a lovely table set for four.

Task 1: Ordering Food & Drinks

They notice that the host has grabbed four tablets instead of menus. They are informed by the host that Mama Mia uses a new touch-screen device called OpenMenu that allows for electronic ordering and paying. The four friends have never used this system before, but they are intrigued and are excited to try the device. After each friend receives a device, they are immediately able to order beverages. Joe exclaims, “Wow, I can order my peach tea right now since I’m so thirsty!” Joe, being tech-savvy, proceeds to browse the many items on Mama Mia’s menu with simple swipes of his fingers and is able to view the images with no difficulty at all. John, who is not as tech savvy, is able to follow the simple on screen prompts to navigate the menu.

Task 2: Compare Foods & Filtering

Jane and Julie, who both love seafood, are able to only look at the seafood items by a quick filter and able to compare items that they like side by side with helpful information like ingredients and nutritional facts. The party of four is able to quickly order with ease and the order is sent electronically, with assurance that they’ll get exactly what they ordered.

Task 4: Games & Entertainment

In the meantime, Joe challenges his friends to a quick game of Scrabble that he has discovered on the device. The four friends enjoying their time together when the food finally arrives. Joe is thrilled that his rib-eye has been prepared exactly as he specified, a rare juicy steak with all the trimmings. John’s Shrimp Fettuccine Alfredo is laden with extra mozzarella cheese as he requested. Jane and Julie’s salmon radiates a delicious aroma with a beautiful full color. The party is extremely pleased with their dishes, and after finishing their meals, they are stuffed and ready for the check. Jane realized that she wanted to try a new drink they have and uses the tablet to add it to their orders. Minutes later, the waiter arrives at the table to check how everyone is enjoying their food and hands Jane her new drink. They all stuff themselves, and finish there meals in an hour.

Task 3: View & Pay Bill

Because of the new device, they are not stuck waiting for their bill but instead are able to pay using the device at their leisure. Joe and Jane are paying together by a credit card, while John and Julie use cash. The entire process only takes a few minutes, even while splitting the bill and using different forms of payment. The four friends have enjoyed a lovely dinner, with no hassle what-so-ever, leaving Mama Mia very satisfied.

In our first design, we wanted to use a paper menu as the metaphor for better learnability. However, it does limit our functionality and causes less internal consistency.

This is the initial screen that the use will see. It will display a tutorial of how to use the tablet on the left and side, and a picture of the main menu of the restaurant. There is a little animation of a page flip for an experienced user to recognize that in order to open the menu, the user can swipe and "flip" open the menu. 

Within the Scenario

Joe thinks that this tablet will be easy to learn so he wants to skip over the tutorial. Everyone else decides not to listen to Joe and quickly skims the tutorial.

Usability Analysis

Learnability

If the analogy to a typical paper menu works well, it would be easy to pick up how to view the items on the menu. The user can use the tutorial on the left hand side page to learn how to use the tablet quickly.

Efficiency

The tutorial is not necessary and experienced users can skip over it by opening the menu immediately. There is also a little "open me" tab on the bottom of the menu that will help the user recognize how to open the menu.

Safety

This should not be an issue for this task. However, if the user ever wants to view the tutorial after opening the menu, then can access it by the help button on the view menu.

After opening the menu from the welcoming screen, the application will go straight into the menu part of the application. It will attempt to mimic a typical menu with all products separated by pages.

For each item, there is a description, image, compare button, and an add button. When the use clicks on the image, it enlarges. The user can compare items but clicked on the compare button for multiple items and then clicking the "Compare" icon at the bottom, to open the comparing screen. The user can add items to the menu by clicking on the add button, which would prompt a popup for quantity, size, preferences, and any notes he/she would like.

The user can filter which items are displayed on the pages by using the filter tools at the top.

Within the Scenario

Joe uses the menu to quickly order his drink and orders drinks for the rest of the crew. Jane and Julie are choosing which items to compare and using the filtering tools to narrow all the items down to seafood products.

Usability Analysis

Learnability

Like the welcoming page, if the analogy to a typical paper menu works well, it would be easy to pick up how to view the items on the menu. They can always access the help menu if they are stuck at the bottom. There is cluttering of button since there are at least two for each item, and the main icons button at the bottom. There is also a filter tool at the top which might be hard to learn since the user would not be used to filtering items on a paper menu.

Efficiency

Using the paper menu makes looks for items less efficient since you have to scroll between pages. For example, it would be terrible to go from the 10th pages back to the 3rd page. However, if we implement the filter tool well, it would make this less of an issue if they can filter it down to fewer amounts of items.

Safety

If you accidentally click add to order, the menu will prompt if you are sure to order before actually putting the item into the order so it is easily reversible. If the users clicks on the wrong item description or image, they can easily close it. All pop ups will have an easy close button.

When the user clicks on the compare icon at the bottom of the viewing screen, a popup open that allows the user to view all of the products and its fact in a table. If there are too many items, the window would scroll horizontally to view the rest of the items. From there, he or she can click to add to the order or close the prompt. 

Within the Scenario

Jane and Julie are deciding which seafood dish they want to order. Jane wants something cheaper whereas Julie wants one with less fat.

Usability Analysis

Learnability

It is standard for items to be compared to be displayed horizontally and there is not much functionality on this page, so it should be easy to learn. There is a scrollbar at the bottom for that they know they can scroll the panel horizontally. 

Efficiency

The horizontal scrolling attempts to make it easy to view a lot of items on one screen. The table view makes it easy to compare the same facts for all items. However, If the items aren't side by side and far away, it is inefficient to compare the two item's facts. The users can remove items from here and add them straight to their order also.

Safety

If you accidentally click the close button, it is easy to open it again from the view screen. The user cannot edit much other data. If the user accidentally clicks the add button, the confirmation prompt will pop up so it is easily reversible.  

Once all of the users want to send in the order, then can click on the View Order at the bottom on the viewing screen. This prompt would pop up with would give a summary of what is being send to the waitress and how much they have ordered so far. This is like a verification screen. They can remove products from here also, if they choose not to order something anymore. 

Within the Scenario

When everyone has chosen what they wanted to eat and drink, they click send!

Usability Analysis

Learnability

It looks like the shopping cart of most websites for better external consistency. THere is little functionality on the page. The user can only send in their order, or removes items form their order. Scrollbars will be displayed when necessary if the order is large. 

Efficiency

I decided to use scrolling instead of paging for better efficiency. Users can remove items from here, but they cannot add more items since it wouldn't make sense. THey do get a quick summary on the right hand side about the cost of the order so far.

Safety

All of the actions on this page that modifies their order will have a confirmation prompt so that it would be easily reversible. There is no other functionality on this page so safety would not be an issue. 

When the user clicks on the Games and Entertainment icon on the viewing screen, users would be able to choose to play a game or browse the internet. The games will be group games such as trivia, iSpy, Scrabble, etc. 

Within the Scenario

John get really bored as the girls were talking to each other and asks Joe if he wants to play some trivia since John loves movies. The girls realized that the guys are having too much fun and join them.

From the View order screen, the user can select to finalize their meal and pay for it. It will display a dynamic receipt on the left hand side and a tip calculator on the right hand side. It can split the bill and each member can pay but credit card and/or cash.

Within the Scenario

After everybody has gotten stuffed, Joe clicks on the pay button and decides that he'll pay for everyone's meal since he just won the lottery and tips the waitress 31.415% using the calculator.

Usability Analysis

Learnability

Paying after the meal is very easy to learn. It has two main components, the items on the left and the extra calculations on the right. The two options are also very common, making it simple.

Efficiency

The new electronic payment process is efficient. Since only cash payments require the waiter/waitress, the overall process is made faster.

Safety

The only issue with safety with this system is that payments are final and can only be changed if the waiter/waitress is called over.

The second design we had was one where we split the ordering into stages, with the stages being drinks, food, Entertainment, and then lastly, the bill. The user is given the option of viewing a quick tutorial of the menu.

The first stage is drink ordering. There is a list of drinks with pictures, pricing, and other information about each drink. There is a checkbox next to each drink to allow the user to pick what drink they want. There are buttons at the bottom of the screen that allows the user to compare drinks and send in their drink order. At the top of the screen, the user is allowed to filter and search drinks.

Within the scenario

After receiving their menus, John, Jane, Joe, and Julie can order their drinks without waiting for their order to come over.

Usability Analysis

Learnability

It's very easy to pick up on the scrolling and viewing items. And there is a quick tutorial for the user is necessary. However, learning where items are can be a hassle to learn.

Efficiency

The user can quickly see, scroll through, and order a large amount of items. However, finding items on the menu is inefficient and scrolling through the menu can be time-consuming

Safety

When ordering, if the user accidentally clicks “Send Order,” a popup will appear asking for special instructions and asking the user if they really want to send the order. However, if the user accidentally does order the wrong thing, there’s no going back to cancel the order.

Users are able to compare two items side-by-side and compare each item’s ingredients, pricing, pictures, and other relevant information. There is a back button to go back to the menu to allow the user to select which item they prefer.

Within the scenario

When John, Jane, Joe, or Julie have a hard time deciding which of two or three or more items they want, they can click the compare button at the bottom of the menu and it will bring up a comparison page. This will allow them to make their decisions easier and faster.

Usability Analysis

Learnability

It's very easy to learn how to compare and filter items, since all that's required is looking, scrolling, and typing. However, it could be hard to get to the item comparison screen, since the user might not figure out they have to check items before clicking the "Compare Items" button.

Efficiency

Comparing is efficient since the user can compare multiple items at the same time. However, the user has to find all the items they want to compare and select them. Filtering items is also pretty efficient, since the user just has to type what they want filter by.

Safety

If the user clicks on the wrong products or mistypes in the filter field, it’s a simple matter to go back and correct the mistake. There are no safety concerns that we can think of right now.

The next stage is the entertainment stage, where the user will be able to browse the web or play a social game amongst the people at the table. The main view will be two icons, web and games. The web option will open a browser while the game option will open a tile view of games available.

Within the scenario

The four friends decide to play a social word game called Scrabble while they wait for their food.

Usability Analysis

Learnability

It’s pretty easy to figure out how to get to the web and games sections and to select what games you want to play, although learning the games themselves might be slightly challenging, depending on the game.

Efficiency

Playing games and scrolling through the web is generally pretty efficient, although the only possible hindrance is if the internet connection is bad, which will make the web browser pretty slow.

Safety

If the user clicks the wrong game or option, it’s a fairly simple matter to go back and click the desired option. There are no safety concerns.

The last stage is the payment stage, where the user will see a list of the items they ordered, along with the price and the subtotal, tax, and total amount. On the side, there is a helpful menu with the amount of money 10%, 15%, and 20% tip is. They are given the option to add tip to their bill and the option to split the bill. At the bottom of the page, they can choose their payment form. Paying by credit would allow the user to simply swipe their card while paying by cash will signal the waiter/waitress to come over.

Within the scenario

On this screen, Joe and John want to split their check by couple and can easily do so with the split options. They will also be able to simply calculate the tip based on their input. Joe easily uses his credit card while John chooses to pay by cash.

Usability Analysis

Learnability

Everything on the bill page is spelled out, so it’s fairly easy to figure out how to pay and how to add tip. However, figuring out the card swipe payment could be tricky to figure out.

Efficiency

Possible tips are listed on the bill page, so the user doesn’t need to waste time figuring out how much tip to add. Everything else on the page is pretty simple and fast, so there aren’t really too many efficiency concerns, unless the user chooses to pay by cash and has to wait for the waiter to come over.

Safety

Since the user doesn’t actually pay until the waiter comes over or swipes the card, so if you click the wrong payment option, it’s pretty easy to fix. Likewise, adjusting the amount of tip to add is pretty easy, as well. There are no real safety concerns for this feature.

The third design we developed is based on a tab system, with the main tabs being Menu, Order, Payment, and Entertainment. The main screen will simply be an image that the restaurant wants to use as a cover screen. Quick arrows and notes will be serve as tutorials on each individual tab.

The menu tab is where the user will actually view, select, and compare the items on the menu. The items on the menu will be divided into subcategories. Upon selecting the subcategory, the items will appear in a horizontal scroll pane, with some basic information and its image displayed. Users will be able to use the drop-down filters to restrict the items they can view or use search for an exact item. When a user sees an item they like, they can check the box of the item. All checked items will be put into the compare selections box on the bottom of the screen, which will also be a horizontal scroll pane. Within this box, the user can quickly and easily compare items, pressing the “add to order” button if they like an item.

Within the Scenario

After Joe, Jane, John, and Julie sit down, they will use the device to look for items they want. Joe can instantly understand the scrolling, filters, search, and compare features and can quickly select what he wants. John, Jane, and Julie will follow the tutorial of arrows and notes and will quickly learn how the system works. Jane and Julie, since they only want fish, will utilize the filter feature to narrow the items they have to look through.

Usability Analysis

Learnability

The menu tab is great in terms of learnability. There are clear labels for categories of foods and filters/searches for anything the user desires. The compare box is also clearly labeled and all scrollable areas are marked with the proper affordances.

Efficiency

It is also very efficient. All the similar items are grouped into buttons that the user can instantly press. The filters and searches allow even more efficiency. The only drawback is if the scrollable areas are too filled with items, resulting in slow scrolling.

Safety

This is also very safe in that any item selected can be unselected instantly. There are little safety issues with this tab of the interface.

The order tab is where the user will be able to review the items they have decided on and also add preparation notes or special requests. The order can be sent by pressing “send my order.”

Within the Scenario

The four friends will simply look over this page to make sure it is what they ordered, adding preparation notes as they wish. They will press the send button to place their order.

Usability Analysis

Learnability

The order tab is great in terms of learnability. First, there is a list of all items and preferences that the user has selected. It is also very simple in that there is only the list and a send order button.

Efficiency

It is also very efficient, mainly in its simplicity. There is only a list and a button so not much in terms of efficiency issues.

Safety

The only issue with safety with this order tab is that orders are final and can only be changed if the waiter/waitress is called over.

The payment tab is where the user will be able to pay for their meal. First, an itemized list of their items along with their prices will be displayed. Next, the split and tip can be calculated based on user input in the fields. Finally, the user can choose which type of payment they would like to use, either credit or cash. Paying by credit would allow the user to simply swipe their card while paying by cash will signal the waiter/waitress to come over.

Within the Scenario

On this screen, Joe and John want to split their check by couple and can easily do so with the split options. They will also be able to simply calculate the tip based on their input. Joe easily uses his credit card while John chooses to pay by cash.

Usability Analysis

Learnability

The payment tab is great in terms of learnability. First, all options are clearly labeled. Then, there is a list of all items and their prices. Next, the tips and splitting of check can easily be done with the built in feature. Finally, the payment options can easily be selected, providing tutorials if necessary.

Efficiency

The whole point of this tab is to make the payment process efficient. Since the waiter/waitress interaction is cut down to a minimum, the process is faster. The only drawback is when users pay with cash because then the waiter/waitress will have to come over.

Safety

The only issue with safety with this payment tab is that payments are final and can only be changed if the waiter/waitress is called over.

The entertainment tab is where the user will be able to browse the web or play a social game amongst the people at the table. The main view will be two icons, web and games. The web option will open a browser while the game option will open a tiled view of games available.

Within the Scenario

The four friends decide to play a social word game called Scrabble while they wait for their food.

Usability Analysis

Learnability

The entertainment tab is great in terms of learnability. It will simply be two icons, web and games. Learnability is not really an issue here.

Efficiency

Efficiency is not an issue for this tab because it is all outside our design after a user selects either game or web.

Safety

Safety is not an issue for this tab because they can easily go to the tab they meant to go to instantly.