Designing Effective Web Pages

posted in: Design | 0

I have an artistically inclined friend who staunchly insists that design considerations trump all else. No concern for content, communication or basic human decency rises above the primacy of design in his view. That’s silly, of course, but he is correct that design elements carry a deep power to move audiences, conveying messages with subtlety and resonance viewers can’t ignore. The brain responds to these design cues whether or not we are relative Neanderthals when it comes to proper design appreciation.

Websites bring a wealth of opportunity to express your firm’s flavors and feelings along with the overt messages you wish to share. It may seem like an obvious thing to simply create pretty pages and fling the words you want to say up on them, but if you think that’s the best way to proceed, you’re terribly, terribly wrong. There is a concept called the visual hierarchy that makes a world of difference when it comes to creating pages that invite readers in and coax them through the information you want them to glean.

Humans come with pre-programming that makes our eyes naturally follow certain patterns as they traverse a page. It’s not an absolute – some people won’t fall into this sequence and not everyone does so without deviation, but the behavior is fairly predictable overall. You can take advantage of this knowledge when designing your web pages. There are two major patterns that you should know if you’re designing for English-reading audiences.

F Pattern
Following the F pattern, viewers will first scan across the top of the page before moving down to read across again, usually not quite as far. Then they’ll switch to a vertical scan down the left side of the page, going on to read eye-catching bits that extend out to the right from headings, first sentences or keywords that caught their attention. This pattern is often used on text-rich pages with a lot of copy relative to image content. Try these tips based on research by the Neilsen Norman Group when planning for the F pattern on your pages.

  • Most readers will scan and skip rather than reading every word. Plan for that and make key points and words easy to find, with subheads and spaces to help viewers locate important areas.
  • Keep your critical information at the top in the first two paragraphs. That’s the space that gets the first and most attention.
  • Use bold text and links on keywords in the lefthand column, allowing users to click or follow up with text that extends from those focal points.

Z Pattern

For pages that are more focused on graphics, a pattern resembling the letter Z describes the way readers interact with page content. Scanning from left to right as in the F pattern is followed by a zip back down to the lower left of the page, from which readers follow another line out to the right. Z-pattern pages are best suited where you wish to make a strong call to action and the content is fairly limited from a text perspective. When using these pages, consider the following strategies:

  • Frame the entire z-pattern with clear separation from the page background.
  • Try using a central video, slider or static image in the crossover space.
  • Use the lower space to lead viewers through the steps you want them to follow, ending with your final CTA in the lower right.

Content is surely king, but by knowing a little bit about how most people automatically view web pages you can help ensure that your content is as effective as possible. Have fun with it, and be sure to let us know which other design strategies have worked for you in the comments.

Follow Sarah:

Sarah Warlick is responsible for making us and all of our clients sound professional and eloquent as the content director at bbr marketing. In this role, Sarah is in charge of ensuring that all copy is well-written, accurate and free of pesky typos before it heads out the door. Additionally, she is a prolific writer and a frequent contributor to bbr marketing’s blog sites. She spends a good deal of time writing copy for our clients and has a unique way of crawling into our clients’ heads to create ghostwritten copy that sounds as if it came directly from their pen.

Latest posts from

Leave a Reply