Must Know Usability Tips for Web Designers

By / Sep 21, 2010 / Tips
shares

The hot topic in design news is all about usability. Developers must concern themselves with properly functioning interfaces and applications via the web. However as designers we must tackle projects from a different angle, trying to design beautiful webpages which also run smoothly from a user’s standpoint.

It’s not to say these ideas haven’t been around over the past few years. It just so happens that recently the web has undergone a paradigm shift and we’re entering a powerful new information era.

This adds the values of user experience into the creative process and as designers we must keep up with the trends. I’ll be going over a few tips for how to do this and show how simple it is to integrate usability into your design.

Begin by Envisioning your Website Wireframe

This is the first step during the creative process and also the most energy-consuming. Creating a beautiful design out of thought alone can seem like a difficult task. However a shift in your perception of design may help move the creative process forward.

Sketching out a basic wireframe is the easiest way to tackle any design project. Initially starting in software such as Adobe Photoshop or Fireworks limits much of what you can or can’t do. Old fashioned pen & paper have never limited anything. The only limits you face are the edges of your creative mind!

Considering usability, you may start out by listing elements you want to see on the page once it loads (above the fold). These could include a main navigation menu, search bar, blog categories, contact information… truthfully any number of items. Keep the list small and scaled since there’s only so much room.

From here it’s much simpler to draft up a webpage mockup since you know what you’re aiming for. You may also consider showing your mockup draft(s) to others and getting a few opinions on the design. Gaining an outside perspective is always helpful as it is your goal to create fluid, accessible layouts for your visitors.

Implement a Plan for Mobile Design

This idea would have seemed a bit far-fetched just a few years ago but we’re in a booming era for mobile development. Between the iPhone, Blackberry, and now Android powered devices it seems these days everybody is running a smartphone in their pocket.

Designers have already begun using this to their advantage by planning ahead. Mobile stylesheets are becoming the norm for most popular web applications. And with a bit of simple JavaScript you can easily catch what browser your visitors are using and apply any style accordingly.

A really useful tool for mobile design is Mobify Studio. They develop JS libraries which check to see if your visitors are running a mobile browser and redirect the stylesheet accordingly. They offer paid plans containing analytics and other powerful features, but for the basic user you can sign up free and still benefit from everything their scripts offer.

Structure your Typography Carefully

Typography is another whole can of worms included in the subset of design. You don’t need to master creating your own font or how to display individual custom letters in digital text. However as a designer holding a basic understanding of typography with usability tactics can work wonders.

A poisonous myth passed around the design community is how great smaller font sizes are. Arial set to 11px may look clean and professional but it’s awful when it comes to user experience. Setting your paragraphs to a more-than-readable size is highly recommended, especially with mobile users growing.

Be sure to add plenty of breathing room between your page content as well. Nobody wants to try and read 15 paragraphs of tightly bunched-up text split by a few headings. The CSS line-height property is a very useful yet under-utilized setting. This property sets how much space is placed between each line in a paragraph or in headings and other typographic elements.

When you get into developing page styles with CSS the workload is much simpler. By this I mean it’s much simpler to change a numerical value in your CSS compared to editing an entire PSD document. Try messing around with different values of line-height to see which works best for your design.

Headings must be Brash, Bold, and Beautiful

Don’t let your page headers fall to pieces within your design. Most visitors will come to your blog or website just to skim content, so your headings may be the only elements they read.

A distinguishable change could be in font color or differing typography (from sans-serif or serif, and vice-versa). Heading elements are set by default to appear much larger and bolder than text content. This helps readers get through content easier and pinpoint defined markers in your writing.

You could consider removing the bold weight and mess around with other properties. Italics, underlines, borders, and letter spacing are all fun to play with and see how they fit. Although depending on your design a straight underline could be easily confused with a hyperlink, so use creative judgement here.

Testing, testing, testing!

The area where many designers fail to show improvement is with the final stage in the creative process. Once you’ve completed a design and you feel comfortable with the outcome it’s easy to pass it along and move on.

This is where attention to details may fall apart as you could miss crucial errors in design judgement. Always test your website in as many different environments as possible. Modern operating systems can run numerous browsers. And with tools like IETester it’s never been easier to run tests for compatibility across the board.

Internet users are growing more impatient and spending less time visiting individual pages. Any traffic you do reel in should feel warm, welcome, and at home with no confusion or frustration interacting with your design.

Usability is still a new term for our growing web and it’ll surely be a hot topic in design conferences around the world. These tips are a great starting point but shouldn’t mark the end of your studies. Keep an open eye for new articles and advancements in user interfaces as these are the true elements of web design.

About the Author

Jake Rocheleau is a creative writer and UI designer. You can follow him on twitter @jakerocheleau or visit his personal website at JakeRocheleau.com.

9 Comments

  1. DTX Studios
    September 21, 2010

    Good post. Thanks for the useful tips.

    Reply
  2. Arslan
    September 21, 2010

    Really nice Tips, Thanks WDL

    Reply
  3. Web Designer, Leicester
    September 21, 2010

    Testing and Wire-framing are the most useful tips. Thanks for posting.

    Reply
  4. Sharkey Media
    September 22, 2010

    Great, timeless tips especially about mixing typographies in the headings. So simple and effective!

    Reply
  5. josh
    September 22, 2010

    Thanks for the article.

    Mobile is having a impact on how sites are deployed. Now your work will have to be compatible on a slew of very different devices.

    Reply
  6. Jeff Jones
    September 22, 2010

    Great post on usability and great tips for web designers, and agree usability is definitely a hot topic in web design!

    Reply
  7. Maynard Collamore
    September 23, 2010

    Nicely said. I found this to be to the point and VERY helpful. Thank you for this great post.

    Reply
  8. WebSight Designs
    September 25, 2010

    Great article! Thanks for all the tips. As a web designer who also designs for mobile platforms it’s nice to see that mentioned as well, couldn’t agree more that it’s an integral part of any website these days.

    Reply
  9. Manpreet Singh Rehsi
    October 10, 2010

    Nice tips shall take care of some the tips while working on my next project.

    Reply

Leave a Reply