Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

UX Design Patterns

Well done!

You have completed UX Design Patterns!

Sign up for Treehouse Back to Library

Scanning Patterns

4:35 with Anwar Montasir

While scientists have been capable of tracking the eye movements of study participants since the late 1930’s, the demand for eye tracking accelerated in the late 1990’s, as researchers began observing the parts of web pages that drew the most user attention.

Vocabulary

  • Eye Tracking: The process of measuring users’ eye positions and eye movement

  • F-Pattern: an F-shaped scanning pattern used to scan badly formatted text

  • Z-Pattern: a layout pattern that breaks up larger blocks of content by alternating the placement of image and text on the left and right

  • Layer Cake Pattern: a layout pattern that invites more purposeful eye scanning by emphasizing headings and subheadings, while only occasionally highlighting portions of the body copy to call attention to important phrases or hyperlinks

FURTHER READING

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    While scientists have been capable of tracking the eye movements of 0:00
    study participants since the late 1930s, the demand for 0:05
    eyetracking accelerated in the late 1990s as researchers began 0:09
    observing the parts of web pages that drew the most user attention. 0:14
    This led to the publishing of an influential study by 0:19
    the Nielsen Norman Group on what's known as the F-pattern in 2006. 0:23
    In a study of over 200 websites, the Nielsen Norman Group learned that 0:29
    the dominant scanning pattern on the web looked a bit like the letter F. 0:33
    Users first swept their eyes across the top of the page from left to right. 0:38
    Next, users moved their eyes down the left side of the page a bit and 0:44
    made a second shorter horizontal movement. 0:48
    Finally, their eyes moved slowly down the left side of the page. 0:52
    It's a consistent pattern seen over and over again 0:56
    in websites using languages that are written from left to right. 1:00
    Note that both Hebrew and Arabic read from right to left, so 1:04
    the F-pattern wouldn't apply in those cases. 1:09
    And it's a pattern that most users are familiar with since 1:12
    it's embraced by Google. 1:16
    I'll try Googling f-pattern. 1:18
    And notice the right side of the page is completely empty. 1:20
    I can swipe my eyes horizontally over options for Images, 1:25
    Shopping, News, and Videos, but 1:29
    otherwise my reading takes place entirely on the left side of the screen. 1:31
    However, in recent years, the Nielsen Norman Group began 1:39
    campaigning to make designers aware of two additional facts. 1:43
    Users use the F-pattern primarily when encountering badly formatted text, 1:49
    and good design can prevent F-shape scanning. 1:56
    In other words, back in 2006, Nielsen Norman Group encountered 2:01
    a lot of websites with thoughtlessly designed body copy. 2:06
    Users use the F-pattern to scan badly formatted text to minimize effort, 2:10
    not because it provides a great browsing experience. 2:15
    So while it's possible to emulate Google and surrender to the 2:19
    F-pattern, let's take a look at some other patterns that have 2:23
    evolved since Nielsen Norman Group's original eyetracking study. 2:27
    Slack's website makes use of a z-pattern, sometimes referred to as a zigzag pattern. 2:32
    The z-pattern breaks up larger blocks of content by alternating 2:39
    the placement of image and text on the left and right. 2:44
    Slack begins the reading on the left side, which is consistent with users' tendency 2:48
    to scan from the top left and places an important image on the right side. 2:54
    One word of caution about the z-pattern is this layout makes 2:59
    decorative images harder for users to ignore. 3:03
    So while the Slack screenshot and introductory video are well placed, 3:07
    the decorative GIFs further down the page are likely drawing user 3:12
    attention away from the body copy. Also, note that the 3:16
    z-pattern is close to impossible to implement on the smaller mobile 3:23
    screen, since there isn't room to place columns of text beside large images. 3:27
    Slack not only switches to a single column on mobile, but 3:33
    also loses the animated GIFs which creates a better reading experience. 3:37
    Slack's mobile website exemplifies what Nielsen Norman Group refers to 3:43
    as the layer-cake pattern. The layer-cake pattern 3:48
    invites more purposeful eye scanning by emphasizing 3:52
    headings and subheadings while only occasionally highlighting portions 3:55
    of the body copy to call attention to important phrases or hyperlinks. 4:00
    Since users practicing system one thinking tend to ignore decorative images and 4:05
    barely glance at large blocks of text, Slack embraces these tendencies 4:11
    by including only short paragraphs, meaningful headings and subheadings, 4:16
    and images and videos that relate directly to the written content. 4:21
    It's a highly effective approach, and 4:26
    one we'll learn to apply on our own in the final video of this course. 4:29
    That's coming up next. 4:33

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up