5 Visual guiding principles in interactive design

Vision is the first sense of human being, it plays a decisive role in influencing user behavior, and visual information has a far-reaching influence on product interaction.

Jerry Cao from Uxpin, through this article, explains how to maintain visual and interactive coordination.

I do not want to belittle the importance of words, but also do not want to ignore the vision. The two are equally important interactive design elements. Text is interaction, but those visual elements (such as icons, menus, images, etc.) are what the user actually operates. Although some usability experts refer to Craigslist and even Amazon as ugly but available (and popular) site cases. But there is no doubt that beauty always helps.

Emotion is the key to the user experience: a good visual design site allows users to relax, enhance credibility and ease of use. Given that most users have a short attention span, cognition is often a fact: if the vision is bad, users won't bother to delve into your interactive design.

Let us dwell on the importance of vision, as it relates to interaction, ensuring clear direction and consistency.

01. Respect for the dominant position of vision

Let's start with the case show. Look at the following text:

Obviously, we all know the color of the word "yellow". But when most people see it, the only thing they can understand is red. The appearance of the text replaces its true meaning.

Information graph expert David McCandless shows that most of our mental resources are spent visually.

As human beings, vision is our main sense of view. But other animals rely more on hearing and smell, and we are visual-led creatures. As David McCandless, a data journalist and information graphic expert, mentioned in a fascinating Ted speech, we will mobilize all senses, but most of our brainpower is visually-though it is difficult to detect. He used a computer analogy ...

"Vision is the most rapid sense of perception." It is the same speed as the computer network. After the touch, the equivalent of a U disk speed. Then the sense of hearing and smell is about equal to the speed of the hard disk.

"Behind the poor taste, the speed of operation is almost the portable calculator." The little box in the corner, 0.7, that's the amount we actually know. So many of your senses-most of the senses are visually-and it's pouring in-and you don't even feel it. ”

Visual impact behavior, also affects experience, Stephen P. Anderson said.

But what does this mean for interactive design? It means that every visual decision you make about a product has a tremendous impact on the interaction, even unconsciously.

Product Design consultant Stephen Anderson points out that visual impact is not just the experience, but also the behavior of the user.

This means that a good visual design can boost sales, increase enrollment and conversion rates, and motivate certain user behaviors. Look at the following two forms:

Form a

Form B

Remember, one of the goals of interactive design is to allow users to think as little as possible. Which do you think is more favorable to sales? which is more visually comfortable?

In the first case, the intense phobia of the spacing and excessive text, so that users discouraged. The second example is rich, beautiful, and looks more concise (although users have to enter this information).

Because interactive design is to create what people want to use, attractive things more stimulating people's desire, so more effective.

Pictures and navigation are in harmony with each other in this online spice store.

But in addition to the attractive interaction, the graceful design provides an extra layer of understanding. Looking at this old Town Spice shop case, you'll find that the cabinet-style layout of the site immediately hints at the company's intentions and spice products.

Although you may query, users first see the cabinet or "Spices" and "extracts" these words. There is no doubt that the two are in harmony with each other.

02. Provide clear direction and guidance

Users do not browse the site aimlessly. People usually have a general idea of where they're going, but they need some guidance and clues. They will create maps in their minds, and since we have just mentioned that people are visual beings, then we need some visual signposts to refer to the road.

In a way, your navigation needs to be like a GPS. Users need to know their current location, which routes are available, and what to do next.

Breadcrumbs are the most direct way to meet the above 3 requirements. Like the following Newegg, a common UI pattern, this approach leaves users with a clear visual trail to track their access process.

However, breadcrumbs should be used as an alternative because they are visually not intuitive to the click and jump between pages. They are used for complex web sites, such as electronic business sites, where simple sites do not need it. If you're skeptical, review your site map to see if adding breadcrumbs can improve usability, or just clutter it up.

breadcrumbs, links--and menus, search boxes, and clickable icons--are based on a visual approach that allows you to create directions and guidelines. When it comes to leading navigation, you need to make it a strong visual impression.

If you want to learn more about best practices for navigation, see our free ebook Web UI design top practices, and this 5-part series, talk about simplifying navigation in interactive designs.

03. Ensure Visual Unity

Consistency is important in all aspects of interactive design, not just vision. In any case, visual inconsistencies are very striking (look at the world's worst websites) and witness the hell of Design.

Some things are not to be done.

Consistency shows the logic of the site's design and arrangement, creating a more enjoyable experience (we all know that happy users will turn back).

As we mentioned before, people prefer unification because it increases predictability (lower learning costs). If your interface is easy to learn, it will be easier to use. People do not like unpleasant surprises, just as the surprise minimization principle says:

The problem with inconsistency is that it increases the "cognitive load". Nielson Norman Group's user experience expert, Kathryn Whitenton, explained in a hot discussion posting that cognitive load is the amount of thinking that users need to think about when using a product.

Consistency shows the logic of the site in terms of design and arrangement.

Each inconsistency forces the user to stop and deal with what is being expressed here, how it differs, and how it affects their behavior. Therefore, the less consistent place, the smoother the interaction, the better the experience. Inconsistencies are almost everywhere: the UX matters Michael Zuschlag has a useful chart.

For example, a radio button that only allows a single radio in a part of the interface should not be selected in other parts. This should be the case for copywriting, since in some parts the term "save" is used as the name and should not be called "storage" in other parts. If a picture triggers a pop-up window, it should not open a new one elsewhere. Always ask yourself, "How do I want the user to operate?"

04. Use UI Design patterns as a benchmark

UI design patterns that can be understood as the best design practice for specific situations. Now that users are familiar with a variety of design patterns, they use them to reduce the learning curve of the interface. Common UI patterns include merry-go-round, RELATED links, slides ... There is more (which can be seen from this website, which is dedicated to categorizing them).

Netflix uses the relevant content model to help you find other programs that might be of interest to you.

Netflix, for example, uses the "related content" UI model to help users find other movies or programs that may be of interest. Because content is intelligently generated, user interaction feels more like someone is recommending useful content. This is not a groundbreaking design, but it is a quick and effective solution to make your interface live.

Of course, the UI pattern is not a Plug and Play module, you still have to customize it based on the look and feel of the site.

To find the right pattern for your product, you can look at the various pattern libraries and browse through the various patterns, such as "navigation" or "input box". This year, we released two separate UI pattern series (with the use case analysis of the Fortune 500 companies): 2014 Web UI design mode and 2014 Mobile UI design pattern.

05. Create consistency through style guides

Although the UI pattern helps to enhance familiarity, the style guide ensures that the whole station is unified.

The style guide is a handbook that lists the special preferences of the product, which are hard to remember-such as the size and font of the total station content, the primary color of the dominant navigation and the color gradient of the auxiliary color, the performance of the button-click State, and so on.

Come here www.yelp.co.uk/styleguide look at Yelp's style guide.

In Uxpin, we create a style guide when we update the site. This can help us estimate the extra workload, because we can add screenshots with technical details to our in-house wiki. As we have described from the style guide to the effect diagram, this "patchwork" approach is very effective for easy style guidance and can be shared with the entire company.

We have fully discussed the style guide in Web UI design best practices, including how to make and what to include. To learn more about the style guide, see the following excellent resources:

Starbucks

MailChimp

Yelp

BBC Gel

To learn more about consistency in interactive design, see this whole area of creating user experience consistency, as well as this system, platform, and real-world unification.

Summary of the Essence

When people surf the internet, they say they are "watching" the site, rather than interacting with it, although the latter is more accurate. We rely heavily on vision, vision leads us to build ideas, solve problems, and what we believe will lead to our actions. Because interactive design is so close to the user experience, creating the best user experience through vision, though indirect, is sure to lead to better interactions.

To further study, you can download this ebook interaction design best Practices:words, visuals, and space. The visual case study includes more than 30 companies, including Google, AirBnB, Facebook, and Yahoo. There are also some expert advice, such as Stephen P. Anderson, Jared Spool, and so on.