Dave ChaffeyDesign patterns are a really strong technique for creating more effective user experiences, but I don’t hear them discussed so much by marketers. I think this is a missed opportunity since identifying design patterns that competitors are using can help with benchmarking and improving your approach.
Nielsen Norman Group use this design pattern definition which shows the benefits of this approach:
Design patterns help define and describe successful user interface elements so that they can be re-used and applied in new designs.
They also have the benefit that if your website has common interface elements they will be familiar to users from other websites which means that the site needs less time to learn, in the immortal words of Steve Krug, ‘Don’t make me think’.
The Interaction Design Foundation has this additional guidance on what a website design pattern should contain:
- Problem: The usability problem faced by the user when using the system.
- Context of use: The situation (in terms of the tasks, users, and context of use) giving rise to the usability problem.
- Principle: A pattern is usually based on one or more design principles, such as error management or the consistency of user guidance.
- Solution: A proven solution to the problem.
- Why: How and why the pattern actually works.
- Examples: Each example shows how the pattern has been successfully applied in a real-life system.
- Implementation: Some patterns provide implementation details.
Examples of B2B website design patterns for marketing communications
If you take a look at the examples of design patterns you will see they are often for individual elements like data entry, navigation or interaction, but there are also persuasive design patterns which are aimed at changing perceptions and encouraging action. Marketers can learn from these and also consider larger common design patterns elements on certain page types. For example, in business-to-business marketing its common for the home page and product pages to have elements or panels like this:
- 1. Features and/or Benefits
- 2. Solutions – by business size and sectors
- 3. Customers list – testimonial
- 4. Independent accreditation
- 5. Performance / scale / satisfaction benchmarks
- 6. Brand – Why us ‘reasons-to-believe’
- 7. Marketing outcome CTAs – Demo or Quote
- 8. Lead gen stripes – whitepapers
- Integrations (if relevant)
- Partners (if relevant)
Here’s an example from a B2B phone service provider of a ‘Why Choose Us’ panel which is a key message:
An example of features and value proposition:
An example of credibility:
And an example of customer testimonials:
You can see that’s it is a useful activity in online competitor benchmarking should be reviewing the messaging and visuals used to communicate propositions and differentiate brands.
Within modern responsive web design these elements should be effective both on desktop and on mobile platforms. So it’s interesting to consider how you test effectiveness, for example through scroll maps, event tracking on button and AB testing different orders of panels or whether design can be effective with fewer (reductive test) or more panels.
