168. Personality

On this week’s show: Paul explains how to give your site real personality and Dave shares some top tips for writing secure code.

Play

Download this show.

Launch our podcast player

News

Typekit – the messiah of web typography?

There is some big news this week for those website owners and designers keen to use custom fonts on their websites.

For the longest time web designers have been limited to a small subset of fonts that were known to be present on the majority of users PCs. Although CSS font stacks allowed designers to choose less common fonts, because they could specify a safe alternative if that font was unavailable, this did not guarantee the user would see the design as intended. The only way of forcing a particular font was using Flash (via sIFR) or images. However, both of these approaches created potential accessibility problems.

The irony of this situation is that browsers provide a way to embed fonts in your webpage using @font-face. The problem is not technological but legal. Font foundaries are concerned about loosing control over the distribution of their fonts.

This is where Typekit comes in. Typekit is a soon to be released tool from usability expert Jeff Veen. When writing about the service he says…

We’ve been working with foundries to develop a consistent web-only font linking license. We’ve built a technology platform that lets us to host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM.

As a Typekit user, you’ll have access to our library of high-quality fonts. Just add a line of JavaScript to your markup, tell us what fonts you want to use, and then craft your pages the way you always have. Except now you’ll be able to use real fonts. This really is going to change web design.

In short, they provide an easy and legal way to use custom fonts. Of course, there are still some unknowns. We do not know what font foundries have signed up for the service and so have no way to know what fonts will be available (or how many). We also do not know the prices involved. However, presuming you are happy to use Javascript to deliver your custom font then this looks like a very promising solution.

Apple vs Microsoft – A website usability case study

The Web Designer Depot is running an interesting post that compares the usability of Microsoft and Apple’s websites. Let’s be honest, pitting Microsoft against Apple is a little bit of a gimmick. Its actually very hard to compare these two websites. The two companies are aimed at very different markets (as the post itself admits) and are on very different scales. Apple is much more focused as a business than Microsoft and so the Microsoft site is always going to be more complex.

That said, it is extremely interesting to see the two sites deconstructed from a usability point of view and it does identify a number of common usability issues that we can all learn from.

The article focuses on the following areas…

  • Homepage design
  • Flow
  • Navigation
  • Readability
  • Search
  • Aesthetics
  • Consistency

I am sure it will come as no surprise that Apple won hands down. However, I think it is interesting to note that the primary reason for Microsoft’s failure was its size. The larger a site is, the harder it is to maintain consistency, ensure quality and handle navigation. There is a lesson here for all owners of large websites – if you want your site to be usable, make it smaller by simplifying. Apple applies the principles of simplicity to everything from their products to their websites and it results in exceptional usability.

Reinvigorating old blog posts

This week I came across possibly the most ridiculously named idea in the whole of the web – “Sneeze Pages“.

Although the name is stupid the idea is actually a good one. According to Sitepoint a Sneeze page is…

a page that propels people in different directions deep within your blog by highlighting a variety of posts that you’ve previously written.

In other words it is a way of drawing users attention to older blog content buried deep in your archive and therefore increasing the ‘stickiness’ of your website.

As the post on Sitepoint points out, the problem with blogs is that new user rarely get past the last dozen or so posts. The wealth of content in older posts is largely invisible. It therefore makes a lot of sense to create the occasion post which draws attention to this older content.

The Sitepoint article suggests four types of “Sneeze Pages”:

  • Themed Sneeze Pages—these are posts or pages on your blog or site that revolve around a single theme (e.g. The best of Boagworld usability advice)
  • Time-related Sneeze Pages—these pages are based around a defined period of time (e.g. What you might have missed this month)
  • Retro Sneeze Pages—another variation of the time-related sneeze page is to do one that unashamedly shows off a number of posts ffrom a particular point in its history (e.g. The best of 2008)
  • Series Sneeze Pages—this is the technique of writing a series of blog posts exploring a topic over a period of time with lots of interlinked posts. (e.g. My 10 harsh truth posts)

Personally this strikes me as great advice and you can expect to see several such posts from me over the coming weeks and months.

Creating WCAG 2.0. accessible forms

I never get emails asking us to cover accessibility in more depth. Its just not a sexy topic. Designers, developers and website owners know they should care about accessibility and even endeavor to make their sites accessible. However, it doesn’t really excite people.

However, it is an important topic and one I will continue to cover on the show. I would also argue it can be inspiring  too. I will never forget the first time I watched Robin Christopherson from AbilityNet use a screen reader. Its not until you see it in action that you realize the challenges people face.

The same revelation came for me again when reading Accessible Forms using WCAG 2.0. Its not a light read and takes some getting through. However, it has some great insights into exactly how screen readers deal with forms and yet how easy it is to improve the experience if you know what you are doing.

For example did you know that screen reader users have to enter a special “form mode” to complete a form. When in this mode the screen reader will only read form elements. It will ignore any instructional text, unless it is wrapped in a label or other form element. This can easily be a real problem.

There is also advice on…

  • Colors and fonts
  • Mandatory fields
  • Use of Javascript
  • Timeouts
  • Grouping form elements
  • and much more

Personally, I feel this should be required reading for all designers and developers.

Back to top

Feature: How site personas can enhance your sites

If your website was a person, what type of person would it be? It is an interesting question. Take a look at your website for a moment. Look at the design, read some of the copy. Can you picture a single person that represents your site? If the answer is no, then you may benefit from the creation a site persona.

Read How Site Personas Can Enhance Your Website

Back to top

Listeners feedback: Stop hackers hacking your hackey code!

Steve from Aberdeen writes:

You promote the show as being for all those who “design, develop and run websites on a daily basis” but actually don’t cover much for us developers! How about covering some more developer orientated topics such as website security.

Its a fair accusation Steve, which is why I we have Dave on the show this week. He is going to provide a basic introduction to website security.

Security is a complicated monster to tackle, so it helps to think about it in really, really basic terms. Stuff comes in, stuff goes out. We have to assume that anything that comes from the user is dangerous, or tainted, and can’t be trusted in any way what so ever. We don’t even know for sure that the user is who they claim to be. Trust no-one. We also have to be 100% sure that anything we send back to the user is safe, un-tainted, and uncompromising. You don’t want to send dodgy scripts to your users, and neither do you want to send back valuable clues to the inner workings of your code. This is not meant to be an all-encompassing guide to preventing attacks, but instead a set of guidelines to writing applications in secure way.

Minimise

The first rule is this. Minimise areas that accept input from the request, and minimise areas that send response. Sanitisation and validation should be the first thing you perform on data received and the last thing before you return it. Following a sensible architecture such as the Model View Controller approach separates data received by the Controller area and data returned to the View. This will make your life far simpler when you start tackling such issues. This applies to all forms of input (form data, querystrings and cookies) and all forms of output (HTML, redirect, file download).

Validate

A commonly overlooked validation is confirming the data has been intensionally sent from the user. There’s nothing to stop a 3rd party website posting to your website, so it doesn’t matter how secure your login form is, the posted data could be coming from any of the dodgy websites your user has open. An easy solution is to use a random key as part of every posted form, unique to the users session. This way you can easily verify the form has been posted from a tightly controlled page you served to your user. It’s not enough to look at referrer headers, because these are easily faked. ASP.Net web forms, to their credit, do this by default.

Use White-lists over Black-lists. Lets say for example you’re validating a phone number, you don’t specifiy every non-digit character you want to remove, you strip everything that isn’t 0-9. A little too obvious? The same applies to the classic script tag. If you start trying to remove every form of <script> tag, you’ll end up playing catch-up against tricks using <img>, <body> and clever encoding. If allowing any kind of HTML through is necessary, you’d better be damned sure who submitted it and who is going to be able to see it.

Storage

So you’ve received your data, it looks pretty good. Whatcha gonna do with it? If it’s heading towards a database, you can’t be too careful. Escape it, or better yet use parameterised queries. If it’s the file system that your data is ending up, put it somewhere sensible. Ideally, this would be somewhere outside of your webroot, or in a protected folder. Whatever happens, you don’t want anything here directly accessible or executable. Just to be sure.

Responses

OK, so we’re sending a response. Just because the data we received passed our tried-and-tested validations doesn’t mean it’s safe to send back to the user. We HTML encode everything, unless absolutely necessary. If it’s plain text, fairly straight forward. If you’re putting suspect data into an HTML attribute, it might be an idea to verfify the format. If you think you’re outputting an SRC or HREF, check it at least looks like a path. If your response happens to be a redirect, double check nothing funny is going on with the URL. If your response is a (serious) error, make it look friendly, but don’t give away exactly what went wrong. If you want to send them a file, attaching it and manually setting the MIME type is more controlled to simply pointing them at the file.

This is not intended as a set of golden rules, rather a few key points to help you think about the code you write. Most new forms of injection and hackery are just clever ways of attacking poor code. Writing sensible code will keep you one step ahead of such attacks.

Back to top

How site personas can enhance your site

If your website was a person, what type of person would it be?

It is an interesting question. Take a look at your website for a moment. Look at the design, read some of the copy. Can you picture a single person that represents your site? If the answer is no, then you may benefit from the creation a site persona.

What is a site persona?

Essentially a site persona is similar to a user persona. It is a fictional individual who represents your site. You could chose to give that person a name, an age or even decide  how he or she looks. However, the most important aspect of a persona is the character. Is your sites persona enthusiastic and charismatic or considered and reliable? Is it professional or trendy? These character traits can define the whole direction of your site.

Why does a site persona matter?

In my opinion the most important role of a site persona is to create  consistency between design and copy. Often design is produced in isolation and the designer find himself developing templates that will have copy dropped into them later. This is far from ideal. Design and copy should be closely integrated. However, although many designers encourage clients to provide copy upfront, this is not always possible. The next best option is to have a site persona that influences the nature of both copy and design.

A site persona provides both the designer and content providers a structure within which to work. It helps to define the design and provide a tone of voice for the copy. At the same time it ensures the two work well together. The persona is particularly important where multiple content providers are writing copy that needs a single voice.

Finally this tone of voice is important beyond the website too. The site persona also ensures that user engagements via Facebook, YouTube or Twitter also occur with the same voice found on the website. It projects a single consistent image.

How do you create a site persona?

Deciding on the character of your online presence is not easy. However, at its core a site persona is essentially a list of words or phrases that define its personality (e.g. conservative or energetic). Fortunately, there are a number of sources that can help choose those phrases. These include:

  • Existing prom0tional material - By looking through existing marketing material, you maybe able to identify a tone of voice that could define your persona.
  • Business strategy documentation – Documents like annual reports, mission statements and vision documents can provide a sense of the overall vision and personality of your organization. This can be fed back into your persona.
  • Key organizational figures - If your organization has key figureheads (think Steve Jobs) then these people will probably heavily influence your site persona. If these people are the public face of your company, their personalities should certainly be reflected on your site.
  • Your target audience – Look to your target audience as a source of inspiration for your persona. However, do not feel like your persona has to exactly reflect your target audience. For example, a prospective university student does not expect the tone of a university website to be that of a 18 year old. They are looking for an older persona who can still relate to them. That is a subtly different thing.

Of course, using the sources listed above will establish what your persona actually is rather than what you would like it to be. To take your persona to the next stage, you need to be more aspirational in your choice of phrases. However, although it is good to create a persona that reflects the type of organization you wish to become, do not get carried away. Users will treat a persona with suspicion if it is radically different from their preconception.

How to avoid being schizophrenic?

Although many organizations lack a site persona simply because it never occurred to them to create one, some lack one because they have rejected the idea. The reasons given typically fall into two categories:

  • Our target audiences are too diverse – How can we possibly present a consistent persona when we have to speak to such a diverse group of people?
  • We want to focus on people not institutions – We don’t want to hide our content providers behind a corporate facade. We want them to express their own personality in their writing.

Let’s address each of these in turn.

Diverse audiences

This concern is born out of the belief that a site persona should essentially match that of the target audience. If the target audience is diverse then the persona would have to be schizophrenic. However, as I have already said successful communication does not require a site persona and user persona to match.

Take for example my own personality. Whether I am speaking to a board of directors at some public sector institution or running my local youth group, I am still me. I may slightly alter the language I use and the way I behave, but basically I have the same personality. I am just as enthusiastic whether I am presenting plans for a website strategy or participating in a food fight!

As humans we adjust the way we speak all the time depending on our audience, but our essential personality remains unchanged. A successful persona can adapt to suit a variety of audiences.

People not institutions

I am very sympathetic towards the desire to focus on people not institutions. After all, we converse with individuals not organizations. It is good practice to be as open and transparent as possible both online and off. In no way would I suggest you hide the individual personalities behind your organization. However, that does not mean you should not have a consistent overarching persona.

Newspapers are a good example of this in action. A newspaper has multiple columnists, each of which express their own personality when they write. However, each newspaper also have an overarching style. There is for example a distinct difference between reading the Sun and the Times.

It is this balance between personal expression and encompassing persona that our sites need to achieve.

Conclusions

I am acutely aware that this post has lacked detail in places. I haven’t for example provided a site persona for you to use as a template. That is because I don’t think there is a right or wrong way of doing this kind of thing. What you chose to include or exclude from your persona is largely up to you. The aim is not to create a persona for its own sake. The aim is to create a tool that can be used to define the character of your site. This will in turn inform the design and content.

I would be interested to hear whether you have considered using site personas before and if so what your expeirences has been? I would also like to know what problems you see with this approach. This is very much an area where my thinking is evolving so please provide feedback in the comments.

150. User Manipulation

On this week’s show: Liz Danzico talks about user research. Paul explains how to create an effective call to action and we discover how one button cost $300 million in sales

Download this show.

Launch our podcast player

News and events

The $300 Million Button

Our first news story is an incredibly tale from usability expert Jared Spool, which really shows the power of usability testing.

In the post he writes about a client who had a fairly standard checkout process on his website. The process began with a login form:

The form was simple. The fields were Email Address and Password. The buttons were Login and Register. The link was Forgot Password.

It is the kind of form I have seen on many ecommerce websites. This feature, which had been designed to help repeat customers, created two distinct problems:

  • New users resented the idea of having to register. One user said: "I’m not here to enter into a relationship. I just want to buy something."
  • Repeat users rarely remembered their username or password. They wasted substantial time guessing, before eventually resorted to creating a new account. In fact after examining the database Jared discovered that 45% of all customers had multiple registrations. Some did go as far as clicking on the forgotten password link but of those only 25% went on to place an order.

In the end the site was redesigned, allowing the user to continue without registering. Within a year this created a $300 million increase in sales.

Of course $300 million is a meaningless figure in itself. It is the percentage increase that matters. In this case is was a 45% increase. That is a staggering number and one that really drives home the importance of testing with real users.

Read the ‘$300 million button’

The UK government and graded browser support

A couple of weeks ago I wrote about the importance of graded browser support. In my post I explained how we should not limit our support to the browsers we test and how it is unrealistic to push for identical support across all browsers.

This is an approach which has been adopted by the likes of Yahoo! and the BBC for some time, but which now also extends to public sector website in the UK.

According to The Web Standards Project the rules surrounding browser testing on public sector websites have been changed to better reflect best practice in graded browser support.

Changes include an emphasise on functionality over identical layout across browsers (paragraph 39):

You should check that the content, functionality and display all work as intended. There may be minor differences in the way that the website is displayed. The intent is not that it should be pixel perfect across browsers, but that a user of a particular browser does not notice anything appears wrong.

As well as support for progressive enhancement (paragraphs 17-18):

You should follow a progressive enhancement approach to developing websites to ensure that content is accessible to the widest possible number of browsers.

This is excellent news and certainly provides a great reference for UK designers and website owners looking to convince others of the importance of graded browser support.

BBC Graded Browser Support Table

Read the UK government guidance on browser testing

50 Illustrator tutorials

List of Illustrator tutorials

From development to design now, and a list of 50 tutorials that help you get your head around Adobe Illustrator.

The list is compiled by UK web designer Chris Spooner. He echoes my own experiences when he writes:

Adobe Illustrator can be a little tricky to get your head around, particularly after getting used to the workflow as applications such as Photoshop. The difference between layer use and creating and editing shapes can be especially strange at first hand.

I am a Photoshop man and I have found it very difficult to make the transition to a vector based world, so this list was particularly appealing to me.

Its a great list that you will definitely want to check out, if like me you have never got to grips with Illustrator before.

Read 50 illustrator tutorials every designer should see

A new approach to PNG Support

Finally today I would like to draw your attention to a new technique that has been developed by Drew Diller for using PNG transparency in IE6.

Unlike previous techniques this one allows you to use PNGs as background images instead of just as IMG tags. This opens up a world of possibilities and overcomes one of the most annoying limitations of IE6.

This minor miracle is achieved not by using AlphaImageLoader as has been done in the past, but with VML.

Implementation seems fairly straightforward and involves adding a Javascript library to your page. Because this is for IE6 only you can embed the code within a conditional comment. This means other browsers will not even download it.

Although I have yet to use this approach myself, I have high hopes that this will finally solve the IE6/PNG barrier.

Download DD_belatedPNG now.

Back to top

Interview: Liz Danzico on User Research

Paul: So joining me today for our little interview is Liz Danzico. Liz, why don’t you start off by introducing yourself a little bit. Telling us a bit about yourself and your background.

Liz: Sure. Um, I am a user experience consultant, I am here in New York City, I have been developing web sites and user experiences online for about 12 years now. Um, I do a lot of work with Happy Cog Studios here in New York, with Jeffrey Zeldman and Jason Santa Maria. Um, I’m also chair of the new MFA interactions design program.

Paul: Okay.

Liz: At the School of Visual Arts in New York.

Paul: Excellent. I mean, so, to say that you’re an expert in user experience would be a slight understatement then, Liz.

Liz: Well I wouldn’t go that far.

Paul: You’d be too modest, obviously, to say that. Okay, so we got Liz on the show, I met Liz when I went to Future of Web Design and we got talking. Um, she’s got some fascinating insights into the whole area of user research, and usability generally, so I thought let’s get her on the show and let’s maybe, you know, try and cover things from, from the very basic level, a kind of introduction to this concept of user research. Um, so, perhaps a good place to start, if you’re okay Liz, um, would be, how would you go about defining the area of user research? What would you include, what would you exclude from that?

Liz: Right. So … user research, even today, we’ve been doing user research on the web since, uh, the very beginning, so it’s a very old concept but it’s still fairly controversial. So the basic concept is it tells you what really happens when real people interact with your product or service. So, there are no real rules about what it includes and what it doesn’t [inaudible]. You can basically speculate about what your users want, or you can find that out, um, you know? And uh, and the, uh, the latter is probably a more useful approach for you to take than speculation. But with either one, thinking about your audience is useful no matter what. And so, so there are no real rules, now um, when you disconnect thinking about your audience from your business objectives, and you start getting, you know, very excited about behaviors that they’re doing that are sort of disconnected from the real mission that you’re trying to sort of accomplish, then it becomes, um, a bit murky, and confusing. But thinking about your audience is, just in general, is an extremely useful approach.

Paul: Okay. I mean one of the things that, that, um, I’ve heard said before by, particularly cynical clients I have to say, but I’ve heard it said before, you know, ultimately user research, and all of this kind of stuff feels in some ways like, um, just another way for web designers to suck a bit of extra money out of us, you know that fundamentally how, I know my audience already, is the kind of attitude that many web site owners have, so why do you see it as an important part of the process?

Liz: Well uh, you know, as we’ve been seeing design flaws often translate to lost business opportunities, you know, usability is becoming more important than ever as the number of web sites and products is, you know, increasing more and more every day. So, we design these products and services, and we are at the same time users of them, but there’s no way that we can really tell what are users, um, might want. And the best way to, you know, usability research doesn’t cost a lot of money, so, the best way that you can help your clients kind of understand that you need to do usability research in some way is to let them know that usability research is important and it doesn’t need to, um, suck up a lot of time or money in the, in the process. So there’s a great fantastic book by Steve Krug, called Don’t Make Me Think, which I’m sure you’re probably well aware of.

Paul: Uh huh.

Liz: And in one of the chapters towards the end, he has a chapter called "Usability Research on a Shoestring", or it’s probably better titled, which talks of this approach of going out into the hallway and kind of grabbing people, and just sitting them down, and putting them in front of your product or service, and getting some feedback. So getting some feedback from people, no matter who they are, is better than getting none at all. And so, I think starting there with clients, instead of the, you know, $100,000 user research project that’s going to take you across 8 markets, you know, in the United States, the UK, and Asia, then, is going to be a much better approach than kind of intimidating them with the very extensive projects.

Paul: Mmm, I mean, when it, the kind of one scenario that I’ve come across before, um, is where we’ve come across with clients that say "Well we’ve already done user research, we already know our audience ’cause we’ve got somebody in to do this or that." Is there a difference between user research that’s been done primarily with an offline audience, and those with, you know, when you’re interacting with people online? Is there a difference in the kind of results and information that you’re after, and even the techniques, maybe, that you use?

Liz: So, they are probably, when they say that they’ve done user research, they’re probably talking about focus groups. I would venture to guess that when they talk about that they’re probably talking about either focus groups or surveys of some kind and those are not, well, I wouldn’t say that they are, those are bad things to do, but those are not the kinds of user research techniques that are going to give them feedback about their product’s usability. Those kinds of techniques are going to give them good information about, um, certain kinds of things but they are not going to give them information about whether or not people can use the product or service that they’re looking at. So, you want to find out exactly what kinds of user research they’ve conducted. If they say the words "focus group" then you know you want to move them towards something that is a one on one kind of interview. Focus groups tend to be conducted with groups of people, as the name might suggest, um, and when groups of people get together to talk about, you know, they put forth a question for these people, and when they, you know, groups of people get together to talk about the question they might influence one another in their answers, they’re typically aren’t talking about an interface, they’re typically talking about ideas, so you’re not getting good feedback, like in a one on one kind of scenario. So you want to sort of guide them to a more individual, one on one kind of experience. Surveys, on the other hand, are good, but they don’t get that kind of personal experience with a moderator, sitting with an individual, kind of looking at an interface in a kind of task-based scenario.

Paul: Okay, yeah that makes a lot of sense. I mean, let’s then talk about some of the techniques that can be used to better understand individuals, or how those individuals will interact with your product. What different kind of techniques do you use? I mean, there’s the kind of very basic usability session, but do you do, or are there other things above and beyond that, that you do?

Liz: Right. Well, the sort of big secret is that, there are names and there are certainly techniques, but the big secret is there are really no sort of techniques beyond knowing who your users are, kind of documenting what you’re seeing, and then kind of analyzing/prioritizing the results of what you see. So, you can, I’m gonna tell you a number of techniques that we can go through, but if those basic sort of constructs are there, then you’ve done sort of good user research. Now, that being said, the techniques that you can do are usability testing, usability testing traditionally has taken place in a user lab where a moderator is sitting with an individual looking at a screen, or a product, or a sketch of an interface and going through questions in sort of a task-based way, asking people "Show me how you would search for x" or "Show me how you would check out," or, you know, and seeing, measuring the success or failure of that kind of task. The clients are typically sitting behind a one-way, a one-way glass, or mirror, and observing these kinds of things. People have been not so thrilled about this technique recently, saying that it kind of, um, is not, it doesn’t produce natural reactions from users, but that is one kind of technique. There is, uh, kind of creating personas, and using personas, user personas which are an archetype of your site or product’s users, and getting everyone involved in activities around those personas, whether that be using those personas as your talking through features around, you know, a brainstorming session, and getting people to sort of role-play those personas. That’s another user research method. There are, there’s sort of the ethnography kind of take, where a lot of people have been doing kind of in-home interviews and observations recently. Ethnography, cultural anthropologists and people who have been doing traditional ethnography have been watching closely the design research that we’ve been doing recently, and wondering if we’ve been doing it right and so on, but ethnography, in that sort of observing users in their "natural environment", has been I would say a more successful way recently of watching people use products and services, um, so I would say that those three things, usability testing in a lab, sort of using personas and scenarios, and ethnography or kind of going out into the field and watching users, whether they’re in their homes or their offices, are the three kind of key ways to gather user research with users. The fourth way that I’ll mention, and we can talk about this in a little bit, is not with users directly, but it is certainly user research that’s available more and more now, and that is data on sort of analytics, which you can gather from Google Analytics, Shaun Inman’s Mint, these kinds of things. Watching site data and user behavior through site analytics is another form of user research that gives you, you know, some information, and you can watch these traffic patterns on your site. It doesn’t answer the question "Why?" but it does show you some evidence as to how users are behaving on your site.

Paul: It’s quite interesting that you bring up eth, ethnography, whoa I can’t even speak today, because, that’s of interest to me, because that’s an area that we’re beginning to explore a little bit more, and have kind of discovered the same thing, that there’s a real value of going into you know, somebody’s home, seeing the environment that they access the internet on, you know, do they have kids under their feet? You know, where they access their PC, can they sit comfortably at it? All those kinds of things. Um, I guess it’s also an advantage you don’t have to hire an expensive usability lab and all of the rest of it. But I have to confess, I’m a little bit new at it, so talk me through maybe some of the things, you know, how does it differ from a usability test that you would do in a usability lab, other than that you’re in a different environment?

Liz: Well, uh, it depends. It doesn’t have to differ at all — it depends on the goals of the test. I would say that you could construct a test that’s exactly like one that you’d conduct in a lab, it just happens in someone’s home or office, or in a different environment. But as you said, you get the more realistic interruptions, and that kind of thing, and are they going to be able to complete this task given the natural kind of occurrences of their day. And that, depending on what kind of test you are constructing, that’s either going to inform your results or not. If you are doing task-based testing, so I could maybe talk about the different kind of usability testing that you could do.

Paul: Yeah, that’s good.

Liz: Yeah so there are different ways that you could conduct a usability test. Um, traditionally there is task-based testing, where you set up pre-written questions, before you get to the test, that are based on the goals of the testing. So, if we were testing a photo site, we would test whether or not users could upload photos, could they task photos, you know, those kinds of things. So we would write those kinds of questions up beforehand, and then ask those questions during the test. Um, that’s one kind of test. You could do that in a lab, and you can do that same test in someone’s home. In a lab there would not be the children screaming, and the phone ringing, and that kind of thing, or, if someone say were uploading a photo, you would never be able to tell if sort of, timing out, would be an issue, or if anything with time or space or motion would be an issue. If those kinds of things are a goal of your test, then you might want to think about doing it in real time, in someone’s home environment. Another type of testing is something that, I’ll say it was first coined by Mark Hurst, who is a user experience consultant at Good Experience, I think he coined it, it’s called "Listening Labs". Listening labs are, I’ll call them experimental, but they’ve probably been going on long before I was aware of them, where people are designing usability tests in real time. So in other words, you go into the test with absolutely nothing written down, and you sit down with users, and based on your initial interview with them, you hear who they are, and after understanding a little bit about how they use photos in general, say, then you kind of write the questions on the fly, and then sort of develop a test around who that person is and their behavior, with your product, or product type.

Paul: Which I guess, makes people more engaged with the test, because it’s about what they specifically interested in. Is that the idea?

Liz: Exactly. So it’s a more natural way of doing the test. That’s the idea. That kind of thing you could do either way, and probably is even more rewarding if you’re doing it in someone’s natural environment. And then the third type of test is sort of a web, a web wide kind of test, where you have people just surf the internet, as it were, and uh, and just have them think out loud, and that kind of thing is also, I’ve found, more rewarding and fruitful in someone’s home environment, because they have their bookmarks there, and they have their post-it notes. Whereas you put them in a sort of artificial setting and they don’t have those things around them. So, if you, it kind of just depends on the type of testing that you’re doing. If you’re doing just the first kind I talked about, just task analysis and having people go through that kind of task-based testing, doing it in a traditional usability lab is great, you know, I mean you really do get the answers that you’re looking for, and it just depends on your goals.

Paul: I mean, it’s interesting, going back to Steve Krug’s book that you mentioned, I mean he talks about, I guess his agenda in that book is to get people to do testing who perhaps aren’t previously, and so, you know, he really downplays the demographic of who it is that you test, and that it’s more important that you test than that you get the right people, you know and all of that kind of thing. Um, but when you’re going into somebody’s home, and interacting with them, I’m guessing it’s more important to get the right demographic? Is that right?

Liz: Yeah, I mean one of the, um, I think it’s always important to, it’s always important to get the right demographic. Um, but, well I would say that there is a hierarchy of common mistakes around usability testing that kind of has a trickle down effect. You know, the number one mistake is not conducting any research at all, um, and conducting research on the wrong audience is kind of further down the list. So, you know, yeah if you’re doing research on the wrong audience, it’s not going to affect, whether you do it in a lab or you’re doing it at your desk, or at the water cooler, or at home, it’s going to affect your results and your analysis, you know, no matter where it takes place. So, you know, I think that the drawback is you are going to waste more time going out to that person’s time going out to that person’s time, so it’s going to be a drawback for you, but I don’t think that, it doesn’t matter really where it happens, because if you’re testing on the wrong audience, you’re testing on the wrong audience. Um, you’re probably going to get more information out of that experience if you’re in someone’s home, than if you’re not, so if you’re going to test on the wrong audience, do it in someone’s home, because you’re going to, it’s a richer experience, you’re going to get more information out of it than if you’re just testing in a lab.

Paul: No that makes perfect sense, I kind of see that. No, it’s difficult, isn’t it? Because, uh, obviously finding the right demographic of people, and picking the right people to test on is tricky, you know, it’s a more difficult thing and it can be time consuming. So have you got any advice about that? What really matters here? You know, for example, if you’re designing a web site for an over-60s audience, you know, are you, do you want to concentrate on the age aspect of that? Or the technical literacy aspect of that? You know, is it okay to have somebody younger if they’re not as good with the internet, if your audience is, do you, I’m kind of not wording this very well, but you get the idea — what’s important when you’re trying to match demographics?

Liz: Um, well, it’s very specific to your clients. Developing a, so, whenever you are trying to match demographics, you want to work with your clients to develop what’s called a screener, and a screener is a, I would say, whether you’re trying to develop a pretty rigorous recruiting demographic with a professional recruiter, to say, recruit 300 people for an extensive study, or whether you’re going to go out into the hallway and grab some people, or whether you’re going to recruit from something called Craigslist, which a lot of people are familiar with, um, which a lot of people do, I would say developing a screener which kind of outlines your demographic is a really good idea.

Paul: And what kind of things would that include? Sorry I interrupted you.

Liz: Yeah, what a screener is, it kind of goes through, it’s a questionnaire that outlines a number of questions that you would ask a potential recruit, that says, if this person can answer a particular question we should keep them in or out, so it’s actually a really good exercise to go through that allows you to kind of think through the type of demographic that you would have. So that doesn’t answer your question in any way.

Paul: It’s very interesting, though. Can you give me an example? Sorry, I’m interested in this screener thing, cause I haven’t come across it before. Can you give me an example of the type of questions? I mean obviously they’re going to be specific to the individual client, all the rest of it, but what kind of questions?

Liz: Um, what kind of questions? So, let’s see, would this person, so, let’s see, has this person, I mean typical questions could be around financial demographics, age demographics, you know the sort of typical things. But let me think of some more interesting things. So, is this person a full-time student? Has this person been fired from a job in the last 6 months? Has this person participated in usability research in the last 6 months? Those types of things, so if the person answers yes or no, then they’re not a good candidate. But there are other kinds of things you could put into that screener that would be more specific to the project.

Paul: So could it include something like is this person aware of a certain brand, because you want to associate with that brand?

Liz: Absolutely, so does this person drink Coca-Cola on a regular basis, yes or no? That kind of thing. But I’ve found that the screener, because the clients that you work with are often kind of speaking in those terms about their audience, the screener is a really good way to kind of help them understand how you’re recruiting audiences, and a good tool to kind of work together with them to narrow down who you want to be in the target audience for your testing, or your research in general. So, that said, how do you develop a good kind of set of participants for a research study for, say, a product for people over 60? Um, what’s most important, you know it depends on, and I know I hate to say that it depends, but you’re going to develop a goal for the testing, right? And the goal might be about usability, the goal might be about navigation, it might be about design, it might be about, it’s going to have, you have to first identify the goal, and depending on what that goal is, then you can identify the audience. So, the audience, you know the goal might have nothing to do with age, although the product has to do with age. So you can kind of strip away, you can pull apart the product from the goal of the testing a bit, and sort of just focus on the goal of the test. That’s why developing goals for user research is so critical, um, because often times you can separate those and therefore develop a better set of participants for that user research.

Paul: Mmm, that’s really good. I think what we’ve done here, is, a lot of people that listen to this show probably have a basic understanding of user testing. Maybe they’ve done some basic user testing before, or maybe they’ve even written a persona before, but I think what we’ve done, or what you’ve done, is push people a little bit further to kind of consider it in a little bit more detail what they’re doing in order to kind of refine the results that they’re getting back, and that’s really, really great. I mean, if somebody has just kind of done the very basics, you know, they’ve grabbed some people, they’ve done some user testing, maybe in their own office in front of their own PC, and they’ve got a few people in, um maybe they’ve created a couple of personas, what’s the next step for them? What should they be pushing? Is it through this screener? Is that the number one thing they should be doing? Is the goals more important? Is getting a better demographic more important? What’s the kind of next step for them?

Liz: Mmm, that’s a good question. I think that one of the most, well, doing the research is really key. Analyzing the research and connecting the research to the next iteration of a design is also key. We haven’t talked about that at all.

Paul: No, we haven’t, we ought to.

Liz: It’s often a grey area, um, you know there are lots of reports that are produced, you know, diagrams and things, but there’s a lot of kind of intuition that happens between sort of translating the research and putting that research, feeding that research back into the design. There are hunches, leaps of faith, um, you know kind of between that analysis and design. I mean there are clear cut recommendations that one can make, but then there are a lot of more grey areas. So I would say that, I still think, even though I mentioned we’ve been doing this kind of research for at least, you know, more than a decade online, and you know quite a long time offline, I think we still need to get better at the rigor at which we translate those recommendations and findings. So that’s one place I think we need to focus. Um, in terms of the actual research itself, uh, you know, there’s something, I think there are other sorts of techniques. I’m interested in these kinds of emergent, I would say emergent techniques like the listening labs, um, you know where the kinds of things that we’re looking at today with kind of mobile research, where people are, we need to be looking at how people are using our sites not just in the browser on their desktop but, you know, in the browser on their phone, and how their context is changing constantly and how we need to sort of look at that adaptation. So how do we develop tests that are more emergent and can be a bit more flexible, rIght? So I think there’s something interesting about that listening lab, where we kind of understand the person, and then develop the questions around a person and how they use a product, rather than having a pre-written set of questions. So, something that’s more emergent, I think that’s an area that’s interesting to kind of look at. Then, uh, ethnography, really understanding, goes right along with this sort of, emergent, as you said you’ve been getting more excited about ethnography as well, so, thinking more about kind of fine-tuning our approach to people’s own context, whether that be ethnography, going into their homes, their offices, you know, where people are using our products, whether that be on the street, in the hallway, wherever it is, but really understanding how to find people where they’re using our products and test them or do some research around that, I think that’s really exciting and a really interesting opportunity. Um so that, that’s the next step for us, uh, and I think that the way that people are designing tests and doing some usability testing now, is, you know, is good, I don’t think that there’s a big next step that we can all take together, but I think these are three areas that I think as a discipline that we’re going to see people moving forward together in.

Paul: Excellent. Let’s finish off, then, with a kind of where people should go if, you know, they’ve been excited by this interview, they want to learn a little bit more, um, about user research and user testing. You’ve mentioned Steve Krug’s book. What other resources are out there that people should be looking towards?

Liz: Well, let’s see. You know, I was thinking about, I was thinking about that and there are physical places that people can go, but they’re all in San Francisco in the United States, so that’s not going to help anyone. There is, you know, A List Apart has a User Science topic that often publishes user research related methods-like articles, there’s always BoxesandArrows.com which publishes user research related topics, um, Adaptive Path, which is a user research consultancy, or at least one aspect of what they do, they have published a number of articles but they also do events. A lot of events are in the United States right now, but they may have international events as well. But they do kind of give away a lot of their content. Um, and then last but not least, there’s a new-ish publisher called Rosenfeld Media, and the books that Rosenfeld Media publishes are about methods in user experience and, one recently in web form design, was about the usability of web form design by Luke Wroblewski (called Web Form Design: Filling in the Blanks).

Paul: Yeah, I saw that. That looked very good, I have to say.

Liz: Yeah, so that’s something to keep an eye on as well.

Paul: Excellent. Thank you so much, Liz, that was absolutely superb. And I will be fascinated to get you back on the show in the future to talk more depth about some of these issues. Thank you very much for your time, Liz.

Liz: My pleasure.

Thanks goes to Jason Rhodes for transcribing this interview.

Back to top

Listeners feedback:

Every website should have a call to action, a response you want users to complete. But how do you encourage users to act? How do you create an effective call to action. Read More

Back to top

Snape and Keith, separated at birth?

GetSignOff goes public

Today GetSignOff finally opens to the public. It has been an interesting journey.

Part of my reason for writing this post is obviously to pimp GetSignOff and to encourage you all to check it out. However, I also want to take a moment and reflect on the lessons learnt so far. This is Headscape’s first application and we have got some things right and some wrong. I wanted to share all that I have learnt.

However, let me begin with the blatant advertising…

What is GetSignOff?

GetSignOff is an application aimed at web designers. It allows you to present designs, manage feedback and handle multiple iterations of a design concept. However, most of all it is designed to help you get sign off from clients.

It has loads of cool features…

  • Can be used to approve mood boards, interface elements, imagery, personas, storyboards, site design concepts or any other element of the web design process
  • Fully customisable CSS and visual appearance
  • Use your own customised domain name
  • Up to 30GB of storage
  • Manage unlimited numbers of clients, projects and designs
  • Create and manage multiple versions of each design
  • Add notes directly on your designs
  • Check to see if a client has viewed a design
  • Receive notifications via email and RSS
  • Each client can support multiple logins
  • Restrict client logins to specific projects
  • Easy to use interface (ideal for clients!)
  • Clear sign off procedure to ensure everybody knows when a design is approved

Okay, I have pimped it enough now. Signup for a free account and try it yourself.

What we have learnt?

Building a web application is nothing like building sites for clients. It has been a real eye opening experience and we have learnt a lot on the journey. At the minute my head is spinning but I wanted to share a few random thoughts. Apologises for their rough and ready nature…

  • Beta users rock! – The best thing we did was release a beta. Getting feedback from real users blew away our carefully laid plans and ‘all knowing’ attitude. Our beta users came up with some awesome ideas, and found horrendous bugs. However, even when they criticised the application they were amazingly encouraging. I can never thank them enough and would encourage anybody building an application to take a similar approach.
  • Cherish your users – I know saying ‘customer service is important’ has become a cliché but that is because it is true! People are so grateful when you answer their enquiries quickly and efficiently. You can defuse an angry customer by simply being helpful and attentive. It is not difficult.
  • Keep it simple – The temptation to add more and more features is overwhelming. People come up with great ideas and you have the overwhelming desire to use them. However, resist this temptation. I am so glad that I have read both Subject to Change and The Laws of Simplicity while developing this app. Both have encouraged me to keep things simple.
  • Don’t rush into features – There is also a desire to implement great ideas quickly. Somebody suggests something so good that you just have to add it. The trouble is this can lead to all kinds of complications. I have learnt it is better to consider an idea for a couple of weeks before implementing.
  • Pricing is a bitch – I hated this part. We looked at the competition, considered the value to the client and still couldn’t settle on a price. Unfortunately, it was hard to rely on feedback from beta users in this area. After all, they wanted it to be as cheap as possible. In the end it was Ryan Carson who helped the most. He warned against under pricing and rightly so. I think we all have a tendency to devalue our own work.
  • You only get one chance – This is currently terrifying me. You get one chance to make a first impression. I know the current wisdom is to release early, but if you release crap then users will never come back. Hopefully we have struck the right balance between quality and getting to market quickly.
  • Treat it like client work – This project stagnated for ages. It was something we wanted to make happen, but slipped because of paid client work. The way we kick started the project was by pricing and running it as a piece of client work. Only then did it get the priority it deserved.
  • Don’t fear competition – The first time we heard about a competing product we were gutted. By the third and forth we were in danger of slipping into despair. However, actually there was no need. Competition is good. It spurred us on and we even learnt from mistakes our competitors made. However, most importantly of all it made us focus. Until then we were trying to build an application that met the needs of anybody wanting design sign off. After we became aware of the competition we focused our app on meeting the needs of web designers. We decided to go niche and it was the best thing we could have done. While our competitors struggle to meet disparate needs, we focus on the requirements of a single target audience.

In reality we are just at the beginning of our journey. We have so much more we want to do with GetSignOff. However, there is no doubt that today is a significant milestone.

All I would ask of you is that you give the product a chance. If after signing up for a free account you like it, tell your friends and blog about it.

Content is dead, long live context

No, content is not dead. Yes content is important, but there can only be one king and I am beginning to wonder if it is context.

The more I consider context the more I recognise its impact on every aspect of a website. Context affects design, usability, accessibility and content. Its influence is profound, and yet it is largely ignored by many web designers.

But what is context when applied to a website? Its actually hard to define. It is easier to think in terms of the users context while access your website. Understanding this context affects how you design a site.

We put a lot of emphasis on user centric design. We believe that understanding users is important. For example, we believe in carrying out user testing. However, think for a minute about the way we do this. We bring the user into an artificial environment (such as a usability lab). We remove them from their normal context.

Equally when we create personas they focus on demographics (age, sex, job etc) rather than their context. We miss a crucial part of the jigsaw.

So what is the users context? I have identified 5 aspects that form his or her context. These are:

  • Environment
  • Device
  • Comfort
  • Mood
  • Time

Let’s look at each of these in turn.

Environment

Environment refers to a number of factors including location. The kind of information a user wants to access is dependant on his or her location. For example somebody planning a weekend break using their PC at home, will want information on hotels and attractions. When they are actually on their break and using their mobile phone, they are more likely to want information on the nearest pub or the opening times of a museum they want to visit.

Location does not just affect content. It can also affect design. Viewing web content outside will mean battling with sunlight and so high contrast is required. Alternatively, you do not want to be dealing with fiddly form elements while being jostled at a train station.

However, environment is not just about location it also includes distractions and surroundings. For example a mother of three toddlers may find it hard to concentrate on a complex survey, with the children demanding her attention. Equally a user accessing the web from a library is not going to appreciate audio suddenly playing on your website.

Environment also defines the type of device we use to access the web. This is another aspect of context.

Device

Although location and the device often go hand in hand (you tend to use a PC at home and a mobile while out), this is not the only affect device has on context. The device also determines the input methods available.

Few mobile phones come with QWERTY keyboards. None come with a mouse. You can access the web via games consoles like the wii. These generally rely on gamepads, remotes and on screen keyboards.

Different input devices should radically affect the user interface. Not only do each of these devices alter how you interact with the system, they also alter how you view the information.

Typically PC users are sitting close to their monitor and viewing at relatively high resolutions. Games consoles are normally attached to a TV where you sit much further away and the resolution is lower. Mobile devices have a lower resolution still and the viewing position is different again. This all affect the design of your website.

Talking of viewing position, the other factor that needs considering is the users comfort.

Comfort

How physically comfortable a user is affects the length of time they will interact with your site. Although you cannot know whether your target audience is comfortable or not, sometimes you can make an educated guess. For example, if you know your users will be accessing your site via a kiosk in a shopping mall, they will probably be standing and not stay long.

Comfort is to a large degree dictated by environment but not entirely. It can also be dictated by physical conditions. If you are launching a site aimed at those who suffer from back pain or weak bladders, do not expect them to spend a long time on your site!

In some ways comfort is also closely linked to our next factor, mood.

Mood

There is no way we can predict the emotional whims of our audience, but they do have an affect on attention span. Those who are busy or stressed get irritable with a site quicker. They are likely to give up and walk away. Conversely those who are relaxed muddle through and are more tolerant of bad design.

It is important to consider the likely temperament of your users. For example, business executives are likely to be less patient with a site than a pensioner siting in his villa in the south of France.

Environment, device and comfort can all have an impact on mood. However, the biggest influcening factor is time.

Time

It is obvious that the time available to a user affects how long they spend on a site. However, we often do not take this into account when designing a site. Unnecessary form fields and key content buried deep within your site, are just 2 ways we ignore the time constraints users operate under.

Online banking is a good example. It is so complex to login to my account that it is quicker to pick up the phone. With time being a valuable commodity users will often choose a competitors site because they can get things done faster.

Of course, in reality there is a lot of overlap in these facets of context. However, I have yet to read much about context that isn’t directly related to mobile devices. Hopefully I have demonstrated that context applies to all the work we do and not just to mobile websites.

Headscape is recruiting (again!)

Headscape are currently after two new members of staff. If you are an experienced Information Architect or a newly qualified developer, we would love to speak to you.

Yes I know, I am not supposed to be blogging at the moment. However, the reason I am not blogging is because we are so insanely busy. In order to get around this problem we are recruiting (yet again!). If you fancy the idea of working with the gang at Headscape then drop me an email.

Here are the jobs…

Information Architect

We are currently looking for a smart, articulate Information
Architect to work with our clients on initial stakeholder interviews,
user testing and the production of wireframes.

We are looking for candidates with some or all of the following skills:

  • An ability to organize complex information into simple, easy to
    understand structures.
  • Experience in running stakeholder interviews and other requirement
    gathering exercises.
  • Outstanding organizational and communication skills.
  • Proven experience in preparing, running and reporting on usability
    test sessions.
  • The ability to produce easy to digest documentation on IA and
    usability issues.
  • Extensive experience creating sitemaps, wireframes, use-case
    scenarios
    and flow diagrams.
  • Experience of working with large, complex, information heavy
    websites.
  • Ability to plan and execute competitive analysis.
  • Proven experience of working with and producing personas.
  • The ability to meet aggressive deadlines.
  • A good understanding of the design process.
  • A good understanding of technical constraints.
  • Experience of copyrighting.
  • Experience of working with B2C ecommerce sites.

The ideal candidate would be one who is able to work from our Southampton office for at least part of the week.

Experience:

  • Bachelors degree or the equivalent
  • 3 years experience designing websites preferably within a web design
    agency.

Graduate web developer

Starting salary: £22k+
Location: Southampton

Headscape is looking for a graduate web developer, with a 1st or 2:1 degree in a relevant discipline, who is passionate about their profession, keen to learn and can demonstrate good problem solving abilities.

Headscape’s core development technologies are ASP.NET v2.0, VB.NET, Microsoft SQL Server 2005 and XML/XSLT. We have our own, highly flexible content management system software that is the basis for most of our website implementation projects for clients. We are also in the process of developing an online service aimed at web designers.

If you don’t have skills in our core development technologies, don’t worry. We can help you to acquire the skills you’ll need. What we need is demonstrable ability and enthusiasm.

You will need to be a fast learner. You need to be a confident, productive developer. You need to understand relational databases. You must be motivated by developing real-world, web-based applications that really matter to their users. You’ll want to grab with both hands this once-in-a-lifetime opportunity to join a web agency with a national (becoming international) reputation.

If you have had some web development experience outside your degree course we’d love to hear about it too.

Your role will involve working in client project teams with project managers, designers, information architects and user interface developers to create superb bespoke web solutions on-time and within budget.

About Headscape

Headscape is an established web design agency based in the Southampton,
England. We produce top quality websites that are accessible to the
widest possible audience, easy to use and designed around our
clients business objectives. Clients include large government bodies,
educational institutions, charities and the commercial sector.

What goes into a user testing script

I have talked before about the benefits of user testing. I have discussed how to user test on a budget. Now, I want to look at some basics that go into every usability test script.

What should go in a usability test script? That largely depends on what you are testing. If you are testing design concepts then your testing will be limited to questions about the navigation and communication of core messages. You could carry out some flash testing but your options are fairly limited.

However, if you are testing a wireframe or version of your site then more options are available. In such cases, the testing is about completion of tasks. For example, could the user find the price of a particular product, or the contact details for a key member of staff.

The choice of tasks to test should be based on key activities that your personas wish to complete. Let me give you an example. Let us say we have a persona called Jane who was considering attending a health spa. The first two pieces of information Jane wants about the spa is price and availability. It is therefore logical that any testing for the spa should include tasks to find this information.

Although what is tested will vary, there is some information that should always be included. Below are highlights from a fictional transcript demonstrating what should always be covered.

Hi Jane. My name is Marcus and I am going to be running the session. Joining me is Paul. I have asked him along to take some notes as we talk. I hope that is okay.

By introducing yourself and others in the room you help to put the user at their ease. Offering coffee can help too! Be sure to explain any recording equipment in the room as this can be intimidating.

The idea of this meeting is to see if we can improve a website that is currently under development. You are going to help us test the site. Its important to understand that we are testing the site and not you. So you can relax!

By explaining to the user that you are testing the site and not them, they will behave more naturally.

I should also explain that there are no right or wrong answers so don’t worry about messing up.

We need you to be honest. If you are struggling with something or don’t like the way it works, say so. You aren’t going to offend anybody.

If the user perceives the session as a test (with right and wrong answers) they will tell you what they think is right, rather than what they feel.

Also, many users are worried about offending the facilitator with negative comments. This is why it is important to stress that you want honest answers and no offense will be taken.

The most important thing to remember is that we need you to explain what you are thinking. Try to think out loud and talk about the various options you are considering. Before you click on any link explain what other options you considered and why you picked the one you did.

Getting the user to articulate their thoughts is fundamental to the success of the session. It cannot be stressed enough. Even though you have explained this up front, you will still need to prompt them throughout the session.

Finally, if you have any questions please feel free to ask. I might not be able to answer them straight away because this could prejudice the testing. However, I will answer them at the end.

It is important to explain why you may not answer their questions during the session. If they do ask questions be sure to address them at the end.

Let’s start off with something easy. Can you tell me a bit about yourself? Tell me about your job?

It is always good to begin a session with some simple personal questions such as family status, age and job title. This helps build the users confidence and provides useful background information.

Tell me a bit about your computer experience. How confident do you feel using a PC? Do you use them for work? What about at home?

How much do you use the internet? What kind of sites do you use regularly and find most useful?

Building up an understanding of the users computer and web experience provides context for the session. It also indicates how representative they are of the target audience.

Okay, lets talk about the site. Its a site for a health spa. Before I show you the site I want to ask about your expectations. What do you think a health spa website should look like and what information would it contain?

It is helpful before revealing the site to ask users about their expectations. If the expectations do not meet the reality it can cause confusion. Asking about expectations also provides opportunity to find out more about what users want from the site.

The session would then continue to address issues specific to the stage of development the website was currently at, This part of the test is primarily either “do they understand what they are seeing” questions or task completion.

Show 102: Worktime blues

On this week’s show: Paul looks at why you should have a training budget and how to spend it. Marcus looks at capturing requirements and Roo Reynolds introduces us to the possibilities of virtual worlds and their impact on web design.

Download this show.

Launch our podcast player

News and events | Marcus Requirements capture | Paul: Spending the training budget | Roo Reynolds on virtual worlds | Question of the week

News and events

10 Absolute “Nos!” for Freelancers

I know that many of the people that listen to the boagworld podcast are freelancers so I keep an eye out for stories that appeal to this group. I was therefore drawn to an article in my news reader entitled 10 Absolute “Nos!” for freelancers. It’s a great article that lists 10 questions asked by clients to which the answer should always be no.

The questions include classics such as “Can you show me a mock-up to help us choose a designer/developer?”, “Can I pay for my e-commerce site from my website sales?” and “Can I just pay the whole amount when it’s done?”. Almost without exception I agreed with every item on this list. The only exception is “Will you register and host my site?” because I think a lot of clients expect this even if it is a pain in the arse. Of course, the fact that I work for an agency rather than as a freelancer could be colouring my view on this one. However, whether you are a freelancer, an agency employee or just an enthusiastic amateur this is all good advice.

Making the most of working with designers

Adaptive Path are an agency I really admire. Not only do they produce some cutting edge work they are also some of the foremost thinkers in the world of web design. I was therefore understandably interested when one of their clients recently asked them how to make the most of working with a design agency.

The resulting blog post called “Making the Most of a Design Engagement” is a fascinating collection of tips that is definitely worth a read.

The subject of how an agency and client engage is something that I have posted on a number of times [1], [2], [3]. However, reading the perspective of another agency (especially one so well respected) is very enlightening. What I found most encouraging of all is that they obviously struggle with the same kind of client issues we all do.

Whether you are somebody who commissions web designers or whether you are a designer yourself take the time to read this short post.

How Open ID will change your site

Just before I went away on holiday (did I mention I had been away?) there was a new post on the Think Vitamin website about OpenID. I am a big fan of OpenID and have spoken about it before on the show. However, its a tricky concept to explain. At its heart it allows you to login to all the many services you use on the web from one single site so having to deal with only a single username and password.

I sincerely believe that if you are building a new website that has any form of login then you should consider including an OpenID login. The problem at the moment is that you will have to do this in addition to the normal login process. You might wonder if it is worth the effort.

The article on the Think Vitamin site does an excellent job at explaining just how significant OpenID is going to be (even though it exaggerates it in places). It explains the background, the problem and the possibilities. If you haven’t looked at OpenID yet or are sceptical about its worth then the Think Vitamin is a great place to start.

Good practice when working with Tag Clouds

Tagging is everywhere these days. From Flickr to Delicious every site seems to have tags. Even blogs like this one has tags. Tags are a useful alternative form of navigation that allows users to quickly find related content no matter where it is in the sites hierarchy. There is no doubt they are powerful and incredibly useful especially on larger sites with a lot of content.

The problem is that they are relatively new. We are still working out how to successfully integrate them into our websites and what role they play. Fortunately a recent article entitled “Tag Clouds Gallery: Examples And Good Practices” attempts to establish some best practice for tagging and makes some suggestions about their design and integration.

If you are doing some design work with tags or if you are looking to add tags to your own site then you may want to take a look at this post. My only word of caution is that it only tells half the story. It addresses tag clouds but says little about how tags on individual pages should be displayed.

Back to top

Marcus’ bit: Requirements capture

While Paul has been buddying up with Mickey, Donald and Pluto, I have been working with a UK higher education institution at the very early stages of their website redesign project.

One of the things that we have been discussing in detail is the process we will go through to capture requirements and set objectives for the site. I thought I should share them here.

Existing site review

I have looked in the past at carrying out an expert review relating solely on a site’s information architecture. A site review takes on board some aspects of the existing site’s IA but is more general than that.

I tend to look at the following site features very much from a usability point of view:

  • Navigability – can I find things?
  • Consistency of navigation
  • Visual hierarchy – consistency of the design
  • Writing style
  • Processes – search, making a comment, ordering etc
  • Terminology
  • Content – grouping, repetition, wide/narrow mix, internal/external mix etc

The main purposes of the review are:

  • To highlight to all stakeholders what the site issues are
  • To highlight to all stakeholders positive aspects of the existing site
  • To suggest possible solutions to issues
  • To explain the processes involved in achieving goals

Stakeholder interviews

We have found that interviewing key internal staff (i.e. content owners) and sometimes key users, is the most valuable exercise in creating a requirements and objectives document.

Each interview is done on a one-to-one basis to ensure that people say what they really mean! The interviews are semi-structured which means that we will create a script of questions but will happily allow people move off-track.

The interviews aim to gather opinion on the site’s user base, weighting of content, issues and opportunities.

Work together

Though we are usually brought in as experts to consult on this type of process it is imperative that the client is involved at every step of the way. This is because one of the purposes of the exercise is information gathering. For example, creating user personas based just on stakeholders interview input may miss something that discussing/reviewing with the web team would not.

Create the document

What we are trying to do is record all findings in a manner that can be used as a basis for all the work to follow – IA, design, copywriting, build etc. In other words – create a list of requirements for the new site and give them an order of priority.

It needs to get into detail to be useful. A recent review we carried out contained over twenty specific opportunities for the site, which target audience groups each issue related to and how the site could deliver each opportunity.

This was coupled with a detailed list of requirements per audience group – 25 audience groups with over a hundred requirements. The requirements we also graded for importance into ‘must haves’, ‘should haves’ and ‘nice to haves’.

Back to top

Paul’s corner: Spending your training budget

I recently received a question from Harry asking “what approach do you take to training?”. He has some budget set aside and is wondering how he should spend it. As I am always keen to spend other people’s money this seemed the perfect subject for me to talk about… read keeping your skills sharp.

Training course give away

While I am on the subject of training, the guys over at Clearleft have two training courses coming up on January the 24th and 25th in Brighton. The first is CSS mastery by Andy Budd and the second is Bulletproof AJAX by Jeremy Keith. If you would like to attend but cannot get your company to produce the £345 + VAT for the early bird fee then I might be able to help. I have one free place to give away to either course (your choice) for a lucky random winner. We will announce the winner on our Christmas special so entries need to be in by Friday 14th of December. Just send me an email with your name and contact details with “clearleft competition” in the subject line.

Back to top

Ask the expert: Roo Reynolds on virtual worlds

Paul: Okay, so joining me today is Roo Reynolds who is a meta verse evangelist for IBM, Its nice to have you on the show Roo

Roo: Hi Paul,

Paul: What on earth is a meta verse evangelist?

Roo: That’s a good question, I guess a meta verse evangelist is someone who helps people understand the very exciting and confusing area of virtual worlds.

Paul: Ah, virtual worlds. Now the people listening to this show might be thinking what has that got to do with web design, why have we got someone one on here talking about virtual worlds and I am quite happy to admit that that’s not our normal fair. Its not what we normally cover on the show but I wanted to get Roo on partly because um, well to be frank we grew up together didn’t we pretty much

Roo: we did we were family friends for many, many years

Paul: yeah, which was very bizarre to then discover the he is a kind of world authority on virtual worlds. so that sounds very dramatic doesn’t it

Roo: A thought leader?

Paul: A thought Leader

Roo: I remember inheriting your old star wars toys Paul

Paul: There we go, So I set you of on a good direction in your career by getting you into Sci-fi early. I am now taking all of the credit for all that you have achieved since then.

Roo: Its all thanks to you (giggle)

Paul: yeah (hahahaha) Well um, but I though it was quite interesting. I was doing a presentation where one of the things I wanted to talk about in this discussion was upcoming and emerging technologies and how they would affect things and I wanted to talk about virtual worlds and realised that I knew absolutely nothing about them so I gave Roo a call and we had a chat on the phone. Then I got educated so I figured I ought to pass on that education to everybody that listens to this show so that’s um, a bit of the background. So lets kick of the with the first questions. So what exactly are virtual worlds and why do you think there is so much hype surrounding them at the moment there has been lots of talk about, you know, things like second life and that kind of thing. Perhaps if you could explain them a bit, and explain why there is so much enthusiasm about it at the moment

Roo: yeah I can try. So I guess I can ask you to think about it. as it a good an example anyway, probably the most popular example of a virtual world. At the moment. So these are things which are kind of digital online environments or as some people would describe the as multi-user virtual environments its that kind of online social space. So to the untrained eye they might look a lot like game but there are no game elements inside virtual worlds or rather there are but they exist within the broader world. So something like second life doesn’t really have any point there is no final point no enemies to kill there is no “x” level to achieve its just a world and if you want to inhabit that world and build a shop or you want to habit that and be an explorer and wonder around finding interesting things and talking to people then that cool as well.

Paul: Hmm, I mean the immediate thing which comes out of that is well, you know, what is the point. Why do people take part in virtual worlds and what kind of ways are people using them

Roo: Yeah, there are a lot of different answers to that, almost as many answers as there are different people really so as in the real world there is not point. people make up their own point they decide that the are going to make a lot of money or they are going to be an artist and be well known or open a sex shop or whatever it might be and people will have different personal goals which they set themselves. So really any goal is a tangible thing that people will almost determine for themselves

Paul: So I guess in many ways its like the web itself it’s a tool and how chose to use that tool is largely up to you

Roo: Yeah exactly. And within that you will get lots of different things, I mentioned some, you will also get games within that so people play chess inside virtual worlds and people do all kinds of crazy things. Yeah I guess the answer to your question is really why is there so much hype about them, its because over the last 12 months or 16 months or so the press has been covering this is quite a bit way. That turned it into a kind of hype feeding frenzy. Garner had a very famous prediction about how 80% of active internet users by 2011 I think it was will be using virtual worlds and will have an avatar. Not necessarily in second life but in a virtual world. And all of this make people realise that this might just be the next “big thing” its gone from being the kind of space where people will, I don’t mean this in any derogatory way, everyday people will would hang out in to becoming a space that a lot of big companies and small companies and advertising and marketing firms are really getting interested in. You know we have all seen “the web” in that ,very early in my career, was the web being picked up by corporation and some people almost missed the boat and had to catch up later on

Paul: So Why do you think this is going to be the next big thing? Why do you think a virtual worlds are going to be you know, you talked about how some companies had to play catch up on the internet you almost imply that this I going to be as big as the internet is. Did I miss interpret that or do you really think its going to be incredibly significant and if so why?

Roo: Well, I think it is always going to be a subset of the internet, you know, this is just another communications media and its probably will remain a subset of the web. There will always be a place for flat 2D content, But once you start getting into 3D social stuff and giving people a real time opportunity to relate to each other and see each other and this sense of presence where you can see what the other is paying attention to. For me joining a circle for the first time, a circle of people talking and I walked up to it, and you know people took a step back to invite me into that circle. That was a really compelling moment to me. It was also a real eye opener that the “real world etiquette” that we see in society all the time actually was playing out for real in this virtual space as well. In terms of why it might be the next big thing a lot of different elements are coming together at the same time here, we finally have, almost complete availability of broadband, certainly in this country and in the west. We have got fairly powerful machines now that have 3D graphics accelerators and sound cards, this is something which is now also happening in corporate environments as well as at home. There is kind of a point in time where the… someone might describe it as a tipping point where there is this lot of interest and we have seen this massive press interest, but also big companies getting involved, you know when you see Sony with their playstation home project which is going to be like a lobbying environment for the playstation 3 its been delayed a little bit, but that is really the kind of mass Market application for virtual worlds and it is things like that which really opened my eyes to where this might take is. This is not going to be a niche thing with a few geeks hanging around and some would argue that it has never been that. Really virtual worlds have been attractive to creative people and to the people who feel like they want to kind of express themselves and share things, Its not full of 16 year old boy with glasses sitting in their bedrooms and really there is a difference between games, traditional online games and Massively multiplayer online role-playing games And a space like virtual worlds that allows them to be attractive to the mass market . So yeah I wouldn’t say it is going to replace the web or even be the largest portion of the internet. But there is certainly a growing space for these virtual worlds

Paul: so what, I mean, I can understand how some people are maybe making money out of being involved in virtual worlds where, I don’t know, where they are creating things which they are selling inside that virtual world, but what about other companies, how are larger organisations using it. For example, how do IBM use it?

Roo: well, we are maybe quite weird in because we do an awful lot in virtual worlds. We do everything from recruitment too employee discussions and meetings. although of course we cannot use a virtual world for confidential discussion, we certainly have the types of meetings we would have in public spaces, like conferences, we also have virtual facets to real world conferences like forties a really big conference we run, and we had that for the first time happening in second life running in parallel to the real world event so people who could not make it to the real world event could at least attend. They could see and hear some of the presentations and they could mingle and network. So like I said we are a bit weird in that in that we do so much, that’s partly because we are such a big company. Now a lot of other people would look at it and say they have a very particular need or desire, something they want to get out of it and for some people historically it has been marketing, or advertising, it has been to reach a wider audience or to reach them in a different way. Which is more playful and allows them to be really participants rather than just eye balls

Paul: yeah, I mean one thing you said was earlier was that you referred to virtual worlds as a subset of the internet and the web. Its another that that going on online. One of the things which strikes me is that if you do something, in something like second life, say if you run a conference that conference is kind of just fenced into the second life world so its not going to get picked up by search engines, its not going to be very accessible and things like that do you think that there are going to be changes in that, do you think there will be more crossover between virtual and maybe the more traditional web

Roo: yeah absolutely this is one of the areas that really excites me at the moment, this whole area of interoperability and that needs to be not just between different virtual worlds but also between the web and virtual worlds so this idea of the virtual universe sort of thing as a virtual world or virtual worlds is something that IBM even throws this term 3D internet around quite a lot. In a kind of evolutionary next step when you look at virtual worlds today they tend to be proprietary walled gardens and actually a lot of people would compare them to AOL in the mid nineties but actully when you start thinking about how they may interconnect, and that inset just moving your avatar from world of war craft to second or habbo or whatever its actually much more interesting than that. Its things like bringing you wallet with you your friends list with you being able to blur the lines between virtual worlds and bring content in from the web and share content back out to the web, these things are beginning to be possible and in some ways one of the reason I think second life is so successful because it does have the ability to make request to web content and bring that in so you have dynamic stuff going on. But that is still very early days and I think that we will probably see a massive focus and in fact the big conference in san hosa very recently where this came out in a very big way but a lot of companies will be wanting to get together and its very, you know the will is definitely there to have a real focus in the next few month on interactivity

Paul: I mean so, I am kind of very aware this for many of the people listening to this show that are kind of a mixture of designers, developers, you know, people that are running websites that a lot of this is very theoretical and it is not something they would be directly involved in at the moment. I mean do you think there is anything that they should be doing, that they should be aware of when it comes to virtual worlds. Is this an area you think they should be keeping an eye on or doing anything actively.

Roo: Yeah, I guess most people I talk to even if they are not going to rush out tomorrow and buy some space in some virtual world and um, you know its not for everyone. But most people who I talk to at least want to stay informed once they have got that hook in their head that this is, you know, I obviously find it very interesting but people tend to come away with the a sensation that this might go somewhere and there is enough evidence already today that its fairly compelling, if you look at it on the “garnet height curve” this idea that things go though a life cycle of interest it haven’t yet peaked the top of that and it is now falling back down into this trough of disillusionment in the long run what might happen it might reach the stable plateau where it will actually become a really useful space that interesting work will happen and kind of follow the same progression as so many technologies before it. Most people come away with the feeling that they want to keep an eye on it. Now I guess if I am going to step back a little bit and look more broadly at what is going on, on the web then for web designers and for almost all of them, this is very big on their radar the whole area of social online collaboration and this whole “web 2.0″ umbrella which you started talking about a year ago if not longer and has been you know really quite large for me, that fits very neatly into this same space. What you are talking about are people sharing content and whether that is a a chat or something they have built themselves you know, you look at a world like second life and most of it is not built but the company that runs it. As with youtube and del.icio.us and as with flickr and so many other popular services and site these days, it is built by its users. So maybe it is something people need to be aware of maybe its something which will gradually fit into a growing mentally of this is how the web works. Yes it happens to be 3D at the moment on the popular ones and yes they are not all currently delivered through websites, mind there are plenty that are, and there probably will be an increasing number that are delivered though the browser. So yeah, if people find this stuff interesting then they should keep an eye on it, maybe read a bit more about it.

Paul: Where is a good place for them to go then to wrap up, as far as if they want to find out more information or want to read up about the potential of it, where would you recommend they start by looking?

Roo: well there are a lot o very good blogs out there, if they have a very academic mind then they and want to read some really good writing on the subject then the best one I can think of is http://terranova.blogs.com/ , its one that I have guest authored for, but not the one I regularly write for, the one I regularly write for is http://eightbar.co.uk/about/roo, which has got a growing profile in the space of virtual worlds, That is written by a bunch of IBMers writing about what they find interesting. I have a personal blog a personal blog at http://rooreynolds.com if anyone wants to follow that although, please don’t all come at once

Paul: (Laughs) its really not that popular out podcast that it would…

Roo: no you are paul, you wouldn’t know how popular you are, but you are.

Paul: That’s okay, Thank you very much for you time , I think it is interesting we spend so much time on it with the immediate here and now problems, but every now and again it is nice to poke out heads above the parapet and see what is going on a bit further afield; so thank you very much for time coming and being on the show

Back to top

Question of the week

Do you think virtual worlds are going to be a mainstream method of online communication or are they a novelty doomed to failure? Answers in the comments.

Show 98: Flybe Farce

On this week’s show: Paul looks at the ongoing role of the website manager. Marcus looks at when to allow a loss leading project and instead of an expert section we are looking at the ultimate web design reading list.

Play

Download this show.

Launch our podcast player

News and events | Loss leading projects | Ongoing role of the web designer | Web designers reading list | Question of the week

Housekeeping: Prizes and problems

A free ticket for FOWD (New York)

With the 100th boagworld show coming up on the 20th October I am beginning to feel guilty. After all its going to be such a great time and all you poor Americans are going to miss out. I know how hard done by you all are and I couldn’t live with myself if I didn’t offer something as compensation.

Fortunately the guys at Carsonified are insuring that at least one of you poor hard done by Americans have something to cheer you up! They are offering you the chance to win a free ticket to the Future of Web Design conference in New York City between the 6-8 November. The ticket normally cost $195 and you get to see great speakers such as Jeffrey Zeldman, Andy Clarke, and Ryan Singer.

Now obviously this is not as good as going to the recording of the 100th boagworld but you will have to just struggle through. For your chance to win a ticket simply email me your name by the 22nd October and we will pick a random winner. For more information on the conference itself visit futureofwebdesign.com.

Download problems

From time to time I get emails from you complaining that episodes of Boagworld are getting cut short in itunes. Its rare but does happen. Unfortunately this is one of itunes less publicized ‘features’. I just wanted to say that the files are complete, the problem is that the connection gets dropped part way through and itunes thinks it has finished. If this happens to you simply delete the file and re-download it from scratch. It almost always comes down fine second time.

Back to top

News and events

Em Calculator

Personally, I love using ems. Although I don’t use them extensively on every site I build but I do use them a lot. They strike me as the perfect compromise between the pixel perfect control of fixed design and the accessibility and flexibility of fluid. Ems based sites scale as the user increases text size providing a rudimentary zoom functionality.

However I am not claiming that ems are perfect. They are not always the most appropriate solution and have their own technical difficulties. One personal problem I always had with ems was working out the sizing. The problem is that ems inherit from one another. 1 em may equal 10 pixels in one part of the HTML but equal something entirely different deeper down because of inheritance.

I always hated maths and so it is unsurprising that this inheritance issue made my brain want to dribble out of my ears. You can therefore imagine my relief to discover this week that somebody has built a great little em calculator that works out this nesting for you. Simply set the base size and then add the nested tags and em setting for each. The calculator does the rest.

Check it out. I guarantee if you work with ems regularly you will think it is a real time saver.

How to disarm 10 difficult client observations/requests

Next up, a great article about dealing with clients. We all know what it feels like, client after client churn out the same old comments…

I’ll know what I like when I see it.

or…

I love beige; can we get more beige in this?

… the list goes on. These kinds of questions are horribly frustrating and despite the fact that we hear them time and again we are often left floundering as to how to respond. This article lists 10 such comments from clients and proposes some ways to respond to them.

Obviously everybody has to respond to these questions in a way that suits them. However, it is still interesting to see how others suggest you answer these questions. Check it out and then post how you would respond to those questions in our comments.

The resurrection of downloadable fonts

Next up, the return of the downloadable font. Some call it the Holy Grail of web typography. Others just believe it would be used and abused. However, whatever you think you cannot deny that being able to define whatever font you like on a website is something that there is demand for.

The idea has been around since 1998 but different implementations of it by browser manufacturers meant it never gained traction. However according to a number of courses including Robert Nyman it looks like it is back on the cards again.

Both Safari and Opera have now implemented a standards based solution to the problem called @font-face, which is certainly good news. However, until IE and Firefox follow suit this is still not going to get a lot of traction. We will have to wait and see.

Creating better user personas

I feel like I have been talking about user personas a lot recently. They are certainly a tool I have been using for a long time and with good reason. I find them incredibly useful in focusing the designer and client on who they are developing for. They help to define functionality, content, tone and design.

However although I have done an introduction to personas on the show I have avoided going into too much depth. Developing a really good persona is a skill and I am far from an expert. However, if you do want to learn more about personas then you should consider reading Ten Steps to Personas a relatively short article outlining some more advanced techniques.

Now I should warn you up front this is not the easiest of reads. It is certainly more heavy duty than most of the things we cover here. However, I wanted to mention it because I know many of you are already using personas and this will take you to the next level. Also if all else fails it has a very useful chart outlining the steps accompanied by lots of pretty pictures ;)

Back to top

Marcus’ bit: When to allow a loss leading project

Even after going on at length in this podcast about making sure that contracts are in place, tasks are recorded in detail, requirements consultations are paid for and project management effort is not underestimated – all to avoid under-charging – sometimes there are occasions when you should take a hit and do a project as a loss leader. In this week’s show Marcus explains why loss leaders are sometimes a good idea.

Back to top

Paul’s corner: Ongoing role of the website manager

While writing my book I have been thinking a lot about the role of the website manager. In particular it has struck me how underestimated the role is. One aspect of the job that is particularly overlooked is the long term commitment involved. In the book I talk about what that ongoing role is and what companies need to consider if they are going to properly support a website over it life. Fortunately my publisher is keen for me to share my thoughts on various aspects of the book so I have put together a blog on the ongoing role of the website manager.

Back to top

Web Designers reading list

Instead of doing an ask the expert section this week I thought I would answer the single most common question I get from people who listen to this show…

What books would you recommend.

This is something I have blogged and spoken on before but I am going to give you my latest list of top picks based on my ever growing reading list.

Back to top

Question of the week

What books would you recommend about web design? Answer in the comments.

Combating design by committee

Design by committee has been the nail in the coffin of many good design concepts. So how can you minimize the damage done when a client decides to approve a design through a committee structure?

The problem is that it involves compromise. Everybody has a slightly different opinion and so the design is tweaked and tweaked in order to ensure everybody’s concerns are addressed. The result is inevitably a design that offends nobody but also fails to excite anybody. In short it creates unobtrusive design.

Unobtrusive design does have its place. A mediocre design can still be very usable and can meet many of the needs of your target audience. However, it is never going to excite or inspire them. It will never create brand loyalty or generate a feeling of satisfaction with the site.

The best approach is to limit the number of people making design decisions. Ideally this should be just the designer and the website manager. However, realistically this cannot always be the case. In the real world of internal politics there is often a requirement to consult and let everybody have their say. There is however a difference between consultation and design by committee.

The key to successfully avoiding design by committee is getting all parties to agree to a process before design even begins. In my experience the following order of events works very successfully.

  • The designer produces initial design concepts
  • Working with personas and business objectives the designer and website manager refines these concepts
  • The website manager and if possible designer, meets with each stakeholder individually to talk through the designs.
  • The website manager and designer collate feedback and make any amendments they feel necessary
  • The design is presented to real users and feedback is taken
  • The design is revised into its final iteration
  • The final design is presented to all stakeholders supported by feedback from the user testing and stakeholder interviews
  • Design is signed off.

The crucial step is the individual meetings with stakeholders. By meeting with them individually you prevent “design on the fly”. This is when a group of people starts making changes to a design in an attempt to reach a consensus. Without a doubt this is design by committee at its worst. By meeting with people one on one you can simply listen to their opinion and then collate all the suggestions together later. No design decisions will be made in the room.

It is also important in these meetings not to simply show them the design and ask what they think. Provide them with the background information they require to give educated feedback. In particular talk them through the user personas and objectives for the project. When you do show them the designs, do not ask them their personal opinion but rather ask them how they believe the target audience would react to the design. The aim is to encourage them to think beyond their personal preferences and focus on business and user requirements.

By adopting this process by the time those involved in design sign off see the final version they are already on board. They have contributed to the process, been given all the background information, seen the design testing and been educated to think from the users perspective. You will have done everything possible to ensure that the design is not produced by committee.

Show 89: 404

On this week’s show: Paul talks about creating the perfect 404 page, Marcus covers some of the basics of rich media and Aral Balkan makes working with databases and APIs a whole lot easier in flash.

Download this show.

Launch our podcast player

Before we dive into today’s show I have a small request from you our loyal fans *cough*. As you may have noticed the show notes we produce for this podcast are a lot more comprehensive than once they were. They are almost a complete transcript, which is important to us because we want the show to be as accessible as possible. I have been contacted by a number of deaf users who are frustrated because they cannot access the show and to be honest I sympathize. We have done our best to produce a complete script but we are getting hung up on the expert section. I just do not have the time to go through and reproduce everything say. An alternative would be to use a service like Casting Words but to be frank I am not confident on the quality we would get back. I was therefore wondering if any of you would like to volunteer? I know a number of people have offered to transcribe in the past but quickly became overwhelmed with the amount of work involved. However, transcribing just this section of the show (typically about 10 minutes) shouldn’t be too bad. Hopefully if we can put a rota together it should be too big a job and best of all you would get to listen to the expert sections in advance :)

So, if you can spare the time drop me a line.

News and events

Writing for the web

First up this week is the fact that the latest issue of A List Apart is entirely dedicated to the subject of writing for the web. There are two great articles both of which are definitely worth reading. The first post takes the idea of personas and suggests that your website too should have a persona. What tone of voice should your website have? What character should it project? The second article (and my personal favorite of the two) is a passionate defense of good writing on the web. It fights hard against the attitude that web copy should be kept to a minimum arguing instead that if the content is web written it draws the user in and engages with them in the same way good design can.

Both articles are excellent and has made me reconsider the importance of good copy. It is an area I am constantly frustrated by and just wish I could get my clients to pay for a copywriter to really bring their sites alive.

Microformats in Google Maps

Next up is a really exciting announcement by Google. It would appear that Google Maps now supports Microformats. I can hear your cries of disappointment… thats not that exciting! Well, I think it is. This is a huge boost for the Microformats community and puts literally millions more hcards out there. Not only will this raise the awareness of Microformats but I also think it will lead to some interesting mashups using the massive database of businesses that are displayed on Google Maps.

If you are yet to play with Microformats or haven’t gotten around to adding them to your website then now is the time. They are quick and easy to implement and oh so very cool ;)

There has been a lot written about Microformats but it is nice to see big players picking it up and running with it. Good stuff.

Corporate Web Standards

What you don’t see a lot written about anymore is web standards. Its almost as if all of the arguments have been made. However, I did come across an article this week that convinced me there was more to cover. It was a discussion about implementing web standards in a large corporate environment where you are weighed down under legacy pages and internal politics.

It was a refreshing article because it was so pragmatic. Much of what you read about standards is bordering on fanatical. This article was much more down to earth accepting that you cannot implement the perfect solution especially within a large corporate environment. It talked about little steps and something being better than nothing.

If you work in a large organisation then this is definitely worth reading. You will find it very encouraging.

Web Design advice

Last up is a couple of websites I have stumbled across this last week. Both of them are provide general web design advice and I have to say both look very impressive. The first was sent to me by Charles Russell who recommended it as an alternative to “The Principles of Beautiful Web Design“. I am not sure it is an alternative personally but it is certainly an interesting website. It is called Web Design from Scratch and does exactly what it says on the tin. It literally covers every aspect of web design providing basic advice and then referring you on elsewhere. Ideal for the beginners.

The other site I wanted to mention is the Web Designers Wall which I believe has only just launched. It seems to be filled with all kinds of nice goodies including tutorials, code snippets, commentary, inspiration and more. What is more the site design is beautiful. I have a feeling that this site is only going to improve with age.

Marcus’ bit: Rich media

Multimedia doesn’t really mean that much anymore I think. It used to refer to CD-Rom type content but now I think it refers to any web content that isn’t just plain old text and images.

I have been pricing up some new/interesting/dynamic content for one of our clients and it struck me that I haven’t discussed this sort of thing here before. I guess there isn’t a great deal of point to this other than ‘have you thought of doing…’, so here goes…

Animated shortcut banners

These seem to be all the rage at the moment. Usually quite a large portion of the homepage is dedicated to a rolling carousel of messages or adverts for content deeper in a site. There will usually be 3 or 4 different ads that flow from one to another. Manual controls are also available to go straight to a particular shortcut or pause on an ad.

There’s a good example at Wildfowl and Wetlands Trust.

Video

I don’t really mean just plain video; I’m referring to a piece we did for the Surrey Hills AONB that incorporated:

  • Still shots
  • Video footage
  • Voiceover

All of which were pulled together to create a tourism video that can be downloaded at Surrey Hills.

The voiceover, incidentally, was done by Surrey Hills patron and famous british actress, Penelope Keith. Going to her rather grand house to record the session was a great experience.

Voiceover

Which brings me nicely on the subject of voiceover. I have two rules relating to voiceover recording:

ALWAYS use a professional actor. The girl in the office with the ‘nice’ voice will sound rubbish, so will the ‘posh’ guy in accounts (we know, we’ve done it!). Voiceover actors aren’t that expensive and, because they’re professional they’re quick. I have used Voicebookers in the past and they have been superb.

Less important but… use a proper voiceover recording studio. I have used studios in London that are really very reasonable and the quality is superb. Though of course this isn’t always possible as with Penelope Keith (recorded my laptop).

Panoramic imagery

We have done a few external 360 degree images, again for Surrey Hills and some for National Trails. We haven’t used dedicated equipment that take full spherical shots basically because you end up with an unnecessary amount of sky. I have simply used a decent camera and tripod and done two full sweeps of portrait images (roughly one just below the horizon, the other just above), moving the camera about 10 degrees each time.

The ‘fun’ part with these images is that they are usually taken from high vantage points so expect to have to do a lot of climbing to out of the way places!

There is a compromise to be made with panoramics. The best time to take a good landscape photo is early in the morning or just before sunset. However, for a panoramic that doesn’t work because you will have the sun in view for a large chunk of the image. This is one of the reasons why panoramic images can often look a little ‘flat’.

Dynamic screensaver

This is quite a cool idea where the standard screensaver idea (pretty pictures rolling from one to the next) is enhanced to allow the client to update information to it. Basically, when the screensaver fires up (as long as it connected to the internet) it checks with the client’s site to see if any changes have been made and automatically updates if there has. This is really handy for news stories but could be used for anything.

Mapping

I think I have discussed mapping previously because it is something Headscape has done a lot of in the past. Up until recently we tended to develop maps using Flash where points of interest are dynamically generated using grid references. We also added features such as layering of different categories.

However, recently we have developed a site for River Thames that utilises Google Maps. The site’s main purpose is to promote the River and encourage people to visit. Again, we have used Google Maps to show points of interest such as places to eat, places to stay etc that are controllable in layers. Using GM is very cool though because the points shown alter when the maps are dragged and/or zoomed (apparently lots of brain power went into making this work!).

Finally, we also created a trip planner or itinerary builder that gives site users the opportunity to list all the places they want to visit (inc. contact details, address, directions etc) and print this off in a print friendly design or email to a friend.

Paul’s corner: Handling missing pages

I noticed this last week that I have been getting a lot of traffic from the Smashing Magazine and so I went to check out where it was coming from. Turns out it was an article on 404 error pages and they had used my error page as an example. The article also referenced another site called the 404 Research Lab that provides lots of good information on setting up custom error pages. All of this reminded me I wrote a blog post ages ago about handling missing pages and yet for some reason i have never spoken about it on the show before. Seems strange because it is a subject we all need to deal with. So, I thought it was time I covered the subject properly using my old blog post as the basis.

Review: Aral Balkan on SWX

Paul Boag: OK, so joining me today is Aral Balkan. Hello! How are you?

Aral Balkan: I’m fine, Paul. How are you doing?

Paul: Not too bad. I feel like I’m speaking to you quite a lot recently, one way or the other.

Aral: [laughs] I know, but it’s fun, huh?

Paul: So I was explaining to everybody earlier in the show how we got you into Headscape to give us a little bit of training and kind of bring us up to speed with what was going on with Flash.

Aral: Yeah, that was a lot of fun, too.

Paul: You had a good day, did you? It wasn’t too painful then.

Aral: Yeah. Me and my bunny had a good day. [laughs]

Paul: Yeah, that was deeply disturbing, on so many levels.

Aral: [laughs]

Paul: But I think we’ll just leave it at that. We won’t tell people any more details on that. We’ll just leave them worrying about it. [laughs]

Aral: OK, let’s do that. [laughs]

Paul: So, as part of that day, you mentioned SWX, which is something that you’ve been involved in developing. And it sounded so cool and kind of dragged my attention back when there were points where I was thinking that this is beginning to get a bit out of depth to me.

Aral: [laughs]

Paul: There were techie people in the room that understood what was going on.

Aral: Yeah.

Paul: But then you started talking about SWX, and I started to think, “Ooh, that sounds cool” so I thought I’d get you on the show and ask you a little bit about it.

Aral: That’s great. That’s great, because SWX is what I’m most excited about these days.

Paul: Good stuff. So, do you want to kick us off by telling us a little bit about what SWX is?

Aral: Well, SWX is a couple of things. SWX itself is a new data format for Flash. It’s actually the native data format for Flash, which is kind of weird, because Flash has been around for a while, so why hasn’t it had a native data format until this point? I don’t know. Nobody else did it, so at the end; I was like, “OK. Well, I guess I have to bite the bullet here.”

And when I say native data format, if you’re not very fluent with Flash, think about JSON, or what JSON is for JavaScript. But it’s actually a step beyond that, because, with JSON, you still either have to parse it, or in JavaScript you have to evaluate it, before you can use it. So there’s another step before you can use it, after the data’s loaded.

In SWX, there isn’t. It uses SWF files, which are native Flash files, to store data, so it makes it very easy to work with.

Paul: What’s the kind of target audience for this? Who do you see as using it?

Aral: There are a couple. So, anyone right now who’s working with Flash basically can use this to build mash-ups, to build data-driven Flash applications. And also, mobile developers who are developing with Flash Lite can use SWX to develop mobile Flash applications.

And in fact, that’s where it’s currently, I think, most useful, because with SWX RPC–which is the remote procedure call, the gateway for it–you can make remote procedure calls, so call back-end services and methods, through SWX. And it’s the only RPC solution, really, because Flash Remoting doesn’t work on Flash mobile, on Flash Lite, so it’s the only RPC solution for mobile right now.

Paul: I think what kind of struck me about it was the fact that there are a lot of people out there that maybe have been doing some superficial stuff with Flash…

Aral: Yeah.

Paul: And have been doing some ActionScript and things like that.

Aral: Right.

Paul: But when it gets to things like making data calls, it all seems to get horribly complicated, all of a sudden.

Aral: It does. It gets very hairy, and I don’t know why. I think part of it is because the back-end, the server side, of applications has traditionally been the realm of traditional programmers: the brainiacs, the people who are very comfortable talking in code, thinking in code.

And they’re not always the best people, I find, to simplify concepts, because they’re so intelligent, they can understand all of this, or they have such a focus on this that they don’t mind spending hours trying to set something up. Sometimes, they’re not always the best people to create simpler systems for mere mortals like the rest of us.

Paul: [laughs]

Aral: So that was my main motivation behind it, because I think Flash is great for building mash-ups and data-driven applications. But we don’t get as much experimentation in Flash with that, and I think it’s because it’s too hard. The barrier of entry is too high. You have to jump through so many hoops to get even something basic working, whereas it should just be, off the bat, you should be able to get started with things. And that’s been my focus with SWX.

So, for example, on the Mac, there’s a bundle that you can download that gives you everything you need to start using SWX, with a one-click installer, a disk image.

Paul: Cool.

Aral: My focus, really, with SWX is on simplicity. And when I say simplicity, I mean for the whole process, from the moment you go on the website and download SWX, to the moment you can get up and running. I’m trying to make that whole process as easy as possible, basically.

Paul: From what you showed me when you came into Headscape…

Aral: Yeah.

Paul: Basically, within a few minutes, you can kind of download this bundle onto my Mac. I can run an install file, which sets everything up for me.

Aral: Yeah.

Paul: And you’ve even set up…

Aral: Well, you basically get a development server for free.

Paul: Yeah.

Aral: It uses the MAMP Bundle, which is a great bundle that has Apache, PHP, MySQL. So if you’ve ever been afraid to work with these things, that’s also a way to get started, because there they are on your machine, running, without any configuration or anything on your part.

Paul: And you have also included some kind of interfaces to common APIs, things like Flickr and Twitter and stuff.

Aral: Yes, and in fact, if you remember the installation process and everything that you were talking about, you don’t even have to download and install SWX to start working with the pre-existing APIs that come with it, because I host an instance of the SWX gateway on swxformat.org. It’s the public SWX gateway that you can just hit directly from your Flash applications.

Paul: Ah!

Aral: So if you don’t want to mess with the back-end, but say you want to build a mash-up that uses Flickr or Twitter, currently two of the main APIs that I have on there, you don’t even have to download SWX. You can just open up Flash, write four or five lines of code, and get, for example, the list of your latest photos from Flickr.

Paul: Cool.

Aral: Or your friends’ photos. With nothing else. So you don’t even have to download anything to start working with SWX, because it is native. What you’re getting from the back-end, from that SWX gateway, is a SWF, and Flash knows how to deal with that, and the data in there is a native Flash object and ready for you to use the moment it loads.

Paul: So, how does somebody get started on this? Where do they go? What do they have to do? Especially, you made it sound very simple for the Mac. Is it horribly complicated if you’re a Windows user?

Aral: Oh, not at all, not at all. Like I said, regardless or what platform you’re on, unless you want to build your own server-side services, if you want to use the APIs that it comes with, you don’t even have to download it, actually.

Paul: Oh, OK.

Aral: In fact, just last week, I got moo cards printed. And these little moo cards have all the code you need on the back of them, because there’s only about four lines of text you can put on the back.

Paul: [laughs]

Aral: But they have all the code you need to get the latest public timeline updates from Twitter. So it’s actually, seriously, four lines of code, and it fits on a moo card.

Paul: Wow!

Aral: So, to get started, you don’t have to do anything, really, apart from open up Flash, write four lines of code, and see it run and get the feeling that, “Wow, maybe I can build data-driven applications in Flash, too, because this is simple.”

The next step would be to download SWX onto your own machine. If you have a development server already, if you have a web server with PHP, then you just download the ZIP file, unzip it into your web root, and hit that location in the browser, and the start page comes up and guides you through the rest of it.

Paul: Cool.

Aral: If you’re on a Mac, get the MAMP Bundle, and that’ll get you started even faster. But, like I said, you don’t even need to download anything to start playing with it.

Paul: So these four lines of code to get you going…

Aral: Yeah.

Paul: If they don’t have one of your precious mood cards, where can they go to learn those kind of basics?

Aral: Well, on swxformat.org, there is a screencast right now. It runs you through the MAMP Bundle, but the concepts are exactly the same for all of the rest.

Paul: OK.

Aral: Although, I am going to record a few more screencasts. I’ve started putting them up on Viddler, which is actually really cool. I don’t know if you’re used it.

Paul: Yeah, I have.

Aral: But it’s really great for screencasts, because it keeps the original resolution of your movie. So I’m going to record quite a few more and put them up there, including one that will just get you started, like the moo card does.

Paul: Cool.

Aral: So, look on swxformat.org. And also, look on my blog, because I blog about SWX quite often there: it is aralbalkan.com.

Paul: So as I understand it, at the moment, this is all built on PHP and MySQL. Is that going to change? Are we going to see other platforms supporting this, too?

Aral: Well, basically, the SWX format itself is a data format, so it’s platform-agnostic, in terms of the back-end, etcetera. So if you have a SWX SWF, you’ll be able to load that. Even if it’s offline, if you have if on your hard drive, you’ll be able to load it into Flash and get the data off of it.

Paul: Excellent.

Aral: And then there’s SWX RPC, which is an implementation of a gateway, basically, or an endpoint, that serves SWX SWFs. And the current implementation of that is only in PHP.

Paul: Right.

Aral: So, it will be ported later on. It’s currently in beta. And once we get closer to the release date and certain things are standardized, I’m going to be concentrating on orchestrating the ports. There’s a lot of interest from quite a few people to port it to Ruby, to J2EE, to.NET.

Paul: Excellent.

Aral: And my focus right now is on getting SWX to a level where it’s somewhat of a standard–not like an Internet standard, but at least, within itself, we know what we’re talking about when we say a SWX SWF so that, if it’s being generated from Ruby, it’s the same thing…

Paul: Yeah.

Aral: So there’s no fragmentation. That’s my focus right now. In fact, I’m writing my first RFC…

Paul: [laughs]

Aral: For the SWX formats, just so things are a bit more standardized, before we go porting it to every possible technology.

Paul: Excellent! That just sounds really exciting…

Aral: I’m really excited about it!

Paul: Yeah, I bet you are.

Aral: This has gotten me excited and working with technology again, at a level that I hadn’t been in the past. It’s fun. Because this stuff, the data exchange between tiers, it’s really not rocket science, and it shouldn’t be rocket science. We’re just moving stuff from one place to another. And my philosophy is: make that as simple as possible for people so they can concentrate on the really fun bits…

Paul: Yeah.

Aral: Building the user interface, building a great user experience. Because those are the hardest bits, really, conceptually, and they’re also the most fun.

Paul: Yeah. That’s great stuff, and I wish you all the best with it in the future. And thanks for coming on the show and telling us a little bit about it.

Aral: Thanks so much, Paul, for having me. It was a lot of fun.

Paul: Yeah. OK. Good to talk to you, and we’ll speak to you again soon.

Aral: OK, take care of yourself.

Technology demographics

For a long time marketers have made use of various demographic scales to classify different types of people. Well now, thanks to research carried out at the University College London it is possible to classify people by their use of technology.

Using information from the most recent UK census and data firm Experian, the researchers at UCL have created 23 "e-types". These 23 e-types are themselves organised into seven broader categories including:

  • E-unengaged
  • E-marginalised
  • Becoming engaged
  • E for entertainment and shopping
  • E-independents
  • Instrumental E-users
  • E-business users
  • E- experts

However, the researchers have gone further than simply creating the 23 e-types. They have mapped those types onto the 1.7 million British postcodes. By entering a postcode on their site, you can see the e-type for that postcode. This provides an incredible granularity down to approximately 17 households!

Unsurprisingly the ability to see the e-type of your individual postcode has created a lot of interest in the press. However, it is not the postcode functionality that particularly excites me. Although knowing the technical literacy of a postcode is interesting, it does not really help me as a web designer. I cannot think of a single site, which I have worked on that is aimed at a specific geographic area.

What I find more interesting is the definition of the e-types. This could prove a very powerful tool for web designers to understand the target audience for a site. Used in conjunction with personas I see this as an excellent way quantify how users will interact with your site.

Getting to know your users

No matter how dedicated you are to producing a user centric website it is all too easy to loose sight of your users needs. One way of keeping them front and centre is to give them a face and a name.

It is something the advertising industry realised years ago; it is easier to develop a campaign for a person with a name and a face than it is to develop for a theoretical demographic group. With that realisation persona sketching was born.

What is a persona?

Persona sketching is a fancy name for a simple idea (trust the advertising world to come up with a fancy name for it). Through a combination of imagination and good old fashion research, you endeavour to build up a picture of a typical user. A persona often covers things like:

  • Occupation
  • Gender
  • Age
  • Marital status
  • Hobbies
  • Web usage
  • Location

How to build a persona

Unsurprisingly, to build an accurate persona can be a time consuming and expensive process. However in web design where the budgets do not compare with the world of advertising there are ways of ensuring that your personas are as accurate as possible without breaking the bank. Some methods might include:

  • Speak to those within the organisation who have contact with end users
  • Talk to friends and family, see if you can find anybody who is a potential user
  • Look at the competition and try to find out what sort of face they put on their users
  • Talk to other stakeholders and get their perception of the end user

By combining these "rough and ready" techniques with a good dollop of imagination, you should be able to come up with something like this. Try to ensure that the personas you develop have a sense of real personality about them. Detail helps a persona feel more real and easier to associate with.

Depending on the size of your site and the breadth of your audience, you may end up developing a number of personas each one representing a different target audience.

Using your personas

Once you have all of your personas in place you can use them throughout the development process from design to final implementation. Think of them as a plumb line against which you measure all of the decisions you make. Continually ask yourself how Sara would feel about filling in this form or whether Paul will have the patience to wait for this to download.

How effective persona sketching is can be debated but I have found it a helpful tool in the past to focus the mind especially when a site has to appeal to a very wide demographic.

Further reading

Personas: Matching a Design to the Users’ Goals – Christine Perfetti
Practical Persona Creation – D. Keith Robinson
Perfecting Your Personas – Kim Goodwin
Bringing Your Personas to Life in Real Life – Elan Freydenson