Web site, application interaction Design Analysis: Disabling status two or three things

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

Objective

Disabled, as the name implies, means that the meaning is not available. There is one disabled, which must correspond to one available. Whether it's a form, a complexity management interface, or a step-by-step guide, it's possible to have a disabling state in all of these scenarios, and how to properly use the disabled state to make it an experience plus rather than a minus, which is what designers need to think about and practice. Throw some bricks here and hope to discuss with you.

"This is not the point of the button here is very chicken, we can consider to remove?"

"The default release button, it does not matter, otherwise the user how to understand the product features?"

The disabled status can be seen as a direct manifestation of the external exposure of the application mechanism, when to show, when to hide, but also in the design of the controversial topics often encountered.

Alan Cooper has mentioned that activating and banning menus helps the user understand what the menu reflects and helps the menu become a better teaching tool. For example, our common Photoshop selection menu:

As the most complete set of functions in the software, the menu should present all the functions, which is the first prerequisite. Under this premise, we will demonstrate which operations are available and which are disabled according to the process of specific interaction. Think about it, and in the various software we see every day, you're not unfamiliar with the banned items in the menu.

The menu has a good base friend called a toolbar. As an intuitive, fast function presentation, the privilege of appearing on the toolbar is generally the most commonly used function in software, providing users with fast, efficient operation of the portal.

toolbar to the user's expectations should be stable, reliable, users will unknowingly to the layout of the toolbar to learn, remember the location of common operations, the formation of the use of inertia. If a button sometimes disappears, sometimes, the user will be confused and not conducive to improving the efficiency of the interface operation. Especially when there are a lot of operations on the toolbar, the benefits of a fixed position are obvious, such as the Ribbon interface, which includes at least 5 buttons under each subpanel:

It appears that the default is best for actions in menus, toolbars, whether or not they are disabled. However, when there are fewer operations, designers will still be thinking and improving.

Browser, a software that everyone can not leave behind, forward and backward is one of its core functions. In this case, Chrome and Firefox took different design ideas. The chrome forward and rewind buttons hold the position to the left of the address bar and determine whether the button is displayed as available based on the current page's access path, as shown in the following illustration:

The advantage of this design is that the user will be able to understand the position of the function at the first sight, which facilitates the formation of operational inertia. Although in some cases the forward button will change from a usable style to a disabled style, while the user is browsing the web with almost full attention to the content of the page, the state changes here are not disturbing.

In Firefox, there is only one back button to the left of the address bar when you open a new page. After clicking the Back button, an available forward button slides out quickly. That is, it appears only when the current feed button is available, and it is hidden when it is unavailable.

If the user opens a new page in the mode of opening a new window, browse to close the window, the Forward button does not appear, if the user in the same window to open the page, and then click Back, the Forward button quickly slide out, the animation of the interface to allow it to have the function of the interpretation of properties, will not cause confusion to the user understanding. When the page cannot continue to move forward, the Forward button becomes disabled instantly and quickly slips away, and the user has no chance to click. As a result, the space on the left side of the Firefox address bar in most cases is visually lightweight, with only one of the most important back buttons, and in situations where the forward button needs to be used, the operation is smooth and natural.

There are no judgments about the pros and cons of the two designs, and both Chrome and Firefox have their own answers to the question of how to handle the forward button. Firefox uses this bolder design, and I think the use of the forward button frequency, the use of scenes have a close relationship. In another way, Chrome doesn't apply to Firefox: There are 3 buttons on the left side of the chrome address bar, and if the middle button is sometimes hidden, the last refresh button's position cannot be fixed, and it appears to the user that the "toolbar" is clearly beating, Firefox's refresh button is on the right side of the address bar, and there is no such problem.

Above is an example of a layer of operations. What about multiple layers? If you are faced with a list of information, a set of actions for all lists, and a new operation for each piece of information, you must consider the hidden design.

Gmail mailing List page when messages are not selected, the toolbar includes only 3 features for the list. When you select a specific message, the action for the message appears in the toolbar, and the original action disappears. This can avoid a large number of disabled messages when not selected to put the user on the interface burden, but also to ensure that the toolbar in the default state of refreshing simplicity. However, this design also brings a certain learning costs to users, novice users in the initial use of the need to explore some to understand the difference before and after the message selected.

Dropbox also uses a similar design, the default interface in the table title bar does not render any action, click to select the file, the specific action displayed on the toolbar.

When we are faced with less complex operations, such as publishing forms on the web, submitting processes, and so on, the choice of disabling status requires more nuanced thinking. Here are some design suggestions for reference:

1. Need to boot user action, throw off disable

Let's take a look at the release button on Sina Weibo. This button is displayed as a clear, clickable red if there is text in the Publish box, and if there is no text in the Publish box, the button appears dimmed, and when clicked, the background color of the post box is blinking red, prompting the user to enter the content.

The design to be expressed here is very clear, both input text before you can publish. However, when the release button appears to render an unreachable gray, the mouse button is still hand-type, the system also gives the feedback on the interaction, so that the button is given a multiplicity of meanings, in the gray can also be clicked, to the user caused confusion in understanding. According to the user's knowledge, if a button looks clickable, it should actually be clickable. If it does not look like it can, it should not be a point.

Facebook's status release button is not designed to be disabled, and when the input box is empty, clicking the Post button will not change the page.

Tencent Weibo's release button also uses the same design, if the content is empty, click the button, in the lower right corner of the input box will be the orange text prompts the user input content.

For micro-blog or SNS Web site, publishing status is the most important to write operation entrance, the button in the interface can play a good guiding role. In this case, is it simpler and easier to understand if the button is given a state?

2. Explicitly distinguishing between disabled and available styles

If an operation does require a disabled state, it is visually necessary to distinguish between the available and disabled styles explicitly. To give a counter example, when Tumblr publish text, the release button in the lower left corner is hard to see what is available and when it is disabled.

In the figure above, the red circled part is disabled.

The image above is the state of the input text, the lower left corner of the publish can be clicked at this time, but the color of the button, stereo effect has not changed, only the text, and the brightness of the text and disabled only a small difference, in the relatively poor display can not be distinguished.

3. Give a proper explanation at the right time

When a change in the disabled state is abrupt for the user, consider designing a clear and understandable explanatory note. For example, Bing searches the home page, when a picture cannot be downloaded, the download button is dimmed, and when the mouse moves to the button, tips explains why the button is grayed out.

In the Setup window for OS x, the Advanced button is disabled by default. In this similar Setup window, OS x uses a lock switch in the lower-left corner to control advanced operations. For those critical system-level settings, you need to unlock them before you can change them.

4. Giving disabled states more possibilities

Disabling state is always reminiscent of cold system rules, but if you make good use of disabling state, message communication will be more effective. For example, when Twitter is being pushed, the tweet button in the commit process becomes disabled, while the loading animation appears on the left side of the button, expressing the action in the submission through a combination of two UI elements.

The new Flickr upload Image tool, click Submit, the button immediately become disabled, and interesting copy "Hold on There,tiger" also gives the interface a vivid sense.

Summary

Whether the disabled state is always visible depends on the functional properties of the operation in the interface that it belongs to. The most important thing is to ensure that the core function of interactive experience fluent, the user will not form the understanding of confusion, and then according to the specific interface environment analysis. If you need to show a disabled state, we must let the user know how the operation becomes available, and if you need to hide the disabled state, let the user naturally accept instead of "startled" when it appears. Further, if the disabled state is shown, try to avoid confusion between the style and the available state, make it clear that you can point to and not point, and give explanations and instructions when necessary, and don't let the user guess.

(This article originates from Tencent CDC Blog, please indicate the source when reprint)