An Iterative Approach to Interface Design

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

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

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

4. Project Definition

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

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

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

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

9. The Prototypes

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

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

12. Paper Prototype

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

14. System Modifications • Scrapping of the Free Pour Mode

15. System Modifications • Re-evaluation of the soda gun system

16. System Modifications • Revised help system

17. 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)

18. Feedback from User Testing on Prototype Performed by Modellers’ Apprentice

19. Strengths • 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.”

20. Weaknesses • 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.”

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

22. Alpha System

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

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

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

26. Beta System

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

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

29. Video Demo

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

31. Any Questions?