An Iterative Approach to Interface Design April 8 th, 2004 Bartini

Nicolas Chan Tak Nam Luay El-Ghafari Eloy Junior Galdones Simon Hung Team Bartini

Overview Project Definition The Prototypes Feedback from user testing on the prototype The Alpha system The Beta system Concluding remarks

Project Definition

Bartini is a single-user entertainment environment which allows the user to mix virtual drinks in a bar-like atmosphere. Two modes of operation FreePour Mode Arcade Mode

Existing System Last Call, a PC game released February 29th, 2002 by Simon and Schuster Interactive.

Project Definition – Supported Tasks Selecting FreePour or Arcade mode Taking an order Mixing a drink Selecting a cup Placing ice in the cup Selecting an alcohol bottle Selecting a juice bottle Selecting a soda from the soda gun Pouring liquids (alcohol and juice) Using the soda gun Serving the drink Turning the music on or off Opening/closing the recipe book Exiting the game

Evaluation Criteria A new user should be able to easily distinguish between interactive objects and the static background within 3 minutes of play. A new user should be able to decipher the game interface and the possible actions within 5 minutes of play. A new user should be able to easily follow the displayed recipe and mix drinks comfortably with no more than 2 drink errors. A new user should be able to play the game with no more than 4 gesture errors per drink.

The Prototypes

Initial Design Approach Gesture Set Mimic real life bartending Point, grasp, drag, release Storyboard Way to visualize our concepts Determine a bar layout Agree on different interactions with the bar elements

User Testing The goal of user testing: To generate some initial feedback about the system and possibly identify major design flaws Tested a handful of people of varying age and computer skills Presented them with a paper mockup of the system and gave them a task

Paper Prototype

Comments & Feedback We received many comments & suggestions from the potential users: - supported our own doubts - surprising yet valuable Carefully weighing this input changes were made to the interface

System Modifications Scrapping of the Free Pour Mode

System Modifications Re-evaluation of the soda gun system

System Modifications Revised help system

System Modifications Removal of sink Rearranging of bar elements Things kept: - Gesture set - Design of the bar and the elements (bottles were easily distinguishable because of color and shape)

Feedback from User Testing on Prototype Performed by Modellers Apprentice

Help and documentation The help is concise and informative; the buttons and the tabs in the book have nice affordances. Affordances The multiple shapes and colors of the ingredients offered users the ability to learn where everything is, and thus perform better. Aesthetic and minimalist design The prototypical design is very well balanced with functional components and use of space. It was a good idea to remove cluttering background bar materials in the prototype. Strengths

Recover from error Support to undo actions is missing completely. If a wrong glass is chosen or a wrong amount of an ingredient is poured, we must still serve the drink to the customer. Feedback The drink does not change color based on its ingredients. The scoop does not fill with ice when it is selected. Weaknesses

Recommendations Add ability to scroll through recipe Ice takes up volume in glass Allow users to select the soda gun and then click a button for flavor Add an interactive sink Allow drink contents to overflow

Alpha System

Extension of bar Extension of the bar to 3 screens in order to take advantage of the SRE and create a 3D-environment Prototype Alpha system

Changes Recipe Book Placed the recipe book onto the shelf Addition of glass type to description of drink Ability to flip through available recipes Soda Gun A pop-up selection window was added since a lot of users tended to pick up the gun first instead of selecting the soda.

Other Changes Possibility to discard drink in order for the user to recuperate from mixing error Ice now takes up volume in the glass and is present on the scoop to increase the match with the real world Implementation of a proper exit function in the form of an exit door Augmenting the size of the action box for pouring in order to reduce the number of errors committed by the user Addition of background music

Beta System

Instructions Page Following user feedback, a short instructions page was added at the beginning of the game

Changes from Alpha The customer now indicates to the user that the glass is already full if he tries to add more liquid The drinks content pane is now updated in real time Changing the color of the drink depending on the liquids being poured Constraining the movement of the open recipe book Animation of the customers

Video Demo

Concluding Remarks HCI techniques and concepts used User Centered Design Iterative Approach Visibility Feedback Design for Error

Any Questions?