So, today we are going back to basics: let’s start revising how Gestalt grouping principles can affect user interfaces positively. Exploring the ways how people perceive information and using them for building good navigation, digestible copy, and effective color choice has a great impact on the usability of the product – and scannability as its important part. Visual hierarchy in web and mobile interfaces belongs to the domain knowing which designers strengthen their creative potential. Even creative experiments are based on the knowledge of interaction mechanisms and factors influencing them: to break the rules, you have to know them well. Yet, there’s no magic on this way: this skill is based on not only talent but also practical experience and persistence in studying theory, standards, and guidelines which quickly change together with technology and devices. In lots of cases, that’s not bragging but the real skill to see all the details together, to feel the possible pitfalls of the user flow, to find the original solutions not ruining usability. If you are looking to learn more about the closure principle, I suggest reading my article on Closure: how our brains fill in the missing visual gaps & how to use Closure in designs.Many designers can boast of having creative intuition and a sharp eye: they add as much passion and feeling into the layout of the future website or app as rational thinking and measurement. Our brain will complete the missing parts itself. In the above image, our eyes will notice a square inside the Pacmans whereas there is no square present in the image. ClosureĬlosure principle states that the human eye tends to complete the missing part in a design. If you are looking to learn more about the continuation principle, I suggest reading my article on Continuation: Visual Perception of Continuous Flows & Paths. In the above image, our eyes will follow the path directed by the arrow regardless of intersections or line type. ContinuationĬontinuation principle states that the human eye tends to follow a continuous path be it lines, curves, or intersections. If you are looking to learn more about the similarity principle, I suggest reading my article on Similarity: Associating relatedness through shape, size, color & orientation. While scanning the post we will start linking the similar elements with big bold fonts as the header, normal fonts as content, and blue colored texts as links. Similarity principle states that the human eye tends to link similar elements within a composition.įor example, in blog posts, we can differentiate headings, content, and links by how they are designed or formatted. If you are looking to learn more about the figure-ground principle, I suggest reading my article on Figure-ground Relationship: Differentiating Elements by Perception of Subject & Background. Our eyes see either two human faces or the vase depending on how we use the color to highlight the foreground. For example, in the image above contrasting colors are used to differentiate subject and background. Simply put, the figure is the focus of any compositions, and the ground is the supporting background. Figure-ground Relationshipįigure-ground principle states that the designs are always differentiated by our perception of figure(subject) and ground(background). If you are looking to learn more about the common fate principle, I suggest reading my article on Common Fate: Using Coordinated Motion in Design to Associate Relations. Common FateĬommon fate principle states that the human eye tends to perceive objects that coordinate movement similarly to be related.Īn example of common fate would be coordinated movements of a school of fish or an army of ants. If you are looking to learn more about the proximity principle, I suggest reading my article on Proximity: Associating relatedness through placement. If we put the same numbers separated from each other, people would simply assume that they are merely separate, individual numbers, and nothing other than that. In UX, grouping numbers like this to convey information is known as chunking. Proximity principle states that the human eye tends to perceive objects that are placed together to be more related than the ones far apart.įor example, if we put a bunch of random numbers together, people would perceive it to be some kind of code or a phone number. If you are looking to learn more about the symmetry principle, I suggest reading my article on Symmetry: How we bring balance to Compositions. The goal is to bring balance to compositions using symmetry. Symmetry principle states that the human eye tends to prefer design where elements are made up of equivalent parts.Īn example of symmetry would be how human faces have two equivalent elements like eyes, ears, hands, and legs forming symmetry.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |