You are here

Thinking about usability: how to get the site you really want (part 2)

Submitted by Kate on June 2, 2011 - 7:12pm

Nonprofits need websites. This is something a lot of people (me included) say and really believe. But nonprofits do not need the same kinds of websites as a band, a for-profit business, or a restaurant. We truly believe in making beautiful, professional, modern-looking websites for our clients. But they need to be simple and, above all, easy to use. If you've ever been to a website with a million pop-up adds and some crazy flash and yellow fonts on beige backgrounds, then you know what I'm talking about when I say usability. People should not have to think to use your website. Here are some elements to keep in mind and think about when you look at a mock-up or wire-frame, or even when you talk to your web designer/developer. Even if you are past this point and into the development stage (or even if you already have a finished product), take a look at your site with a critical, soon-to-be-expert eye.

As always, let us know if you have any questions.

1. Is there a slideshow at the top of your homepage?

Like in all things, there are trends in web design. And, like all trends, not all of them should be followed. Don't get me wrong, I love a good slideshow; even more, I love a useful slideshow. The White House website[1] has a nice example of a useful slideshow. It highlights achievements and recent events, which can be especially great if your target audience (see above), is donors, grant organizations, voters, etc.

Why wouldn't you want a slideshow? Well, it shoves all of your content down to the bottom, where it is less noticeable. That makes it less likely that someone will click where you want them. Take a look at Barack Obama's 2012 election page[2] and see the difference. The donate button, get involved button, and sign up form are all prominently at the top of the page, with a blog-style newsfeed below. Adding a slideshow is sometimes useful, but make sure it fits your goals for the website (see above).

2. How does this site look on a mobile device?

More and more people are looking at the internet on mobile devices. That doesn't mean you need to make a special website for mobile devices. It does mean that the website you have should look good and work well on a phone or tablet. Things like Flash animation, mouse-overs, and complex menu systems, will not work in most mobile browsers. The best way to check? Pick up a smartphone or a tablet and take a peek.

3. Is there any color on your site?

Color can definitely be overdone. But it can also be sad and boring to look at a drab website. Don't be afraid to pick even just a single bright color to use for eye-catching buttons, etc. SPD, the Society of Publication Designers, does a great job of mixing color with a clean design.[3]

4. What fonts are used on your site?

Typography is awesome. I love different fonts and effects and how they can be used to totally change the feel of something. However, that something is usually an image or a print publication. Why? Because not every computer or every browser will have your special pretty font. So best to stick with the basics and use web-safe fonts. Avoid using images for text, because it takes longer to load and isn't as user-friendly, especially for people who use screen-readers or have other accessibility options. We want everyone to be able to use our websites in spite of any differences in sight or hearing, right? It's just nicer that way. Save your really awesome typography for flyers and buttons!

5. Can people really use this site?

This might seem obvious, but it's so incredibly important. Lots of web users are super savvy, but you have to design for those who aren't. Could you grandmother or 5 year-old niece use this website? If you have a site up, grab a friend or relative who has never seen it before and let them use the site and give you feedback; try not to help them, it will give you a better idea of what needs to be fixed.

Using your new site: you still have to worry about usability.

Trust your HTML, trust your designer

WYSIWYG. It's an ugly name. It's that little set of buttons that lets you click to be bold or italic, even add images and such. The problem? It's got a mind of its own. When at all possible, use HTML. Go to w3schools.com and take a quick tutorial, and then trust the HTML to look good. This entire post is in HTML, and I used the simplest tags possible: paragraphs, links, headers. You spent money and time with a professional designer and/or developer, trust that they've set the fonts to look really great. Using crazy-colored or -sized text will be distracting, stick with bold or italics for emphasis; no underlines unless it's a link, and keep fonts uniform.

Single spaces all the time

Ten year-old me would be appalled that I'm writing this, because it goes against what I was taught in elementary school. But really: single spaces between paragraphs (just use the HTML paragraph tags), and single spaces between sentences. It's much cleaner looking, and you are not wasting valuable space. People are used to reading things on screens, don't make their eyes do more work by adding extra space.

Top 10 Web Typography Sins: Some of these are more serious than others—and you'll notice that even I'm guilty of some—but it's good at least to be aware of the rules you're breaking, right?

Read Part 1

If you don't have web developers or designers to talk to, you can always talk to me! Drop me a line: kate@richiroutreach.com

[1]The White House
[2]Barack Obama 2012
[3]The Society of Publication Designers