Connect with us

Hi, what are you looking for?


Unseen Obstacles Within Standard Mobile UI/UX Patterns

Getting inspired from other UI/UX designs is clearly not copying. In fact, it is the best practice, to learn from others, and then implement the same creatively in your own way. You are not reaping rewards of someone else’s hard work. It is all about ensuring that you are following the best contemporary practices using the standard guidelines.

Many might argue that innovation is compromised, by following standardized procedures. The reason being, all apps appear to be same, with a similar appeal from each one of them. My perception regarding standard UI/UX practices is completely different. For me, it is not about your app looking the same as most popular app hanging around such as Facebook, Whatsapp, Instagram, and more.

Why would you mind if your app has the same kind of appeal as other well-known apps? After all, this will help your app gain traction with ease and that too faster. The problem I foresee is standard UI/UX practices not looking as perfect as perceived. To understand this, let us look at some extremely popular UI/UX patterns

1. Hidden navigation isolates the actual underlying crux

There have been too many people writing in favor and against hamburger menu navigation. For those new to this, a hamburger style menu is a menu icon looking like a hamburger, which when clicked, opens up all the submenus. It is a boon to designers, who can conveniently save the app real estate, by squeezing all the things underneath scrollable overlay, hidden by default.

However, from a user’s standout, visibility is the key to engagement and satisfaction. If they will not see things, they will find themselves either completely lost, or would not bother to explore hidden things, considering it as a sheer waste of time. Having a complex navigation, do not necessarily mean you have to hide things, for making it mobile friendly. It is always best to prioritize your most relevant options by making them visible, while irrelevant ones hidden through hamburger menu.

2. Icons are not as engaging as they appear to be

A mobile app screen real estate is quite limited, and replacing functionalities with icons at every single place is a complete disaster in such a scenario. We agree that pictograms or icons do occupy lesser space, and are more familiar with the users. However, is it wise to hide features behind icons, leaving it everything to users to understand?

It is the most common mistake committed by developers, expecting users to comprehend everything as soon as they see the icons. Simple icons have same meaning all across the globe, are easy to identify, and recognizable as well, such as Settings, Email, Play, Video, Search, and more. However, what about those having a specific meaning in store?

The features, abstract and complex to understand, need to accompany an appropriate label. This will, in turn, enhance the discoverability factor, leading to a nice app personality touch. Using icons for basic functionality is apt. However, make use of text labels in case of complex ones.

3. Overlay tutors act as hurdles in the onboarding stage

Onboarding is the first encounter between a user and an app. In majority cases, there is an introduction manual explaining things to the user, in the form of a video presentation, slide presentation, images, sound, or text. Onboarding is often not a preferred stage, as most users want to get started with the app instantly. They feel going through the tutorial is a complete waste of time. Especially, overlay tutorials are a big NO. People will simply close them to get rid of the tutorials.

There are ways by which you can control the onboarding process of your app. Instead of focusing on the features, present upfront benefits, to let users get into the groove. Another way is progressive onboarding, wherein let your users test the app, before even they signup, so that they get the firsthand experience of the app. Finally, a quick walkthrough with screens making quick transitions, will not just educate users, but also keep them entertained without getting irritated.

4. Empty states are surely very discouraging

Empty states are those blank screens that have nothing to offer except for diverting users to right screens. You must have seen error message screens, like 404 for example, a type of empty state that does not offer even transition.

An empty state is often a neglected stage by most designers, who disregard empty state as a hurdle, which can turn fatal. In fact, empty states have a lot of potentials to be creative, in spite of their little purpose to solve.

If you look at the empty state within Google Photos, there are many points telling why empty states are disastrous. When looking at the Collections empty state within Google Photos, you will realize that

• There is a search bar, even though there are no collections.
• The image is not tappable, letting users take the pain of searching tappable elements throughout the screen.
• The hint present below the image tells users to search on the top for adding new collections ‘+’ button, instead of keeping ‘+’ button below the image itself.

So, what do we conclude from this particular empty state screen of Google Photos?

• Does not inform users what collections are, and their usefulness.
• Does not tell users why they do not have any collections as of now.
• Do not educate users how to create collections of their own.

Make empty states intuitive, since they have more to do, than just depicting brand personality, and showing visual aesthetics. They can play a defining role related to the usability factor of the app.

Question yourself before implementing UI/UX patterns in your app

Design patterns and practices are your best friends. However, not each one of them works great in every single app. It is not like a common solution for all the problems. Have your own thinking involved with own research and design? Do validate, test, and measure, before implementing standard practices. Ask yourself a hundred questions before going for integrating a nice UI/UX practice.

Written By

Daniel Carter works for Fusion Informatics – a Mobile Application Development Services Provider Company in Manchester, UK. He has deep rooted passion for Internet Marketing and loves reading technology news.

1 Comment

1 Comment

  1. Emily

    August 28, 2016 at 1:10 pm

    Hey Daniel,

    Great article! I think you really brought up some interesting UI/UX problems. I especially liked your point about the clarity of icons. I know I’ve sure come across some icons in apps that I wasn’t sure what their function was.

    As someone in the mobile industry, I think a great way for PMs to see how their app’s UI/UX is performing is with qualitative analytics. I think qualitative analytics are crucial because it gives you actual visual data to see how the app is performing and how users are interacting with the app. You can actually watch user session recordings to see if users understand the function of an icon. There are a variety of tools out there to help PMs including Appsee.

    Would love to hear your thoughts?


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like