UI - Visitor Eye (Visitor's attention / Visual Order)

Card Puncher Data Processing

About

Where goes the eye in a page ?

Visitor's attention by order on a page:

  1. The top left corner and banner
  2. Images receive the greatest level of attention.
  3. Headlines
  4. Text (at least is scanned)

This experiment are used to place ad on a page

Catch

Eye Heatmap

Eye

Place a component slightly left of center in a display to get it the most attention.

See also:

Golden triangle, same as F-Pattern - F-Layout (Golden triangle)

Google Triangle

Eye Tracking New York Times

Ad - Banner (Display)

Banner Blindness

Position

from http://www.usability.at/ - people are looking more at the words on the left than at the large man's face on the right. Eye Heatmap Left Position




Discover More
Headline Example
A heading is a short sentence that summarize a section of text

A heading is used in a lot of place and this articles regroups them in one
Mobile Adhesion Banner
Ad - Banner (Display)

Banner advertising consists of placing a graphical banner advertisement (typically, a 468×60 pixels) on a web page. Display ads are advertisements you view from a web browser (on a computer or mobile...
Ad Slot
Ad - Slot

The physical location of an ad unit on a page is called a slot. The best location are a balance between user experience and revenue (ie where the user will expect the ads) The tracking of attention via...
F Pattern
F-Pattern - F-Layout (Golden triangle)

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...
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
Software Design - Readability (understandable)

A text is readable when it's easy to read. Readability is also known as legibility. Good design makes a product understandable. In Cognitive_dimensions_of_notationscognitive dimension terms, an non-understandable...
Source, Visual and Focus Order

This article is the different type of order of HTML element. There is three kind of order: the source order the visual order: the order in which they are read the tab focus order: the order in...
Card Puncher Data Processing
UI - Bold

bold catch the eye
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...



Share this page:
Follow us:
Task Runner