Grace's Portfolio

Appearance

Blog 2 - UI Visual Design ​

After lecture on Monday, I got curious about whether there are any common eye-tracking patterns besides the f-pattern, especially for people of different technological backgrounds or who speak different languages. Surfing the web a bit, I found that there seem to be four main scanning patterns for web pages: f-pattern, spotted, layer-cake, and commitment pattern.

The f-pattern, as discussed in class, is usually driven by users' desire to quickly find specific information, and the shape comes from the fact that English is a left-to-right, top-to-bottom language. Viewers typically read across the first line to get the gist of a section of text or a title, then scan downwards for the information they need. According to some sources, this f-pattern is flipped for languages with different writing conventions. For example, pages in Arabic seem to have a horizontally flipped f-pattern.

The spotted pattern, in contrast, describes a viewer who focuses on a handful of specific points on the page. These points are usually spread out and focused around elements that stand out, perhaps an image or unique font or caption. The reasons for this pattern may vary, but an example could be that the user is watching videos on a page or looking at a spread-out photo gallery of art.

The layer-cake pattern, meanwhile, focuses on titles of sections, hence the name. Eye-tracking will be focused across some horizontal lines on the page, and these horizontal lines typically correspond to headings or subheadings, so readers will read these descriptors and then skip or scan the bulk of the text. Similar to the f-pattern, this scanning method highlights the desire to quickly find useful information and skip irrelevant or uninteresting text.

Lastly, the commitment pattern describes viewers who examine every word on the page. If there is text, every sentence will be read, and any images or other features will also be observed. This might be more common if a user is scanning a page where they know they want to learn all of the knowledge on the page (i.e. an online textbook).

In general, these four patterns seem to reflect various purposes users might have when visiting a web page, but another interesting source I found suggests that different reading or scanning styles might be related to different cognitive thinking styles. This specific study approaches this question by first validating that eye-tracking is an appropriate method for approximating reading strategies, then observes the relations between certain reading strategies and cognitive strategies among participants. The write-up concludes that eye-tracking has significant potential for future studies, but in this case, since the sample size of participants was relatively small, few statistically significant conclusions were made connecting reading styles to cognitive thinking. At most, it seemed that participants who performed well on cognitive thinking tasks tend to perform fewer regressions when reading, meaning they do not backtrack as much. Older readers also tended to skip words more often.

For the most part, the results of the study seem pretty intuitive, and while they may not be surprising, I wonder if thinking about reading behaviors, especially in conjuction with the various user goals associated with the common eye-tracking patterns, might be useful in designing a clean and useful web page.

Reference articles:

Lecture Notes (10/16) ​

  • why care about aesthetics? As we spend more time on screens, this could affect our psychology/mental health
  • design brings intuition (door handle --> pull, flat metal rectangle on door --> push)
  • do you see two faces or a column/vase thing?
  • pragnanz: "we favor the simplest and most stable interpretations
  • Gestalt principles: figure/ground, proximity, similarity, symmetry, connectedness, continuity, closure, common fate
  • lecture focuses on: layout, typography, color
  • "F-pattern": for the most part, people start in the top left of a page and scan down then across for info they care about, usually following text; idea came out of a lot of eye-tracking studies, and the point is that people try to get a quick scan of content
  • grid underlies almost all design
  • can take advantage of grid by breaking it to bring attention to certain things (ex: New York Times subscription button on their webpage)
  • grids also make it easy to move stuff around for different platforms (i.e. computer vs. mobile)
  • elements of typography: font size (measured by letter height), x-height (low vs. high), weight (light, regular, bold, semi-bold, extra-bold, black)
  • color: RGB (24 bits) does not express colors uniformly (ex: long strips of red/blue/yellow and shorter strips of cyan/pink/green); color tricks also show how RGB may not be the best/most representative
  • basic color terms: hue (what color), saturation (intensity of color, or how much grey does it contain), lightness (brightness of hue)