Realism in UI Design
The history of the visual design of user interfaces can be described as a gradual change towards more realism. As computers have become faster, designers have added increasingly realistic details such as color, 3D effects, shadows, translucency, and even simple physics. Some of these changes have helped usability. Shadows behind windows help us see which window is active. The physicality of the iPhone’s user interface makes the device more natural to use.
In other areas, the improvements are questionable at best. Graphical user interfaces are typically full of symbols. Most graphical elements you see on your screen are meant to stand for ideas or concepts. The little house on your desktop isn’t a little house, it’s «home». The eye isn’t an actual eye, it means «look at the selected element». The cog isn’t a cog, it means «click me to see available commands». Details and realism can distract from these concepts. To explain this, I’ll take a page from Scott McCloud’s «Understanding Comics», a book which should be required reading for all designers. The image on the left is a face of a specific person. The image on the right is the concept «face»; it could be any person. When designing user interfaces, we rarely ever want to show a specific entity; typically, we want to convey an idea or a concept. Details can easily distract from that idea or concept. At the same time, it’s obvious that some details are required. Too few details, and the user won’t recognize the idea at all. The circle on the left clearly shows a face. The circle on the right isn’t recognizable as a face anymore. Let’s look at a symbol we actually see in user interfaces, the home button. Typically, this button uses a little house as its symbol. The thing on the left is a house. The thing on the right means «home». Somewhere between the two, the meaning switches from «a specific house» to «home as a concept». The more realistic something is, the harder it is to figure out the meaning. Again, if the image is simplified too much, it’s not clearly and immediately recognizable anymore. The thing on the left is a home button. The thing on the right might as well be an arrow pointing up; or perhaps it’s the ⇧ key. Let me explain this concept using an entirely unscientific graph: People are confused by symbols if they have too many or too few details. They will recognize UI elements which are somewhere in the middle. The trick is to figure out which details help users identify the UI element, and which details distract from its intended meaning. Some details help users figure out what they’re looking at and how they can interact with it; other details distract from the idea you’re trying to convey. They turn your interface element from a concept into a specific thing. Thus, if an interface element is too distinct from its real-life counterpart, it becomes too hard to recognize. On the other hand, if it is too realistic, people are unable to figure out that you’re trying to communicate an idea, and what idea that might be.
envoyez nous vos actualités + inscrivez vous a la newsletter : www.psst.fr
SOURCE : ignorethecode.net
PAR: alexis mouthon
ACCÈS DIRECT A LA PLATEFORME: PSST.FR
UNE INITIATIVE DE: POURQUOI TU COURS?
AGENCE DE PLANNING STRATEGIQUE 2.0
DIRIGÉE PAR: Jérémy Dumont
