Gestures in engineering and design. Smartphone Touch Screen Control Techniques

With the spread of touch displays, the issue of gesture combinations in computer technology becomes especially relevant. Multi-touch allows users to easily move virtual objects on the screen with simple finger movements. Most of the key actions on touch devices are closely related to gestures, they are the basis of interaction with mobile devices and tablets. Gestures consist of tactile mechanics (what the user's fingers do on their touch screen) and subsequent tactile activity (the result of tactile mechanics).

The following information is collected, revealing the main features of sensory manipulations on mobile devices Oh. There are also free vector variations of gestures that you can use in your work.

Tactile mechanics and tactile activity

There are many types of tactile mechanics. Below are the most common gestures.

touch touch screen is the most popular and basic gesture. Actually, it is carried out daily when you touch the screen to launch applications, Email or any other similar service. Single touch is characterized by simply tapping the screen with one finger.

double tap touch screen is the next most common gesture. Double tapping is done by quickly double-clicking on the device screen with your finger. It is used, as a rule, to enlarge an image or an area of text on the screen.

Slip also well known to the average user. This action is performed by touching and swiping the screen surface. A perfect example is locking your phone by touching certain points on the screen with your finger to lock or unlock.

drag and drop has almost the same tactile mechanics as the action described in the previous case. The main difference lies in the speed of operations.

swipe combines sliding and dragging. In this case, the tactile mechanics are not much different from drag and drop, except in terms of speed. When swiping, the finger moves very quickly, as if you need to scroll the screen to remove the profile picture / avatar / application.

Long press involves touching a screen element and holding your finger on it for some time. The result of such tactile mechanics may be opening a window for copying a section of text, etc...

Long press and drag involves pressing and holding your finger on the screen, followed by movement along its surface. It is used to change the order of application icons, etc.

Double tap and drag- this combination of gestures is a bit more intricate. It is necessary to press on a section of the screen, lift your finger from the surface and press again with further movement of the finger along the screen surface to the area of interest. This tactile mechanic can be used to zoom in on content in one area of the screen and then zoom out in another.

Mixing / Breeding include simultaneous pressing with two fingers located near or at some distance from each other, with their further separation or convergence. The gesture is completed by raising the fingers above the screen surface. Usually, the result of such mechanics is a reduction or increase in the scale of the image.

Single tap with two fingers- pressing, which is made with two fingers at the same time. This is followed by an immediate raising of both fingers. The gesture is usually used to zoom out.

Swipe, drag, or swipe with two fingers- these gestures require the use of two fingers when the user touches the screen, "slides" on it and lifts them off the screen. Gestures can be used to either select multiple items, or to tilt or scroll.

Long press and drag with two fingers is carried out by pressing two fingers on the screen area, holding them and moving to the desired area of the screen with a further rise above the touch surface. This tactile mechanism is effective when working with an interface that needs to rearrange list items or the order of icons, images.

Double click with two fingers is carried out with the help of two consecutive short presses with two fingers on the screen. Basically, this gesture is designed to zoom out.

Turn or rotation used in working with animation and images on mobile devices. It is necessary to press the screen with two fingers from different sides of the central object and, rotating the fingers in an orbit around the object, rotate it. The gesture ends traditionally - by removing the fingers from the touch screen. Rotation also comes in handy when working with google map when it needs to be deployed horizontally for greater convenience.

Almost the entire concept of working with interfaces on touch devices is based on the use of gestures. With a rather limited mobile screen area, designers and developers have to use tactile mechanics in the most rational and reasonable way. To interact effectively with a device, gestures must be intuitive and associated with the tactile activity associated with them.

Tactile mechanics vector

Below is free collection vector set of gestures. They are suitable not only for designing multi-touch device interfaces and promoting mobile applications, but can also be used as icons, pointers, etc.

Android devices use a touch screen. For users who are accustomed to push-button controls, it can be difficult to switch to touch screen operation.

Button control uses a keyboard and mouse, while touch screen control is performed using fingers or a stylus.

On the one hand, gesture control seems a little primitive. On the other hand, Android gestures open up new horizons for various programs that would be very difficult or impossible to implement in a button version.

Touch screen control is that it responds to touch with fingers or a stylus, and, if necessary, repeats exactly these movements. If the device recognizes touches or movements as commands, then they are executed exactly as commands. The task of the user is simple - to master pressing the touch screen so that they lead to the execution of those commands that will be understandable to the device and that the user needs.

Let's take a look at the top seven techniques used on touch screens. Android gestures can be the following:

1. Touch (press)

Tapping (or tapping) is the primary action most commonly used on a touch screen.

Touch is necessary in many cases:

to enable features,
to launch any application,
activation of one or another parameter, element,
to select the desired icon or the corresponding option in the list,
to enter text
etc.

Touching is simple. It is easy enough to touch with your finger or stylus in the required place on the screen, for example, touch the icon of the desired application.

To enter text, just touch the desired field, a virtual keyboard will automatically appear, you can type text by touching the keys with the desired characters.

I involuntarily recall how many years ago I went to the terminal, pressed the buttons of the terminal in order to put money on mobile phone. In general, I did everything as usual, but nothing happened on the terminal, the terminal did not respond to the buttons. So I did 3 or 4 approaches to the terminal on different days with zero results. On some good day, a young man who was standing in line at the terminal behind me said: “What if you press your finger on the screen?”. And here it is, happiness: I pressed my finger on the screen and the terminal began to respond to pressing, everything worked out. So I first met with a touch screen.

2. Double tap

Double-tap (or double-tap) is used for quick zoom, to launch some applications and other actions.

To change the scale, for example, when viewing a web page, you need to quickly touch the screen 2 times with a minimum interval. To return to the previous state, you must again double-tap the screen.

One double-tap turns on the corresponding option, a second double-tap cancels the same option.

If you compare Android with Windows, then double-tap in Android is somewhat similar to double-clicking the left button in Windows.

3. Touch and hold

Pressing (touching) with holding is used to open additional options, if any.

You need to touch the desired area on the screen and hold your finger for a few seconds. At the moment of touching and holding, nothing happens, and this may be somewhat surprising at first. But as soon as you release your finger, an additional menu will immediately appear or another action will occur as a result of a touch and hold.

This action is very similar to right-clicking in Windows, when after right-clicking on an object, a so-called context menu appears with additional options for the object.

4. Swipe (swipe)

Swiping can also be called swiping or scrolling. Lightly touching the screen, without releasing your finger, slide your finger from top to bottom, from bottom to top, from left to right, or from right to left, that is, as if to brush off the “dust from the screen” slightly in the right direction.

Swiping (swiping) is used to switch between pages on the Desktop, to scroll through various lists, etc. Depending on the Android lock screen setting, it may be that swiping diagonally (diagonally) means unlocking the screen - this swiping also applies, and not just swipes from bottom to top or right to left.

When I first needed to send a message in Russian on my smartphone, for this I had to change the layout from English to Russian on the virtual keyboard. I tried all the options, even went into the language settings - it didn’t work out in any way: the English layout “stood in its tracks”. I was told that I just need to lightly wave my finger over the space from left to right. By the way, I saw the inscription "English" on the space bar on the virtual keyboard, I pressed it, but to no avail. And as soon as she waved her finger over the space, the layout immediately changed to Russian. Here it is swiping, it works!

5. Drag and drop (drag and drop)

Dragging (or dragging) is required to move apps around on the screen, as well as to move folders, icons, and the like.

It is necessary to touch the required element, wait for it to be selected, then, without releasing your finger, move this element (folder, file, icon, etc.) to the desired point on the touch screen.

6. Bringing and spreading fingers

A simple and useful function to change the scale of what is displayed on the screen: picture, text, map, diagram, etc. You can zoom in and out again if needed.

To do this, you need to touch the screen with two fingers (or several) at once and, without taking your fingers off the screen, spread them apart. The scale will increase proportionally.

If you touch the screen with two fingers (or several) and, without lifting them off the screen, bring them together, then the scale will decrease.

7. Change screen orientation

Portrait (vertical) orientation is convenient for reading books. Landscape (horizontal) orientation is good for watching videos and various maps. All this, of course, is not for everyone, everyone chooses for himself which orientation is better in this or that case.

To change the orientation from one to another, you just need to turn your smartphone. In this case, the Screen rotation function must be activated in the screen parameters. If the function is disabled, then the image will not be rotated.

These are not all possible gesture options, but perhaps the most basic and frequently used ones. Other gestures, such as turning in a circle, etc. are used less often, and these gestures may not work in every program. As a rule, the listed gestures are enough for all occasions, or almost everything.

They are mastered easily and quickly, but first you need to practice a little. Gestures are logically clear, you expect exactly this action from them. Is that touch with hold - it's a little unnatural. The rest of the gestures are intuitive. That's why it's easy to remember.

P.S. Check out other content:

Get up-to-date articles on computer literacy directly to your mailbox .
Already more 3.000 subscribers

These days are nothing new, you can see them everywhere. For many years we have been using them in ATMs and payment terminals. In some grocery stores, you can order various dishes by pressing the touch menu buttons. So by and large, the iPad's touchscreen shouldn't be new to you.

But for iPad usage it takes more than just a touch. You tap, double tap, press and hold buttons, swipe and drag icons, swipe across the screen. What movements you will make and when - depends on what you want to do. We have already covered the main ones, this article will help you figure it out on the iPad.

Sometimes, there may be problems with the touch screens of mobile devices. They may be caused by a hardware failure, in which case contact your service center where you can always repair your favorite gadget.

You'll learn how to perform a "finger dance" to get iPad to respond to all your commands. You'll also learn a few keyboard shortcuts and how to use your fingers to find things on iPad. So stretch your arms and get started.

The "brain" of the iPad is his operating system— smart enough to respond to a series of very different touches.

Finger movements depend on what you want to do. The following actions are possible.

Pressing. Lightly press with your fingertip on the icon, shortcut, song name, or control you see on the screen. The iPad isn't a crude old calculator, so you don't have to press hard, just a light touch is enough.
Drag and drop. Press your finger on the glass and slide it to the side to move to different parts of the screen. This way you can control the volume controls and navigate through the photos. Dragging with two fingers moves the window within the window (for example, the floating window that appears in the Facebook window when you bring up your friends list).
Move. Moving is similar to dragging, except that it is used for only one control - the Unlock / Confirm buttons (Unlock / Confirm). It's on the "track" where you move the slider when waking iPad from Sleep or confirming it's completely off.
Scrolling. Easily and quickly swipe up or down the screen and browse a web page or song list in the swipe direction. The faster you scroll, the faster the screen scrolls. In the photo album, swipe from side to side so that the images follow each other on the screen.
Reduction and separation of fingers. To zoom in on part of an image, document, or web page, put your thumb and forefinger together, place them on the screen, and then spread them apart. To zoom out, place your fingers apart on the screen and pinch them together.
Double click. Two alternate presses are needed in several situations. First, this fast way enlarge a photo or web page. Secondly, if you are watching a video, then this allows you to switch the ratio of width and height. In full screen mode (shown on the left), the edges of the frame are cropped. The widescreen view (shown on the right) is preferred by moviegoers because it makes the movie look the way the director intended.

When developing applications for Android and iPhone with iPad (IOS) using only web technologies, sooner or later each developer faces the question of implementing and using complex multi-touch actions in their game or application, such as swipe, pinch, as well as processing a long tap (long touch with one finger without moving) and drag "n" drop.

In this article, we will look at ways to process touch events of varying complexity on Javascript Events, without third-party libraries (we’ll just take jQuery min).

I’ll make a reservation right away that I will only use jQuery in order to disable the default behavior of the browser on the event. I don't like this library, so everything will be written in Vanilla JS.

So, let's start with the theory and actually touch on what events should be used when creating an application or game.

In total, 3 key events are used:

touch start- Touched the screen

touchend- Finger removed

touch move- move your finger

If to get the element on which the mouse drove in or moved out, it was enough to call event.target, then everything is not so simple with touch events.

Each touch must be identified. And for this, lists are used:

touches- All fingers that are currently interacting with the screen ("Touched" on the screen)

targetTouches- List of fingers that interact with the element

changedTouches- List of fingers that participate in the current event. If for example it is a touchend event, then the list will contain the finger that was removed (Even if the other 4 fingers are still on the screen).

To make it easier to understand, here's the situation:

I put one finger on the screen and all 3 lists have one element.

I put the second finger and now touches has 2 elements, targetTouches will have 2 elements if I put the second finger on the same HTML element as the first, and changedTouches, in turn, will have only the second finger, since it was he who caused the event.

If I put 2 fingers on the screen at the same time, then changedTouches will have 2 elements (each per finger).

If I start moving my fingers across the screen, only the changedTouches list will change. The number of elements that it will contain will be equal to the number of fingers involved in the movement (at least 1).

If I remove my finger, then the lists touches, targetTouches will be one element empty, and changedTouches will contain the finger, since it triggered the event (touchend)

When I remove the last finger, the lists touches, targetTouches will contain nothing, and changedTouches will have information about this very finger.

Now is the time to find out exactly what information we can get about the finger:

identifier- Unique touch ID

target- The object itself to which we touched

PageX, PageY- Touch coordinates on the page

You can view the unique ID of a single touch by calling event.touches.identifier, and on IOS, if I'm not mistaken, you need to do this event.originalEvent.touches.identifier.

Well, what I have already taught you, and now it's time to move on to practice.

Before we get started, there are a few things you need to understand. In each game, application that you will make on Android and IOS, you must disable the standard reaction of the WebView component to events. To do this, we connected jQuery (I could not do on Pure JS what the functions do event.preventDefault() And event.stopPropagation()).

So you need to put the following in your JS code:

event.preventDefault();
event.stopPropagation();

), false);

event.preventDefault();
event.stopPropagation();
/* Here is your event handling code */
), false);

This must be done, because many devices without it have significant brakes, glitches and jerky animation.

Distracted. We continue.

Let's describe all the basic touch interactions with the screen and elements, having the acquired knowledge.

Tap

This event is executed simply when we touch the screen with our finger and move it away.

var myclick=event.targetTouches; /*your code*/
}
), false);

For example in a variable myclick will contain your touch.

Long tap

Although infrequently, there are situations when in a mobile application or game you need to catch the action of a long touch on an object. Let's take a look at how to make a Javascript long touch for touch screens. mobile smartphones Well, of course, tablets.

Implementation 1:

var ldelay;
var betw=();
document.addEventListener("touchstart", function(event) (
event.preventDefault();
event.stopPropagation();
ldelay=new Date();
betw.x=event.changedTouches.pageX;
betw.y=event.changedTouches.pageY;
), false);
/*Catch finger release*/
document.addEventListener("touchend", function(event) (
var pdelay=new Date();
if(event.changedTouches.pageX==betw.x &&
event.changedTouches.pageY==betw.y &&
(pdelay.getTime()-ldelay.getTime())>800)(
/*Here is your code*/
}
), false);

This is the first Javascript implementation of Long Tap. The logic is this: we catch the touch, measure the time of this event, catch the release, measure the release time, subtract the first time from the second and check if the position of the finger on the screen has changed. If more than 800 milliseconds have passed with the finger at the same place and time, we perform Long Tap actions.

Now let's look at the second implementation with slightly different logic:

Implementation 2:

varlttimer;
document.addEventListener("touchstart", function(event) (
event.preventDefault();
event.stopPropagation();
lttimer=setTimeout(longTouch,800);
), false);
document.addEventListener("touchmove", function(event) (
event.preventDefault();
event.stopPropagation();
clearTimeout(lttimer);
), false);
document.addEventListener("touchend", function(event) (
clearTimeout(lttimer);
), false);
function longTouch()(/*your code*/)

The above implementation of the Long Tap event in Javascript is more correct and is most often used in mobile applications. Its main difference from the previous implementation is that it does not wait for the finger to be released, and in the event that the finger did not move, it fires the Long Tap event, which you must place in the longTouch function. longTouch.

Swipe

It's time to talk about paging on the screen of a smartphone or tablet. Swipe is quite common in building primarily mobile applications, so sooner or later every app builder has to deal with it.

If you don't want to bother and only need the Swipe functionality in the mobile app, you can read about it at the very bottom of the page.

If you are a hardcore developer - let's go!

Implementation 1:

var initialPoint;
var finalPoint;
document.addEventListener("touchstart", function(event) (
event.preventDefault();
event.stopPropagation();
initialPoint=event.changedTouches;
), false);
document.addEventListener("touchend", function(event) (
event.preventDefault();
event.stopPropagation();
finalPoint=event.changedTouches;
var xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX);
var yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY);
if (xAbs > 20 || yAbs > 20) (
if (xAbs > yAbs) (
if (finalPoint.pageX< initialPoint.pageX){
/*SWIPE LEFT*/)
else(
/*SWIPE RIGHT*/)
}
else(
if (finalPoint.pageY< initialPoint.pageY){
/*SWIPE UP*/)
else(
/*SWIPE DOWN*/)
}
}
), false);

This is our first Javascript swipe implementation. The peculiarity of this implementation is that the event is counted as a swipe when you release the finger involved in the event. This swipe can be used in some tasks. Do not forget in this and many other examples to turn off the standard behavior of the browser on touch events (I wrote about this above), I usually do not write them in the examples given, but do not forget.

And now let's look at another - classic implementation, when swipe needs to be calculated in real time, for example, when turning the page:

In this method, we went a slightly different way and partially used the principle of the first implementation. Logically, this is a slightly more complex swipe. Where /*Process Data*/ is commented out, you should use the coordinates of the swipe finger. For example, it can be an animation of turning the page, and the more left the finger, the more the page is turned. For example, we are in that part of the event listener touch move tracked only the x-coordinate, y - is screwed in a similar way. In a variable otk.x store the current position of the finger relative to the point where it first touched the eran. If the finger is to the left of this point, then the variable has a negative value, if to the right - a positive one.

For example, we set a condition there when the finger moves more than 200 pixels to the left or right of the touch point - we count the swipe. What is it for? For example, as soon as the user touches and starts moving his finger, you can show him a smooth page flipping, which follows his finger, and as soon as the finger goes beyond 200 pixels, it performs the final animation and the page flips. It's like one of possible way the use of such a swipe.

But why then the event touchend you ask ... Sometimes the user does not want to move his finger for a swipe for some distance, and many applications use a swipe as a reaction to quickly moving a finger across the screen to the side for a short distance. This is exactly what we applied in the last event listener.

Drag "n" Drop (Drag element)

Often, in application interfaces and games, you have to drag one of the elements with your finger to a certain place. Let's do it in javascript for touch screens. Let's start:

var obj = document.getElementById("sat");
/*Catch the touch*/
obj.addEventListener("touchstart", function(event) (
if (event.targetTouches.length == 1) (
var touch=event.targetTouches;
touchOffsetX = touch.pageX - touch.target.offsetLeft;
touchOffsetY = touch.pageY - touch.target.offsetTop;
}
), false);
/*Move the object*/
obj.addEventListener("touchmove", function(event) (
if (event.targetTouches.length == 1) (
var touch = event.targetTouches;
obj.style.left = touch.pageX-touchOffsetX + "px";
obj.style.top = touch.pageY-touchOffsetY + "px";
}
), false);

As you can see, this is not the whole code, so far we have obtained drag without drop "but. You have probably already noticed that the element is ultimately moved css parameters left And top. Instead of these two lines, which are responsible for moving the object around the screen, you can put:

obj.style.WebkitTransform="translate("+(touch.pageX-touchOffsetX)+"px,"+(touch.pageY-touchOffsetY)+"px)";

Those. use CSS3, but in my case I did not notice a performance increase, so it's better top And left. With this code, you can move an item around the field, but releasing it in a certain place will not be counted. To implement this, add a touchend handler to the object with the corresponding code inside:

var tarobj=document.getElementById("dro");
obj.addEventListener("touchend", function(event) (
if (event.changedTouches.length == 1) (
var tarWidth=tarobj.offsetWidth;
var tarHeight=tarobj.offsetHeight;
var tarX=tarobj.offsetLeft;
var tarY=tarobj.offsetTop;
if(
(event.changedTouches.pageX > tarX) &&
(event.changedTouches.pageX< (tarX + tarWidth)) &&
(event.changedTouches.pageY > tarY) &&
(event.changedTouches.pageY< (tarY + tarHeight))){
/*We are above the tarobj object*/
}
}
), false);

In order for everything to work, point your object to a variable tarobj and you will be happy.

Pitch (Pinch)

It's time to remember the famous pinch, which was first shown by Steve Jobs when he presented the first iPhone. It is this movement of two fingers towards each other or away from each other that is called a pinch. Usually this gesture is used to increase or decrease something.

In the example below, the key points are marked with comments (so that the code does not merge into a complete wheat porridge):

/*Define some variables*/
var objzoom = document.getElementById("dro");
var scaling = false;
var dist = 0;
varscale_factor = 1.0;
var curr_scale = 1.0;
var max_zoom = 8.0;
var min_zoom = 0.5
/*Write a function that determines the distance between fingers*/
function distance (p1, p2) (
return (Math.sqrt(Math.pow((p1.clientX - p2.clientX), 2) + Math.pow((p1.clientY - p2.clientY), 2)));
}
/*Catch the beginning of the slash*/
objzoom.addEventListener("touchstart", function(evt) (
evt.preventDefault();
vartt = evt.targetTouches;
if (tt.length >= 2) (
dist = distance(tt, tt);
scaling = true;
) else (
scaling = false;
}
), false);
/*Catch the zoom*/
objzoom.addEventListener("touchmove", function(evt) (
evt.preventDefault();
vartt = evt.targetTouches;
if (scaling) (
curr_scale = distance(tt, tt) / dist * scale_factor;
objzoom.style.WebkitTransform = "scale(" + curr_scale + ", " + curr_scale + ")";
}
), false);
/*Catch the end of the slash*/
objzoom.addEventListener("touchend", function(evt) (
vartt = evt.targetTouches;
if(tt.length< 2) {
scaling = false;
if (curr_scale< min_zoom) {
scale_factor = min_zoom;
) else (
if (curr_scale > max_zoom) (
scale_factor = max_zoom;
) else (
scale_factor = curr_scale;
}
}
objzoom.style.WebkitTransform = "scale(" + scale_factor + ", " + scale_factor + ")";
) else (
scaling = true;
}
), false);

In the example, we use an object with id for the test dro, you can use your object by assigning it to a variable objzoom. In variables, you can change the data, for example, the maximum zoom or the minimum.

Sliding images and HTML

We have already described above how to make a swipe based on which you can slide images or your data in HTML code. However, this may not suit some, and if you are among those who want to get the result easier and faster without going into details, this subsection is for you.

First of all, we note a free JS development called Fotorama, which is very functional and useful for mobile application developers who want to use sliding.

There is also a beautiful image slider.

In addition to such a manual creation of a touch shell for an application or game, you can use a framework. Here is a list of Sencha Touch , jQ Touch , JQuery Mobile frameworks popular in this topic.

The last question is the question of compatibility of all this with mobile platforms. Well, touch supports Android 2.3-4.X and IOS. But multitouch is supported by everything except Android 2.3.

Don't forget that you should assign handlers to HTML objects when they are already known, i.e. in the event window.onload or DOMContentLoaded.

If you have something to add to the article - write in the comments.