|
|
In graphical user interfaces we mostly leverage sight, in User experience we can also incorporate sound, and in some systems we can even leverage touch; as for taste and smell, well maybe in the future; however we are going to focus on sight since most UI information is conveyed visually. humans have a very narrow field of view, we most of what our brain perceives is peripheral vision, we can only really focus on about 5 degrees of information at a time.
This 5 degrees of vision is the reason we have to scan things before we identify what we are looking at, our brains do this automatically. When designing an interface we have to be aware that just because we put something on the interface doesn't' mean our users will ever look at it. studies have show that when users read a web page they follow an "F" pattern, that is the read the top line, maybe the second or third one, and they scan the left side of the page for information.
By being aware about the F pattern we now can identify where the best real estate on a page is to increase the odds of your user finding what you're trying to sow them.
Our human eyes are better at differentiating UI assets by their properties:
- Color: if something has a contrasting color our eye will almost certainly notice it
- Shape: not as stand out as a color change, but our eyes will catch objects that are of a different shape
- Clutter: is all the things distracting the user from finding what they're looking for, if there's too much clutter and we don't differentiate our search target from the clutter we have to manually search, scanning our UI the way you do a word search.
- Motion: if we add some sort of animation to our UI this will again draw our eye to our search target.
the Gestalt Principles are a set of principles that define patterns that humans see:
- Proximity: objects or shapes that are close to one another appear to form groups. Even if the shapes, sizes, and objects are radically different, they will appear as a group if they are close together.
- Similarity: we group things that look similar into categories, for example a group of triangles
- Closure & Continuation: refers to the way that a dashed line is still perceived as a line even though it's not a continuation our mind sees it as one item. same with a dotted border.
- Symmetry: we are far more likely to perceive symmetrical half's as part of a whole than two different objects overlapping each other.
- Common area: things that are grouped inside of a border we them as being related.
- Common fate: if visual elements are seen as moving in the same direction at the same rate (optical flow), our perception associates the movement as part of the same group
- we can use pop out, things like Color, shape, and motion to draw attention to things to make them pop-out from the other clutter.
- we can use the six Gestalt Principles to group things together
- and we can use the same gestalt principles to allow people to skip over sections to find what they're looking for
