(This is part one in a series of posts about designing a new webpage from scratch, before you have any concrete data to guide your design-decisions.)
When you’re designing a new page the most important things to know are 1) what action you want your users to take, 2) what elements you want to display on that page and 3) the priority of those elements.
1) Page Goal
The very first thing you need to figure out is what action you want your users to take: what you want them to do on your page. Few goals (or even a single goal) is typically preferable as too many goals can confuse users and paralyze decision-making.
On blogs like this one the goal is pretty obvious: have people read your posts. In practice this means getting people to read a couple of posts on the site and then sign up for future posts through an e-mail newsletter or RSS feed.
If you’re designing a product page, the goal is to get people to put the product in their shopping cart.
2) Display Lists
The next thing you need to figure out is what you want to display on the page. Lists are usually good for this, so the next step is to write a few simple lists of all the elements you want to display on the page, which is exactly what we did when designing this blog.
It’s always easy to get started with this step as you can simply add the goal from step 1, in our case this was “E-mail sign up form” and “RSS feed link”. Next up, we wrote a list of all the elements a posts should have: like title, body text, publication date and author name. All this usually takes a little while since you’re writing everything down that needs to be on the page – you’re deciding what gets in, and what is left out.
Now, it’s important to avoid writing anything design-related just yet. E.g. don’t give one of your lists a heading called “Sidebar” because at this point you actually don’t know if the final design should have a sidebar, all you know is what elements need to be in the design.
3) Priority Lists
Finally, take all your lists and prioritize them. What’s the most important thing on the site? What’s the second most important? And third, and so on. For this blog we put the “Posts-list” first on the priority list since this was the most important thing.
After prioritizing the lists, you should prioritize the elements within each list by visual importance, putting the most important elements at the top. Within the “Posts-list” we placed the title at the very top, followed by the author name since we really wanted to highlight that multiple people was behind this project. Next on our list was comments for social proof, but only if one or more comments had actually been written, otherwise it should be hidden.
After this came the actual body text since we wanted to make it really easy for people to dive right into the content and so it should be really prominent. Then came the “Post a comment” link which we felt belonged longer down the list because its immediate visual importance shouldn’t be too significant – only after reading the post should this pop out to the reader’s eyes. And finally, the last element on our “Posts-list” was the publication date which we didn’t want to be of visual importance and should only be noticed by readers who were specifically looking for this piece of information.
You can see how doing these prioritized lists forces you to ask a lot of important questions and demand you choose certain elements over others. All this is really important for your design as it will determine where to place what elements and help you decide how much weight to give them in terms of size and color. So with this prioritized list in your hand, you have everything you need to begin doing your first design drafts.
Oh, did you notice that? We haven’t actually designed anything yet, instead we’ve been defining what needs to be in the design and what importance those things have, because really, how can anyone create a good design for something if they have yet to figure out what it is they’re designing?
I’d love to hear about your approach to designing a new website or page, so please share your experiences in a comment (2 so far).
One year ago I got quite a big surprise when looking at the statistics of a newly launched website: out of 2,000 visitors, 32% clicked a link leading them to the page they were already on. But why?
Goalless page.
Well, the page in question was a long, high-quality article about how to differentiate your business in today’s cluttered marketplace. After reading all the way through the article, the readers wanted something. They wanted to read more. However, because there was no information or call-to-action after the article they started scrolling up the page again. Here, a set of “Quick links” (links to other articles) would meet the visitor in the sidebar. However, since there was only one article on the site, the only link in this sidebar was a link to the current selected article.
Now, despite the fact that this link had the exact same anchor text as the headline of the 8000-characters long article they had just read, one-third of all visitors still clicked this link. The identical headline and link were even placed right next to each other, 32% clicked the link in the hopes of getting a new article.
Fatal mistake. Obvious solution.
The real goal of the page was to get people to sign-up for a newsletter (which would inform them of new articles), but the newsletter form was placed on a separate page you could only arrive to by clicking a “newsletter” link in the navigation. Only 0,58% signed up for the newsletter. Clearly a lot more people actually wanted to sign-up.
Our mistake was obvious. And so was the solution: have the newsletter sign-up form right at the end of the article.
Placing this sign-up form at the end of the article increased sign-up rate by 274%.
This change increased the sign-up rate by 274%, from 0,58% to 1,59%. Think about that: a 274% increase in conversion rate by making such a simple (and obvious) change.
Conclusion.
You need a goal on every page, and you need to test that goal and track how people are using the page in general. Don’t think that a prominent link in the navigation menu is enough: always put a clear call-to-action (in a sensible place) on each and all of your pages.
Have you experienced something similar yourself? Let us know by posting a comment (7 so far).
Do you want more articles like this?
What exactly do Toyota, Nike and Apple expect in return when they throw millions at their designers? “Something really pretty; something beautiful” one might say. True, but when we think about it, we all know that at the end of the day, what these companies expect in return is increased sales. They expect to sell more.
So do the same rules and expectations apply to the web? While the processes and tasks of a web designer may differ from those of an industrial designer, their core business goal ought to be the same: to increase sales. However, this is often not the case. A lot of websites are “over designed”, some websites being closer to a piece of art than a platform for sales or leads of some kind.
Perhaps consumer products are to blame. E.g. one might be lead to think that because a beautiful car sells better than its uglier alternative, a beautiful website will likewise sell better than an ugly website. However, there’s an important difference between the two: the car is a consumer product, whereas the website is a platform for selling products or services, directly or indirectly.
This difference is important to keep in mind because a beautiful web design often also translate into a broken website that’s difficult to use (unlike a car which rarely gets more difficult to steer just because it looks good). Some of the common offenders you’ll find on these beautiful but broken websites are: confusing navigation, breaking of web-conventions, decoration fluff, lack of clear directions and labeling, no call-to-action (or too many), and too small font sizes.
A web designer might interrupt me now and say “well, I have succeeded in creating a site that’s beautiful and sells a lot”. The key here is priority. What do you have in mind when designing a new website:
- One that looks good or one that converts well?
- And which of those two do you spend most of your time working on?
- When you get an idea for an element for the site that looks really good, but makes the site a bit more difficult to use; do you implement it?
Truth to be told, most web designers focus on the looks part more than they do on the conversion/usability part, which is fundamentally flawed, because the business goal for the site is to sell more – something that’s directly related to the usability of the site. This is why I’m so fond of the word “conversion design”.
Conversion design essentially means you prioritize conversion over aesthetics. In conversion design, graphic elements are only added when they encourage the visitors of the website to complete a desired goal. The navigation menu is designed to be easy to use, not necessarily to blend in perfectly well with the look and feel of the overall design. And any element that doesn’t increase usability is removed no matter how flat or bland the site end up looking.
Some may say this doesn’t have much to do with design. I beg to differ. Design is about achieving goals, not decorating elements for the sake of making them pretty. Web design is about influencing the behavior of your visitors, structuring every element on the website around an overall goal, typically selling a product or having visitors sign-up for something. You use design as a tool to achieve and maximize the ultimate strategic goal of your site: to turn visitors into customers.
Conversion design is about fulfilling the business goal of your website: to sell more.
What is your opinion on conversion design? Post a comment (5 so far).
What?
Baymard Institute is a publishing group that conducts research on how to improve conversion and web usability. We’re currently conducting a research study on e-commerce checkouts which will published spring 2010.
On this site we will be publishing a new article approximately once every week and we encourage people to participate in the discussion by posting their own comments below each article.
Why?
Our main philosophy is conversion design, meaning design with the purpose of improving your conversion rate – turning visitors into customers – instead of design where the end goal is “something beautiful”.
Too many design decisions are based on gut feelings and subjective opinions, putting beautiful above effective. We see web design as a (business) tool you can use to make your website more user friendly and ultimately convert better.
Who?
Baymard Institute is currently being run from Copenhagen, Denmark, by Christian Holst and Jamie Appleseed.
Christian Holst holds a master’s degree in Design & Innovation (with a main focus on usability) from the Technical University of Denmark.
Jamie Appleseed has more than 7 years of work experience designing websites with a focus on usability.
You can get in touch with us at hello@baymard.com
