Hidden behind the interactive design

What is layman's first impression of interactive design? Draw a wireframe? A draft?

Indeed, what you see as interactive designers ' day-to-day work is a bunch of wireframes, and that's what it seems to be.

In fact, interaction designers do much more than that. To think deeply, information architecture, interface and process are the problems that designers need to consider. Next, I want to talk about the interactive design I understand.

/

Two of the most important elements of interaction design: information & interaction

1. Information

People face so much information every day, in the clutter of information to filter out the value of users, presented to users, to help users make choices, guide users to complete the task. The filtering of information directly affects the user's use and cannot provide useful information when the user needs it, which will cause the task to go on. So information is the first element that interactive designers need to focus on.

2. Interactive

Once you have the information, you need to design how users interact with that information. The classification and layout of the information will affect the user's interaction with the information. After the user obtains the information, has reacted, has taken the action, the application also needs the two-way to give the sufficient feedback, assists the user to complete the task.

/

The above 2 elements, are reflected from the intuitive feelings of users, that is, often reflected in the user interface. We can call it "visible interaction design".

Specific forms include:

Information architecture: Classify the filtered information, host the information through the page, and plan the level of the Information (page)

Interface design: The layout of information on a page

Process design: A task involves the page information in tandem, so that the task to form a linear flow of the relationship

The above three key points, is the basic requirements of interactive designers, in many cases, non-professional can also do 7788, but there is a part of the interactive design, is not intuitive to see, perhaps users will slightly feel, but he always inadvertently make users more fluent use. We can call it "invisible interaction design". These invisible interactive designs are also easily overlooked by primary interaction designers.

/

Mobile Internet is now developing rapidly, and mobile products are more focused on these unseen interactive designs. Because the use of mobile applications, network environment, the use of mentality and users in the use of Web products are greatly different. So before you understand these unseen interaction designs, you need to have a certain understanding of the situation of mobile applications.

1. Use Scene

Users are using mobile products that are likely to be used in public places with a lot of outdoor people and need to pay special attention to the privacy security of mobile application design.

Users may be at home, in bed, in the toilet, with a variety of gestures to use products, so the convenience of interaction and fault tolerance should pay special attention to

2. Network Environment

The network environment is a critical point in the invisible interaction design. Users will use the product in 2G, 3G, WiFi or even without networking, so it is the most important consideration for mobile product interaction designers to make reasonable interaction design for various network environments.

3. Use mentality

The existence of the product is to solve the user's problem, while the mobile product is the user's personal tool, when the user needs, can immediately start to operate, need fast, direct, effective, the user does not like waiting. Research results indicate that:

/

In the special environment of mobile products, "invisible interaction Design" is more important than web products, especially for the network environment and the experience of waiting for the user needs special attention

Here's a discussion of "invisible interactive design."

In general, it boils down to three big points:

1. Loading mechanism

2. Refresh mechanism

3. Caching mechanism

/

/

Loading mechanism

Typically, most of what we use is the Web app, which works like this

The user operates on the client interface, the client sends the request to the server, the server processes the request, returns the data to the client, and displays it to the user

In which, the client and server interaction process, the user is not aware of, and he does take time, in different network environment spent time will also vary, how to let users have a friendly experience in this period of time? This time the load process works.

/

The key to the load process can be summed up as:

1. Let the user perceive the product is trying to work for him

2. Allow users to have basic psychological expectations of the length of time to wait

3. Let the user get more fun in the boring waiting

/

The progress bar is a good design for the loading process

Dynamic load progress indicates that the product is working, the overall progress and current progress can make users understand the situation in time, so that users can predict the time based on this information, with psychological expectations

Interesting progress bar design or show some features in the loading process hints (often used in games) can effectively reduce the user's anxiety when waiting, but also effectively improve the user's tolerance

/

The progress bar is the product of the Web product age, and there is another loading design that loads the icon

Because the amount of data requested by the mobile product is not large, the progress bar is often completed in a flash, in which case, the load design is simplified, and many mobile products use the load icon to express the loading process.

These are two more commonly used loading methods, which will specifically describe their use in conjunction with mobile products

/

page loading mechanism

The information of the mobile product is carried by the page, and the design of the loading scheme of the page is an important problem that the interactive designer faces.

Scheme one: single page whole load

This load is relatively simple, generally used in the page content is relatively single case, so directly after loading all the data and then display the content

Single page load failed state is also better to handle

/

Scheme II: Single-page block loading

This program is characterized by allowing users to gradually see the content, in this gradual process to reduce the user's anxiety psychology

which can be divided into, the module is related to the first load of the parent content, and then load child content

such as Youku, first load the column out, and then load the contents of the columns

There is no absolute correlation between the modules, can be loaded independently of the module content, according to the speed of the request of different display. This processing has a certain chance to let users do not completely brush out the situation of the data can find their own needs, such as the public comments, Taobao client

Frame fixed, content update, you can first display the frame, and then each module to load the data display, such as all kinds of iOS with its own applications, cloud music

This module to load the need to pay special attention to the state of loading failure, after all, each module is prompted to load failure, click Retry is a very bad thing, can be based on the priority of information to determine which data failed to adopt the default state, which data using failure tips

/

Scenario Three: cross-page loading

Parent pages & subpages or in the same app, fields between pages can be reused, and you don't need to reload new data when you load a child page

/

Scenario four: preload

This type of loading is characterized by the ability to predict the next behavior of the user while loading a page content, and to load the content for the next page he needs to use, so that he can get information immediately in the next operation without loading the wait.

Pre-loading provides users with seamless product experience, allowing users to use the product in the process of more direct flow, not interrupted feeling.

Specific examples are:

When browsing the atlas, when you see the first picture, automatically background load second third fourth picture, the user after browsing the first picture to switch to the second one will not have the process of loading wait

When browsing the news list, the content of each news in the background to preload, users choose to read a news, can immediately read the content

/

But this kind of solution needs to face many problems, the most direct is the traffic problem, because will automatically run off many users may not use the data traffic, so generally can be set in the WiFi environment to use this load mode. or set the loading rules, only the main content preload, and some of the secondary content can be used when the user really use the time to load, such as preload news body, you can only load text information, picture information Wait until the user entered the page before loading. The combination of preload and block loading is also widely used in various scenarios.

In addition, preload also takes time, he just does not display the client to the user, silently in the background operation just, need special consideration without loading the user to use the information of the situation, so in the preload design needs to consider another suitable for the general loading mode.

Pre-loading needs to be designed according to the specific scene, set good information priority, comprehensive consideration of the specific size of various types of information flow, the overall consideration of the way to preload, these are needed to be carefully analyzed and thought.

With the development of the network environment, preload will become the general loading mode of products, and the seamless experience he provides to the users greatly improves the usability of the product.

/

operation loading mechanism

In addition to the page's information needs to be loaded, the operation within the page is also required by sending a request record to the server

Solution One: Load Layer

After an operation, the pop-up mode of the hint layer, told the user is loading.

Modal hints are used to prevent users from doing other things in the process, causing current load errors. Due to modal hints and the possibility of a prolonged load due to network reasons, it is recommended to provide a "shutdown" operation to abort this load and restore the app availability status. The current floating layer can be transformed into a failure prompt when the load fails.

The modal hint layer is the safest way to do it, but he will make the user feel interrupted during the use.

/

Scenario Two: control loading State

This is done by combining the state of the operation loading with the style of the control, when the control is manipulated, the control is transformed to the load state, and the control cannot repeat the operation

Because this load is the control's own state, does not affect other operations, so users can also do other operations on the page, may cause multiple requests at the same time, increase the risk of loading failure, which is the disadvantage of this way, but this extreme case rarely occurs. After the request fails, you can match the toast prompt to inform the user of the cause of the failure.

/

Scenario Three: Background load

After the user operation, the client immediately feedback the successful operation, and then put the request to the background and the server interaction, the process of users do not need to understand, do not need to wait, under normal circumstances experience is very good.

But in extreme cases there will be some inexplicable situation, because it is the background logging requests and interacting with the server, so the actual request is successful client is not explained, all the success of the operation to show, this will lead to the user mistakenly think the operation succeeded, but in fact the next time to see the discovery is not successful So this kind of loading is based on the specific use of the scene to weigh the use of some important operations, suggest or use modal loading, for some small operation, such as point of praise, subscription, attention, can be used in the background loading mode.

/

/

Refresh mechanism

Refresh mechanism is also easy to ignore the problem of designers, reasonable refresh mechanism can make the product use more fluent

In general, the refresh mechanism has the following three kinds:

Scheme one: gesture Refresh

The goal is to refresh by pointing to the right of the left stroke of the screen, including some custom gestures of the browser product, such as a cross fold check, to refresh

The most common Drop-down refresh also belongs to a gesture refresh

/

Program Two: click Refresh

By clicking on a button to refresh the data, but now the presence of the refresh button has become an outdated performance, and in the mobile phone so small interface also need to make room for the refresh button, it will be very laborious. However, to avoid formalism, used just right is the essence of the design, this refresh scheme or on-demand use it.

/

Scheme III: automatic refresh

Automatically gets new data to the server and replaces old data with set rules, such as time, event rules. Use automatic refresh to consider whether the scenario is appropriate

Scene one-for frequently updated content, time-sensitive content, the user at a set time is not used, you can consider the next time you use, automatically refresh, push new content to the user

Similar to microblogging, news of this time-sensitive product, users do not open the product within 24 hours, the next time to open the user automatically update timeline

Scenario two-for a relatively stable page that doesn't often change data, you can consider setting a time rule, silently updating the data in the background and replacing the old data

/

/

Caching mechanism

The word "caching" is often heard in the Web age, but in mobile products, his importance is well received.

A diagram that explains what caching and caching does

"Cache" is to save already loaded data, and the next time you need to reuse, do not need to load to the server, direct access to local data

I understand that the "cache" can be categorized as follows

Temporary caching is often used in a function page to save the cache for each column. The same function will be the butt function divided into several columns, each label column content in this use can be saved as a temporary cache, in the function of the switch column, do not need to reload data, using the cache display. For users, when the use of seamless switching to browse, for the server, in a short period of time the data will be very few updates, so in general, to meet the normal needs of users, and to achieve a good experience

The temporary cache cleanup mechanism is to exit the feature module to clear the previous cache. That means that the next time you enter the module, you need to retrieve the data again

Most of the time we use temporary caching, because the information is really not that important, and does not need to be reviewed frequently, then for those we often use and often need to repeatedly view the information, we will take a fixed cache to save the local, convenient to read the next time do not need to request data to the server again

It is subdivided into caches that can be cleaned manually, and caches that cannot be manually cleaned

The first is our most common cache, which is used by almost all products. At ordinary times the user browses the article, the Atlas loading data is cached in this form the local, next time looks back this article, the Atlas does not need to load. Users can also manually clean up these caches and free up space.

But for some special scenes, such as some relatively fixed data, we do not want to start packaging into the app, which will take up too much capacity, resulting in a large product package, but also do not want to enter the page every time to load this information to the server, then how to do? The solution is that we can only load once the local, so the installation package will not be large, and will not be loaded later.

For example, some of the background of the page, relatively fixed infrequently replaced, so when the user first entered the page to load the background map and save the local, this cache is not clean, the next time you enter the page to read the local cache display.

This caching scheme is rarely used because the scenario is too small to be developed.

/

For these stored in the local cache, will occupy space, cell phone capacity is limited, the product is how to clean up the cache?

Familiar with manual cleaning, the general app will be in the "settings" to provide a clean cache function, a key to release space. In addition, it is best to design an automatic cleanup mechanism for apps.

This mechanism can be designed in two dimensions.

Time

Clean up the cache by setting a fixed time, or by setting the time flexibly according to the user's usage cycle. Each product's scene is different, the user uses the frequency to be different, when setting this mechanism needs to combine the actual situation to consider

Capacity

Generally set a capacity ceiling, using the design principle of the stack cache cleanup, overflow stack of old data will automatically clear

/

/

Summary

These "invisible interaction designs" are tangled in those details, but as an interactive designer, do not think that these are very small points, in fact he has a big article to do.

Refresh, loading, caching mechanism design, I do not know whether should be summed up in the Professional category of interactive designers, but as a user experience designers, these points more or less affect the user experience, we should give enough attention.

These mechanisms, in terms of independence, have existing patterns to refer to, but interaction designers should not be able to design them in a fragmented way, and they tend to be combined to make sense. The combination of different mechanisms, often magical, which requires designers according to the different scenes of each product to make special.

Source: http://uedc.163.com/11614.html