skills
control analysis | sketching | 3-D modeling
tools
invision | foam core | exacto knife | post its | markers
Controls surround us in our everyday lives, yet most are poorly designed, leading to awkward or frustrating users. When it comes to perceptual affordance, feed forward, and feedback, many times the controls do not meet the needs of the users.
In an attempt to combat this, the goal of the project is to rethink controls for an ATM, a vital machine that allows people to handle their money without needing to go to the bank. However, many ATMS are confusing, with misaligned buttons and lack of clear instructions.
I focused on utilizing colors and creating a top-down process to simplify the usage of an ATM and effectively communicate with the user. Ultimately, interacting with an ATM is a personal experience that should be easy and intuitive for anyone.
Final Design — A Simple, Playful ATM
My final ATM design combines the physical controls with a clear and instructive interface. All slots and buttons are on the same plane so the user can see everything at once. The top-down organization allows gives the user clarity about where they should start, and where to go. Color is used effectively with the screen to decrease confusion when the user much make a choice from the screen by pressing a button.
Through this project, I aimed to create a simpler and clearer ATM model that effectively utilizes color and composition to ease the user into organizing and handling their money. Ultimately, this ATM leads to a more personalized experience that anyone, even someone who is using an ATM for the first time, can feel comfortable engaging with.
Even after the completed product, I am continuing to think about other methods to improve this ATM dessign. For instance, given the time and resources, research could be done using eye tracking technology or a simple interview to gage what people look at first when they approach an ATM and what users consider the single most important use for an ATM. Considering designs for greater accessibility is also important as well.
Process — Control Analysis
Before diving into a single control, I examined multiple controls for perceptual affordance, feed forward, feedback, and semantic carriers of meaning. One product that I use in my everyday life is the toaster oven, which is a simple yet complicated machine. After realizing that there could be improvements, I quickly sketched a new model of my “dream” toaster. For instance, a sliding lever at the bottom that changes color to indicate how toasted the bread will be gives better feed forward than just a number system of toasting. In addition, adding time of toasting can bring value to the user, who will now know how much longer to wait for their bread.
Process — Transition to ATM
Now, we move onto the larger task at hand: the ATM. When first using this particular ATM featured on the right, I found the buttons too flat and hard to press (poor perceptual affordance) and a lack of clear instructions. I remember countless times trying to insert money only to have the machine return it back to be due to incorrect orientation.
I realized that an ATM is an extremely important resource for all people who need to handle and organize their money. Rather than waiting impatiently and leaving angry, people should find the ATM easy and efficient. Yet, this isn’t the case. These frustrations fueled my design as I began thinking about how to improve the ATM design.
First Iteration — Color
One thing I notice when using an ATM is that there tend to be darker colors, which can make the text harder to read on buttons. I wanted to change this and create more contrast by having white buttons, as seen in the key pad. In addition, my main focus was to introduce more color. I found that my grouping slots and their respective labels by color and location, I had introduced coupling, which would then help the user navigate which where exactly to place their card and how to insert it.
I also added some additional features, such as a finger print scan. ATMs are located in public areas for all individuals to use, which is convenient, but also creates greater risk for the user, who could potentially have their information stolen. A finger print scan could be an extra precaution to prevent this from happening.
Second Iteration — Introducing UI
After critique, I realized that I had created too much confusion by adding too many colors. Instead, I decided to shift the color to the buttons that would align with options for the user to choose from. Many times, if the buttons and the words don’t line up, it can be confusing which button is associated with which option on the screen. Adding color to the buttons introduces a new layer of connection, creating better feed forward for the user.
Furthermore, I used inVision to create a simple interface to demonstrate how the user might use the buttons in conjunction with the screen.
Third Iteration — Organization Change
One thing I wanted to revise more was the organization, and key pad. I realized there was poor pressability of the key pad and that the receipt was all the way at the top, which didn’t seem to make much sense since the receipt is usually the last item the user takes before leaving.
An organizational change was needed. I returned to thinking about the hierarchy of information and top-down processing.
In my latest iteration, I made the keypad smaller and more pressable. The user begins using the ATM at the top left with a card insertion and fingerprint scan, and ends at the bottom right, where they take their receipt. Re-creating the composition with more space reduces cognitive load for the user and centralizes their focus on groups of information rather than everything all at once