This project is to design a revolutionary, intuitive,
and absolutely unique interface for a currently non-existent
system. This system will be constructed as a Senior Design
Project at South Dakota State University. When it is completed
it will have the ability to mix beverages with any combination
of the sixteen liquids contained inside it. As there is no
current system this will be a complete and one-off design
from nothingness.
Overview and Problem Definition
This project will be to design a User Interface for the Self Contained Automatic Beverage Mixing System or S.C.A.B.M.S. This system is currently not in existence so this User Interface will be the first of its kind. Its aim will be to be both visually pleasing and highly functional at the same time. This will be accomplished by using common visual elements to convey action for instance elements that a user may encounter in their everyday life that with no instruction they simply know what steps to take to achieve the desired outcome.
Design is not just what it looks like and feels like. Design is how it works. — Steve Jobs, 2003
This Interface will need to be straight forward, intuitive, and easy to use. The system is not aimed at any particular demographic so the users will have varying levels of technical knowledge as well as very varied ages. For all practical purposes we will assume that the users are not visually handicapped and are able to use at least one of their arms / hands.
Continued Overview / Solution Overview
This Interface will be a touch screen front end that will in turn interact with a MySQL database which will hold a vast repository of drinks. The drinks options that are displayed to the user will be limited to the drinks that can be concocted from the 16 different liquids currently in the system.
The actual interface will most likely be built using PHP, HTML, CSS, Javascript, and perhaps a few other elements to create the graphical aspect of the system. That PHP will then be used to run the queries on the database and to tell the system what information to convey to the relays that will control the 16 pumps inside the system.
- There will be several options on the interface, including but not limited to:
- Regular Drink Menu Page (Included in this page will be an option for glass size)
- Shot Menu Page
- Cleaning / Priming Option
- Taste Test Option
- Customize This Drink Option
- Add a New Drink Option
- Search for a Drink Option
Cognitive Walkthroughs
Main Menu to Pouring of drink (direct route)
| User Actions | System Responses | ||
|---|---|---|---|
| UA1 | "Touch" the Drink Menu Button on the Main Menu | SR1 | Display scrollable drink list on the right with search / sort options at the top. |
| UA2 | Selects "Sort by Category" | SR2 | Display available categories |
| UA3 | Select category | SR3 | Limit displayed drink list to the category selected |
| UA4 | Select to also search by ingredient | SR4 | Cursor goes to search box and on-screen keyboard appears |
| UA5 | Start typing ingredient name | SR5 | Dynamically limit drinks available by ingredient name based on what the user is typing |
| UA6 | Select desired drink | SR6 | Bring up "Glass Size" options |
| UA7 | Select desired Glass size | SR7 | Compute scaled ingredient levels based on glass size and display default drink levels in image on the left and information about the drink along with options on the right. (Options: Pour, Customize, Taste, and Cancel) |
| UA8 | "Touch" Pour It | SR8 | Engage relays to pour the specified drink and display options to the user (Options: Main Menu, Back, or Pour Again) |
Main Menu to Pouring of drink (with customization)
| User Actions | System Responses | ||
|---|---|---|---|
| UA1 | "Touch" the Drink Menu Button on the Main Menu | SR1 | Display scrollable drink list on the right with search / sort options at the top. |
| UA2 | Selects "Sort by Category" | SR2 | Display available categories |
| UA3 | Select category | SR3 | Limit displayed drink list to the category selected |
| UA4 | Select to also search by ingredient | SR4 | Cursor goes to search box and on-screen keyboard appears |
| UA5 | Start typing ingredient name | SR5 | Dynamically limit drinks available by ingredient name based on what the user is typing |
| UA6 | Select desired drink | SR6 | Bring up "Glass Size" options |
| UA7 | Select desired Glass size | SR7 | Compute scaled ingredient levels based on glass size and display default drink levels in image on the left and information about the drink along with options on the right. (Options: Pour, Customize, Taste, and Cancel) |
| UA8 | "Touch" Customize It | SR8 | Keep left display the same and display sliders on the right pr-configured to show the default levels for the specified drink and size |
| UA9 | Change an ingredient amount | SR9 | Dynamically scale up or down the other ingredients to maintain their ratio to each other with regard to glass size. Also update the picture on the left to show the changes in liquid amounts. |
| UA10 | "Touch" Pour It | SR10 | Engage relays to pour the specified drink and display options to the user (Options: Main Menu, Back, or Pour Again) |
Main Menu to Pouring of drink (Taste Test Option)
| User Actions | System Responses | ||
|---|---|---|---|
| UA1 | "Touch" the Drink Menu Button on the Main Menu | SR1 | Display scrollable drink list on the right with search / sort options at the top. |
| UA2 | Selects "Sort by Category" | SR2 | Display available categories |
| UA3 | Select category | SR3 | Limit displayed drink list to the category selected |
| UA4 | Select to also search by ingredient | SR4 | Cursor goes to search box and on-screen keyboard appears |
| UA5 | Start typing ingredient name | SR5 | Dynamically limit drinks available by ingredient name based on what the user is typing |
| UA6 | Select desired drink | SR6 | Bring up "Glass Size" options |
| UA7 | Select desired Glass size | SR7 | Compute scaled ingredient levels based on glass size and display default drink levels in image on the left and information about the drink along with options on the right. (Options: Pour, Customize, Taste, and Cancel) |
| UA8 | "Touch" Taste Test | SR8 | Scale drink down to a "Taste" portion and Engage relays to pour the specified drink and display options to the user (Options: Main Menu, Back, or Pour Again) |
All of the above also applies to the shot menu page (except for the taste test and glass size options of course).
Main Menu to "House Favorite" List
| User Actions | System Responses | ||
|---|---|---|---|
| UA1 | "Touch" the "House Favorite" Button on the Main Menu | SR1 | Prompt user for time period |
| UA2 | Select time period (Options: Day, Week, Month, Year, or Lifetime) | SR2 | Query database for most poured drinks within the specified time period and display the top 10 drinks in descending order based on popularity. |
Main Menu to "Cleaning" List
| User Actions | System Responses | ||
|---|---|---|---|
| UA1 | "Touch" the "Cleaning" Button on the Main Menu | SR1 | Display options for cleaning to user (Options: 1 Line or Entire System) |
| UA2 | Select Cleaning option | SR2 | Send commands to the relays to engage the valves to clean the line or lines specified by the user |
Main Menu to "Priming" List
| User Actions | System Responses | ||
|---|---|---|---|
| UA1 | "Touch" the "Priming" Button on the Main Menu | SR1 | Display options for cleaning to user (Options: 1 Line or Entire System) |
| UA2 | Select Priming option | SR2 | Send commands to the relays to engage the valves to prime the line or lines specified by the user |
Main Menu to "Add New Drink" List
| User Actions | System Responses | ||
|---|---|---|---|
| UA1 | "Touch" the "Add New Drink" Button on the Main Menu | SR1 | Display List of Ingredients in the system |
| UA2 | Select ingredients needed for new drink and submit to system | SR2 | Take user input and generate a form with the ingredients already put in, prompting the user for further information (e.g. Name, Background Information, Category, etc) |
| UA3 | User enters all pertinent data and submits to system | SR3 | Cross references the database to ensure this drink is not a duplicate or too similar to another drink that already exists. If valid it is stored in the database and will be readily available to users. Display Options (Options: Pour New Drink, Add another Drink, or Main Menu) |
Heuristic Evaluation
| Heuristic | Description |
|---|---|
| Visibility of system status | In tasks that are sequential and have a set number of steps the system will let the user know where they are at in the give task (e.g. Step 3 of 5). Also when pouring the drink the level should drain as the liquid is poured to let the user know what the system is pouring the drink, this task could be quite problematic as the calibration and system response must remain a constant. |
| Match between system and the real world | In the real world a person would take the order and physically pour the drink. To mimic this in this scope would be impossible but the end result in our case should be better as the machine has much more precision than a human could. The system will make and assumption of natural language of the user being English, this could pose a problem if the system is adapted to other geographies. |
| User control and freedom | Every menu will have a clear "exit strategy" such as a "Back" or "Cancel" button so that the user will never be "lost". |
| Consistency and standards | The design is amazingly consistent in the orientation of the left and right regions of the interface and all other elements should follow strict standards for web design as this is being written in a "web language" (PHP) |
| Error prevention | Careful planning and consideration have been conducted to minimize if not nullify the presence of errors. But inevitably as in all systems there will be some errors either of the systems fault or because of user error. These issues will be dealt with in turn. |
| Recognition rather than recall | The recognizable aspects of the system will be familiar (e.g. Sliders for liquid customizing, On-Screen keyboard will be "QWERTY", etc) Also, subsequent versions will build upon the existing versions as much as possible to maintain a consistent "feel" throughout the system. |
| Flexibility and efficiency of use | This is a big issue with this system, as it is highly custom and extremely tailored the flexibility is almost non-existent but this will not impair the efficiency of the system. As each process will be carefully designed to maximize efficiency inside the system (e.g. query optimization) |
| Aesthetic and minimalist design | The interface is made to be both visually stunning and simple. There will not be excessive or unneeded distracting elements thus keeping the users eyes focused on the task at hand and allowing for greater ease of use. |
| Help users recognize, diagnose, and recover from errors | If errors do occur, the error messages will be clear enough for nearly anyone to understand them and a clear option as to what to do next will be apparent. |
| Help and documentation | A unique feature of this system will be that there will exist on-screen walkthroughs to instruct the user on the various basic operations of the system. Also there will be options to get information about the various elements and menus in a text based form (possibly in a pop-up of some sort) |
Revised Low-fidelity Prototypes
Figure 1: An idea for Drink Glass size selection
Figure 2: A revised mockup of the display drink page with more options.
Figure 3: A proposed post-pour screen interface.
Summary and Modifications
After completing the walkthroughs and evaluations above a few things have come to mind. I need to have a well structured hierarchy of pages and menus with clear paths forward and back so that the user does not get confused, scared, or lost within the system. To accomplish this I will always provide buttons to go back or to jump straight out to the main menu. I will also keep the design aspect almost completely static so that the uniformity is apparent throughout.
Another thing that came to mind is the extreme importance of little to no errors in this system. I hope to accomplish this by walking through every possible scenario both cognitively and physically and also by exhaustive alpha and beta testing.
Planning and Development
Soon after this phase is over I will begin the actually coding and implementation of this interface. This will consist of:
- More sketching to get a better feel for it and to better map out features
- Rough mockups in coded pages to get the elements somewhat positioned where I want them
- Finalizing the layout in code
- Coding the individual elements to function properly
- Checking for validity and standards within the code
- Documentation and commenting of the code
- Testing without users
- Testing with users
- Rollout / Delivery
There will obviously be more to those steps than meets the eye, these are merely general steps. All of this will take place from 1 November 2007 to the end of the semester when the project is due.
I will be coding primarily in PHP using just a simple text editor, called Smultron, to write it in. The style elements will be handled with CSS (Cascading Style Sheets) and will also be coded in that same text editor. Various elements will no doubt require other code such as Javascript, DOM (Document Object Model) Scripting, HTML (Hypertext Markup Language), etc.
The testing will be done in a web browser, namely Firefox or Flock and the files will be hosted on my server at http://lab.derekfernholz.com/SCABMS and the files will be FTP'd to the server using "Unlimited FTP".