Parsing the most basic controls in the software design makes

Control as the most basic elements of the Organization interface, I believe we will not be unfamiliar, today want to talk about this humble topic. The article from the reality of the control transition to the software interface, and then use the three input method of the control as a practical case explanation, full-text dry, to receive!

First, the real-world control

"After the bell rang, Xiao Ming immediately rushed home, home after a change of shoes in one hand to turn on the light, and then lying on the sofa will be the fan to the maximum gear. ”

Open the door into the house, toggle the switch, adjust the wind speed ... A series of actions in the door, lights, knobs are what we call the control. What exactly is the control? Literally, a control (Widgets/controls) is an object that can be controlled by direct manipulation.

If you start with a specific property, the control should have the following two basic characteristics:

– Accessible

– Can change the status of

The friendly, easy-to-use controls should also be:

– Harmless

– Not laborious.

– Feedback

– A pleasant

Corresponds to the three levels proposed by Norman:

– Accessible + can change status--available (Usable)

– Harmless + effortless + feedback--easy to use (useful)

– Pleasant-to-attract (engaged)

Accessible and harmless interdependence-when we are children we are taught to be wary of dangerous signals: poisonous, sharp, hot ... When using knives, we instinctively hold the blade instead of the knife, because rounded, harmless objects are more likely to attract active contact.

What about the so-called three levels? Take a look at these three types of cleansing oils:

– also 200ml of cleansing oil, use Muji (left) to tilt the whole bottle to pour out (a bit of trouble, but still usable);

–DHC (medium) Use small pump gently downward squeeze, the operation cost is lower and more convenient (temporarily do not consider the requirements of the extrusion volume, relatively easier to use);

–fancl (right), in addition to the push-on extraction device, comes with a small part that snaps to the top--it takes into account the scene of the woman carrying cleansing oil, gracefully solves the problem of accidental overflow, and the small parts make people feel safe and intimate.

Note: The above are all Japanese international brands, not advertising.

We also have a lot of good controls around us, like the bottle caps that are everywhere:

When we get a bottle of soda, we will naturally twist the round plastic cap (accessible + harmless); Based on past experience, it takes a lot more effort to start the first time. This relative difficulty implies: "This is a new bottle of soda, no one has been drunk, can be assured to drink" (feedback); In order to increase the friction, the outside of the cap is often printed with a regular bump (not laborious); When the lid is successfully twisted, the foam rises rapidly and emits a "ci--" sound (with feedback + pleasure) The last soda can be poured out of the bottle (can change the state).

The whole opening process is very brief, just 2-3 seconds before and after, but it can bring a very pleasant experience to the drinker. Coke, Sprite and other beverage advertising the biggest common denominator is: no matter how the plot changes, "open cap" lens will be!

If you are interested in discovering more physical controls, but not at all, I highly recommend you go to IKEA: All kinds of controls make people look excited!

Ii. controls in the software world

People are very intelligent animals, always through the extrapolate method to reduce the cost of work. From the input command line DOS to Windows using the graphical interface, real-world controls are cleverly applied to the software interface.

At first, the UI designer, by means of metaphor, modeled various icons and controls with realistic objects and operations, and slowly, using the unique features of the software, summed up and abstracted more intuitive and efficient controls. The "tab tag" in daily life is used for categorization, while the "tab tag" in software can effectively extend the interface space in addition to organizing content and quick indexing.

If divided by function, the control can be categorized into the following 5 classes:

– Trigger Action: button, scroll bar, handle ...

– Data entry: text box, check box, slider ...

– Information display: Balloon alert, loader, progress bar, start page, tooltip ...

– Containers: Window, Tab tab ...

– Navigation: breadcrumbs, navigation bars, paging ...

Among them, the Operation class and data entry class have a richer interaction, select a few more representative:

1. Input box

We can easily associate the prototype of the input box because it retains the shadow of the real world, both in shape and in operation:

– Fill in the vacancy information vs. "Label + input box" combination in the form

– Blanks can be filled in, the size of the white space depends on the situation vs text box can enter information, depending on the type of information to choose a different width (such as age, URL, code, etc.)

– Move the nib to the empty position before you pen vs. click the text box and the cursor flashes at the beginning

– Overflow vs input information is automatically indented when too much content is out of width

The amazing thing about software interface design is that the work model doesn't have to be physically constrained, and then the input box can play like this:

– When not filled in: box with a lower color saturation of the text/icon hint program expected content;

– Mouse is out of date: The pointer changes to the cursor, suggesting that the input operation can be performed;

– When the mouse is focused: The border is highlighted, the message is cleared, and the cursor flashes;

– Input: The border continues to highlight, password is not clear, real-time feedback password security level, validity;

– Input complete: Highlight disappears, input content color saturation is high, can quickly distinguish between incomplete and filled.

In addition, the information in the input box can be selected according to the different alignment, the "x" icon is arranged on the right to quickly clear the content, and can be based on the user input keywords real-time association ...

2. Abstract useful check box

Radio buttons and checkboxes are not able to find the corresponding prototypes in real life. They are not visible components, they have to be learned, and they are very easy to learn, and once they are used, they are not forgotten, but are typical examples of "customary use" design:

– 5 basic statuses: Not selected (available), checked (available), unselected (disabled), selected (disabled), focused

– 2 Directions: Checkboxes often appear in multiple combinations and are arranged in the following ways:

Portrait: Applicable to the case that the choice content is more or the information length difference is large;

Advantages: Strict Alignment, the layout is beautiful; When you select multiple, the mouse movement distance is short;

Cons: Takes up more space and lengthens the form.

Landscape: Applicable to the number of options and the content of a brief situation;

The advantage is a small footprint, the disadvantage is that the distance between options, but also need to consider some of the details of the problem:

A. If the width of a single option is fixed, how does the information that is exceeded appear?

B. If not fixed, how to avoid the layout confusion?

Interaction

Small squares require a higher degree of accuracy for pointer targeting. For ease of operation, the marquee and text bindings are used to expand the area of the click, while visually providing the user with the desired: for example, when the mouse is out of date, the two as a whole feedback.

In addition, when the user chooses multiple, what method can reduce click, quickly select multiple? In Windows, "box" selects multiple files at once, holding down the left mouse button and swiping in Photoshop to quickly hide multiple layers.

3. mixed with the key

The important position of the previous two controls in the UI realm is beyond doubt, and there is a lot of controversy over them.

The description of the switch in the Apple Watch interaction Guide is:

Definition: represents two mutually exclusive choices or states

Characteristics:

1. Indicate binary status

2. Usually includes a label

Applies to: One of the two options selected by the user, such as on/off,yes/no

My first contact switch was on the mobile app interface, and for a very long time it was confusing: is it a state or an operation?

This confusion with the mobile phone input method early "Chinese and English switching" somewhat similar: when using the full keyboard, I have been unable to determine the language will be entered. The toggle button on "English" means:

A. "OK, now start typing in English." "or B." To change the English input method please point me! ”

Many times when the message is sent, a quick press of multiple letters will reflect the current state of the English language. Then you have to delete the type individually, switch to Chinese and re-enter it again with dismay. Many vendors later optimized this:

– Sogou: Toggle language with Toast prompt state, toggle button to "English/Chinese" style, highlighting the current language, weakening the language after the click operation;

-Baidu: In the space bar display the current input method "Baidu Pinyin", click on the left side of the "ABC" can switch to English, after the switch button copy into "return";

-Google: The old version of the use of the tab switch in English, the new version click on the "Earth" icon can be directly switch to the native English input method, canceled the Chinese and English toggle button.

In general, it is a good choice to indicate that the binary status is open (better than a single checkbox), but when using it you must clearly distinguish between "state" and "action", and I summarize the key two points:

1. Standardize label copy. The attributes of verbs and adjectives should be done at a glance, such as using "open" and "opened", instead of "opening" the Table action and "open" table state;

2. Use the appropriate mental model. When it comes to the use of certain words in Cantonese: the need to consume energy to stop the operation of the object of the people commonly known as "put out", such as "put out the phone", "put out the computer", "Stop the key"......"out" is a visual text, so that the listener seems to see such a picture-press the button after the computer Until the last screen turns black and the indicator lights out. The design of the CapsLock key on the MacBook keyboard coincides with the "out" psychological model, and many of the key visual designs are now using similar metaphors.

Although the key has been widely used in the software interface, but I understand that there are still a considerable part of the people have the use of obstacles, how do you think?

Third, continue in-depth control

It is necessary for interface design practitioners to take the time to understand the history of the creation of graphical interfaces and the changes in different versions of the controls used by the user. In our company, every new designer needs to complete a task: Copying the core controls of different platforms.

Perhaps you will say: Axure, Sketch's own control is very rich, why do you want to do it again? Isn't that asking for trouble?

Indeed, mainstream prototyping software has covered most of the commonly used controls and is easy to drag and drop. But it is too easy, too handy, so many designers in the eyes of the control is so taken for granted. It is often said that interaction designers should carefully read the different platform of the interactive guide, but how many people have read the translation or "elite version" of the battle design?

Ever wondered why Android's navigation bar menu should be placed at the border? Is it the application of the Fitzer theorem? Why is it left rather than right? What is the basis for the operation of the menu, the color change of the transition, and the animation details of the jump? In the process of copying carefully, taste the control of the visual hierarchy and implicit cognitive psychology, thinking why it can be widely used? Why can I get user approval? Are there any unsatisfactory places? (from 4.x to material design specifications are constantly being adjusted)

Our company develops the Internet marketing tools for enterprise customers, and needs to monitor and quantify the effect of each node in the whole process marketing in real time. While the data report occupies most of the screen space, it also ensures that the operator/optimizer can easily and quickly use rich functions for data analysis. This requires the designer to properly integrate the massive functions and organize the layout in a very limited space. The finer elements of the product are carefully thought out, and each module is thoughtfully arranged to truly focus on the most core user scenarios.

Create a new RTB campaign in your system you can target people from multiple dimensions, and here's one of the prototypes for Geo-directed delivery, which mixes 7 basic controls:

1, List

– Zebra row grouping allows users to not confuse data between rows and lines (similarity and closeness of Gestalt);

– Click the Bold option in the first column to quickly select multiple provinces and cities within the group;

– The provinces on the right use the alignment and leave white instead of the vertical line to separate.

2, drop-down menu: I thought about using the key to indicate inclusion/exclusion, but decided to choose the drop-down menu. In addition to the ambiguity of the switch operation, the drop-down menu is more conducive to expansion, considering that more rules will be added later.

3, search: Enter the keyword, press ENTER key to enter the search status (figure)

4, Tab bar

– add "or" to the copy of the label, eliminating the ambiguity of "multiple choice One";
– When the option is checked, the selected number is indicated at the top right of the label.

5, Text button: Provides quick options for city level, reverse selection, and emptying

6, check box

– Distinguish three states: unselected, partially selected, all selected, partially selected on the right side of the description;
– Provinces with subdivision cities and regions use different color distinctions, suggesting that users have a level two menu.

7, embedded layer: display when mouse over options

Other scenarios include: Tree table + Alphabetical index, double panel selection view ... These to B products have established business logic and a relatively complex information architecture, which cannot be arbitrarily subtracted during the design process. Boring copy training is a sharpening process, but Ax, designers only have a deep understanding of the control to continue processing and optimization, and then design a complex control to meet business needs.

Four, write to the last

"Designing Interface" book contains a large number of interface design patterns, interactive design circle estimate is a manual, the author Jenifer Tidwell in the book "Control" analogy to "design vocabulary", he said:

Expanding your vocabulary can help you improve your ability to express yourself in a language, and expanding your "design vocabulary" helps you to design better. But remember, the real art of interface design is to solve the right problem.

We all recite many idioms and verses in the students ' time, expecting to add "sparkle" to the writing, but we also know that there is a kind of low-score composition called "piling up words and saying nothing". The interface design is also the same, the familiar "control dictionary" only means that you can flexibly call the appropriate control patchwork form, after all can not make a deep-rooted design.

Imagine that when the user interacts with the machine is no longer a keyboard and mouse, when the user can only be encoded for data exchange, and even no screen (such as 10086 of the Voice menu) ... What should the designer do?

Let's all go back to the nature of design.

Article Source: Excellent set

Parsing the most basic controls in the software design makes