Tag Archives: microcopy

Web Design News 16/07/10

Posted in News on by Paul Boag

This week: A presentation from Relly about Microcopy, using Twitter for customer testimonials and saying ‘no’ to clients.

This week: A presentation from Relly about Microcopy, using Twitter for customer testimonials and saying ‘no’ to clients.

Microcopy – All the small things

Microcopy is the ninja of online content. Fast, furious and deadly, it has the power to make or break your online business, to kill or slay your foes. It’s a sentence, a confirmation, a few words. One word, even. It isn’t big or flashy. It doesn’t leave a calling card. If it does its job your customer may never notice it was there.

In this session from @Media2010 conference, Relly Annett-Baker takes you through the ins and outs of microcopy and sympathises with designers and developers who are often lumped with writing microcopy in the form of error messages or instructions and loads you full of great ideas for helping you fine tune your microcopy.

Using Twitter for customer testimonials

Screenshot of twitter testimonial on the Grabaperch website

One of the problems when using customer testimonials is the legitimacy can often be questioned and you’re often left wondering if the site owners have written them, or even how old they are. Rachel Andrew has written an article showing how she has harnessed the positive tweets on Twitter into testimonials for her Perch CMS. Rachel uses Twitter’s ‘favourites’ list to flag tweets for inclusion as a testimonial rather than a hashtag which is open to gaming and abuse.

Using Twitter in this way clearly tracks the testimonial back to the user who wrote them as well as when it was posted making them much more valuable both for the company, and for the users who read them.

Just say no to clients

The client isn’t always right. We know it, but we rarely challenge clients when they’re wrong which can cause problems in our relationships with them. In this article on Think Vitamin, Rob Mills presents two cases where problems could occur if you try and accommodate unreasonable client requests.

Client pulling hair

For example: client ideas which may not be appropriate for the project, and while you should at least listen to all the ideas a client may have, there’s a delicate balancing act here. The client knows their business better than you ever will, and you have the expertise and knowledge to recognise when an idea might have a negative effect, Rob highlights this by recommending that you work with the client to reach a compromise.

All in all, it’s OK to say no (in most cases) as long as you clearly explain why, and you collaborate with the client, you should both end up happy.

Web Design News 15/06/10

Posted in News on by Paul Boag

This week: We look at emerging trends coming from Web Direction @Media including microcopy, HTML5 and CSS3 and inclusive design.

Relly talks about microcopy

The one talk I am most passionate about is Relly Annett Bakers talk on Microcopy. As web designers we constantly moan about the quality of copy produced by our clients and yet make the problem worse by producing poor copy of our own.

The problem is that we think we don’t write copy. However that is simply not true. We are forever writing error messages, instructional text and labels. We are also involved in information architecture where we make decisions about the naming of navigation and page elements. All of this is copy.

Whether you get to hear Relly’s talk at @media or not, it is worth learning about best practice in microcopy. Fortunately there is no shortage of online resources available.

For a start Relly has written extensively on the subject including her 24 Ways post ‘construction of instruction‘.

However this is a subject others are tackling too. Joshua Porter has written a great post entitled ‘Writing Microcopy‘. It is well worth a read and is a brilliant introduction to the topic.

example of microcopy from Joshua's article

Finally Joshua has also created a Microcopy Flickr Group which showcases great examples of microcopy. If you are looking for some inspiration as you write, this is a great place to start.

Bruce and Rachel talks about HTML5 and CSS3

Unsurprisingly this years @Media will be focusing on HTML5 and CSS3 with a number of great talks including ones from both Rachel Andrew and Bruce Lawson.

Without a doubt these are really hot topics and open up a world of possibilities for us as web designers.

Of course this is also a topic that has been done to death online. However because there is so much material it can be hard to know where to start. That is why being able to see a presentation from the likes of Rachel or Bruce is invaluable.

That said, there is some material out there worth checking out.

When most people think of CSS3 they think of border-radius, gradients and shadows. There are literally hundreds of articles dedicated to this subject. However there are also a couple of tools for those of you who cannot face yet another blog post.

The first is a simple tool for generating border-radius code. Simply type in the values for each corner and it creates the code for Mozilla, Webkit and the W3C spec.

The second tool does a similar job for gradients, box shadow, text shadow and transforms.

A tool for creating advanced CSS3 effects

However, CSS3 isn’t just about new effects. As Rachel Andrew points out in her 24 Ways article it can also help you create cleaner code.

As for HTML5, I have seen Bruce talk about coding in HTML5 before and it is well worth watching. He demonstrates just how easy it is to start coding HTML5 today even though the spec is not fully supported across all browsers.

Bruce has written extensively on the subject of HTML5 as a quick Google will testify. However I recommend you check out his website html5doctor and a previous presentation he gave that introduces HTML5. Both provide a great starting point.

Inclusive design

The final talk I wanted to highlight is Inclusive Design by Sandi Wassmer.

Inclusive design is not a term I have come across before, which is why this talk interests me. However according to Sandi it brings together Accessibility, Usability, User Centric Design, Progressive Enhancement and User Experience. It recognises that a ‘one size fits all’ approach is not always appropriate and that we need to provide users with more choice in how they interact with our content.

I get the impression Sandi chooses to talk about inclusive design rather than accessibility because accessibility is so strongly associated with the disabled and in particular those who use screen readers.

In fact accessibility is a much broader subject that includes accessibility for all, even those who still use IE6!

Sandi has actually created a very interesting PDF on the subject of inclusive design that is worth downloading. It will certainly get you thinking in a different way about what it means to make your website accessible.

Be inspired while maintaining focus

Posted in Design on by Paul Boag

Do you read tutorials and look at inspiration galleries? Do you actually implement the things you have learnt? Too many of us spend more time reading about design than actually doing it.

I received this question from Sam in Australia:

I find that I am always reading web design articles, tutorials and reading different blogs, thinking that it is all ‘inspiration’. However I end up just thinking more about my design that I actually design. Any tips?

Although we don’t realise it Sam, I suspect that most of us have this problem. I certainly have in the past.

I think the problem exists for two reasons: we read the wrong stuff, and we don’t remember and apply what we have learnt.

Let me explain what I mean.

Reading the wrong stuff

A big part of the problem is that we spend too much time reading the same kind of stuff. If you are already a fairly competent web designer how much are you going to learn from yet another web design tutorial or by looking through yet another inspiration gallery.  I touched on this in “5 new skills that every web designer needs to know” and it is something I am becoming increasingly convinced of.

Slides from my presentation

I am not suggesting that reading web design blogs and tutorials are wrong. You will still learn stuff. However, you are going to learn considerably more and be more inspired by reading subjects that you know less about.

Start reading about psychology, marketing, or business instead of another post on WordPress plugins or cool stuff you can do with jQuery. It will be harder to see how what you have learnt can be applied to the web, but it will be more inspiring and will have a better ratio of new information to noise.

Remembering and applying what we have learnt

The second problem is that when you do learn stuff,  you fail to implement it when a project comes around. This is because it is not enough to read stuff, you need to also assimilate it and reuse it at the appropriate time.

In order to solve this problem I turn to Getting Things Done by David Allen. He talks about the idea of context and that we need to remember things when we can act on them. He gives an example of a torch with dead batteries. The time when we need to remember we need new batteries is in the shop that sells them. Unfortunately we only remember when we next pick up the torch. Knowledge without context is useless.

Fortunately you can apply the same principles laid out in David Allen’s book to the things you learn.

Take for example an inspirational post that shows you lots of great designs. If you read the post and leave without taking action you will not remember that inspiration the next time you come to do some design. However, if you copy those designs to a program like Littlesnapper and always review Littlesnapper before starting a design, you will be exposed to the inspiration when you can do something with it.

This approach doesn’t just work with imagery. Stephen Anderson is a web designer who has taken a particular interest in user psychology. He has read extensively and learnt loads of things that inform the design process. Of course remembering and applying all he has learnt is another thing.

Stephen Anderson's Mental Notes Cards

In order to help apply these principles to his work he has produced a set of cards containing his key findings. In essence he boiled down everything he had learnt into 52 cards. Then when working on a project he pulls out a random card and uses it as inspiration for the project.

I use a similar principle of boiling down what I have learnt, but I keep the results in Evernote. I know Relly also uses an inspiration library of microcopy that she refers back to regularly.

The trick is to ensure the things you have learnt are recorded in an accessible format and that you refer to it regularly when actually working on projects.