When designing websites in the past, I’ve tended to be very logical and practical, especially if I get stuck with something. I make logical choices for positioning, colour and layout. This is really quite an important way to think to create functional, user-friendly websites. However, to create something a bit more special and visually appealing you need add something else to the design. I believe this to be the personal and emotional input that a designer imbues into the work they do.

Without actually thinking about it I think most designers make emotional choices, whether it’s colour, styles or shapes. These help create a site that fits the brand and the intended purpose. Understanding what these emotional cues are will not only make it easier to make the correct decisions when creating a new design, but also allow us to be able to explain to the client exactly why the design should look as it does. This should help us communicate better with the client, and end up with a design that everyone is happy with.

It’s been a long time since I’ve designed an email, so before I start here are a few basic things that I should consider.

Designing the email

• Who’s it for: While designing the email you should keep in mind who the target audience is. The email should be relevant and interesting to the reader, otherwise it will often be considered to be spam.
• What do you want them to do: You should also think about what you want the reader to do once they have read the email, basically, what is the call to action. This should be simple for the user to find, so keep irrelevant copy and links to a minimum.
• The layout: It’s very important that the reader immediately recognising who the email is from, so keeping the logo to the top left is a good idea. Also consider that the email will be viewed in different browsers and applications and may also be initially viewed in a preview pane. This means you should try to get the message across to the reader without taking up too much space. Think about how the content is set out. Titles should be short and informative, any images should be relevant to the content and try to be as concise as possible. Also minimise fonts, colours and images as these can make the email confusing and difficult for the reader to scan quickly. And finally, make sure the call to action is prominent in the email, so the reader can easily understand what the email wants them to do next.

Writing the copy

• The subject line: The subject line is the motivation for the reader to actually read the email, so it’s very important to get this right. You should briefly describe the emails’ content, and add something attention grabbing. It’s also a good idea to add a call to action whenever possible
• Personalise: If you have a name associated with the email address it’s a good idea to use this in the email. It will help confirm that the email is not spam, and also make the reader think the email is more relevant to them, hence making it more likely to be read.
• Talk to the reader: Copywriting is a skill all on it’s own, but quite often it will also be one of the designer’s tasks so it’s worth thinking about carefully. Try to think of the email as a conversation, rather than dry information and keep it simple and concise so the reader doesn’t have to read through lots of text to find out what the email is about.

Building the email

• Click, click, click: Make sure any images and relevant text are clickable; you want to give the reader as many opportunities as possible to click on the email.
• Important links: There are a some additional links that should be on every email. Having an unsubscribe link is essential. It will reassure the reader and is also a legal requriement. Another good practice is to add a link to a web version in case the reader has problems viewing the email.
• Compatibility and stuff: Finally, remember all browsers and applications have different rules for displaying backgrounds and images, so your email may not be viewed exactly how you want it to be. This means you should try to build the email as simply as possible, you should never use background images and all styles and colours have to be applied in the HTML rather than with external CSS.

So…

I’m sure there are many more issues to be considered when creating an effective email, so perhaps try a few of these resources too.

20 Tips for Good Web Copy

Email Guidelines

Good HTML Newsletter Design

This is harder than I thought it was going to be, writing this Features Specification, that is.

Well, I’ve almost finished the first draft of the written document. Then my plan is to print it out, read it through, sketch out a site map and then work out where all the holes are. There is a lot to think about. I want to ensure that I’m making the user experience as smooth and beautiful as possible, while considering all the functionality that the client wants to include.

It’s felt a bit like I’m chipping away at it for days, but soon I’ll be able to see the big picture (Sorry to mix metaphors!)

Today I’ve been doing some testing. Running through one of the sites we’ve been working on. Was really initially meant to be testing the layout in IE6, but due to my slightly pedantic nature I’m pretty much running through a lot of the functionality and logging the rather numerous, if minor, bugs. There aren’t that many IE6 issues anyway.

Testing is actually something we’re normally quite bad at doing right. It always gets scheduled in at the start, but as a project goes along, and things take longer than expected – especially the development work, the time for testing gets shrunk. It is a really essential step though. It’s hard to view something you’ve been working on objectively. You know where to click and what button takes you where, so you never get lost in a site, and unless there is an error, your expectations are always fulfilled. So, you require an outsiders eye. Someone who has absolutely no idea what’s going on (Okay, that’s a slight exaggeration).

Anyway – there is lots to check and fix. Fingers crossed for the deadline on Monday!

I’m almost at the end of working on this sign up process, so here are a few basics.

• Ensure that having to sign up is actually necessary
• Inform the user what the benefits are if you sign up
• Only request the minimum amount of information required
• Show links for ‘Sign in’ and ‘Forgotten your password?’
• The form labels should be simple and obvious
• When showing form errors, make it explicit where the error actually is (i.e. explain if it’s either the email or the password that is wrong)

Well, there is still lots more to learn, and if you are interested, here is a little bit more reading :

• Smashing Magazine, Web Form Design Patterns: Sign-Up Forms
• User Interface Engineering, Account Sign in: 8 Design Mistakes to Avoid
• A List Apart, Sign Up Forms Must Die ( excerpt from the Web Forms Book mentioned before)

Well, the next exciting thing I’m doing is revising a sign up process. What I really need to do is look at this book: Web Form Design: Filling in the Blanks by Luke Wroblewski . Actually I’m pretty sure there is copy around here somewhere.

Again it’s all about user interaction, creating a simple effective form that is easy to use. You want the user to not even have to think about what they have to do, but just do it. I’ll let you know how I get on.

Right, so I’m trying to get my head around how to design a page to modify a hotel booking. However, there is quite a major limitation to this. The system cannot actually modify anything; you can only cancel the booking then re-book it, if what you previously had is still available, unless, of course, you are just changing something simple like room occupancy, guest name or payment method – then it can just update the original booking. That’s not complicated at all, especially when you work out how many scenarios there has to be!

So, my main challenge is how to create a seamless process for the user, while not making it a nightmare for the developers to actually program. Hmmmm.

Firstly, I created a beautiful (well, practical) process flow chart to help me work out what the page has to do for each scenario (quite often ignored in the design process, because really we just want to get to working on the pretty pictures, and, as well as helping we work out what the page has to do, it should also help when it comes to the actual programming logic).

It looks something like this…

From the flow chart I’ve been able to decide the page content and structure, as well as how many visuals need to be done to fully explain the process. All I have to do now is put them together…Well, that wasn’t as hard as I thought it was going to be.