Try Tuts+ Premium, Get Cash Back!
Designing Effective Entry Points in Web Design

Designing Effective Entry Points in Web Design

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.


Example: Coda


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.


Conclusion

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!

Brandon Jones is MDNW on Themeforest
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://smallbitsofcode.com Boba

    Can’t even remember how many websites i closed due to a modal window popup or a loading screen for a flash website.

    A website should give the user the best experience while going from point A to point B (where A is entering the website and B is finishing the process he came to the website for) without unnecessary distractions.

    Thanks Brandon for another awesome article.

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones
      Author

      No problem Boba! Glad you liked the article.

      • http://wpcanyon.com Boba

        Wow, that was fast :) You’re in the Envato team, right? Because you’ll cost them a fortune if you’re just an author they pay :)

        Anyway i forgot to say one important thing every website owner or his designer should keep in mind. Don’t make your visitors do anything you wouldn’t want to do.

  • http://twitter.com/Digital_Misfit Jim

    So very true. The attention span of online users is getting smaller and smaller. One of the key elements I’ve found is to create an experience that makes a user forget that they are using a website. A good bank site, for example, isn’t just tabular data: it’s a financial experience. Kind of like being absorbed in a great movie.

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones
      Author

      That’s an interesting way to put it – thanks for the insight Jim.

    • Vanessa

      Jim, that’s a good point. Could you elaborate on what you mean by a ‘financial experience’ beyond just charts of data? I’m very interested into any fresh insights you might have! Thanks :)

  • http://www.lucasdelrio.com.ar Lucas del Río

    Nice article Brandon.
    It’s simple as that, always try to send a clear message of who or what you are and what you offer. The examples were very clear I think.
    I hate entering sites were you have to wait like 15 seconds for a flash stuff to load, I always close them even before they have reached the 80% in those cases.
    Once more, simplicity has a great advantage in web design.
    Thanks for the article!

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones
      Author

      Thanks for the comments Lucas – Glad you liked the article!

  • http://dxdesigns.deviantart.com/ DxDesigns

    Love the articles, but i, and I’m sure quite a few others, would love to see some interface design tutorials put into the mix :)

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones
      Author

      They interface heavy tutorials are actually on their way – I wanted to launch the site with some healthy “theory” based articles, but now that we’ve got some of those, it’s time to dig into the fun hands on stuff :) Thanks for the comments Dx!

  • http://newblackmedia.com.au The New Black Web Design

    I love “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;”

    I’ve always had trouble explaining why into screens etc do more harm than good – this is a great metaphor which ill use from now on. Thank you so much :D

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones
      Author

      Thanks NewBlack – I’ve found that keeping a collection of metaphors/analogies can be really helpful when working with clients. So often, the web can be a really intimidating medium for clients to wrap their heads around; Being able to explain it with “real world” parallels can make it so much more approachable.

      Now, if anyone comes up with a great metaphor for DNS settings, Mail Servers, and MX records that I can explain over the phone, I’d love to hear it.

  • http://www.siteoptimo.com SiteOptimo

    Nice article Brandon. What I’m always trying to keep in mind is that visitors are lazy. And I also try to speed up my sites as fast as possible, because if visitors judge your site between 3 and 5 seconds, you don’t want your site to load 3 seconds :).

    Where do you have your data from (the 3-5 seconds research)? Keep those good articles coming.

  • http://edumicro.deviantart.com Eduardo

    I think that users must have the “WOW Factor” the first time they visit a website, or see a design. If we can cause that in someone that means that the design catch their attention and they’ll spend more time in the website. This of course if the user interface is well done and visually great at the same time, hard to do, but conceptable. :)

  • http://squareform.com Brandon

    Awesome article! I’m a code monkey but am getting into design work. I’m loving the blog. Keep producing great articles man!

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones
      Author

      Thanks Brandon (great name btw ;)). I’m glad to hear some coders are getting good information from these articles too!

  • http://icontoucan.com Elliot

    Extremely good points raised, it seems like more and more visitors want the website to tell them what they’re looking for. Some good examples here which don’t involve a ghastly lightbox popup or obnoxious arrow pointing to somewhere :D

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones
      Author

      Thanks for the comments Elliot!

  • http://connorcrosby.me Connor Crosby

    Awesome explanation, that helped me out a lot! I love the metaphor with a store, it really helped :)

  • Connor Turnbull

    The quote in Principle 01 reminds me of this awesome comic by The Oatmeal:
    http://theoatmeal.com/comics/websites_stop

    Look particularly at number 7.

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones
      Author

      Yep – I love the Oatmeal! It’s funny because I wrote the article after reading that Oatmeal comic a while ago, but I never really connected the dots until you mentioned it. Either way, it’s a great metaphor :)

  • http://www.psdstyle.net Chuckles

    I think this ties right in with the Z-Layout method to designing a website. You need to grab their interest, do it quickly and easily.

    Good stuff guys

  • http://themeforest.net/user/denoizzed/portfolio?ref=denoizzed denoizzed

    Great article!
    Would be nice to have another one on “What makes an entry point / contrast in web design” – like color, size, spacing and so on. Not sure about now, but half a year ago this theme was not exposed very much on the Net.

  • Pingback: What I’ve Read: 10-10-15 to 10-10-30 | CSS Radar

  • http://www.maiconweb.com Maicon Sobczak

    Very instructive tutorial. A well done entry point is essencial to achive the objectives of the site. The thedailybeast.com is a great example.

  • http://www.techwench.com neo tech blog

    great explanation it really helping me a lot tons of thanks for this tutorial

  • Nuruzzaman Sheikh

    Nice and simple article.

    keep it up.

  • http://dbelldesign.com.au Darren Bell

    Not a bad article, I couldn’t help but feel the first few paragraphs were just repeating themselves.

  • Pingback: Best Design Articles October 2010 | 39Articles

  • Pingback: Best Design Articles October 2010 - DesignModo

  • Pingback: Best Design Articles October 2010 – Openmasti