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

: Linda Harjono, Saifon Obromsook, John Yiu Chi Wai

Summary Report | Assignments | Prototypes | Presentations | Team | Vocabulary | Workload Distribution

Scenarios, Competitive Analysis, and Preliminary Design

Competitive Analysis

Since our system is relatively new, it does not have any directly competing interfaces according to our knowledge. However, we still want to be able to imagine what our interface would be like in practice. Therefore, we decide to perform the analysis on various existing interfaces that can lend some of their functions to McInterface.

First, we analyzed Hong Kong Mass Transit Railway System (according to John's experience). Second, we explored an online pizza ordering website. However, the resulting suggestions are already those addressed in a general web-design guideline. The resulting requirements can be evaluated using heuristic evaluation, and they do not specifically contribute to our design problem. Therefore, this particular system will be left out of our competitive analysis. Third, we went to try using a web browsing kiosk at Bongo Burger since the kiosk looks very much like what we envision our system to appear as.  Lastly, we looked at a specific part in an online grocer website (Webvan) since we were particularly interested in its shopping cart feature.

Hong Kong MTR (Mass Transit Railway) System

MTR is one of the major means of transportation in Hong Kong. It uses a “Touch Screen” system to sell tickets in the stations.

How does it work?

The system consists of a ticket-selling machine similar to those we see in BART station except that it has a “Touch Screen”. On the screen it shows a diagram with four major lines of MTR in different colors – ISLAND line, KOWLOON line, NEW TERRITORIES line, and AIRPORT line. On each line there are dots that represent the stations on the line. Each dot has the station name beside it.

If we want to go to a particular station, we touch the dot representing the station on the screen. Then a new screen will appear which shows how much you have to pay for the ticket. There are also four buttons at the bottom of the screen: Adult, Discounted, Multiple, and Cancel.

The ticket purchasing process is simple: just select the kind and number of ticket you want, put in coins or notes, and when you have paid the fare required, the ticket and the changes will come out. There is no need to do any confirmation.

Advantages:

Disadvantages:

Suggestions To McInterface:

I think the most important feature of the MTR ticket machine I want to include in our design is its ability to show the amount of money you need to pay as you are making the purchase. (We can also elaborate this feature to show the total amount of calories in the customer’s order.)

Another feature I want to include in our design is the bilingual feature because that makes the system user-friendlier.

Users should be able to choose whether to start the purchasing process from the “MyCombo” section or the food menu section.

There should have a warning signal to the user when the amount of money he/she has to pay for the order is larger than the value stored in his/her McCard.

The user should be able to change his/her selection or cancel the order at anytime of the purchasing process before confirming the order.

Finally, there should also have more introductions to the different kinds of food offered in McDonald’s.

Web-Browsing Kiosk at Bongo Burger, Euclid

The kiosk mainly consists of a touch-screen and a keyboard used for text input. The size of the touch screen is about 9 inches by 6 inches (though, we expect McInterface's screen to be bigger, about 11 inches by 10 inches). The browsing session is limited to fifteen minutes each. Since on-screen interface is the similar to a regular web-browser, the on-screen interface design did not interest us as much as the use of the keyboard. We tried using the keyboard to feed in some text and discovered that it is not very convenient just because we were standing up using the system. Also, one of us, who cannot touch-type, found it a bit difficult to find each character on the key.

Although this kiosk might serve its target users fairly well in allowing them to access the Internet, the same set of equipment would not work well with our McInterface. This is because the time constraint is a very important factor for our system. We think that equipping McInterface with a keyboard is likely to slow down the ordering process. This observation convinced us that a touch-screen will work best for our design.

The web-browsing kiosk, however, gave us a real feel of the proper text size displayed on a touch-screen. We noticed that some hyperlinks, when appearing on the screen, were too small to be pointed at. At this design stage, however, we do not yet focus on this particular graphical detail, but we now know that we can use the kiosk for our future reference for this particular design aspect.

Webvan's Shopping Cart

An e-check out system is a very crucial part for McInterface. Since there are hardly bad shopping cart systems today, we try to look for a few really good ones to perform an analysis on. The one that really satisfy us as users is Webvan's shopping cart.

Unlike most other online stores that use a shopping cart metaphor, this online grocer's website display the items, the quantities, and the total value of the card at all time from when the users start to shop until the check-out. When the customers click the 'add to cart' button next to an item, the item appears instantly in the cart area with its price automatically added to the total. This gives the shoppers a faster response in helping them making buying decisions.

The main disadvantage of this feature when applied to McInterface is the space limitation. Even with a web interface, this the item labels in the cart are barely readable since both the cart and the product selection take up a lot of space. This problem is probably even more severe for a touch-screen kiosk like McInterface, where the amount of light might be limited and the only navigation tool given is a human finger.

Despite the above reason, we will still try implementing this style of shopping cart with McInterface. One strength that might alleviate the problem is a smaller selection of product, which is only McDonald's menu. Also, a fast-food tray is not likely to hold as many items as a grocery shopping cart.

Another feature of Webvan's shopping cart that might apply really well to McInterface is the up and down arrows used to specify an item's quantity. A graphical on-screen keypad wastes more space than the arrows and is unnecessary for a quantity number, which is usually not a very big number. The keypad is probably better used in dealing with the dollar amount in a McCard.

Next: Initial Designs