SUPPORTIVE ELEMENTS_____
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.
EXAMPLES_____
Please check some of the most common issues and their explanation below. Click on the numbers to load the related image.
TRANSCRIPT_____
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:
- Alignment, is the position of the graphical elements around the interactive one they support (left, right, under, above). There is no right or wrong choice, however, whichever is chosen needs to be applied consistently through the platform. If we choose to put the supportive icons on the left, but place them differently in some instances, these items inadvertently will convey higher importance by breaking the law of similarity. Design Tip: When selecting the supportive icons, try to keep the main style features consistent (e.g., filled/line icon, line width, border radius, line spacing, complexity, cut angle, and so forth) to avoid accidental differentiation, which would imply greater prominence or special functionality.
- Highlighted state, is choosing a rule for the switchable elements, whether the currently active (hence, the non- clickable state) or the inactive (hence, clickable) state is highlighted visually. Whichever state is chosen needs to be applied consistently through the platform.
SESSIONS_____