There will be that one day in a life of an UX-professional, where he or she will sit in an meeting, the current version of the app is shown, and there it is… this one thing, that makes him/her speechless. Lets say we are looking at an tutorial. The tutorial here is a good idea, because it’s a complex app with new mechanics, so we like to take the user by the hand for his first steps. Tutorials for themselves are an art, so I will talk about the perfect tutorial another time. But for the moment, lets just assume, overall it is done ok. So, at a point in the tutorial we like to draw the attention to a certain button. And maybe the instructions weren’t clear, maybe the designer was sick, maybe it was the day the office ran out of coffee… for whatever reason the button in question is made visible by a bright-red square-shaped outline around it… Like you would do in a quick powerpoint slide…
So, at first I was like…
You don’t believe me? Here take a look:
Yes, this is from an actual screenshot of the app.
Seriously… For a moment I thought it was a joke. But then came what I feared:
Why should we make it pretty? The user only see’s it once and our internal test showed it works, the attention is where it should be!
You think I’m overreacting? Nope, not at all! The user may not close the app immediatelly (except… well, I would…) but the tutorial is such an important and crucial moment in the users journey. Everything that’s not perfect will add up to a not so great UX!
Ok, for this we should take a few steps back. Just to make sure we are on the same page here…
The difference between usability and UX
“Usability” and “UX”/”User Experience” are words which are thrown around everywhere. So, what are they exactly?
Wikipedia says “Usability is the degree to which a software can be used by specified consumers to achieve quantified objectives with effectiveness, efficiency, and satisfaction in a quantified context of use.” (ugh, I know… we will talk about it in a sec) and “User experience (UX) refers to a person’s emotions and attitudes about using a particular product, system or service.” (For full definition, hit the links.)
That means: If you look at a product (software, app, website, anything, even the not-digital stuff) you can divide the interaction with a user in 3 parts.
- Pre-phase: The user learns about the product, e.g. he sees a commercial, sees the entry in Google results or someone tells him about it. He has certain expectations because of the commercial/entry/story.
- Actual use: The user actually uses the product.
- Post phase: After using, the user leaves with impressions of the product. Those can lead to further actions, like telling someone else about it (in a good or bad way).
If you take all three you will cover the overall user experience. That means UX is the whole process, all the emotions and impressions the user has with this product. Before, during and after. Usability on the other hand only happens in phase 2, the actual use. Usability describes how good a user can fulfill his task within the product, that means we have a specified user (not “anyone”, lets say we have an online-banking user ) in a specific situation (he sits at his desk at home with a laptop) fulfilling a specified task (he wants to pay his bill).
Usability can achieve three stages (This is a very simple version of this definition, so please forgive me for not going into detail):
- Effectiveness: The user can fulfill the task somehow (its a yes or no).
- Efficiency: The user can fulfill the task in a good or fast way.
- Satisfaction: The user can fulfill the task and it makes even fun to do it.
The moment your usability achieves stage 3 it has direct positive impact on the UX: The user remembers how well it worked and maybe will even leave a good review! On the contrary a usability fail as soon as in stage 1 will have negative impact: The user could not do, what he came to do, he will drop out of the website or stop using the app and even tell his friends how bad it was!
Ok, and now what has “pretty” to do with that?
Lets go back to the initial tutorial problem. I will divide this in smaller parts.
The tutorial is a crucial moment.
The tutorial takes place in a moment, where the probability to lose the user is still pretty high. Yes, the first step of actually getting him into downloading/starting to use the product is achieved. So far, so good. But I’m sure you can take your own experiences into credit here: How often did you leave an app when the first 2 minutes where shit? The tutorial part is so very important. It can give the user the feeling that the app has just waited for him, that it was specially made for his and only his task. And it can give him the first impression how great it is to use this app, how easy and fun… To waste this important opportunity is not acceptable. In a world where thousands of apps are thrown on the market every day, you can’t just count on the few users that are loyal to your brand and will endure usability problems a bit more. There is a huge amount of users, that’ll just go to the next app available.
But the user sees it only once!
That may be true. But how many users we will lose, because of a tutorial that does not have a certain quality? How many will not continue to use it, because they feel like the developers didn’t take this whole thing serious (“Are you kidding me? If the tutorial looks like a 3 year old made it, what will the rest look like… Nope, I’m out.”)
But it works, the users attention is where it should be!
Yes, ok. And why do you wear this nice shirt with a Darth Vader print? A potato bag with two holes for the arms would work too! Because you like it, because you feel good in it! The same with every single piece of design/UI. Especially at the beginning, when the user hasn’t seen much of the app yet, everything has to be good quality, because it will set the expectations for the rest of the app. So, you should not only aim for stage 1 of the usability-ladder, there’s nothing less than stage 3 for you!