Visual design of the user interface: Graphical user interface (GUI) design sense of reality

Article Description: visual design of user interface

The history of the visual design of the user interface can be described as a process that gradually changes to the real sense. Just as computers have become more and more rapid, designers have added more and more realistic details-such as color, stereo effects, shadows, translucent and even simple physics. Part of these changes have helped improve the usability of the interface. The shadow behind the window in the Windows interface lets us know which is the current window. The physical experience of the iphone's user interface makes the device more natural.

In other areas, improvements are debatable. The graphical user interface (GUI) is the most typical example. Many of the graphic elements you see on your screen are meant to express a certain idea or concept. The small house on the table is not a small house, but "My Computer"; the eye is not a real eye, it means "look at the selected element"; The gear is not a cog, it means "click on me to see the commands available".

Detail and realism can distract users, rather than focus on the concepts they are trying to express. I explained this in detail from a page that every designer should be asked to read Scott Maclaud's comic book-The Invisible Art ( Scott McCloud ' s«understanding comics»).

"(except for the Zo Zhi portrait) The rest is the image that is prevalent in comics. For example, a more cartoon face means more people can be described. ”

The leftmost image is the face of a particular character. The rightmost image is the "face" concept, and it can be anyone. When designing a user interface, we rarely show a particular object, and we usually want to convey an idea or concept. Details can easily distract attention from the meaning or concept to be expressed.

(left) point I'll take the picture! (right figure) uh ...??

At the same time, some details are also clearly needed. The details are too small for the user to fully understand the meaning of the expression.

The circle on the left is obviously a person's face. And the circle on the right can no longer recognize a face.

Let's look at a logo "My Computer" button that we actually see in the user interface. Usually, this button uses a small house as its symbol.

On the far left is a house. On the far right is the meaning of "My Computer". Between the two is the change from "a particular house" to "conceptualized house". The more real things are, the harder it is to figure out what it means. Similarly, if the image is too simple, it can no longer be identified accurately and quickly.

On the far left is the "My Computer" button. The rightmost may also be an up arrow, or the Shift file key. Let me illustrate this concept in a completely unscientific diagram:

The horizontal axis represents "detail," and the vertical represents "recognition," and the pink area represents "confusion."

Too much or too little detail can be confusing and difficult to understand. People will identify the UI elements that are in the middle of the diagram.

The trick is to figure out what details are available to help the user identify the UI element, and which detail distracts from the concern that it wants to express meaning. Some details help users identify what they are looking at and how they can interact with it, while others distract attention from the meaning you want to express. They turn your interface element from a concept into a real thing. So, if an interface element is too different from real life, it can be difficult to identify. On the other hand, if it is too real, people will not be able to identify what you mean and what you might mean.

The buttons on the left are too real. The rightmost button doesn't have enough detail to make it instantly recognizable as a button.

The same applies to these strip buttons. Shadows and gradients Let the user know what he is looking at and how to interact with it. Adding too much detail, in any case, will eventually become confusing. The strip switch is no longer just a bar switch, but a part of the user interface, the picture of the real bar switch can be clearly identified, but it loses its meaning. It is no longer an icon, but a particular thing.

(left) Let's go back to the main menu. (right figure) uh ....

An exception

There is at least one particular area where a little more detail is good: the application icon. You want your icon to express a unique idea: your application.

Keda's Leaf (Coda's leaf) is not to express the concept of a leaf, it is a very specific leaf: Keda's leaves. Acorn ' Acorn (Acorn's Acorn) is not just any acorn, it's Acorn. Add details to change these patterns from a generic concept to a specific object, which is exactly what you want for an application icon.

Conclusion

The graphical user interface is full of icons. Icons need to be simple to their essence. This helps prevent the user interface from cluttering up the information with meaningless distractions, making it easier for people to "read" the icon and figure out what the interface element means. The real details can hinder what you want to convey to the user.
The goal is not to make your user interface as real as possible. The goal is to add those details that will help the user identify what the element is and how to interact with it, and not add it. A UI element is an abstraction that expresses concepts and ideas, and it should retain only those details that are useful to its meaning. UI elements are almost never descriptive of the real thing. Adding too much realism can cause confusion for users.