The Vanguard View: Insight for Association Websites

Remove the Kitchen Sink from Your Website Homepage

Posted by Ray van Hilst on Fri, Oct 23, 2015

We’ve been doing a lot of usability studies and user interviews for a variety of client websites recently. And there’s one specific comment that just about everyone says about their association’s website...

There’s too much stuff!!

Read More

Topics: web strategy, usability, content strategy

Engage and Convert: Ensure Visual Hierarchy on your Association Website

Posted by Ray van Hilst on Tue, Jul 08, 2014

This is the first in a series of blog posts based on the “5 Website Improvements to Make in 5 Minutes (or Less)” session I co-presented with Maggie McGary at the ASAE Membership, Marketing and Communications Conference in June 2014.  Each post will cover one of the elements we discussed in more detail with today’s post covering Visual Hierarchy.  To get a sneak peek of future posts, view the slides from our session on Slideshare.


Key Elements of Visual Hierarchy

Never underestimate the importance of your association website's visual layout. Whatever your target audience, whatever your sector, all websites need to follow some basic design rules to ensure maximum engagement with visitors.

Here are three important elements to remember:

  • The more important an item is, the more prominent it should be - You can think of your site's layout the way a journalist creates news articles: the more important a piece of information, the higher up in the article it appears. So, when designing each page, you need to be sure that the most important elements are the most prominent – the bigger they are, the better the chance your visitors will get a fast understanding of your page's unique message. This is your hook.
  • Items related logically should also relate visually - Any aspects on your website which are connected by theme or type should share a visual design. So, for example, if your site offers webinars, conferences and online learning, these could be grouped as “education,” and therefore be placed within the same box: neat, tidy, simple.
  • Items are nested visually to show what's part of what  - In other words, each group of products or services should be clearly separated to allow users to see the individual components of the respective group. This is basic navigation sense, allowing users of all levels to find what they need, exactly when they need to. 

F-shaped Reading Patterns

Users read websites in the same F-shaped pattern: they start at the upper part of the content area –  typically where the titles and essential information sits – in a horizontal movement, before proceeding down the page a little bit. They will then read across the screen again, in a second horizontal pattern, shorter than the first – this covers the F's lower bar. Lastly, users will then scan the left side, in a vertical pattern, completing the F. 

Designing your page to follow this pattern ensures a smoother reading experience for the user, offering more comfort and ease than a simple block of scrollable text, or a stream of text in a poorly erratic layout.

The image below from the Nielsen-Norman Group shows this pattern in action.  For more information about how readers follow this F-shape pattern, check out this article.

Layout Considerations

To maximise user engagement, then, you need to create a visual hierarchy within this viewing pattern. You also need to communicate user value: base your navigation and layout on the user's key actions.

How do you do that? Place yourself in your visitor's shoes. What do you want or need to see within the first two seconds of landing on your homepage? Does your current layout present who you are & what you do in a clear, engaging way? Are the visuals attractive? You need to keep the user and let them explore the site based on their needs – they must be able to get from one page to another with a minimum of fuss. You need to engage your user enough to convert them into a customer.

The Call to Action

This is a key feature of your content – you must provide the user with a 'next step' in order to complete their experience. Whether this means filling out a form, registering for an event, or connecting with you on social media, the CTA needs to be clear, persuasive and unmissable.

For example, you could use something along the lines of:

“For more information about applying to cooking school, download the Ultimate Guide to Becoming a Restaurateur.”

This is fast, easy to understand and clearly explains what the user will click through to.

Other quick calls to action include:

  • “If you found this helpful, share it on Facebook or Twitter”
  • “Connect with fellow members on LinkedIn”
  • “Stay informed of this and other important policy issues by signing up for our Action Alerts” 

So, take a look at your website and compare it to these best practices. Does it feature the F-shaped pattern? Are the visuals eye-catching, clear and engaging? Does it make you want to stay on the site or click back out as fast as you can?

If the answer is no, give us a call – we'll revamp your site and boost user engagement for maximum results.

Free eBook - 10 Things Members Want from Your Association Website

Read More

Topics: usability, association website design, best practices, association websites

Inconsistent Website Experiences = Confused Members

Posted by Ray van Hilst on Thu, Feb 07, 2013

Read More

Topics: members, user experience, usability, association website design, associations

5 Quick Tips to Improve Your Website

Posted by Ray van Hilst on Thu, Oct 04, 2012

“I always make sure that when my team touches a piece of content or collateral, they make it better than it was before. No matter how small the requested change is.”

I was inspired by this comment from Bennie Johnson, Global Chief Marketing Officer at the HR Certification Institute.

It’s a liberating concept.  We website managers look at the Herculean task of updating thousands of website pages and making the whole thing better.  Then throw our hands up in frustration.

But here’s a better approach… make a series of small improvements and over time you will change the whole thing.

Maybe all you’ve been asked to do is update a date or add a paragraph.  You only have 5 minutes and need to move on to the next task.  How can you possibly make an improvement on the page without this turning into a big deal?

Here are 5 quick fixes to can make while editing each page that over the long term will gradually improve the quality of your website.

1) Make Sure There Is a Visual Hierarchy

As you look at the page, are you SURE you know what the most important thing is on the page?  Or is all content given the same weight? Make sure the most important content or message is the most prominent, that related content is grouped together, and there is a flow through the page.

2) Clean up the Content to Make it “Web Friendly”

Web users only read 25% of the text on a page and scan pages rather than actually read them.  Take a few minutes to shorten the content, break into shorter paragraphs and highlight key content with bullets and/or bolding for emphasis.

3) Add Relevant Links to Other Pages in Your Site

The origin of the web was text documents that linked to each other. Look at the content on the page and find opportunities to embed text links to other relevant pages in your site.

4) Add SEO Meta Data and Plain English So the Page Can Be Found

Make sure the page has an appropriate description and keywords in the meta data.  Keep the description brief (under 160 characters) and write it from an outsider’s perspective.  Also make sure the content is free of insider jargon and uses plain English based on how external audiences would refer to the subject.

5) Add a Graphic or Photo to keep Users Engaged

Pages with graphics and photos grab users interest and keep them on the page.  Add a small photo or graphic to illustrate the content on the page.  Keep it under 200 pixels wide so it is noticeable but doesn’t detract too much.

Lastly, decide if the page needs more work than you can do right now. Every now and then you’ll come across a page that needs more attention than you can give it in 5 minutes. Decide if this is one of those pages and notify the page owner or subject matter expert that it needs a bigger review and update.

By making these small improvements in each site page as you update your content, you’ll find that over time you have improved the entire site.  If each journey begins with a first step, the path to a better website can be filled with many small improvements.

Additional Resources:


Read More

Topics: Communications, Ray van Hilst, usability, Tactics, seo, messaging, Uncategorized, CMS, Websites

Using Sitefinity: A First Time User's Perspective

Posted by Chris Bonney on Thu, Sep 13, 2012

This guest post is by Alicia Leonard, Vanguard’s Online Community Specialist, who we recently drafted to migrate a few client websites.  Since this was the first time she had ever used the Sitefinity Content Management System (CMS), we asked her to write about her impressions as a new user and former association manager.


In today’s day and age, you’re nobody without a website.  People can’t find you, don’t know what you do, or why you do it.  Without it, you just don’t rank against competitors with an established, robust internet presence.  Associations and non-profits used to be immune to this phenomenon, but this has begun to apply to them as well.

What to do?  Associations are strapped for cash, time and people.  Websites are expensive.  They take people and man-hours, and both are already spread thin. In my short time using Sitefinity, I see how its simplicity and user-friendliness makes it a perfect solution for associations. This product is so easy to use, it enables an organization to have a first class, dynamic and professional website without specialized, technical staff.

Sure, I know this sounds like a well-practiced sales pitch. But let me assure you, I have seen other website content management solutions out there. It’s not pretty.  In my previous life working in one of those short-staffed, small budget associations, one of my many tasks was to maintain the association website.  Through various stages of the site’s life, I used a few CMS products.  None of them were good.  Those tools are the main reason behind my rapid acquisition of HTML – the user interface was that bad.

My role at Vanguard was at first related to different aspects of the web redesign process and I was using other products and tools to assist our clients with their projects.  But with some looming deadlines, I got thrown into working with the Sitefinity CMS – without much training since everyone else was so busy.  (Don’t worry. We provide great training for our clients.)

And let me tell you, this CMS is definitely a thing of beauty.

The shortage of Sitefinity training proved to be a non-issue.  It is so intuitive, it truly is as easy as breathing.

Want to link to a document right here?  No problem, type the text, click a button, pick your file and bam – you’re done!  Want to have one of those menu items actually go to another website?  Simple.  Just label it a redirecting page.  Next time you click on that item, you’ll be at your new destination.

Getting content into the site is a breeze and styling it even easier!  Yes, I know HTML now, but I almost never need it, that’s how easy to use the interface is.  The styling buttons are so easy to interpret and create very attractive results.

When I first came to Vanguard, I said I was getting to keep all the parts of my association job that I loved like client interaction and working with websites, without any of the stuff that I don’t miss.

I had no idea that I could fall in love with web design all over again.  Thanks Sitefinity.

Read More

Topics: vanguard technology, usability, Uncategorized, sitefinity, CMS, Websites

5 Things You Can Do To Improve Your Website Now

Posted by Chris Bonney on Sat, May 21, 2011

1. Title Tag

Help Google find you. The title tag of your page (the words that appear in the very, very top of your browser in the upper left) is one of the major elements that Google considers. It should include the keywords you hope people are putting into Google to find you. It shouldn't just say "Home" or "About Us". Make it like, "The best karaoke enthusiast organization in the United States," assuming you believe people might be searching "karaoke enthusiast organization" in Google to find you. Simple fix, big results in your search engine ranking.

Read More

Topics: usability, Chris Bonney, members only, blogs, website redesign, mobile, Websites, associations

What Google Can Teach You About Your Website

Posted by Chris Bonney on Thu, May 20, 2010

I admire Marissa Mayer at Google. She's the Vice President, Search Products & User Experience at the search giant. In essence, she's the one responsible for keeping Google's home page as simple as it remains today. Not an easy feat. She's loved and hated by many, but she's maintained her integrity and beliefs about user experience and Google remains profitable because of it.

Read More

Topics: web strategy, marketing, user experience, usability, Google+, Websites, marissa mayer

Guest Post: The Quest For The Amazon-Like User Experience

Posted by Chris Bonney on Mon, Mar 08, 2010

This is my first blog post for Vanguard Technology, so allow me to introduce myself. I’m an advocate for people who use Web sites. I help make sites more usable, through usability testing and user-centered design. If you don’t think people should need a secret decoder ring to understand a Web site, I agree. If you believe Web sites should give us what we want--quickly and easily--I’m with you.

I ask a lot of questions in my work. I always ask usability test participants what sites they like and what they like about them. I ask the same of clients who are planning a site redesign. I also ask associations how they think their site should serve the needs of their members, and I ask members what they want from their association’s site.

Read More

Topics: web strategy, Communications, usability, Amazon, olkin communications, Websites, associations

CMS For Associations: How It Can Affect Your Brand

Posted by Chris Bonney on Thu, Mar 04, 2010

Jacqui Olkin of Olkin Communications Consulting is, among other things, a website usability expert. She understands the subtleties of web design and how to mesh them with the unique needs of your membership online.

Read More

Topics: marketing, usability, olkin, CMS, associations

Subscribe via E-mail


New Call-to-action

Follow Me

Latest Posts

Our Most Popular Posts

Concepts

Tools