I love car shopping on the web. I never buy anything of course, I just like to look and think of the day when I can afford one. The other day I came across the following listing site, but it just felt wrong, I didn’t care for the design at all. But what’s the big deal? It’s very much “functional”, and I have no real problem scrolling through to see the prices associated with the cars. To compare and contrast I brought up CarMax, which has a clean and simple design that I do like browsing through.
What makes one better than the other goes beyond it being “pretty”. Design and user interface is strategic with reasons behind every element from drop shadows to typography.
Recognize and stick to established conventions
The designer’s goal is to manage the user’s attention and present the information in a balanced and clear way. Treating the labels “Miles” and “MSRP” the exact same way as the title link is confusing and doesn’t train your users to recognize your links. Also, clicking any of the icons/buttons result in the same destination page, therefore call to actions like “click for video” are very misleading and frustrating.
By following a conventional 1-2-3 type formula from left to right, information is easily segmented and organized to be easily read. While the entire listing row is clickable, the underline and hover effect emphasizes what is a link.
Make it simple and reduce clutter
Simplifying makes it easier to focus on what’s important in the listings. CarMax would look quite different if it labeled all its information and didn’t reduce its call to actions. Color choices also keep the user’s attention focused on what’s important and reduce and confusion on what’s clickable. It’s cliche, but less is often more.
Keep it organized
Balanced and clearly separated elements are important for visual consistency, not only for the specific element, but also in relation to everything else on the page. 20 stacked listings needs to be as easy to read as 1.
So why does all this matter?
I only focused on a small and specific part of these sites, but it’s the combination of every element that’s involved that determines a site’s quality. A website is often how users are introduced to a company, so of course it’s important to make a good impression (especially if your website IS your company). So what do you get for a successfully designed site?
- Visitors who quickly understand the purpose of your site.
- Improved branding through consistency, color, typography, etc.
- Reduced bounce rates since users will quickly and easily find what they’re looking for.
- Higher quality leads and returning visitors.
- More sales, leads, subscribers, etc. no matter what the goals of the site are.
CarMax has a better design and it’s more usable because of it. A page that is poorly designed is more often than not due to poor usability than a lack of design skill.
More readings on designing the user interface for search results:
- Search Results Design: Best Practices and Design Patterns (smashingmagazine.com)
- Best Practices for Designing Faceted Search Filters (uxmatters.com)
- Search Behavior Patterns (boxesandarrows.com)