How to design a website from the ground up
This is a short step-by-step guide of a bulletproof strategy to design great layouts for websites and applications.
Recently, I gave a presentation with the same title in the fabulous Four Seasons Hotel in Budapest, Hungary. My goal was to give a few ideas about how users think, what affects the bounce rate and how you can test and research to improve user experience and keep your visitors from bouncing.
The presentation was quite a success so I thought it would be a good idea to put together a quick summary for you.
OK, I won't lie to you straight away... it won't be short but I tried to make it as engaging and interesting as I could so bear with me, all right? :)
1. What could cause a visitor bounce?
What are the factors that drove your customer away from your website.
2. Let's identify the problem!
Learn how to use analytics to uncover problems.
3. Dig deeper and understand the user.
Why does the problem exist? I'll show some UX research techniques that you can execute right now.
4. Change your website, iterate your product.
If you know what to change you just have to do the hard work.
5. Test again
6. Rinse and repeat!
So let's get started, no one wants to be here all day :)
This is a tricky one because it's not about the product it's about targeting.
Are the right people driven to the page?
Do you show the content they were looking for? Or you just showing off on your home page...
Targeting is very important. Put yourself in your customers' shoes:
What to do
Always make sure you target well and show the content they came for.
For example, if they came through an ad which says "dietary supplements" make sure that the page they land on has the same title in a visible way.
That's a bad information architecture.
What is information architecture?
Information architecture is about helping people understand their surroundings and find what they’re looking for, in the real world as well as online.
As a visitor, you need information and need it fast. You don't want to spend even minutes trying to dig for an information.
People don't read on the web, they skim.That means they want to get a sense of what the content is about before they would start reading it. When you skim, you browse the headlines, look for eye-catching elements, like bigger sized texts, quotes, images.
Therefore, having great and explanatory headlines are essential. If your visitor doesn't think he would find the relevant content based on the headlines he'll probably leave and won't read further.
Users want to get a sense of what the content is about before they would start reading it.
What to do
Make sure you have a clear content structure and an easily skimmable content. Have a clear overview, use headlines, quotes, bullet points, images (and captions) - make sure it's engaging and inviting for reading.
Nothing wrong with Jackson Pollock. He was a great artist. But wouldn't make great websites, would he?
In a few seconds - in which people decide whether to leave or not - you are not able to read and understand websites. It's not like deciding whether to buy a book in the store. It's more like browsing a magazine. You will look for impressions and signs which could be interesting and engaging for you.
That means, it all comes down to visuality.
Let's say you want to rent a car. Before you would search, you have a projection of how would a car rental website looked. Now imagine you arrive at a car rental page which is designed with comic sans, rainbows, unicorns. You would leave instantly, would you?
That's because had projection and a mental model of how a car rental should look and that page didn't fit this model.
Proper visual language will...
The bad visual language, on the other hand, will...
What to do
Do some research to better match your audience visual taste. Do some research on the best practices in your field. What are customers accustomed to? You can choose alternative ways and new design solutions for problems but first, make sure you know what is the starting point.
In the real world, we all know - well, the better of us - how to act and how to communicate with different people in different situations.
You use completely different language for your family, friends, colleges, teachers, business partners, strangers. And all of these are divided into dozens of subgroups. And you know how to handle them.
It's funny, though, it's not the same on the internet. It's like greeting a stranger on the street: "Hey yo, brotha. What up doe?"
Would it be weird? It thinks so. But this is what happens when you don't pay attention to communication.
What could be bad communication?
What to do
Write relevant content. Make sure it's not full of grammatical errors and spelling mistakes. Pay twice the attention to the website's copy and image set then you normally would. Don't bombard visitors with ads - learn how you can implement them without disturbing the user.
Oh yes, there are! Here's a list of my favorites:
Not having a responsive website
If you came by on a mobile you sucked.
Slow page times
If you want to learn about the true nature of a person, give him a notebook with slow internet connection and see what happens. In fact, it might be a new way of torment.
“I love slow web pages.” – said no one ever
People usually give up after 4 seconds. Make sure you wave goodbye!
Trust me, I know how pain in the ass browser compatibility is. Should I just fire an internet explorer joke? I won't. But if your users prefer a type of browser then you can't ignore it.
Here's an IE joke anyway.
Now that Google - finally - starts preferring sites with SSL (https) secure connection it's important to check the security checklist. You don't want your user to see this when landing on your page:
What is mutual in this four technical problems above is that each of these alone could prevent your user to explore your website.
You are not even letting your visitors leave because of your crappy design. I'm kidding here (if not, contact us anyway).
Seriously, technical factors are a must. You can't allow yourself to let visitors leave because of these.
Like the content?
We let you know when we have something fresh!
Analytics is a great thing. But you have to be careful: you have to know how to use it (it's like a lightsaber - in the wrong hands it could cause tragedy).
Analytics is for measuring and identifying the problems. Analytics doesn't answer why the problem exists.
Repeat: Analytics doesn't answer why the problem exists. You could have intelligent guesses but this is a measurement tool.
Analytics and data-driven design is completely another story so I would not go into detail here. What I will do instead is sharing a few important pieces of advice and guidelines that will make you use analytics smarter (and prevent analytics using you).
But before that, let me explain why.
I've never met a person who didn't want to use analytics and measure everything. Let's use Google Analytics, track everything, set conversions, set demographics. Here's a tool called Hotjar and it can create heat maps based on visitors click on your website. Awesome! I need it! Let's create heat maps for everything, set up funnels, allow visitor recordings. Here's another tool which allows you to track purchases in real time. Yeeeeah...
Okay. Until this point? Everything is fine. We measure.
What happens next?
What to do with all this data? What is important for me from all this? And for God's sake, do I have to change anything on my website? And if so, what and how?
Does it seem familiar? This is what I call information overload (and other smart people too). You don't set goals, you don't know what to look for you just measure.
Before you would analyze and measure. Ask yourself: what are you interested in?
Smart goals could be one the following:
These goals help you stay focused and keeps you from being lost among the infinite amount of data.
This is an addition to goals: always concentrate on one, relevant metric. Now, why on Earth would you concentrate on one?
Because if you set it right...
It would be my number one advice but we follow a logic order here. But this is all about identifying problems. To identify problems you have to ask questions:
These questions will help you to improve both your marketing (how to drive visitors) and your product (how to turn visitors into customers).
If you know where the problem is and you asked a question - it can be answered.
And it can be answered by...
UX research is a qualitative study which introduces the user to you, uncovers feelings, motivations, explains why the problems exist and what are the users thinking.
The funny thing: not many of the companies do UX research. But again, in reality, it would look like this:
You have a small boy aged 6. Tomorrow you will fly to Köln, Germany for a conference. Every time you attend to a conference like this, when you came back you bring a present to you son.
But somehow you just can't seem to choose his taste. The last 5 times you bought a present he was disappointed. And so were you. But you didn't ask him: "Why?"
Anway, you fly to the conference and look for another gift. You don't really now what your son likes, and why the presents you bought before were not good enough. You buy something anyway.
When you arrive, you give the present to your son. And guess what: it's a no again...
At this point, what would you do?
You should ask questions: "Why? What's wrong? What would like instead? What didn't you like in the former gifts?"
Now, the moral of this dumb story is that in the real world we ask questions. We want to dig deeper to understand the situation, emotions, thoughts. We won't buy another gift without asking first: what would you want?
This has to work the same in the digital world as well. You have to build a relation with your customers and uncover their feelings, thoughts, needs.
With UX research you can understand:
There are many research types. In this article, I'll show you 2 small, quick but really effective research types that you can try out and apply today!
This is a really simple and effective tool. I'll often use it in my everyday work. It could be conducted in person or online.
Basically, visitors are shown a design (logo, website design, application etc) for exactly 5 seconds. Afterward, they are asked to answer a few simple questions.
This is an extremely short amount of time! What is it enough for?
Yes, this is really quick. But here's the point: it is a tool that will measure impressions and perception. 5 second is not enough for deeply studying a design, or reading text on a website.
In 5 seconds you will have an impression of what you've just seen.
Whenever first impressions count, use five-second test. - Usabilityhub
Okay, stay with me, a case study is coming!
Sounds interesting? Let's get into the nitty-gritty parts!
So we had this page, seen below:
Our initial assumptions were:
Disclaimer: unfortunately I'm not sponsored in any way by Usabilityhub.
We used Usabilityhub for conducting the test remotely. It's a great service I really recommend it to everyone.
You can set up tests and start getting feedback on your designs in a few minutes. Five second tests, click tests, preference tests, navigational test could be conducted through Usabilityhub.
It's free to start and if you take other people's test you earn credit that is used to get feedback on your own tests (that's called Karma points). It's really a fun way to start and you can learn much about how to (and how not to) do certain tests.
So we uploaded the original site's designs and asked follow-up questions.
Game stands out - that's great. But video? Not so good. By reading through the full answers it turned out that people thought the site is about some video game. If you know what is an escape game like then you know it's the least thing you want people to associate it with.
It's not that bad. Essentially, despite the fact that the booking button was below the fold, people knew they had to book something, and a lot of people wrote "game" also so it's okay.
Now, this comes the interesting part. Our users were quite sure, this page was targeted for male gamers, ranged from 20-30. Words techy, nerdy, teenagers, youngish also appeared.
Nope, this is not what we wanted. But the page has a visual language which makes people think it's a techy thing.
Our initial assumption was true. It's not about video games and the design and communication shouldn't support this. We have to make the homepage's message clearer: it's about a physical game which is enjoyable for not only techy people but for a wide range of people.
Again. Visuality. We proved to be right again (but we never dreamed people would associate it with tech and gamers). We need a different visual appearance which is interesting and adventurous to show the feeling of the game but one which does not narrow our target segment.
Rooms are very important. They have to be interesting and engaging and upfront. They mustn't be placed in a sub-sub-sub page with a boring visuality.
Hold on, here comes the redesign. We put our best efforts to create an engaging homepage, seen below.
Or check it out live, here: http://mindmaze.cz/en
The message is clear - you know what is it about
The CTA (Call-to-action) is clear - you know what to do here
More engaging visuality but not determinative
display of rooms had a better placement (actually, this is all one page)
and better visuality - it's more engaging and fun with the video background
All this made an extremely big difference in conversion. The original site had a conversion rate of 4,5% - which is nice by the way.
But after the redesign, it went up to 11,5%.
After our colleagues at Abstract Marketing take over and started to take care of SEO and launched marketing campaigns the conversion rate increased again.
Resources for five second testing:
This test is also one of my favourites. I'm a big fan of usability testing, sitting down with users and see how they make their way through the product.
The first click test is like a micro usability test - and it's a great addition to it.
Users are shown a design/layout and are asked to perform certain tasks (that is click somewhere).
We use scenarios for this. Like:
"You want to shop sports shoes. You've arrived at this page and already selected a shoe by your liking. Where would you click to select the size of the shoe?"
As you see, we gave a story for the task - this is important because it helps people understand the situation. The itself is clear and precise.
This test is good for testing if users can easily find where to click to perform certain tasks.
When analyzing the results, there are two factors that are important:
That means, how many people managed to click on the right place. Usabilityhub also gives you a percentage of how precise the task was. The more precise the better. I would say, aim at precision above 90%
This is also very important. People are not stupid - let's not argue on this, we have no time -, they WILL find where to click in time. But the goal of these test is to design this interaction in a way that's easy and FAST to understand and accomplish.
So, durations ranging from 0 - 10 seconds are great. That means the users can instantly find where to click.
Durations ranging from 10 - 20 seconds are not so good - go back and work on it.
Above 30 seconds - go and think about your life.
But before you would run out and create your first test, please PLEASE read this great article from Kissmetrics on how (badly) people use Usabilityhub. If you don't have much time then just read the headlines:
And this is a nice guide for writing GOOD usability tasks and tests:
How to write tasks for usability tests
Like the content?
We let you know when we have something fresh!
Again, we'll have a look at the escape game's booking site. We conducted usability tests for this to see how user cope with the full process.
We used click testing to double-check the sensitive parts.
Here's how the booking page looked like (where you could start the booking process):
It's just not inviting, is it?
Our initial assumptions were that it is...
Our goal with the booking system:
The users should click through the booking process with no questions asked and without actually thinking about the process and how to perform each step.
The average time of locating the booking button were 41 seconds. Remember what I've written about benchmarks? Above 30 seconds dead, stiff, gone.
Weird? Likely. People thought they could click the centered booking text with the icon in the background. Are they retard? No, they are not! But that's confusing so it has to be changed.
53% of people clicked on the right place. That's nearly not good.
As I mentioned earlier, we already did usability testing on the booking process. The average completion time of the whole process was 8:13.
Even though it's a multi-step booking process, it shouldn't take this much.
So with all this in mind, we made a complete redesign of the booking process:
(or check it out live, here: http://mindmaze.cz/en/booking)
The average time of the booking completion decreased from 8:13 to 4:08 which means, that users spend time with only filling in the inputs, selecting options but not wasting time for searching for what to do next.
Average completion time went down from 8:13 to 4:08
Resources for click tests:
Getting the most out of first click testing
Firstly, let me thank you for bearing with me for this article, I know it was long and you would deserve better :)
Here are the key takeaways:
There are dozens of great articles on this topic, go out and find them.
Why people leave your website
14 ways you are driving people away from your landing pages
Understand your user, conduct usability tests. Test often! Great way to start with a quick brief of the remote test you could conduct in the next half hour:
Build better websites through remote user testing with UsabilityHub
So thank you again, if you have any questions, feel free to ask me in the comments or drop us a line!
Schedule a quick 30 min call with us,
we would love to help you!
Our co-founder and UX expert, Csaba, wrote a hands-on, down-to-earth approach to UX design that provides a complete overview of the Seven Step UX product design process that we use every day at Webabstract. This book is a practical, step-by-step guide that will take you through all of the steps and teach you all of the methods you need to know for UX work from planning an app or website to wireframing, research, and design. It is a must-read for understanding user experience design.
Enter your email address and we will contact you to schedule the call:
We will contact you shortly!Return to the blog
Sounds interesting? Enter your email and download the ebook for free!
We let you know when we have something fresh!