PLACEMENT AND PROXIMITY_____
This fourth session is about layout design, discussing how to determine the placement and proximity of the elements within the UI. We will review the arrangement, grouping, and spacing of the elements of design that eventually form the final picture. The layout design is where the users’ mental model meets the designer’s intention, making it one of the most important aspects of interface design. Due to the known biases of human perceptions, the UI elements will be grouped, and interpreted accordingly, by the users based on the Gestalt laws. If the designer cannot form the perceived picture as per intention, it will be then formed by the users accidentally. This accidentally formed picture is where most of the usability issues come from; the users interpret the functions differently. If the elements are laid out with consideration for the perceptional biases and the heuristics of the target audience, the designer most likely will succeeded in creating an interface that meets the users mental model and as such, will ensure strong engagement. That's why I always say, if the layout design is done right, half of the job is done right.
EXAMPLES_____
Please check some of the most common issues and their explanation below. Click on the numbers to load the related image.
TRANSCRIPT_____
Here are some of the core aspect of layout design:
- The vertical order of the elements. The vertical order on one hand conveys a hierarchy, an order of significance, i.e., what is at the top of the list is the most (… important, commonly used, often selected…). On the other hand it refers to the order of the interactions. What is displayed first should be filled, clicked, checked… first, to be able to move on, and the last element displayed should close the action flow. Tipp: To outline this order correctly when working with interactive elements, it is of great help to follow the users natural steps of interpreting a visual scene: 1. What is it? 2. What does it mean/contain? 3. What shall I do with it?
- The radius of an interaction. By drawing a horizontal and a vertical line deriving from an interactive element we can clearly see the radius of an interactive element. What falls under these lines are perceived to be affected by that interactive element in question. Where any of these vectors meets an obstruction, the radius ending. If this ending is unintentional, and the action should expand to further elements, either the interactive element or the obstructing element needs to be moved.
- Proximity refers to the relation. Elements that belong together need to be in close proximity and/or within a common region for the relation to be recognized. This rule applies to an action button and its related system feedback, a search term and its results, an option and its dropdown arrow, and so on. For the relation to be visualized during layout design we can use the same background, decreased white space, similar styling or borders/dividers to separate them from the rest of the visual scene. That also means that using, say, dividers between related elements, such as between input fields and their action button, would decrease the recognisability of the relation between them.
Design Tip: Displaying the same functionality in several places (often for the reason of ‘quick access’) is usually add more confusion than help. It's because this kind of layout design actually expects the users to remember two or more places to search for the same functionality, which means longer learning curves and more erroneous task flows. Instead, try to offer one steady anchor point for every functionality which can be learnt easily and memorize-able for the long term.
SESSIONS_____
SESSIONS_____