On April 17 Travis Smith from Hop Studios provided a review of BC’s three political party websites on CBC Radio’s Early Edition. Travis provided a good, brief review commenting on their creative elements and visual design. What I noticed was missing in his review was the usability angle: can users do what they need to do on the site? Thus the seed was planted for this evaluation of the three political sites, on the eve of the provincial election because after all, if a user can’t figure out how to use your website, does it matter how pretty it is?
The goal and focus of this evaluation is to compare each of the BC political party websites against established usability standards. At OpenRoad, we have a unique method of conducting comparative analyses of websites. We review the key elements of each part of the site and assign both a criticality value and a usability value. These two measures are then combined, providing an overall rating of usability which allows us to easily identify where website usability gaps exist. Sites are evaluated across the following major categories: navigation, content design, user control and freedom, accessibility, functionality integration, error avoidance, social media integration, and overall consistency.
Step 1: Determine the goals of the website
The first step is in the evaluation is to determine the goals of the sites. Typically, we work with clients to determine and establish the goals of their sites prior to evaluation. For this evaluation, we have made an educated guess given the content of the three sites, our understanding of what political parties want voters to do, and as potential end-users of these websites.
Goal 1: Obtain a vote.
Build credibility with voters through clearly communicating your platform message, show transparency with news items and events, and allowing people to engage in an honest 2 way communication with you.
Goal 2: Obtain donations.
Money is needed to run an election campaign. Seek funds and allow your supporters to donate money easily through the online channel.
Goal 3: Gain volunteers.
Door-to-door, online, manning the phones, distributing lawn signs: volunteers make campaigns happen. You need lots of them to be successful.
The results
Overall, all of the websites did quite poorly from a usability point of view. Using the British Columbia university letter grading scales (http://en.wikipedia.org/wiki/Grade_(education)#Canada) , the grades for each of the sites are as follows:
 |  |  | |
| Overall | C- 55% | D 51% | C- 59% |
| Navigation | F 43% | D 51% | F 49% |
| User Control and Freedom | C- 56% | C 62% | C+ 67% |
| Accessibility | B- 72% | C- 55% | A- 89% |
| Functionality Integration | C- 58% | F 33% | F 42% |
| Error Avoidance | F 45% | F 17% | F 17% |
| Social Media Integration | D 50% | C- 57% | C+ 67% |
| Consistency | C- 55% | D 51% | C- 59% |
Note: the maximum contribution of usability to the final grade are as follows: Navigation 22%; Content 28%; User Control and Freedom 8%; Accessibility 8%; Functionality integration 5%; Error Avoidance 11%; Social Media Integration 8%; Consistency 10%.
Why the failing grades? Sites performed in a substandard fashion primarily due to poor navigation and poor integration of functionality. All sites demonstrated comparable content messaging, but it was the execution of the messaging where they fell short. While the parties posted their official election platform online, various methods intended to build credibility were lost behind confusing navigation and “flashy” functionality. On the brighter side, all sites managed to meet their donation and volunteering goals with varying degrees of ease for their users.
Let's review what worked and what didn't.
Graph: Comparison of BC Political Party Websites Across Usability Criteria
What Worked
Social Media
What we were looking for:
This was the year of social media for the election. Fresh off the heels of the Obama campaign and its reliance on grassroots social media, community building, and online fundraising, it was not a surprise that provincial political parties would take their campaigns to Facebook, Twitter, YouTube, Flickr, and beyond.
What we found:
The NDP kicked off their campaign with a clear social media message. This is demonstrated on their site through clear integration and availability of social media tools for the user to select from. Social media though is not just about having links to Facebook and Twitter, it is about enabling a two way conversation with your users. The NDP site does not permit users to comment on posts or articles, but does encourage voters to do so elsewhere online to support their cause.
A Facebook page, YouTube channel, and a video blog are the focus of the Liberals social media approach. In their “Make a Difference” section, there is an item called “Social Networking” which when selected takes the user to the Gordon Campbell Facebook profile. They also promote an item called “Open Platform”. However, when I selected the link about participating in web surveys and panels, I was taken to the homepage that contained no further information. The differentiator of the Liberals is the daily video blog of the Premier. Whether he is talking about the Canucks or the town that he is in, this approach is trying to add a more personable dimension to the party and their leader.
The Green Party is encouraging two way communication by allowing visitors of the site to comment on postings (although no one has). They are taking a similar approach to the Liberals by providing links to the other sites like Facebook, Twitter and YouTube, but are not supporting social bookmarking like the NDP are.
All of the parties are covering the social media basics. Hopefully, they are measuring the success and impact of these approaches through a web analytics program that allows them to act and change their approach in gaining supporters, donations, volunteers, and building credibility with voters.
Candidate Information
What we were looking for:
Who are you? What riding are you in? Are you a credible candidate? What’s your political experience? Many voters mark their ballots not based on a personal political philosophy or alignment to a particular ideology, but based on who the candidate is and whether they feel that candidate will best represent their interests in the Legislative Assembly. Communicating the basic information about a candidate is a crucial part of any successful political party website.
What we found:
The Green Party does the best at communicating who their candidates are. Selecting a candidate provides voters with candidate information in a standard template format. All of the candidate information lives on the Green Party website, instead of being hosted on separate candidate sites with different domain names. Voters can click through to see candidate’s personal sites if they so choose, after they have read the main information page.
The ability for users to look up their candidate is something that both the NDP and Liberals offer. The NDP offered a better solution for this by allowing users to enter in their postal code and then displaying the riding as well as the candidate. This was a simpler approach to help users identify what riding they reside in.
Figure: Good approach to "Find Your Candidate" feature
What Didn't Work
Navigation
What we’re looking for:
There is a basic rule in usability—“let the user know where they are at all times.” The simplest place to apply this rule is within the site’s navigation. The navigation should indicate to the user what section they are in and what page they are on. Sounds easy enough, right?
What we found:
Well, all of these sites broke this golden rule. In all of the sites there were times that the main navigation was not showing what section I was in, especially when I navigated to a section from a text link in the body copy of another section.
Figure: Where am I? Not indicating where the user is on the site
The placement for the secondary navigation was another big surprise for me. There seemed to be a trend with the NDP and the Liberals to adopt the unconventional use of the right hand side of the screen for the secondary navigation. This part of the screen is typically reserved for call to action messaging and ads. When users scan sites, this is the part of the screen that they ignore and it has been dubbed the area for “Banner Blindness”— users often do not look at this area, they ignore it. So with that in mind, placing the secondary navigation on the right side of the page is a poor choice.
Figure: Unconventional right-side navigation placement is hidden by tools
The Green Party navigation is problematic for another reason: the hierarchy is hidden. The user is never exposed to the secondary navigation. The Green Party chose to display a breadcrumb trail which confuses the navigation more than it helps. The breadcrumb trail is present for some sections of the site, but not for others. If you are going to use it, use it consistently and appropriately.
On the Green Party homepage, the main call-to-action and image is focused on introducing Jane Sterk. This is a great idea, given that Jane is new to the Green Party and probably most BC voters as well; however, this call to action takes the user to Jane Sterk’s website. Once on Jane Sterk’s site, the confusion is increased, as it looks almost identical to the Green Party website, but the URL has changed and the navigation items are different. There are enough differences in the two sites to make you wonder where you are—the Green Party site or Jane’s site and what’s the difference between the two? There is also no obvious way to get back to the ‘official’ Green Party site, other than a small text link in the footer.
Figure: Homepage drives traffic away from main site
Online Donation
What we’re looking for:
The online donation form was an item found on each site. This is not surprising as it was identified as the secondary goal of a successful political site. Often, online donation form functionality is enabled through a third party vendor which provides a “plug-in” or “customizable template,” so organizations do not have to build credit card payment gateways and donation management systems themselves. From a usability point of view, success means finding a solution that plugs seamlessly into your site, so that users can identify that it is secure, and that they feel as though they are still on your site (and not being redirected to an malicious site that is about to take their credit card information). Users look for visual cues to know that payments are secure—like PayPal and VeriSign logos.
What we found:
In general, all sites needed some assistance with the design of their forms. What was required was not clear, the buttons were not labeled correctly, and the error messages were poor. In the ideal world errors never happen, but on forms they will—it is a given. So make sure that your messaging helps to guide the user to completion.
Figure: Three different approaches to Donation form
Functionality Integration
What we’re looking for:
Although the majority of these sites are content based, there are functional elements that are integrated throughout. Functional elements include anything that the users can interact with like online forms, videos, games etc. These elements are help to add a level of engagement to with users, as long as they are able to figure out the interaction and use it with ease.
What we found:
The Liberals demonstrated some unique functional elements that enhanced the immediate visual appeal of their site; unfortunately, these were often unusable due to the lack of control with interacting with them. An example of this can be found in the filmstrip feature found on the Premier’s Photo Gallery page: looks nice, hard to use. In addition to the difficulty in controlling the filmstrips, there is no context to any of this content prior to or after selecting it, and it does not indicate which item is selected. Having these types of pieces can really enhance sites and be differentiators when done properly. When not done properly, they can turn users off and make the less-tech-savvy users feel stupid and insecure.
Figure: Lots of interactivity, but unfortunately not usable
Ways to Improve
It may appear throughout this evaluation that I’m promoting a “lowest common denominator” approach to the design of websites, perhaps focusing on the less-tech savvy audience as the key users. This is not the intent of the evaluation or our user experience design philosophy. What I am promoting is ensuring that your site and functionality can be used by both novice users and expert users. The expert users will find elements to increase the efficiency of their time on your site with increasing exposure and frequency of use. The goal for a positive user experience is to layer content and functionality appropriately for each user type. It is a fine balance, but it can be achieved by understanding what usability principle you should follow at what point.
Back to Basics
Here are some basic usability improvements that all three sites can immediately benefit from:
- Improvement 1: Identify if a link is external versus internal.
- Improvement 2: If a document is a PDF, indicate that it is one by placing a PDF icon next to the file name with the size of the file.
- Improvement 3: Ensure your navigation – top level, secondary, and tertiary – always indicates where the user is on the site.
- Improvement 4: Clearly indicate what are required/mandatory fields on your forms. This is typically indicated with an asterisk (*) next to the field in a different colour.
- Improvement 5: On form fields, if there is a specific way that the user needs to enter in the information, tell them before they start to enter it. Add the format below or beside the field (like how to format your phone number – with dashes or spaces). It is better to help avoid errors than cause them!
- Improvement 6: Ensure your flashy interactive pieces are usable. When using a filmstrip type approach for image browsing, it is better to allow your users to advance to the next set of images or thumbnails first, rather than autoscrolling on mouse movements. Place arrows on either end of the film strip to indicate to the user how to advance.
Conclusion
Overall there is a lot of room for improvement for all of the sites. The good news: it would not take a lot of work to improve these to receive a higher usability grade. Established usability standards can help easily guide an improved interaction design.
In summary, what one site did well, the others lacked. So in the end, if we were able to take the best of each of the sites and merge it into one – we would have the ultimate provincial political site… and imagine if we can do that with politics too! See you at the polls on May 12th.
--
Originally written by Selma Zafar, Senior User Experience Designer at OpenRoad Communications.