Stream design in mobile applications

Stream design eyes and finger tracking in mobile apps

Mobile scenarios

As Application designers, we often design applications based on their own logic, and immerse ourselves in the creation of pages and prototypes. In most applications, users' eyes and touch are the main participants, such as user input and output in the human-machine-environment, interactive channels mainly include visual input and touch output. To improve the user experience at the perception level, we can focus on the user's focus shifting process on the interface, at the same time, we follow the traces of users' fingers to find the traces of users' direct operations, so as to design our applications.

Here we will propose a stream system framework and describe how to improve the user experience.

A stream system with eyes and fingers Circulating

In the process of interaction between users and applications through eyes and fingers, there is a stream system as shown in figure-the user's visual channel receives a vast majority of information about the interface, the visual focus (watching points) it is the carrier of user information processing. After users continue to pay attention to the content, they will leave a series of visual focuses. the flows of these visual focuses on the interface are called line of sight flows. The user visually obtains the input information and responds to the operation on the application interface. The contact points of the operation on the interface form contacts. In a task, continuous contacts form an operational track, which is called an operational flow. The user inputs the application through contacts, and provides corresponding feedback on the application interface. The user receives information through the visual focus and determines the next contact operation. This is a cyclical process of the stream system. Most interactions are composed of these visual focal points, contacts, and streams between them.

Composition	Type	Target
Node	Visual focus	Clarify information and functions
	Contacts
Stream	Vision → vision	No worries, no worries Effortless, natural intuition
	Operation → operation
	Vision → operation
	Operation → vision

The visual focus in the stream system contains the information that the application highlights to the user. It captures the user's visual attention, and the contact is responsible for the user's input interface to the application, is the embodiment of direct operations on mobile applications.

A good application design should be able to highlight the core content in a timely manner each time, and the visual focus is transferred smoothly without the need for users to scan back and forth multiple times; the operation contacts do not need to be rotated or scaled repeatedly. The flow track between the visual focus and contacts is smooth, and there is less interaction resistance, so you don't have to think about it. So how should we design it to make the two tracks smoother?

Next, we will elaborate on the visual focus, contacts, and the stream between them, and strive to provide some different ideas in the detailed design of the application.

GRASP users' visual focus

The formation of sight streams comes from the transfer mechanism of visual attention. In addition to active attention, visual attention is easily transferred passively. The following table lists the causes of Visual Attention transfer. The larger the comparison, the easier it is to transfer. By comparing the differences between these dimensions, you can easily shift the visual focus, which is also the basis for the design of interface guidance.

Visual focus needs to be applied to the focal point of information. How to make users more clearly see what users want to see, or what products users want to see, Interaction designers need to consider what the focus is, rather than just the logic structure. For example, in the left diagram, the traditional design style uses the background color of the title and the font to make the user's visual focus more focused on the title, because the logic seems clearer. However, if you prefer to focus on the content rather than the title, you can highlight the content by distinguishing the content from the prefix and prefix relationship of other content in the right image. CATEGORY search is more suitable for the former, because you need to focus on the title to quickly locate the information you need.

Contact Area of finger

Contacts are the embodiment of direct control of mobile applications. On the touch screen of mobile devices, most of the guiding operations and operation feedback are visually assumed without block sensing and tactile feedback of physical buttons. Studies on many users show that the light orange area is the heat Area of the right thumb, and the visual click area should not be less than 44px. Due to the parallax relationship, the actual operation area is slightly larger than the visual area and is down.

It is the design of a Sudoku game. It deliberately isolates the visual focus and contacts, designs an affinity circle area for the touch, and reduces the problem that the visual focus is blocked by fingers, considerate and considerate.

The click contacts actually continue the PC interaction mode, but lack the PC-side hover.
Status. To ensure that the user obtains the information of the click result, you can split it into two clicks. For example, to download an app in the IOS market, the price is displayed first. After you click the price, the button changes to download, and the information is confirmed by adding a click. In order to prevent point errors, the better way is to change to the contact of the sliding gesture. Generally, sliding requires a certain distance to be considered as an operation. For example, iPhone
Unlock mode, only sliding from left to right can unlock the screen lock status, such as by mistake is unable to complete this operation. At the same time, the user's sliding process, through the slider control sense, has enough psychological expectations on the operation results, can bring a smooth experience.

This article is excerpted from mobile design.

Fu Xiaozhen Hu jiazhao
Zheng yuan

Published by Electronic Industry Publishing House