Image for post
Image for post

Design for Non-Designers: Part 2

How it works is more important than how it looks

Tracy Osborn
Feb 13, 2017 · 6 min read

(This series of articles has been turned into a book! You can order Hello Web Design here.)

Part 1 of this article series focused on the visual (since that’s usually what folks are looking for help with when it comes to design), but it’s important to remember that usability trumps beauty.

The most gorgeous website in the world is useless if folks using that website can’t achieve what they want to do.

Don’t forget the user experience.

To illustrate this, think of a form.

Image for post
Image for post

We can use design tricks like reducing clutter and better typefaces to make the form look nicer, but we also need to make sure it’s easy to read and fill out.

Image for post
Image for post
Technically the form on the left uses all the tactics we discussed in Part 1, but it’s a nightmare for usability. The one on the right is more usable, meaning our conversion rate should go up, which is more important than just design.

Of course, this tip really depends on what you’re designing, so here are some general thoughts to help you keep thinking about user experience.

Determine the purpose of your site.

Make sure you’re thinking about that purpose when making your design.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Bright buttons or bright widgets catch the eye and tell the user “this is the thing I want you to see and use.”

Think about what you want people to do, and focus on building a design that helps, not hinders, folks from completing that purpose.

A lot has been written about improving usability and the number of visitors who achieve a goal (otherwise known as “conversion rate”). Here are some great articles:

Content matters.

Some basic rules of thumb:

Less is more. Cut down on text clutter.

Big paragraphs of text are intimidating. Folks on the web primarily skim websites, so giant paragraphs of text are more likely to be completely skipped than read thoroughly.

This sentence is long and wordy:

Please note that although Chrome is supported for both Mac and Windows operating systems, it is recommended that all users of this site switch to the most up-to-date version of the Firefox web browser for the best possible results.

Same sentence, rewritten for simplicity:

For best results, use the latest version of Firefox. Chrome for Mac and Windows is also supported.

(Thanks to Peachpit for the example.)

In a nutshell, shorten and simplify your writing. Avoid the temptation to use large words or wordy sentences to cover all the bases — the shorter and simpler your sentences, the more likely they’ll be read, understood, and even translated into different languages.

Rewrite your headlines to talk benefits, not details.

When you’re writing a headline, the first thing to pop in your head might be to explain what the product does. “So-and-so is a designer.” “This thing is a widget.”

Revamp that headline into talking benefits for the person reading it. “So-and-so designs usable and beautiful websites.” “This thing improves website conversions by 30%.”

Image for post
Image for post
Left, what the book is about. Right, what the book does for the reader. Benefits are more compelling than details!

Content changes like this can drastically improve conversions (the amount of people who hit your website that does what you want them to do), making what you design more effective.

For more reading about content, check out these resources:

How to check your design for usability problems.

Divorce your feelings from your design. It might be hard not to take negative feedback personally, but fixing the issues you might find with the usability of your site is more important. The more you reach out to others for feedback, the easier it’ll be.

My step-by-step process for finding usability errors in my designs:

1. Take a break and look at the design with fresh eyes.

Taking a break from the design, a couple hours or, even better, overnight, means you can look at the design with fresh eyes and catch some problems you might have missed earlier.

2. Run your design by friends and family.

3. Run your design by strangers and watch them use your site.

Here’s a great article on running quick and dirty usability tests.

In conclusion, make sure your design works as well as it looks.

  • Think about the purpose of your design, whether it’s getting someone to fill out a form, to find information, or something use.
  • Make sure your designs support that purpose and improve the user experience with that in mind.
  • Don’t forget about your content — simplify your words and write content and headlines that talk benefits, not details.
  • Show your designs to others and get feedback to find where user experience issues might be hiding.

This article is based on my Design for Non-Designers presentation, given at multiple conferences around the world.

Image for post
Image for post
Order Hello Web Design here — eBook, paperback, or full video course with screencasts and explanations available.

Get the book! Hello Web Design will contain not only the above information but also theory and best-practices in down-to-earth and easy-to-understand terms aimed at programmers and non-designers.

Buy the book here.

Thanks everyone! For any questions, follow and message me on Twitter.

(This post also appears on the Hello Web Books website here.)

Hello Web Design

Improve your side projects, marketing assets, slides…

Thanks to Andrey Petrov, Jeff Triplett, and John Zila

Tracy Osborn

Written by

Author of Hello Web Books. Traveling the world and climbing mountains.

Hello Web Design

Improve your side projects, marketing assets, slides, resumes, and more. Learn enough design to be dangerous.

Tracy Osborn

Written by

Author of Hello Web Books. Traveling the world and climbing mountains.

Hello Web Design

Improve your side projects, marketing assets, slides, resumes, and more. Learn enough design to be dangerous.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store