An Iterative Approach to Interface Design April 8 th, 2004 Bartini.
-
Upload
dion-bulson -
Category
Documents
-
view
218 -
download
1
Transcript of An Iterative Approach to Interface Design April 8 th, 2004 Bartini.
![Page 1: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/1.jpg)
An Iterative Approach to Interface Design
April 8th, 2004
BartiniBartini
![Page 2: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/2.jpg)
Nicolas Chan Tak Nam
Luay El-Ghafari
Eloy Junior Galdones
Simon Hung
Team BartiniTeam Bartini
![Page 3: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/3.jpg)
OverviewOverview Project Definition The Prototypes Feedback from user testing on the
prototype The Alpha system The Beta system Concluding remarks
![Page 4: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/4.jpg)
Project Definition
![Page 5: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/5.jpg)
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
![Page 6: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/6.jpg)
Existing SystemExisting System
Last Call, a PC game released February 29th, 2002 by Simon and Schuster Interactive.
![Page 7: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/7.jpg)
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
![Page 8: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/8.jpg)
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.
![Page 9: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/9.jpg)
The Prototypes
![Page 10: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/10.jpg)
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
![Page 11: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/11.jpg)
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
![Page 12: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/12.jpg)
Paper PrototypePaper Prototype
![Page 13: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/13.jpg)
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
![Page 14: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/14.jpg)
System ModificationsSystem Modifications
Scrapping of the Free Pour Mode
![Page 15: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/15.jpg)
System ModificationsSystem Modifications
Re-evaluation of the soda gun system
![Page 16: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/16.jpg)
System ModificationsSystem Modifications
Revised help system
![Page 17: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/17.jpg)
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)
![Page 18: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/18.jpg)
Feedback from User Testing on
PrototypePerformed by Modellers’ Apprentice
![Page 19: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/19.jpg)
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
![Page 20: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/20.jpg)
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
![Page 21: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/21.jpg)
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
![Page 22: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/22.jpg)
Alpha System
![Page 23: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/23.jpg)
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
![Page 24: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/24.jpg)
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.
![Page 25: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/25.jpg)
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
![Page 26: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/26.jpg)
Beta System
![Page 27: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/27.jpg)
Instructions PageInstructions Page
Following user feedback, a short instructions page was added at the beginning of the game
![Page 28: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/28.jpg)
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
![Page 29: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/29.jpg)
Video DemoVideo Demo
![Page 30: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/30.jpg)
Concluding RemarksConcluding Remarks
HCI techniques and concepts usedUser Centered Design
Iterative Approach
VisibilityFeedbackDesign for Error
![Page 31: An Iterative Approach to Interface Design April 8 th, 2004 Bartini.](https://reader036.fdocuments.us/reader036/viewer/2022062318/55174bf9550346ac338b487f/html5/thumbnails/31.jpg)
Any Questions?