Home
PATTTTERNS - An open catalog of design patterns | Product Hunt

Made with 💙 by Pablo Armenv2.1.10

Home
/Patterns
/158. Bar Reading Status

158. Bar Reading Status

DesktopAwarenessPathfindingWebEnglishProgress StateNotification BadgeNavbarFixed on Scroll
Pattern ID
158
Date Added
Apr 5, 2021 03:17 PM
Device
Desktop
OS
Web
Language
English
Flows
Awareness
Pathfinding
Components
Progress State
Notification Badge
Navbar
Fixed on Scroll
Components*
Flows*
Related patterns
McKinsey BlogWhy is this a good pattern?How could this be improved?Related patterns
 

McKinsey Blog

Full length HD available on Youtube
Full length HD available on Youtube

Why is this a good pattern?

â–² Vibrant color allow users to visualize the status bar.
â–² Status bar growing and shrinking with scroll gives a clear map of your reading position.

How could this be improved?

â–¼ When status bar reaches the end there should be a strong action to follow. Such us recommended related article to keep reading, a clear call-to-action to share on social networks or suscribe for more content.

Related patterns

  • 91. Bubble Status Reading
  • 394. Page Outline Floating Scroller
  • 360. Page Outline Menu

Found this pattern useful?