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?