Here are a few different content patterns I recently sketched…<\/p>\n
Pattern #1: Abstracts with Links\u00a0<\/strong><\/h3>\n![\"img001\"](\"http:\/\/juneux.com\/blog\/wp-content\/uploads\/2016\/05\/img001.jpg\")
<\/p>\n
This type of pattern is best used when you want to provide a lot of information quickly, but don’t want the user to get bogged down with several paragraphs of text. The user can easily skim this list to figure out which topics they want to learn more about, then click for more.<\/p>\n
Why I like this pattern:<\/p>\n
\n- Heading:<\/strong> Makes it easy to see what the underlying content below will be about.<\/li>\n
- Images:<\/strong> Helps shorten the width of the content, reducing reader fatigue. Also: eye candy and clickable-looking content.<\/li>\n
- Link as Headers:<\/strong> The links serve dual purpose. They provide more details, but remove unnecessary additional links or buttons below each content block.<\/li>\n<\/ul>\n
Pattern #2: Abstract without Header Link<\/strong><\/h3>\n![\"img0021\"](\"http:\/\/juneux.com\/blog\/wp-content\/uploads\/2016\/05\/img0021.jpg\")
<\/p>\n
This pattern is just a variation of the one above. Use this pattern when an overarching heading or link to more information isn’t needed.<\/p>\n
Pattern #3:\u00a03-Up Features Content Block<\/strong><\/h3>\n![\"img005\"](\"http:\/\/juneux.com\/blog\/wp-content\/uploads\/2016\/05\/img005.jpg\")
<\/p>\n
This is a very popular pattern right now. Usually the images are either icons for product features or headshots for testimonials. I really like this pattern because it’s easy to see how it will render on mobile, but also\u00a0doesn’t\u00a0sacrifice the experience when viewed on mobile.<\/p>\n
In this type of pattern, usually the content below each image is center-aligned. When there are more than a few lines (3 lines maximum, in my opinion), center-aligned body copy\u00a0is EXTREMELY difficult to read. Ensure your copywriter has strict word count limitations when this pattern is used.<\/p>\n
It’s easy to imagine variations of this pattern:<\/p>\n
\n- Headings as links<\/li>\n
- Headline above 3-up content group<\/li>\n
- No headings<\/li>\n
- Second row of 3-up content group<\/li>\n
- All the same variations, but for 2-up content groups<\/li>\n<\/ul>\n
Why I like this pattern:<\/p>\n
\n- Headings:<\/strong> Makes it easy to see what the underlying content below will be about. Headings could easily double as links to more information, reducing need for additional button \/ link clutter.<\/li>\n
- Images:<\/strong>\u00a0Makes content feel more light and airy. Really nice alternative to just treating this same content in a bullet point format.<\/li>\n<\/ul>\n
Pattern #4: 1-Up\u00a0Content Block with Image<\/strong><\/h3>\n![\"one-up](\"http:\/\/juneux.com\/blog\/wp-content\/uploads\/2016\/05\/img0041-1024x919.jpg\")
<\/p>\n
This is one of my favorite patterns, but I believe it should only be implemented in a\u00a0very specific way.<\/p>\n
Full-width content\u2014that is, regular-size body copy that expands the entire width of a desktop website\u2014should be illegal. (Yes, illegal!) It is very difficult and very fatiguing to read content that spans the entire width of a computer screen.<\/p>\n
To use this pattern correctly on a desktop website, I believe there should be ample empty space on either side of the column\u2014to ensure the width of the text is narrow enough to read comfortably. Not only will the additional empty space assist in dramatically improving readability, but it will also create laser-like focus.<\/p>\n
It’s easy to imagine variations of this pattern, too:<\/p>\n
\n- Heading as link<\/li>\n
- No heading<\/li>\n
- Image as video player<\/li>\n<\/ul>\n
Why I like this pattern:<\/p>\n
\n- Headings:<\/strong>\u00a0Built-in scannability.<\/li>\n
- Images:<\/strong>\u00a0Makes content more scannable and memorable.\u00a0Imagine an entire article where every few paragraphs are broken up with an illustration, icon, photo, or hand-drawn sketch of a content pattern… Those visual breaks give users’ eyes a brief enough rest to help them plow through the next section of content.<\/li>\n<\/ul>\n
In Conclusion<\/strong><\/h2>\nIs scannability part of your proofreading or editing process? Use\u00a0thoughtful content formatting\u00a0to ensure your message still gets across \u2014 even if your audience doesn’t read every word.<\/p>\n\n\n
Related Articles<\/h2>\n\n\n- Experience Is Experience Is Experience<\/a><\/li>\n
- What Are the Different UX Career Options?<\/a><\/li>\n
- How to Get Real-World UX Experience without Going Back to School<\/a><\/li>\n
- Designing for Inclusion & Accessibility: The Giant List of Use Cases<\/a><\/li>\n
- How Product Management & UX Work Together<\/a><\/li>\n<\/ul>\n\n\n
<\/p>\nPattern #2: Abstract without Header Link<\/strong><\/h3>\n<\/p>\n
This pattern is just a variation of the one above. Use this pattern when an overarching heading or link to more information isn’t needed.<\/p>\n
Pattern #3:\u00a03-Up Features Content Block<\/strong><\/h3>\n<\/p>\n
This is a very popular pattern right now. Usually the images are either icons for product features or headshots for testimonials. I really like this pattern because it’s easy to see how it will render on mobile, but also\u00a0doesn’t\u00a0sacrifice the experience when viewed on mobile.<\/p>\n
In this type of pattern, usually the content below each image is center-aligned. When there are more than a few lines (3 lines maximum, in my opinion), center-aligned body copy\u00a0is EXTREMELY difficult to read. Ensure your copywriter has strict word count limitations when this pattern is used.<\/p>\n
It’s easy to imagine variations of this pattern:<\/p>\n
\n- Headings as links<\/li>\n
- Headline above 3-up content group<\/li>\n
- No headings<\/li>\n
- Second row of 3-up content group<\/li>\n
- All the same variations, but for 2-up content groups<\/li>\n<\/ul>\n
Why I like this pattern:<\/p>\n
\n- Headings:<\/strong> Makes it easy to see what the underlying content below will be about. Headings could easily double as links to more information, reducing need for additional button \/ link clutter.<\/li>\n
- Images:<\/strong>\u00a0Makes content feel more light and airy. Really nice alternative to just treating this same content in a bullet point format.<\/li>\n<\/ul>\n
Pattern #4: 1-Up\u00a0Content Block with Image<\/strong><\/h3>\n<\/p>\n
This is one of my favorite patterns, but I believe it should only be implemented in a\u00a0very specific way.<\/p>\n
Full-width content\u2014that is, regular-size body copy that expands the entire width of a desktop website\u2014should be illegal. (Yes, illegal!) It is very difficult and very fatiguing to read content that spans the entire width of a computer screen.<\/p>\n
To use this pattern correctly on a desktop website, I believe there should be ample empty space on either side of the column\u2014to ensure the width of the text is narrow enough to read comfortably. Not only will the additional empty space assist in dramatically improving readability, but it will also create laser-like focus.<\/p>\n
It’s easy to imagine variations of this pattern, too:<\/p>\n
\n- Heading as link<\/li>\n
- No heading<\/li>\n
- Image as video player<\/li>\n<\/ul>\n
Why I like this pattern:<\/p>\n
\n- Headings:<\/strong>\u00a0Built-in scannability.<\/li>\n
- Images:<\/strong>\u00a0Makes content more scannable and memorable.\u00a0Imagine an entire article where every few paragraphs are broken up with an illustration, icon, photo, or hand-drawn sketch of a content pattern… Those visual breaks give users’ eyes a brief enough rest to help them plow through the next section of content.<\/li>\n<\/ul>\n
In Conclusion<\/strong><\/h2>\nIs scannability part of your proofreading or editing process? Use\u00a0thoughtful content formatting\u00a0to ensure your message still gets across \u2014 even if your audience doesn’t read every word.<\/p>\n\n\n
Related Articles<\/h2>\n\n\n- Experience Is Experience Is Experience<\/a><\/li>\n
- What Are the Different UX Career Options?<\/a><\/li>\n
- How to Get Real-World UX Experience without Going Back to School<\/a><\/li>\n
- Designing for Inclusion & Accessibility: The Giant List of Use Cases<\/a><\/li>\n
- How Product Management & UX Work Together<\/a><\/li>\n<\/ul>\n\n\n
<\/p>\n<\/p>\n
This is a very popular pattern right now. Usually the images are either icons for product features or headshots for testimonials. I really like this pattern because it’s easy to see how it will render on mobile, but also\u00a0doesn’t\u00a0sacrifice the experience when viewed on mobile.<\/p>\n
In this type of pattern, usually the content below each image is center-aligned. When there are more than a few lines (3 lines maximum, in my opinion), center-aligned body copy\u00a0is EXTREMELY difficult to read. Ensure your copywriter has strict word count limitations when this pattern is used.<\/p>\n
It’s easy to imagine variations of this pattern:<\/p>\n
- \n
- Headings as links<\/li>\n
- Headline above 3-up content group<\/li>\n
- No headings<\/li>\n
- Second row of 3-up content group<\/li>\n
- All the same variations, but for 2-up content groups<\/li>\n<\/ul>\n
Why I like this pattern:<\/p>\n
- \n
- Headings:<\/strong> Makes it easy to see what the underlying content below will be about. Headings could easily double as links to more information, reducing need for additional button \/ link clutter.<\/li>\n
- Images:<\/strong>\u00a0Makes content feel more light and airy. Really nice alternative to just treating this same content in a bullet point format.<\/li>\n<\/ul>\n
Pattern #4: 1-Up\u00a0Content Block with Image<\/strong><\/h3>\n
<\/p>\nThis is one of my favorite patterns, but I believe it should only be implemented in a\u00a0very specific way.<\/p>\n
Full-width content\u2014that is, regular-size body copy that expands the entire width of a desktop website\u2014should be illegal. (Yes, illegal!) It is very difficult and very fatiguing to read content that spans the entire width of a computer screen.<\/p>\n
To use this pattern correctly on a desktop website, I believe there should be ample empty space on either side of the column\u2014to ensure the width of the text is narrow enough to read comfortably. Not only will the additional empty space assist in dramatically improving readability, but it will also create laser-like focus.<\/p>\n
It’s easy to imagine variations of this pattern, too:<\/p>\n
- \n
- Heading as link<\/li>\n
- No heading<\/li>\n
- Image as video player<\/li>\n<\/ul>\n
Why I like this pattern:<\/p>\n
- \n
- Headings:<\/strong>\u00a0Built-in scannability.<\/li>\n
- Images:<\/strong>\u00a0Makes content more scannable and memorable.\u00a0Imagine an entire article where every few paragraphs are broken up with an illustration, icon, photo, or hand-drawn sketch of a content pattern… Those visual breaks give users’ eyes a brief enough rest to help them plow through the next section of content.<\/li>\n<\/ul>\n
In Conclusion<\/strong><\/h2>\n
Is scannability part of your proofreading or editing process? Use\u00a0thoughtful content formatting\u00a0to ensure your message still gets across \u2014 even if your audience doesn’t read every word.<\/p>\n\n\n
Related Articles<\/h2>\n\n\n
- Experience Is Experience Is Experience<\/a><\/li>\n
- What Are the Different UX Career Options?<\/a><\/li>\n
- How to Get Real-World UX Experience without Going Back to School<\/a><\/li>\n
- Designing for Inclusion & Accessibility: The Giant List of Use Cases<\/a><\/li>\n
- How Product Management & UX Work Together<\/a><\/li>\n<\/ul>\n\n\n
- What Are the Different UX Career Options?<\/a><\/li>\n
- Images:<\/strong>\u00a0Makes content more scannable and memorable.\u00a0Imagine an entire article where every few paragraphs are broken up with an illustration, icon, photo, or hand-drawn sketch of a content pattern… Those visual breaks give users’ eyes a brief enough rest to help them plow through the next section of content.<\/li>\n<\/ul>\n
- Headings:<\/strong>\u00a0Built-in scannability.<\/li>\n
- Images:<\/strong>\u00a0Makes content feel more light and airy. Really nice alternative to just treating this same content in a bullet point format.<\/li>\n<\/ul>\n
- Headings:<\/strong> Makes it easy to see what the underlying content below will be about. Headings could easily double as links to more information, reducing need for additional button \/ link clutter.<\/li>\n