Trendwatching vs Trendmaking

Trendwatching has long been an important and integral part of the work of any self-respecting designer. We follow trends to forecast the demand for new products and services, create the right brand development strategies, find promising market niches, anticipate consumer desires and further build an effective channel of communication with them. Sometimes we observe fashion trends in order to go from the opposite.

Following trends or creating your own unique product without looking at anyone is a personal choice, sometimes quite a difficult choice.

However, there is one example where the conscious use of a trend definitely makes sense — if it is based on the fact that the trend will be very useful, not solely on its visual or stylistic component. For example, in everything related to usability or environmental friendliness.

One of such trends is shifting the user interface down. The so-called bottom navigation. There is the most well-known research on how users hold and operate mobile gadgets — by Steven Hoober and Josh Clark.

Smartphone use is defined by three basic handholds, and we often shift among them.

The essence of this is that in almost every case the most common were the three main grips. 49% held phones with one hand, 36% held a phone in one hand and tapped with the finger or thumb of the other, and the remaining 15% took the BlackBerry prayer position with both hands, tapping both thumbs, says Josh Clark. Stephen Huber found that 75% of users touch the screen with just one thumb. So that’s where the concept “thumb-driven design” comes from.

When telephones were small, most areas were easy to reach. As our screens got bigger, the top became nearly impossible to touch without setting up the phone. “Grow your fingers”, thought some phone makers.

Samsung’s 7″ Galaxy W and similar jumbo devices blur the line between phone and tablet. Photograph courtesy Samsung.

Mobile Web and bottom navigation

The bottom navigation appears on the web from time to time. The idea itself is quite simple: move the navigation controls further down and be happy. By positioning the navigation bar, for example, at the bottom, you make it easier for users to click on the menu icon, while secondary items can be moved up.

Basically, you just switch the order. Mobile apps use this logic with the tap bar pattern. This is not a new idea in itself, but it is still not as popular in web design as it is in app design.

It seems time to give examples of the some successful implementation of the shifting the user interface down approach and bottom navigation.

Examples

The flagships in the direction of shifting the core of the interface down definitely are Samsung with its One UI, where all interaction with the interface takes place in the lower 60% of the screen, and, of course, Apple in 13 iOS.

One UI design Guide

iOS and macOS each define design patterns and conventions for user interaction that are rooted in the different ways people use their devices.

For example, iOS conventions such as swipe to delete, action sheet commands, and controls at the bottom of the screen are optimised for touch interactions on a handheld device. Similarly, macOS conventions such as dedicated keys and keyboard shortcuts, menu commands, and controls at the top of the window are optimised for keyboard, mouse, and trackpad interactions and a separate display.

macstories.net

Among other examples in which shifting controls to the bottom undoubtedly wins over traditional top management is the comparison of Apple and Google products. Let’s compare Apple Maps and Google Maps applications. The first one uses the bottom navigation pattern, the second one looks more traditional. Which one seems to be more usable?

Apple Maps App and Google Maps mobile website

Let’s have a look at other similar products of Apple and Google: translation apps. We will see the same thing: in the Apple product, all the main elements are shifted to the bottom, which makes managing the application more user-friendly.

Apple Translate app and Google Translate mobile website

There are two other examples of giant brands that have been using bottom navigation for a while are Instagram and Tinder.

Instagram app interface

Tinder app interface

E-commerce

The e-commerce sector not only does not lag, but it also has every chance to become a kind of leader because it directly depends on income.

Representatives of e-commerce are forced to research more and change more often to make sites convenient and people could use and buy more and easier.

The most striking example is the site of the Uniqlo store. In the desktop version of the site, we see the traditional controls at the top of the page, while in the mobile version, all the basic elements are shifted to the bottom. Thanks to the bottom navigation, the user easily reads the site and does not cover the content (control buttons can sometimes be covered) with a finger and nothing prevents the user from receiving information.

That is, the driver, in this case, is the content and the desire of the company not only to make the control easy but also not to prevent the users from receiving content for which they actually visit the site.

Uniqlo desktop and mobile website

Uniqlo mobile website

While not all e-commerce sites have adapted in a similar way, some have started small, moving at least some individual key elements to the bottom. On the screenshots below you can see the desktop and mobile versions of the PRADA website. Some elements in the mobile version have been moved to the bottom.

PRADA desktop and mobile website

Another good example would be how large companies create trends by influencing younger projects. For example, Uber, by shifting the position of its search bar to the bottom, has caused similar changes in the interfaces of local taxi aggregators, such as Uklon, Bolt, and Free Now.

Uber old and new design

Uklon mobile app

Bolt mobile app

Free Now mobile app

The design community Dribble is also full of examples of work on interfaces focused on thumb-driven design with control elements moved down.

Quick-access UI screenshot Dribbble

Quick-access UI screenshot Dribbble

UI proposal screenshot from Dribbble

So

The facts are clear: phone screens are getting bigger, and some parts of the screen are easier to interact with than others. The hamburger menu at the top provides a very high cost of interaction, and we have a lot of amazing mobile app designs that use the bottom of the screen.

Maybe it’s time for the world of web design to start using these ideas on mobile websites as well?

P.S. Of course, this is not a 100% solution for any case, but it is a reason for reflection. This can definitely make the user experience a little better.