COVID-19 UPDATE - All our teams are safely working from home. Get 24/7 Support. Contact Us.

Pearls and Potatoes of Mobile UX

mobile app design guidelines

Mastering Mobile UX Design is an ongoing thing.

You can never be done with it. What works today, won’t work tomorrow. So the best approach is to keep moving ahead by setting up a new gold standard in mobile UX design, through continuous A/B tests and iterations, time and time again.

One good rule of thumb is to tailor your UX to mirror the best in your field. Gasp!  But then, yes, this is a cool recipe to design a successful mobile UX,  ASAP.

Okay. You could even check out these 8 trending mobile UX design approaches to increase your app engagement rate.

#1. Look for the pearl

One pearl, they say, is better than the whole necklace of potatoes. So nail down the pearl (read key feature) in your app and make it accessible on nearly every screen because it is likely to be the most used feature of your app. It could be making payments, checking flight timings, checking messages, and so forth; help users complete this one key task by removing all adulterants (potatoes) that might weaken the user experience.

Unlike websites, mobile real estate is quite small and it’s not easy for designers to work within such limited space and give equal importance to all the features.

Here are some steps to help your pearl feature shine, and also ensuring seamless user flow:  

  • Highlight the main function. Hide all the secondary functions.
  • Don’t make the user work hard. Replace text with visuals. Also set up a smart default system that helps users retrieve data rather than making them enter info, over and over again.
  • Help users save data on the fly. This would allow users to pick up where they left off.
  • Don’t interrupt new users by asking them to rate your app. Get them invested in your app first. You could bombard them with sign-up and feedback forms later on.
  • Avoid login jams. Forcing users to register as soon as they launch your app will surely put them off.

Login issues are common during store checkouts.  As in many eCommerce websites and apps have made logins mandatory during the checkout process. And, mind you, eCommerce companies are doing this in the best interests of the users. But then, it doesn’t bode well with users, specifically the first-time users.

To put things in perspective, eCommerce companies believe that by making log-ins mandatory, they, in a way, would be freeing up users time. As in they don’t have to fill in the required fields such as shipping address and credit card details, once again, and they could directly check out, once logged-in. But then, no matter what the eCommerce companies think, users are unhappy about the mandatory login to check out.

Amazon offers poor UX experience

Image source

Amazon checkout offers poor UX experience; Log-ins are a must  in an Amazon app 

Even Amazon has this problem — the giant eCommerce site doesn’t provide a guest checkout option.

Simple Tip: Logins are primarily used for data gathering. If that is the case you could do that when the user has done with their purchases by requesting the password details in exchange of gift coupon code and things like that.

Walmart offers best checkout option

Walmart offers best checkout option; there’s no compulsion to log-in

#2. Walkthroughs & Coach Marks

Sometimes you need to add different types of tools and content to make complex things sound simpler to the user.  A tutorial or walkthroughs can help you in this cause.

You can even use Coach Marks to highlight the key points of a user interface, just like Secret and Youtube does. On the other hand, Duolingo has a slideshow that helps users walk through the typical user experience.

Coach Marks to highlight the key points of a user interface

#3. Popovers

If you think popovers are a big nuisance, think again. Sometimes popovers, in the middle of the application usage, help users interact with the app better. How?

Let me explain:

Users tend to get confused while using an application. So a popover in the form of an explanation comes handy. More to the point popovers are an integral part of progressive onboarding as well as it helps simplify complex workflow within the app, once the feature has been used or initiated.

Birdhouse app

Image source

In the Birdhouse app, the history button pops up with a message only after the user has created the first draft

The popover design pattern addresses several design issues such as:

  • To address relevant information/control regarding a particular action/place in the UI
  • The original content or the background of the app is still there. However, the popover helps you tweak certain things or gives you an insight into what’s coming.
  • And in case, the popover seems to be a real nuisance, you could, as you know, close it by simply tapping or swiping the screen.

#4. Simple Navigation

Circular forms are in and you can use it to incorporate all necessary content components such as words, images, icons, and more.

Nope, there’s nothing wrong with traditional navigation UI patterns such as sidebars, pulldowns, or for that matter the hamburger menu. It’s just that they are being overused so much so that users don’t or won’t identify them as a navigational tool anymore.

The point is, you need to be a tad more creative with regards to how users use your site, blending old and new patterns, without compromising on coherence and usability aspects.

Simple Navigation

#5. Color Schemes: The Psychological Influence

Colors are one of the key metrics in terms of conversions. According to an infographic by Kissmetrics, people just take 90 seconds to make a subconscious judgment about a product, and up to 90% of that assessment is based on color alone.

color conversions mobile UX design

According to a study conducted by the University of Toronto, on how people use Adobe Color CC, people prefer simple color combinations with a focus on two or three colors.

You could also try predefined color schemes that could help you come up with new mental representations for UX design, specifically for beginners.

These predefined color schemes include:

#1 Monochromatic

#2 Analogous

#3 Complimentary

#4 Customer color scheme

You can read more about all these color schemes here.

Further, make sure you use red and green color when you are setting up call-to-action buttons on your app – reminds me of China’s fascination with red color! The color stands for happiness in China. So if you are making a Chinese app, splash red all over the app.

#6. Focus on Key Functionality – 80/20 Rule

parento principle focus on key functionality in the app

Here’s the thing: 80% of the app users tend to use only 20% of its functionality. Now the question is, which key 20% of the app functionality you should focus on to make mobile UX experience satisfactory?

The answer lies in your desktop. If you are running an online website, use mobile analytics to nail down the mobile users of your website, and see which functionality they are using the most. Once you have nailed down the key functionality on your website, focus on enhancing the same on your app as well by making the functionality more easy and intuitive to operate.

#7. Content as an Interface

Your app content is the thing that drives users to your app. And it can be in any form, be it news update, social feed, to-do list, and things like that. The point I am driving home is, content should be central to your app, which means you are supposed to do away all the side elements that could make your app interface look cluttered. This is important because users have got reduced attention span these days and so if you could introduce the users to the content part immediately, the better.  In short, make content the interface.

For instance, Google Maps has got its map as the interface. Unnecessary panels and buttons that might stray user attention have been deleted. 

card-style designs

Even card-style designs are picking up in terms of UI.   

#8. Single-handed Operation

As per Steven Hoober’s research, almost 85% of the users operate their phones with one hand. And with an increase in screen sizes of smartphones, especially with the launch of iPhone 6 and 6 Plus, iPhone 7 and 7 Plus, accessing the screen has become all the more difficult these days.

So, it has become really important for developers these days to design apps that could easily be accessed on larger screens with one hand.

Key facts to keep in mind while designing your app for larger screens:

i] Green Zone for Crucial Actions

Control keys and common action items should be positioned in the green zone of the screen.  Why? Because these items could easily be accessed with your thumb.

Key facts to keep in mind while designing your app

ii] Red Zone for Destructive Actions

For destructive actions such as delete and erase, relegate them to the red zone. Red Zones are not that easy to reach. And it’s best to leave these buttons there or else there are cent percent chances of users accidentally tapping on them.

 Wrapping Up:

A work-in-progress stage is a staple to mobile UX design. It’s an ever-evolving process. The design has to be A/B tested time and time again to make sure customers are happy with your app. With churn rates climbing for apps, it’s more important than ever to keep changing your UX patterns to keep it competitive and in tune with the user requirements.

What sort of Mobile UX design you have been focusing on your apps this year? We’d love to hear them in the comment box.

openxcell = mobile app designing

Jini Maxin

Well folks, Appy Times are here. Though I am no appoholic, I am in an industry that breathe apps. So, despite myself, I keep waking up to smokin’ hot cuppa of app stories every day. So, do you like what I prattle here? Duh! Of course, you do. So just go ahead and scribble a line or 2 here in the comment box below, or share them on social media. Why? Because it will load me with just enough confidence to prattle a li'l (lot) more :)