Obscure Mobile Design Techniques That Boost UX

10 min read
UX, Mobile, Navigation, , LinkedIn

About The Author

Gert Svaiko is a professional copywriter and mainly works with digital marketing companies in the US and EU. More about Gert ↬

Email Newsletter

Weekly tips on front-end & UX.
Trusted by 176.000 folks.

Quick summary ↬ To inspire mobile designers, let’s look at how some clever design solutions tackle mobile navigation, confirmation dialogs, animations, and gamifying the waiting experience.

It’s no secret that smartphone usage has doubled over the last five years, accounting for an estimated 3.8 billion users this year. This tells us clearly where people’s attention is and how important mobile web designers are to improving the user experience.

We’ve seen plenty of web design experiments in recent years adopted by companies of all sizes. These changes include trends such as the infamous parallax scrolling, non-traditional layouts, and improved accessibility with dark mode. However, many paths are still left to explore, if we’re willing to break out of trends.

To get those creative juices flowing, let’s look at some hidden design gems related to navigation and confirmation dialogs, the waiting experience, and swiping animations. While these solutions are mostly unconventional, the point isn’t to highlight them for their own sake. Design solutions have to be built with the pillars of accessibility and usability, but they can be refined according to your ultimate goals for user interaction and experience.

So, let’s bring these elegant off-the-beaten-path design solutions into the spotlight.

The change of pinning the navigation menu to the bottom has been a game-changer for handheld devices because it allows for more natural thumb-controlled navigation. But as smartphone screens get more expansive, the thumb’s reach gets more restricted. Therefore, we’re long overdue for new mobile design solutions that allow easy access using only the thumb.

Some creative approaches to this problem combine elegant design and functionality. Let’s look at a couple of examples.

More after jump! Continue reading below ↓

Nature Encyclopedia

Nature Encyclopedia is a great learning resource for youth and adults alike. It features interactive infographics and on-point illustrations, but that’s not the part that captures our curiosity.

In addition to all of the swiping functionality that we’ve become accustomed to in other mobile apps, there’s a nifty feature that allows you to change the information displayed by scrolling a wheel. You can also access previously shown information simply by scrolling the other way.

While the action wheel was implemented to ease access to information, it could also be used to navigate between screens. This could potentially address the restriction of the thumb’s reach at the left and right edges of the screen, as you would now be able to effortlessly swipe left or right to navigate.

V For Wiki

You can already access Wikipedia in your phone’s browser. However, V for Wiki has made it even more accessible by featuring an elegant style of presenting the content. It features a nifty world map that instantly pops up information related to the area you’re browsing from.

While the interactive map makes browsing a lot more entertaining, it’s not the feature that first caught our eye.

If you look at the navigation, on top of the guide you’ll see interactive lines to various landmarks, and you can scroll between the locations horizontally. This is a beautifully designed alternate way to navigate the menu because you can use your thumb effortlessly.

This approach could serve as inspiration for a scrolling navigation menu, in which a customer can bring the far-left or far-right menu items closer by scrolling the wheel.

Ada

Ada is an application for the startup Ada Health, which aims to revolutionize how we approach going to the doctor with modern solutions, such as AI, video calls, and interactive design. We’ve all gone through the rabbit hole of looking on Google for advice on symptoms, so getting straightforward access to reliable information is a godsend.

Ada’s thumb-friendly navigation (Source: Daniel Diggle) (Large preview)

Apart from the app’s clean look, it’s clear from the start that it’s designed to be used effortlessly with the thumb, because the navigation button is on the bottom right and opens the menu in a sidebar on the right. Furthermore, all of the actionable elements are within reach of the thumb, so the user would generally only need to click on the bottom or the right sidebar to get to where they want to go.

Ada, then, is another example of solid navigation built into the app’s concept from the start. The experience of navigating the app feels natural and accessible.

Overhauling Confirmation Dialogs

Confirmation dialogs face the same challenges as navigation menus as a result of people holding their smartphones with one hand. The options are usually binary, one on the left side and the other on the right. As handheld devices get wider, access to one of the two dialog choices becomes complicated due to the limited range of thumb movement.

Let’s look at some unconventional solutions to hard-to-reach confirmation dialogs.

Vice Versa

Vice versa is a diagonal UI pattern for binary options. It takes into account the thumb’s natural movement and acknowledges the limitations of abnormal movement. On a small screen, you could reach to the opposite side with your thumb, but that creates tension and feels uncomfortable.

The vice versa pattern addresses this problem by diagonally dividing the screen in two, allowing binary options to be made using only the thumb. Not only does it make it easier for the thumb to reach both options, but the accuracy issue is solved by giving users a larger area to touch.

While the concept is intended to make voting mechanisms easily accessible, you could adapt this interactive design to all kinds of binary options.

One of the obvious downsides of the pattern is that it’s heavily optimized for right-handed usage. The solution to this problem is that a customer can shake the phone, and the orientation will change. Good solution? We don’t know, but definitely an interesting alternative for confirmation dialogs.

Omni Swipe

Another solution for hard-to-reach confirmation buttons (or navigation, for that matter) is found in Omni Swipe. While this concept is meant for personalizing a smartphone’s UI, it could also be adapted to standalone applications.

Wolt’s gamified waiting experience (Source: )">

Bolt Food animated waiting experience (Source: )

Their approach to showing progress is to animate the delivery steps. While not a straightforward game, it still combines a sense of movement with the user’s perception of time. In short, the principle is that if something is moving, then it’s making progress. If the user were to stare at a lifeless screen, their sense of time would slow down, and, with an empty stomach, that would make them more anxious.

So, if your service relies on multiple steps, instead of taking the order and sending a )">

Bookotel swiping animation concept (Source: )">

Teatr Lalka mobile animation design (Source: Teatr Lalka)

The first animations you see when visiting Teatr Lalka’s website are the puppets. While representing the actual puppets used in the shows, they also serve another purpose: gamification. You can swipe through animated puppets in a carousels and interact with them by clicking on them, prompting sound and vibrations from your smartphone. The puppets also react to tilting. It’s a wonderful example of how a mobile website can engage with the user from the very first page.

You can apply the same techniques to other applications and websites, enhancing the user experience and playfully engaging with visitors.

Unconventional Solutions Pave The Way For Future Mobile Design

There you have some clever solutions to seemingly simple problems; solutions that hopefully improve the user experience in turn. While following trends isn’t necessarily bad, veering to the edge of innovation can yield a more rewarding result.

With user experience becoming an ever more critical part of our digital lives, it pays to see things from a psychological perspective. Don’t be afraid to test cutting-edge solutions that play into people’s habits, psychology, and sense of convenience. It might be worth it.

Further Resources

Interaction Design Foundation
Dribbble (for inspiration)
“App & Mobile”, Think With Google

(vf, yk, il, al)

Explore more on