McInterface

McInterface
User Interface Design & Development Project
SIMS 213, Spring 2001

: Linda Harjono, Saifon Obromsook, John Yiu Chi Wai

Summary Report: Design Evolution

Major Design Changes

We did the initial sketches individually. Two of us used the 'tray' concept (aka. 'Shopping Cart') to represent the order summary and show the tray on the main screen. Two of us came up with a hierarchical menu, and one used tabs for food categories. One person shows buttons of the food categories on the main screen, each of which leads to a new screen that shows the items inside the category. Another person showed the food categories as horizontal tabs, but only showed one food at a time (thus, present a hierarchical representation of the menu).

Low-fi Prototype Testing

Our paper prototype still retains the idea of displaying the tray at all time. We decided to have the food categories displayed by six tabs (horizontal). Inside one tab, there was another drop-down list box containing more categories. The design is also dependent on the use of a smart card. This design decision was a big mistake, according to the feedback. We also realized at this stage that there were many overhead associated with using a smart card. So after low-fi prototype testing, we decided to put aside the idea of requiring a 'McCard' to use the system (the smart card) since test subjects felt constrained by that requirement. A consequence of discarding that idea is that we also had to totally eliminate the idea of recording users' favorite orders. Then we tried to focus more on the ordering process itself.

First-Interactive Prototype

The main design decision we made for our first-interactive prototype was discarding the tray. Also, users need to touch the item picture in order to initiate an order. And once they touch the picture, they are forced to go through an item's detail dialog box to specify the drink, size, special requests, and other options of the ordered item (We later call this the 'indirect ordering process'). However, the heuristic evaluators suggested that we should retain the tray idea, and should provide a shortcut to users who want an item with a default drink and size. In the later case, the users would need to be able to choose the drink and size of the meal from the main screen so that when they order the item, the item directly goes to the order summary and no item details dialog box is diplayed. We then call this type of ordering process as 'direct ordering process.'

The evaluators also suggested that there should be some feedback on the special requests since it was clear that that feedback is very important to our primary personas. They also demanded the order summary to contain more than six items.

Second-Interactive Prototype

As a result, in our second-interactive prototype, we decided to implement the tray idea by placing the "Order Summary" section on the right side of the menu page. Each ordered item in the Order Summary is displayed, if appplicable, with its size and drink, quantity, special request icons, and an "Edit" button. The users can change the quantity right from Order Summary, and changed other options via the "Edit" button. We also allowed infinite number of items in Order Summary and have them displayed in pages. To remove an ordered item from the Order Summary, users need to change quantity using the quantity changer buttons to zero.

We also changed the representation of food categories from using labels to using using vertical tabs in the second interactive prototype. In addition, we removed the "Special Requests" dialog box, the Special Requests text box in the Order Details Page, and removed the option to ask for "Less Ice", "Less Pickle", "Less Tomato", and "Less Onion" because we consider these as edge cases as none of our testing subjects chose any of these options. We placed all the remaining Special Requests options on the Order Detail page. We also replaced the text box the allows users to specify the number of packets of ketchup they want with a check box to indicate a "More Ketchup?" option, because it is simpler and users usually ask for "More ketchup, please?" instead of specifying exactly the number of packets of ketchup they want.

Pilot Usability Test

Since there was an unresolved issue about having the item go directly to the Order Summary ('Direct' ordering process) or displaying the item details every time users order an item ('Indirect ordering process'), we decided to provide two versions of our prototoype in our informal pilot usability test: a 'direct' and 'indirect' prototype. The result of the pilot usability test later shows that 'indirect ordering process' is preferred due to the following reasons:

Because of the space constraint, it is very hard to display all needed information that let users to do 'one-touch' orders with all the special requests and item details options that they have. In addition, displaying lots of information make the main screen too cluttered.
Without seeing the item details dialog box every time users order an item, users often do not know all the available options of items that they order. When conducting the pilot usability test on the 'direct ordering process,' one user was having a hard time when we asked him to request for 'more ketchup' for his Big Mac sandwich order.
One of the pilot usability test participant said that the 'indirect ordering process' resemble the real world situation, where customers first said the items that they want to order to the cashier, then continue with the details and special requests associated with the items.

Some other major results from the pilot usability tests include:

We found out that it is not clear enough to users that in order to remove ordered items from the Order Summary, they need to change the quantity to zero. Therefore, we then replacing the quantity changer on the Order Summary with a 'Remove' button that allows users to remove an ordered item from the Order Summary. We also found out that it is not that important to users to have the quantity changer on the Order Summary since they can always do that through the 'Edit' button.
We found out that most users do not want to read instructions. Even though we provided an instruction: 'Touch the picture to order the item,' some of our pilot usability participants still could not figure out how to order an item. Therefore, we then place an 'Order' button next to each item with our latest prototype. With this design, orders are initiated only by touching the 'Order' button.

Other changes that we made after the informal pilot usability study include the following:

Display only one price (of the medium size) on the Menu screen. Our test subjects did not think the complete price display on the main page is very necessary. So, we chose to display one price in order to minimize the amount of information on the Menu Screen.
Change the categories tabs to buttons. If the button is touched, it would be beveled downward and changed to a darker color. Hopefully, the buttons are more obvious to users that they can be selected
Because all participants in the test complained that our menu screen is too cluttered, we decided to reorganizing the food categories in order to display fewer number of items on the main screen. We split "Extra Value Meals" into two categories called "Extra Value Meals 1-6" and "Extra Value Meals 7-10" and split "Sandwiches/McNuggets" into "Burgers" and "Sandwiches". Then we combined McNuggets with "French Fries." This category rearrangement allows us to display the maximum of six items at a time.
Highlight the "New Tastes Menu". We use red to distinguish this category label from others. Also, we move the button up to the top of the navigation bar.
We eliminated the "Happy Meal Toys" category from the navigation bar. We, instead, re-labelled "Happy Meals" to "Happy Meals & Toys!" having the word "Toys" in red. Then, we placed a toy preview button inside the display of the food items (the white area). This is to eliminate any confusion between the toy display and the meals.
We also changed some graphical elements. We replaced all the gray buttons with more colorful button images. We replaced images of food items with ones that more resemble the real food items. We changed the background of special request icons to be the same as the screen (golden).

Here is our final prototype

Evaluation Techniques

The following table summarizes how valuable each evaluation technique is to our design of McInterface.

Technique	Pros	Cons	Usefulness Rating
Low-fi Prototyping	- Effective for finding out the right direction of the design - Effective for testing main interaction flow -Test subjects were more willing to give harsh (but constructive) feedback - Fast! - The ability to interactively talks about the users' opinions and suggestions	- Does not simulate the real interactions very effectively, especially in our case when speed is a significant factor. - May not be accurate enough to yield reliable results (The subjects may think out design is really bad because the speed of a human computer might be slow enough to make the interface look like a mumbo-jumbo.) - The missing details may have affected test subjects' perception towards the designs. (A not-enough-serious menu display may not be clear to the subjects.) - The idea of our system is novel. The subjects may not have grasped the idea very well. - Since the look of the prototype is still very rough, we could not see how cluttered our main screen was without doing a refined detailed prototyping	B+
Heuristic Evaluation	- Effective for finding out specific and detailed usability problems - Easy to implement	- Focusing too much on solving each violation led us to overlook some other critical design issues. - Since sometimes the testers were not real users and are not familiar with McDonald's menu, the heuristic problems that were brought up were not quite applicable	A-
Pilot Usability Test	- Qualitative results were very useful. - Fortunately, our test subjects still gave honest feedback as we asked them to. - Simulate the subjects' interactions with the real interface more effectively. - The ability to interactively talks about the users' opinions and suggestions	- Quantitative results were not very useful with small sample size - The presence of learning effect. - Takes a lot of time	A