An Iterative Approach to Interface Design

April 8th, 2004

BartiniBartini

Nicolas Chan Tak Nam

Luay El-Ghafari

Eloy Junior Galdones

Simon Hung

Team BartiniTeam Bartini

OverviewOverview Project Definition The Prototypes Feedback from user testing on the

prototype The Alpha system The Beta system Concluding remarks

Project Definition

Project DefinitionProject Definition

Bartini is a single-user entertainment environment which allows the user to mix virtual drinks in a bar-like atmosphere.

Two modes of operationFreePour ModeArcade Mode

Existing SystemExisting System

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

Project Definition – Project Definition – Supported TasksSupported 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 CriteriaEvaluation 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 ApproachInitial 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 TestingUser 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 PrototypePaper Prototype

Comments & FeedbackComments & 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 ModificationsSystem Modifications

Scrapping of the Free Pour Mode

System ModificationsSystem Modifications

Re-evaluation of the soda gun system

System ModificationsSystem Modifications

Revised help system

System ModificationsSystem 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

PrototypePerformed 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.”

StrengthsStrengths

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.”

WeaknessesWeaknesses

RecommendationsRecommendations

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 barExtension 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

ChangesChanges

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 ChangesOther 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 PageInstructions Page

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

Changes from AlphaChanges 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 DemoVideo Demo

Concluding RemarksConcluding Remarks

HCI techniques and concepts usedUser Centered Design

Iterative Approach

VisibilityFeedbackDesign for Error

Any Questions?