One finger interface. ONE TOUCH concept

Remarque

In the tg channel, together with you I will create the best time management application.

This concept is fully integrated into my application. beresta.app . In this article I will explain how this philosophy works.

There is a problem

How to press back with one hand (the gif does not allow you to make it to normal quality)

Have you ever encountered a problem where your hands are short while using your phone? For example, one hand is occupied with bags or stained with chips, and you can’t reach the “back” button. Or you need to enlarge the video using pinch to zoom, but you just don’t have enough hands. If this sounds familiar to you, I invite you to look into this problem with me. How to solve it, in what cases it should be solved at all. Let's look at specific examples.

When the interface needs to be written with one finger

We use our phones every day and very often this happens when we are going somewhere. For example, we scroll through the tg channel or the news while we walk down the street, write down notes or write a message to someone. It is for such everyday applications (and this is the vast majority) that such an interface should be written.

It is understandable if your application is a professional tool, for example for drawing or measuring distances. There is no need to use this concept at all. Since it is convenient to draw with two or three fingers. A professional tool means that you are prepared and fully immersed in the work process, your hands are completely free.

What are the current solutions?

one-handed mod in google pixel (the gif doesn’t allow you to make it to normal quality)

For example, the one-handed mod (in the GIF above). You swipe the bottom bar down and thus the entire screen moves down halfway. Now you can reach the top buttons with one hand.

one-handed mod on gboard (the gif does not allow you to make it to normal quality)

The keyboard also has a one-handed mod (example above) that allows you to reach all the buttons on the keyboard, making it smaller.

UX/UI design

It would seem that if smartphone developers have already come up with a one-handed mod, why should we, app developers, think about it? The answer to this is very simple. These solutions are very bad. This is probably the first time you’ve heard about this one-handed mod built into your phone because they are very inconvenient and no one uses it. In fact, I tried to somehow use the one-hand mod, but it turned out to be much faster to release the second hand or twist somehow than to pull down, then back up with one hand. Moreover, the one-hand mod always implies that the finger will be at the bottom of the smartphone, which is mostly true, but not always.

The essence of the ONE TOUCH concept

The concept can be summed up in one sentence:

Any action in the application can be performed with one finger, in any screen position

This does not eliminate the use of multi-touch at all. That is, for example, you can also zoom pictures with two fingers, but this optional function. If you have two-finger zoom, then you should also be able to zoom with one finger (even if less convenient, for example, by double-clicking).

Implementation

Over the long months of developing an application using this concept, I discovered many different solutions and here I want to share with you.

1. “long scroll”

Comparison of regular and long scrolls (the gif does not allow for quality standards)

In the example above, you may have noticed the difference between a “long” scroll and a regular one. It seems to prolong the scroll.

In a normal scroll, when the bottom border of the content reaches the bottom border of the screen, the scroll stops. Same thing with the upper limit. Thus, if the finger is on the bottom, we cannot reach the top element and vice versa, if the finger is on top. Therefore, my proposal is very simple: the scroll should stop when content top border will reach bottom border of the screen and vice versa. But it looks simple, in fact I spent a lot of time. To do this, I had to rewrite and modify a lot so that I could simply scroll below.

2. menu

If we set ourselves the condition: to perform any action with one finger from any position on the screen, then let's think about what we can do at all.

swipe left, right, up, down
tap
double, triple tap, etc.

Based on such a small arsenal of actions, we will think in advance how to build applications.

Ideally, all clickable interface elements should be able to be pulled with your finger.

Swiping up/down will be used to scroll content. If your page does not scroll, then you can come up with some additional purposes for these actions.

Swipe to the right should always be left under the “back” button if this is an additional window that closes. If this is the main screen, you can also swipe left and come up with your own actions.

The menu, since it will exist almost everywhere, on all pages (it is always necessary to conveniently add additional buttons later if there is any modification). We have one choice left – swipe left. That is why this arrangement was chosen.

The menu also expands to full screen and supports “long scrolling” so that each button can be pulled with one finger. Also, the buttons themselves are located across the entire width of the screen so that you can press with your finger from any position.

implementation of a menu for the one touch concept (the gif does not allow for quality standards)

In the GIF above you can see how the finger is located at the bottom right of the screen. Without changing the position of my finger, I can easily reach any button on the right menu.

3. buttons across the entire width of the screen

Yes, it sounds very simple. By making a separate line for each button and extending it across the entire width of the screen, in combination with a “long” scroll, we get an interface completely tailored for one finger.

4. summary

So this is how I have my home screen implemented.

Last thing

Here I would just like to encourage all application developers to use this concept. Even if not fully and not everywhere. I believe that if your application involves on-the-go use, then you are simply forced to make it one-finger if you want to create a truly user-friendly interface. The implementation methods that I described are not ultimately true. You can use any other methods to achieve a very simple goal, which is that with one finger, in any position of the screen, you can perform any action in the application.

In a mega-combo ONE TOUCH + NO HOURS. These are the two concepts that I use in my application. I am creating the best application for time management.

If you want to join the development of birch bark, connect to my tg channel:

tg: gaiusdedeo