We all know that Donald Trump and Hillary Clinton are in the political limelight. So, why don't we have a little fun with their websites? Let's take a look at Hillary Clinton's website. This article could be considered a lite Heuristic Evaluation with commentary. Stay tuned for next week's evaluation of Donald Trump's site (that's when the real fun starts).

Bad Input Fields

The ‘Find an event near you!’ Field on the homepage has a few usability issues. I assume that I should type my Zip Code here:

One problem is that as a user I can’t see what I’m expected to input once I start typing. Well, here goes... Wait... what do I need to type in to find an event again? Maybe I'll type in my state:

This is strange because other input fields on forms show the label as I’m typing. Now that's what I call good form labeling, although it could use some placeholder text to help me out:

Anyway, Let’s try searching for an event! A search for Massachusetts returns events in Burlington MA! Great! But, why did the field on the homepage only ask for my ZIP code? It looks like I can search by ZIP code, city, or state. Oh, and bad placeholder text inside the form field again:

Even though I could complete the task by searching for my state, this whole flow goes against my mental model of the system. I thought you could only type in ZIP code. But, I was delighted when I actually got results after typing in the 'wrong' input. Maybe the UX Designers behind Hillary's website took this into consideration, but I think the most likely case is that they didn't have enough room on the homepage to type out 'Search by ZIP/postal code or city, state', so they just used 'ZIP code' as placeholder text. The form field on the homepage also forces me to use recall rather than recognition when filling out the form; I need to memorize what I’m supposed to put in a field as I type. This is bad.

I would suggest putting the field label above the input field for easy recognition of required input. I would also recommend that the field name reflects the things you can use as search queries!

‘Sign in’ but no ‘Sign up.’

It’s a real chore to sign up from the homepage. No evidence of a sign-up button above the fold. When we go to the navigation item labelled ‘More’, we can find a ’Sign in’ button… but no ’Sign up’ button: 

OK, so maybe I’ll try and find a sign-up button from the sign-in page. Oh there's the sign-up link:

I finally got to the sign-up page! Now we're getting somewhere.

It only required clicking an obscure ‘More’ button, followed by the wrong menu item, followed by searching for the small ’Sign up’ link at the bottom of the sign-up form.

‘You know my method. It is founded upon the observation of trifles.’ - Sherlock Holmes, The Bascombe Valley Mystery

Make it easier Hillary! Content is more discoverable when it's not buried under a multitude of links. Just put a sign-up button plain view above the fold of your homepage.

Dark Patterns for a Navigational Nightmare

After heading back to the homepage I decide to scroll down further and spot a ’Sign up’ button:

I press it, but I realize that it’s not the same thing I’m signing up to. It’s a sign up for volunteering, not for creating an account:

For the sake of consistency and standards, I would change the ’Sign up’ button in that context to ‘Volunteer’ or similar to avoid confusion. Also, notice the lack of navigation compared to the homepage header:

Hillary REALLY wants you to volunteer.

But, wait!

I click the ‘Donate’ button, and what happens to the navigation? The header completely disappears. Even the Volunteer page had a home icon to navigate back to the homepage. The Donate page has no way of navigating away, except through the browser back button. Hillary REALLY REALLY wants you to donate:

Now take a look at the screenshot from the mobile:

At least Hillary included a navigation to the homepage for mobile devices, right?

Wrong.

The logo up there is not clickable; it doesn’t include a link. This wouldn’t be much of an issue if the logo behaved in the same way on every other page on the site, but it doesn’t. Again, we see a lack of consistency and standards.

If you’re going to use dark patterns to manipulate people into donating, don’t show them a glimmer of hope by showing a way to get away from the page only to disappoint them with a logo without a navigation link. Just don’t include it on the page, or keep the navigation consistent across the site.

This may be a gross overreaction and it is understood that the designers wanted to reduce visual noise and clutter that could distract users and result in abandoning the donation flow. We can also assume that users do know how to use the back button.

Hillary’s site is, overall, quite well designed. I just picked up on a few usability issues and dark patterns that can be used for good or evil. This analysis is not meant to side with either party or be used as a political tool.

Does anybody want to help me do an expert review of Donald Trump's site?