For web browsers, the several changes in button controls are a very familiar mechanism: Normal, Hover and Archive are the three effects that are easiest to feel when browsing with a mouse. They are the normal state of the button, the effect of the mouse cursor moving above, and the effect of clicking the button.
There is another effect we call Focus. Focus mainly refers to the state displayed by the targeted control when you use the keyboard's Tab key to "aim" at the controls on the web page. Although the mouse is now the main device for operating computers, in some cases, such as when filling out a form, it is much smoother for users to directly use the keyboard's Tab to switch input fields than to constantly operate back and forth between the mouse and keyboard. Therefore, in form system designs that focus on user experience, special attention will be paid to the Focus effect of the input box:
The most common interactive effect on web pages: Hover
In web pages, the Hover effect is a commonly used effect. In addition to effectively providing users with information such as "I am currently targeting this button with my mouse" and "This may be an interactive control", the Hover effect is often used as a way to provide a lot of additional information: For example, when browsing Dribble, what we usually see are pictures of works, and information such as the name and description of the work are designed in the Hover effect:
And the most common prompt: when the user is unclear about the function of the button, Hover can prompt the user for the function description of the button without changing the original layout:
Reasonable arrangement of Hover can make the layout design more concise. Many texts and descriptions that easily cause clutter in the layout can temporarily disappear on the layout, but the necessary information can be provided to users at the right time.
However, on a touch screen, Hover becomes difficult to move
Different from desktop computer operating systems, touch screen devices do not have a mouse cursor due to their operational characteristics. Therefore, the operation is to use a finger or stylus to directly click on the sensor panel. The actions that the user can perform are nothing more than: single click, double click, long press, and sliding in various directions (multi-finger gestures are special actions of some systems, so they are not discussed here).
For example, the control of the App icon in the iOS system is designed to launch the App with a single click, and delete or move it by pressing and holding:
Another common touch operation mode is the familiar pull-down refresh function in iOS systems. The single-finger sliding downward gesture replaces the traditional Refresh button:
Therefore, when developing the app, designers take into account the characteristics of the device itself and must change the design for the operation of the touch system. For example, Plant Nanny has designed a button that must be pressed and held for 2 seconds to complete the task: on the one hand, it avoids accidental touches, and on the other hand, it can be used with sound effects during these 2 seconds to create a "drinking water" feeling.
How to achieve the Hover effect in touch devices?
Since touch devices have completely different operating characteristics, and the proportion of users using touch devices to browse information is increasing, many websites have to consider how to adjust to the needs of touch device browsing:
Give up the Hover effect and use the device detection of the browser to provide different layout arrangements.
For example, Behance’s web version and mobile app show different layout configurations.
Click once to trigger the hover effect, and click again to trigger the click effect.
For example, the website Grids also uses a design where the title and information will be displayed only when the mouse is hovered. When browsing with a touch device, the mechanism automatically changes to display the Hover effect when pressed for the first time, and the actual click action is performed when pressed a second time:
Another similar approach is the purchase button in the App Store, which uses a two-stage button to prompt the user for "more additional information." For example, it originally displays the price of the App. When the user clicks once, the appearance of the button changes and the description changes to the actual action that will be performed after pressing it again (purchase and download and installation). Of course, it also has a two-stage button design that prevents users from accidentally touching the app and purchasing the app.
I don’t know if it is for the sake of design consistency. Although accidental button presses are less obvious on the desktop, in fact, the OSX desktop version of App Stroe also designed this two-stage button, but iTunes 11 did not do this. Maybe it will be unified in the next version.
Use long press and slide to simulate the passing of the mouse cursor
However, the learning cost of this method is high: Generally, touch screen users are not familiar with this UI operation method. Moreover, when browsing the full page, it is quite laborious for the user to constantly press the touch screen and slide the whole screen. Fingers can also easily block the line of sight, which in turn blocks the information that is intended to be displayed to the user.
Therefore, this kind of long-press and sliding operation method is mostly used in games, and is mostly used to control a certain area (such as Angry Bird, Fruit Ninja and other motion-sensing games, or games such as Minigore that simulate traditional joysticks, etc.).
Provides special functions to simulate the effects of a mouse
Although touch devices do not have a mouse cursor, you can actually use a laptop to simulate a touchpad to simulate the effect of a mouse cursor. For example, the browser Puffin provides a "virtual touch pad" function to simulate the existence of a mouse cursor. But there are still shortcomings: the design of the virtual touch panel seriously affects the intuitiveness and smoothness of the touch device experience.
Browsing methods on different browsing devices are different, so it is natural to take various situations into consideration when designing. How to arrange the Hover effect on such a simple web page on a touch device? Is it to change the layout method so that Hover information can be displayed directly? Will using two-stage clicks affect the user's browsing experience? Or maybe the display information of Hover is not important at all, so would it be better to discard it directly?
There is no perfect solution that can be applied to all designs. When designing, everyone still has to choose the most appropriate solution for the product based on the characteristics of their own product. "Touch devices may not necessarily change the world, but they will change some designs."
