How to design a testimonial page

A testimonial page gathers what your customers said in one place. A testimonial section puts a few of those words on a page that has another job, such as your home page or your pricing. This guide covers both: what to put on them, which layout to use, and where each one belongs.

A page or a section?

Start with a section. Few visitors go looking for a testimonial page, but every visitor to your pricing page is deciding something, and three good testimonials beside that decision do more than thirty on a page they never open.

Add a page of its own when you have a dozen or more testimonials. It serves the careful visitor who wants to read them all, and it gives you one address to link to from emails and proposals.

What to put on a testimonial page

• A heading that says whose words these are. "What our customers say" is enough. A clever heading makes the visitor work out what the page is.
• Your strongest three first. Most visitors read the top of the page and leave. Lead with the testimonials that name a result or answer a common doubt.
• Variety. Ten testimonials that say "great service" make one point ten times. Pick ones that speak to different worries: price, speed, quality, what happens when something goes wrong.
• Who said it. A name, a role or a town, and a photo if the customer agrees. A quote with no person attached reads as if you wrote it.
• A next step. Put a button to your contact, booking or pricing page after the first few testimonials and again at the end. A visitor who is convinced should not have to scroll back up.
• Nothing you cannot stand behind. Use what real customers said, with their agreement. Leave out ratings, counts and logos that are not yours to show.

Six layouts, and when each fits

The layout follows from how many testimonials you have and how much room the page gives them.

• Carousel

  Several cards in a row that visitors swipe through.

  Fits when: you have five or more testimonials and a section only one card tall.

• Wall

  Every testimonial at once, packed into columns.

  Fits when: you have a dozen or more testimonials and want the number itself to persuade.

• Badge

  Your rating and review count in one small mark.

  Fits when: space is tight: a header, a checkout page, next to a call to action.

• Slider

  One testimonial at a time, given the full width.

  Fits when: you have a few strong, longer testimonials rather than many short ones.

• List

  Testimonials stacked one under another, like a feed.

  Fits when: the widget lives in a sidebar or a single narrow column.

• Avatars

  Customer faces in a row, with a line of proof beside them.

  Fits when: you want proof inside a hero without adding a whole section.

For a page of its own, a wall is the usual choice: it shows everything at once, and long and short testimonials sit together. For a section, a carousel or a slider keeps to one row.

Designing a testimonial section

• Put it next to the decision. Beside the price, under the sign-up button, on the checkout page. A section at the very bottom of a long page is read by the few who scroll that far.
• Keep it one row tall. A section is an aside, not the main content. Three cards, or one row that visitors can move through.
• Match the testimonial to the page. On the pricing page, show the customer who thought it would cost too much. On a service page, show a customer of that service.
• Let it wait for the visitor. Text that slides away before it has been read is worse than text that stays still. If the section moves on its own, give visitors a way to stop it.

Details that make testimonials readable

• Short lines. Keep each card narrow enough that a line runs to about sixty characters. Wide lines are hard to follow.
• One size of photo. Round or square, but the same throughout.
• Plain text on a plain background. Dark text on a light card. Quotes laid over a photo are hard to read.
• The same order on every card. Quote, then name, then role. The eye learns it after the first card.
• One column on a phone. Check the page on your own phone before anyone else sees it.

Common mistakes

• Hiding the page. If the only link to it is in the footer, few will find it. Put it in the main menu, or link to it from the section: "Read all 40".
• Leaving it to go stale. A newest testimonial that is three years old raises a question. Add new ones as they come in.
• Rewriting the praise. Trim a long testimonial and fix a typo. Do not improve it.
• Showing everything. A weak testimonial weakens the strong ones beside it. Leave it out.

Build it

To build the page or the section without writing code, choose a layout and add your testimonials; the builder gives you one snippet to paste. If you would rather write it yourself, there is code to copy for an HTML testimonial slider and for a Bootstrap testimonial slider.

Short of testimonials? See how to ask a customer for one, and the testimonial examples for what a good one looks like.