Published on <a href="http://ift.tt/2vjn4hh">| Prototyping: From UX to Front End &mdash; Medium</a> Mj 
Hi awesome people, This is my 2nd article on medium and this time I decided to write about some common mistakes which we all can remove from our Apps to increase the usability and increase positive user experience for users. I remember how easily UX mistakes were overlooked when I started my career as a designer a few years back. But these days we can’t just make any app live without doing some research on it.
Users are so smart and millions of apps are there on Play Store &amp; App Store to use. But they all are not a success, few of them are even deleted from our devices just within a minute, why is this happening? well I think there is no any perfect answer for this because everyone has their own interests &amp; likes, maybe they didn’t find the data they are looking for in that app, maybe they didn’t like the interface or they found some error, it could be also a big reason that they are not getting better instruction to use the app.
<blockquote>Mistakes occur when a user has developed a mental model of the interface that isn’t correct, and forms a goal that doesn’t suit the situation well. For example, many online children’s games start with a short video tutorial or with a video advertisement for another game; in our user testing with children, we noticed that, when the video looks too much like a real game, kids are tempted to interact with it, thinking that they can already start playing. In this situation, the users form and execute an inappropriate goal, largely because they interpret incorrectly what they see on the screen (namely, they think that the video is the real game). Good design should help prevent such mismatches between the user’s expectations and the interface. —<a href="http://ift.tt/2fGU0Lu"> Page Laubheimer</a></blockquote>
Anyways, enough of chatter, please find below few suggestions that I feel could help you and your mission to increase usability.
<h3>Suggestions(UX)</h3>
I carried out a basic user research. For the research purpose, I had a couple of skype calls with my colleagues in US &amp; Australia and asked about their experiences about the common mistakes in today’s apps. In addition, I also consulted my colleagues here in India. I installed few apps on their phones and observed them using it.
Below I am going to suggest few things about the app screens on which I feel you should change or add. let’s break the problem into smaller part and analyze each one of them.
<h4>1. Onboarding screens</h4>
Onboarding screens are designed to introduce users to how the application works and what main functions it has, to help them understand how to use it.
As a user experience practitioner, I have experience testing Onboarding screens with users and often get asked by clients what is the best way to implement a good Onboarding experience to introduce users to an app. Onboarding can be a challenge to get right, especially when trying to meet both business requirements and user needs. The business wants to show users the key features and unique aspects of an app but often in user testing, we observe users simply moving through Onboarding screens without paying attention to them.
<img alt="" src="http://ift.tt/2vjJaAa">HelloFresh Onboarding Screens
In the above image, app Onboarding is beautifully done but missed a few points, which I think should be there and will increase usability.
<ul>
<li>Do include a skip button: Sometimes no matter how engaging or interactive your Onboarding screens are, users still want to skip them to get started and learn the app by playing. Including a skip button gives your users the freedom to do this and is important for users who may have already encountered the Onboarding screens previously. It also helps when using the app with another device as I am already a user I want to skip all those Onboardings.</li>
<li>Always give the option to see Onboardings from settings: Sometimes users are in hurry and they don’t want to spend more time Onboardings, so what we can do is to keep the Onboarding in settings menu somewhere in case user want to see it again so the user can easily see the benefits again if he/she skipped it the first time.</li>
</ul>
Beautiful onboardings which i like.
<img alt="" src="http://ift.tt/2ulrIhI">Onboarding animations for HR Cloud’s app<img alt="" src="http://ift.tt/2vjrODA">Onboarding screens for the Guidebook
<h4>2. Consistency among the typography</h4>
Consistency and standards are acknowledged as an essential design principle and should be applied throughout the content and interactions within your product. There are several aspects of consistency that we can look at when improving our designs, this includes the language we use, the UI elements we choose, the way we lay out our site, the functions and features we include, as well as the visual components we decide on like color and font.
While consistency helps improve user experience by eliminating unnecessary learning and confusion for your users, it is important to keep in mind that you should use it when necessary but not let it constrict you from innovating on design ideas where it makes sense. Consistency always makes products easier to use, because visitors don’t have to learn new tricks as they move around.
below are few examples where I feel we could keep it consistent:
<img alt="" src="http://ift.tt/2ultaRa">Onboarding screens
In above image you can clearly see the difference, on the very first screen it is all capitalized, but on the very next screen, all the headings are title case.
<img alt="" src="http://ift.tt/2vjFGh2">
Now for the CTA again these are somewhere in all caps and somewhere title case in above image, There must be a solid reason behind this otherwise just keep it same everywhere.
<h4>3. Overlay below content to make it visible</h4>
I went to few people and asked them to log in/sign up in an app to showing them the main screen where the user can select the country and enter into the app. 3 out of 5 users asked me that why the content on this screen is not visible clearly, then I thought yeah I am right, actually, it was me first who thought about the visibility.
They also asked me why the flag of the country is not clickable where it says “select your country”? They were correct because there is a shadow of the flag and it feels like it is clickable. I just want to say that it is not a mistake it’s just the iterations which we can do to make a user more comfortable.
I made a screen of the same content on the right(in below image) which I feel is good to show the whole content.
<img alt="" src="http://ift.tt/2ulmySK">
The screen in the left side mobile, it’s hard to read the content whereas it is clear and easy to read in the right one. I just made a small change to put an overlay behind the content which is transparent and helping to read content.
<h4>4. Error states</h4>
A few days back I applied for the UI/UX position at HelloFresh and I was very excited When I decided to use the HelloFresh app on my mobile. The app is looking very beautiful and juicy. After I successfully understood the motive and concept of the app on Onboarding screens I decided to sign up and enjoy the app.
It was nice to see that now I have an account on HelloFresh. In between someone calls me and I just closed the app, after a few minutes I have back opened the app again, this time I clicked on login and filled all the details like email &amp; password and tap on login. I was shocked to see this message “Login Failed- couldn’t log you in, try again please”, I tried the second time and again it was showing me the same message, I thought my password is wrong and I tried it the last time with the right password according to me, it’s still showing me the same message.
<img alt="" src="http://ift.tt/2vjJJds">
I decided to ask one of my colleagues to check it and handed over my mobile to him, he suddenly told me that dude your password is right you are putting a wrong email (he told me this because he knew my email), a smile was on my face that how stupid I am. then I logged in again and this time I was right.
<blockquote>‘Errors’ happens. They happen in our apps and they happen in our life. Sometimes they happen because we made mistakes. Sometimes because a system failed. Whatever the cause, these errors — and how they are handled — can have a huge impact on the way user experiences your app. Often overlooked, a lazy error handling and ill-constructed error messages can fill users with frustration, and make them stop using your app. A well-crafted error handling, on the other hand, can turn a moment of failure into a moment of delight.</blockquote>
<h4>To solve the error message thing:</h4>
Make error message informative: One of the <a href="http://ift.tt/2hecJMV">10 Usability Heuristics</a> advises that it’s important to communicate errors to users gracefully and clearly. An effective error message provides following information:
<ul>
<li>Clearly communicate what is happening</li>
<li>Describe how a user can resolve it</li>
<li>Preserve as much user-entered input as possible</li>
<li>Keep interactions simple</li>
</ul>
Real-time inline validation immediately informs users about the correctness of provided data. If you are performing inline form validation, and the field with the error is clearly marked, the submit button may be disabled until the error is corrected. It allows users to correct the errors they make faster without having to wait until they press the submit button to see the errors. Please see the image below.
<img alt="" src="http://ift.tt/2vjn68T">
<h4>Conclusion Note:</h4>
It was a really interesting task and I thoroughly enjoyed working and researching about above topics. I have also taken a bit of liberty to add my suggestions. Hope I was able to add some value to usability. These are just few topics I will be back with more 🙂
For more works follow me on <a href="http://ift.tt/2ukWPtx">Dribbble</a> and connect with me on <a href="http://ift.tt/2vjAslv">LinkedIn</a>.
Cheers!!
<img src="http://ift.tt/2ul4uYU" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2vjI47C">How to increase App usability by removing few common mistakes?</a> was originally published in <a href="http://ift.tt/2cAqCpx">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to increase App usability by removing few common mistakes?

Top Stories