We live in an age of scroll culture. Just take a moment to think about how you move through any of your social channel feeds. Or how you’re about to zoom through this article (thought we wouldn’t notice, didn’t you?). With Internet users browsing speedily through content, how can you actually get readers to slow down and absorb the contents of your website? To understand how to achieve this goal, let’s step outside the World Wide Web for a second, and look at a case study of a brilliant advertising campaign that is getting passersby to stop in their tracks.
In cities across the United States, brightly-colored, giant posters have popped up advertising a nutritional bar called RXBAR. Designed by the firm Wieden+Kennedy, these billboards are anything but subtle. They feature self-referential quips, like a picture of the bar’s packaging underneath the giant header: “FOOD.” Or, in Times Square, an electronic sign reads: “Barely noticeable RXBAR poster in Times Square.” This campaign has been making design news. But what exactly is so genius about the overstated appearance and messaging?
The answer lies in the way our eyes have become accustomed to absorbing vast amounts of marketing each day. Most of the time, we greet commercials and signs with glazed-over eyes. Wieden+Kennedy’s campaign challenges that reaction. They are presenting digestible content (you can decide for yourself if that pun was intended…) in a form that disrupts the routine of the expected advertising ploys to which we have become accustomed. Between the readability and the shock of newness, they have people stopping and noticing what they’re saying.
Taking things back online, that’s the same kind of effect you want to have on your web visitors. Yet, how can you actually get your audience to absorb the message you’re trying to communicate through your page? (Not to mention, to appreciate all of the hard work you’ve poured into creating a masterful online presence.) Conveying your point requires utilizing a variety of design techniques to guide your helpless scrollers through your site and pointing out the most important landmarks along the way. Here, we explain what exactly skim reading is, how it impacts the user experience on your website, and how you can use web design to help readers retain information even as they continue skimming along your page.
What is skim reading?
Back when the Internet was still in diapers – we’re talking 1997, here – Jakob Nielsen of the Nielsen Norman Group discovered a major principle about how people read on the Internet. To put it in his words: “They don’t.” He arrived at that conclusion after finding that 79% of the users he surveyed consistently scanned web material that they encountered.
The Internet has changed a lot since then. But how we read it hasn’t shifted much. In fact, if anything, we’ve only lost more of our ability to read the content on our screens word-for-word. Instead, we engage in a practice called skim reading. You might remember it from your days trying to make it through your assigned school reading as fast as possible. Its digital counterpart isn’t so different. Skim reading refers to the strategy we use to move speedily across a web page, hunting for specific keywords and focusing only on elements that catch our eye.
There’s been a lot of research about why this browsing method is so prevalent amongst Internet users. Professor Maryanne Wolf, who has written extensively about this topic, theorizes that the vast amount of time we spend online (nearly 6 hours a day for the average adult in 2017!) is actually changing the neurology of our brains. She argues that we are growing more distant from the processing- and time-intensive experience of reading print. Online, we have grown accustomed to bite size bits of content and advanced visual design that creates organizational hierarchies for us, so that our minds don’t have to.
This reality presents a challenge for website owners who want to ensure their message is reaching their audience. Luckily, we are better understanding all the time how people interact with web content. For example, we know that we subconsciously employ certain reading strategies, like looking for keywords, and moving on quickly when a point is lost in a sea of text or not visually highlighted. Furthermore, eye-tracking studies have shown that web visitors tend to read in accordance with a ‘Z’ shape (for visually-based websites) and with an ‘F’ pattern (for text-based websites). Below, we’ll explore how to put each of these techniques into use in your web design, so you can craft a strategy to get more people to read your content.
Z-Pattern Design
📷
This style is particularly suited for pages that are full of visual components, and also for landing pages that are low on text but high on items like buttons, forms, and short explanatory boxes. If this sounds like what you have to offer, then keep reading to find out how you can transform all of your content into the shape of a ‘Z’.
The idea is that someone could roughly draw the letter ‘Z’ onto your page, starting from the upper left-hand corner and ending at the bottom right-hand corner, and hit every stage of the flow you’ve created for your web visitors. Before you jump ahead and get in (‘Z’) formation, you should first determine what information you will need to include. To make that decision, think about that initial moment when a visitor has just landed on your site.
What page elements do you want their eye to be immediately be drawn towards?Of those elements you just listed, what is the order of importance? Which one should come first, second, third, and so on?What is your ultimate action you’re guiding them towards on the page? What do you want them to accomplish by the time they make their way to the end of the ‘Z?’ Whether it’s purchasing a product or registering for a webinar, write down your concrete goal.
Once you’ve answered these three questions, you can start putting your flow into design reality.
Top of the Z-Pattern: This first horizontal line runs right across where your website header is located. Because readers’ eyes will naturally gravitate towards the left-hand corner first, that’s a perfect place to proudly stick your logo. Don’t have one yet? The Wix Logo Maker is here to help you out with that. Just answer a few questions about your business and its overall look and feel, and you’ll receive a customized, professional logo within seconds that is available for you to download and use across all of your marketing materials. It’s a way to instantly welcome visitors, and reinforce your brand’s identity.
Once you have your logo firmly in place, you can move rightwards. Think about what else is crucial for visitors to know right off the bat about your business. Is it your tagline? Links to social channels where you hold a major presence? A brief mission statement?
This top panel could also be the place you put your menu. Whether you have a traditional format of multiple pages, or a long scrolling website, keeping this essential information within reach makes life easier for your guests. Of course, if you a have a shorter, standalone landing page, then perhaps you can skip out on the menu. Otherwise, this navigation gift is essential.
Visitors often expect to easily find easily accessible navigation options at the top of the page. If they’ve entered your site with a specific intention, such as purchasing one of your stunning photographs, then they’ll probably quickly scan the top for a link to your gallery or online store. Take stock of all of the content on your site, and then consolidate it into several categories, such as: a testimonial collection, an ‘About Us’ page, an ‘FAQ’ section, a store to show off your wares, a ‘Contact’ section, and any other sections that feel relevant to your business.
Diagonal part of the Z-Pattern: This angled line, spanning across the page from the top right-hand corner to the bottom left-hand corner, functions like a playground slide. It’s meant to swiftly carry visitors from where they finished scanning the top panel, right along to where you want them to pick up scanning again on the bottom of the page. Whatever you insert in this space should captivate the viewer’s attention. That way, they will maintain interest long enough to complete the action you identified earlier as your ultimate goal by the time they get to the end of the ‘Z.’
A surefire way to accomplish this is incorporating a visual onto your page, such as a mesmerizing video background, interactive gallery, or eye-catching animation. Each lets you show, rather than tell, what your business is all about. If you run a coffee shop, an interactive background showcasing beans being freshly ground instantaneously conveys so much about who you are and what you do. Whatever you choose for the diagonal section, your goal here is keep moving the viewer along down the page.
Bottom of the Z-Pattern: The plane is preparing for takeoff to your action item. This last horizontal panel of the letter pattern is like your buildup to your ‘ask,’ so any information you put here should have the twofold goal of answering any remaining questions a visitor might have before being willing to put their trust in you, and building up enthusiasm for whatever it is you’re offering. Some ideas for this runway stretch are little boxes with short text listing the benefits of your product, excerpt quotes from raving reviews, or a few sentences about your business’ ‘story.’
If you’ve filled out the path of the ‘Z’ with compelling and interesting information so far – congratulations! The visitor has probably made it to the very tail end of the letter. Now is the time to make your call-to-action (CTA) known. Your request can take many forms: You can ask readers to subscribe to your mailing list, buy your product, download your report, book an appointment, and more. The question you pose should be consistent with your business’ goals.
Whatever CTA you select, how you choose to pop the question is important. Utilize design effects, such as a bold color that contrasts with the rest of the page, a button, or an accent font, to highlight your ‘ask.’ If you’re feeling stuck on how to approach this task design-wise, take a look at this complete guide to CTAs that actually convert, these ideas for the best font pairings, and a breakdown of how to apply design principles to your website (especially #2!). This step is what you’ve been gearing visitors up for this whole time. Don’t let them miss the lift off.
You’ve made it to the end! You don’t have to stop at just one Z-Pattern, though! If you have multiple sections in mind for your landing page, or a series of CTAs you want to post (like one for each of the four services your business offers, for example), then just restart the pattern at the end of the first letter. To keep the viewer engaged throughout, explore what parallax scrolling effects can do to bring your page to life and get visitors excited to keep scrolling through.
F-Pattern Design
📷
If you’ve started a blog, or your some of your pages naturally revolve around lots of text, then this design pattern is for you. Imagine someone mapped the letter ‘F’ onto your page. Whatever areas are included along its lines are the places where you will want to insert all of the most important information and phrases in your writing. Your key to converting casual scanners into more committed readers of your hard work is grabbing their attention wherever their eyes naturally gravitate. Here are a few principles to keep in mind as you get to work structuring your page:
Horizontal lines of the F-Pattern: Crafting a compelling title and section headers are essential for quickly explaining to the visitor what they can expect to find on the page, and why it’s worth their while to stick around. The top of the ‘F’ shape is generally where you would expect to find your headline and featured image, and the second line beneath it falls roughly in the range of where a subtitle would come a bit later in the text. This is true whether you’re formatting your blog archive, or a blog post itself. Besides sparking readers’ interest, creating H1 and H3 titles can give a big boost to your website’s SEO, as it makes your written material more easily findable through Google’s search index.
This structure puts a lot of significance on the first two paragraph zones of the page. That’s because they fall right in that range where a visitor is still scanning from left to right across the page. Make sure to get your ‘hook’ in by the time you’ve reached the end of this count (and no, the end of the second paragraph doesn’t come halfway down the page), whether that’s catchy titles for your articles or an intriguing opener to your post.
With the Z-Pattern, remember how each part of the letter was used to keep a visitor traveling along until they reached the CTA at the very end? Here, the first two horizontal planes of the ‘F’ shape are used to achieve a similar goal: To convince the reader that this is a page or article they want to keep reading until the end.
Vertical line of the F-Pattern: After scanning across the top horizontal section of your page, a reader will naturally gravitate vertically downwards, staying on the left-hand side. Your job will be to fill this space with interesting features to jump off the page. This encourages readers to break with their instinctive scanning pace and actually follow the remainder of the sentence. Some strategies you can use to make this happen are:
Foregrounding keywords in paragraphs, headers, and bullet points: Don’t make readers continue to the end of the sentence to figure out your point. For example, “Vegan Recipes to Try at Home,” makes for a more compelling subtitle than, “Try these recipes at home for good vegan cooking.” With the second option, you’re placing a very high – and very unlikely – bet that your reader will make it to the end to figure out what you’re saying. Even for the daredevils amongst us, it’s not a risk we recommend taking.Formatting elements: Sprinkle your content with stylistic elements like quote pulls, featured images, or numbered or bulleted lists. They break up the page and also provide easy landmarks to drawn in the eye as it grazes down the page. Another simple stepping stone you can add in is using numerals (when relevant) instead of writing out the number in words. The contrast with the alphabet letters will serve as another way to break up the text and attract attention.
General principles to remember throughout the F-Pattern: Our patience for reading online can only really tolerate short sentences. To understand why, just think about Twitter’s character limit, or how you feel inside anytime you see an essay-length post in your feed. Keep this principle in mind when you’re writing. Keep information accessible, and easy to grasp. Making your readers work to puzzle through your point, or backtrack to understand what you’re saying, will not bode well for keeping them around.
We get that what your business does is not always simple, though. And you certainly don’t need to lessen the quality of your ideas in order to sell what you’re doing to readers. It just means coming up with alternate strategies to build in complexity without visually overwhelming readers with a never-ending sentence. If you have a more intricate idea to present, link to relevant background information (hint: like linking to other articles or posts you may have written in the past) or accompany the paragraph with images or infographics to increase comprehension. Believe us, your visitors will offer up those praise hand emojis.
You’ve shaped your content into a beautiful ‘Z’ or ‘F’ shape across your page. Now what? First, use a Readability Test Tool, like this one, to evaluate the clarity of your written content. Second, send around the updated website to trusted friends, family, or colleagues to get their feedback. Ask them to jot down what immediately stood out to them about your page. Check this list against your original plan for what you hope will catch visitors’ eyes, and adjust accordingly until you reach perfect alignment. Get ready to get read.
Turn web scanners into engaged readers. Apply these design patterns to your website today!
*Source https://www.wix.com/blog/
Comments