Usability Tip: Intuitive Design Clears Confusion
One of the best ways to learn what works and what doesn’t work when it comes to UI and usability is to look at as many samples as possible and test out pages, comparing and evaluating how certain elements are being treated.
After the unfortunate dropping and breaking of my new iPhone, I was hoping for an easy process filing an insurance claim online with Asurion. Instead, I was faced with a process that was unintuitive.
The first set of general instructions directed me to write down the claim ID for future reference. However, only after reading the small copy underneath these instructions did I realize that the number was located in the “upper hand corner of this web page.”
Looking to the top right hand corner (where I would normally expect to find navigation buttons or log in/out functions) I did not see my number at first because the actual claim ID is neither centered nor aligned to the top right. Instead, it is placed as a white title far removed from the actual set of instructions. Why couldn’t they have simply given me the number next to the instruction copy?
Screen shot of the first screen in the Asurion claim insurance process.
The second set of instructions said to print and complete the form by clicking the “Continue” button below. This was also confusing, as most continue buttons lead to the next step of a process not to pages for printing forms.
There are as many design solutions to one problem as there are designers, but all solutions need to follow some common usability conventions. Here are a couple of usability tips that tackle the issues above:
- Don’t hide important information. If the claim ID is important to have for future reference, place it next to the instructed copy to keep it and make it visibly heavier in weight so it stands out.
- Intuitive buttons help users know what to click on. A continue button should lead to the next page or step of a process. It should not be used to print forms. Intuitive language helps users identify available actions immediately without confusion.
Here is my attempt at a redesign that displays a concise set of instructions with clear label buttons that will lessen the confusion and ease the claim insurance process.
Try your hand at redesigning this page to make the process more clear and intuitive and share a screengrab on Twitter, Facebook, or Google+ using the hashtag #clearlyintuitive. We’ll add our favorite submissions to this article as part of a gallery. (Image of child using smartphone courtesy Shutterstock)
I have a similar focus, though emphasise on points, ID & cat"—@skovpape
ABOUT THE AUTHOR(S)
Tammy Guy is the founder of a visual design and usability consulting firm focused on strategic brand planning, creative direction and diffusion of user experience problems by applying design theory and usability best practices in a rapidly changing Web environment. Her firm provided consulting services to clients from various industries such as fashion retail, commodity retail, pharmaceutical, insurance, financial services, social networking and others. Services include product evaluation, strategy and planning, creative development and direction and usability consulting.
In addition, Tammy has been a frequent guest speaker with the Nielsen Norman Group for the past few years where she teaches visual design and usability classes.
Add new comment
Comments
Hi Tammy,
You might want to remove the continue button from your example as I don't think there's anything to continue to, at least not until the outcome of the form submission is known. Although it's hard to tell from the process whether you can still continue and complete the other details. So there's another issue :)
You've also constrained yourself to thinking within a broken process. It's not beyond the wit of man to automatically add the claim number into the form the user downloads to print, so that step can be eliminated. In fact, why is a form required at all, the rest of the process is online, why not this step?
An even broader question is what constitutes intuitiveness? I agree that your example solution is far superior to the current one. However, I'm not totally sure what you mean by your title "One of the best ways to learn what works and what doesn’t work when it comes to UI and usability is to look at as many samples as possible and test out pages, comparing and evaluating how certain elements are being treated." How does this get us to an intuitive design? Is this not just an infinite monkeys, infinite typewriters approach to design. I think rapid iterative testing and redesign might be a better approach (perhaps that's what you meant).
Looking forward to seeing what people come up with...
Thanks Alex - already taking care of the typos...
Would love to see your version when you have it.
