The previous module introduced the necessity of supporting information seeking activity in the information environment. One design technique to facilitate information foraging is effective use typography and color to navigate the users. In this module, we will learn terminology and concepts around typography and color.
In user interface design, visual design is important to exert emphasis, hierarchy, and unity. There are commonly accepted good principles that you can follow in designing your prototypes, some of which we discuss below.
bazen.talks. “UI Tip - How to create contrast with size and negative space”
Effective use of colors, font size, and layout of visual elements make some contents of elements in your user interface more salient than the others. For example, you can adjust the text size on your user interface to emphasize some elements and attract the user’s eyes. You could also decrease the element’s size to bring the users attention, too. As you can see in the figure above, exerting emphasis is not only a matter of one element’s property, but also its relationship to other visual elements.
In designing user interface, deciding where you want to draw the users’ attention. Then, use the techniques such as what we discuss in the next section to emphasize it and attract the user’s attention. And do not overuse the emphasis. Good use of emphasis makes it easy to navigate information on the screen, which in turn affect how successfully and efficiently the user can use your user interface.
Utilize the relative size of visual elements to emphasize elements of your choice over the other. A rule of thumb is to use larger size for letters and other visual elements that you want to highlight. If you want to emphasize visual elements with color, use colors with high contrast.
Design Tip - Visual hierarchy 2 by bazen.talks
We discussed the use of document hierarchy to make it easy to navigate the textual information (9. Information Design). But you can exert hierarchy also with visual design, so that you can arrange visual elements by order of importance.
The first step in building hierarchy with visual design is to think about the following points, just like what you did with organizing the textual information: “Where do you want to attract the users to focus on?” and “What action do we want them to take?”
Balance or unity measures how well the visual elements on your user interface work together to communicate an idea. Unity gives the cohesiveness to the design of the user interface. Sometimes, especially when you are working in a team of multiple designers, the final product seems “off” even though each visual element looks great. This tend to happen the case because each designer designs their own stuff, and when put together, the set of visual elements on the interface as a whole does not induce cohesiveness.
Use a consistent typeface and color palette across the user interface to induce unity. Try to use as little typefaces and hues as possible. Use colors and fonts in a purposeful way. And use guidelines and design systems to make it easy to achieve unity (15. Guidelines and UI Tools).
In addition to using size and color of visual elements, you should learn how to apply Gestalt principles in designing. According to Gestalt psychology, there are five basic principles: