Friends don't let friends use Comic Sans

Wallpaper links in various sizes:

• 1024×768 resolution: ux-wallpaper-comicsans-1024×768.jpg
• 1280×1024 resolution: ux-wallpaper-comicsans-1280×1024.jpg
• 1920×1080 resolution (my favourite): ux-wallpaper-comicsans-1920×1080.jpg

Enjoy!

UX wallpaper - Walk in your client's customers' shoes

You can use it too, if you like. I’ve even even gone to the trouble of doing it in several sizes. Golly I’m nice.

• 1024×768 resolution: ux-wallpaper-shoes-1024×768.jpg
• 1280×1024 resolution: ux-wallpaper-shoes-1280×1024.jpg
• 1920×1080 resolution (my favourite): ux-wallpaper-shoes-1920×1080.jpg

Enjoy!

When I talk about personas, I mean the archetypal constructs of characteristics, drivers, behaviours and goals that are designed to represent the main audiences at which a digital product is aimed. Personas were made popular by Alan Cooper, and given gravitas and discipline by industry minds such as Andrew Hinton and Jared Spool.

Pros and cons of personas

It’s true that personas are very useful for informing and validating user experience design. Here are my favourite advantages and benefits:

• They’re a convenient combination of sensible scenarios and user requirements that are more understandable and accessible to people not familiar with (or prepared to read) copious volumes of technical documentation
• Everyone – designers, project managers, project stakeholders and developers alike – can relate to personas (and if they don’t then the personas probably aren’t authentic enough), so they can act as a great unifier in project vision
• They keep everyone honest and the design true to its purpose; by referring constantly to the personas, design and development is kept focused on what’s important for the target audiences and their tasks and situations
• They are great argument enders; personas can often become the true arbitrator of discussions and debates about whether this feature should be included or not, or whether that phrase is the right tone or not

But personas are not without their criticisms. Some of the charges laid at their feet include:

• They’re too abstract to be of use – Jason Fried describes them as artificial, abstract and fictitious, so they can’t provide authentic responses to designs, and be biased and unpredictable, just like real people
• They’re just another part of the paperwork – many people across the project and client-side get documentation fatigue, and are not likely to absorb and learn from the personas
• They can be seen as a bit of a luxury at best and time-waster at worst, where many people would rather just get on with designing and building

Persona profile tables: measuring significance of requirements against personas

Where personas can be a shorthand version of user requirements, profile tables provide a shorthand version of how significant the business- and functional requirements are to those personas. Profile tables have a list of features, functions and other contextually relevant aspects in the first column, then one column per persona displaying a measure of significance to each persona for each feature/function.

The‘significance’ bit will depend on your project, and profile charts are most effective when you are specific about the nature of this significance; it’s subtle but important. For example, it could be:

• How likely it is that each persona would use that feature
• How important that feature is to each persona
• How often that persona would use that feature

The ‘measure’ bit shouldn’t be binary – like a tick or cross – because personas (just like us) are rarely black and white about these things. Use other measures that include ideally five points along a spectrum, such as:

• Harvey ball notation – an array of circular ideograms, filled in by portions to indicate amount:

Set of Harvey Ball notation images with their corresponding amounts

None

25%

50%

75%

100%

• Colour – shades of one area of the spectrum work well, such as white (none) to yellow (mid) to green (high). Avoid more than two colours, unless you want to include a negative aspect as well, such as red (persona would definitely not use that function) to yellow (ambivalent) to green (would definitely use)

I always use Harvey ball notation, because it’s the clearest to the most number of people, and there are never any colour blindness/colour printing variation/screen display issues.

I’ve used persona profile tables in several projects now, and they were really useful for guiding interface design decisions, and finding those sweet spots with works best for both business and user and for the scenarios where the website is being used.

How to draw up a persona profile table

This assumes that you have your personas are ready to go. Profile tables are best done in a workshop situation, either within your team or with client stakeholders. This not only keeps things from being ‘designed by designers’, but gets everyone embracing and using the personas.

1. List the features and functions

Start by making a list of all the features and functions of the product you are designing. As you make this list, you’ll probably find that some functions will need to be broken down into more specific actions, or ways of using that feature. Explore this, and list it all; you can always rationalise the list later depending on the context of your project.

Example: ‘Search for houses to buy’ would break down into‘search by location’,‘search by price range’, ‘search by house feature’ and so on. I bet there would be differences in each of these item’s significance for each persona.

The examples below are taken from work done for livinggreener.gov.au

2. Add the behaviours

Think about the ways that personas would approach and use these features and functions. This may uncover other elements that will have differences in significance for personas, like ‘comfortable with large amounts of detail’, ‘comfortable with entering personal information’.

3. Fold in the personas

Add each persona you have as a column next to the first column of features, functions and behaviours. If there is a certain order that you are already using when referring to your personas, use the same order.

Features/functions
Background information about the environment
Background information about sustainability
How to save money
Specific actions to live greener
Ways to encourage others
Behaviours
Comfortable with technical detail
Comfortable with content detail
Sharing information
Commenting on information
Watching online videos

4. Add the ratings and heat gently

Now comes the fun part. You, your team, and your client stakeholders discuss each appropriate rating in each column for each feature/function/behaviour, according to individuals’ knowledge of personas (and therefore of requirements). This groupthink should minimise subjectivity and invite scrutiny.

Features/functions
Background information about the environment
Background information about sustainability
How to save money
Specific actions to live greener
Ways to encourage others
Behaviours
Comfortable with technical detail
Comfortable with content detail
Sharing information
Commenting on information
Watching online videos

5. Observe and exploit any trends and patterns

As you complete the ratings, you may see some trends and patterns where some personas rate very highly in some areas, low in others, or cluster together in some ways. These patterns may reveal lessons that you can take to your design.

Focus on clarity

As with most things, keep the persona profile tables simple, clear and concise. Once you get into doing profile tables, it’s easy to draw up loads and loads of them, but the intention should always be to summarise what already exists in other documentation, to give others an easy-to-reference asset for the design process, and the decisions that crop up all the time.

So if you decide to include profile tables in your set of design tools, set yourself a goal to keep them to one whiteboard in the case of a workshop, and to one page (or at least one page per functional ‘area’) in a report, so that whoever else you’re working with only needs to refer to one page at a time.

May of the topics about America that came up were the sort that a lot dinner party conversations eventually get around to: the disparity between its ideological view of freedom and democracy against the reality of corporatised government and the mishandling of Hurricane Katrina victims; comparing the Bush and Obama administration; is Obama doing enough; and so on.

Diverse backgrounds, common issues

What saved it from being any other dinner party conversation, though, was some brilliant and insightful one-liners and the mix of backgrounds and latest literary efforts of the speakers. Lionel Shriver (author of So Much for That, about America’s health care system) is born-and-bred American yet no longer lives in America, nor identifies herself as American. Raj Patel (author of The Value of Nothing) is Pakistani/Iranian and a citizen of America. Together with Josh Neufeld (A.D.: New Orleans After the Deluge), Michael Otterman (American Torture), Reza Aslan (No god but God) and Anne Summers, the same searing consensus on the same issues was articulated from such disparate backgrounds.

Sketchnotes

Fresh from watching Visual Note-taking 101 from SXSW 2010 over on Slideshare, and inspired by Matt Balara, I thought I’d try some sketchnoting about what I was hearing. I knew if I just wrote notes, I’d never read them again. But capturing what was discussed as simple pictures and typographical vignettes was not only fun, but made the key quotes and themes more memorable to me.

I’ve included a few below (click for a larger size), and they’re all at Flickr. I could get used to this sketchnoting thing.

Meeting Josh Neufeld

It has to be said that Josh Neufeld is kind of a big deal. He’s not only a brilliant artist and publishing award-winning graphic novels, but he has stepped up to publish a non-fiction work A.D.: New Orleans After the Deluge following the experiences of several Hurricane Katrina victims in New Orleans. Gutsy stuff.

I asked him about his process of drawing and illustration. I’m happy to say he’s definitely old skool, drawing manually (that’s, like, without a Wacom), scanning, then tidying up and adding colour in PhotoShop. Anyhoo, it was just inspiring talking to someone who draws so skillfully and compellingly as a full-time profession. Something I’d like to do one day.

Single photo, with links for photo information, and forward/next icons	The same single photo, but ‘turned around’ to display details, and calls to action	A location screen, with links relating the location to planning a visit

(Click the images above for larger versions)

Photos can be uploaded, downloaded, tagged, and shared. Each photo, as well having social tagging, is tagged with one or more evocative ‘experience’ categories, such as plunge, savour, indulge, and so on. The interface design rationalises away many of the elements that can occupy the space in a regular browser window, yet retains all the elements needed for people to save photos, destinations and itineraries online, moving them towards the point of booking a holiday.

I also packaged these designs into a presentation board, with a storyboard-style sketch to show context, and the progression from a typical rainy London working day to what a sun-soaked holiday in Australia could be like (click for larger version):

My understanding of wireframes is that they are conceptual illustrations displaying the visual structure, priority and arrangement of all the elements needed for each page type in a website or other online product. They also display differences in appearance and behaviour for each state needed (logged in or not, an administrator’s view as opposed to a manager’s view, and so on).

Standard user experience design practice is to produce wireframes before the final visual design for many reasons, not the least being you can solve all (OK, most) interaction design issues at this ‘bare bones’ level before committing to the visual design. And changes to visual design are more fiddly and expensive than to wireframes.

Great for us…not so great for clients

So wireframes suit our processes. But let’s face it: clients are typically underwhelmed by wireframes, and would much rather see the finished result first, with the visual design implemented. Wireframes are typically plain, boxy, and – well – ho-hum. They don’t have the pizzazz that clients are eagerly waiting for. And we haven’t even mentioned clickable prototypes yet, which would be more preferable for clients still.

If we try to dress them up, we run the risk of confusing clients, making them think that they are looking at the visual design, rather than the conceptual design.

The strengths of wireframes

There are several ways out there to approach this dilemma, and most of them involve trying to leap-frog the static wireframe stage. But I think there’s merit in not only retaining this as a vital step in the design process, but levering off the strengths that wireframes actually provide:

• Wireframes are great for encourage ideas-capture – firstly, wireframes are fast; you can pump out a lot of wireframes illustrating your ideas and solutions quickly. This means you can communicate ideas to clients early and often. Internally, it also means you can bin the ideas that don’t work and bullet-proof the ideas that do work efficiently.
• Wireframes encourage collaboration – wireframes are conceptual, so they should actually encourage client collaboration and a sense of co-ownership in the design process. Presenting clients with something too polished can run the risk of leaving them feeling left out of what is probably the ‘fun part’ of their job in engaging with designers.

One solution: treat ‘em rough

The key, then, is to keep wireframes quick, sketchy and informal. I’m a big fan of Dan Roam’s book The back of the napkin, and one of the key take-aways for me is the power of a simple sketch to communicate a lot of information.

So for wireframes, here are a few ideas that have helped me in my projects:

• Sketch and scan hand-drawn wireframes and show to client project teams as early as possible, to discuss solutions and ideas with them
• Sketch up figures representing different personas next to wireframe sketches, showing the link(s) between persona tasks and scenarios, and how that particular wireframe design achieves the tasks
• Try to have a whiteboard handy when discussing interaction design ideas with clients, so that you can instantly sketch up what you’re talking about (and try not to stage it… or if you do make it look spontaneous, not contrived)
• If you’ve been brainstorming using whiteboards and sketches, take photos as you go, and share these photos with clients (in emails, reports, etc) if it helps to communicate your design thinking

A couple of examples

Here are two of the rough wireframes I did for livinggreener.gov.au. The purpose of the sketched set of wireframes was really to quickly ensure that we and the client meant the same thing when we talked about ‘hero areas’, page zoning, and so on. Turns out they really liked the sketched approach.

Sketched example of the home page	Sketched example of a process ‘how to’ page

I could expand on those points, but I’ll leave that for another time.

The ground-up redesign included a user requirements phase of workshops to flesh out Nuix’s own customer research. It also traded off the sort of interface patterns that user demographics were known to be familiar with, to ensure that the new design was as intuitive as possible. The new visual design integrated Nuix’s brand with the various interface elements, along with some customised icons and use of colour to ambiently indicate different status types of information.

As a recent review article said, the re-design gives “customers a new series of user interfaces which make it more intuitive, efficient and simple to use.” (Nuix3 Sets New Benchmark in User Interface Design for eDiscovery Software, Business Wire).

The product is unavailable for public view, but can be viewed by contacting Nuix.

TAFE Northern Sydney Institute website

The brief to redesign the website for TAFE Northern Sydney Institute was essentially to connect students with the right courses at the right campuses, and to promote the business services that TAFE NSI has to offer. Results of requirements workshops clearly indicated the search and browse paths that people preferred, as well as the various scenarios that are in place when they are looking for courses and campuses.

These lessons helped me and others at PTG Global to redesign the search and browse workflows and all page wireframes, so that they would display the right information on the right pages, to make course information as clear as possible to find, read and respond to.

There were several challenges in the interaction design. The main one was trying to unite all the different ways that people searched for course information in a clear, consistent pattern. This was overcome by organising an ‘advanced search’ (at the time titled more options) as a dynamically overlaid panel with options separated as course details, location details, and course delivery. Having in-page tabs for several column panels allowed us to stick to client’s requirements of including access to a lot of information in a relatively small space. Including a ’super footer’ in the design was also a good opportunity to re-cut the content and functionality available on the website in ways not otherwise available through the navigation.

The information architecture schema, screenflows, wireframes and technical specification were then handed over for another company to create the visual design.

Go to: nsi.tafensw.edu.au

The main points from the report include:

• Emphasising the opportunities afforded by Web 2.0 ideas and functionality
• Showing how Web 2.0 can help the overall government aims of information availability, transparency, accountability, responsiveness and efficiency, as well as public service delivery
• Defining Government 2.0 as an approach, rather than a technology
• Highlighting the leadership, culture, policy and governance changes that would have to happen for Government 2.0 to be embraced

There’s loads more, of course, but it seems to stress Government 2.0 as a destination and philosophy. This is important, because it needs to separate itself from the hoopla and hyperbole that mostly gets our attention – and my clients’ attention.

I’ve been involved in several client projects, especially with public sector clients, where there’s been a lot of interest in what Web 2.0/Government 2.0 can deliver for them. I’ve seen some excellent innovative ideas go by the wayside because they’re obfuscated, derailed, or basically dismissed, because the knowledge and experience that business decisions are based on is not authentic or accurate.

Hopefully the Engage report can help with these knowledge and experience gaps, and come to be an authoritative foundation that folks like my clients will be able to refer to.

Read about it at the Department of Finance and Deregulation website, or download the PDF.

Short version

You can view the slides of the presentation below:

Can’t I just whack the A4 brochure onto the website?

Before we plunge into the 10 golden rules, it’s worth comparing the traditional way of reading with the online way of reading. I’ll look at differences in format and our reading behaviour.

Format

1. Print tends to be portrait format, whereas reading in a web browser tends to be landscape format; this affects how long our eyes can sustain reading along one horizontal line before fatiguing and getting distracted.
2. In print, you’re more or less locked into a linear bunch of pages, where one follows another. With web, you can jump all over the place, usually with links. The one different example I can think of is those old Choose your own adventure books I used to read as a kid. They were the web of my childhood!
3. Printed material rarely has text opening and closing and popping out at you, whereas in the online space, there’s all sorts of dynamic things going on to show and hide text in the context of what it’s there to say.
4. Online material has the added dimension of time; it takes time to download, it’s not (yet) instant; in print, all the information is already there when you pick it up.
5. We have some control over its presentation (in web browsers and handsets), e.g. how big or small the text is; with print, the producers have total control.

Behaviour

1. In print, there’s not much of what psychologists call cognitive load in turning a page. In web, we always stop and think at some level “where will this link go? Will it go where I expect it to go? Do I have time? Will I keep going in this direction? Or another?” and so on.
2. People are very task-oriented when reading content online, and have diminishing patience the longer they have to read text. People scan rather than read all the text on a screen. This is known as the F-pattern. You can see this F-pattern in action in the heatmap screenshots here.
3. The increases in download speeds has actually made us jump around websites more, so we’re even more impatient and more fickle than we used to be about staying on one page.

OK, so with these things in mind, let’s jump into some golden rules:

Rule 1: Be clear

Think about why you’re writing in the first place. What do you really want to say? It can be easy to shift into auto-writing mode and churn out the same phrases, but we all appreciate accuracy and clarity. Avoid clichés and phrases that don’t actually mean anything. Avoid acronyms and prioprietary terms that readers may not know what they mean (unless you’re going to explain what they mean). In ‘Christianese’ we have to be careful using words like sermon, worship, grace and parishioner. Even the term ‘non-Christian’ can be pretty alienating.

Rule 2: Be concise

Considering what we know about online reading behaviour – that people scan, rather than read – be ruthless in cutting your text down; be as sharp and brief as possible, without losing meaning and clarity. Use shorter sentences and shorter paragraphs.

Rule 3: Be compelling

Have you thought about what reward there is to your reader for reading your content? Know your audience and decide who you want to grab first. Depending on the nature of what you’re writing, be bold, stake a claim, be exciting and excited, be honest, be real, be confident. Use words that will resonate the most with your intended audience, and not necessarily you. Using keywords that people are actually looking out for as signals to ‘hook’ onto will not only make it a more compelling read, but it will attract more visits to your website through search engine indexing for those keywords.

Rule 4: Be creative

Could there be a new way of presenting your message, rather than three paragraphs and a title? Would starting the content with an intriguing question help? Could it be presented like an IKEA catalog? A chart?

Rule 5: Be current

Replace or remove old content. Update the home page. Update the blog. Leaving outdated content lying around a website is like never cleaning the church. Who’d want to walk through a door and have to brush away the cobwebs? Or brush the crumbs off a chair before sitting down?

Rule 6: Mind your spelling and grammar

It is worth it, it does matter, people do notice, and it does reflect better on you and your church/organisation. Why? In his book Don’t make me think, one of Steve Krug’s lessons is to remove the points of friction between your message and people’s understanding. Every error or poorly constructed sentence we have to read makes us stop and think, which distracts us from the actual goal of the writing. So mind your apostrophes and ellipses, learn about sentence fragments and clauses and use commas correctly and so on. Try to use active voice where you can. Separate your ideas and statements so that there’s one idea per paragraph. But having said that, know when you can break the rules of grammar a bit, to add colour and interest to your writing.

Rule 7: Arrange your content for scanning

Remembering that people scan online content, there’s lots of things we can do to maximise the scannability of our content:

• Use plenty of subtitles
• Short paragraphs
• Bulleted lists
• Think about the priority of your messages. If people only took one thing away from your web page, what would it be? What’s the most important message? Make sure this is most prominent, and so on.
• Use magazines as inspiration to see how they move your eye around the page. Think about the various chunks of information they present that help scanning. Think about how you can chunk your content into a title, a primary area with, say, one leading paragraph, and a couple of associated content areas.

Rule 8: Adapt your writing for the right type of website

Writing will be different depending on whether it’s a ‘location and directions’ page on your church website, or on a blog, or on Twitter. Here are some applications:

Twitter

• Make those 140 characters count! Hone your skills in clear concise text.
• If including links, it’s good to include a punchy lead-in for the link, but even better to make it personal and different, e.g. “This blog post changed how I pray! [Link]”
• Remember to use link shorteners, like bit.ly and clicky.me
• Leave room in those 140 characters for others to retweet
• use hashtags, like #create09

Blogs

For blogs, I’ll focus on the headings. According to top copywriters, there’s a 50/50 rule of headlines, where they say you should spend half the time it takes to write an article just on the headline. Here’s where we can apply our rules 3 and 4 (being compelling and creative), e.g.:

• Read this, or the puppy gets it!
• How to design better church handouts (or How to anything, really)
• Top 10 reasons… 10 Golden Rules… (you get the idea)
• What I didn’t know about Jesus

Marketing and advertising companies know that on average, 8/10 people read headline copy, but only 2/10 will read the rest. That’s why it’s important to invest time in a killer heading. To be effective, try to make it useful, convey a sense of urgency, and convey a unique benefit.

You can also use subheadings within your blog posts to tell the story of the post:

• “I used to mock Christians”
• “Then He turned up”
• “Now by God’s grace I’m planting my third church”

Another tip for blogging: front-load your post. Start with the conclusion. You can then include the rest of the vital details, and then off you go. Next time you read a newspaper article, just tick off how many of the who, what, when, where, why and how of the story are dealt with in the headline and first paragraph.

Rule 9: Don’t let the experts write your web pages

By this I mean, just because you’re super knowledgeable and passionate about your subject, you may not be the best person to write the web page. If it is going to be you who writes the content, I hope these sorts of rules help. But delegate and share the load if you can, and if you think it’s appropriate. Here’s some ideas on how you can do that:

• Assign one person to take charge of gathering all the content from everyone who has the content. They might be the writer, or they might just be someone who is champion of the website, or tends to be the person who just gets things done.
• Ministers and pastors, endorse this person to your congregation or organisation, give them support and authority to gather the content and ask people’s time to interview them.
• Define a content workflow: for each page, or content type, who writes, reviews, edits, approves and publishes? Think about a publishing schedule: change the home page once a month? One blog post a month? A few tweets a week? That sort of thing.

Rule 10: Use content templates

Make it easy on yourself, and others tasked with content on your website, and come up with some templates. These are a big help for people you need to get the information from, and it makes it much easier to know what ‘boxes to fill in’ rather than giving them a ‘blank canvas’. For example, a template about a church event could look a bit like this:

1. Title
2. Short description, mentioning purpose and selling benefit
3. Where is it
4. When is it (date and time)
5. Cost
6. Contact information
7. RSVP date
8. Full description
9. Quote from previous event?
10. Photo from previous event, or a generic ‘event’ photo?

Well that wraps up the 10 golden rules. I hope you found them helpful. Are there any areas that have particularly helped you in your writing? Do you have any other ideas that have helped you?