Visual Hierarchy and the fundamentals of interaction
Human centered design
The design is everywhere. We will just be creating a web application or a product that has been thinking and planning for years or want to solve a problem that everyone faces; the design will be the main factor that would create a bridge between the user and the application that you are building. Many believe that design is purely an artist job, but there is more to design than you actually see. To create an engaging design, the designers should not only have the understanding on the art of design but its also about having knowledge in various fields and having the practical knowledge on how to use the knowledge that is being obtained in a meaningful manner. As designers, we should always look into the visual hierarchy of the application and how the interaction is going to happen between the user and the application.
Visual Hierarchy
A visual hierarchy describes which elements that would capture and dominates users attention and keep their eyes on the essential part of the application.But there is no construct way of keeping a standard hierarchy as per all the designs you make. It depends on the type of the application as well as the improvisations that made by different UX designers to create a better experience for the users.
There are four common methodologies that we can look into when creating a better visual hierarchy.
Color
Color plays a major role when come to design. The designers can use color properly to show the visual hierarchy of the application. Color played a vital role in the psychology of the application. Many studies have been done to show the impact of the psychological aspects towards the user. Colors have their own hierarchy. The hard colors such as red and black colors draw much more attention, and light colors such as white and yellow make less attraction.
In this website, the designer has used the color as the main method of showing the visual hierarchy. The idea that the designer wanted to convey by the website is being presented by the image. The image is covered by a dark color overlay. The white color text is more visible and has given the feel of power and stability to the viewer. The image of the rider verifies the type of the font and gives you the action-packed feeling. In the dark overlay, the fonts stand out to grab the attention of the user. The text and the links standout elegantly separating them self from the background image.
Size
When coming to the size human always says “Bigger the better.” In design, designing bigger elements makes better attention towards the user. Adding details to the design, bigger elements can create complications. When elements are bigger and clickable, it is effortless for the users to engage with the elements. Designing call-to-action buttons in meaningful ways can make proper visual cues and make directions on where to go.
When designing larger elements, the harmony and stability between the elements would make a better impression towards the user. In the example that is mention here, we can see that the image in the middle is balanced from left to right and top to bottom allowing the users to capture the image as a first thing and the text as a second most focused element. The design seems well balanced, but the most important thing is the message when coming to the application which is not that well handled in the design. If the designers have put more effort to tell what they are trying to convey without just putting the words “Build your perfect” “App instantly with no coding” in two separate alignments that the user has to discover in two different places of the design and keep the information in a more effective manner it would have been more efficient for the user to understand. The most important action on this page is the call-to-action button which is the “GO” button at the bottom of the page. If the designers had made the link more prominent for the user to see and use different effect that would be a positive factor to make a really good design. Overall this design is a wonderful and an eye-catching design.
Layout
The layout of the application is the most critical way to achieving the visual hierarchy. Placing your elements in a more meaningful manner will be a positive factor when come to design. Keeping the similar functions of the applications at the same level would give the user the understanding which elements are common and which area of the design the common elements are to be expected.
In this example as a real-estate web application is a good example of the use of layout. The designers have restricted the attention of the users into using the key elements of the application. They have center align the call to action button. They have listed the properties of the application under the search allowing the users to change the results without changing the position of the web page. In the property section, each of the property section the status of the status of the property is mention at the top for the user to understand which state the property is in. After that the images, property details, description and the price that is really important to the user’s decision making. This will improve visual hierarchy, usability and quality of the design in a meaningful manner.
Spacing
Spacing is one of the most important and a key factor when come to create visual hierarchy towards the application users. Spacing in the application would allow the user to understand the functionality and separate information from one another. The spacing can be described by proximity and negative space.
The proximity of elements as shown in this image, we can categorize the elements which are group together are in the same group. The gaps between the elements in the service section have same gap and space in between making the user feels that they belong to the same category.
Another important factor is that the use of negative space in the application. Most of the designers are afraid of the negative space and try to add as many elements as they can to cover up the design. If you understand how to use the critical elements and use the space wisely so the user will be able to focus on the key elements that would help them to complete a certain action or a task.
With these common elements, you will be able to improve the quality of the product or application that you are trying to design. It would create better interaction between the user and the system.
When the human understand what the application is about and how to work with it covers the basic aspects called understandability and discoverability in the application. If the application we are building communicates with the user in a really meaningful manner the users might not feel foreign towards the application, and the interactions on the application become normal and the digital feeling of the application will disappear and will feel more human.
So how we get interaction of the application correct? There are five basic principles of interactions that would help you to get your product in to the state where there is better interaction between the user and the product.
Affordance
In design terms, affordance means preserved and actual properties of a thing. These properties would give the user the suggestion of how the things would function or work. Affordance means to give a clue to the user how it works. We encounter these type of scenarios every day. Simple things like opening doors to complex situations such as transferring your money to another account. For many applications, the users don’t have any idea how to use the applications. The application should be designed in a way that the application could communicate how to work with it.
We can make the clickable elements much more understandable by using colors and changing the behavior of the mouse icon or element change when taking the mouse over it. We can provide guidance to the users who are going through a process on which they should do complete the task easy and fast.
Consistency
Consistency in product/application design means to have similar methods, operations, and elements when come to achieving a similar task. Adding similar elements in the application to achieve similar task would increase positive feedback from the user, and the end goal is achieved fast and easy. Limiting the styles that you would take your elements though would give a definite positive idea to the user to understand and categorize the type of functionality each element does and create proper mental models when using the application.
To learn about more on this topic, I would recommend you to go through iOS design themes to get a better idea on how Apple has been designing their elements to be consistent and similar though out their design in different devices.
Mapping
Mapping in design world means to have a clear relationship between the controls of the application and the effects that they make in the real world. From many examples, the most common and understandable example of mapping is the kitchen stove example.
In this example, on the left-hand side image, you can see the stove has four operators, but they do not give any idea for the user which burner starter opens which burner. That would create frustration for the user who is going to be using it.
Taking the example on the right-hand side, we can get an idea about which burner operator will fire which burner. That gives the user understanding and understanding on which one to operate to get the relevant work done.
We see many examples in design that would create a similar effect as mapping. When we create elements such as sliders we tend to miss that the users who are using the element will not think as we do. The mindset of a human does not work the same as everyone else.
As you can see the slider in internet explorer gives a visual indication of which side the slider is moving, and the numbers would increment. This would give the users understanding of how to work with the elements designed.
Constrains
Constraints in the design world mean to limit the range of interaction possibilities for the users to simplify the interfaces and guide the users to next section. When there are many possibilities to achieve an end task of the application the users will get confused over what to use for what.
In the information age, the traditional user interfaces have faded out, and the conversational user interfaces are becoming popular and creating a huge impact on the industry. Many large corporations such as Apple and Microsoft have to use conversational UI’s, so the users can speak to the application and get “things” done. As far as the “things” are concerned, the programmatic interface does do not have the ability to understand and deliver everything that the user requests for. The wording that has been used in the application such as “What are you looking for? ” makes the user think that this application is capable of providing the user whatever they want. That would be misguiding the user, and at the same time, the users will get frustrated with what they are doing.
In order to deduce those types of mistakes being happened, the designers can use user proper wordings as well as clearly state the function of the element that the users will be using, so there will be fewer problems to the user.
Visibility
The visibility in design world means to make the elements more visible, so the users see and understand element functionality. This is a core fundamental when coming to application design. Many of the application designers would get stuck in understanding how to visualize proper visibility in applications. Designers clutter their designs with elements all the time thinking that the users will see them all.
In this mention example, the designer is showing the key functionality of the application as to buy the icons. The designer has used a black background and colored the button in yellow color making it visible and understandable for the user to click on it to buy the icons. We can see that the design is clean and have used fewer elements making the critical elements much more visible to the user.
Take this home
As product designers, we design solutions for everyday problems. We sometimes forget some key aspects of design and just look into making “pretty designs.” A proper visual hierarchy will create proper visual cues to the users and have interaction principles used in the application would support proper interaction with the user and the system bridging the digital system and humans.
