Shulou(Shulou.com)06/03 Report--

Flow design in mobile apps Eye and finger tracking

mobile scenario

As app designers, we often design with the logic of the app as a clue, immersed in the creation of pages and prototypes. In most applications, the user's eyes and touch are the main participants in dancing with the application, such as the user's input and output in the human-machine-ring, with visual input and touch output as the main interaction channels. In order to improve the user experience at the perceptual level, we can follow the user's gaze, pay attention to the user's attention focus shift process in the interface, and at the same time follow the traces of the user's fingers to discover the trajectory of the user's direct operation, so as to design our application.

Here we propose a framework for a flow system and describe how to enhance the user experience within this framework.

A flow system of eyes and fingers circulating

In the process of interaction between users and applications through eyes and fingers, there is a flow system as shown in the figure above-the user's visual channel receives most of the information of the interface, and the visual focus (fixation point) is the carrier of user information processing. After the user continues to pay attention to the content, a series of visual focuses will be left. The flow direction of these visual focuses in the interface is called eye flow. The user obtains the input information through vision, and performs reaction operation through the application interface. The contact point of the user's operation in the interface will form a contact point. During a task, successive contacts form a trajectory of operations, which we call operational flow. The user inputs the application through the touch point, the application interface makes corresponding feedback, and the user receives the information through the visual focus and decides the next touch point operation. It's a circular process of flow systems, and most of the interaction is made up of these visual focuses, these contacts, and the flow between them.

constitute

kinds

Target

node

visual focus

Clarify information and functionality

contacts

flow

Vision → Vision

without trouble or eye

Effortless, natural intuition

Operation → Operation

Vision → Operation

Operation → Vision

The visual focus in the flow system contains the information highlighted by the application to the user, which captures the user's visual attention, and the touch point is the user's input interface to the application, which is the embodiment of the direct operation of the mobile application.

A good app design should highlight the most important content in time every time, and the shift of visual focus is smooth, without the user scanning back and forth many times; the operation of the touch point does not require the user to rotate and retract the finger. The flow trajectory between visual focus and touch points is smooth, there is less resistance to interaction, and users don't have to think. So how do we design it to make the two trajectories flow more smoothly?

Next, we will discuss the visual focus, touch point, and flow between them, trying to provide some different ideas on the detailed design of the application.

Grasp the user's visual focus

The formation of gaze flow comes from the mechanism of visual attention diversion. In addition to active attention, visual attention is easily transferred passively. The following table shows the factors that cause visual attention to shift. The greater the contrast, the easier it is to shift. By comparing these differences in different dimensions, users can easily shift their visual focus, which is also the design basis of interface guidance.

Visual focus needs to be applied to the focal point of information. Interaction designers need to think clearly about what users want to see, or what the product wants users to see, rather than just describing logical structures. As shown in the figure on the left, the traditional design style will focus the user's visual focus on the title through the background color of the title and the bold font, because it seems to be more logical. But in the case of advocating content first, if you prefer to focus users on content rather than headlines, you can highlight content by distinguishing the spatial context of content and other content in the right image below. Category search is more suitable for the former, because users need to focus on the title to quickly locate the information they need.

Finger contact area

Touch is the embodiment of the direct manipulation characteristics of mobile applications. On the touch screen of mobile devices, there is no block feeling and tactile feedback of physical keys, and most of the guidance operation and operation feedback are undertaken by vision. Studies of many users have shown that the light orange area below is the hot area of the right thumb, while the visual click area should not be smaller than 44px. Due to parallax, the actual operation area will be slightly larger and lower than the visual area.

The above picture is a Sudoku game design, deliberately separating the visual focus from the touch point, designing a friendly circular area for the touch, and reducing the problem of the visual focus being blocked by the finger, which is thoughtful and thoughtful.

The clicked contacts actually continue the PC interaction mode, but lack the hover state on the PC side. In order to ensure that users get information about the results of the click, it can be split into two clicks. For example, iOS market application download, first display the price, click the price, the button changes to download, by adding a click to complete the confirmation of the information. To prevent mispointing, it is better to change the touch point to a sliding gesture, which generally requires a certain distance to be considered as performing an operation. For example, the iPhone unlocking method, only from left to right to unlock the lock screen state, such as error point is unable to complete such an operation. At the same time, in the process of sliding, the user has enough psychological expectation for the operation result through the control feeling of the slider, which can bring a smooth experience.

This article is excerpted from Mobile Design.

Fu Xiaozhen, Hu Jiachao, Zheng Yuanlong

Electronic Industry Press

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.