Disclaimer: I’m a storyteller and not much of a designer. In fact, there is not even the remotest family gene closest to designing.
I am awful about almost everything related to color and shape. My last memory of drawing or sketching dates back to the time when I was in school. My art teacher tried to teach me the nuances of sketching and coloring, by hook or by crook. But every time she looked at my sketchbook, all she could make out was potato shaped faces and cabbage-shaped ears. Her face dropped. She finally gave up when I turned sixteen.
Wondering why I consider myself fit to ask designers this question- “Are you fooling around with UX?”
Because I am a keen observer and an even better listener. It’s been one year with Quovantis and the humble corner where I like to ‘place’ myself is surrounded by people who eat, sleep, breathe design. With them, I have been a pseudo-designer and part of almost all their design discussions. I have been their user when they wanted to do usability testing. I have been their honest feedback and their most valued critique (or, so they tell me).
Hearing their daily ramblings about the need for simplicity in user-experience design, I am, now, in a position to write and talk about what separates good design from bad design.
But I would not want to go into what has been already said. I would rather like to touch upon negative spaces, i.e. what not to miss. Here’s what I have learned by listening and observing. Following is a list of most overlooked facets of UX Design. If you’re a complete noob, here’s something that you shouldn’t miss while designing-
1. Design for empty states
I got to understand the term afterward and this makes complete sense. An empty state is what the user sees when there is no data to display on the screen. This could be because of multiple reasons. The user is new to your website and she has just signed up. Or there has been a technical error. Or the user has mistakenly erased everything. There can be many many more reasons, but let’s just stick to common ones.
Keeping your users hooked to your website/app is probably the most difficult as well as easy part. Your users are fickle minded, which is why you should serve them every bit of information on a plate.
For building a first good impression, hoot for them in the moment of success and cry with them in their moment of failure. And when they are stuck, show them a way out!
Tips for designing power-packed empty states
Words have an ability to create a moment. And words have the strength to destroy it. That’s why they say- ‘Choose your words wisely’. You are not only dissipating information, you are building relationships. Consider this example- your three-year-old kid is sick; so you immediately take her to hospital. Upon reaching there, you are informed that your paediatrician is not available. And that’s it. You are left unattended!
How inhumane, right?
Look at the mobile version of this situation-
So you click on the big blue button. And it takes you to this screen-
The moment is similar to feeling helpless with your little one cuddling in your arms, waiting to be treated.
Let’s discuss this step by step.
You are in trouble. Your child needs immediate care. And you have no doctor available who can treat her. The empty state for this doesn’t specify the reason for unavailability, nor does it specify an alternate route!
Now, consider the next option. How about this?
Okay. So now I have a reason. This screen tells me why I can’t see a doctor right now, but nothing else.
Try and be more empathetic, will ya?
There you go! Now you are talking human. You got to save the child, goddammit! The kid did not fall sick, with a plan. Treat her. Don’t just dissipate information, it’d feel like your app is deliberately unhelpful. Provide actions with a solution.
2. Reduce your waiting times
Or make ’em fun.
Waiting times are boring and unpredictable. For how long do you think you can stall a user while you prepare for launching your data into the screen? 3 seconds? 35 seconds? An eternity? Staring a blank screen is like entering into a tunnel without knowing what awaits you towards the end of it.
Wouldn’t it make more sense if users are kept more engaged & informed while they wait for the output they are expecting? To make the interface more interactive, you can use loaders or progress bars to give the user a clear visual indication that something is happening after they clicked on that button/link. A visual indicator indicates that the system has recorded user’s input and would do something about it. SOON.
Somewhat similar to what great magicians do when they make objects disappear. They have perfected fine command over the art of misdirection and they hold your attention on one thing in order to distract attention from another. Did you really believe that they possess superhuman powers?
Similarly, you need to give a message to your users which conveys responsiveness. You need to make your website/mobile app feel alive. So that the moment user’s touch is recognized, the response turns into a clear visual indication that something is breathing. You need to convey that user’s request is being processed and that they should wait.
Just like Instagram performs tasks (like uploading) in the background. This way while a user is busy captioning, adding location, tagging friends, you are all suited up.
3. Informative copy-writing
We all know the power of words. The right words, said at the right time, create magic. They can bring the element of surprise, a short giggle, draw your attention, force you to anticipate or simply make you smile.
You know why we choose to stay with a particular set of people? Because we can smile & laugh with them. Similarly, people choose to come back to the same website/product if they are treated well. Functionality is one thing, making a human connection is another.
Use your copy-writing skills (or borrow them) to create that bonding with your user. You don’t have to shout for attention, just subtle messaging to help your cause. Greet them when they log in, help them during the over-boarding process, cheer them up if anything is taking too long, say sorry when you disappoint them or surprise them with a special something.
4. Include Microinteractions for small treats
It’s the little things in life that light up our day. So never get tired of showing your love in little things. The power of extracting happiness lies in small surprising actions. Microinteractions play a similar role in the digital world.
Microinteractions give users a feeling of accomplishment even after doing a small task. It’s like going to a birthday party and coming back with a ‘return’ gift.
Coming back to the point; Microinteractions are important because they appeal to the user. It’s like knowing the impact of your tiniest of action. It’s like you are in a dark forest, lost and torn. And your inner voice starts guiding you to the right path.
They also help in guiding through particular steps, like this-
Credits- Dylan May
Remember that less is more. So don’t overdo anything. Use subtle animations where it is necessary and where it suits user’s need. No fancy show-offs. Use them to help users navigate, or inform about the probable results of their actions. This is required because in mobile devices, you lack space and you want them to avoid minor slips and errors.
5. Take care of accessibility compliance
Accessibility is not something that you should keep as optional. It is a part of good UX design. Period.
While designing, accessibility concerns should be kept in mind, regardless of who your users are. For that, your UI should be rock-solid. If you keep a few things in mind, you don’t have to put extra efforts in making your website accessible to visually impaired or physically challenged.
a. Take utmost care for clarity of text. For users who are visually impaired, it becomes difficult to read if there is no clarity of letters and text blocks.
b. Reduce dependency on color. Excessive use of colors to communicate can be a setback for people who have color blindness. For example, use of red color to show error message will be of no use to people who can not see that color. So give them a message which tells what exactly happened.
c. For users who are visually impaired, it’s good to provide a caption for the images used. If a lot of your content is in the form of images, then your website must have “Alternative text” which explains your image. Assistive technology reads that “Alt text” which you have never cared to fill.
Apart from the usual usability testing, test your product with people who have some or other kind of disability. Or include older people who use any kind of assistive technologies. Technology is supposed to lend a helping hand to people with disabilities as well. This is your chance to contribute.
Keeping these things in mind while designing will help your users enjoy a little more while they are using your service — so much so that trying some other option is never an option for them.
Have you built something like that? We would love to hear you!