4 user onboarding tips for your mobile app

Face it! Your great app without any user onboarding sucks as much as an aeroplane with a ladder to onboard travellers. It doesn’t matter if you are travelling in first class or economy, you are going to be pissed climbing that ladder to reach your seat.

Majority of mobile apps have no onboarding process in place. In fact, most of the app owners have no prior understanding of why they should have an onboarding process. Even if they know about it, they don’t do it right.

Onboarding is a process that just doesn’t end when users signup to your app. It continues long after that. If you don’t have a product manager or an experienced designer to look after onboarding, here’s couple of things you should’ve in your app for the best onboarding experience.

Optimize Sign up/Sign in forms

Designing mobile forms is a field where very little has been known about what works and what doesn’t. A few companies like Instagram nails the signup pretty nicely.They validate each field as you enter information, and they do it in a way that feels intuitive. [Update] They have updated their signup process, but here’s what the old one looked like:
Sign up form design user onboarding
Image source: Sitepoint

If you wish to learn more about how you can optimize your forms for better user experience, consider following Luke Wroblewski. He’s one of the few people who are real experts on form designs.

A walkthrough of your app

It is nice to tell users how to use your app. These small things often make the big difference. I would recommend doing that after every update(Whenever applicable).

Make sure they are engaged

I love Pinterest and Twitter for their onboarding process. They both will make sure that your users are engaged even before you are done taking entire information. To engage a user in a social app, it is good to show them the important features, what’s happening, who’s here, etc. It all helps generating a spark which keeps your user interested in the application.

When you sign up on Twitter or Pinterest, they ask you to follow certain people or boards. Following them instantly makes you realize benefits of that app and also makes you feel involved. I remember when I signed up on Twitter, the first guy that grabbed my attention was DrYumYumSingh. The handle was so funny that it made an instant connection with my own internal mental model.

Don’t let your user go!

I am not pro spam, but one should learn how to retain your users. A friend of mine owns a SaaS based company, and I did once sign up for his service. I have not used his software for more than a year now and even while they are just a startup, they never once bothered to send up an email to check why I never used it again.

I will mention Twitter here once again – When you go missing for sometime, they will show you the value either in form of an email delivered to your inbox or a push notification that tells you about your network updates.

These are just some of the few things you can do to have a good onboarding experience. Design is contextual, and you need to understand what works and what doesn’t work for your situation.

When intentional bad and ugly design works

If you look around you will be shocked by intentional bad and ugly designs that you buy subconsciously. Well, saying them “bad design” won’t be justice. A design that does what it intends to is actually a good design. Often as designers and product owners, we let the fact slide under the table and look for what design language makes our products and services look elegant and classy.

Restaurants and intentional bad design

Local restaurants are a good example of implementation of proper and well optimised design choices. An $18 burger if presented with a badly designed logo and signage makes a visitor believe that the restaurant charges less.

Clearly, if you use Bodoni Script Pro for designing for the previous case, the visitor might be tricked into thinking “Woah! Now this is a fancy restaurant for having a burger. I shouldn’t be spending $18 on a burger!”

Don’t belive me, just take a look at the font, don’t you think using this would definitely make you think the same?

Bodoni Script Pro
Image source

An affordable Chinese restaurant’s design signage
Design langauge of restaurant

Image source

Meanwhile here’s a high end Chinese restaurant, you can clearly spot the design difference.


Image source

Why this difference? Well, visitors pre assume that an elegant design brings extra added costs that they are paying in form of expensive food.

Another most common space where optimized designs are carefully placed is the retail sector. Ever went to shopping for the cheapest products? Remember that how easy it was to figure out cheapest products from an array of expensive-cheap mixed shelves?

King of optimized user experiences – Retail!!!

Retail sector is competitive, especially for most of the products in it. Being already saturated, the only unique selling proposition (USP) is price. But how do you communicate that? The customer takes a few glances that lasts couple of seconds and almost makes a decision. The idea is to communicate your price within this first moment of Truth.

A glanceable and well designed “Ugly” label exactly does that for your product. Often the most cheapest product could be found with a plain color-less packaging with a minimalistic design, that says “Buy me, I am affordable!”. Another thing to consider here is that the “Ugly design” strategy doesn’t actually means that the packaging should look hideous, a good looking design at times may look cheap at the same time.

Designers working at large firms often find their Creative Director coming over and telling them to turn the design into something ugly looking. Most of the time, it has to do with overall sales resulting from the design. Young designers often find it very difficult to make a less elegant looking design. Though the designs are effective, it often do not give the sense of pride a designer gets after finishing work.

The packaging of this Vermicelli communicates honestly that it is a budget priced item.
retail package design

Image source

DESIGN FOR CONTEXT, MAKE WHAT IS MOST APPROPRIATE

It is true that such designs don’t get any recognition for the effort designers put in it, but they do what they are intended to do. Cheesy and cheerful designs presented in the right way are effective and successful in attracting the right demographic.

A designer’s focus shouldn’t be on creating the most aesthetically pleasing design. A designer should rather focus to make the design do what they are intended to, it is here where I find a huge difference between a stylist and a designer. No frills and no BS!

Designing for small businesses

While designing for a business that is too small(1-2 person[s]) or casual, looking too professional might make people think that the service/product is expensive. Well, when was the last time when you got a card from a Plumber or Mechanic that looked like a card from consulting firm? More important, will you even bother to give them a call?

Designing for charity?

When people donate to charity they expect the money to be spent for the cause, and often they don’t like the idea of money being spent on anywhere else. Some charities spend more money on materials just to make it look cheap. For charities making things look cheap is a pretty effective way of raising money.

Ever felt compelled to help someone? There’s an entire project dedicated to help making the homeless people more visible in the eyes of general public by Christopher Hope. Christopher makes beautifully crafted designs that are eye catching. His idea behind the whole design is to make people more compassionate towards the homeless. According to him, a lot of homeless people do not have a sign intended to beg, they instead want to reach out and share their thoughts with the general public.

The project seems to have been on a halt for a while as there no updates on the website from a year. We can only assume that homeless people with beautifully crafted designs appeared to be less trustworthy of receiving help.

Looking around internet you will find more and more information about “ugly designs” that converts more. I stumbled across one such article here about ugly websites that convert better by Dale Cudmore.
He says:

While you may not be able to brag about your fancy website, I’ll take the ugly site that makes money over the less profitable beautiful website any day.

Have something to share? Drop me a comment!

Hacking ux design of forms – Part 1

Welcome to my series on hacking UX Design of Forms, and this is part 1 of many to come. Thanks to companies like Ebay and Amazon who’s contribution to user experience of forms is so fascinating that you can literally learn a ton just by looking at their interface. How both of them are unique could be another huge blog post. For now, let’s start our journey towards hacking form design by optimizing some of the most of common elements of your form.

If you Google, you will see plenty of negligence, especially in this era of startups, we observe a ton of forms that are anti-usable. Most of them won’t tell you intuitively what to do with an element, you have to put stress at some level to understand what and how exactly they are going to function. These forms are not intuitive.

Checkbox, Radio buttons and Dropdowns

With this post I will be focusing on Checkbox, Radio buttons and Dropdowns. What I love about them is the fact that there’s always strong user assumptions associated with these forms. One has to respect those association to provide ease of use to your users.

First of all, look at your form, do you think options are correlated? If the products are mutually exclusive, then there’s no point in using a checkbox for this use case. Whenever there’s a conflicting choice one should go for Radio buttons, as they emphasize mutual exclusion. In simple words, when Radio buttons are used with Option A and Option B, the forms says “Choose A or Choose B, you cannot choose both”.  Using checkbox here might confuse a user for a very small time, tempting to think twice before filling the form. That’s poor user experience.

Dropdowns doesn’t fits here as well, because you don’t want user to go through extra efforts just to select one of the two options, right? Also, dropdowns badly rely on how familiar the user is with your system, and building muscle memory for something like this doesn’t helps anyone.

Using a radio button means ‘if this then that’, the strong correlation doesn’t just affects form filling, it also impacts your service. Consider yourself buying a Wacom Intuos and a creative stylus with it. Selecting both options using radio button will get user thinking that both of them are going to be delivered together in a single package (correlation!). While using checkbox you might think that well those two packages are going to be delivered in separate boxes.
Checkbox vs radio buttons
You can for yourself feel the difference in expectations when you look at above image. It is okay if you can’t see any difference right now, design is the art of looking, you will get there shortly.

If possible try to provide some visual feedback in a form of summary that informs choices a user is making.

To make your form more usable, consider adding a button to the background of your radio button or checkbox. The button will look pressed when user selects an option. To further add make the form more usable you can extend the clickable area and make it the same as the button. This will make it more easier for the user to select the options. Whenever user hovers an option, the entire clickable area changes its color telling the user that one can click here for an easy selection.

Here’s how the radio button and checkboxes would look like with a button added as an affordance. As you can see, the button changes its color to provide visual feedback, telling the user more accurately on the choices that he/she made.
Radio button best ux designCheckbox form best design ux

I will roll out other parts soon, meanwhile if you found this interesting, please share. In case, if you have anything to say, drop me a comment. I would love to hear from your side, specially about what you would like to see next in series.

A $50 DIY IOT solution for pet care

IOT for petcare

It all started when I got a new pet (Wall-E), a labrador puppy. When pups are small, they can’t be left alone and need a lot of your attention. If you prefer to spend your night working like me, you don’t get enough time to give proper attention to your loved pet. Small puppies doesn’t move much, they spend most of the time eating, pooping and sleeping. So, the pup only needs attention when he’s awake, Awesome! That got me thinking about designing a system that can alerts me whenever he moves.

Read more

Sentimental analysis via machine learning – Bag of words meets bag of popcorn

Sentimental analysis kaggle tutorial

This is nothing so sophisticated tutorial on predicting sentiments using R. The following is part of a Kaggle competition that I took part in. I must tell you in advance that this tutorial is basically ‘101’ of predicting sentiments using bag of words. A more advance way to predict sentiments would be using word2vec by Google. This tutorial will get you started on predicting sentiments.

Read more

twitter data visualization using maps and ggplot2

Although the data might appear to be biased and shows that the Asian countries are more sympathetic towards Nepal, but this does not takes into fact that out of 10,000 tweets mined, only ~300 had latitude and longitude values( only 205 had non zero values). And there’s a pretty good possibility that most of the tweets from western countries have no geographical information, because of privacy.

Information on the twitter data visualization and mining

Twitter data mining and visualization using Maps API and ggplot 2.
Keyword used to mine data: “earth quake”.
Total tweets mined = 10,000
Filtered data frame resulted into 205 observations of importance.

Tweets were mined at 2:30 AM, IST.

Click to enlarge the image

twitter data visualization of tweets

Gmail chat search experience

It is admirable how Google changed the inline text from “Search, add or invite” to better “Search people”. The reason why it is so amazing is the fact that they now understand that nobody is a “nametag”, and everyone is a person. That was one of my reason for admiring them, but for a commoner it provides added affordance. It easily reduces the cognitive load which might come as a result of the language used in the inline text. Indeed a good example of user experience of forms.

Old inline text below

Old-Gmail-chat-experience

Old Gmail chat experience

New inline text

New gmail search form

New gmail search form

You get what you pay for – Xiaomi’s user experience

Don’t take this personally, but if you are one of the many millions who own a Xiaomi I bet you would want to take a headshot at me. I am not anti Xiaomi just because they do most of work that looks like a bad ripoff of iOS. It is because that they don’t pay attention to what they are making.

Sure, I get your point that making something so cheap will forbid them to give an actual premium OS like feel. But doing a little homework doesn’t hurts anyone, right?

Look at this screenshot, taken from a Xiaomi Phone and Samsung S3. You can clearly see how they even failed to check the truncated text in the menu. That’s well taken care of in the old Samsung S

xiaomi-user-experience

1 2 3