underdevelopment

Designers. Can’t live with them, can’t live without them. More often then not, developers will have to work together with designers to create a website. Which most of the time means the designer will create a design and some HTML & CSS. Which the developer will then integrate and adapt to fit into his software to actually make the site work.

The problem however is; Developers normally didn’t go to design school and many of them have the artistic ability of your average garden rock. I’m certainly no exception to that. However, if you learn a few basic guidelines and rules, you can make the life of your designer buddy a lot happier by not screwing up his design.

So here are just a few general hints and tips to explain what is important when adding something to a existing design or when integrating it into the actual software of the site.

Aligning stuff

Stuff needs to be aligned, both horizontally and vertically. It must be aligned “visually” instead of accurately, which means that if you look at it, it should look aligned. Which could mean two pixels to the right or left of the point where two blocks where actually aligned.

however as rule of thumb you can pretty much aligned them accurately. The reason for aligning stuff is because it is visually pleasing for us to look at.

In some few cases the designer might actually want to purposefully have a few elements be misaligned, so if your doubting, just look at his designs or simply ask him.

Whitespace

Where saying less is more. Whitespace, as the name suggests, is the empty space around objects. As with alignment, everything should have a little bit of white space and for the most part, the amount of whitespace should be the same.

Whitespace brings some calm into a design. A design will look far less crowded with ample use. Also, whitespace will often be used to emphasise certain elements within a design. This is where the amount of whitespace will differ. Headers for instance will often have more whitespace around them then paragraphs.

It is also always a good idea to make sure there is a lot of whitespace around important elements for your website. When there is a lot of whitespace around a element in comparison to other elements on a page, your average human will read that element first.

If you want to know a lot more about whitespace, read this article from a list apart that deals exclusively with whitespace.

colours

Colours are not only pretty, but also important. Often companies and brands will have very specific colours associated with them. Coca Cola red, UPS gold&brown, etc… Now designers could probably bore you for hours about colour theory and all that stuff. However what’s important for us developers to know, is to never introduce new colours. A designer will have chosen a small select group of colours for use in the design.

You will have one or two base colours, and a accent colour. For instance, for the design of this site, the base colours are light grey and white. and the accent colour is blue, and perhaps black.

What this means is that if I should add some new element, it should be one of those colours. Not purple simply because I like purple. Your best bet, depending on the size of the new element, would be to use the accent colour. The use of the accent colour is to basically add some spice to a design and use it to draw the attention of viewers.

When using colours, be precise. You might think, blue is blue is blue. But if your designer used #7c95e7 in his design, then be sure to use #7c95e7 as well. You could even ask your designer to write down the used colours for you in HEX.

ask your designer

Above are just a few general tips to watch for, but the best advice I can give is to simply ask your designer when in doubt or even just to verify. Because basically, It is like you created the software for the site and then some amateur takes it and start modifying it in small ways. I think most developers would at least like steer how those modifications are made, explain a bit what the thoughts where behind how it was written and such.

I have to say though, not all designers will like explaining it to you. But just remember, your not doing the above to please the designer, your doing the above to please the client, to make a better website. If that means having to bother your designer for 5 minutes, then so be it.

admin usability best practice, design, text, usability

Now when people talk about websites and usability, a lot of stuff gets mentioned. Web 2.0, ajax, usability guidelines, designs etc.. etc.. What I however almost never hear is about the text. Sure people talk about content, user generated content, tagging, searching, etc..

But what about the little things? What about the buttons, the links, the subject lines of the e-mail someone receives? Those are the most read elements on your website, yet get the least amount of love.

So today I’m going to share some of my ideas on these texts, because I think they are important and should be treated as such. It all hit me about a year ago, at the DPC08, in the closing keynote by Terry Chay. He mentioned that when they added a smiley face to the subject line of some sort of mail they sent they saw a 20% increase in clickrate. That is nothing to scoff about. This got me thinking about how important these small texts are.

Over the year I’ve found a few key ideas about these texts that I think are important to keep in mind when creating them.

Positive Association
When a user comes on a site he or she will have a lot of actions to take. Design and content placement determines a large part of what a user will do. But what about texts? Now lets say our goal is to get as many users to register. We could have a “register” link. The link is placed prominent and the design helps the user focus on it so that we are almost certain that the user will read it. So what can we now do to actually let the user click the link?

Your average register link, contains basically the word “register”. Hmmm. Now I don’t know about you, but registering is annoying. I have to fill in all kinds of info about myself and give them my e-mail address, which I don’t actually want to do.

It all sounds a bit too much like a command. What we want to do is create a short text that reminds us of the fun things about having an account. “Join the community”, “share your pictures”, “create your account” All much better then “register”, the text should be inviting and friendly.

Leading the User
When users visit sites we want to be able to guide them trough the site. We can effectively do this by emphasising what we want them to do via text. A good example of this is to be found on flickr. If you are not logged in, and you are viewing a photo, the site asks you “Would you like to comment?” instead of the often seen “To comment you have to be logged in”. If you think about it, the difference is miles apart. The flickr one makes me think, ‘do I want to comment?’ the other one doesn’t. I just think ‘oh ok’.

The bit under both those texts is of course the same “sign up or login”. The difference however, is that after I’ve read the “Would you like to comment?” I actually either have decided I want to comment, or not. While with the other, I have no incentive at all to sign up or login. Or at least not if I wasn’t already planning to comment. Basically the flickr one reminds me that I can comment, and I even might want to comment.

Don’t Lie
It is however important not to lie. Every time a users gets confronted with something they did not expect, a percentage of them will quit. So for instance, in the positive association part I wrote “share your pictures” as text example for a button to sign up. But that’s of course not what the user expects. We promised the user they could share their pictures when they clicked that link.

So to take that as an example, we should make sure that after the user clicks that link we present the user with more text that reinforces that they will be able to share their pictures, just after filling in a few details.
That way we have given the user a clear incentive to register. This however often gets abused, I should make very clear that the page the user gets to see should not be a registration page, but a picture sharing page where you register. The actual sharing of pictures could of course be a step two of a wizard type structure.

admin usability copy, flickr, friendly text, leading the user, positive association, text, usability