Compositional flow determines how the eye is led through a design Steven Bradley for Smashing Magazine (2015)

Repetition, patterns, rythm hero patterns

Tipos de ritmo Random rythm

regular rythm

alternating rythm

progressive

flowing

Informational imagery works well in aligned and zigzag layouts. Meaningful images that support the text and tell a visual story are beneficial and will garner a lot of attention. Valuable imagery works well in both an zigzag and aligned layout. Users want to spend time looking at pictures to understand the offering, so accidental fixations causing redirects are not a problem in either layout.

The first images in the list set the tone and make users decide whether to ignore the rest. Pay particular attention to the information value of the images used in the first rows.

Align decorative imagery down the page. Decorative images can be beneficial for establishing brand identity on a web page even if users only look at the first few of them, see them in their peripheral vision, or glance at them briefly as they scroll back up the page. However, it’s best to align the images to support efficient scanning, since users prefer to ignore these images. One exception may be if you have a page with only 2–3 rows of content. In these cases, a zigzag layout may be OK because it’s only a short list.

Avoid overly complex imagery. Some images may have too much information: you may consider them crucial to the understanding of the offering, but users may be overwhelmed, especially when they are less familiar with your offerings or your content. These complex images may also compete with the informational text. Select informational images that complement the text and don’t increase too much the users’ cognitive load.

Don’t use imagery for the sake of the layout. In some cases, you may have a meaningful image to pair with a blurb of text. If so, that’s great. A picture can be worth a thousand words — sometimes. But if you don’t have a meaningful image, don’t just use filler images because the layout you’ve envisioned calls for them. Each image should have a purpose, even if it is establishing brand.

Top-align text with decorative images. Think of users scrolling down the page and uncovering content. If your images are decorative, do not position them at a higher point in the row than the corresponding text. Horizontally align them with corresponding text to avoid drawing the eye and then causing the user to redirect.

Always position high-information content on the left side of the first row. Many people started fixating on the left even before the content scrolled up, and then had to redirect if a decorative image happened to be positioned where they were looking. Whether you choose to put an image or text on the first row, make sure that it carries enough informational value so that it does not cause wasted fixations.

Podcast apps

Ejemplo: Google (mobile)