Anatomy of a Well Designed Home Page: Part 1 - Splat, Inc.
Your website’s home page is the most important page on your business’ site. Much like a headline in a print advertisement, its success will largely determine whether visitors surf to deeper content or take a quick glance and call it a day. Nail the essentials of good home page design and you’ve radically increased your brand’s conversion goals, from mailing list signups, to purchasing products or buying a SaaS subscription product.
If the home page is so darn important, then, why are there so many lousy ones, even on some well-known brands? In this post, we’ll take a look at why so many home pages fail and what the fewer, successful pages share in common.
Coherent navigation. Designing a main navigation menu area which simplifies decision making is critical to get your users to find the deeper content they’re looking for on your site. The advent of responsive design has brought new types of menus to both mobile and desktop users. From full screen overlay menus to the too-popular hamburger to the old-reliable mega menu, good menu design relies less on trends and more on how well the particular solution accomplishes the UX needs of the site. Often in our experience, the greatest hindrance we find to creating clean navigation structures is the insistence on some clients of too many top level menu elements. Ideally, we’ve found that 4 – 7 top level choices create a manageable number of decisions for users to make. Of course, beneath some of those major choices, it’s perfectly fine to use some sort of dropdown system to illustrate even deeper content. Alternatively, this content could exist on its own, in deeper menu systems which appear on the main pages of each one of the 4 – 7 top level choices.
Contact and location. As mentioned above, the types of contact information which are necessary to include vary, depending on business type. A rule of thumb though is that, if your business receives its customers at a physical location (this would include restaurants, lawyers, architects, auto repair and retail stores, etc) then both location, telephone numbers and a form should be prominent on the page, usually in the header area. Finally, don’t forget social media profile links. Whether those links are prominently displayed at the top of the page or somewhere lower depends on a number of factors, including how important social is to your brand’s marketing strategy, how many profiles are currently maintained, etc.
Jetpack is a Photoshop extension designed for a very particular type of user, namely illustrators designing web icons. The page is simple and features an elegant (but not distracting) opening animation. The positioning statement is simple, “A Photoshop workflow tool, built for icon designers.” Note the absence of any “we do this better than our competitors” copy. That absence is easy to explain. How many other Photoshop extensions are out there designed to do what JetPack does? You can count the number on one finger. The creators of JetPack saw an opportunity to build a new tool for Photoshop which was clearly needed.
SI Digital Don’t get fooled by the nifty animation on this site. Despite a lot of visual wizardry, SI Digital still adheres tightly to the rules of good home page design. The first thing you see beneath the header is their positioning statement, which tells you who they are, what they do and why they do it better.
Kano is a ‘make it yourself computer’ for kids that teaches them both how computers are made and allows them to write code for their new device. The home page features a simple, three-tiered headline explanation of what the product is, with a background demo video of the product and a call to action in the form of a “Learn More” button. The execution couldn’t be simpler.
Crazy Egg is a monthly subscription heat mapping product which allows its users to generate heat maps illustrating where their website visitors click the most and other sorts of analytics.
Evernote is an organizational app for note keeping and calendar management.
Benefits and features description. Often it makes sense to elaborate on your product or service’s benefits and features in greater detail on the home page. This item is the one ‘situationally optional’ item. Sometimes, especially for products/services which require greater explanation beyond the positioning statement, it makes sense to create a region on the page for a deeper delve into both features and benefits.
That wraps up our ‘essentials’ discussion. In part two of this post, we’ll talk about more ‘situationally appropriate’ elements to consider having on the home page, as well take a deeper dive into some of the elements just discussed.