SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Usability And You: The Design Process

February 4, 2011 by Jacob Creech 10 Comments

As someone who works at a web design company running a usability tool, I get many questions from interested parties on how we use usability in our design process. Many people seem to see usability as an impediment to a smooth design process, as something that breaks up the workflow rather than complementing it and smoothing it out.

They see implementing a usability testing process as a very time consuming, expensive, arduous task that adds little value to their business or for their clients. This is all very negative sounding, and something I hear repeated rather too frequently for my liking.

Usability Testing

Contrary to this belief however, actual experience has shown us when done well, usability can speed up our development cycle, save us money, improve overall designs and usability, and show the clients the value of the work we do.

The key is learning how to properly integrate usability testing into your workflow in a way that suits the way you work, the kind of clients you work with, and the budgets – both in terms of time and money – that you have for each project. Usability testing doesn’t have to be either very time consuming or very expensive. Remember this, and learn how to sell your clients on the concept as well.

As designers and developers on the cutting edge of internet trends we need to be evangelizing the concept of a better, more usable web. To paraphrase ‘Field of Dreams’, “Build it and they will come; build it well and they will come back“.

The better, more usable we can make the web, the more people will use it. The more people use it, the more demand there will be for better, more usable websites. All of this means more business for us, and a better, more usable future for the internet – in my opinion both very worthwhile reasons to focus on usability testing.

Usability Loop

Furthermore we’ve found we can actually save time and money, as well as development resources by using a usability testing process. With our testing we get firm metrics that tell us what is or isn’t working with each design, and no longer have to suffer the pains of design by committee, no longer have to explain each and every last reason for design changes, or why we do things the way we do.

On top of this clients can also see the evolution of our designs from sketches to the finished website, and can start to appreciate the amount of work and reasoning that goes into our designs. All of these things add up to an incredible amount of value for us, and a much more enjoyable, understandable experience for our clients and their users.

So how do we integrate usability into our workflow? Read on to find out how:

Our design process

Sketch

Design Sketches

The first step for us is sketching out a rough design. This serves as a very loose base for our designs, and enables us to quickly and easily get our designs out there. We might draw up a basic layout and navigation structure as a quick and dirty introduction to our designs. We can draw a number of different navigation structures, or just the overall concept of a design and get rapid feedback from the clients or users based on their preferences for the design in general.

This means we can quickly get good feedback on the overall feeling of a site, without inviting a barrage of information on what is a very initial concept of the site. It can help us get a good feeling for the style of site the client is looking for, and help point us in the right direction in terms of the navigation structure.

Wireframe

Wireframes

After our initial sketches we go on to the wireframing process. Wireframing really helps to develop the ideas from the sketch stage to something that looks and feels a bit more tangible. As the design looks a bit more structured users and clients gain a greater understanding of what you are working towards, they will also start to have more of an idea of how to interact with the site, how the structure of the overall site works, how content might fit into it, and what they might expect with the finished design. You can usability test at this stage to capture more information about expected behaviour of the site, where people expect to find certain things, the overall feeling of the site.

Prototype

Prototyping

Once our wireframes are up to snuff, we move on to prototyping; turning the design into something where links are clickable, and the navigation structure can be properly put through its paces. We can observe the way people look at, understand and interact with the sites, and make more judgements about what is or isn’t working. Small optimizations here can make big differences to the overall user experience and usability of the site.

Final

Testing the final design can help optimize your design and improve user experience.

Developing To Final Design

Finally we work on finishing up the final design. If you’ve been usability testing throughout your process you really should have very little to do at this stage, but none the less it’s still a very helpful exercise to observe how people are interacting with your sites, and what tweaks could be made to improve the experience – even if only a small tweak.

The difference between a good website and a great website is that last few percent. If you have an idea for a small tweak, run a quick A/B test and see which method really is best. You can set up a bunch of different ideas and test them all at once. The difference will show in your finished product.

A Few Tips For Testing

Hopefully you now have a few good ideas in mind about how you can use usability testing in your design process; here are a few helpful tips to get you started:

  • Don’t be afraid to experiment with your questions, testing tools, testing process etc. as you are learning more about usability testing.
  • Try testing your own sites in order to learn more about the process and improve your usability at the same time.
  • People love sharing their opinions – let people know you are going to do some testing and you’ll get a ton of feedback.
  • Use devices like the iPad to get out in public and watch how people interact with your site or service. Make changes and run tests based on your observations.
  • Explain the benefits of testing to your clients; once they see the impact usability testing can have on their business they will demanding more testing from you.
  • Usability testing sets you apart from your competition: don’t be afraid to mention it.
  • Just do it (sorry Nike)

So now what?

Like all things in life, you just have to get out and do it. There are no excuses, you can do it free or cheaply, you can save time, save money, and improve your clients (and your own) satisfaction with some quick, simple testing. Once you learn how to include usability testing in your design process, it becomes like second nature, and really speeds up your design process significantly.

The biggest thing is that you can improve usability and the overall user experience for the sites users. The better the site, the more likely they are to come back. The more users that come back, the happier clients will be. The happier clients are, the more likely they are to hire you again or recommend you to others. It doesn’t take a genius to work out that this can do good things to your business. So get out there, do it, and make the web a more usable place. Happy testing everyone.

Further resources

  • Usability Testing Demystified
  • A Beginners Guide to Usability Testing
  • Selling Usability
  • The New Room Effect: Usability Is About Comfort
  • The Key To Successful Collaboration
  • Get Started With Usability Testing In 7 Simple Steps

Images in this post: _dChris, Ross Catrow, Rob Enslin, avisud.

Filed Under: Article, Design, Development, Usability, UX

Comments

  1. Anonymous says

    February 5, 2011 at 12:06 am

    nice

  2. Kristina Made says

    February 5, 2011 at 12:18 pm

    Hello, Jacob! Very usefull article! Can I translate it into Russian and post in this blog?
    http://blog.inlandmedia.com.ua/
    I’ll place link to your original article.

  3. Jon Phillips says

    February 5, 2011 at 3:44 pm

    Hi Kristina, sure you can translate it (if Jacob is ok with it) drop me an email via the contact for on this site :)

  4. IntuitionHQ says

    February 6, 2011 at 8:09 pm

    Hi Kristina, I’d be more than happy for you to translate this into Russian. Thanks very much for letting us know, and looking forward to seeing it on your blog.

    And thanks for the nice comment too.

    Jacob.

  5. Upendra Singh says

    February 6, 2011 at 10:25 pm

    Great Post Jacob!

  6. ALange44 says

    February 23, 2011 at 12:04 am

    Yikes, folks don’t think usability is a crucial component of web design? That might explain a lot of the terrible websites out there.

  7. Brett Widmann says

    March 10, 2011 at 4:50 am

    Usability testing is extremely important! Thank you for sharing.

  8. Sam says

    April 28, 2011 at 6:30 am

    Thought this was an awesome post!

  9. Tim says

    May 24, 2011 at 9:53 am

    Nice Post… I’ll defiantly take your advice.

  10. Tim Bulken says

    July 21, 2011 at 11:06 pm

    Wow… serious

Leave a Reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

Recent Posts

  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022
  • How to Get Your First Web Design Client

Archives

  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022