How and Why You Should Use Them
George Washington’s Mount Vernon worked with Fastspot to launch a full re-design of its site in 2014. If you check the site today, you’ll notice the internal team is still doing a great job with content and page layouts. They’re able to achieve this nearly three years after launch because of the planning Fastspot and Mount Vernon put into generating the proper components for the design system.
What are components?
Components are content types defined by a specific use case. They are what make up your website.
Example of a component library:
We use Sketch to create a master component library file, which includes everything that’s available on the site.
When designing a new site, you don’t need, nor should you want, a million unique components. Adding too many would ultimately destroy the user experience (UX) of your site, because the user would have to constantly learn new patterns of interacting with the site. The majority of visitors will spend just 15 seconds on your website if any touchpoint with it leads to frustration. You need properly considered components to hold their attention.
Questions to ask yourself when coming up with your components list are:
- Who is this component for? (Audience)
- What is the goal/objective of this component? (Purpose)
- How often will this component be used? (Value)
One of the most straightforward components used in Mount Vernon is also the most powerful. It’s what we call the “topic row.” It contains a small image, title, description, and link. Simple. Mount Vernon excels in its use of topic rows because they understand that the primary goal of them is to help direct users deeper into content. On main landing pages, they’re essentially used as chapter or index markers. As you scan down the page, it’s very easy to digest these pieces of content. When something sparks your user’s interest, the user can click to visit that page and get more information.
Adding Visual Interest
Mount Vernon has another very similar component to the topic row, which we call a "feature block." The difference is entirely in the presentation, and its recommended purpose. The purpose of this component is to shed light on what’s important. You wouldn’t want to use this too many times on a page, since it takes up more real estate and would dilute its effectiveness. But, when used sparingly, as Mount Vernon does, it can grab the user’s focus and help promote a specific piece of content.
Exercising Constraint
Although the two components discussed have similar content fields, it’s the execution that really matters. By execution, we are talking about visual hierarchy, quantity, and pacing. Randomly placing these components throughout a page would be disastrous. But Mount Vernon knows this, and has established a convention within their own website. The featured block component is used sparingly, which increases its impact, making it special. Topic rows are used more often, but are kept together and always hold their place below page content.
Ultimately, these conventions help site visitors read and navigate the site, providing for a great user experience and website design.
Other Sites With Stable Content Patterns
Let’s look outside this particular project for examples of other sites who also do a great job of using similar content patterns on multiple pages.
Apple Product Pages
Apple product pages use a similar content pattern; large rows which contain beautiful imagery and a short marketing message. Between the Macbook Pro and the iPhone7 page, they only change where the stats feature goes. They repeat this pattern often while interspersing with relevant callouts (videos, galleries, etc). The end result is a super simple, effective product marketing page, which lets the content take focus.
Dragone Show Pages
The Dragone site has a very consistent layout for their show detail pages. This makes comparing the different shows easy. Variety is added with the use of different textures and colors.
Further Reading
During my research for this article I found articles few and far between. I’ve curated a few here which underscore and extrapolate on the points I’ve made in this blog post. I do hope you find them helpful.
“Consistency makes users feel comfortable”
http://blog.invisionapp.com/consistent-design/
“The greater the number of potential choices, the longer it will take to make a decision.”
https://uxdesign.cc/a-psychological-approach-to-designing-interfaces-c94b2d43eaa3#.ignh9fxhj
“Better design does not mean more design”
https://design.blog/2016/09/01/julie-zhuo-on-the-lessons-of-good-design/
Please add any observations or comments you have to the bottom of this blog post. Thanks for reading!