I love arming myself with data about when and why to make website design decisions. I was able to pick up some new ammo while at WordCamp Asheville from Melissa Eggleston’s presentation, Website Design with UX in Mind.
Melissa says that great user experience (UX) gives a business a competitive advantage and I see evidence of that everyday.
We’ve all experienced the feeling of frustration of searching online, choosing a site and then watching it load … and load … and never get there. Or it might come up but we have no idea how to find what we’re seeking. Or the text is too light or too small to read. One of my big pet peeves is a site with so many moving parts that it should come with a Dramamine tablet.
What do we do when those things happen? We leave. Immediately. Because a better site always is just one click away.
Keeping up with the latest UX research helps me, and the New Tricks team, design websites that achieve our clients’ goals. With data on how various design elements are perceived, we guide clients to make the best choices for their website—and steer them away from the well meaning but cockamamie ideas that may have come to us with.
Here are ten takeaways from Melissa’s presentation to help ensure your site doesn’t get clicked over by people looking for a kinder, gentler and more effective experience.
- Site users want a sense of place: People coming to a website need to know immediately the name of the business and what it does. Your logo, tagline and headlines people see above the fold need to make that instantly clear.
- Consistency across a site maintains that sense of location: Sticking with the same navigation, header color palette and fonts throughout the site signals to the user that no matter how many pages they visit, they are still on your site.
- Users are impatient on websites: Make sure all your important elements are easy to find and jump out at you. Sometimes people get so “designy” that their calls to action fade into the woodwork.Users won’t scrutinize your site and read all of your words so make sure you can take in the main points of the site by glancing and scanning. Avoid the densely packed text known as the “wall of words.” And please, people, make reading easy by choosing a dark font color font on a light background that is at least 16-18 pixels big. In the past it was common to see a font size of 12 px, which now makes websites look like old news.
- Page speed matters: Your site has to load quickly. Melissa reported that lab research shows 0.1 seconds gives users the feeling of instantaneous response, 1 second keeps the user’s flow of thought seamless, and 10 seconds keeps the user’s attention. After 10 seconds, whether people keep waiting depends on their motivation. How much do they really want to go to that particular site?You have many options for improving the loading time of your site. Start with cleaning up outstanding issues on your site but if slow performance remains a problem, you may find the culprit is your web hosting. Many larger hosting companies stuff more than 1,500 sites on one server and the resulting performance can be very spotty. We now recommend managed WordPress hosting with WPEngine (for larger sites that need one-click staging to test updates before implementing them on the live site) and Clickhost (for most of our other sites with its quick cloud hosting and personal attention).
- Don’t reinvent the wheel: Build on proven conventions. You want people to be able to quickly navigate your site based on their previous experience with websites. Unless you have a really good reason, don’t use idiosyncratic names for your navigation buttons or decide that your site is going to be really different in some other way. Be creative with your imagery or graphics or event with great content but not with user experience. Don’t make your visitors work that hard. We won’t.
- Users shouldn’t have to search for the search bar: I am one of “those people” who don’t use online search until I absolutely can’t navigate further on my own. So it was important for me to hear from Melissa that there are people who actually use search instead of the navigation buttons! Who knew? So, and it important to have an easy-to-find search bar.
- Provide a visual hierarchy: The size and placement of your text and images act as guides for your users’ eyes, pointing them to what you want them to see and do. If you have images of people, have their eyes look at the text you want people to see, rather than gazing off the page. Make liberal use of headers, lists and paragraphs. A wall of words is typically a complete waste because most people skip large blocks of type.
- Stock images don’t connect: At best, your site visitors will just ignore stock images. At worst, they regard them as cheap filler and think less of you. People like information-rich images with authentic subjects that capture the story of you and your business. Investing in professional images—that show what you are uniquely capable of—will be one of the biggest boosts for the quality of your website. If you think your business is not visually interesting, I guarantee a professional photographer will change your mind. Melissa’s UX testing found that people want to see behind the scenes of companies. They want authentic. So instead of another image of a cupcake on the about page of your bakery site, show the baker mixing up the dough.
- Great hero images require work and planning: A lot of themes these days show a large format hero image on the front page, which sets the tone for the whole website. Website clients see these themes and decide they have to have a huge hero image for their sites, but they don’t realize going in, what’s involved in doing them right. The image has to be really large, and shot with a horizontally, landscape orientation. The subject needs to be positioned in the image low enough in the image that their head is not cut off when the image is viewed on screens of various sizes. Any text overlaid on the image must be placed where it is readable and doesn’t conflict with the main subject of the photo. Back to item seven above, few businesses have the great photos needed to pull this off. If your design calls for a gigantic hero image, Melissa wisely pointed out the obvious: “It better be heroic.” To achieve an epic hero image, hire a professional photographer and have your web designer give them direction for the shoot.
- Sliders:Research shows that website visitors do not like slide shows on the home page. Sliders are distracting, the speed is usually set either too fast or too slow, and people report being irritated when the attractive image they liked then disappears. Often businesses demand a slider in order to present all of their important information above the fold. However, this strategy won’t work because visitors rarely stick around long enough to view your slides.Slide shows work if you do have a stockpile of hero images (unlikely), you don’t care if people miss some of them, and your goal is to set a mood. A website we did for SteelMart is an example of hero images that worked with a slider that worked. You wouldn’t think a steel company would have great images but this shows the power of professional photography—and a design that rolls like the sheet metal that this company produces. Every image is great, and one or two are enough to convey that this company is a professional enterprise they can trust.
Check out the Slideshare deck with more UX goodness on the slides from Melissa’s presentation. I hope a few of these things will help you to make some adjustments to your site that your visitors will thank you for.