The importance of good design influences a lot about a product, including its success or its failure. So, what is user interface design? In short, UI design is concerned with the visual focus of a product, designing solutions to meet the needs of users and anticipating what users might need. Thus, the goal is to help users accomplish tasks and make the interaction as simple, efficient, and safe as possible. Good UI design should almost be invisible, if you have to explain it, there is a problem or it's simply just not a good UI design.
With this being said, UI design covers many features and functions of an interface.
UI designs should stand as an assistant that:
- Speaks the same language as the user
- Speaks at an appropriate pace
- Does as its told
- Conveys what its doing
- Notifies the user of any issues and and then helps to resolve
A user interface must:
- Anticipate, guide, and react to interactions
- Create an emotional response
- Communicate needed information
The integrated results of design features that serve to smooth the interaction between people and a product will make your interface usable and increases user satisfaction.
In a current User Interface Design seminar I am taking, we were tasked with designing a kiosk interface, coined Patty™, for a well-known burger restaurant, Shake Shack. Acting as an external consultant, I developed a way for customers to use Patty™ as a quick and easy way to order and pay for food without waiting in a long line. With a full menu available, ability to edit order preferences, and easy credit card slider/ chip reader, Patty™ is an easy to use and intuitive interface for all customers.
In designing Patty™, I kept in mind the importance of a simple design and aesthetic that matched the branded Shake Shack graphics. I used blue arrows throughout the prototype to mimic the action a customer would take to order a ShackBurger and add a few toppings (like extra cheese and bacon). Below are a few screens and an explanation of my design.
For the initial welcome screen, I decided to stick with the classic and well-known Shake Shack sign and burger icon in the middle. Above and below this sign is a short statement telling customers what this kiosk is for and how to proceed with an order. In the bottom right corner, I added a button that allows voice enabled ordering, written in red. I chose to include this in an effort to increase the accessibility of the interface to those who are visually impaired or may have motor impairments that inhibit their ability to interact with touch screens.
Once a customer initiates their order by tapping the screen, they are brought to the menu screens. On the left-hand side, customers have the ability to choose the food they want, which will be highlighted by a light green box to confirm the users’ choice. In this situation, the customer wanted to look at the burgers, so the Burgers & Chicken tab is highlighted and shows each burger available. I chose to include pictures of the burgers as a visual incentive and to help with the ordering process. Below each burger is the name and description. In the top left corner, I included an exit button to allow customers to cancel their order at any time, and a help button if questions arise. Below the menu sections is a checkout cart icon and button for when the customer is ready to complete their order.
Once the customer makes a choice, the ShackBurger in this case, they are brought to a popup window with a picture for visual stimulation, the name and description, ability to edit the burger, quantity, and add button. There is an ‘x’ in the top left corner that provides the customer with the ability to delete this choice if they change their mind and do not what the chosen burger. If the customer clicks on the ‘Edit your burger’ button, they are brought to a new popup window that displays burger specifications, additions, or ability to remove things. The classic burger icon lines the right side of the window (ideally for different foods it would be a different icon, i.e. if you were ordering a shake it would have the shake icon).
From here, the customer adds their burger to the cart, and is brought back to the menu page, allowing them to order more if wanted. They then click on the cart and are brought to a popup window with the order summary, ability to edit or remove item, totals, and button to confirm and pay. When clicked, customer is brought to the final screen, similar to the initial start screen, with the Shake Shack sign and burger icon, a thank you message, and directions for waiting for the completed order with their given ticket number.
In designing the popup windows, I choose to keep the background visible but faded to provide users with the understanding that they can exit and go back to the menu if needed. Throughout the entire design process, I focused on providing the user with easy to understand icons and buttons that lend a hand in the ordering process. The color scheme and icons match the Shake Shack branding but are not distracting or confusing.
Even though this was my first attempt at a kiosk interface, I am happy with my designs! If you are now feeling inspired to design your own interface, here are a few simple tips to keep in mind:
- Consistency is critical in making a usable and well-designed product as it forms patterns and allows for easy understanding. This includes consistency in: spacing, alignment, fonts, colors, labels, visual style, and navigation tools.
- To help guide your user, it is important to have: clear labels, screens and controls, prompts, sense of progress, communication of status (if necessary) and illustrations.
- As for visual formatting, use consistent icons, highlight primary information and controls, differentiate between static information and interactive controls, use a purposeful color palette, and ensure text accessibility (high contrast and appropriate sizing).
The above tips will help develop a usable product and enable people to succeed with the product's intended purpose, increase satisfaction, and decrease the possibility of confusion or misinterpretation.
Happy designing!
Comments