Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo
Creating an inviting "entry point" is important in any type of design discipline, but especially so on the web where attention spans are low and the the first moments of a user's visit can make it or break it. Whether your goal is to create a flashy "splash screen" or you're designing a more traditional homepage, there are simple design decisions that you make can to improve your chances at keeping visitors on your site.
In this article, we will outline the main principles of designing an effective entry point for your website. We won't be discussing any specific elements in depth; Rather, we'll be examining the overarching principles that any designer should have in mind when creating that ever-important first impression of a site.
People Judge Books By Their Covers
Regardless of what their momma's taught them, people just can't seem to kick the habit of judging things by their very first impressions. While a pessimist might say this is tragic, book designers around the world rejoice every time they hear it, and you should too!
Researchers seem to agree that you have between 3 and 5 seconds to grab a visitor's attention. This initial impression of a website greatly influences the visitor's perception of the site as well as their attitude towards the content on that site. A slow loading page or an annoying splash screen can send people away from the page before they even see what it has to offer. Additionally, sites that use pop-up advertisements, modal windows, and make people jump through other hoops just to get to the main screen can seem intrusive, even if the website owner's have good intentions.
Creating an entry point that actually works to improve your chances at keeping visitors around isn't all that hard though. What follows are the three main principles of "good entry point design" that every designer can use in his/her own site, regardless of what the website is for:
Principle 01: Break Down the Barriers
Consider the entry point of your site as if it were a storefront: You wouldn't force visitors to your store to stand and listen to a 30 second introduction speech before they were allowed to shop; You also wouldn't stuff their hands full of advertisements for other stores, subscriptions, surveys, or anything else as they walked in the door either. Your main goal when designing a storefront is simple: make the shopping process as simple, smooth, and straight forward as possible. The same rules apply to web design: the less distractions that you offer at the entry point, the better experience your visitors are going to have.
You wouldn't force visitors to your store to stand and listen to a 30 second introduction speech before they were allowed to shop...
Style, character, branding and personality are all great things for your website to have, but if your site fails to get users to actually click around, even the most appealing design won't improve your traffic rankings.
There should never be a barrier placed between the visitor and what they are seeking. Examples of barriers include the notorious pop-up advertisements and long-loading splash screens, but they can include quite a few other things. Consider a survey that invites users to share their feedback to improve the site: this might seem like a great idea on the surface, but many users will see anything that gets in their way as a reason to leave. Remember, the web is a big place - if users are presented with barriers between themselves and the information they seek, they'll leave quickly to find another site that's barrier free.
There are a variety of reasons why you might need to include a barrier though. Sites that require age verification, require special plugins, or need users to specify a country of origin all require a "checkpoint" page where users can be channeled to the right place. If you absolutely must include one of these barrier elements, make darn sure that it looks immaculate; Just as a visitor to our hypothetical storefront might not enter if the outside of your store if it looks dirty or unkempt, visitors to your website might leave quickly if the splash screen is confusing or convinces them that the website isn't what they are looking for.
Examine Coda's homepage - a small handful of clear choices are offered, nothing else to distract or confuse the visitor.
Coda is a web-development application that combines a wide variety of tools under one roof. It sounds complicated (and it is if you really think about it!), but Coda's homepage has always been the epitome of simplicity. By limiting the amount of information that they give to users on the homepage, they invite users to A) download the app or B) get more information. Either choice that a user makes, the goal of bringing them into the site has been achieved!
Principle 02: Design Points of Interest
An effective entry point should allow visitors to quickly orient themselves with where they are now and where they can go. In our hypothetical storefront, this might mean providing a clear vision of the main aisles in the store. In a website, this can be as simple as designing a clear, well organized navigation menu. The underlying principle is to allow people to review their options without confusion or clutter. Including "orientational cues" to help visitors know where they can search and how to find the content their are searching for are simple ways that design can increase the usability of a site.
Designing points of interest doesn't need to be complicated; On the contrary, points of interest in a design should be simple, well spaced out, and easy to recognize. Packing in too many points of interest can actually break a design by overloading a user with options.
Think of your website design like a restaurant menu: If a waiter hands you a menu that's 100 pages long, you won't know where to begin looking for what you want to eat. If your waiter hands you a simple menu with 5 or 6 tasty entree options, you'll probably be able to decide within moments (and then you can move on to having an enjoyable meal)!
Example: iTunes Music Store
This is the iTunes Music Store by Apple. Notice the wide array of options the user is presented with at just a glance.
The iTunes Music Store example is a curious one; There aren't many more difficult design tasks than trying to design a music catalogue that appeals to both hard-rockers, hip hop lovers, and my own dear mother. The iTunes storefront does just that though - by designing points of interest across the page, as well as archival-functioning links on the right side, nearly every type of user is given something of interest - whether it be people hunting for a very specific artist, or casual browsers just looking for what's new. I'm sure there are people that dislike this design for one reason or another (this is an Apple product after all!), but it's hard to argue with the function of the design here.
Principle 03: Designing Progressive Lures
The elements on a site's landing page should be used to attract and move people through the entry point. Including elements that draw attention, such as an interactive jQuery slider, can quickly bring a visitor into a site by inviting them to click to find out more about a particular slide. Use compelling headlines for new or exciting content can attract a visitor's interest; Break up content into clearly defined categories to help users find something that interests them. The perfect set of design elements is going to be different for each and every site, but consider the content that you have, and design your homepage to feature that content as if it were a feast laid out on a table (as opposed to a confusing pantry of ingredients!).
Example: The Daily Beast
Thedailybeast.com homepage does an effective job at creating an entry point that offers a wide range of lures.
Thedailybeast.com is another interesting animal. They are essentially a political newspaper - a type of site that hasn't always seen the highest of design standards. But where other "newspaper" type sites have tried and failed, The Daily Beast succeeds. They do it by creating multiple "entry points" into their site from the homepage. There is an image slider, a bold "cheat sheet", multiple major headlines, and so much more. Whether or not you agree with their writing, it's awfully hard not to click something.
Designing an effective entry point need not be complicated or difficult. If you can break the main message of your site into a few simple points, you can use those points as a roadmap for your design. Eliminate the barriers between your users and your content, and they'll naturally find their way to each other. Leave some comments below!