F-Pattern - F-Layout (Golden triangle)

Card Puncher Data Processing

About

The F-layout is a layout.

It comes from eyetracking studies that show that user read naturally the screen in an F pattern.

Reading is largely done the same way that a book is read: top to bottom, left to right. People have been reading top to bottom, left to right for their entire lives.

Therefore, the most important elements such as branding, navigation, call to action should be placed on the left side of the page.

F Pattern

Documentation / Reference





Discover More
Eye Heatmap Resume
Resume (CV)

A page a resume A good resume follows the same structure than a page to catch the attention: Layout: Clear, simple layouts with clearly marked section and title headers. Layouts that took advantage...
Card Puncher Data Processing
UI - Branding

Branding in UI regroups the logon, slogan and short text that refers to your company or product. They are one of the most important piece of UI and therefore should be placed on the left side of the page...
Card Puncher Data Processing
UI - E layout

The e-layout is a layout with the same idea than the f layout but following a eye path that follows a E form.
Page Heatmap Eye
UI - Layout (laid out) - Composition relationship

A layout defines the visual structure for a user interface. It's another term for the definition of the composition relationship of UI elements. See also: From a word doc..., note...
Eye
UI - Visitor Eye (Visitor's attention)

Where goes the eye in a page ? Visitor's attention by order on a page: The top left corner and banner Images receive the greatest level of attention. Headlines Text (at least is scanned) This...
Z Layout
Z-Layout (Z-Pattern)

The z-layout is a layout with the same idea than the f layout but following a eye path that follows a Z form. ...



Share this page:
Follow us:
Task Runner