An Introduction to Web Usability for Graphic Designers

A guest post by Pawel Grabowski

How to make sure that the site you work on is going to be easy to use to it’s visitors: an introduction to web usability for graphic designers

Have you ever got irritated with a site just because you couldn’t find any information on it? Or maybe you got lost within the site’s structure? Or simply didn’t know where you were and decided to abandon the site altogether?

Sure you have. Just like all of us. I don’t think there’s anyone who hasn’t felt this at least a handful of times.

But let’s go further. As a designer, have you ever had a client calling you saying that their users complain as they can’t use the site, can’t find the information they are looking for or maybe simply got lost?

Now, who’s going to be brave enough to say I have?

Well, it surely happened to me in the past and I know how terrible feeling it is. And after an initial shock my answer to that was to rethink my approach to web design. Before that I simply understood design for web as a continuation of my work as a graphic designer. Afterwards I discovered that design although important is only one of all factors of the website’s success.

It is the usability though, or how the definition puts it “the approach to making websites easy to use for the end-user without requiring him to undergo any specific training” that can make or break the site. In other words if your site can not be easily used by anyone, no matter how beautiful it is it will cause grief to it’s visitors and will most likely be quickly abandoned.

But how do you ensure that your user can use the site without undergoing a training beforehand?

Start by following those few steps. There is of course more to usability than that and I would recommend digging deeper into the subject but for now you should always remember to:

1. Design the site’s structure to be clear to the user, not you or your client.
You do not design for your client but for their users and always have that in mind. It’s very easy to create structure that only you and people you explain it to will understand.

2. Make sure that the navigation is clearly seen straight after logging onto the site and that it’s easy to use.
Avoid complicated navigation bars, make your navigation as simple for the user to operate as possible. Also place navigation in a prominent place on the screen. There are conventions for that and you probably can tell them already after viewing hundreds of sites. Stick to those conventions, they were created for a purpose.

3. Ensure that your visitor knows exactly what the site is all about after logging in.
Make sure that each page contains enough information to reveal what the company does. Remember to have that information on every page. You don’t know which page the user will land on first.

4. Tell the user clearly where he is within the site’s structure.
There are two proven techniques for that. Mark the page in the navigation where the user is. You’ve probably seen this many times before, the font may be bold and/or in different color. Or you may change graphics behind the button. The possibilities are endless but remember to mark the page the user is currently viewing.

5. Leave breadcrumbs on your track.
You have seen them many times as well, the “you are here:…” listing on a page. Breadcrumbs help the user to recreate the path they have taken to get to a place they are in now and may provide a great help, especially on large sites.

5+. Test test test
This is a crucial, yet most commonly forgotten step. Always test your site for usability. Run the site by some users, be it someone you know or ask your client to present the site to a handful of his clients. No matter what you go for, always test your site before it goes live and gather feedback.

Of course such testing is only a limited version of a proper usability test conducted in a lab but even with that you should be able to pick up some basic problems with your site.

PawelPawel Grabowski is a web usability and front end development specialist at think two, an Irish web consultancy working exclusively with designers and design studios. We help our clients win and deliver web projects of any size. He also publishes his own blog at www.papertopixel.org

WordPress Plugin to Change Website Link Names

I was recently trying to put together a website using wordpress and wanted to be able to change the link names using wp_list_pages. I hadn’t realised before that you can’t have a different page heading to your link name, so for example if on my front page I wanted the title to be ‘Welcome to my website” the link in my navigation using wp_list_pages would also say “welcome to my website” when I really just wanted it to say home. I knew I could just hand code it but I wanted my client to be able to easily add pages without messing about, so I searched for a plugin.

After a big search I still hadn’t found one and had little response from the WordPress forum so I tried the forum over at blogging tips where help was much more forthcoming. Sarah from Stuff by Sarah kindly created a plugin called Page Menu Editor which did exactly what I needed and I am sure will be useful to many people. Sarah’s website also has a lot of other plugins and advice which are well worth a look.

Themedreamer a Dreamweaver WordPress Extension

themedreamer a Dreameweaver WordPress extension

A little while a go I read about an extension which could be useful if you know how to use dreamweaver and want to use it to adapt wordpress templates. The extension is called Themedreamer and allows you to open wordpress templates from within Dreamweaver by temporarily replacing the dynamic content with text. You don’t even need to set up a local server according to the feature list.

ThemeDreamer is an extension for Adobe Dreamweaver that can accelerate WordPress theme and application development by providing WYSIWYG (What-You-See-Is-What-You-Get) feedback within Dreamweaver’s Design View editor in real time. Simply put, you do not need to mess with a server or even have to upload your files to see the vast majority of CSS and WordPress Template layout changes. Alterations are immediately reflected within Dreamweaver’s Design View.

You can watch a few videos to see how the extension works.
There is a free trial you can download which gives you 15 days trial use. I downloaded it to try out, then got busy and didn’t get chance to try it properly, so I think I will purchase it soon (only $29.95) and give it a proper try out. If anyone else has tried it I would love to hear how you get on.

Why So Few Women Web Designers?

I was contacted by a company the other day who were looking for a web designer, they were keen to hear from any one interested in a full time web design/developer position (the job is posted on the free graphic design blog jobs board), but especially from female web designers to balance out their development team. They expressed that there seemed to be a lack of women web designers. I must admit it is something I have never really thought about.

So is it true are more web designers/developers male and why is this? Is it because many women are put off by the coding aspect of web design and prefer the more creative freedom of print? My partner works in construction which is a male dominated area, but he has said that in the last few years women are coming in to the industry more on the management side. When he started in his old job there were no female quantity surveyors, when he left there were several including his boss. This was due to promotion of the industry to women. Maybe web development needs the same push?

What are you thoughts, is the area of web development male dominated?

This post is from Graphic Design Blog

Web Design Mock Ups in Illustrator

Web Design Mock Up in Illustrator

The majority of my work is for print, but also I occasionally create the look for websites as well. This will just be done to comp/mock up stage ready for someone else to code (though I am learning). What I have always found surprising is that when you hear of people creating web design mockups you usually hear them talk about Fireworks or Photoshop not Illustrator. I don’t know how to use Fireworks, I do use Photoshop but would never really think of it as a program for creating visuals in – for elements of a visual, yes, but not for planning, experimenting and designing visuals as a core program.

Whenever I have created web design mock ups I have always used illustrator, it’s quick and flexible allowing for rapid moving about of elements. If at the end you want to, you can export Illustrator to photoshop keeping all the layers intact. I was quite pleased to find a tutorial that leads you through the process of creating web design mock ups in illustrator and then how to use the image slices in you web designs. I had never realised Illustrator allowed you to create slices, name them and output them all for web. It then talks you through using these image slices to create a template in XHTML and CSS.

Take a look at this tutorial, its made for creating Drupal templates, but parts 1,2 and 3, on creating a mock up in illustrator and then slicing it up and then creating XHTML and CSS templates are useful for any web design.

New CSS Reference for Web Design at Sitepoint

If any of you are like me and just starting to try and get your head around CSS there are a lot of online resources out there. A new resource I have just become aware of is Sitepoint’s CSS reference for web designers which goes through all the basics and not so basics of CSS. Sitepoint has some fantastic information on its site, a great forum and excellent books to purchase so I am sure the CSS reference will be of great quality too. You can find the CSS reference at www.reference.sitepoint.com/css