Decorative and significant elements in the design of interfaces
Translation of the article " Distinguishing decorative from meaningful elements in UI design ".
As interface designers, we want our work to look good and be understandable. Each element on the screen should caress the eyes, and at the same time, interfaces are not just objects. They should work. Interfaces should provide information and clearly indicate possible courses of action. These two sides - sexuality and functionality, attractiveness and simplicity, design and significance - they often coexist with an experienced designer. But there is still a danger of conflict between how we think it should look and how the user will perceive it ( they would only be talking about customers (customers), not to think about people ... - thought out loud ). Recently, I noticed this kind of contradiction between design and value on the GitHub service.
After logging in to GitHub, the general navigation menu will appear on the right side of the header. The navigation block is framed by a rectangle with rounded corners:
')
Look at the rectangle that binds the whole block together. It has a light blue background, and around it is bounded by a gray frame. Border and background are decorative. They stylize the block and enhance visual appeal. To help you see the decorativeness of these elements, I made a quick comparison between the original version (above) and the new version without border and background (below):
Both options are pleasant to the eye and the functionality in them seems the same. You can say that the difference between them is rather aesthetic. But there is something else. The decision to merge links is much deeper. The decorative container actually changes the value of the links and, as we will see later, leads to a problem for GitHub. To understand the reason, we first need to look at how the combination of elements affects the user’s perception of design.
When you put a link inside a container, you assume a link between the container and the link. Technically speaking, you make one part of another. As a more familiar example, take a look at the editing links that you often see in web applications:
Two links for editing are combined with the appropriate containers. The user expects the top link “edit” to edit the entry “Michael Bluth”, because the link is in the same cell as Michael’s name. The “edit” links themselves are the same. Create a difference containers.
So how does this relate to navigation on github? The problem with the link (“repositories: all”). There are thousands of open repositories on GitHub that are open to everyone. And at the same time, each user can have their own repositories. And just here we find ambiguity in the design of their navigation.
When the navigation block is framed, the “all” link appears enclosed within the active user’s framework. Under the link you expect to see all repositories belonging only to this user.
Compare this with the borderless version. It is no longer so obvious whether the “all” link leads to the list of Michael repositories or to the main list of absolutely all repositories.
At first, the frame around the GitHub navigation block looked purely like a matter of style. Now we see that aesthetic decisions can also affect user understanding of design. In the case of GitHub, the expectations created by framed links do not correspond to the actual behavior. When you click the “all” link, you are not taken to the list of repositories of the current user. Instead, you are in the main list of public repositories of all users. It turns out that in order to see the list of repositories of the active user, you must click on his name next to the avatar. Wisely!
How could we change the design to eliminate confusion?
[..] - the first version of the "redesign" proposed by the author of the article is missed, since it is frankly bad, especially compared to the one described below - approx. per.
You can save the decorative frame of the original and use the "authorship" in order to "outweigh" the logic:
This option uses 2 links - “all” (“all”) and “mine” (“mine”) - to separate between the main list of all repositories and the list of repositories belonging only to the active user.
GitHub is a great service. And I know I'm picking. But at the same time, user interface design is a delicate matter. As designers, we need to be aware that sometimes when we design for the eyes, we can forget about the design for the brain. I hope these examples will help you better feel the line between decorative elements and elements that change the meaning of your interfaces.
As interface designers, we want our work to look good and be understandable. Each element on the screen should caress the eyes, and at the same time, interfaces are not just objects. They should work. Interfaces should provide information and clearly indicate possible courses of action. These two sides - sexuality and functionality, attractiveness and simplicity, design and significance - they often coexist with an experienced designer. But there is still a danger of conflict between how we think it should look and how the user will perceive it ( they would only be talking about customers (customers), not to think about people ... - thought out loud ). Recently, I noticed this kind of contradiction between design and value on the GitHub service.
Main navigation on github
After logging in to GitHub, the general navigation menu will appear on the right side of the header. The navigation block is framed by a rectangle with rounded corners:
')
Look at the rectangle that binds the whole block together. It has a light blue background, and around it is bounded by a gray frame. Border and background are decorative. They stylize the block and enhance visual appeal. To help you see the decorativeness of these elements, I made a quick comparison between the original version (above) and the new version without border and background (below):
Both options are pleasant to the eye and the functionality in them seems the same. You can say that the difference between them is rather aesthetic. But there is something else. The decision to merge links is much deeper. The decorative container actually changes the value of the links and, as we will see later, leads to a problem for GitHub. To understand the reason, we first need to look at how the combination of elements affects the user’s perception of design.
Containers change the value of the elements to be merged.
When you put a link inside a container, you assume a link between the container and the link. Technically speaking, you make one part of another. As a more familiar example, take a look at the editing links that you often see in web applications:
Two links for editing are combined with the appropriate containers. The user expects the top link “edit” to edit the entry “Michael Bluth”, because the link is in the same cell as Michael’s name. The “edit” links themselves are the same. Create a difference containers.
So how does this relate to navigation on github? The problem with the link (“repositories: all”). There are thousands of open repositories on GitHub that are open to everyone. And at the same time, each user can have their own repositories. And just here we find ambiguity in the design of their navigation.
When the navigation block is framed, the “all” link appears enclosed within the active user’s framework. Under the link you expect to see all repositories belonging only to this user.
Compare this with the borderless version. It is no longer so obvious whether the “all” link leads to the list of Michael repositories or to the main list of absolutely all repositories.
At first, the frame around the GitHub navigation block looked purely like a matter of style. Now we see that aesthetic decisions can also affect user understanding of design. In the case of GitHub, the expectations created by framed links do not correspond to the actual behavior. When you click the “all” link, you are not taken to the list of repositories of the current user. Instead, you are in the main list of public repositories of all users. It turns out that in order to see the list of repositories of the active user, you must click on his name next to the avatar. Wisely!
suggestions
How could we change the design to eliminate confusion?
[..] - the first version of the "redesign" proposed by the author of the article is missed, since it is frankly bad, especially compared to the one described below - approx. per.
You can save the decorative frame of the original and use the "authorship" in order to "outweigh" the logic:
This option uses 2 links - “all” (“all”) and “mine” (“mine”) - to separate between the main list of all repositories and the list of repositories belonging only to the active user.
GitHub is a great service. And I know I'm picking. But at the same time, user interface design is a delicate matter. As designers, we need to be aware that sometimes when we design for the eyes, we can forget about the design for the brain. I hope these examples will help you better feel the line between decorative elements and elements that change the meaning of your interfaces.
Source: https://habr.com/ru/post/51177/
All Articles