Make Your Eye-Catching Websites Through Movement, Direction and Positioning of Design Elements

Human visual system is remarkably agile. It helps us perform tasks that are necessary for our survival. Without any conscious effort we are always scanning our surroundings for important information such as which elements are present in the background and whether any of them might be of importance.

Similarly, subconsciously, users scan websites or pictures to acquire information and note if there’s anything of importance in the visual display. All of this occurs effortlessly unless we have consciously focused our attention on something.

Like in the picture above, our visual intelligence enables us to see the word ‘museum’ that is constructed using straight lines and three simple colour contrasts.

Even though we consider our brain as a system that can process massive amounts of data simultaneously, the quantity of information acquired through our visual system is actually way more than what the brain can accommodate into our conscious awareness. Hence, we shift our visual attention from one location to another in a serial manner to extract all the information we want.

The users can be distracted by visual information even when it is not relevant to them. If an element is attractive, it will grab their attention against intention. This suggests that designers can direct where the eyes will look and select what will gain the viewer’s attention.

An interesting feature in the layout or user’s internal goal may direct the user’s eyes. Users want to focus on the most compelling information so they selectively look at what they think is most important. This is known as selective attention .

Prominent elements in an image or a layout compete for our attention, hence if the users are not given a visual direction they may dwell on the wrong information or may experience cognitive overload. A designer can assist this process by purposefully guiding the viewer’s eyes throughout the structure of a graphic. By leveraging this technique, designers can ensure that users comprehend the intended message.

The viewer will pick the most relevant information in a limited time frame when purposefully directing the eyes. The designer can guide user’s eyes by using techniques like:

• Altering the position of an element
• Enhancing the sense of movement
• Signalling the location of visual cues like colour, arrows and captions.
• Varying the degree of emphasis to make the element stand out
• Direction of the element
• Using faces and gaze their eyes in that direction.

In this blog we will understand the position, direction and movement of the website’s elements.

Position

The position of an element in a layout creates perceptual forces and a sense of tension that impacts its perceived importance and hence draws the user’s attention.

For example, an element higher in the layout is usually perceived as more important than an element that is lower in the layout. This is why important elements and information like logos and navigation bars are placed in headers and not in footers. The elements placed in the upper half portion of the layout are considered to be active and dynamic. This also increases the perceived visual weight of the element.

Another study found that users spent more time viewing areas appearing on the upper left hand side of the layout than the areas on the right and lower half. This was true across both double-page spreads and symmetrical designs.

Image Source

Through the placement of elements on the layout, a designer can establish a visual hierarchy and direct the viewer’s eyes. The positioning of each element conveys different messages, like, progression of relative importance from highest rank to the lowest rank. For example, in a magazine page, the information graphic might be the most dominating element, followed by a headline and explanatory content.

Image Source

One thing designers can be certain of is that by varying the position of the objects or elements in the layout creates a varied impact on users.

Direction

Direction in a design can have a powerful influence on the mood of the user and can cause an illusion of movement within it. Making a conscious decision about the dominant direction in a design has a noticeable impact on user engagement and design interaction. Sometimes the element/image will dictate the dominant direction or sometimes, the designer has to take the call. There are 3 basic directions that can be used in a design:

• Horizontal direction- horizontal line in the designs below indicate a feeling of calmness, stability, stillness, and tranquillity.





• Vertical direction – vertical lines in the design give a sense of balance, formality, and alertness.





• Diagonal direction – diagonal lines suggest movement and action in the design.



Visual direction tends to control the eye movement of the user by carefully selecting the image and placing it well aligned with other design elements. It is greatly established that the default eye movement throughout the layout is Left To Right (LTR) that is from top left of towards the right bottom of the layout as observed in the image below



By arranging the elements in a particular way, designers can control the movement of the viewer’s eyes in and around the layout. For example, the eyes will travel along a particular path such as lines, or from light to dark elements. Images can also control the way users view the design and get directed towards a direction, for example:









Image Source

We have been talking about leading the eyes in a particular direction, but what does it exactly entail? Let’s understand this with an example. Have a look at this example from the BBC website



Did you notice how your eyes moved while you were skimming through the above image? Something didn’t feel right? Let me break it down why.



In this example, the top 2 images are both looking away from the centre of the page or outside of the layout. This leads us to ignoring the important information along the default path.

Now compare the next image with the previous one.



After looking at this page you will notice that your eyes do not move outside of the layout. The inward looking faces help you look towards the content.

Movement

Static pictures and layouts move and flow according to the directionality that is inside them. Shapes, textures and lines carry energy and tension based on their position, proximity, and orientation to other elements. This energy can create directional forces in the layout.

For example, imagine the image of a jug that is pouring liquid. As the liquid flows down the jug, your eyes follow the flow. Even though the jug and liquid are static in composition, we tend to perceive the movement that is occurring.

Movement is more than repetition of elements and patterns; rather, it drags the viewer’s attention through the picture or element. Movement is a powerful way for designers to direct the user’s eyes to important elements.

According to Rudolf Arnheim (1974), the direction of visual forces in a picture is determined by three factors:

• the attraction from the visual weight of surrounding elements.
• shape of objects
• visual direction and action of elements

In one study , researchers found that action photographs activated areas of the brain that were associated with real motion, whereas photos including people in still positions did not activate the associated areas. Hence, designers could use these findings effectively by employing movement.

Designers can also utilise the expressive quality of lines and shapes to create movement based on rhythm of elements. For example, curved and wavy lines create a smooth and flowing movement. Jagged or broken lines create a sense of tension and make the user’s eyes perceive and pause. It is quite interesting to note that movement that flows from left-to-right direction is considered easy to perceive.

Designers can also create a perception of movement by creating an illusion of three-dimensional perspective that draws the viewer’s eyes through the depth field. Viewers deduce depth in a picture because of their exposure to the physical world. Objects that are larger in size are assumed to be in the foreground.

Viewers also perceive the illusion of depth through converging lines and a sense of distance through cooler colours. Depth perception also creates a visual hierarchy.

Conclusion

Because the eyes are always moving and fixating, designers can help guide the user’s eyes by positioning, directing, and moving the elements of the layout accordingly.

Giving direction in a layout provides mood and atmosphere which can lead to the perception of movement in the design. Lines are not the only way a designer can show direction but where people look in images, where objects and figures appear, through positioning of orientation and shape elements, and through arrows and other pointing devices are some other ways that could be incorporated by designers.

Creating levels or hierarchy of importance in a layout and positioning the elements accordingly would help the users to quickly decode the scene and consume the information in an orderly format. Doing so would not only speed up visual processing and reduce cognitive load, but also increase the user engagement and experience.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]