A homepage is the gateway to a site’s content, functionality, and overall UI/UX design. It dishes out the first taste of what the site offers. A visitor may leave in seconds if the site does not impress, so the homepage must deliver the primary message quickly. An inviting homepage is the beginning of a great user experience.

Fresh Consulting’s UI design framework evaluates dozens of ingredients found in many of the best homepages. Here are five of the points related to homepage UI design:

1. Focus on the Experience
2. Make it Easy
3. Make it Scannable
4. Use a Clear Call to Action
5. Assure SEO Fundamentals Are in Place

1. Focus on the Experience

User Experience

A site creates value when people find it and use it. The first step is engaging the target audience by creating something they will want to experience. User Experience (UX) is how people perceive their interaction with the site. UX combines sight, sound, touch, actions, emotions, and social stigma, all with individual context.

A great homepage is much more than a collection of words and images. UX designers focus on making the page not just useful, but enjoyable to use. The focus is on delighting the user.

“Give users what they want — and a little more. In addition to enabling users to use your service effectively and efficiently, make them also think, ‘Wow, this application is genius.’ Exceed their expectations desirably. If you do so, they will use your website or app not because they have to but because they want to.” (Helge Fredheim – Why User Experience Cannot Be Designed).

Snowbird

Snowbird’s homepage delivers an alluring user experience. The site can be a preliminary piece of the skiing ritual in the same way the smell of buttered popcorn prepares you to enjoy the movie theater experience.

A few ways Snowbird crafts the user experience:

• Sight: Images of pristine powder
• Color scheme: White and blue match the mountain vista
• Accessibility: Most important info is presented first
• Utility: Real-time data
• Motion: The forecast details unfold like a physical pamphlet
• Emotion: Live cameras evoke the feeling of being at the resort

2. Make it Easy

Simplicity

Simplicity is intentionally including the most essential pieces, and intentionally excluding unnecessary pieces. The design and visual elements should showcase the site’s purpose. People should immediately understand what your website is about, and what you want them to do. A homepage can be a summary of other sections of your site or simply guide people to the most important call to action.

Let It Go

The key is to know when to let go. Steve Krug explains “if a site is at all complex even the best Home page design can’t do it all” (Don’t Make Me Think). It’s ok. Some things can wait. Others can live on a secondary page. And a whole lot of things don’t need to be published at all.

This principle is captured by a scene at the end of Indiana Jones and the Last Crusade. The holy grail is just beyond the hero’s reach as he hangs by one hand. “I can get it! I can almost reach it.” His father responds (with the calm sagacity of Sean Connery), “Indiana. Let it go.”

Visit Norway

The welcome page for Visit Norway [link updated in 2022 since this site is no longer live] embraces simplicity, with impressive results.

Surely there was pressure to include dozens of messages, features, and links on the welcome page. But a decision was made that one thing mattered more than all else for the target audience: seeing the breathtaking landscape. Let nature do the selling. Everything else we need to know can be accessed on the secondary pages. The simplicity of this page helped bring home a Webby award for best home/welcome page.

As everyone knows, pictures are worth a thousand words, and coupled with key messaging, pictures can help users envision all of the great information you want to convey.

3. Make it scannable

Small Bites

We don’t read web pages, we scan them. People absorb more content if the page is easy to understand in small bites. Content is also easier to share across social networks when it’s tightly packaged.

How to make a page scannable:

• Words – use simple terms
• Sentences – short and to the point
• Paragraphs – focus on a single idea, break up the page
• Bullet points – visualize lists
• Spacing – use white space liberally
• Headlines and Subheadlines – give a quick view of content
• Inverted Pyramid – lead with most important points (within pages, paragraphs, and sentences)
• Images – worth a thousand words

Modern Homepages

We’re seeing many websites create sections on their home page with clear titles or pictures that are easy to scan. A site can be simple and easy and still be long vertically. Designers are simplifying homepage UI by lengthening the pages and including less information to digest at once. As the user scrolls, they are taking in more supplementary information.

Memory Palaces

Breaking the content into pieces gives the brain anchors to remember ideas. Our memory is hard-wired to look for spatial relationships. (World Memory Champion Dominic O’Brien used a ‘Memory Palace‘ to memorize 1040 random digits in a half hour). This is why it may be easier to remember a 10 digit phone number (e.g. 877 563-7374) rather than a single string of 10 digits without context (8775637374).

Spotify

The homepage for Spotify uses a vertical structure for easy scanning. The homepage has 7 sections, each showcasing a banner image and a short message no longer than 40 words. You can understand the complete message by literally scanning the page, reading nothing more than the 15 words contained in the headlines.

The page is structured so one message displays on the screen at a time. This makes the content easier to digest. Additional images, diagrams, and bulleted lists round out the content for people who want a quick overview.

4. Use a Clear Call to Action

Invite

The homepage UI should invite visitors to stay, explore, or take action. The call to action (CTA) lays out what the user is expected to do. Users anticipate receiving this guidance on a homepage.

How to design a great Call to Action:

1. Make it stand out. Size, color, and surrounding negative space can help focus attention on the CTA.
2. Use a clear label. Use a precise, active verb. “Join now” is better than “memberships.”
3. Make it look clickable. A button with contrasting color works well.
4. Limit the number of choices. Many sites only need one CTA on the homepage. If more choices are necessary, pay attention to the positioning within the page. Often, placing a few calls to action in close proximity improves clarity, and helps users compare options.

Turning Point

The Turning Point campaign’s homepage presents a clear call to action.

1. The “Donate Now” button stands out with a green shade against surrounding negative space.
2. The action verb “donate” is precise.
3. The green button appears clickable. And the designers took it one step further. The entire banner graphic, representing half the pixels above the fold, is a clickable object. This is especially helpful on a mobile device.
4. The page focuses on the primary action – Donate Now. All other choices are grouped together in the header. This layout ensures the secondary options do not distract from the primary CTA.

5. Assure SEO fundamentals are in place

Content First

As search engines get smarter and smarter, search engine optimization should be about connecting the right content with the right people. “The best way to improve your ranking is to produce great content that people link to” (“The Inconvenient Truth About SEO“). The foundation of great content is an experience that the target users will not forget, and want to share with others. In other words, “make pages primarily for users, not search engines” (Google’s webmaster guidelines).

SEO trickery will only take you so far, and anything black hat will eventually catch up to you, so focus on the basic fundamentals. This includes reviewing the technical SEO points and choosing appropriate keywords, titles, and descriptions that will attract your target audience.

Trek Bikes

For example, Trek Bikes is the leading manufacturer of bikes by US sales. Their website is clearly tailored to people interested in bikes. It showcases bikes, gear, and stories. With this content, capturing their target audience is a downhill race.

We analyzed the basic SEO of trekbikes.com. On the positive side, each of the following elements includes the keyword “bikes”:

• URL: www.trekbikes.com/us/en
• Title: Trek Bicycle: The world’s best bikes for road, mountain, or town.
• Section Heading: We believe in bikes

But Trek also missed some easy points:

• Banner graphics: No alt tags – should add a quick description, possibly about “bikes”
• Meta Description: 1995 – 2013 Trek Bicycle Corporation. All rights reserved. This description should be customized with a more compelling emphasis of key content.

The results? Despite some weak points in the SEO analysis, Trek ranks in the top 5 results for the following searches:

• Bike
• Bicycle
• Mountain Bike
• Road Bike
• Bike Gear

Is this because Trek has decent SEO fundamentals? No, it’s because thousands of people link to the Trek website and the brand has been around for dozens of years. SEO is much easier when the whole site is optimized for the target market from the beginning. The amount of time a site has been delivering relevant content matters, and so does the amount of content.

Additional Resources

Homepage UI Design

Hubspot – 15 examples of brilliant homepages and elements of homepage design.
Mashable – 8 Tips for small business homepages.
Nielsen Norman Group – Top 10 guidelines for homepage usability

User Experience

Smashing Magazine – Usability and User Experience
UX Myths – Frequent User Experience Misconceptions

Make it Easy

UX Myths – Myth: more choices and features result in higher satsifaction
Boag World – Three secrets to simplicity

Make it Scannable

Nielsen Norman Group – How Users Read on the Web
UX Movement – Content Chunking
Econsultancy – 14 Fantastic Scrolling Websites that Tell a Story

Call to Action

Smashing Magazine – Call to action buttons and best practices
Boag World – 10 techniques for an effective call to action
limwriter – Craft an Effective Call to Action

SEO

Nielsen Norman Group – SEO and Usability
Smashing Magazine – The Inconvenient Truth About SEO