F-Scan & Z-Scan

Friday 28th September – Week 1 Tasks

Find examples of F-scan and Z-scan patterns.

Can you find any layout examples that subvert these patterns?

Some people are critical of F pattern – can you find any evidence of these arguments and do you think they have any grounds? Tip: read this NN article on F-scanning as a first step.

https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

What other scanning patterns are there apart from F and Z?

————————————————————————————————————-

F-Scan Pattern: Google

After reading the NN Article, I realized that google searching really does implement the F-scan pattern. Why? because of the very accurate and similar layout that has been presented in the article and backed up with testing, which is TigersinCrisis.com – Google is also one of the images presented in the study, which is this image:

‘Heatmaps from user eyetracking studies of three websites. The areas where users looked the most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn’t attract any fixations.

The above heat maps show how users read three different types of Web pages:

  • an article in the “about us” section of a corporate website (far left),
  • product page on an e-commerce site (center), and
  • a search engine results page (SERP; far right).’

Here’s an image: As you can see the heat map in the image is representing the results of 47 people who have taken a look at the website.

Dovico Landing Page: F-Scan Pattern

  • The top-left corner of the page is where viewers of the website will look first, where they will spot the company logo.
  • Moving along the F-shaped pattern, the woman’s smiling face is then looked at.
  • Next step, viewers will focus their attention on the headline and subheadline.
  • Finally, they’ll continue the F-Pattern down the vertical stem where viewers reach the final step, this is the CTA button and that is the main objective of the landing page.

Facebook: Z Scan Pattern

Facebook is a great example that my eyes realized that the Z-scan pattern is being used. Why? because if you look at the structure of their landing page, it will all make sense. Here is what happens.

  • You look at the facebook logo first.
  • You then continue horizontally to the login form, registered users will simply continue to log in, but the un-registered will simply move on.
  • The un-registered viewer will then look at the graphics and website’s statement which is “Facebook helps you connect and share with people in your life.”
  • Viewers then continue looking towards the Create an account button, this is because it’s in green color and has a higher ranking in the visual hierarchy system.
  • The registration form is then proceeded to should the viewer(s) be interested in joining the social media.

Why Z-Pattern Works

  • Hierarchy, visual weights are being applied in terms of size, color, and element dominance.
  • Branding, the companies design guide, color schemes, and of course the logo.
  • A call-to-action, the very important of any website at the header area that the business’s main objective is to obtain clicks on.
  • Structure, elements are neatly laid out and presented to create a  sense of ease and invitation for the viewer.

Why F-Pattern Works

  • Allows readers to scan naturally
  • Drives user-engagement in a more natural and comfortable manner
  • The layout feels natural and comfortable due to the human nature of reading top to bottom and left to right.

F-Pattern Criticisms

“The main drawback to this F-shapen layout is its predisposition to monotony. It’s easy to bore your users with repetitive and similar content in rows. You certainly don’t benefit from a bored user if they begin to dull everything out, so add one “awkward” element within the scanning area to keep the user engaged.” – Nick Babich

This is true because patterns are being used to scan and not to read. In other words, if your content is boring to the viewer, then they will not engage with your site anymore thus you will continue to lose a high amount of viewers.

“The pattern comes from a poor testing methodology that encourages people to look at a website in an unnatural manner. We have been using eye tracking in web usability studies for over 5 years now and only see this pattern when participants are told to ‘think aloud’ (which is very un-natural) – forcing them to methodically scan the page, thus creating f-patterns.” – Guy Redwood

I disagree with this criticism or thought because even it does come from a poor testing methodology, how does that make its usage or utilization utterly useless or pointless? the statistics and figures are out there that prove the benefits of scanning patterns regardless of its origins and testing methodology.

“I am not sure that f pattern is really reliable for mobile devices and small screens. It would actually be interesting to have more opinions on this.” – Fred

I agree, I personally do not think you can utilize and make the most of the f-pattern scan on mobile devices because mobile devices have small screens and therefore the size of the content would be small. All the content is simply in one column, in other words, you don’t have to look left and right.

Other Patterns

Horizontal Symmetry: A site includes many recurring visual patterns that must be organized clearly and the solution is a visual phenomenon occurring in nature, symmetry is generally regarded as beautiful and creates a sense of order and structure, even trust.

Rotational Symmetry: A site wants to draw attention to a central point and motivate immediate action. Radial symmetry creates balance in a circle around a central point. While difficult to apply, when done well this creates a beautiful aesthetic that attracts attention to the center, typically to the company’s name, logo, and surrounding links.

Single-page Layouts: Multi-page navigation system is too convoluted or unnecessary. Modern web development has paved the way for single-page sites and web apps. Both technological advancements and the prominence of mobile browsing (in which single-page apps are more useful) gave rise to this pattern, which is restructuring how the web works.

Gmail, for example, allows email reading, composing, and chatting on the same page, and even organizes emails into separate categories, which mimics a multi-page site. Spotify, too, multitasks by allowing the user to play music while they browse additional music, uninterrupted by loading pages.

References:

Nielsen Norman Group. (2018). F-Shaped Pattern For Reading Web Content (original eyetracking research). [online] Available at: https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/ [Accessed 30 Sep. 2018].

Nielsen Norman Group. (2018). Scanning Patterns on the Web Are Optimized for the Current Task. [online] Available at: https://www.nngroup.com/articles/eyetracking-tasks-efficient-scanning/ [Accessed 30 Sep. 2018].

Studio by UXPin. (2018). Web Layout Best Practices: 12 Timeless UI Patterns Analyzed. [online] Available at: https://www.uxpin.com/studio/blog/web-layout-best-practices-12-timeless-ui-patterns-explained/ [Accessed 30 Sep. 2018].

Clickripplesolutions.com. (2018). Meet The Illustrious Web Designing Pattern Layouts (F & Z) – Clickripple. [online] Available at: https://clickripplesolutions.com/web-designing-pattern-layouts-fz/ [Accessed 30 Sep. 2018].

UX Planet. (2018). Z-Shaped Pattern For Reading Web Content – UX Planet. [online] Available at: https://uxplanet.org/z-shaped-pattern-for-reading-web-content-ce1135f92f1c [Accessed 30 Sep. 2018].

UX Planet. (2018). F-Shaped Pattern for Reading Content – UX Planet. [online] Available at: https://uxplanet.org/f-shaped-pattern-for-reading-content-80af79cd3394 [Accessed 30 Sep. 2018].

Instapage.com. (2018). What is the F-Pattern and How to Use It for Increased Conversions. [online] Available at: https://instapage.com/blog/f-pattern-layout [Accessed 30 Sep. 2018].