March 15, 2013 at 13:31Finger control: looking for the perfect interface
It so happened that the professional diseases of interface designers are allergies to inconvenience, increased irritability when interacting with complex processes, hypersensitivity to taste deficiency, inadequate reaction to the lack of logic. Therefore, it can be quite difficult for them to find the right application for their needs. And if desktop computers and laptops, due to their age, have already managed to acquire high-quality programs for almost all areas of application, then in the world of mobile applications there is often a thoughtless copy-paste of desktop solutions.
Particularly acute quality deficiency began to manifest itself with the advent of applications in which developers took into account the features of touch screen control and relied on new ways of interaction. And immediately from all over the Internet cried out “revolutionary design”, “innovative management”, “convenient minimalistic interface”.
Let's try to understand the intricacies of interacting with touch screens, and understand how to achieve such convenience and ease of control.
Before I got an iPad, I heard a lot of praise songs about Apple. The fact that they made a revolution by creating finger-oriented devices. About what a convenient and beautiful iOs system is. About how they control their store, not allowing low-quality applications there. About how many people now use tablets instead of laptops to solve many of their everyday tasks. For work and hobbies, for communication and entertainment.
And it's not that I naively believed all this, but I really wanted to see what really happens in the world of tablets. In the end, probably over the three years of its existence, the developers have already written many applications that can be used not only for entertainment, but also for work or a hobby. Moreover, the way of interacting with a touching screen significantly expands the control capabilities of the application, which means that there are certainly tools that, in principle, are not on desktops, with their own unique way of interacting with their unique capabilities.
And it seems to be yes. I found a lot of sketches, notebooks, planners, musical instruments, browsers, PCC readers, even a full-fledged vector editor, straight illustrator for iPad. I downloaded, tried, downloaded yet, tried, collecting my own set of working tools. And in the end, he determined for himself the most interesting applications in which you can draw, design, write text, extract sounds and much more, but ...
How much inconvenient junk is in the appstore!
Applications that are really convenient to use are units. The rest eitherlook like thone look offends my sense of beauty, either it’s terribly inconvenient to use them, or it’s very difficult to get from them what I want. There are those that look nice, the controls are configured more or less correctly, functionally quite suitable, but minor imperfections or glitches in the details negate all the advantages that are available.
The most important difference between tablets and desktop computers and laptops in the way they control. Working with the mouse on desktops, we hardly move a hand, and the cursor at the same time freely moves around the large screen. And then there's a scroll wheel right under your fingers.
With a tablet, everything is different. We constantly have to move our hand around the screen to press something, move something, hold our finger somewhere. This is not as comfortable as moving a mouse, and it is extremely important for developers to find ways to minimize this inconvenience.
Another feature of the tablets, which developers do not attach enough importance to - a small screen area. Only 10 inches. Of the common tablet models, this is the maximum size. Let's imagine it next to a large and comfortable 20-inch-something home monitor, on which so much can fit. The tablet is two, or even three times smaller. Judge for yourselves - the screen is smaller, the accuracy of hitting less, when controlling constantly part of the screen is closed by hand, and developers persistently continue to sculpt their interfaces from desktop solutions, not realizing that they no longer work as successfully here.
And so they are trying to fit the workspace, controls, toolbars on the screen so that everything is at hand, supposedly convenient when everything is at hand. And the screen is all nothing. Even the working area stretched over the entire screen area is often not enough for comfortable work, and then there are panels, buttons, menus.
Having studied the solutions used in a variety of applications, I came to the conclusion that it is quite possible to make the work on the tablet comfortable. And I really wanted to collect these solutions and principles in one place, in the hope that if the developers do not listen, then at least think about the features of the form factor and try to find the best solution.
There are only three key points:
Let's consider them more closely.
Everything is simple here - we cannot stretch the tablet, so the only way out is to use the entire available screen area under the workspace. All over! Without a but. No panels on the screen with buttons or any information that are constantly on the screen. The whole place is for the most important thing for which we opened this application. We take this decision as a fundamental principle, and it remains for us to figure out how and where to place the controls.
There are not so few options here.
We put some basic actions on gestures. Just do not forget at the first start to show a screen with a description of these gestures.
Not enough gestures and nothing better than buttons came up with? - Place the icons directly above the workspace.
There are many buttons and it is logical to place them on a common panel? - hide this panel behind the screen with the ability to pull it out with a light gesture. You can even hide the panel automatically when it’s clear from the user's actions that he doesn’t need it right now (for example, when he started scrolling the browser page - that means he is viewing the page and the control buttons are not relevant at the moment).
Gestures are the most convenient way to interact with the touch screen. It feels like a light finger movement (swipe) is perceived by an even simpler action than tapping the screen (tap).
The most convenient gestures are those that are generally not tied to a specific place on the screen or an element of the workspace. The second convenience is gestures from one side of the screen, or gestures over a large element of the workspace (for example, over a text block).
Controlling the application with light finger movements anywhere on the screen is what gives you a feeling of light, careless, but at the same time accurate and responsive interaction with the application. Well, it will make you feel a little magician.
Speaking of magic. Another example of bringing magical lightness and convenience to managing your workspace is inertia. With a flick of a finger, you can scroll down the browser page, move around the map, view the gallery of pictures, stopping movement at any time.
Epplovtsy from the very first version of the system demonstrated the advantages of inertial dynamics for scrolling, so most developers added it to their lists, texts - wherever there is something to scroll. But as soon as it comes to moving the page in any direction - here for some reason the workspace moves exactly as much as you slide it with your finger.
Help the user. Give him the opportunity to lightly jerk the page forward and stop by touching the screen. The cards have just come to this. And if I watch large images? What about drawing and design applications? Finally, turn on large canvases and inertia of movement in the drawings !!!
I’ll share a few more secrets that make applications seem more convenient and easier to use.
One of them is an understanding of users' tasks and a sense of proportion in satisfying their desires. It is necessary to clearly understand why people use your application and offer them the most convenient tool in your opinion for this. Not 15 different tools for the same thing (supposedly flexibility, huh), not a tool with 128 settings for different parameters (they will only deal with this setting, it won’t get to the point), namely their own way to solve the problem. With a certain taste, you may well be able to create something that others will like.
The best applications have a small number of very thoughtful, high-quality and correctly tuned tools and rather meager settings. Everything is done in order for the user to solve their problems with the help of the proposed tools, and not engage in their endless customization and adjustment for themselves.
Well, finally got to the design. The interface doesn’t interfere with the quality that arouses a person’s desire to open the application again and again. The application should not only solve the user's tasks well, but also deliver aesthetic pleasure to the person, which will add him +1 to inspiration and +2 to performance.
Of course, the above principles are not universal recipes for all occasions. I am sure there will be cases when the button is better than the swipe, when the control panel is most convenient to fix, shifting the work area, when inertia cannot provide sufficient accuracy of movement and will only interfere. The main thing when developing the application is to pay enough attention to convenient management and think about the features of the environment in which it will be executed.
PS
If interested - I can write a sequel, with specific examples.
Particularly acute quality deficiency began to manifest itself with the advent of applications in which developers took into account the features of touch screen control and relied on new ways of interaction. And immediately from all over the Internet cried out “revolutionary design”, “innovative management”, “convenient minimalistic interface”.
Let's try to understand the intricacies of interacting with touch screens, and understand how to achieve such convenience and ease of control.
Unjustified expectations
Before I got an iPad, I heard a lot of praise songs about Apple. The fact that they made a revolution by creating finger-oriented devices. About what a convenient and beautiful iOs system is. About how they control their store, not allowing low-quality applications there. About how many people now use tablets instead of laptops to solve many of their everyday tasks. For work and hobbies, for communication and entertainment.
And it's not that I naively believed all this, but I really wanted to see what really happens in the world of tablets. In the end, probably over the three years of its existence, the developers have already written many applications that can be used not only for entertainment, but also for work or a hobby. Moreover, the way of interacting with a touching screen significantly expands the control capabilities of the application, which means that there are certainly tools that, in principle, are not on desktops, with their own unique way of interacting with their unique capabilities.
And it seems to be yes. I found a lot of sketches, notebooks, planners, musical instruments, browsers, PCC readers, even a full-fledged vector editor, straight illustrator for iPad. I downloaded, tried, downloaded yet, tried, collecting my own set of working tools. And in the end, he determined for himself the most interesting applications in which you can draw, design, write text, extract sounds and much more, but ...
How much inconvenient junk is in the appstore!
Applications that are really convenient to use are units. The rest either
What is the problem
The most important difference between tablets and desktop computers and laptops in the way they control. Working with the mouse on desktops, we hardly move a hand, and the cursor at the same time freely moves around the large screen. And then there's a scroll wheel right under your fingers.
With a tablet, everything is different. We constantly have to move our hand around the screen to press something, move something, hold our finger somewhere. This is not as comfortable as moving a mouse, and it is extremely important for developers to find ways to minimize this inconvenience.
Another feature of the tablets, which developers do not attach enough importance to - a small screen area. Only 10 inches. Of the common tablet models, this is the maximum size. Let's imagine it next to a large and comfortable 20-inch-something home monitor, on which so much can fit. The tablet is two, or even three times smaller. Judge for yourselves - the screen is smaller, the accuracy of hitting less, when controlling constantly part of the screen is closed by hand, and developers persistently continue to sculpt their interfaces from desktop solutions, not realizing that they no longer work as successfully here.
And so they are trying to fit the workspace, controls, toolbars on the screen so that everything is at hand, supposedly convenient when everything is at hand. And the screen is all nothing. Even the working area stretched over the entire screen area is often not enough for comfortable work, and then there are panels, buttons, menus.
You need to do something about it.
Having studied the solutions used in a variety of applications, I came to the conclusion that it is quite possible to make the work on the tablet comfortable. And I really wanted to collect these solutions and principles in one place, in the hope that if the developers do not listen, then at least think about the features of the form factor and try to find the best solution.
There are only three key points:
- maximum work area
- gestures
- inertia
Let's consider them more closely.
Maximum work area
Everything is simple here - we cannot stretch the tablet, so the only way out is to use the entire available screen area under the workspace. All over! Without a but. No panels on the screen with buttons or any information that are constantly on the screen. The whole place is for the most important thing for which we opened this application. We take this decision as a fundamental principle, and it remains for us to figure out how and where to place the controls.
There are not so few options here.
We put some basic actions on gestures. Just do not forget at the first start to show a screen with a description of these gestures.
Not enough gestures and nothing better than buttons came up with? - Place the icons directly above the workspace.
There are many buttons and it is logical to place them on a common panel? - hide this panel behind the screen with the ability to pull it out with a light gesture. You can even hide the panel automatically when it’s clear from the user's actions that he doesn’t need it right now (for example, when he started scrolling the browser page - that means he is viewing the page and the control buttons are not relevant at the moment).
Gestures
Gestures are the most convenient way to interact with the touch screen. It feels like a light finger movement (swipe) is perceived by an even simpler action than tapping the screen (tap).
The most convenient gestures are those that are generally not tied to a specific place on the screen or an element of the workspace. The second convenience is gestures from one side of the screen, or gestures over a large element of the workspace (for example, over a text block).
Controlling the application with light finger movements anywhere on the screen is what gives you a feeling of light, careless, but at the same time accurate and responsive interaction with the application. Well, it will make you feel a little magician.
Inertia
Speaking of magic. Another example of bringing magical lightness and convenience to managing your workspace is inertia. With a flick of a finger, you can scroll down the browser page, move around the map, view the gallery of pictures, stopping movement at any time.
Epplovtsy from the very first version of the system demonstrated the advantages of inertial dynamics for scrolling, so most developers added it to their lists, texts - wherever there is something to scroll. But as soon as it comes to moving the page in any direction - here for some reason the workspace moves exactly as much as you slide it with your finger.
Help the user. Give him the opportunity to lightly jerk the page forward and stop by touching the screen. The cards have just come to this. And if I watch large images? What about drawing and design applications? Finally, turn on large canvases and inertia of movement in the drawings !!!
Bonuses
I’ll share a few more secrets that make applications seem more convenient and easier to use.
One of them is an understanding of users' tasks and a sense of proportion in satisfying their desires. It is necessary to clearly understand why people use your application and offer them the most convenient tool in your opinion for this. Not 15 different tools for the same thing (supposedly flexibility, huh), not a tool with 128 settings for different parameters (they will only deal with this setting, it won’t get to the point), namely their own way to solve the problem. With a certain taste, you may well be able to create something that others will like.
The best applications have a small number of very thoughtful, high-quality and correctly tuned tools and rather meager settings. Everything is done in order for the user to solve their problems with the help of the proposed tools, and not engage in their endless customization and adjustment for themselves.
Well, finally got to the design. The interface doesn’t interfere with the quality that arouses a person’s desire to open the application again and again. The application should not only solve the user's tasks well, but also deliver aesthetic pleasure to the person, which will add him +1 to inspiration and +2 to performance.
Well that's all
Of course, the above principles are not universal recipes for all occasions. I am sure there will be cases when the button is better than the swipe, when the control panel is most convenient to fix, shifting the work area, when inertia cannot provide sufficient accuracy of movement and will only interfere. The main thing when developing the application is to pay enough attention to convenient management and think about the features of the environment in which it will be executed.
PS
If interested - I can write a sequel, with specific examples.