SlideShare una empresa de Scribd logo
1 de 26
Descargar para leer sin conexión
By: Allie Edgar Mar. 6,2018
5 COMMON HOMEPAGE MISTAKES
AND HOW TO AVOID THEM
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 2
Is your homepage scaring people
away? A surprising number of
well-known websites make these
common UX mistakes.
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 3
You have one shot to deliver a
first impression. That’s why your
homepage should be perfectly
tuned. A well-executed page must
simultaneously:
Explain what you do or sell,
Feature specific products or promotions and
Quickly direct the potential consumer to their de-
sired page.
1
2
3
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 4
While no site is perfect, simple mistakes disrupt the site’s user experience
and path to purchase thereby tanking conversions as potential customers
click away. We’ve compiled a list of the top five most common homepage
mistakes and how to combat them on your retail or eCommerce site.
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 5
MISTAKE #1:
PRODUCT HIDE AND SEEK
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 6
Consumers don’t dig through a website looking for things they think
will meet their retail needs. They want to dial in on what they are
looking for right away. Failing to correctly represent your site can:
Result in short and long-term sales losses
Drive users to your competitors
PRODUCT HIDE AND SEEK
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 7
Here’s an example of poor representation on the
homepage:
Overstock.com almost exclusively features furniture
and home decor, but further exploration reveals they
also sell jewelry, kitchen appliances and sporting
equipment.
overstock.com
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 8
And here’s an example of a well-executed homepage:
Target does an exceptional job of balancing featured
items and different shopping categories. Target’s
homepage even presents customers with all different
shopping options on top of the full spectrum of
categories.
Target
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 9
MISTAKE #2:
ADS ON THE HOMEPAGE
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 10
Advertisements, or content that looks like ads, mark the second
most disruptive homepage error. Pop-up boxes, page takeovers,
promotions or dialog boxes are poorly perceived and often leave
users with a negative, even spammy, impression. Not to mention
heading for the proverbial exit in frustration.
Promotions, dialog boxes or site specials should be carefully
executed. Consider size, placement, timing and overall look and feel
when adding these to your page.
ADS ON THE HOMEPAGE
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 11
Poor “ad” executions:
Users are immediately greeted with a pop-up box
soliciting an email sign up. This pop up puts customers
several clicks away from their desired page and asks
for personal information from a consumer who may not
be familiar with the brand.
Tentree
Birchbox
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 12
Good “ad” executions:
adidas uses clean design, photography and CTAs to
engage with users. There are no big promotional ads or
pop-up boxes.
Outdoor Voices uses their homepage for product features
and carousel images while still offering deals in a non-
disruptive way. (Free Shipping callout at top of page)
adidas
Outdoor Voices
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 13
MISTAKE #3:
CAROUSELS WITH AUTOROTATION
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 14
Carousels offer a clean, effective way to feature different products
and promotions. However, when combined with autorotation, this
common tool presents several challenges.
Autorotation poses readability and redirection problems for the
customer. To combat these issues, carousels should:
CAROUSELS WITH AUTOROTATION
Rotate at a slower speed
Pause rotation when hovered over
Stop completely after any interaction
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 15
Poor carousel interaction (top right):
Well-executed carousel interaction (below):
Mindy Mae’s Market features an auto-rotating carousel
that rotates at a good pace but does not pause when
hovered over or stop rotation after interaction.
Converse adheres to correct carousel standards. Slides
rotate at appropriate intervals, pause when hovered
over and rotation stops after interaction.
Mindy Mae’s Market
Converse
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 16
MISTAKE #4:
EFFECTIVE FILTERING
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 17
Filtering and organization is key to good UX. Consumers should be
able to easily navigate away from the homepage. Oversiimplified and
undefined filtering methods may lead users to a page or product they
weren’t looking for, which causes frustration and abandonment.
Effective organization means:
EFFECTIVE FILTERING
Incorporating categories and subcategories into your site
Allowing users to narrow their search scope until they find the desired page
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 18
Example of poor filtering:
Beats by Dre may have a sleek look, but they only
feature specific products and do not mention or link to
various categories.
Beats by Dre
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 19
Examples of effective filtering:
Reebok effectively features different categories,
like CrossFit® and UFC, and offers various filtering
methods in the page header.
Reebok
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 20
MISTAKE #5:
MAIN NAVIGATION AND
SEARCH BAR LOADING
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 21
It’s crucial your website accommodates return customer behavior with
thoughtful design and better loading times. This can be achieved with
HTML content ordering — prioritizing these elements in the code to
be displayed before the rest of the page has been downloaded — or
asynchronous loading– ensure these elements load quickly with other
featured homepage elements.
MAIN NAVIGATION AND SEARCH BAR LOADING
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 22
Examples of effective loading order:
In each of the following examples, the main navigation and
search functions load either before or at the same time as the
page. This gives users quick access to the action they need.
Nordstrom
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 23
Examples of effective loading order (cont.):
Free People
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 24
Examples of effective loading order (cont.):
Starbucks
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 25
Your homepage is your first shot at making a good impression, and even
small errors can lead to customer frustration or site abandonment. If
you need help overcoming homepage challenges or advice on how to
optimize your homepage, contact VOLTAGE at 303-664-1687 or email us
at info@voltagead.com.
5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 26
THANK YOU
voltagead.com

Más contenido relacionado

Similar a 5 common-homepage-mistakes

Multi screen-moblie-whitepaper research-studies
Multi screen-moblie-whitepaper research-studiesMulti screen-moblie-whitepaper research-studies
Multi screen-moblie-whitepaper research-studies
PaPer Li
 
ebook01_get-online-get-found
ebook01_get-online-get-foundebook01_get-online-get-found
ebook01_get-online-get-found
Mike Arlinsky
 
Top 10 Website Redesign Disasters – And How to Avoid Them
Top 10 Website Redesign Disasters – And How to Avoid ThemTop 10 Website Redesign Disasters – And How to Avoid Them
Top 10 Website Redesign Disasters – And How to Avoid Them
Giles Adam Thomas
 

Similar a 5 common-homepage-mistakes (20)

Where Did You Go? Why You’re Website’s Not Converting and How to Fix It
Where Did You Go? Why You’re Website’s Not Converting and How to Fix ItWhere Did You Go? Why You’re Website’s Not Converting and How to Fix It
Where Did You Go? Why You’re Website’s Not Converting and How to Fix It
 
Multi screen-moblie-whitepaper research-studies
Multi screen-moblie-whitepaper research-studiesMulti screen-moblie-whitepaper research-studies
Multi screen-moblie-whitepaper research-studies
 
PRINCIPLES OF MOBILE SITE DESIGN Via Google
PRINCIPLES OF MOBILE SITE DESIGN Via GooglePRINCIPLES OF MOBILE SITE DESIGN Via Google
PRINCIPLES OF MOBILE SITE DESIGN Via Google
 
Principles of Mobile Site Design: Delight Users and Drive Conversions
Principles of Mobile Site Design: Delight Users and Drive ConversionsPrinciples of Mobile Site Design: Delight Users and Drive Conversions
Principles of Mobile Site Design: Delight Users and Drive Conversions
 
Как сделать идеальный мобильный сайт: 10 рекомендаций Google
Как сделать идеальный мобильный сайт: 10 рекомендаций GoogleКак сделать идеальный мобильный сайт: 10 рекомендаций Google
Как сделать идеальный мобильный сайт: 10 рекомендаций Google
 
Principles of mobile site design
Principles of mobile site designPrinciples of mobile site design
Principles of mobile site design
 
Multi screen-moblie-whitepaper research-studies
Multi screen-moblie-whitepaper research-studiesMulti screen-moblie-whitepaper research-studies
Multi screen-moblie-whitepaper research-studies
 
PRINCIPLES OF MOBILE SITE DESIGN - by Google
PRINCIPLES OF MOBILE SITE DESIGN - by GooglePRINCIPLES OF MOBILE SITE DESIGN - by Google
PRINCIPLES OF MOBILE SITE DESIGN - by Google
 
Scratch Me Not Competition
Scratch Me Not CompetitionScratch Me Not Competition
Scratch Me Not Competition
 
Principles of Mobile Site Design: Delight Users and Driver Conversions
Principles of Mobile Site Design: Delight Users and Driver ConversionsPrinciples of Mobile Site Design: Delight Users and Driver Conversions
Principles of Mobile Site Design: Delight Users and Driver Conversions
 
5 web design mistakes to avoid in 2021
5 web design mistakes to avoid in 20215 web design mistakes to avoid in 2021
5 web design mistakes to avoid in 2021
 
Designing landing pages for conversion: Best practices and examples
Designing landing pages for conversion: Best practices and examplesDesigning landing pages for conversion: Best practices and examples
Designing landing pages for conversion: Best practices and examples
 
Book - Retail's Last Mile: Why Online Shopping Will Exceed Our Wildest Predic...
Book - Retail's Last Mile: Why Online Shopping Will Exceed Our Wildest Predic...Book - Retail's Last Mile: Why Online Shopping Will Exceed Our Wildest Predic...
Book - Retail's Last Mile: Why Online Shopping Will Exceed Our Wildest Predic...
 
Market Motive Conversion Project
Market Motive Conversion ProjectMarket Motive Conversion Project
Market Motive Conversion Project
 
Leicester Digital 2019: 5 false assumptions about your online traffic - 2019 ...
Leicester Digital 2019: 5 false assumptions about your online traffic - 2019 ...Leicester Digital 2019: 5 false assumptions about your online traffic - 2019 ...
Leicester Digital 2019: 5 false assumptions about your online traffic - 2019 ...
 
Cresterea vanzarilor in magazinele online
Cresterea vanzarilor in magazinele onlineCresterea vanzarilor in magazinele online
Cresterea vanzarilor in magazinele online
 
ebook01_get-online-get-found
ebook01_get-online-get-foundebook01_get-online-get-found
ebook01_get-online-get-found
 
Epic Marketing Fail x 7
Epic Marketing Fail x 7 Epic Marketing Fail x 7
Epic Marketing Fail x 7
 
Top 10 Website Redesign Disasters – And How to Avoid Them
Top 10 Website Redesign Disasters – And How to Avoid ThemTop 10 Website Redesign Disasters – And How to Avoid Them
Top 10 Website Redesign Disasters – And How to Avoid Them
 
Easy clickbank cash
Easy clickbank cashEasy clickbank cash
Easy clickbank cash
 

Último

How To Structure Your Web3 Website For Max Visibility In The Bull Market🚀
How To Structure Your Web3 Website For Max Visibility In The Bull Market🚀How To Structure Your Web3 Website For Max Visibility In The Bull Market🚀
How To Structure Your Web3 Website For Max Visibility In The Bull Market🚀
Victoria Olsina
 

Último (20)

Snapshot of Consumer Behaviors of April 2024-EOLiSurvey (EN).pdf
Snapshot of Consumer Behaviors of April 2024-EOLiSurvey (EN).pdfSnapshot of Consumer Behaviors of April 2024-EOLiSurvey (EN).pdf
Snapshot of Consumer Behaviors of April 2024-EOLiSurvey (EN).pdf
 
Beyond the Basics: Enhanced Strategies for Next-Level Advertising
Beyond the Basics: Enhanced Strategies for Next-Level AdvertisingBeyond the Basics: Enhanced Strategies for Next-Level Advertising
Beyond the Basics: Enhanced Strategies for Next-Level Advertising
 
How To Structure Your Web3 Website For Max Visibility In The Bull Market🚀
How To Structure Your Web3 Website For Max Visibility In The Bull Market🚀How To Structure Your Web3 Website For Max Visibility In The Bull Market🚀
How To Structure Your Web3 Website For Max Visibility In The Bull Market🚀
 
Beyond Silos: How Holistic B2B Digital Strategy Drives Pipeline
Beyond Silos: How Holistic B2B Digital Strategy Drives PipelineBeyond Silos: How Holistic B2B Digital Strategy Drives Pipeline
Beyond Silos: How Holistic B2B Digital Strategy Drives Pipeline
 
Building Your Customer Base with MailPoet.pdf
Building Your Customer Base with MailPoet.pdfBuilding Your Customer Base with MailPoet.pdf
Building Your Customer Base with MailPoet.pdf
 
Mastering Email Marketing - A Comprehensive Guide.pdf
Mastering Email Marketing - A Comprehensive Guide.pdfMastering Email Marketing - A Comprehensive Guide.pdf
Mastering Email Marketing - A Comprehensive Guide.pdf
 
Social Media Paid Ads Performance Report.pdf
Social Media Paid Ads Performance Report.pdfSocial Media Paid Ads Performance Report.pdf
Social Media Paid Ads Performance Report.pdf
 
Fantasy Cricket Apps: A New Viewpoint for Online Cricket Betting Apps
Fantasy Cricket Apps: A New Viewpoint for Online Cricket Betting AppsFantasy Cricket Apps: A New Viewpoint for Online Cricket Betting Apps
Fantasy Cricket Apps: A New Viewpoint for Online Cricket Betting Apps
 
Marketing Automation Insights - Unlocking Success
Marketing Automation Insights - Unlocking SuccessMarketing Automation Insights - Unlocking Success
Marketing Automation Insights - Unlocking Success
 
The BoF Brand Magic Index Volume Two — Preview.pdf
The BoF Brand Magic Index Volume Two — Preview.pdfThe BoF Brand Magic Index Volume Two — Preview.pdf
The BoF Brand Magic Index Volume Two — Preview.pdf
 
SocialMedia Marketing Plan for TheSparksFoundation
SocialMedia Marketing Plan for TheSparksFoundationSocialMedia Marketing Plan for TheSparksFoundation
SocialMedia Marketing Plan for TheSparksFoundation
 
The Future Normal - DIGGIT - Henry Coutinho-Mason.pdf
The Future Normal - DIGGIT - Henry Coutinho-Mason.pdfThe Future Normal - DIGGIT - Henry Coutinho-Mason.pdf
The Future Normal - DIGGIT - Henry Coutinho-Mason.pdf
 
Best Digital Expert Corporation of India
Best Digital Expert Corporation of IndiaBest Digital Expert Corporation of India
Best Digital Expert Corporation of India
 
Admya Infotech is the Best Digital Marketing Company
Admya Infotech is the Best Digital Marketing CompanyAdmya Infotech is the Best Digital Marketing Company
Admya Infotech is the Best Digital Marketing Company
 
Why Digital Marketing Important for our Business.pdf
Why Digital Marketing Important for our Business.pdfWhy Digital Marketing Important for our Business.pdf
Why Digital Marketing Important for our Business.pdf
 
Japanese Sauna Hat Trends - Totonoete Inc.
Japanese Sauna Hat Trends - Totonoete Inc.Japanese Sauna Hat Trends - Totonoete Inc.
Japanese Sauna Hat Trends - Totonoete Inc.
 
Webinar: What the Hell is Legitimate Interest?
Webinar: What the Hell is Legitimate Interest?Webinar: What the Hell is Legitimate Interest?
Webinar: What the Hell is Legitimate Interest?
 
5 BENEFITS OF SOCIAL MEDIA MARKETING.pptx
5 BENEFITS OF SOCIAL MEDIA MARKETING.pptx5 BENEFITS OF SOCIAL MEDIA MARKETING.pptx
5 BENEFITS OF SOCIAL MEDIA MARKETING.pptx
 
Content Segmentation for Organic Visibility
Content Segmentation for Organic VisibilityContent Segmentation for Organic Visibility
Content Segmentation for Organic Visibility
 
Rhys Cater, Precis, The future of media buying with Generative AI.pdf
Rhys Cater, Precis, The future of media buying with Generative AI.pdfRhys Cater, Precis, The future of media buying with Generative AI.pdf
Rhys Cater, Precis, The future of media buying with Generative AI.pdf
 

5 common-homepage-mistakes

  • 1. By: Allie Edgar Mar. 6,2018 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM
  • 2. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 2 Is your homepage scaring people away? A surprising number of well-known websites make these common UX mistakes.
  • 3. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 3 You have one shot to deliver a first impression. That’s why your homepage should be perfectly tuned. A well-executed page must simultaneously: Explain what you do or sell, Feature specific products or promotions and Quickly direct the potential consumer to their de- sired page. 1 2 3
  • 4. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 4 While no site is perfect, simple mistakes disrupt the site’s user experience and path to purchase thereby tanking conversions as potential customers click away. We’ve compiled a list of the top five most common homepage mistakes and how to combat them on your retail or eCommerce site.
  • 5. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 5 MISTAKE #1: PRODUCT HIDE AND SEEK
  • 6. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 6 Consumers don’t dig through a website looking for things they think will meet their retail needs. They want to dial in on what they are looking for right away. Failing to correctly represent your site can: Result in short and long-term sales losses Drive users to your competitors PRODUCT HIDE AND SEEK
  • 7. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 7 Here’s an example of poor representation on the homepage: Overstock.com almost exclusively features furniture and home decor, but further exploration reveals they also sell jewelry, kitchen appliances and sporting equipment. overstock.com
  • 8. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 8 And here’s an example of a well-executed homepage: Target does an exceptional job of balancing featured items and different shopping categories. Target’s homepage even presents customers with all different shopping options on top of the full spectrum of categories. Target
  • 9. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 9 MISTAKE #2: ADS ON THE HOMEPAGE
  • 10. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 10 Advertisements, or content that looks like ads, mark the second most disruptive homepage error. Pop-up boxes, page takeovers, promotions or dialog boxes are poorly perceived and often leave users with a negative, even spammy, impression. Not to mention heading for the proverbial exit in frustration. Promotions, dialog boxes or site specials should be carefully executed. Consider size, placement, timing and overall look and feel when adding these to your page. ADS ON THE HOMEPAGE
  • 11. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 11 Poor “ad” executions: Users are immediately greeted with a pop-up box soliciting an email sign up. This pop up puts customers several clicks away from their desired page and asks for personal information from a consumer who may not be familiar with the brand. Tentree Birchbox
  • 12. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 12 Good “ad” executions: adidas uses clean design, photography and CTAs to engage with users. There are no big promotional ads or pop-up boxes. Outdoor Voices uses their homepage for product features and carousel images while still offering deals in a non- disruptive way. (Free Shipping callout at top of page) adidas Outdoor Voices
  • 13. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 13 MISTAKE #3: CAROUSELS WITH AUTOROTATION
  • 14. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 14 Carousels offer a clean, effective way to feature different products and promotions. However, when combined with autorotation, this common tool presents several challenges. Autorotation poses readability and redirection problems for the customer. To combat these issues, carousels should: CAROUSELS WITH AUTOROTATION Rotate at a slower speed Pause rotation when hovered over Stop completely after any interaction
  • 15. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 15 Poor carousel interaction (top right): Well-executed carousel interaction (below): Mindy Mae’s Market features an auto-rotating carousel that rotates at a good pace but does not pause when hovered over or stop rotation after interaction. Converse adheres to correct carousel standards. Slides rotate at appropriate intervals, pause when hovered over and rotation stops after interaction. Mindy Mae’s Market Converse
  • 16. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 16 MISTAKE #4: EFFECTIVE FILTERING
  • 17. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 17 Filtering and organization is key to good UX. Consumers should be able to easily navigate away from the homepage. Oversiimplified and undefined filtering methods may lead users to a page or product they weren’t looking for, which causes frustration and abandonment. Effective organization means: EFFECTIVE FILTERING Incorporating categories and subcategories into your site Allowing users to narrow their search scope until they find the desired page
  • 18. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 18 Example of poor filtering: Beats by Dre may have a sleek look, but they only feature specific products and do not mention or link to various categories. Beats by Dre
  • 19. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 19 Examples of effective filtering: Reebok effectively features different categories, like CrossFit® and UFC, and offers various filtering methods in the page header. Reebok
  • 20. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 20 MISTAKE #5: MAIN NAVIGATION AND SEARCH BAR LOADING
  • 21. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 21 It’s crucial your website accommodates return customer behavior with thoughtful design and better loading times. This can be achieved with HTML content ordering — prioritizing these elements in the code to be displayed before the rest of the page has been downloaded — or asynchronous loading– ensure these elements load quickly with other featured homepage elements. MAIN NAVIGATION AND SEARCH BAR LOADING
  • 22. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 22 Examples of effective loading order: In each of the following examples, the main navigation and search functions load either before or at the same time as the page. This gives users quick access to the action they need. Nordstrom
  • 23. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 23 Examples of effective loading order (cont.): Free People
  • 24. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 24 Examples of effective loading order (cont.): Starbucks
  • 25. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 25 Your homepage is your first shot at making a good impression, and even small errors can lead to customer frustration or site abandonment. If you need help overcoming homepage challenges or advice on how to optimize your homepage, contact VOLTAGE at 303-664-1687 or email us at info@voltagead.com.
  • 26. 5 COMMON HOMEPAGE MISTAKES AND HOW TO AVOID THEM 26 THANK YOU voltagead.com