Deep talk about the most basic control elements in software design

Control as the most basic element of the Organization interface, I believe we are not unfamiliar, today want to talk about this humble topic. The article from the real control transition to the software interface, and then use the three input method control as a practical case to explain the full text of dry goods, to collect!

　　One, the real world control

The bell rang, Xiao Ming immediately rushed home, after home to change the shoes in one hand to turn on the light, and then lay on the sofa will be the fan to the largest file. ”

Open the door into the house, toggle switch, adjust wind speed ... A series of actions in the door, lights, knobs are what we call the control. What 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:

-Available for Contact

-Can change the state of

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

-Harmless.

-It's not a hassle.

-With feedback

-Pleasure.

Corresponds to Norman's proposed three levels:

-Accessible +--> available for change of State (Usable)

-Harmless + effortless + with feedback--> easy to use (useful)

---> of Pleasure (engaged)

Accessibility and harmlessness are interdependent-when we are children we are taught to be alert to dangerous signals: poisonous, sharp, hot ... When using knives, we instinctively hold the blade rather than the edge, because a rounded, harmless object is more likely to attract active contact.

What about the so-called three levels? Please look at the following three kinds of cleansing oil:

-also 200ml of makeup remover, use Muji (left) when the entire bottle needs to tilt to pour out (a bit troublesome, but still available);

-DHC (medium) use small pump to squeeze gently downward, the operating cost is lower and more convenient (temporarily do not consider the demand for extrusion, relatively easier to use);

-Fancl (right) In addition to the press-type extractor, it comes with a small widget that is stuck to the top--it takes into account the woman taking make-up remover out of the scene, gracefully solves the problem of accidental overflow, 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, such as the bottle caps of soda cans 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 open for the first time. This relative difficulty implies: "This is a new bottle of soda, no one has drunk, can be assured to drink" (with feedback);

In order to increase the friction, the outer side of the cap is often printed with regular concave and convex lines (effortless);

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 (which can change the state).

The opening process is very brief and is only 2-3 seconds before and after, but it can bring a very enjoyable experience to the drinker. Cola, Sprite and other beverages ads the most common thing is: no matter how the plot changes, "open cap" lens must have!

If you're interested in discovering more physical controls, but not for a while, I strongly suggest you go to Ikea: All kinds of controls make people look excited!

　　Second, the software World control

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

At first, the UI designer used the metaphor method to imitate various icons and controls based on realistic objects and operations, and slowly, and using the unique features of the software, summed up and abstracted more intuitive and efficient controls. The "tab tag" in the daily life is used to classify, and the "tab" in the software can also effectively expand the interface space in addition to organizing content and fast indexing.

If divided by function, the control can be grouped into the following 5 categories:

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

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

-Information display: Balloon reminders, loaders, progress bars, launch pages, ToolTips ...

-Container: Window, Tab tab page ...

-Navigation: bread crumbs, navigation bar, page splitter ...

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

　　1. The Admission 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 vacancy information vs. label + input box in form

-Blank spaces can be filled in, the size of the white space as appropriate vs text box to enter information, depending on the type of information to choose a different width (such as input age, URL, code, etc.)

-Move the tip of the pen to the empty space before writing vs click the text box, and the cursor flashes at the start position

-Overflow when content is excessive vs. Auto indent when input information exceeds width

The interesting thing about software interface design is that the work model does not have to be physically restricted, and then the input box can play this way:

-Not filled in: The box with a lower color saturation text/icon prompts the program to expect the content;

-The mouse is slippery: The pointer changes to a cursor, implying that the input operation can be performed;

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

-Input: The border continues to highlight, the password is not clear text display, real-time feedback password security level, effectiveness;

-Input complete: highlight disappears; the input has a high color saturation, which can quickly distinguish between blank and filled.

In addition, the information in the input box can also select different alignment on demand, and on the right, the "x" icon is used for quick removal of the content, and it can be based on the user input Keywords Real-time association ...

　　2. Abstract easy to use check box

radio buttons and check boxes are not able to find a corresponding prototype in real life. They are not straightforward components that must be learned, and are very easy to learn, and will not be forgotten once they are used, and are typical examples of using "idiomatic" design:

-5 basic states: Not selected (available), checked (available), unselected (disabled), checked (disabled), focused

-2 Directions: check boxes often appear in multiple combinations, and are arranged in the following ways:

Portrait: Suitable for the case that the choice content is more or the information length difference is big;

Advantages: Strict alignment, beautiful layout, a short mouse movement when the selection of multiple;

Disadvantage: Occupy more space, the form of elongated.

Landscape: Applies to situations where the number of options is large and the content is brief;

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

A. If the width of a single option is fixed, how can the excess information be displayed?

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

Interaction

The small square has a higher precision for the pointer to aim at. For ease of operation, the marquee and text are bound to enlarge the click Area while visually providing the user with the expectation: for example, when the mouse is slipping, the two are fed as a whole.

In addition, when users select multiple, what is the way to reduce the number of clicks, quickly select more than one? Box selection in Windows selects multiple files at once, and holding down the left mouse button in Photoshop allows you to quickly hide multiple layers.

　　3. The key to the mixed

The important position of the previous two controls in the UI world is beyond doubt, and there is a lot more to it than that.

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

Definition: A choice or state representing two mutually exclusive types

Characteristics:

1. Indicates a binary state

2. Usually contains labels

Apply to: Let the user select one of the two options, such as On/off,yes/no

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

This confusion is similar to the early "Chinese and English switching" of the mobile Input method: When using the full keyboard, I have been unable to determine the language that will be entered. The "English" on the toggle button means:

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

A lot of times when you send a message, you quickly press a number of letters before you react. The current English state. Then you have to delete the typing, switch to Chinese, and then re-enter it with frustration. Later, many manufacturers have been optimized for this:

-Sogou: Switch The language when there is toast prompt state, switch button to " English /medium" style, highlighting the current language, weakening the click of the language after the operation;

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

-Google: The old version of the Use of tab to switch in English, the new version of the "Earth" icon can be directly switched to the original English input method, the cancellation of the Chinese and English toggle button.

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

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

2. Use the appropriate mental model. Speaking of this, we have to mention the magical uses of some words in Cantonese: the cessation of the energy-consuming target people often call it "put out " , such as "put out the telephone", "Turn off the computer", "Stop idling engine"......"out" is a visual text, so that the listener seems to see such a picture Press the button after the computer began to exit the process, until the end of the screen darkened, led also out. The design of the CapsLock key on the MacBook keyboard coincides with the "extinguish" mental model, and many of the key visual designs now use similar metaphors.

Although the key has been widely used in the software interface, but I understand that a considerable number of people have access to obstacles, how do you see it?

　　Third, continue to drill down the control

Interface design practitioners need to take the time to understand the history of the birth of a graphical interface and the changes in different versions of controls used by users. In our company, each new designer needs to complete a task: Copying the core controls of different platforms.

Perhaps you will say: Axure, Sketch control has been very rich, why do you want to repeat it?

Indeed, the mainstream of the prototype software has been covered by most of the commonly used controls, a drag and drop, easy and simple. But it is too easy, too handy, so many designers in the eyes of the control is so natural. It is often said that interactive designers should carefully read the interactive guide of different platforms, but how many people have read the translation or "essence" on the design?

Ever wondered why Android's navigation bar menu should be placed at the border? Is it the application of the Fitzpatrick theorem? Why is the left side and not the right side? call out menu operation mode, transition color change, jump animation details is based on what consideration? In the process of copying carefully, Taste the visual hierarchy of controls and the implicit cognitive psychology, and think about why it can be widely used? Why can we get user approval? Is there any other place that is not satisfactory? (from 4.x to material design specifications are constantly being adjusted)

Our development is the Internet marketing tool for enterprise customers, which needs to monitor and quantify the effect of each node in the whole process marketing in real time. In the case where the data report occupies most of the screen space, it is also ensured that the operator/optimizer can easily and quickly use rich functionality for data analysis. This requires the designer to the mass function of reasonable integration, and in a very limited space to organize the layout. The finer elements in the product are considered, each module is carefully arranged to truly focus on the most core user scenarios.

The new RTB ad campaign in the system can be targeted from a number of dimensions of the population, the following is a geographical directional delivery of a prototype scheme, which mixes 7 kinds of basic controls:

1, List

-The use of Zebra row grouping, so that users do not confuse rows and rows of data (Gestalt similarity and sealing principle);

-click on the first column of the Bold option, you can quickly select a number of provinces and cities in the group;

-The provinces on the right divide by aligning and leaving white instead of vertical bars.

2, Pull-down menu: Once thought of using the open key to express inclusion/exclusion, but ultimately decided to select 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 after entering the search status (figure)

4, Tab bar

-Add "or" copy of the label to eliminate the ambiguity of "one more choice";

-The selected number is indicated at the top right of the label when the option is checked.

5, Text button: To provide the city level, the election, empty the shortcut options

6, check box

-Distinguish three states: Not selected, partially selected, all selected, partly selected on the right side of the description of the proportion;

-The provinces with subdivided cities and regions use different color distinctions, implying that the user has a level two menu.

7, embedded in the bomb layer: mouse over the option to display

Other options include: Tree table + Alphabetical index, double panel selection view ... These to B products have established business logic and a relatively complex information architecture, the design process can not be arbitrarily to do subtraction. The boring copy training is a sharpening process, but Maito, the designer only has a deep understanding of the control to make it continuously processing and optimization, and then designed to meet the business needs of complex controls.

　　Four, write to the last

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

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

We have memorized many idioms and verses in our students ' time and expect to be able to add "sparkle" to our writing, but we also know that there is a class of low division compositions called "Rhetoric, Words and nothing". Interface design is also so, familiar "control dictionary" only means that you can flexibly invoke the appropriate control patchwork form, after all, can not make the popular design.

Imagine that when a user interacts with a machine, the media is no longer the keyboard or mouse, when the user can exchange data only by encoding, or even without a screen (say, 10086 of the Voice menu) ... What should the designer do?

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

(If you are also keen to find simple and elegant solutions for complex problems, BIDDINGX design team needs you: kityee@sunteng.com)