5 Simple UI Design Tips
Here are 5 simple UI design tips for online forms:
1. Immediately inform users if your service is unavailable before letting them do anything.
2. Don’t assume users know what values to put in.
3. Remove unnecessary and confusing fields.
4. Make error messages stand out.
5. Properly mark required fields.
Online forms are great. They allow me to access a service without having to call a company’s customer hotline.
I called HSBC’s credit card customer hotline a few days ago. I wanted to redeem my bonus points and have them converted to miles. I was told redemption is now done online. I logged in to my account and followed the redemption process. I searched for the miles item and added it to my shopping cart then I went to the checkout page. This is the notice I got at the checkout page:
Tip #1: Immediately inform users if your service is unavailable before letting them do anything.
So after going through the online redemption process, I’m being told it was all for nothing.
I went to the online form and filled it up. I filled up all the required fields, the ones labeled with red asterisks. Here’s a screenshot of the form and how I filled it up. The values are not the actual values I entered.
Tip #2: Don’t assume users know what values to put in.
I couldn’t completely fill up the form because there’s this one required field I don’t know what value to put in. The “Redemption Center Code (for items for pick up)” is a required filled and I have no idea what to put in. I’m redeeming miles so I don’t have to personally pick them up because they should be electronically transfered to my mileage account. Even if I’m redeeming an item, I don’t have a list of Redeption Center Codes. I called the customer hotline. I was told to put it “For self pick-up”. Great!
Tip #3: Remove unnecessary and confusing fields.
Another issue I encountered was the “Terms and Conditions” section. There’s an empty text area which I don’t know what’s it for. I was expecting for it to contain the actual Terms and Conditions. It wasn’t labeled with any instructions on what to put in. This should have been removed.
So I submitted the form and I was redirected back to the page. Nothing seems to happen! Being the dumb user, I couldn’t figure out what was wrong. I filled up all the required fields and I don’t see any error messages. This is what I got when I submitted the form:
Tip #4: Make error messages stand out.
I called the customer hotline again. I was told to read the error messages above the form. What error messages?! As I looked closely, oh yeah, there’s a message “Please input your email address” written in black and regular font just like the other non-error message texts.
Tip #5: Properly mark required fields.
I told the agent the field is not marked with a red asterisk so it shouldn’t be a required field. The agent told me it is a required field and we’ll take a note of it not being marked required.
Bonus Tip: Send a confirmation email so users will have a record of the transaction.
I filled up the email address field and I was able to successfully submit the form. I was redirected to a success page telling me the process will take around 5 days. I didn’t get any confirmation email or a transaction ID. So just in case the process took more than 5 days, I don’t have any reference to the transaction when I follow it up with them. Not Great!
