UX design. It’s one of those things we all hear a lot about and know is important, but can be hard to nail down exactly what it is in practice. Here’s a simplified definition:
User Experience is how a person feels when interacting with a website (or other digital platforms). The feeling generated is a result of their interactions with the design, performance, accessibility, architecture, and language, which then results in how the user feels about the company or product, and if the user’s experience was successful or not.
That can make it seem like there are a lot of things to factor in, and there are.
But let’s simplify by comparing some UX factors in two live campaign websites for the current 2016 presidential candidates. They’re an interesting sample set since they are all recently launched sites and were designed with similar objectives in mind.
We will focus on three elements: copy, visual design and user interactions, with examples of how each element illustrates why UX decisions are so important.
Best practices to keep in mind:
- People don’t want to work hard for information; keeping copy short and to the point will be more beneficial to the reader.
- If you have a lot of necessary copy, keep the up front information slim and give the reader the option to click for more.
- Copy also plays a role in evoking emotion from the reader. Choosing the right words and tone is important.
- Be considerate of type size, font choice and placement. These will inform your what is most important.
Let’s take a look at the tone, length and placement of copy on the 2016 campaign site home pages of two candidates: Marco Rubio and Hillary Clinton.
While it appears clean at the top, it becomes increasingly cluttered as you scroll down. What’s more, there’s not a real sense of what information is most important. Foreign policy, announcement videos, email updates and policy-related information are all given equal space in one small spot. It’s confusing and, while there is a lot of content, the lack of organization prevents the user from feeling more informed.
In fact, much of the language used on Rubio’s site is meant to evoke a sense of urgency around growing dangers. When using evocative language, image and word placement stakes become even higher.
There’s just not much content here at all. There are endless opportunities to sign up or donate, and that’s clearly this candidate’s goal—to invigorate and energize voters to donate or volunteer. And on that alone, the copy is effective. It’s brief, energetic and one can sense the urgency and momentum Clinton is trying to inspire. But the social channels jump you off of the site and the copy is almost exclusively calls-to-action with almost nothing about policy. Even the events tab requires you to join in or sign up for the campaign. The overall lack of even high-level information on her stand on issues leaves you with the feeling that this campaign is the presumptive nominee.
UX Visual Design
Best practices to keep in mind:
- Emotion can have a big result on customer loyalty; the images you choose can play a large role here.
- The information that you want your audience to remember should be simple and uncluttered.
- Try and use visuals instead of relying on copy; this can help the audience understand the subject matter quickly and easily.
Let’s take a look at emotion and imagery used on the home pages of the two campaign sites.
We see this is someone presenting themselves as a public speaker and leader. But it’s not a very dynamic photograph and the lack of crowd or other people can make this seem a little disconnected to real life. It may be a safe photo, but not an exciting one.
Clinton’s team seems to have selected a very personalized image. She’s with “the people” and interacting warmly, although still maintaining a leadership persona. There are smiles, and the background is familiar without being contrived or stuffy. The emotional desire to evoke a sense of community and warmth is immediately apparent.
Best practices to keep in mind:
- Keep forms simple. Users want to do the least amount of work they can. Don’t risk having a user bounce because you are requiring too many fields.
- People can only take in so much information without losing interest.
- What works is better than what looks good. People tend to focus a lot on the design of the site, but if it moves too fast, is distracting, or you can’t click the button, then the great design is not worth anything.
- Have a clear next step or CTA to avoid hard stops and guide the user through the site.
At this stage of the election cycle, both the campaigns are focused on signing up volunteers. So let’s look at how that process plays out for the user, as a possible volunteer in the two sties.
There’s a lot of copy here, and the multiple calls for “sign up now” or “sign me up” are redundant. The social media buttons also have quite a bit of visual real estate that fight for hierarchy with the volunteer form.
When you hit “Sign Me Up,” your success page is a donation form. It makes sense from the campaign’s point-of-view to ask for donations, but it does make us wonder if this makes the user feel squeezed.
Two things really stand out: the overly folksy copy and the bizarre donation amounts. There’s no explanation for the unusual amounts and the call for donations up to $2,700 doesn’t exactly mesh with the message of chipping in a few bucks.
Hillary definitely has the simplest and cleanest volunteer form. There’s no extra copy, just a clear call-to-action with only key information asked for. The social buttons are there, but folded in below and muted. One big drawback, however, is that after you fill out the volunteer form there is no copy to let you know what the next steps are. You are simply thanked and not given any sort of details on how you might be contacted.
Error pages are often a forgotten area of useful or meaningful user interaction. Ending up on one isn’t an ideal experience, but how they’re handled can create a positive experience.
Error page best UX practices:
- Explain the problem
- Drive them to a relevant page
- Using humor if appropriate
We want to give Rubio credit for trying to be clever with this, but the copy blames the user (probably not a great idea when you’re also asking them for money) and the overall layout is cluttered. We’re also not sure why a user would want to delve into an over 1-minute long video about Rubio’s relationship to football, meanwhile forgetting their objective of coming to the site.
Here Clinton manages to balance things very nicely. Sure, it’s a corny joke, but it doesn’t blame the user and it allows for some fun in a pretty straight-forward site that also humanizes the candidate. It also suggests the user sign up to volunteer, giving them a next step to take.
Anything we can do to make things simpler and more transparent is a plus.
– Cap Watkins, Sr. Design Manager at Etsy