Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

hci
ui
ux

What is page fold and how does it impact user experience?

Sheza Naveed

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code

Page fold refers to the part of the interface which is visible without scrolling. The term is borrowed from print newspaper terminology. However, it does apply to interfaces as well.

Although fold is not the same for every device, it still exists for every interface. According to the content website traffic, each interface has its own fold and can have multiple folds. A responsive design can have 3, 4, or even more folds.

To encourage users to scroll down the interface to discover more, it is important to provide promising content on the fold. Fold matters as it determines if the users will scroll down or not. Interaction cost plays an important role as:

  • If the user has to scroll down to see the invisible, it requires a high interaction cost.
  • If the user can see what is visible without having to scroll, it requires a low interaction cost.

Scrolling

Websites need to build a story that encourages users to scroll to see more. The content on the top of the page is likely to determine if users will be enticed enough to scroll down. Showing lesser content without scrolling can make an attractive interface. However, users will not have an clear idea what content the page shows and might leave without scrolling at all. As shown below, the Calm app takes an interesting approach towards this. The upper part of the screen is empty, however, it addresses the user with “Good Evening” and shows a complete element and another half element to give the user a fair idea of the content. This invites the user to scroll down.

Source: Calm app

RELATED TAGS

hci
ui
ux

CONTRIBUTOR

Sheza Naveed
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code
Keep Exploring