Experimentation Agency Message Testing Blog CXL10 –  Nov 17 event Search Start 7-day trial for $1 Upskilling Playbooks Teams Community Find a job Resources Help

Ecommerce Guidelines: Homepage Design (credibility)

Guidelines 41-42

Ecommerce Best Practices » Homepage & Sitewide » Credibility » Design

What’s website credibility and why is it important?

BJ Fogg — the world’s leading researcher on web credibility — has said that web credibility is about making your website in such a way that it comes across as trustworthy and knowledgeable. Your website is often the first point of contact for the customers, responsible for first impressions and of course sources of revenue. Companies that design for credibility have a strategic advantage over competition.

Fogg says there are 4 types of credibility:

  1. Presumed credibility – general assumptions (e.g. a brand we’ve heard of is more credible, unknown brand less).
  2. Reputed credibility — third party reference (e.g. your wife said it’s good or your friends said service X sucks).
  3. Surface credibility – what we find on simple inspection (e.g. the website looks quality or “this seems confusing”).
  4. Earned credibility — personal experience (e.g. friendly customer service or text full of typos and factual errors).

Credibility is formed through trust. If users trust your site, it becomes credible. Credibility is also very fragile: It’s much easier to lose than gain.

Designing a homepage with this fact in mind, think about how the elements of a page communicate trustworthiness. There are certain types of content that must be avoided in order to maintain credibility and others that enhance it. The next few guidelines will provide information on those.

I really liked the general layout, color scheme, look and feel of the website. It made everything easy to peruse.

2 guidelines for ecommerce design:

  1. Maintain a modern, relevant design.
  2. Avoid cheesy stock photos.

Guideline #41. Maintain a modern, relevant design.

Have you ever been on a website that looked sketchy? Chances are it also looked outdated. If a company doesn’t update their website, users won’t feel secure shopping there. Credit card information is highly sensitive. If a company isn’t maintaining their website, it’s safe to assume they probably aren’t maintaining their security either. Outdated sites create distrust.

People want the latest and greatest. They’re interested in seeing —and being involved with— what’s new.

Of course, what’s “new” is always changing. A few aspects dominating the scene right now:

  • Large hero images.
  • Loading/scrolling animations.
  • Animations that direct focus to a page’s key feature.
  • Responsive design.
  • Minimalism.
  • Material design.
  • Long scrolling.
  • Illustration.

See if any of these trends complement your site.

I felt it was overall easy to use and looked professional. I felt like I could trust it.

How NOT to do it

Pequannock Feed

Parts of this homepage, like the green box, look broken. The photo of the store looks amateur. The graphics are low-quality. The outdated, unkempt look of this site lacks credibility on several levels.

0n a UX benchmark analysis, Pequannock Feed ranked at the very bottom with a 3% score on the UX dimension “Credibility”.

Tiger Direct

On a UX benchmark analysis, TigerDirect ranked with a 41% score on the UX dimension “Credibility”.

I find other direct competitors to have websites that feel more polished and professional. This website feels slightly dated and has no effects or novel UI/UX elements.

User quote on TigerDirect

How to do it RIGHT

Home Depot

This homepage has all the makings of a current design. It includes modern web design features like an automatic nearest store locator (SE Austin), bespoke imagery, and a holiday promotion.

On a UX benchmark analysis, Home Depot ranked at the very top with a 97% score on the UX dimension “Credibility”.

Guideline #42. Avoid cheesy stock photos.

Usability tests by Jakob Nielsen show that internet users always notice images on a website. When it comes to people in photos, “real people” get lots of attention while stock photo people are glanced over. Don’t use cheesy stock photos if you want to communicate authenticity.

According to MDG Advertising, 67% of online shoppers rated high quality images as being “very important” to their purchase decision, which was slightly more than “product specific information”, “long descriptions”, and “reviews & ratings”.

We already know from the “The Science of Storytelling & It’s Effect on Memory” article that when a visitor lands on your site for the first time, everything they see is being processed through their working memory — the hyper-short term memory that pulls information from your long term memory to make judgments on what it sees within milliseconds.

If the stock photo you’re using is at all similar to another website that created a negative experience for the visitor, subconsciously, they’re projecting their negative experiences onto your stock photograph, reducing trust & adding friction to the process.

This is likely the real reason why when Marketing Experiments tested a real photo of their client against their top performing stock photo, they found that nearly 35% of visitors would be more likely to sign up when they saw the real deal.

Most phones have decent cameras today, almost any random picture will be better than a stock photo of shiny people and suits shaking hands.

How NOT to do it

Only Natural Pet

Multiple participants recalled this homepage as looking outdated. Switching out the stock pictures with bespoke imagery would help alleviate this issue.

On a UX benchmark analysis, Only Natural Pet ranked at the very bottom with a 19% score on the UX dimension “Credibility”.

Swanson Vitamins

The designers for this site chose one of the cheesiest stock photos out there. The homepage would greatly benefit from a better quality, bespoke photo.

On a UX benchmark analysis, Swanson Vitamins ranked at the bottom with a 32% score on the UX dimension “Credibility”.

How to do it RIGHT

Petsmart

The product photos of the costumed dogs have been taken specifically for Petsmart’s Halloween sale. Not only are the photos professional and adorable, but they include actual promotional products for sale. This tells site visitors that petsmart cares about their business and is actively maintaining it.

On a UX benchmark analysis, Petsmart ranked at the top with a 89% score on the UX dimension “Credibility”.

Home Depot

This bespoke photography captures the Halloween season while including lots of various thematic products Home Depot is selling. While some may call this picture cheesy, it certainly isn’t stock photography.

On a UX benchmark analysis, Home Depot ranked at the very top with a 97% score on the UX dimension “Credibility”.

Continue to the next section:

Ecommerce Best Practices » Homepage & Sitewide » Credibility » Copy