Six UGC Design Principles To Elevate User Experience

Meet Super Shop World, an entirely-fictitious e-commerce brand. They have an established presence and maintain strict online brand guidelines. Recently, they added customer ratings and reviews to their site, and followed those guidelines to a T:

The look and feel is entirely on-brand and fits in quite well with the rest of the site, but will users be getting the most out of the user-generated content (UGC) with it designed the way it is? Probably not. With a bit of envelope-pushing, Super Shop World could alter their brand standards for UGC and win big.

Here’s how they can boost user experience and value to both consumers and the brand by following six, simple principles.

1. Embrace whitespace.

 

Whitespace is essential to making your UGC easier to scan and read, because it…

• Defines and shapes review regions making the presentation of the content more appealing and attractive
• Reduces eye fatigue when increasing line-height of the body copy to at least 150% of the font-size
• Allows you to position elements both horizontally and vertically, helping to create logical groupings of similar content

2. Vary typography.

Mixing in new font-sizes and colors to your styleguide can boost usability because variety helps to…

• Establish a clear typographic hierarchy, giving the user a clear starting point and making complex content easier to digest
• Prevent information overload by highlighting primary elements such as review titles and scaling back less important elements such as dates

3. Expand iconography.

Adding a new set of icons to interactive elements of your UGC boosts your brand and the content’s usability because they…

• Make the content more visually appealing
• Reinforce functionality of clickable interaction points such as feedback voting buttons
• Present a new opportunity to design branded elements

4. Don’t reinvent the star.

 

Accepting the star as your main rating graphic of choice is another way to boost usability and your brand because …

• The meaning of the star is easily understandable thanks to its ubiquity
• Stars work for many different products and services, thanks to their generality
• Stars can be styled with your brand’s accent colors to make them to stand out on the page

Don’t forget your secondary rating graphics either. In the example above, you’ll see that we changed the smaller globes for the price and quality ratings to solid circles. This solid shape makes them easier to read at a smaller size and their simplicity helps them stand apart from the overall star rating.

5. Celebrate contributors.

Call out contributor achievements and boost usability and your brand by …

• Leveraging Ego Capital: reward users for interacting frequently with your site or service (think Gowalla and Xbox Live)
• Creating a way to sort by more credible or relevant content by making certain reviews or reviewers featured
• Designing eye-catching brand-specific badges for your super-contributors

6. Elevate the reviewer’s voice.

Reinforce the authentic, personal nature of the content and enhance the credibility of your content by…

• Grouping user information in the same area
• Adding a user avatar graphic as a visual anchor for the user info section
• Using graphics like speech bubbles (if your brand is more playful) or quotes (if your brand is more serious) to surround the review content

So there you have it. Not only is the overall experience more usable, legible and inviting, but we also found areas where we could build in functional, branded elements that didn’t exist before. Above all, you’re the expert about your brand, but keep in mind that you’re creating a new design pattern for your web site when adding UGC. Being open to expanding your online style guide is a surefire way for you and your users to get the most of it.