I was inspired by a problem that I encountered lately for this small case study.
In Starbucks’ app, I wanted to add my credit card information and I filled up the first input with my credit card number, then I went on to next input and realized that I made the mistake. Later, I remembered that I have done this mistake a few times before in similar credit card input pages in different platforms.
I wanted to be sure about if I am the only one who have made this mistake before and asked some friends around me. Some of them have had the same experience.
We rarely read placeholders because our brain scans it quickly and compare the layout with the early similar data in our brain to find the best match.
Anyway, let’s assume we are the UX Designer in charge of this app and we have discovered that many people are facing this problem. Of course, the way we detect the issue is important but let’s first define the problem;
Problem Definition: Some users suppose that the first input is for credit card number and they type the number first and as a result they lose time to complete the task.
I feel that we should dig into the psychology behind the problem in order to support the problem definition with a “why” question. It is probably because the first information a user focuses on the card is the card number and he/she relates the first input as a first line of information.
This why question will also help us build a better solution. Because empathy will take us a point closer to the solution. (To be more accurate with our assumption of that reason, we can perform some quick tests with users and observe their behaviors)
Now, let’s focus on the solution.
What is our goal?
Our goal is to prevent users to type the wrong information into inputs so that they do not lose time to complete adding their credit cards.
We should define metrics to measure to check if we achieve our goal.
One metric can be “time to complete the task”. Now we should learn the average time currently spent on this page.
When we see that the average time to complete the task after optimization is less than before, then we understand that we achieve our goal. (Let’s not be so sure about this though since there can be another factors.)
We can track the metric by means of data analysis. Apart from data analysis, user behaviours can be monitored with mobile app analytic applications, such as Appsee.
Usability tests and design iterations will save us time and budget. For testing, we should have hypotheses and interactive prototypes of these hypotheses.
First hypothesis can be directly a solution for our assumption of the actual reason. We can put the card name input after the information available on the card.
Secondly, it is good to approach skeptically to our assumption. What if the actual reason was not like we thought and a better writing into the inputs would solve the problem. We can change “Credit Card Number” placeholder text with numbers and put a little bit space between Card Name and Card Number inputs to separate the information actually available on the card and the card name which is not available on the card. (See laws of proximity of Gestalt principles)
Now we can prototype these hypotheses and go to usability test. We will finally be able to observe if users type the correct information in both of the inputs. One of the hypotheses will beat the other. Then we validate our hypothesis to go under delivery process.
After launch of the update, we should track the change with our metrics and also by the help of mobile app analytic applications.