This second lesson will discuss how to approach the visual design elements of the UI to create a supportive matrix for the features of the platform. Supportive elements, unlike interactive elements, shouldn’t be prominent or visually dominant; otherwise, they would increase the visual noise around the interactive elements, making it harder for the user to extract meaningful (actionable) items from the visual scene. The function of the supportive elements is to make clear what an interactive element or a section is about. If they trigger a question in the user's mind, such as 'What is it?', then they have already hijacked the user’s attention, hence need to be corrected or eliminated completely from the graphical user interface.
Please check some of the most common issues and their explanation below. Click on the numbers to load the related image.
The group of supportive elements includes graphics, backgrounds and patterns, icons and dividers as well as white spaces. On a dense page like a graphical user interface, images and distinctive background patterns can be distracting when used as mere decoration. There is too much information for the users to process in order to get their task done.
Design Tip: When it comes to backgrounds, it’s advised to use blurred, faded pictures or subtle patterns that don’t contain the shapes of the main scene (e.g., button-like rectangles). Generally speaking in terms of visual design, instead of adding decorative elements to the scene, it’s more suitable to style the necessary elements in a decorative manner so the page doesn’t call for an additional visual spice.
Icons were partially discussed in the first session as graphical interactive elements in terms of affordance and correctness. A great many of them, however, are used as supportive elements instead of standalone interactive ones. For icons to be able to support the understanding of the graphical user interface, two main things need to be decided long before the icons themselves are selected: