February 27, 2017

How to Create an Incredible First Impression with Your Website

Creating an Incredible First Impression With Your Website

Consumers decide whether to click "back" after seeing your website in seconds. In fact, according to Google's own research, we can make up our minds about a design within 50 milliseconds — and even as quick as 17 ms. Talk about fast!

Knowing this, it's crucial to put your business in the best possible light and encourage them to stay. Nail the design and you'll earn a favorable impression — and ultimately, their attention.

Here are some tips to help you do just that.

1. Don't make them think.

Which designs get rated the highest within those millisecond snap judgments? From Google's research, they had the following things going for them: They were visually simple (instead of complex) and were what users expected (typical for the industry, type of website, etc.). In other words, it was easy, clear and familiar.

Visitors shouldn't have to work to get information from you. It can be tempting to be over-the-top innovative and unconventional to impress, but people are busy. They aren't going to spend time just learning how to navigate your site when they can find what they wanted on the next search result.

Feel free to be creative and try things new — but within reason. If it's not obvious what they should do next or what they're looking at, rethink your design.

Call-to-action buttons (CTAs) are great for driving visitors to the next step. Should they go to another page for more information? Fill out a form? Pick up the phone? Give an action-orientated suggestion where appropriate, and ensure they require little effort on the visitor's part to perform.

People don't want to spend a lot of time figuring out how to do the next step; they just want to get it done!

Houzz homepage

This site, Houzz, makes things easy for visitors right away. They can sign-up with a click of their button using Facebook or their email. Under the header, there is a simple to understand list of what users can find on their site: design ideas, home professionals, and products.

A nice grid gallery also showcases different ideas, products, professionals and departments. Users can get started envisioning a home redesign in moments!

2. Give them what they're looking for.

Our first thought when visiting a website: "Is this what I wanted?" If you make it difficult to answer that question, most people will immediately assume the answer is, "No." If you've made a great impression, they may linger for a little longer — but not more than a few seconds.

If they can't answer a, "Yes!" within that time, they'll leave.

Make it as easy as possible for them to answer, "Yes!" That sounds obvious, doesn't it? But accomplishing that task isn't as simple as it sounds, especially when your site needs to fulfill needs for multiple types of people.

Too often, it's determined that all information should be crammed into the area "above the fold" (what viewers see before having to scroll). If you answer all questions straight away in one spot, that will show them they're in the right place, right?

Actually ... no! Shoving everything into one location often ends up muddling the design and overwhelms viewers to the point where they just see "stuff" instead what that stuff is.

In order to show them they're in the right place, make sure your homepage is focused and purposeful. People are okay with scrolling a bit, and often expect to, so you're safe not cramming everything in one space. Determine your business' value proposition and how you can present it simply and to the point.

What your brand is all about should be the highlight of your homepage! Feature that in the prime real estate that is above the fold. Then flow through the next important things customers may want to know, should know, or would be looking for.

Order it most important on top to least important on the bottom. Don't forget to keep in mind how customers use content during the buyer's journey.

Homepage of Mint.com

Above is a screenshot of Mint's homepage. The design is simple and elegant, with information divided into multiple sections that guide visitors through everything they need to know. Each section also provides a CTA that coincides with that section, whether to encourage users to sign-up or learn more.

If they aren't convinced to sign-up with that section, the next section provides even more facts they might want to know. Users don't have to think here; Mint already knows what their potential users want to know. Their strong use of visuals ensures these ideas are understood quickly and easily.

3. The power of presentation.

That first impression is mostly built from the design — over 90%, in fact. The actual content influences our judgment by less than 10%. Yikes! So it isn't enough to know your content is good: Give it some pretty (and professional) packaging to boot.

From color theory to visual hierarchy, give consideration to every design element. Trends come and go; give your site a great design that will last. It should speak volumes for your brand before they even read a word.

Pay attention to your image choice, especially your homepage header since it's the first thing visitors see. Is it effective? Does it support your headline text? Is it emotive in some way? People are naturally drawn to photos with faces, but use one where the body language and expression in the photo should convey the right message too.

Go beyond the text content and ensure it's readable as well. Use contrasting fonts between headers and body text. People skim and read in chunks, so paragraphs and sections need to be easily and quickly spotted. Don't make paragraphs too long or too short (50-60 characters is good).

Use a strong color palette that enhances your brand's meaning, keep things simple, and ensure there is plenty of white space to give breathing room to your content.

Last but not least, don't forget about accessibility! Make your site great for everybody; no exceptions. (This includes mobile as well, by the way. Don't let bad cross-browser compatibility hurt your website.)

New York Times homepage

The homepage of the New York Times is reminiscent of a print newspaper and it's effective. They rely on a strong visual hierarchy in order to organize what stories are most important, keep the important stories with larger text and photos.

There are even blurbs under some headlines to communicate the most important details for those who may not have time to read the whole article yet.

Firefox_Screenshot_2016-08-26T19-38-58.271Z.png

When viewing an article, the site is clean and easy to use. It focuses attention where it should be: on the story. The line-height, font, and paragraph width are all optimal for easy readability. The headline area gives all the important details in a well-organized and thoughtful way, communicating the main points in moments.

There is little to distract users from finding out what they want to know. The NY Times utilize their design in a way that works best for what users want and need from a news site. They know their stories matter, and the care they give in presenting them helps communicate this.

The Parent Toolkit

The Parent Toolkit has a wonderful above-the-fold design. The photo of the app in use, the repetition of circular shapes, and a strong consistent palette create a distinct organized look. But the use of more unusual fonts and design elements that break up the pattern help breath in some life, keeping the site feeling appropriate for who the site is about.

The site communicates an educational and authoritative vibe while maintaining a feeling of friendliness — perfect combination for appealing to parents.

4. Be trustworthy.

A great design helps build credibility right away ("Yup, looks legit!"), but to build a potential relationship with visitors faster, it's important for your brand to convey your trustworthiness. This can be resolved through the details: Check there are no broken links or images and all text is grammatically correct.

Next, go above and beyond: Have reviews, videos, or testimonials from real customers, put faces and names to employees, keep content up-to-date, link to other resources or sites beyond your own, and so on.

Don't ask for too much information from visitors too soon. Even if they're interested in your business or services, they'll find it suspicious if you ask for all their contact information when they only have a simple question. Only get the bare minimum of information as you need it.

Information such as an FAQ or further details on your business should be easily obtained and not hidden. If you're perceived as withholding information from visitors that they find important, they won't see your business as transparent and honest. This will make them reluctant to reach out ("What else are they hiding?").

While first impressions rely on design, the ultimate decision of trustworthiness comes from the content. When asked to rate a site as trustworthy, 74% of participants in a 2004 study (by Elizabeth Sillence) referenced site content over design factors.

These were ranked highest: sites owned by well-known and respected organizations, articles written by experts with information specific to them, and content the participants felt was written for people like themselves.

HelloWallet homepageHelloWallet leaves no stone unturned when trying to build trust. Not only are there two blocks with testimonials, both include photos to go with the quotes and names. There are also three different videos which feature an opportunity to connect to viewers on a personal level, an offer for a free book so visitors can get a sense of the company and what they're about, and even more independent research.

To seal the deal, there are even logos of well-known brands who use their services.

5. Use psychology to inform your choices.

When coming up with that killer design, it's important to understand how people — but especially your audience — perceive things. You don't want a design that wows only the team and not your customers! Different age groups prefer different designs, as well as gender and people of different cultures.

Whenever possible, research your target audience and find out what kind of designs they prefer. Do they like colorful things, or softer hues? How complex of a design is "too much" to them? What do they associate with colors? (This varies for different cultures!)

To really go above and beyond though, go even deeper with psychological research to back up design decisions. Applying an understanding of psychology to web design is often classified under User Experience (UX) design, and knowing what to know and how to apply takes careful consideration and practice.

Here's an example: Let's say you're creating a contact form to be used when customers are having major trouble with your service or product. The obvious solution, without consideration of the customer's thought process or emotional state, would be to simply create a form on a page and be done with it.

But here's some facts for thought:

  1. People make more errors when they're under a lot of stress. The more stressed they are, the harder it is to think clearly. Things can seem confusing under high stress that normally would not be as difficult.
  2. People tend to skim text and filter information for what they think is important. We process information better when given in small chunks.
  3. Our perception of time is relative. If we don't know how long something will take, and have nothing to do but wait, the amount of time waiting feels longer.
  4. It's easier to recognize information than recall it.

Now, how might we use this information to a create a truly effective form? First of all, we should assume people are using the form while feeling stress. They are using it to contact us because they have a problem, after all! But in order to help them, we also need to get as much specific information as possible from them about the problem.

Knowing that more stress means more errors, how can we design this form to reduce the number of errors and communicate the heart of the matter efficiently?

A form that only asks one question at a time would be a good solution here. It keeps them focused on one task at a time and will help reduce errors from overlooking a question. The questions should also be short and to the point, and written in easy-to-understand language. Their choices for answers should also be simple and obvious.

single-field-form.gifExample of a form which asks one question at a time. (Source: Codrops)

We also know people recognize information better than they recall it -- so let's craft our questions with that in mind. Normally, we might have a plain textbox where customers can explain the problem as best as they can. However, they might forget crucial information, or fail to mention an important detail because it didn't seem important to them.

Instead of relying on their memory, a better method may be to show a possible error message and ask, "Is this what you saw on your screen?" Using a combination of letting them specify the topic and a quick process of elimination will get to the heart of the issue with the least amount of effort from the customer and your team.

natural-language-form.gifThis type of form gives choices to choose from and is written in natural language, making it easy to understand and fill out quickly. (Source: Codrops)

But let's not forget one more thing: time. They need help, and they need it fast! Perhaps our help desk is set-up to call customers back about problems they're having. If so, a good solution might be to enter the customer in the queue immediately as they start the questionnaire process.

Going through the rest of the form gives them something to focus on, which will reduce how long they feel they're waiting. By the time they complete the questions, someone on the team can have already reviewed their case and be ready to call.

But don't forget to always clue customers in on how long it will take to receive help: never leave them in the dark when they need it most.

Of course, this might not be the most practical or effective solution in every case, but what's important is the thought process behind it. We're considering how our customers think, the situation they're in, what they need most at the time, and trying our best to accommodate them.

Don't make the customer do all the work; meet them in a way that works best for everyone.

Job Well Done!

6. Be memorable.

Don't just be good; be impressive. "Wow" your visitors right away! Don't only look at what your competitors' websites: check out other industries as well. What makes a memorable site design? What makes your brand memorable? Is there any way you can combine those two things?

Unsurprisingly, memorable and impressive websites are ones which do all of these things really well. Every element of the design was perfected to enhance and showcase the brand. The images are perfectly chosen, the text crafted with care, and everything was built and presented with their customers in mind.

Remember, the best sites are designed with heart for their customers, not growing sales. Brand growth comes later; exceeding customer expectations should always come first.25 Website Must Haves for Driving Traffic, Leads, and Sales

Laura Kajpust

Laura is a designer, developer, and illustrator because learning one thing seemed way too boring. While technology is easy, she still can't cook anything requiring more than three ingredients. Fortunately, her husband and dog are not very picky (except on weekends).