If you are a seasoned designer, you probably believe that being influenced by others is not stealing in UI design of mobile application development. It’s best practice research. It’s using design patterns. It’s following the guidelines. It’s making sure to use patterns that your users recognize with to create functional user interfaces.
Some might say that sticking to the guidelines and following others will kill imagination and, at the end of the day, all apps will look the very same. Adopting best practices may make you think that Google/ Facebook/ Instagram/ [your preferred app here] is always right, their design goals are the same as yours and you fail to question them. Here are a couple of patterns that are (or used to be) thought about best practices but may not be as good as you ‘d believe at first sight.
1. Hidden navigation
A minimum of half million posts have actually been written about the hamburger menu, mainly by designers, refuting it. If you missed all, checked out a couple of, but in a nutshell, it’s not about the icon itself however rather about hiding the navigation behind an icon.
This solution is very appealing and practical for a designer: you do not need to fret about the limited screen estate, simply squeeze your entire navigation into a scrollable overlay that is concealed by default.
Experiments reveal, nevertheless, that exposing menu options in a more visible method enhances engagement, user satisfaction and even profits. That’s why now all the big players are moving from hamburger menus to making the most appropriate navigation choices always noticeable. If your navigation is complex, hiding it does not make it mobile friendly. Prioritization does.
2. Icons, icons everywhere
Due to the restricted screen size, it also appears a no brainer to save space by changing text labels with icons wherever possible. Pictograms take less space, they do not have to be translated, and people recognize with these after all, right? And every other app does that.
With this presumption in mind, app designers often hide functionality behind icons that are really quite tough to recognize. Would you guess, for instance, that you can send out direct messages behind this icon in Instagram?
Or, presuming that you never utilized Google Translate previously, what capability would you anticipate to access by tapping the pictogram listed below?
It’s a common mistake to presume that your users are either familiar with abstract pictograms or they’re eager to invest additional time exploring and learning them. If you have designed an icon and you feel that a popover label is required making it useful, you’re doing it wrong. Even if you’re Foursquare and your users will learn it anyway.
This does not indicate that you need to not use icons at all. There are lots of icons that your users understand very well, mostly those representing common functionality like search, video play, email, settings and so on. (But the users can still be uncertain, for example, just what occurs when they tap on a heart icon.).
Complex and abstract features, however, must constantly be displayed with an appropriate text label. In such cases, icons are still helpful as they can enhance the discoverability of the menu products and they can also include a good touch and character to your app.
Basic functionality can be effectively represented by icons but for complex functions, text labels ought to be utilized. (And if you use icons, constantly have them usability tested.).
3. Gesture based navigation
When Apple presented the iPhone in 2007, multi-touch technology got traditional interest and users discovered that they might not just point and tap on the user interface however also zoom, pinch and swipe it. Gestures became popular among designers and there were numerous apps that were created around explore gesture controls.
Much like concealing the navigation and using icons instead of text labels, gestures appear often tempting for designers looking to save some screen estate. (“There must not be an erase button, individuals will just swipe left. Or right. We’ll think.”). The first thing to find out about gestures is that they are always hidden. People need to remember them. Similar to in case of the hamburger menu: if you hide an alternative, less individuals will use it.
In addition, gestures have the exact same issue as icons do: there are common ones that many users understand like tapping, zooming and scrolling, and there are those that have to be found and discovered for each app.
Regrettably, a lot of gestures are not standard and constant across apps yet– it’s still a pretty new location of touch interface design. Even an easy gesture like swiping over an email might work in a different way in various mail apps.
Or, think about that shaking your device may suggest both Undo (in iOS) and Send feedback (Google Maps), too.
Never ever forget that gestures are concealed controls and have to be memorized which needs lots of effort on your users’ end. If you’re Tinder, you might be able to teach the whole world what swiping right means– but just if it’s a vital active ingredient of your app’s concept.
4. Tutor overlays as onboarding
Onboarding, a just recently hot UX subject, refers to the first encounter in between the user and the app. In most cases, this just means revealing some overlay tutorials to the user to describe the user interface:.
Why is it a bad solution? Due to the fact that many users will skip your introduction; they just wish to start with the app. And even if they observe your tutorial, they typically forget everything as soon as they close the overlay. (Especially if the screen is packed with information.) And last but not least: adding coach marks to your user interface does not make it more user-friendly. Remember this:.
The onboarding flow can be developed in many other ways that might be more useful to your users. Slack, for example, utilizes the very first screen to produce some context. They simply introduce themselves, concentrating on benefits instead of screens and functions.
A more interactive method to engage very first time users is progressive onboarding. Duolingo does not describe how the app works: users are motivated to enter and do a quick test in the selected language (even without signing up) because people discover best by doing. Also, it’s a a lot more interesting method to reveal the value of the app.
Bear in mind how swipe gestures were various in Mailbox than in Apple Mail? This is how their progressive onboarding works: users get a walkthrough where they have to try each gestures before really starting to use the app:.
Before creating your coach marks on a semi-transparent overlay, stop and think of what the experience of the very first time users should be. Focus on the context. In the majority of the cases, there is a better method to welcome your users.
5. Creative however unintuitive empty states
An empty state is something that is quickly ignored by unskilled designers, however, they can be a vital factor when it comes to an app’s general user experience. In some cases designers take a look at mistake messages and empty states as blank canvases where there’s a good chance to do something imaginative.
Take this empty state screen from Google Photos:
At first sight, it seems excellent, ideal? Well made up layout following the guidelines, with a stunning graphics on it.
At a second look, however, there are some strange things here:.
- Why is there a popular search button if there’s no collections? Why would you want to search in nothing?
- The second most prominent element, the image is clearly not tappable (although lots of would try).
- The tip states I ought to be looking for the ‘+’ sign on the top which is very awkward. Why does the hint itself not include an Add button? It’s like stating “click the Continue button to keep”.
This empty state screen above just does not help users comprehend the context:.
- What are collections? Why are they beneficial?
- Why do not I have any?
- What can I do about it (if I should do anything at all)?
When it concerns creativity, less is in some cases more. The empty state listed below does an excellent task when it comes to being helpful. (Let’s neglect the “Now tap the button listed below” instruction for now.).
Always remember that empty states (similar to 404 pages online) are not only about visual aesthetics and brand character. They have a more important role in usability, too. Make them intuitive.
Question everything
Design patterns and best practices are still your friends. Remember though that apps and users are various: one solution may work for well in an app and fail in yours. It’s not a one-size-fits-all thing. Plus, you never ever understand why an app was created in a specific method.
Do your own thinking. Do your own design. Do your own research. Step, test, verify– and do not hesitate to unfollow the guidelines if that makes more sense.
