Heatmaps of Top 10 Elementor Sites: What Visitors Notice First?

It’s been two years since Elementor’s team started the tradition of a monthly showcase.

Every month they select 10 the most inspiring websites built by non-professional designers and novice Elementor users.

We have decided to test the top 10 sites of the month – May 2020. The screenshots of landing pages were uploaded to AI-driven design analytics Attention Insight. In seconds, we received website heatmaps revealing how these sites look through the eyes of users.

Which objects do visitors notice first? What could be improved in these designs? And what can we learn from them?

Elementor11
aoi_heatmap_elementor11

Site #1: Manufacturer of High-End loudspeakers for home use Marten

Design & Development: Patrick Smith

Insights:

  • It’s a unique solution to place the cookie usage notification in the top right corner. However, it attracts more attention than menu bar or logo.
  • The hero text is the first thing visitors notice. The second – a lamp in the image. 
  • However, brand sells not lamps, but loudspeakers which are left in the bottom of the image. You need to scroll down to see them. The simplest solution could be to crop image so as loudspeakers could be seen without scrolling.
Elementor2
aoi_heatmap_elementor2

Site #2: Video production company Suited and Booted

Design & Development: Something Familiar

Insights:

  • All the attention is concentrated on animated hero text and video background showcasing their work at their best.
  • Clarity score  82% (100% indicates the most clean and clear design). Meanwhile, clarity score of other 8 sites varies between 64-76%.
Elementor3
aoi_heatmap_elementor3

Site #3: Printing company Jentzsch

Design: Pedro Portugal

Development: Fabian Todt

Insights:

  • Attention is well distributed between the main elements.
  • Visitors eyes move from a hero text (which gets 21% of attention) to an explanatory text (16%) and finally – a product image (44%).
Elementor4
aoi_heatmap_elementor4

Site #4: Portfolio Bersus Design

Design & Development: Den Sabrov

Insights:

  • It is designer’s portfolio. No wonder why the name grabs the most attention (52%).
  • The minimalist design scheme of black and white, along with abundant negative space between elements leads to optimal clarity (clarity score – 76%).
elementor12
aoi_heatmap_elementor16

Site #5: Unconventional travel agency Lùleka Experience

Design & Development: Vittoria Mannu

Insights:

  •  Attention is well distributed between two main elements – text and image presenting what company does.
  • Hero text and image related to services are the first things users notice and grab the most attention (30% and 19%). 
Elementor6
aoi_heatmap_elementor6

Site #6: French film production company Goodman et Compagnie

Design & Development: Guillaume Verdon

Insights:

  • As readers’ eyes tend to move from left to right and then down, logo, video background, and explanatory text are objects that users notice first.
  • Due to its white color that draws attention, logo pops up and gets 5% of attention.
elementor13
aoi_heatmap_elementor13

Site #7:  Event in Italy – a craft fair Factory Market

Design: Beatrice Valoti

Development: Andrea Fogliata

Insights:

  • It is a unique method of structuring a website’s layout – menu is located in the footer’s position.
  • However, it manages to grab relatively large amount of attention (15%). Besides, based on a website heatmap, it is among the elements that visitors notice first.
  • It is a well-designed users experience. Visitors read paragraph about the event, then notice its name and finally are directed to menu bar for more information.
Elementor8
aoi_heatmap_elementor8

Site #8: Creative agency Komini

Design & Development: Arvid Lindstedt and Erik Stenman (Komini)

Insights:

  • If you want yo avoid distractions, this is an example to follow.
    The elements are arranged in exactly the same way as the users tend to read – from left (hero text) to right (extra hero text) and then down (CTA buttons). No other distracting objects.
  • Despite its white background, “Tjanster” is not the most catchy CTA button, “Portfolio” is.
  • If “Tjanster” is the main one, agency should consider re-arranging buttons.
Elementor9
aoi_heatmap_elementor9a

Site #9: Timber furniture Forest To Home

Design & Development: Ross Merritt, Content Coms

Insights:

  • It is a product-focused site. Visitors’ attention is concentrated on a hero text about product (39%) and product image in the background. In total, this part grabs more than 82% of attention.
  • Logo text emphasises company’s uniqueness (“Forest to Home”). That makes sense why it is larger than other elements in the menu bar and receives the most attention (4%). 
Elementor10
aoi_heatmap_elementor10

Site #10: Portfolio Daniel Muñoz Tattoo 

Design & Development: Daniel Muñoz

Insights:

  • Interestingly, attention is focused on an eye-grabbing call-to-action button. It is the first thing visitors notice. Besides, due to its size, CTA manages to grab 15% of attention.
  • The most attention is taken by a hero text (62%) and video background presenting service.
  • Menu bar on the left side could be improved, as it gets no attention.

Product Hunt deal

FREE for everyone:

Days
Hours
Minutes
Seconds

GET HEATMAP