...
| Panel |
|---|
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 43: 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 34: 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. |
Storyboard Designs
NOTE: Usability analysis has been done for each snapshot of the storyboard designs.
Design 1: Using Menu as an Analogy
...
| Panel |
|---|
Description This is the initial screen that the user will see. It will display a tutorial of how to use the tablet on the left and side using videos and dynamic features so that it doesn't bore the user. This is picture of the main menu of the restaurant to mimic the feel of a typical menu. 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 open 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 they can access it by the help button on the view menu. |
...
| Panel |
|---|
Description 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. The bottom of the screen has the navigation buttons which will go to the other screens and the ability to ask for the waiter's help. 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. There may be too much functionality and can be overwhelming to some users. 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. If anything, the user can always ask for help form from the waitress waiter using the "Call Waiter" button at the bottom of the screen. |
...
| Panel |
|---|
Description Once all of the users want to send in the order, then can click on the "View Order" button 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. |
...
Design 2: Stage-Based Menu System
| Panel |
|---|
About This Design 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. This design allows the user to think that ordering is a process, where there are different stages. |
Stage One: Viewing and Ordering Drinks Screen 
| Panel |
|---|
Description 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. |
Stage Two: Viewing and Ordering Food Screen 
| Panel |
|---|
Description After they order their drinks, the food menu pops up. It is split into categories, such as Appetizers, Soups, and so on. It is very similar in terms of the design to the drink menu in terms of layout. Each food product is listed as well as the picture, pricing, and other pertinent information. Like the drink menu, there are options to filter and search the menu and there are buttons at the bottom of the screen to compare and send in the order. Within the Scenario John, Jane, Joe, and Julie are able to browse through the menu quickly and select what they want. When they check on an item, they are allowed to provide special instructions so Joe can specify his steak to be prepared medium-well for example. Jane and Julie are able to filter the menu to only display seafood, and then compare seafood items side-by-side to determine what they want. 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. |
Stage Three: Comparing Foods & Drinks 
| Panel |
|---|
Description 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. |
Stage Four: Playing Games and Other Entertainment 
| Panel |
|---|
Description 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. |
Stage Five: Paying the Bill 
| Panel |
|---|
Description 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. |
Design 3: Using a Tab-Based System
...