194. Focus on User Tasks

On this week’s show: Gerry McGovern talks about user tasks, Colin Firth discusses content and we have a review of Powerpoint alternative – Prezi.

Play

Download this show.

Launch our podcast player

News

iPhone developers are stupid

Over at Quiksmode PPK has managed to get himself into some trouble with a provocative post entitled “Apple is not evil. iPhone developers are stupid.

He had to quickly follow up with a second post in which he wrote:

I was wrong about Web apps being able to replace native apps right now. I was wrong about the iPhone developers’ mindset. They aren’t stupid.

Personally I couldn’t care less whether iPhone developers are stupid. What I am interested in is his comparison between Native iPhone Apps and Web Apps.

As you may have heard, Headscape recently had a fun few days playing with the iPhone developer kit. Like most developers we are interested in the platform. However, after reading PPK’s posts I am not sure whether we should be looking at Native Apps, but instead be focusing on the web.

At the end of the day Headscape are web developers. We know how to build using HTML, CSS and Javascript. Our developers are clever chaps but the learning curve in iPhone development is fairly steep.

Mobile Safari on the other hand, is a great browser that allows us to use some pretty advanced techniques. Combined with the APIs available to web apps, it is possible to do a hell of a lot. What is more the iPhone is going to open up even more APIs soon.

Of course, as PPK admits in his second post, there are limitations. The biggest of which is the lack of exposure in the app store. However, in many cases this is not a massive hurdle especially if the application is designed to support an existing website.

What PPK has done in these posts is challenge the perception that all iPhone apps need to be native. If you are a website owner or web designer, look at web apps before rushing into the time and expense of a native build.

Ways to tell a good story

Story telling is an extremely powerful way of communicating. Stories allow us to remember complex ideas and help us to associate and empathise with situations. A good story will draw us in and engage.

As a result stories have a lot of potential to be used in web copy. A story can encourage a user to buy or help them remember your brand. A story can convince users of the worthiness of your cause or ensure the reader does not forget your site.

However other than case studies, few web designers or website owners use stories to communicate.

Pro Blogger has recently published “14 types of stories you can tell on your blog.” However, I would actually argue most of these can be told in any circumstance from a sales pitch to a corporate website.

It’s an inspiring list that contains all kinds of approaches to story telling, which will help you better communicate with your readers. It is certainly worth checking out.

Frequently asked questions that are not so frequent (or questions)

Does your website have a frequently asked questions section? Most do. In fact the FAQ section has been around 26 years! It first started on newsgroups to avoid newbies constantly going over the same old ground.

However, according to a post entitled “FAQs. Supply questions but no answers” just because something has stood the test of time does not always mean it is still a good idea.

This post is actually a very convincing argument against the use of FAQs. The argument is two fold:

  • Most FAQs are not frequently asked questions at all - They are either a list of questions that the site owner wants users to ask, or it is an area to put content that does not fit well elsewhere.
  • If they are real FAQs then surely those questions need addressing – The author argues that if a user is repeatedly asking the same question then we should make the answer more obvious. He uses the analogy of running a corner shop. If people keep asking where they can find the butter, surely you would move it to be more visible?

Although I do not believe that the arguments presented in this post are always true, I do think the basic principles are. Too many FAQ sections are nothing to do with meeting the needs of users and even when they are, there would be more effectives ways of doing the same thing.

If you use FAQs, it is time to closely examine whether they are actually the answer.

Learning from Video Games

I have spoken before about looking beyond the web for inspiration. In fact just recently I wrote a post on poster design. However, one area I haven’t mentioned before is learning from video games.

I know this is an area where a lot of UX designers are very excited. A recent post entitled “6 Things Video Games Can Teach Us About Web Usability” shows us there is much to be learnt from video games.

The six areas the post discuss include:

  • Users have no patience – Video game designers struggle with users dislike of loading screens while web designer fight to ensure web pages load quickly.
  • It’s all about the experience – Creative interaction and engagement is more important than eye candy. Something that many web designers could do with learning.
  • Progressive enhancement is good – Video game consoles make use of high definition TV and surround sound systems but do not require users to have them. This is the same progressive enhancement we should be seeking in our websites.
  • The need to minimise the learning curve – The instruction booklet for games is becoming increasingly rare. Video game developers know that users do not want to learn, they want to play. So instead they use tutorial levels to easy users into the action.
  • Keep the interface simple – Nobody wants to be confused about where they are or how to get out of the location they are in. This is true whether in a computer game or on the web.
  • Don’t rely on graphics alone – A game with pure eye candy and no functionality will not last long. In the same way on the web, functionality and content needs to take priority over design.

Actually, I think this list could have continued on. The parallels between game design and web design runs deep. However, this is certainly an inspiring list that is worth reading.

Back to top

Interview: Gerry McGovern on User Tasks

Paul: So joining me today is if I’m honest, a little bit of a web design hero to me. A guy I have mentioned many times on the podcast and referred to his work a lot… So joining me today is Gerry McGovern. Good to have you on the show Gerry.

Gerry: Thanks very much for inviting me on Paul, it’s a pleasure.

Paul It’s really exciting to have you on because, as I’ve said, I’ve mentioned your Blog posts and various other bits and pieces of your writing quite regularly on the show. I’m amazed that we haven’t gotten you sooner, but I’m glad we could make up for it now. I’m wondering would you mind starting off by maybe telling our listeners a little bit about who you are and what kind of stuff you do.

Gerry: Ok I’m Irish, I live in Ireland but I kind-off travel the world and I’ve been involved in the web since 1994, very, early on I was a kind of looking for something to you know, uh, I kind of tried all sorts of jobs and I was kind of watching out for this opportunity that uh, I could really get hold of and, uh, the first time I saw the web I thought this is gonna, this is gonna change the world. When I was a young kid I grew up in a small farm in Ireland, and we used to, I used to love to watch the westerns, because there was this enrage of kind of going out west where I lived there were no opportunities and there was very little you could get out of life and I kind of envied this sense of people going out into these new territory, I made a promise, and I said, If you ever see those wagons going out west, you get on them… and the first time I saw the web you know even though it was the very early days, there was this real sense of this is a new world and even today, you know sometimes you get bored or stressed out but I still feel were in the middle or beginning of this whole revolution, you know.

Paul: Yeah.

Gerry: You know, basically my background had been in writing and journalism and marketing and that area and I came to the web from a content point of view, than I suppose from a technical or a classical design point of view and very much that’s how it evolved and very much from initially the content but I realized at some stage I don’t know very much from initially the content but, I realized at some stage, I don’t know… maybe in early 2000 that it had kind of giving a website to a communicator was like giving a pop to an alcoholic.

Paul: [chucking... laughing...]

Gerry: You know… and these websites were just going massively out of control. You know, I tend to deal with a lot of big organizations like you know, the Microsoft’s of this world.

Paul: Yeah

Garry: And I saw… this pump of stuff and I realized that managing the content wasn’t the solution to really getting a successful website, so essentially what I began to really focus on was this concept of task management, that it’s not about the design, it’s not about the technology, it’s not about the content. That the web really is about the task so that’s a quick synopsis.

Paul: Yeah, I mean that’s, that’s really interesting because when I first came across you I got the impression that you were someone really focused on usability and I remember that we had a very brief conversation a while back and it surprised you that I viewed you like that because you view yourself more as someone from a marketing background so it’s interesting to see how your career has evolved I guess, and how your interests have changed over the time.

Gerry: Yeah, but you’d be right, you know, a lot of what I end up doing I suppose it’s a different form of marketing. Traditional Marketing is often seeing is getting people to do things but I think web marketing is about helping people do things. like if you’re doing good web marketing and that’s very close to usability.

Paul: Yeah, very much so. Now you talked the fact that you tend to work on you know, large websites, you said the Microsoft’s of this world and those kinds of people and that has a lot residence to me in particular because we work on large institutional websites and so I was just interested. I know that a lot of the people that listen to this show actually work for large organizations like that and I’m interested in what your perception is in terms of the biggest challenges that are faced by these larger institutions that have huge amounts of content and big spawling websites. What are the biggest mistakes they’re making?

Gerry: I think Paul, the biggest mistake is lack of management, uh… most websites aren’t really managed when you really dig behind, you know the names and titles, they don’t have clear lines of entirety they don’t have clear lines of responsibility there are people who are told that they are in charge of the website but they aren’t really.

Paul: Yeah.

Gerry: You Know, because if some powerful force within the organization says I want my own site on a sub-site or I want it done this way, you basically have to because, you know… the web has not a… kind of earned itself up the table of management and that is a particularly dangerous scenario to be in the larger the organization becomes, because you know… I was saying earlier the Web is… a Website is really a series of tasks and there are thousands of tasks within an organization potentially, most of them minor but I count the tiny tasks.

Paul: Yeah.

Gerry: But there is very few top tasks that are critically important to the functioning of the website and what I find is large things, they are kind of being nibbled to death by the tiny things.

Paul: Yeah, I know completely what you mean that makes a lot of sense, so how do you… I mean how do you deal with that problem. If you’re working within a large organization, maybe you’re the person that’s responsible for the website supposedly, but you don’t have that level of power. I mean what’s the solution.

Gerry: Paul it’s evidence, evidence, evidence.

Paul: Right.

Gerry: And one of the core realizations or the big breakthroughs I had… and I don’t know when I had it… you know, like most breakthroughs it was probably as a result discovering something else, somebody else was doing or you know an accidental process but… um… it was that everything affects everything else and people think if I add a piece of content, if I add a web page, if I you know… It’s just another page… its not… it’s going to do something positive and it’s not going to do anything negative and the breakthrough I had was showing cause and effect, that it kind of… yeah a low-level task content connected with it can every time you add a new piece of content you at least added one link to the architecture.

Paul: Yeah.

Gerry: You at least added one link and you added one more search result that comes true and each one of those links and each one of those search results is like another sign post that can send somebody in the wrong direction.

Paul: Yeah.

Gerry: if they’re trying to do something important and each piece of old content and link has got to be managed. Because if it’s not managed, it will go out of date or loop is relevance and if it stays on it will create even more damage. So I found that getting people to believe that everything you do has three impacts. It impacts the navigation, it impacts the search, and it impacts the manageability of the website, but also that small task and small content has every bit of chance to impact the efficiency of a
top task and one of the best examples out of that is working… I did… I haven’t worked so to speak directly with Microsoft Office, I’ve done a lot of work with Microsoft Websites over the years but a lot of Microsoft Office people have been at my classes and workshops and and stuff like that and they… they… uh, were kind of coming to this approach, you know they were coming from a number of different backgrounds, but you know… I think I nudged them along the way to this concept of top-task management and they’ve had a lot of success because of it, certainly the last six or twelve months and one of the examples that came from Excel was hundreds of thousands of people were coming every week or every month looking up how to add or to sum numbers uh, in Excel. Basic Task hundreds of thousands of people and hundreds of people would want to know how to do the in sum function which is a very complicated mathematical function so people would search in the excel website or either search in excel itself and often times the search Add or Sum Numbers and maybe the third or fourth result or maybe the fifth or sixth would be the in sum function and very significant numbers that people would actually click on that because it looked like sum but it had nothing to do with Summing or Adding Numbers. So excel realized, and this was happening in loads of areas like people wanted to print, Address Labels so they would end up some of them, thousands of them, literally tens of thousands of them clicking on the address function and this was just in one tiny area so what they did ultimately to solve this problem is they got rid of all the function pages and they put them all together under a page called Mats functions so when you searched in Excel anymore for Sum or Add or Print Address Labels you never found any address or in-sum functions but they really made that, you know, sum numbers was the top result. So what happened was people were now finding the top task and were not in anyway getting confused that a search result, a kind of looking a bit like sum numbers, that you know, they might click on and as result of that there, and other such initiatives for the first time in many, many years their customer satisfaction figures significantly started to grow because they made it easier for people to do the most important things and more difficult to do the least important things because often the least important things have a kind of neither words or connections that somehow could confuse someone into thinking that Oh I’m actually a top task when the reality is they’re not.

Paul: Hmmm… I mean it reminds very much of the book, Laws of Simplicity that talk about, you know, the need to remove and to simplify and to hide away those more minor tasks, and I mean that’s the thing that strikes me quite a lot. Organizations don’t have really have really anybody who is responsible for removing content.

Gerry: No, No, and see if you are measuring so, we’ve created a number of processes or methodologies, one connected way, identifying your top task in a defensible manner, but the other is to measure the efficiency of the top task and if you can show as, as, as, excel we’re ultimately able to show that a minor task actually impacts a top task. That this page may have two people that are satisfied with it but it has two-hundred people that are annoyed with it. So your measuring, satisfaction and dissatisfaction but your showing how because people say it’s only another page it’s only another update, why do I have to update but if you can somehow show some sort of impact that this content is having on something that is critically important to the functioning of the organization like a book of life. I think every website has a Book of Life, every website has a Book of Room It just doesn’t know it, you know… but every website has it’s… what I call, it’s super-tasks and we’ve done work with these um… agencies that are supposed to help international, or national agencies that are supposed to help grow and export and we did it in four of five different countries for four… you know… coincidently four or five national agencies, one in Scandinavia, one in the U.K., one in Ireland and one another country and the overwhelming top task was Am I eligible for funding? these companies had wanted to grow and export, and their first and foremost thing was I’m thinking of taking on a new marketing manager for the German market, can you give me any help funding?

Paul: Hmm…

Gerry: Number 1, funding and support. So there was this overwhelming super-task that came up but if you looked at these funding agencies websites the ability to find and discover the answer to the question, Am I eligible? was extraordinarily difficult, just like on many university websites today the ability to find a course to find a subject.

Paul: Yeah. [chuckling...]

Gerry: And wouldn’t you think Paul that’s an absolute no brainer.

Paul: Yeah, I know it just amazes me, you know I did a talk quite recently called, The 10 Harsh Truths about institutional websites. and talking to HE Sector and I just went on and on about the course finder and the fact that you cant find this thing and the fact as well, the other thing that really interests me as they’ve taken to calling their courses programs now, which is a term that nobody knows except internally within their organizations… it’s very bizarre.

Gerry: And Actually you just reminded me, I downloaded your… you did a bit of a report on that didn’t ya.

Paul: Yes, Yes.

Gerry: I have that in my folder to read so if you see a new thinking coming up over the next, I’d definitely cork it because it some I mean it’s extraordinary but I think in ten or fifteen years we laugh and say, it didn’t even… I mean it was so obvious how come for ten years they didn’t do it and I think it’s always internal pressures.

Paul: Yeah…

Gerry: You look on all these e-grads and schools and they don’t want too actually. I’ve heard people say… senior managers in universities say it shouldn’t be easy let them… you know… let them be hassled…

Paul: [laughing]

Gerry: Literally… It’s extraordinarily and they’ll pay the price.

Paul: Yeah

Gerry: For That, because I think at core a lot of this Paul has to do with… the web reflects a new society where customers are in control, much more in charge and as I say on the web the customer isn’t king the customer is dictator.

Paul: Hmm… Yeah

Gerry: and if you don’t meet, if you make it difficult for the customer, they’ll leave… they’ll just go somewhere else…

Paul: Yeah.

Gerry: and it really doesn’t matter how many many hundreds of years your around or if they’re really really that if your Oxford if your a few of these absoulutly super brands you know that have extrodinarly pulling power but most organizations are not they’re not in the super league of brands, they’re down in the preparatory league or in the championship and if they piss off the customer they lose the customer.

Paul: Yeah, yeah completely. What I like about this whole thing you’re talking about with top tasks is that it can apply to any size site. You know it doesn’t matter what site your working on, there are top you know kind of user tasks that people are wanting to complete. What I’m quite interested in is how you go about working out and defining what those top tasks are. What’s important and what’s not? What kind of methodology do you use?

Gerry: Ok, good question. Basically something I’ve evolved over the last 7 or 8, 9 nears. It begins where you say, let’s look at everything that exists connected with this website from the point of view of words right. A nice starting point is often the H was that index, if it doesn’t you take level 1 and level 2 of the architecture so you begin to dump all this stuff into a spreadsheet right, you know we’ve got a number of columns but at a basic level it’s a single spreadsheet, right? You’d also look at search terms, you’d look at most visited pages, you’d look at help desk inquires, you’d look at competitor websites. You know we did a big project for NHS Choices and where we went there was we also went out to the Google AdWords tool because you know, where there’s a lot of public search according for these tasks you can often discover how people are searching, not just for your website but searching the web in general for this sort of stuff. So there’s a broad sweeping course, now usually this takes 6 weeks to do.

Paul: mhm

Gerry: Initially you’d start off, you’d have this massive list of stuff and there’d be loads of duplicates and you know when we did it for NHS there was, we’d have come up with phrases like you know, women, women’s health, health of women, and stuff like that and book an appointment, and woman’s health and health of woman and just appointment reminders, and all sorts of almost identical, semi-identical ETC.

Paul: Right. Yeah.

Gerry: Gradually, we’ve developed this intricate process where we iterate it down and things that you want to get rid of are organizational unit’s needs, the tool needs. So we’ve done a lot of work recently for large IT companies, big, big American IT companies and they love their tool needs. So it might be the sunshine finder, crazy needs you know?

Paul: haha

Gerry: You know what I mean, if you absolutely didn’t know, you wouldn’t have a clue what it did.

Paul: yeah.

Gerry: So what we’d say is What does the tool do? and that’s an extremely difficult process for a lot of people to actually deal with because they’re so used to saying well it’s The Bla, Bla Tube or it’s The Bla, Bla unit of the organization. So we force them to say, no, no, no what does it do? What can the customer do here? and sometimes there’s two or three discrete tasks.

Paul: Yeah.

Gerry: So we get rid of all sorts of organizational names, tool names, and we bring it down to actually task needs. So with the NHS Choice it was Book an Appointment Online, Basic Facts about a Disease and Condition but there was one super task that emerged and we got this about 2 ½ thousand people voted. We’ve got this technique which shouldn’t work right.

Paul: [chuckling]

Gerry: But was discovered by accident and literally what we do is we bring the list down to one-hundred or less.

Paul: mhm

Gerry: Well, found over the years and tested at all sorts of levels but found at a hundred or less, somewhere in between 70-100 and we literally give that list to people in an online environment.

Paul: Can I ask who you’re giving it to? Are you giving it to internal stakeholders or users?

Gerry: Good Question. We give it to both but we give it separately.

Paul: Ok.

Gerry: So we give it to both groups but separately right. We made sure with NHS Choices that we got the general public, you know we got an appropriate proportion of the target audience. So Nurses, Carers, People from North of England, South of England, this is NHS Choices who actually only deals with England, it doesn’t really deal with Whales, Scotland, and Northern Ireland so it was the English Population. So you need to be very, very careful that you get a representative sample of your population because otherwise this is a journey of facts not opinion right? So you need to get a minimum of about 400 people to vote but NHS Choices we got thousands, right?

So basically to get this long list, right. If you talk to any professional survey company and we’ve had some of the biggest survey corporations in the world literally try to go to senior management in big organizations to stop us. Because, they might have been scared in some degree of us getting in on their account.

Paul: Yeah.

Gerry: But, then what they said was this won’t work. There’s forty years of research that says this won’t work but we’ve got 70,000 people in fifteen countries and loads and loads of good, solid revenue deliverable results that shows that it does work. This big long list and I can only chose the five most important to them.

Paul: Ok.

Gerry: and then they have to vote.

Paul: Right

Gerry: They’ll choose randomly, but we don’t. We don’t even give them the list alphabetically we give the list randomly which makes it even harder.

Paul: Ok.

Gerry: But the model of how this works. Someone once said to me it’s a bit like the cocktail party model in psychology. The story of the cocktail party is you’re at a cocktail party there’s loads of loud noise and you hear your name being spoken from the other side of the room. Now, you didn’t hear anything from the other side of the room until you heard your name.

Paul: Yeah.

Gerry: And I think what happens is why this works, you come to a website already with your tasks.

Paul: hmm

Gerry: So, you’re scanning this list and even though you don’t know it you already have your top tasks so what happens is, what really, really matters to you jumps out from that list.

Paul: Yeah.

Gerry: and what doesn’t matter doesn’t jump out. Now, when we got people to vote here is the classic model of what happens. If we’ve got 100 things on the list and we’ve done this universities, business, financial. Typically what will happen is 5 tasks will get 25% of the vote.

Paul: and why is that?

Gerry: They’ll get And this happens again, and again, and again whether it’s students, old people, young people, Americans, Doctors, Engineers, people going on holiday, right? These same patterns keep coming up again, and again, and again. So five tasks will get 25% of the vote and the bottom 50 tasks will get 25% of the vote so the top 5 tasks will get as much of the vote as the bottom 50.

Paul: Yeah.

Gerry: In most situations.

Paul: Right.

Gerry: so that gives tremendous clarity. Now the top task might have a vote of 2 ½ thousand, right. So the number one task. So people have voted 5, 4, 3, 2, 1.

Paul: Right.

Gerry: The bottom task might have a vote of seven.

Paul: Right [chucking] yeah

Gerry: There’s a big so that gives you and the list then becomes a league table. The list is very powerful because now you’ve got a kind of the tasks within your organization, right. That everyone has contributed too, so you’ve made sure that everyone got their say and then they all signed off on the task list and then they got this priority list and from that you can start building the narchitecture. So what we do then is we’d start building the narchitecture and all the classification downwards from the top tasks.

Paul: Yeah.

Gerry: So, you’d be arc and we’d put in some rules and say you can only create new classes within the first 20 tasks.

Paul: Right.

Gerry: So that you cannot introduce a new architecture a new classification below the twentieth.

Paul: Right.

Gerry: So what it does is it creates an architecture based on the top level tasks.

Paul: Right Yeah.

Gerry: And forces the lower level tasks into that architecture. Some of them won’t fit but as I say it’s tough in the tail.

Paul: Yeah. So you’d almost remove those lower tasks.

Gerry: Sometimes you would. Now if they have to stay they would end up being at level three or level four or level five of the classification.

Paul: Yeah.

Gerry: They’re forced down. They are either forced out of the environment or they are definitely forced way down the architecture and the architecture becomes architected from the top-tasks point of view.

Paul: All right. That’s so interesting and I think that you know that kind of approach could even be applied on a smaller scale to you know, cheaper budget websites that maybe don’t have the kind of budget that you’ve been talking about but I think that principal of identifying those top-tasks and prioritizing them is just so important and so often doesn’t happen. I mean my impression is that so many organizations go What do we want to say? you know, What material have we already got produced let’s shove that online and they’re not approaching it at all from the kind of user prospective, the user tasks or what tasks the user is wanting to complete. So yeah, absolutely brilliant. Before we wrap this up I just want to change direction entirely on you just for a second because normally every time you post something I sit there and I find myself nodding in agreement and agreeing with everything you write. And then recently, you wrote a post that hurt me to the core Gerry. [Chuckling] Well it didn’t really. I didn’t disagree with it actually but I wanted to bring it up. You wrote a post, The best websites are ugly and it felt like I was listening to Jacob Neilson being channeled through you. Um So I thought tell us about that and what spurred that particular post.

Gerry: Yeah and isn’t it interesting that we talk about this just as IKEA has announced their change of font.

Paul: Yes!

Gerry: And I think what it is, is it’s almost to shake up the world of design and say we are much too concerned with how the website looks, right? Of course it’s important but every time when I do talk to communicator’s or designers or whatever they’re in love with their website. It’s like it’s something very sensitive and the customer doesn’t care nearly as much about it as we think they do. I was reading today, this designer was almost crying about Ikea saying, They are going to ruin everything they’ve done since the 1940s it’s going to be ruined. They’ve destroyed their brand and you got to say Get Real. Ikea’s are successful not because of a font. They’re successful because they make affordable stylish furniture, you know.

Paul: Yeah.

Gerry: And it kind of I use that word ugly not really meaning but kind of saying, Get Real. What makes the website successful is the craigslist’s or the YouTube’s. Have you noticed that most of them started off extremely ugly. Extremely basic but now as they mature and as they go into maturity it’s a bit like the Ford T as we get all these usability things sorted ETC. We will move into a world where we’re still probably 5-10 years away from it. The sense of the small things have become very-very important.

Paul: Yeah.

Gerry: But Right Now, Right Now we need to make the website work. We need to the get the customer in and out as quickly as possible. We need to make it as simple as possible and we need to be useful. And too many in the design world, they are not focused on use. They’re focused on You know you can almost see they’re not really being designed for the customers. They’re being designed for peers within the design community.

Paul: Mhm.

Gerry: You Know, to win a awards which is almost the worst thing you could do for a good website. How many great websites have ever won an award?

Paul: Yeah, no it’s a very fair comment. And you know I come from a design background and design is extremely important to me but, I fully except what you’re saying in you can’t put the cart before the horse. You need to get the usability the user experience right, and then you can add on you know the design comes afterwards. Sometimes you spend so much time tinkering with the ascetics of the site while there are major usability problems that need addressing first. You know design I believe very passionately that design has this very powerful emotional connection with people but, you know, you can connect with people on an emotional level but if they cannot use your site then that’s a waste of time. That sounds like the kind of thing you’re getting at.

Gerry: It sounds and Paul I think you know you are. We’ve got to bridge the gap or break down the barriers that say design is visual.

Paul: Yeah. Oh Yeah.

Gerry: You know design is you know, Whatcha call the guy who does the wonderful vacuumed cleaner Dyson.

Paul: Yeah.

Gerry: You Know, he makes beautiful products doesn’t he?

Paul: Mhm!

Gerry: And he came out there about six months ago, he says we gotta, I was really complaining about how in England manufacturing and design. You know was really championing design and how so much of it you know manufacturing shops and the great engineers and designers were disappearing in England. But he saying that this visual design is a 20th century or a mid 20th century conceit. Great designers have been hijacked almost by surface design and that you Paul, everything you do why should design be separated from usability? Why should it be?

Paul: No Completely.

Gerry: Everything you do and everything I’ve read and seen about you, you’re as concerned about usability.

Paul: Mhm.

Gerry: As the designer should be just as concerned about the use of the product as with the look of the product. Why the separation. So we’re in this phase now of the web, it’s like the early days of car manufacturing or whatever. It gotta bloody work.

Paul: [chuckling]

Gerry: Because, the early cars you almost had to have an engineer with you.

Paul: Yeah.

Gerry: You Know In driving, because they broke down so much. There was so many things that went wrong and we’re kind of in this early phase of explosion. The bloody thing gotta work.

Paul: Yeah.

Gerry: and we love Craigslist, and we love YouTube’s and Twitters because they were actually useful and they worked but I think in a way it’s bringing design. I think design was hijacked by clever physiologists.

Paul: Yeah.

Gerry: That said it looks beautiful pay us more.

Paul: [chucking] You Scenic, you. [chuckling]

Gerry: Well, I had a very interesting conversation with, this may be rambling on a bit. I was getting me haircut this morning. Kind of a traditional barbershop I was walking by and said, God I need to get my haircut. I was sitting out, we just sat there chatting and the barber says to me, I always talk about the weather in Ireland first, and then we were just talking about the recession because Ireland got really hit hard.

Paul: Yeah.

Gerry: and he says I think that the recession will probably be the best thing that ever happened to Ireland because he says You can see now that prices are really beginning to come down and people are beginning to become much more focused on value. And he says, You Know, The Irish consumer is very brand loyal. If it’s kind of not advertised on TV, they don’t want to buy it right. Aldi and Lidel have had a very hard time getting hold in Ireland but now they’re beginning to really catch, a lot more people visit them and he says IKEA have just started ETC. I think what he said was extremely important and you know what, in that world you almost say the lack of sophistication = brand loyalty. Because the Irish customer was not that sophisticated. I mean as much as I love Ireland and everything like that Ireland has a kind of modernized in the last 20-30 years in some ways we were extraordinarily modern in literature ETC.

But in our buying habits I think we were exploited by the big brands because if you advertised in Ireland you could, 20% more than what you were getting in the UK for the exact same product. That has been known for many years but yet, Irish customers continue to buy the brand because the brand was advertised and I think what has happened in Ireland with the recession and with the web is that the Irish customer and other customers have a kind of woken up and says, No you cannot charge me an extra 20% more because it’s just a brand. In the since that the brand became the advertising.

Paul: Yeah.

Gerry: The Brand needs to return to, it’s a beautiful product, it’s got great materials, it’s well engineered. The brand is more. So me and you, our job is not the surface of the website it’s the whole website.

Paul: Yeah, Yeah. I completely agree with that. And I think that’s probably a really good place for us to stop even though I could continue this interview forever. Thank you much Gerry for coming on the show that was really interesting stuff and I think it kind of gives a different perspective on things because the size of projects you work and because the type of projects you work on. I think it’s been very valuable. Thank you very much for your time.

Gerry: You’re very welcome Paul, Thank You.

Thanks goes to Nick Frandsen for transcribing this interview.

Back to top

Listeners feedback:

Content is King

Colin James Firth, Head of Design and Digital at Citypress PR agency shares his thoughts on the role of content.

If ‘content is king’ then the designer is like the King’s tailor – there to make the King look fabulous without taking any of the limelight for themself.

That doesn’t mean, however, that the designer’s job is any less important. How seriously would people take the King if his suit was poorly made? It has to look good.

I’ve been a designer for 15 years and I started out with a very unhealthy obsession for aesthetics. It was always about how good, or trendy, or innovative a design was. Making it readable was just an irritating request from the copywriters.

Thankfully, I soon realised just how important content is and began to change the way I worked to suit. And quickly went from being obsessed with immitating every fashionable design going to really thinking about how messages should be presented. Which is pretty important, really, because the message is usually conveniently encapsulated in the copy – which should make it a lot easier to choose the right design style.

It sounds obvious now.

But I still see bucket loads of designs that don’t do the content any justice because they ignore it and go off and do their own thing.

They end up giving conflicting messages – weakening the overall effectiveness of the piece. I’ve seen many ill-conceived designs that probably damaged the brand that the designer should have been going out of their way to enhance.

The problem is, a lot of designers have a gaping hole in their CV that leads to this misunderstanding about the importance of content. They’re missing experience of working with copywriters.

I’ve been really lucky to have worked with loads of copywriters over the years. There’s one who I’m still in touch today – who incidentally gave me a lift to my first interview for a design job.

He’s very talented and I learned a great deal from him. He’s very passionate about words – and grammar and punctuation – and it he had a positive influence on me very early on in my career.

These days I’m part of a small – and very active – design team supporting a very large and knowledgeable group of content people. We are a PR agency, so you’d expect a lot of writers! But the crucial thing for us is as an agency we seriously care about the quality of the content we produce for and on behalf of our clients. It can’t help but make a positive influence on our designs.

So what can a copywriter teach a designer? Actually, a lot. A good writer will have done their research for a start. So the copy they’ve written should be looked at as an integral part of the design brief.

It should tell you in black and white how you should approach the design – regardless of whether it’s online or for print.

Copywriters also tend to know how to spell and, vitally, how to use grammer properly. If you’re a designer and you doodled through English lessons at school, you should do all you can to catch up on your grammar and spelling. A miss-placed apostrope or hyphen could change the entire meaning of your piece. At which point you’ve failed as a designer.

It also makes proof reading much easier because you’ll actually know what to look for. Trust me when I say copywriters think dimly of designers who drop errors into headlines and don’t clean them up before passing the design back for checking. Learn from copywriters and you will end up with fewer mistakes in your designs as a result.

Even so, after all these years, I still find it a challenge to get the best out of the copy – maybe it’s the pressure of not mucking up the message. But I’m comfortable with that: setting high standards for the design with content taking the lead just adds to the challenge. Which adds to the fun. And design should be fun and challenging.

I really hope that gives some comfort to any designers who are afraid they’ll relinquish some kind of power by embracing content.

Copywriters aren’t totally perfect though. The big thing is that they tend not to be able to visualise their copy in situ while they are writing it. Certainly not in the same way a designer can.

I’ve often been frustrated that copy isn’t fit for the purpose of the design (the writers here do a great job by the way).

The classic one we’ve all had is when there’s too much copy. But there are new challenges – the online world is creating new rules for writers all the time; keyword optimisation and meta tagging are relatively new concepts for copywriters, as is the importance of micro-copy to usability.

Designers have a responsibility to appropriately present the message, but copywriters should be learning too. And to that end, if you’re going to learn from a copywriter, the learning process should be as mutually beneficial as possible.

Don’t expect too much, though. Copywriters are just wired differently and their primary focus should still be on what they’re absolutely best at – figuring out the right message and skillfully organising the words.

So, as a designer you should take the lead. The ultimate responsibility for the message carrier – which is your design – lies with you.

So, as well as befriending a good copywriter, what else can you do?

Read. Read everything. Read the free newspaper in the morning, the signs and ads on the bus. Or the back of your coffee cup. Read stuff you wouldn’t otherwise read – magazines and ads that aren’t aimed at you are brilliant at widening your design and copy horizons. And if you haven’t go it, get the internet on your phone. The hour I spend travelling to work and back each day is usually spent reading blogs and news stories, and following random links on Twitter – just out of curiosity. If you don’t travel far to work, get up half an hour earlier each day and grab a coffee. Reading lots will hard-wire correct spelling and grammar into your brain and get you used to seeing words in context. You’ll develop an instinct for what works – in terms of copy and designs. And you’ll learn mega amounts of other stuff as an added bonus.

Content really is the King – and it’s what your audience are REALLY interested in. Embrace it, tailor your designs to fit, and enjoy seeing the quality of your work improve immeasurably.

Review of Prezi

Aaron Rester reviews Prezi:

Hello Paul and Marcus and the rest of Boagworld. My name is Aaron Rester and I’m a Manager of Electronic Communications
at the University of Chicago [?] School and a freelance designer and web professional. You can find me online at
aaronrester.net and today I’d like to share with you a review of a web app called
Prezi.com bills itself as a tool to “create astonishing presentations live and on the web.”
I had a chance to use Prezi recently for a presentation and I have to say I could not be more impressed with the product.

Like PowerPoint, Prezi is intended to help you communicate the key points of your presentation through visual reinforcement.
Unlike PowerPoint though, Prezi has jettisoned the boring, linear, bullet-point structure we’ve come to expect from such programs
and replaces it with a user experience in which the viewer feels as though they’re flying up above a giant map of your presentation
and then zooming down into the points that you’re trying to make. You can even change the structure of the presentation on the fly
in order to react to your audience’s questions. It really has to be seen to be believed.

Prezi’s user interface for creating presentations is equally as innovative as the interface for displaying them. Instead of a
standard toolbar, the tool menu items are presented as bubbles attached to a larger bubble that rotates when clicked upon. When
you place an object onto your map, a set of concentric circles is overlayed and each circle does something different: One allows
you to drag the object through 2-D space, one allows to resize and one allows you to rotate. It is, for me at least, a brand new
way of thinking about how to interact with content in a web app.

I do have a few quibbles with the product of course. While you can change the basic look of your presentation, you can’t choose
custom colors or fonts, or change the shape of your frames. A great deal of precision is also needed to select multiple objects in
editing mode, which sometimes means performing the same action 3 or 4 times before you get it right. Also, while you can embed many
different types of media from still images to video, there’s no way to embed links to a live website – which would make for a much more
dynamic presentation than simple screenshots of a website.

Prezi should prove useful to designers in several ways. Of course if you give presentations or make client pitches, the benefits of
Prezi’s ease of production and its added ‘Wow’ factor will hook you right away. But the unique interface should also prove inspirational
to designers as it illustrates the power of rethinking design elements that we tend to take for granted, such as navigational bars.

Finally, it should be useful to information architects as a mind-mapping application. I’ve tried several such applications over the years
and Prezi beats them all for ease of use and actually getting your ideas down on screen and illustrating the relationship between them.

Like most web apps there’s a three-tier pricing scheme and the Free version includes the Prezi logo on all of your presentations, while
the next level removes that and provides more storage. And the most expensive level allows you to edit your presentations offline. All
versions inlude the ability to play presentations offline. The Free version is definitely worth a trial run to see if it meets your needs.

So that’s it. The website is Prezi.com and I hope this review proved useful. Keep up the great work Paul
and Marcus and I’ll see you all on Boagworld.

Thanks to Simon Hamp for this transcription

Back to top

8 ways we increased ecommerce sales by 10,000%

Discover how Headscape increased the sales of Wiltshire Farm Foods by 10,000% and how you can do the same for your site.

A 10,000% increase in sales over 5 years. Sounds incredible doesn’t it. Just to make that an even more incredible, their average customer is in their 80s! Who said the elderly don’t use the internet.

When we started working with Wiltshire Farm Foods their monthly revenue was a 100th of what it is today.

Of course in reality that success was not down entirely to us. Matt Curry, our client at Wiltshire Farm Foods has put his heart and soul into that website and as I say in Chapter one of the Website Owners Manual, it is the site champion who makes or breaks a site.

The organisation has recognised the importance and power of the web for their business and continually invested in it both for development and also in site promotion. If they had not had the foresight to do that then the site would have failed.

So what do I put the sites success down to? Well, honestly that is hard to say. There are so many factors. However below are 8 things that have without a doubt made an enormous difference.

1. Remove clutter

WFF Product Menu

Too many ecommerce websites are overwhelming. Everything is screaming for the users attention. There are offers, deals and recommended products wherever the user turns. Amongst all of this confusion it is hard to find what you want.

Amazon is like this and so we all naturally presume it must be right. However, one of the first conclusions we came to when working on Wiltshire Farm Foods is that they are not Amazon. Nobody is. You cannot presume that what works for one will work for all.

The emphasis of the Wiltshire Farm Foods website was on helping users find and buy the products they wanted. It is not in anyone interest to overwhelm them with stuff that only we wanted them to buy. It has to be the customer first.

This meant simplifying the site. With so much content shouting for attention, users could not find anything. We had to remove distraction and focus them on key tasks.

Take for example the site’s navigation. We actually hide away some of the ranges offered by Wiltshire Farm Foods. Insanity you might think. Surely this made it harder for users to find what they want? Admittedly for a small minority it did. However, hiding the less popular ranges (like soup) we could highlight the ranges that accounted for the vast majority of sales.

WFF Product Listing

The same was true for product listings. Some users were interested in a lot of different information from dietary content to customer ratings. However, this additional information made life harder for the mainstream users who were only interested in a photo, description and price.

We therefore decided to move all of this additional information on to the product details page. That way it was accessible for those who wanted it without distracting the majority.

WFF Shopping basket

The final area we significantly simplified was the shopping basket and checkout process. As I explained in my post on ecommerce lies, once the user has made the decision to purchase you need to remove all distractions.

The shopping basket is not the time to up-sell or cross selling. It’s not even the time to provide a navigation bar to other products. At this stage you want the user to do one thing and one thing only, proceed to checkout.

Talking of the shopping cart, we also focused heavily on getting it to stand out on the page.

2. Make sure the shopping cart stands out

Too many websites hide the shopping cart away. However, this is a crucial step in shopping and the first of the checkout process. In affect the shopping cart is an ecommerce websites primary call to action.

With this in mind we wanted to make the cart as prominent as possible. We achieved this in three ways:

  • We made the shopping basket button visually different from the rest of the site using colour
  • When items were added to the basket it was visually updated (see providing visual feedback video)
  • We tethered the basket summary to the top of the screen so that it would always be visible even when the user scrolled (see below)

As you can see from the video below, the tethering proved particularly effective and makes the call to action obvious at all times.

3. Provide visual feedback

One of the primary questions in the mind of users when interacting with a system like an ecommerce website is “did I do that right?”

Whether it is adding an item to the basket or filling in a login and password, users are concerned that they are doing things wrong. This is particularly true with a more elderly audience who have not grown up using computers.

It is therefore important to reassure users as they progress through the site. This can be achieved by providing visual feedback when the user takes an action.

For example on the Wiltshire Farm Foods website when an item is added to the basket the user gets multiple types of feedback to reassure them the item has been added:

  • The photo of the item is highlighted
  • The ‘add to basket’ button updates
  • The image of the item visually moves towards the basket
  • The basket itself updates

As you can see from the video below, the user is in no doubt that the item has been added.

However, the visual feedback does not stop at the basket. When the user is confronted with a form they are clearly shown what fields are required, and which have been completed correctly or incorrectly. This information is updated without the need for page refresh.

Form field feedback

4. The bigger the better

An image can say a thousand words. It is therefore unsurprisingly that the product shots on an ecommerce site are massively important. Even if your audience are not the elderly with failing vision, it is still important to have nice, big, clear shots of your products.

In the case of Wiltshire Farm Foods we have taken this principle to the extreme.

As we saw earlier the product list is essentially a grid of images with the addition of some basic product information. The image sells the meal in a way words never could, and the grid allows us to have large images. However, we did not stop there.

As you can see in the video below, clicking on a product listing displays an even bigger image in the product details. We also allow users to click on this larger photo and display an even bigger version that expands to fill the width of the page. This leaves the user in no doubt about what they are getting.

Of course this is dependant on having decent shots of the product. If you can only invest in a single thing for your ecommerce site this would be it. Spend money on getting the best photography you can. Its worth every penny.

5. Make buttons and links obvious

A continuation of the ‘bigger is better’ thinking can also be applied to buttons and links. Admittedly this might be exaggerated by the Wiltshire Farm Foods audience, but in my years of user testing I am constantly amazed how often users fail to spot important links and buttons.

You will therefore notice how ridiculously big some of the links and buttons on WFF are. However, size isn’t everything (no innuendo intended).

We also gave a lot of attention to appearance and wording too. For example, notice in the image below how the link looks like a link. Also we did not rely on the link alone because the wording of the link doesn’t communicate the action. We therefore added a button that communicates how clicking it will allow the user to ‘view all of our beef meals’.

Link to Meal catagory

The descriptive nature of buttons can also be seen elsewhere on the site. We are very conscious that users do not always read copy explaining buttons and so the button itself needs to communicate all the information required.

Take for example the image below. If all you read was the two buttons you would know exactly what choice was available. The surrounding text is entirely optional.

Example buttons

6. Always be there to help

An ecommerce transaction raises a lot of questions in the minds of users:

  • Is delivery free?
  • What if I don’t like the product?
  • Is my credit card information secure?

In addition there are questions about the site itself and how to use it.

Surprisingly many ecommerce websites seem reluctant to help their customers. Delivery and return policies are buried. Reassurance about security is limited to a tiny badge or padlock. And most importantly you have to search high and low for a phone number.

We were determined to address these problems on the WFF website. In the end we settled on three approaches:

1. The one stop solution

Our first move was to bring together all help into a single section of the site that was prominently displayed in the navigation bar. This avoided the user having to hunt around for different pieces of information.

We then looked at the enquiries received by WFF customer support and used these to identify the top issues. These where then prioritised and presented on the help homepage.

As you can see the top question was “how do I contact you” so we prominently featured the telephone number. This was then followed by questions about ordering and the website.

Help Section

2. The getting started guide

We also took an idea from the video games industry and provided users with a tutorial. However, the idea of the tutorial (which we called a getting started guide) was to guide users through their first transaction.

This is displayed prominently on the homepage and gives users who are overwhelmed by the site a starting point.

Get Started Content Area

3. Context sensitive help

Finally, we also wanted to provide context sensitive help throughout the purchase process. These are small pieces of microcopy found throughout the site nudging users in the right direction.

Example of context sensitive help

7. Handle errors gracefully

No matter how well designed your site or how much help you provide, things will inevitably go wrong.

If you do not want to lose the sale, you must handle the error gracefully and reassure the user they can still continue.

This is particularly important when working with the elderly audience found on Wiltshire Farm Foods. However, it is always wise to give users as much help as possible and not make assumptions about their abilities.

Below are a couple of examples of how we handle problems on the site.

Error message

The first example is an error message that appears when the user fails to login. There are several such messages across the website. However, they all have two characteristics in common:

  • The message is highly visible – This is achieved either by strong visual branding (as above) or by positioning the message next to field being edited (as in context sensitive help) .

  • The message tells the user what to do
    – It is important that messages clearly communicate how the user can overcome the problem.

The example above is probably a little wordy for most websites. Fortunately, our user testing has shown that a more elderly demographic actually reads instructional text! We can therefore take some liberties.

Example of empty search results

The second example of an error message appears when the user has entered a search term that returns no results. The danger in this situation is that users will conclude the site does not have whatever it was they searched for and so leave.

In reality there are number of reasons why no results might be returned. In such situations provide some guidance on searching. We also went one step further by including a phone number in case all else fails.

8. Communicate your value add

The final lesson we have learnt from working on WFF is the importance of communicating what extra you offer customers.

The problem is that there are so much choice for consumer. How for example could an organisation like Wiltshire Farm Foods compete with such a well known brand as Tescos?

Tescos sell frozen meals and a lot more besides. They deliver to your door and have a much broader range of products (although admittedly not frozen meals).

What enables Wiltshire Farm Foods to compete is their value added service. These include:

  • Police checked delivery staff
  • The option to pay cash on delivery
  • The ability to place your next order with the driver
  • Delivery staff will even unpack meals and place them in your freezer

When you are trying to each an elderly audience, these kinds of extra services are a real selling point.

Of course, these USPs are no good if users are unaware of them so considerable effort has been put into clearly communicating these on the site. In fact we are in the process of doing even more work in this area.

What are your USPs and are you clearly communicating them on your site?

Image showing WFFs complete service

Is that all?

So if you follow these 8 guidelines will you increase your sales by 10,000%? The answer is probably not.

In reality there is a lot more that affects the success of an ecommerce business than its website. There is the ongoing communications, customer service, fulfilment, and marketing to name but four.

The 10,000% increase makes a good title for a blog post! However, the percentage growth is not really the point. What matters is that by following the advice here you will be guaranteed to see growth and that is what matters.

However, if I could leave you just a single thought it would be this. Wiltshire Farm Foods looks a million miles away from the busyness of Amazon and indeed many other ecommerce websites. Do not just blindly follow the crowd (or even the advice in this post). Instead learn what your users need and give it to them. It really is that simple.

Of course, you might need some help doing that, but even the answer to that is simple. Give Headscape a call ;-)

192. Next Generation

On this week’s show: We have interviews with two great upcoming web designers (Jamie Rumblelow and James Proud) as well as a new segment called Elevator Pitch.

Play

Download this show.

Launch our podcast player

Housekeeping

The Website Owners Manual is finally out this friday! To celebrate its launch, I will be running free public Consultancy Clinics on the 20th November starting at 3PM (UK time). If you would like free advice about your website or would just like to hear the advice given to others, then join the conversation via the Boagworld blog.

Back to top

News

Mockingbird

A big part of most webs projects is wireframing. A wireframe is a communication tool, a design tool and a specification tool. Without it, there can be misunderstanding and miscommunication.

I have written about wireframing before. In that post I outlined the benefits of wireframing, but I also recommended tools including something called Balsamiq.

Balsamiq is a cross platform application that allows you to quickly put together wireframes that can later be easily edited.

Although Balsamiq is a great application it does suffer from one major flaw (beyond comic sans being its default font!). Balsamiq is great for creating wireframes but is not good for sharing them.

Balsamiq saves files in its own propitiatory format and although it will allow the export of images, this does not work well for interlinked pages.

There is a plugin called Napkee that allows you to export Balsamiq as HTML and CSS. However, this is clumsy at best and still needs to be hosted somewhere.

Mockingbird

Enter Mockingbird. Mockingbird has obviously been closely modelled on Balsamiq and yet has the advantage of being an online application. It can do pretty much everything that Balsamiq can, but also allows you to share wireframes with others. You can even embed them on your own website, so others do not know you are using a third party tool.

So whether you are a web designer producing wireframes for your clients or a website owner building them for your own site, I would recommend giving mockingbird a try. Best of all its free, so there is no reason not to.

More on redesigning

Two weeks ago we featured a Web Designers Depot post entitled “Preparing and planning for a redesign.” It was a good post that focused on what clients need to do as part of a website revamp.

This week a post entitled “Redesign: When To Relaunch The Site and Best Practices” tackles a similar topic. However, what makes this one different is that it is focuses on web designers redesigning their own websites.

It is an interesting topic that certainly comes with its own unique challenges. As the author says:

How can we work on designing our clients’ websites successfully every day and then perpetually neglect our own?

The post goes on to answer this question as well as suggest ways we can avoid our own websites becoming neglected. Subjects she tackles includes:

  • Why we struggle to redesign our sites
  • Whether we should be redesigning at all
  • Finding the time to redesign
  • Planning a redesign
  • Updating your brand
  • Wireframing
  • Design
  • Development and testing

The advice is great and although this post is aimed at web designers redesigning their own sites, it has lots of good advice that applies to any website owners. Certainly worth checking out.

Run IE6, IE7, and IE8 on the Same Machine Using Windows 7 XP Mode

It’s frustrating but testing your websites is an important part of our job. To make matters worse, it is much harder to test in multiple versions of Internet Explorer than it should be.

The problem as I am sure you know, is that it is impossible to install IE6, 7, and 8 side by side under the same operating system.

One solution to the problem is IETester. This truly remarkable piece of software allows you to easily switch between different versions of IE and even provides a load of development tools similar to Firebug.

Although there is no doubt that this is an impressive application, it is not perfect. No matter how good an emulator is, it is still not the same as using the real thing. As a result I am only willing to use this for ‘in development testing’. Before launch, I would still want to test in an actual build.

In the past this would have involved running multiple operating system using Virtual Machine software such as VMware or VirtualBox. However with the arrival of Windows 7 we now have another choice.

According to a post on Sitepoint this week it is now possible to ‘Run IE6, IE7, and IE8 on the Same Machine Using Windows 7 XP Mode.’ The post explains that this miracle is possible thanks to Microsoft Virtual PC.

Virtual PC is Microsoft’s alternative to VMware and VirtualBox. It’s available as a free download for most versions of Windows. As a standalone product, it’s functional but offers fewer facilities than the competition. However, XP Mode is Virtual PC’s killer feature. It provides:

  • a fully licensed, stripped-down, virtual copy of Windows XP SP3.
  • a clever facility which integrates the guest Windows XP OS with your Windows 7 host. In effect, you can run XP applications as if they were native Windows 7 programs. Although the XP application is isolated, it can still access the host’s files and systems.

The tutorial then goes on to explain how this technology will allow you to run the three versions of IE side by side.

Whatever our role, we should all be testing websites. As a result this is an absolute must read.

How to create clear web navigation menus

Last week I found myself in the unusual position of disagreeing with Gerry McGovern. Fortunately that has quickly changed with his latest post entitled ‘How to create clear web navigation menus.’

Gerry presents four ways you can improve your navigation in his own tongue-in-cheek style:

Stick with conventions

Every year a phone directory is delivered to my home and every year it’s the same. Have they no imagination in those phone companies? I mean, come on, hasn’t A-Z been done to death at this stage? Why don’t they try Z-A for a change?

Avoid audience based navigation

We once dealt with a department of agriculture who had the following menus: Farmers, Producers, Exporters, Researchers. What if you were a farmer who was also a producer, who exported most of your produce, and who right now wanted to do some soil analysis research? Where should you click?

Be consistent

Have a consistent place for your navigation. If you use the left column, keep it there. Don’t start shifting the navigation into the center or right columns as you go deeper into the site.

Avoid quick links

“Come, little links, gather round,” said the designer to the links. And the little links gathered round, all happy and expectant.

“Well, the good news is that we think you’re very special links and because you’re so special we’re going to call you Quick Links,” said the designer.

“Quick Links!” they shouted in unison. Then a silence fell and a little voice was heard to say:
“Master designer, does that mean the other links are Slow Links?”

I am being to wonder if Gerry is loosing the plot ;-)

Back to top

Interview: The next generation

This week we are doing something a little different for our interview segment of the show. We have two great interviews with two up and coming stars of the web design scene. There is some real talent emerging and we are keen to showcase their work and passion here on the show.

Jamie Rumbelow

Paul: So, yet another interview from Future of Web Apps and this time we are talking to Jamie Rumbelow. Good to have you on the show Jamie.

Jamie: It’s great to be here, it’s unexpected and …..

Paul: … and cool

Jamie: … and very cool. It’s very cool to be here on Boagworld

Paul

Anna: Hello Anna

Paul: There we go, good. Anna likes this, so much I know. Um, yeah, so we thought we’d get you in. Um, I know nothing about you. We’ve talked a bit on Twitter

Jamie: We have

Paul: But that’s about it, so tell me a bit about yourself, your background, a bit of what you’re doing and that kinda thing

Jamie: Right well, um, well my name’s Jamie

Paul: Ok

Jamie: Jamie Rumbelow and I’m fourteen so I’m still…

Paul: Excuse me! You’re fourteen!

Jamie: Fourteen

Paul: Ok, I just wanna establish that, that’s fine

Jamie: So, I’m, I’m, I’m kind of a developer, um but not quite cos I’ve still got stuff to do…

Paul: Yeah

Jamie: Like school and…

Paul: (laughs) just GCSEs and stuff like that, yeah

Jamie: You know, um, yeah I’m trying to get my name out into the scene. I’ve been actually started to do talking, I’ve been kinda launching a ‘speaking’ career

Paul: Yeah

Jamie: So I’m hoping to follow in the footsteps of the great Paul Boag

Paul: Oh well, you know

Jamie: Um…

Paul: Don’t laugh Anna. Show respect

Jamie: Well yeah, I spoke at Tomorrow’s Web which was a conference run by a guy called Grant Bell and it was all about young people in technology

Paul: Yeah

Jamie: And Anna spoke at it too and um it was, it was really good a day, wasn’t it?

Anna: Hmmm, yeah it was really good

Jamie: So yeah, really enjoyed that, um…

Paul: Ok. So, I mean…..you’re fourteen and you’re trying to get your name known in the scene. Um, that’s quite ambitious to start that at fourteen. Why? Why, why are you so desperate to kinda get in there now?

Jamie: Well, I’ve always been quite enthusiastic and quite…..driven, um, and I really want to, you know, come out of school, come out with…….education (laughs)

Paul: Yeah that would be good

Jamie: Yeah but actually having made a name for myself and already have people knowing about me, interested in stuff I do, so that eventually, when I do actually launch as a full time career I’ll already have good grounding to work on. But it’s not just that, I want to meet cool people and I wanna do stuff like this, cos I…..you know, meeting loads of amazing, great people it’s a really really good benefit.

Paul: So, I mean, you know do you find with the…you know….as you wanna do loads of speaking stuff, you’ve set up and run your own event as well

Jamie: Yeah

Paul: So, tell us a little a bit about that actually before I go on to the next thing

Jamie: Oh well, it’s called Cambridge Geek Day, um, I had the idea …last year, in December and my mum said ‘It’s the most expensive, time consuming thing you could possibly do, why are you doing it?’ And she actually forbidded me from doing it.

Paul: (laughs) So that went well didn’t it! (laughs again)

Jamie: Yeah, so anyway, I, I hid it from behind her back, um, for ages…..and you lying to your mum, it’s really…..

Paul: That’s not good. Kids don’t lie to your parents

Jamie: Yeah exactly. But I knew….I knew that I could pull it off. Anyway I got sponsorship

Paul: Really, you managed to get sponsorship?

Jamie: Yeah. I got sponsorship from loads of really really good sponsors. I got loads of great speakers lined up and……anyway it’s all steaming ahead right now. So I… my… I woke up to 300 T-shirts being delivered to my door and my mum had no idea about it. So I just told her that I got sponsorship and she was very fine with it

Paul: Your mum is very cool, I have to say. That is impressive after she banned you

Jamie: But yeah, I think she was just worried about me cos, you know, I’ve got more important things to do.

Paul: Yeah

Jamie: So yeah (laughs) back to the point. Um, yeah so it’s a conference for developers, it’s about developery topics

Paul: Right

Jamie: And that’s kind of…because that’s what I know about, that’s what I do, I’d rather run a developer conference than a design conference, purely because…….

Paul: Yeah. And it’s the same…..specifically young people or…

Jamie: No, no, there aren’t enough young people in Cambridge

Paul: In the Cambridge area

Jamie: So, I did an internship with a company called Broader Sheet. Have you heard about them?

Paul: No I haven’t actually

Jamie: Well they’re making an intelligent news aggregator, um but they’re a small start up and they work from the Red Gate offices, have you heard of them?

Paul: Yes

Jamie: Um, so I was in the Red Gate offices and Red Gate do a start up incubator where they have loads of start-ups working within the offices and getting the food and that sort of thing. Um, and I met loads of really really cool people, really passionate, intelligent people, in Cambridge, doing start-ups stuff and being…..you know, so I thought it would be a really great opportunity to kinda capitalise on that amount of people and it’s a bit of a faff to come to London and go to Brighton and you know all the places where the conferences are held. So I thought I’d run my own one

Paul: Yeah, good for you…totally. So when’s that happening?

Jamie: November the 21st

Paul: Ok, so not long then

Jamie: No, not long at all, we haven’t started selling tickets yet but depending when this is out, if it ever is (laughs)

Paul: It will be out don’t worry

Jamie: We’ll probably be selling tickets by then. Tickets are gonna be £60

Paul: Ok

Jamie: But with that you get coffee when you’re….and biscuits and tea and stuff when you arrive and during all the breaks and you also get a two course meal for lunch. Um, and we’ve got an after party and it’s gonna be well put together and I’m making sure it’s high quality

Paul: See, I mean, that…. you gotta say is really impressive because so often I’m like, encouraging you know people to start up local groups and to get meeting up and if there’s nothing in your area then just to do something. And people always come back with ‘Oh I don’t know if I could do that’. And you think, no disrespect, but if a fourteen year old could that then you know then these guys who are web professionals should be able to do it. So, I think you’re a…..you’re actually incredibly inspiring from that point of view.

Jamie: Well, I’m honoured, thank you

Paul: (laughs) So, I mean what’s the plan? You’re gonna do your GCSEs. Are gonna go through the normal career path of GCSEs, A Levels, University? Or what, you know….have you got any thoughts on that?

Jamie: Well, I wanna do A Levels, purely because……it’s shows a certain level of intelligence, you know to have A Levels and they’re good qualifications. Um, but I’m not quite sure about Uni. Now a lot of people who are young and have already got a bit of a head start in the tech scene didn’t go to Uni, Anna included

Paul: Yeah, Anna for example, yeah

Jamie: So, I don’t know whether it would be so much benefit….educationally. As far as life skills go, maybe it would be good, so you know, be able to grow up a bit and live by yourself and that sort of thing. But I think I’d still be able to cope with that so…….my family want me to go to Uni but I don’t particularly want to

Paul: Well, you know you don’t have to make that decision yet which is helpful

Jamie: No, plenty of time

Paul: So I mean…….Ok let’s get your perspective on the web scene as it stands at the moment because you know there’s a lot of old crusty people like me that are, you know, saying what the next big thing is and what we think is important and all of the rest of it but I’m quite interested in your perspective you know…you’re gonna be…so…..let’s say you…….let’s say you went to University, so you’ve got two years of A Levels, well you’re fourteen at the moment so it’s two years until your GCSEs isn’t it

Jamie: I’m doing….I’m starting my GCSEs this year, I’m in Year 10

Paul: Right, so that is one or two years……one…two until those are taken? Let’s say two. Then another two years A Level, right? Let’s say you didn’t go to University, cos otherwise we’re getting too far ahead. So, let’s say four years time, what do you think you’re going to be doing when you come out and start work? What do you think is gonna be different?

Jamie: Well, I think the….I think the Web’s being opened up a lot more in terms of actually a platform rather than just a resource. So, I spoke about this at Tomorrow’s Web and it was talking about how the….that actually from the very beginnings of the Web it was always documents, it was always……you know just information linking to one another. No we’re starting to see things popping out from that like the Web 2.0 movement, and Google Wave, which is really cool

Paul: Don’t tell me you’ve got…….

Jamie: I’ve got a…..do you want an invite?

Paul: Yes, I flippin’ do

Jamie: Ok, I’ll send you an invite

Paul: Thank you. How come he gets a copy of Google Wave before me?! How did you manage to swing that?

Jamie: Oh, I was in the Developer Preview and…..

Paul: Ah, that’s just mean…..

Jamie: Oh and I know Bob from Huddle, he’s CTO at Huddle ….I think

Paul: God, he’s fourteen and he’s better connected than I am. That’s really irritating

Jamie: I’ll send you an invite

Paul: No more. No more of these young talented people. We’re not interviewing anymore young, talented people on the show. It’s just depressing. Anyway, sorry you were saying…..cool stuff

Jamie: So, yeah Google Wave is really cool and I don’t think it’s the end all solution to communication on the Web, definitely not. And it’s…..the Developer Preview especially was mediocre in terms of implementation, how it was written, it was buggy, the user interface was terrible, etc. Um but I can see the ideas behind it and the way it’s going forward and I really think that within a few years if we…..I think we really need to re-think how we talk and how we use the Web to communicate. Cos as I said it’s very kinda…..almost linear conversation, it’s been….you know we’ve always had bulletin boards or blogs with comments that you know…emails, all these communication platforms that we have on the Web aren’t particularly…….well they’re not particularly suited to the Web

Paul: Mmmm, and even if you ….email is like the kinda equivalent of the page-based stuff is just sending letters backwards and forwards isn’t it?

Jamie: Exactly. It’s like faxing

Paul: Instead of things like APIs and stuff like that you know you’re passing data backwards and forwards which in much more inline with Google Wave and passing….you know….chunks….packets of data of information backwards and forwards, so….

Jamie: But APIs really excite me

Paul: Oh do they?

Jamie: Yeah A) from a techie point of view cos I you know…um and also cos you can do so much with so little code, so little time and you can actually make some really cool stuff. This guy called Chris Harlman

Paul: Yeah I know Christian

Jamie: Yeah, he’s good fun

Paul: Yeah he is

Jamie: Um, he’s the …..he’s the Developer Evangelist for Yahoo I think

Paul: Yes, that correct, something like that

Jamie: And he’s been preaching YQL a lot and YQL is this um….SQL-like which is the query language that communicates databases. But YQL is like that but for the Web so you can query APIs effectively and then it all goes to Yahoo, Yahoo caches it, it will go to Yahoo servers, all that sort of thing but it’s all actually really really well thought out and well put together and his blog is all powered by YQL. So, it’s got all his presentations, all the books he’s written, all of the events he’s going to… from up coming, he’s photos from Flickr, he’s tweets from Twitter, all of his social presence is all combined into this one through a couple of YQL codes and I think it’s really cool that now we can do that. I think that we just need to start thinking about how we can use that data in different ways and just expanding that more and making that even…..

Paul: So that’s the kinda stuff you’d like to get into when you’re actually…in the…

Jamie: Yeah, maybe

Paul: Maybe?

Jamie: If I don’t…if my ambitions of being a rockstar don’t….you know…….turn out, yeah

Paul: Yeah, don’t pan out. I think you’re going down the wrong route for that, I have to say. You’re mixing with the wrong crowd if you wanna be a rockstar.

Ok well, it’s really good to talk to you Jamie and it’s good see the future of Web Design is safe, that there are people like you out there and that you’re getting stuck in now. I hope it’s a real encouragement to…..cos I know a lot of students listen to this and so it’s really good to hear that there are other young people out there getting stuck in. So, thank you very much

Jamie: Thank you

Thanks goes to Debbie-Jayne Reyes for transcribing this interview.

Also one quick note about the geek event Jamie was organising. Unfortunately this has had to be delayed. However, if you follow Jamie on his blog then you can find out when it is rescheduled.

James Proud

Paul: Ok, so joining me is James Proud from GigLocator. Good to have you on the show James.

James: Thank you for having me.

Paul: Now basically I’m doing this interview because Anna told me that you’re really cool and you talk some great stuff and I needed to get you on the show, so Anna is here too. Come on say “Hello”.

Anna: Hello.

Paul: And she’s now going to ask all the questions. Go Anna.

Anna: Oooh.

Paul: I’ll break you in. So first of all, tell us about GigLocator.

James: Sure, well GigLocator is a live music site, basically. Its completely worldwide, so whatever country, genre of music, artist and we will hopefully have all their past and upcoming gigs, and you’ll be able to easily find the tickets for the gigs so you don’t have to pay through-the-nose, for example, if you saw a gig on ticketmaster and it was £20, if you come to us you might see was the seetickets gig link and that’s £15. So you can get the cheapest tickets always up to date and you don’t have to miss out on gigs and its just making it a lot easier to go to music you love without have to trawl through all the ticket sites etc.

Paul: And you said you created this yourself and with one other guy?

James: I have got a co-founder. He’s mainly dealt with all negotiations with the ticket providers, I’ve done the design front-end and back-end stuff.

Paul: The immediate thing that springs to mind is: flipping heck that’s a big lo’ job to undertake! You’re looking at being worldwide here and you’ve had to arrange and negotiate with all the ticket providers.

James: Yeah, it’s been quite hard, he’s been dealing with people in the Czech Republic and GermansÉ Yeah it’s quite hard, but we’ve managed to get a lot of good data.

Paul: Ok, so you’ve got some good data, but all of these ticket people all round the world have all got their different systems, how the hell do you build something like that?

James: Three months of building a system that can normalise all of the different types of data. So whenever we get a new feed in, for example, you have a really decent feed that has all the artist names and the address of venue, then you find another feed that doesn’t have the artists name, it’ll just have ‘the artist name – Live Tour’. So all you’ve got to work with is ‘Madonna’s Live Tour’. So you’ve got to build a system that can decipher that its actually Madonna performing though you only have that title. They might only give you the name of the venue, so we’ve got to deal with finding all these things and putting them all together, but things are going quite well and we managed to sort it out.

Paul: That’s pretty impressive. So is this venture capital funded or is it being boot-strapped, how are you going about building it?

James: We are boot-strapping at the moment. We didn’t want to go down the route of getting seed funding early on because I could build it without the funding so we’ve just basically knuckled down and lived without money for a bit, but we’re going very well at the moment.

Paul: That’s quite a scary thing to do, did you work somewhere previously?

James: I was doing my A-Levels and doing some freelance work on the side, so I used to work with my co-founder for Coca-Cola music, Universal music doing freelance work there and that got us into the live music space. Then 6 or 7 months ago I said ‘I’m not doing freelance work anymore and I’m just going to focus on this’. So i’ve not earned any money for our consultancy and he’s just done small jobs on the side to pay for server costs, and it’s going fine.

Paul: That’s a really brave decision to make. So how old are you?

James: I was 18 a month ago.

Paul: Ok, so you’ve come out of A-Levels straight into this. That in itself is a big thing to do. You have the thing: ‘Do I go off to university? What about my career path?’ Why have you gone down this route?

James: I’ve taken a gap year out, so at the end if this goes tits-up I could go to univ, but the rate that things are going now I hopefully won’t. I’ve never really wanted to work for anyone else at all and I saw this as a chance at an idea and I was getting some great feedback so I thought let’s just do this and focus my time on it.

Paul: Its really interesting, this is what ScrunchUp is all about, which is now online and up and running. Little cheer from Ryan in the background there. This is something you struggled with as well Anna, what you’re doing: you did freelance for a bit, now maybe you’re looking for a permanent position. Do you ever regret not going to university?

Anna: Of course I do, all my friends are at uni, they’re all having fun, they’ve got it quite easy. Sometimes I feel like I’m not ready for this. I don’t regret not going because I just think working is better for me, but I do sometimes wonder: ‘What would it have been like?’ So either way I would’ve regretted my decision.

Paul: You’re just someone that’s ‘glass half empty’ kind of person. The green isÉ ‘The green is always grasser on the other side’? The grass is always greenerÉ

Anna: One things I wanted to ask you James, has your age got in the way of what you do or has it helped you?

James: When I was first developing, it got in the way because I couldn’t spend my whole waking life doing it so I’d have to go to college. So now that it’s finished its no longer a factor. It’s helped in a way, I always tried when doing work before launching before I had to show my face I never really promoted my age I just didn’t think it was important. But it’s helped me the fact that people are amazed that you’ve done this at this age, but I’ve done coding since I was 9 and I was paid at 12.

Paul: You got paid? Hang on, you got paid to code when you were 12 years old?

James: Yes.

Paul: I fell really old! When I was 12 they didn’t have blooming computers! So what’s next then? Is this actually launched and up and running?

James: Yes it’s been up and running for about 7 weeks, the reception, the things that have happened are amazing, it’s phenomenal.

Paul: Give me some examples.

James: Im now getting paid to speak at places. I was on the TV.

Paul: You were on the TV? Tell us about that, being on the TV’s cool.

James: A couple of days ago Channel 4 were looking for someone that runs a website but also has experience with Google Wave and I did a small piece on the news about Google Wave and how it affects me as a web developer and a site owner.

Paul: Ok, let’s go off on a complete tangent because I haven’t played with Google Wave. What’s it like? Is it as good as everybody says it is?

James: It’s quite good, but at the moment it’s lacking features. But Google’s made it so open that people can make features. So today they released it to 100,000 people. So hopefully with all of the developers that are now on it some amazing things will happen, give it a month or so and it should be quite a good platform.

Paul: That’s the big hurdle, you can build a great app, but if no one has heard of it then you fall down. Especially when you’ve spent so much time negotiating all these deals and developing it. So how are you – you’re boot-strapping it still, you haven’t got a lot of money behind you – how are you building a bit of momentum behind this?

James: We were at FOWA today, I was invited to come down. I got a free ticket. So I’m doing a bit of work with Sun, promoting it that way. But we’ve not actually gone full steam ahead with our PR or press because we are waiting to develop a few exciting new features that we think a lot of people will be interested in. So we’ve built a solid platform that does what it does: gigs, tickets etc making sure that’s perfect. But now we’re building on some extra things onto that so later in the month we’ll release those and alongside that we’ll start doing press.

Paul: So how are you intending to do it, or is it mainly your colleague that’s doing that?

James: The press stuff? Well because I’ve been doing all the speaking and I’ve been around London and all the events, I’ve built up a good relationship with quite a lot of people. So we are going to be targeting some music related stuff, just try and get it out there. Whatever that it takes. I’ll do anything. Take one for the team.

Paul: That’s a good entrepreneurial spirit. I like that very much. Have you got any more questions?

Anna: Yeah, so where do you see yourself in the next 5 years?

James: I’d like to say a year or so after I’ve had my exit. Either this is doing tremendously well still, or its had the exit. But hopefully I’ll still be working for myself working on fun things whatever it may be.

Paul: So that’s the plan, to go for an exit point where you sell the app and move onto the next thing?

James: Yeah, I think everyone is looking for their big exit. It’s either an exit or an IPO. If you’re money orientated. Work for the love of it. No I love it, its a great thing, it’s my life.

Paul: You could build a lifestyle business, for example, the business I run is a lifestyle business. We run the company so that it gives us a good standard of living and we’ll run it forever like that. Im not criticising, but looking for an exit is a different way of doing things. Well that was really interesting, i think its great to talk to people that are actually out there building these web apps but not with massive budgets and not ‘in the Valley’ and all the stereotypical stuff, you’re boot-strapping it, there’s just a couple of you guys doing it and it’s still possible.

James: It’s not about having a mass of money, it’s about losing control of your company. Why would you want to be a minority shareholder in a company, it’s your baby. I personally wouldn’t be motivated to work if it wasn’t mine still.

Paul: Of course. Thank you for your time and we’ll get you back on in the future.

Thanks goes to Simon Hamp for transcribing this interview.

Back to top

Elevator Pitch: A/B tests.com

We are introducing a new segment to the show this week. It is called Elevator Pitch and is produced by our very own Paul Stanton. The idea is that Paul interviews companies who have a product that might be of interest to you guys. They give a quick elevator pitch and Paul asks them some questions.

We start the series with ABtests.com.

Stanton: OK so today I am here with Joshua Porter, Hello Joshua

Joshua: Hi Paul;

Stanton: How are you doing?

Joshua:I am doing good, what time is it there?

Stanton: It is about 10:30 in the morning.

Joshua: Ok it is still dark here so

Stanton:(laughs) So where abuts are you based

Joshua: I am north of Boston in a small sea coast town called Newburyport, Massachusetts

Stanton: Ok so is it night time there? I can never figure out the timezone differences.

Joshua: yes it is still dark, nobody is up so this is usually when I get most of my work done actually

Stanton: Nice and quiet I guess

Joshua: Yes absolutely

Stanton: So we have got you on today to talk about a website you are involved with called abtests.com, so give us the elevator pitch, what it is and why you made it.

Joshua: Sure, so yes its abtest.com and it is a really simple site the idea is that we upload and allow other people to upload the results of A,B tests. For those not familiar with A,B testing it is really pretty simple if or while you are designing a web page or screen in a web application you might design two separate instances of that page and then test to see which one works better. So you split up your traffic your audience coming to the page into two and 50% of the people see design A and 50% of the people will see design B and then you measure to see which audience converted better against some goal you have set up. For example say you have a sign up in a web application and you have a sign up page and you want to test two different variations to see which one works better, that is essentially the gist of A,B tests. The reason why we created the site was for people to share their tests with others so the way it started was I had been doing a bunch of testing and I had seen some people online writing up some of their tests and what I found was that I always found the results really fascinating. So for example we have some write ups on the site now where people have provided two screenshots of design A and design B and the only thing different is simply the placement of the call to action button, the primary sign up button and after doing testing it turns out that sometimes the placement actually matters, if you place the button in a place on the page then you actually get more people clicking on it. So these sort of things fascinated me and I had seen a few of them written up in blog posts and things online but I wanted a lot more of them and the designers that I have talked to really liked that concept as well so we created the site. I created it with a couple of guys from a start up called performable that I am involved in as well. You know we are kind of seeing where it goes at this point. We have had a lot of interest in it and we have found some interesting issues around it such as for example some people will never upload the results of their test because they want to keep them secret but others see it as a great way to promote their startup or something like that.

Stanton: Right so you are not actually providing the mechanism for people to do A,B tests this is simply for people that have had results and want to publish them and share them with other people, that right?

Joshua: Right now yeah, we do have quite a few things in the works but we will not be providing like a piece of software that allows you to do A,B testing. We might provide some other software that does things in and around testing, ermm but there are plenty of tools out there one of the tools the most popular one is google website optimiser which is a free tool which allows you too do A,B Testing and one of the folks who is promoting abtest.com with us is kissmetrics they have some tools in that space too. So we are not going to compete with them in any way.

Stanton: OK so how long has the site been running for now?

Joshua: The site has been running for about a month now I think

Stanton: OK and roughly how many tests are up there now

Joshua: We have er gee I don’t know what the number is 12 or 15. I haven’t actually been spending as much time as I wanted to on the site because I am actually working on a startup and building some other software. But we are .. the big challenge again is kind of getting people comfortable with the notion of sharing their tests. That is kind of the big challenge now so we are working on that.

Stanton: Sure, it is quite amazing to look through the stuff that people have put on there and you see the screenshots side by side and you have to look closely on them to see what has changed because it shows how just the tiniest change in either the text or the placement or the colouring in some cases can lead to quite big percentage improvements on calls to action so I think it will be really useful for people to come and have a look through and hopefully share their own tests as well.

Joshua: Yeah, one of the big findings that we are seeing is that testing like this or viewing the results of these tests really changes peoples perceptions of design, I mean it is kind of a pretty big insight to some people to see that OK you know the colour of a button does change things, the call to action copy can have a dramatic effect so what I hope kind of for the site and the test results is that teams can take them back and start talking about real design issues and hopefully push to the background things like politics and emotional debates and “this is what I think” and so this is what we are going to try type of arguments and say you know what testing really does work. lets really start testing things. I think at some point teams will start focusing more on really important things, like their users, the words that matter to their users, the things that motivate their users and really kind of return to the basics of design.

Stanton: Great so you have kind of given us a couple of hints to where the site may go in the future, have you any other plans

Joshua: SO two things I am working on right now. One is to really fill out the site with information how to test. as I mentioned we are not planning on providing a tool to test, but people want to know what A,B testing is. They want to know how to do it and they want to see examples of what other people have tested so they can get a idea of what they should test. That has been one of the biggest surprises that people do not know what to test so people you know have the question shall we test another colour?, should we test different copy or different button styles? whatever. So that has been a big thing so we are going to round out the site with a bunch of information, content basically around where to test and some of the interesting topics. So for example actually I am working on some copy now that is what A,A testing is, a version of A.B testing but is a version of testing where you test the same thing twice so 50% of people, you basically segment your audience into two parts and the two parts seem the same thing and that might sound like a ridiculous idea because you are testing the same thing twice but it is actually valuable thing to do early on when you are getting into testing because it tells you how much noise is in your system. So if you run design A versus design A itself and you have some difference there, so one has slightly higher conversion than the other and of course all of the numbers you get from testing are fuzzy to a certain extent the question is how much, so if you have some variance there and you know there is noise in your testing setup and you know that is your margin of error. So after you do A,A testing then when you move on to A,B testing you can say the margin of error is about 1% so then in that case if B outperforms A by 1% you know it is not really, it may not be a significant result because there is that much noise in your system to begin with. Anyway tat is just one example of some of the content stuff we are going to fill the site out with going forward.

Stanton: So sounds really good. A,A testing is something I have never heard of before so that is quite interesting and I will guess you will become quite a good resource for all this testing, for people to go to.

Joshua: yes I hope so.

Stanton: So where can people find out more information.

Joshua: So they can go to www.abtests.com check it out we are actually going to push some changes up soon that allow you to view tests and view related tests so hopefully it will be easier even than it is now.

Stanton: Good stuff, well thank you for that

Joshua: Thank you Paul

Stanton: We will hopefully check back with you in the future to see how things are going.

Joshua: Great sounds good.

Thanks goes to Shaun Hare for transcribing this segment.

Back to top

191. Ecommerce Lies

On this week’s show: Marcus explains how podcasting and blogging can support your business and Paul exposes the top ecommerce lies.

Play

Download this show.

Launch our podcast player

Housekeeping

If you are considering going to Future of Web Design New York on the 17th November then you will be pleased to hear that we have managed to get you a 15% discount.

I went last year and can honestly say it was the best conference I have ever intended (although the hype around the election might have helped!).

To claim your discount just enter the code ‘boag15′ at checkout.

Back to top

News

Does aesthetics need to be compromised for the sake of usability?

As you will know if you have followed me for any length of time, I have great respect for usability expert Gerry McGovern. We work on similar projects and share a similar view of the web.

However, this week I parted company with Mr McGovern over his most recent post “Why web links are calls to action.”

In it he wrote:

It’s hard to read what Dustin writes on this black background; gave me a bit of a headache actually. But that’s okay. I had a great overall experience of the page because its black background communicated an important emotional, aesthetic thing to me.

Seriously, it’s a bit of a pity Dustin makes it so hard to read his stuff because what he has to say is quite interesting.

Later he went on to attack designers for their dislike of underlines.

Isn’t it amazing how many designers hate underline? They think it’s ugly, that it takes away from the look of the page.

Finally he reached the crux of his argument:

Have you read any grey books recently? I mean, have you read any books that use grey text or that have black backgrounds? Or, for that matter, have you read any print newspapers or magazines that use grey text? It’s well documented that it’s harder to read on a screen than in print. So why do designers deliberately create webpages that make reading even harder? Simple, really. Many web designers are more concerned with how the page looks than how it reads and functions.

In essence Gerry seems to be arguing that aesthetics should always take second place to usability. I disagree with this. It depends on the type of site. On some sites it is important to communicate more than information. Some websites are about conveying emotion and feeling too.

As for particularly targeting black backgrounds and underlined links, this is entirely unjustified.

Black backgrounds can (if done right) actually aid usability. Contrast is the issue here, not the colour of the background. As long as there is sufficient contrast a black background can actually reduce eye strain caused by white light, aiding on screen reading.

An example of a black background website with high contrast text

As for underlined links, I again disagree. Although I think it is important to underline links I tend to use border-bottom rather than text-decoration:underline. The problem with the latter is that the line intersects descenders making words hard to read, especially for those with cognitive disabilities. Not using underlines in their traditional sense actually aids readability.

An example of descenders intersecting underlines

The idea that most designers do not care about usability is incorrect. We care passionately. However, we do not always solve these problems in the way that usability consultants would prefer. Instead we try to balance aesthetic considerations with usability. We care both for how the page looks and how it functions.

So what do you think? Do you believe that designers care more about aesthetics than usability? Post your thoughts in the comments.

Explaining user experience design

Let’s face it, we all dress our jobs up in fancy terminology to justify our existence. That is fine until those paying us no longer understand what we are talking about.

Okay, so I am exaggerating to make a point. Sometimes we use our own terminology because we need short hand to explain complex ideas. However whatever the reason, it can get in the way when communicating with clients.

That is where the latest A List Apart post comes in. Entitled ‘Can you say that in english: Explaining UX research to clients‘ it does exactly what it says on the tin.

I want to recommend you read this article for three reasons:

  • If you are a somebody who needs to deal with UX people, this post proves an excellent introduction into what services they provide and the terminology they use.
  • If you are a UX person the post provides valuable advice on how to better communicate with clients.
  • If you have just started doing UX work this article may introduce you to more techniques. For example: have you previously heard of Contextual Inquires or Diary studies?

If you are looking for a great introduction to user experience design written in plain english, this is not a bad place to start.

The importance of typography

Typography is playing an increasingly important role on the web. Browser manufacturers now almost universally support font-face and there are a number of organisations such as Typekit and Fontdeck who have overcome the legal challenges surrounding the use of type online.

Unfortunately few fully understand the power of typography. Even web designers have become so used to working with a limited number of fonts that they have forgotten how evocative a great font can be.

There are loads of great resources about type on the web. Howeve, if you are looking for a post to get you started and demonstrate the power of type, I would recommend Jennifer Farley’s post on Sitepoint.

This isn’t a post that teaches you how font-face works. It isn’t even a post that explains how to create great typography. Instead it aims to excite you about the potential and power of great typography.

If you are a designer who rarely considers typography in any depth, then I highly recommend this post. If you are a website owner or developer who doesn’t ‘get’ all the fuss surrounding web typography, then I would also recommend you check this post out.

Website maintenance tips

Our final news story for today is an eclectic post from Smashing Magazine looking at website maintenance tips and tools.

It is a useful post because most of us are better at building websites than we are at maintaining them. After all, it is much more exciting to build a new feature than it is to carry out maintenance.

The article includes:

  • Advice on keeping content clean
  • Tools and advice on repairing your site
  • Information on browser compatibility testing
  • Help creating clean HTML, CSS, and Javascript
  • Guidance on ensuring accessibility
  • A look at HTML5 and CSS3
  • How to optimise your site for speed
  • Advice on commenting code
  • An introduction to SEO enhancements
  • Information on stats and analytics
  • How to incorporate user feedback

As I said – a somewhat eclectic mix. However, it is certainly worth a read if you are responsible for maintaining a large website over time.

Back to top

Feature: The Biggest Ecommerce Lies and How to Avoid Theme

I am amazed at some of the advice I read about building successful ecommerce sites. I seriously wonder who writes this stuff! In this week’s feature I debunk 5 common myths.

Read the biggest ecommerce lies and how to avoid them

Back to top

Listeners feedback: Does blogging/podcasting win you any work?

Got the following question from Dave Smith:

Basically I’m interested in whether your Podcast and Blog generate any enquiries that result in paid work/projects for Headscape?

Recently we created FindMeByIP.com and it generated what is – for us anyway – a considerable amount of traffic for the Blog on our website. However, despite the tens-of-thousands of hits generated, we’ve only received 1 enquiry regarding new work. ONE!

What I want to know is whether you’ve devised any strategies for converting Blog/Podcast traffic into paid work projects for Headscape.

If not then how can you justify the obviously considerable amount of time and effort you put into your Podcast and Blog? What provides return on investment?

I’d look forward to any ideas/thoughts/suggestions that you might have.

The simple answer as to whether the podcast and blog generate any enquiries that result in paid work is yes. Blogging and podcasting have become the principle method that we use to market Headscape. We wouldn’t do it to the level that we do if it wasn’t a successful method of winning work.

Patience

I happened to notice recently that the first ever podcast went out in 2005 with Paul creating written articles prior to that. It took at least a couple of years before we started to notice that the majority of new prospects were discovering us through the blog and podcast.

There’s a couple of important points to note here:

  • The majority of Headscape’s work comes from existing clients and referrals. It did then and still does now. I don’t think the blogging/podcast model alone would have been able to support us in the early days when our client list was a lot shorter.
  • We’re not ‘scientific’ about ROI. In other words, we don’t get hung up about effort spent on marketing versus the amount of revenue coming in from it. It’s either working (or improving) or it’s not. If it’s not then we’ll try something else. Personally, I don’t think it’s a numbers game. For example, what if that one enquiry that Dave mentioned was from a huge client?

Perception

Even though we have always been completely ‘up front’ about the benefits that the podcast brings to Headscape, Paul didn’t start it with commerciality in mind.
Paul is a born blogger. He is a person that needs no encouragement to experiment with stuff and then share his thoughts with all and sundry. The fact that it has benefited our business is great and led the rest of us to encourage him to do more and more.

I’m not suggesting for a minute that Dave (and his colleagues’) blog is in any way forced but, and here’s the clincher, it sits on the company website. There is an instant connection between the blog and the company that may – probably sub-consciously – deter readers because they feel they are being sold at.

We used to write articles for the Headscape site and we’d send out regular email newsletters alerting subscribers to new articles. This was not successful, I believe, for the reasons highlighted above.
Boagworld started as Paul’s personal blog. And, I’m guessing, for the vast majority of readers and listeners it still is very much Paul’s site. They put up with the odd reference to Headscape but basically they’re not interested and never will be.

Influence

Though we have had a few website owners follow the show and hire us directly, the majority of the work that we win via the podcast is through listeners influencing their bosses. It took us a while to realise this.

When Boagworld started we felt it was important to focus the show (and blog) on website owners and not designers and developers. And though this focus remains important and provides a differentiator to other ‘tech’ blogs and podcasts, we now understand that both audiences are important to us.

Entertainment?

Mentioning differentiators, I think the fact that we do a podcast (not just a blog) is significant as well. It gives our audience a chance to get to know us far more than through articles alone. I have mentioned before that I think one of the biggest questions a potential client has before hiring an agency is ‘can I work with these people?’ I think the same applies for an in-house designer or developer who wants to make a recommendation to a boss. They need to feel that they can completely trust the team they are recommending and I think that’s more likely if their connection with you is via a (long running) podcast.

Our ‘style’, though it has its detractors (!), has kept people listening for nearly 200 shows. I guess what I am saying is that though of course high quality, relevant and up to date content is paramount to a successful podcast or blog, making it entertaining is also imperative. There are those that would completely disagree with my previous sentence – they don’t listen to Boagworld…

Conclusion

In conclusion, I think that the most important element to a successful blog or podcast is that it’s not being done simply as a vehicle to try and win work (or sell products etc). It has to be something you would do anyway. Of course, seeing positive results from a blog (as we have) will encourage more time being dedicated to it, but it shouldn’t be the reason to start in the first place.

Paul has talked in the past about one of the keys to blogging being consistency and regular posting. If you see blogging as a chore then chances are you won’t produce consistent or regular work.
In Dave’s case, along with considering moving the blog away from the company site, I think patience is the key as it appears they haven’t been doing it long.

Back to top

Image Credit: MarS

Do aesthetics need to be compromised for the sake of usability?

Gerry McGovern seems to believe designers are more concerned with aesthetics than usability. Do you agree? Is either more important?

As you will know if you have followed me for any length of time, I have great respect for usability expert Gerry McGovern. We work on similar projects and share a similar view of the web.

However, this week I parted company with Mr McGovern over his most recent post “Why web links are calls to action.”

In it he wrote:

It’s hard to read what Dustin writes on this black background; gave me a bit of a headache actually. But that’s okay. I had a great overall experience of the page because its black background communicated an important emotional, aesthetic thing to me.

Seriously, it’s a bit of a pity Dustin makes it so hard to read his stuff because what he has to say is quite interesting.

Later he went on to attack designers for their dislike of underlines.

Isn’t it amazing how many designers hate underline? They think it’s ugly, that it takes away from the look of the page.

Finally he reached the crux of his argument:

Have you read any grey books recently? I mean, have you read any books that use grey text or that have black backgrounds? Or, for that matter, have you read any print newspapers or magazines that use grey text? It’s well documented that it’s harder to read on a screen than in print. So why do designers deliberately create webpages that make reading even harder? Simple, really. Many web designers are more concerned with how the page looks than how it reads and functions.

In essence Gerry seems to be arguing that aesthetics should always take second place to usability. I disagree with this. It depends on the type of site. On some sites it is important to communicate more than information. Some websites are about conveying emotion and feeling too.

As for particularly targeting black backgrounds and underlined links, this is entirely unjustified.

Black backgrounds can (if done right) actually aid usability. Contrast is the issue here, not the colour of the background. As long as there is sufficient contrast a black background can actually reduce eye strain caused by white light, aiding on screen reading.

An example of a black background website with high contrast text

As for underlined links, I again disagree. Although I think it is important to underline links I tend to use border-bottom rather than text-decoration:underline. The problem with the latter is that the line intersects descenders making words hard to read, especially for those with cognitive disabilities. Not using underlines in their traditional sense actually aids readability.

An example of descenders intersecting underlines

The idea that most designers do not care about usability is incorrect. We care passionately. However, we do not always solve these problems in the way that usability consultants would prefer. Instead we try to balance aesthetic considerations with usability. We care both for how the page looks and how it functions.

So what do you think? Do you believe that designers care more about aesthetics than usability? Post your thoughts in the comments.

The biggest ecommerce lies and how to avoid them

I am amazed at some of the advice I read about building successful ecommerce sites. I seriously wonder who writes this stuff! In this post I debunk 5 common myths.

Of all the sites I am involved in at Headscape it is the ecommerce sites that excite me the most.

How can you not get excited about working on a website where the fruits of your labour are so visible and direct? Do a good job and the website makes more money, screw up and profits decline. There is something wonderfully black and white about it.

With such a measurable and obvious success criteria, you would have thought best practice would be well established and generally accepted. Bad advice would be quickly exposed for what it is and successful techniques would rise to the top.

However, it would appear that is not the case. I am amazed at how bad some of the advice is and how much bad practice exists.

In this post I want to focus on five of the worst offenders, beginning with the belief that you can never give users too much information.

1. You can never give the user too much [Wrong!]

Only recently I was reading an article about ecommerce that actively argued for providing users with as much information as possible.

On the face of it, this sounds like a good idea. The more information you provide, the better informed their decision becomes. However, in reality too much information can be overwhelming and lead to choice paralysis.

Compare for example the experience of buying a computer. For you and me this is a purchasing decision we are very comfortable with. However, for the majority of consumers it can be an intimidating experience. It is a minefield because there are too many choices and options.

Recently I bought a Dell netbook. Even as an experienced computer users this was a harrowing decision. I knew I wanted a low end, cheap netbook, so immediately ignored the plethora of laptops and desktops that could have confused my purchasing decision. However, that didn’t make the purchasing process easier. I still had to choice between the Dell Mini 9, 10 and 10v. I had to wade through technical specs outlining the differences, most of which I found unintelligible.

Screen capture from Dell Website

Once I had made my choice, I was presented with even more details and options. I had to select colour, type of hard drive, size of hard drive, operating system and on and on and on. In fact it even made me approve options where I had no alternative choice!

When compared to the limited and clearly defined line up of Apple computers, the contrast could not be more apparent.

Screen capture from the Apple website

More is not always better. If you want to encourage users to buy, then you need to make their choice a simple one. Remove everything but the most important information and minimise the number of choices available. This is something that has been understood for some time in traditional retailing, but has not filtered through to the web.

One retail technique that has transferred to the web is up-selling. However, you should thing twice about how to implement this technique.

2. Never miss an opportunity to cross-sell [Wrong!]

We all know supermarkets do it. You are queuing at the checkout surrounded by chocolate, magazines and other extras. They hope we will be tempted to pick up something on the way out. You go in for a loaf of bread and come out with a basket full of chocolates and a magazine on interior design. Any marketeer will tell you how effective this technique is.

Photograph of a supermarket checkout

Many successful websites also use this approach very effectively. Amazon is always looking for opportunities to cross-sell, based on its extensive knowledge of your buying habits and those of other users. However, even though it is obvious we will buy items on the spur of the moment, Amazon does not always up-sell.

Amazon recognises that the web is not the same as the real world. Unlike supermarkets, Amazon will not up-sell once users reach the checkout. In fact they are careful to avoid any distractions.

Screen capture of Amazon checkout

When the competition is only a click away you do not have the luxury of asking users to stand in line at the checkout, while you present them with additional products. Unlike the supermarket checkout there is no person to guide you through the process. It is user driven and so has to be as easy, focused and fast as possible.

Yes, it is important to up-sell. However, do it before the checkout process begins. Once the user makes a decision to buy, you need to ensure nothing gets in the way of that transaction. Some opportunities to cross-sell are worth missing.

Of course, there is no reason you cannot encourage users to buy again after the transaction is complete. That is where we need to look beyond the website.

3. Its all about your site [Wrong!]

Web designers want to sell you web site design services. It is therefore unsurprising that they concentrate their attention and advice on the website. However, the website is only one small part of a successful ecommerce business. The heart of successful ecommerce lies in service, not the website.

Don’t become so fixated on tweaking and improving your website that you neglect other areas of the user experience. Good customer service extends well beyond the users interactions with the website. It also includes vital components such as:

  • Email notifications - Do you keep the customer informed about the progress of their order?
  • Telephone support – Do you allow customers to speak to you directly?
  • Returns policy – How easy is it for customers to return an item if they do not like it?
  • Fulfilment – Are you in a position where you can fulfil orders quickly and dispatch them immediately?
  • Complaints handling – How well do you handle customer complaints? Do you go the extra mile?
  • Ongoing communication – Do you regularly keep in touch with customers? Do you offer them special deals and discounts? Is it easy for customers to opt out of these communications?

Customers who receive superb service are considerably more likely to make a second purchase and even more likely to recommend you to friends and family.

Screenshot from Customer Service Matters

Visit Bruce’s blog Now

It is even possible to substantially reduce your marketing spend if you make customer service a priority. Instead your reputation will spread through word of mouth.

Do not misunderstand, I still believe that getting your website right is extremely important. Small things can make a big difference in the eyes of your users. Take for example security.

4. Users care about security… badges [Wrong!]

There is no doubt that users care about online security. In fact there is still a large proportion of people who are unwilling to buy online for fear of credit card fraud. The media has done an excellent job at ensuring the public are suspicious of online transactions, even though they are willing to hand over their credit card in a restaurant.

Whether the users concerns are justified or not, we need to take them seriously if we want people to buy.

Many ecommerce businesses spend a lot of money ensuring their sites are secure. How then do they choose to communicate this massive investment to their users in order to reassure them? – They slap a badge on their website!

Adding a small Verisign or Mcafee badge to your checkout page is not enough to alleviate users fears. At best they are free advertising for the companies involved. At worst they are entirely ignored because they look like banners.

A screen capture of a website with no security information except a Verisign logo

A better approach is to tackle the problem head on. Add copy to your website addressing this issue and the steps you have taken to ensure the customers security. Do not rely on a single graphic to say all that needs to be said.

5. Amazon is the template we should all follow [Wrong!]

This final lie is probably the most widely held of all. There is a belief that because Amazon is so successful, all ecommerce websites should follow their example.

There is however a number of flaws in this argument:

  • They don’t get everything right (nobody can).
  • They are partially successful because they were one of the first ecommerce websites to market.
  • Their reputation and brand recognition allows them to get away with a lot.
  • Users are familiar with their site and its eccentricities.

In short, what works for them will not necessarily work for you. Too many website owners blindly copy Amazon because they are seen as the leader in ecommerce. Not only is that flawed for the reasons I gave above, it also removes the possibility of you ever being better than Amazon or innovating in anyway.

Amazon Homepage

Don’t get me wrong – I believe there is a lot that can be learnt from Amazon. However, I do not believe it is in anybodies interest to blindly follow their lead.

Bonus lie: Ecommerce is easy

Probably the biggest lie of all is that ecommerce is easy. Admittedly off the shelf solutions such as Shopify make it extremely easy to build ecommerce websites. However, building the site is only the beginning. The real challenge comes in:

  • focusing your site,
  • deciding on when to up-sell,
  • providing great customer service,
  • communicating clearly
  • and learning from others.

Creating a successful ecommerce business is a long term commitment and you will need to continually evolve both your website and strategy.

So, what about you? What ecommerce lies have you heard? What great advice would you like to pass on? Post in the comments below.

189. How to keep up with web innovations

On this week’s show: Paul looks at keeping up with web innovations, Marcus shares how we make the podcast and Nora Brown reviews building findable websites.

Play

Download this show.

Launch our podcast player

News

Web design match making

Finding a web designer can be tough. Equally, if you are a web designer (especially if you are just starting out) finding clients can be hard. Much like in love, finding the perfect partnership is difficult.

37 Signals feel they have the answer. To accompany their already successful jobs board, they have now launched Haystack.

Haystack, allows web designers to upload a brief description of their agency for free or a more detailed portfolio for $99 per month.

Clients can then browse this directory in attempt to find the perfect agency.

And there in lies the problem. Although Haystack is beautifully designed it is actually incredibly limited from a clients perspective. They are only given three choices.

  • Search through hundreds of listings manually
  • Filter by city
  • Filter by budget

These filters are both extremely limited and are not enough for narrowing down such a large number of designers.

Haystack.com

Filter by city allows you to select from a handful of US cities, while dumping all other locations into a catch all of ‘other cities.’ This might possibly be acceptable if there was an option to search by country, region or city. Unfortunately there is not.

Filter by budget is equally flawed. As a web designer you have to select a price range that you normally work within. This effectively excludes you from smaller or larger projects. In reality things are rarely that black and white.

Finally I would argue that there are many other characteristics clients look for in an agency. There are no options to filter by technology, skill set or sector experience. The tools available are simply too blunt for making an effective decision.

My guess is that 37 Signals have been caught off guard by the instant popularity of the app. The current application has been built with a small number of agencies in mind. In such circumstances it would be perfectly adequate.

I am sure that they are already working on upgrades to the app which will handle the large number of agencies much more elegantly. These guys do good work and there is no doubt that an app like this is much needed.

Client relations

There seems to be a lot of posts around this week looking at the working relationship between clients and web designers.

There is a sitepoint post that focuses on fine tuning your persuasive techniques, a smashing magazine post on dealing with difficult characters and A List Apart post on when to walk away. There is even an article teaching us how to deal with things like scope creep and unhelpful design feedback.

Although it is good to see posts tackling client management, I do fear they all have a negative tone.

Last friday I ran a workshop on client relationships and although we discussed dealing with problematic relationships, I tried to make the overall theme a positive one.

Too many web designers go into new projects seeing the client as either the enemy or as a hinderance to the projects success. Articles like those I have mentioned are in danger of reinforcing this viewpoint.

It is important to remember that our clients are extremely knowledgeable in their own fields and that both designer and client wants the same thing – a successful website.

I also worry that too many web designers are perceived as negative. Instead we need to be positive and stop saying no to our clients.

Myths of usability testing

Two posts have been published recently that challenge some of our preconceptions about usability testing.

The first is a post by A List Apart entitled “The Myth of Usability Testing” and is a response to some fairly shocking research.

The research monitored a number of usability tests run by different agencies on the same site. The result was that although all of the agencies found many problems, only 30% of those problems were common to more than one agency. In other words the agencies could not agree on where the problems lay.

The article goes on to examine the discrepancy focusing in particular on the questions asked and the people tested. It also explains that context is vital to the interpretation of results.

The second post is one that challenges the role of eye tracking. The post looks at the pros and cons of the approach and in my opinion is a balanced assessment.

The post ends with the following conclusions:

Some have concluded that the benefits of eyetracking are not worth the high cost, effort, and complexity it adds to usability testing. On the other hand, some eyetracking vendors and consultants have promoted the idea that you cannot conduct usability testing effectively without eyetracking.

The truth lies somewhere between these extremes. If you know how to use eyetracking effectively, it can provide additional insights to usability testing that can help you find problems and answer questions about user behavior. Eyetracking is not essential to usability testing, but if you can afford it and have the time to learn how to use it effectively, it is definitely worth it.

Personally, we have never recommended eye tracking to our clients and this post has done nothing to persuade me to start. For the type of clients we work for the expenditure is hard to justify.

jQuery for designers

I am a huge fan of jQuery. I have said this more than once in the past. The thing I love most about jQuery is that it is aimed squarely at designers. If you can understand HTML and CSS, then you can wrap your head around jQuery. What is more, it lets you do some really cool things very easily.

Imagine my delight when this week I discovered jQuery For Designers. Apparently the site has been around for a while but I seem to have missed it entirely. In case you have missed it too I thought I would give it a quick mention.

The site contains dozens of screencasts and examples of various cool functionality that can be built with jQuery. Just some of the tutorials include:

  • Tabs
  • Slider galleries
  • Carousels
  • iPhone sliding headings
  • Fixing floating elements

Best of all, you can subscribe to these screencasts on itunes enabling you to view them as a podcast.


This is just one of the many excellent tutorials on jQuery for Designers.

Back to top

Feature: 10 secrets to staying informed about web design

Keeping up in the world of web design is tough. Things move fast and its hard to stay informed. In this post I share 10 ways that RSS can come to the rescue.

Read 10 secrets to staying informed about web design

Back to top

Ad: Win a Macbook Pro or iPod Touch

Webvanta are running a superb contest that I wanted to quickly mention.

There is an opportunity to win a Macbook Pro or one of three iPod Touch.

To be in with a chance of winning, you need to build a great looking, effective website on the Webvanta CMS.

Don’t worry if you are not an existing Webvanta user. They are going to give you a Webvanta premium account for the duration of the contest.

The panel of judges (that includes our own Ryan Taylor) will pick a winner on the 1st February so get designing.

For more details on how to enter visit Webvanta.com/Contest.

Back to top

Listeners feedback:

Recording the podcast

I had the following tweet from @david_o_connell:

@marcus67 could you guys do a spot on the tech setup for recording the podcast please (didn’t ask Paul as he muffs the audio :) )

Thinking about this I realised that I have never covered this riveting subject so after nearly 200 shows it was probably about time!

It’s worth noting that we are set up to record and edit things as quickly as possible. We have recorded a weekly show for years so we have to get it down and get it out the door. I’m sure there are other ways of doing things and I expect my history of working in expensive recording studios potentially means that I overcomplicate things… but, this is how I do it.

Hardware

Ok, this is a list of all the stuff we use:

  • AKG C 2000B microphone (x3) – these are ‘mid’ quality mics that need phantom powering. ‘Decent’ quality mics are a must otherwise you will end up with a thin and probably noisy result. Built-in laptop mics are a total no-no!
  • Angled mic stand (x2) – these are recent addition that mean we can comfortably use our laptops while recording the show.
  • Straight mic stand – we use this for any guests we have on the show.
    Pop shield (x3) – again, a recent addition to the setup. Vital in avoiding pops and bangs on words that begin with ‘p’ or ‘b’.
  • XLR to XLR (balanced) mic leads (x3)
  • Behringer mixing desk – our mixing desk has 4 ‘proper’ mic channels and 4 stereo channels, 2 sub groups and phantom powering to power the mics. On a standard show, I take a feed from sub the group outputs to the input on the Mac. When we’re recording a live show things are little more complex as we need to get the audio to two places at the same time (my Mac recording the show and Paul’s that is broadcasting live). I also need to hear the audio from the intro videos so we’re taking an out from Paul’s Mac for the videos and a feed from the desk master outs to his line input… you need to see it really!
  • Technics closed-ear headphones – these are my ‘old faithfuls’ that I have used for years. It is imperative that one person monitors voice levels throughout the recording. I plug them into the headphone input on my Mac. Closed ear are best because they do not ‘spill’ into the mic.

I don’t use any external compressors or limiters. That gets taken care of in the software.

Software

In my current setup I use Logic Pro to record all of the audio. This is a bit over the top for podcast recording but I also use it to record music and it does both jobs beautifully.
For the voice tracks I use the setting Voice > Speech > Male Radio that adds a compressor, de-esser (to stop sibilance) and EQ.

However, if you’ve got a Mac then Garageband will do the job admirably. It even has ‘podcast’ settings that you can assign prior to recording.

Back in my PC days I used to use Sony Soundforge to record the audio tracks which I would then edit together using Propaganda. I still use Soundforge to bounce down to MP3 (Logic is unreliable at this).

Recording tips

Here’s a bunch of tips to :

  • As I’ve already mentioned, use headphones while recording the show to avoid anyone going ‘off mic’. Usually, pointing at them, then their mic gets the message home!
  • When recording 2 people pan the input channels hard left and hard right. This means that if you have to boost any part of a recording it’s easy to locate the specific part. The absolute ideal here would be to have some sort of multi-input box into the computer thereby allowing multitrack recording i.e. I am recorded onto one track while Paul is recorded on to another simultaneously. Thinking about it, I could probably do this right now (for max 2 channels) by separating the inputs and recording 2 mono channels instead of one stereo. But, to be honest, it’s really not worth doing as, mentioned earlier, time is of the essence.
  • Record a quick levels test prior to any recording (because you really don’t want to have to go back in and fiddle with the levels afterwards unless you absolutely have to).
  • Record each section of the podcast on a separate track. Don’t do one long recording as this is much harder to edit later and add in music and audio dividers. If you record each section separately then you should only have to top and tail it which takes no time at all.
  • Once all the voice recording is done, I will add in the intro and outro music, the section dividers and any interviews or questions that are part of the show.
  • Once I’m happy with result, I bounce to Wav format which I then open in Soundforge and save out as 64Kbps 44.1 kHz mono MP3 format which is tagged and FTP’d to our hosts.

Here’s a screenshot of a final ‘mix’ in Logic before the bounce down (v zoomed out).

Screenshot of a final ‘mix’ in Logic before the bounce down

Building Findable Websites

My name is Nora Brown; I’m a freelance web designer in Boston.

I’d like to give you and Boagworld listeners a recommendation for a book I recently read, called “Building Findable Websites”, by Aarron Walter. Though I finished reading it a month or so ago, I find I’ve been referring back to it constantly ever since.

Building Findable Websites: Web Standards, SEO, and Beyond

In this book, Aarron Walter views SEO as just one aspect of, and in some ways almost a side effect of, improving a website’s “findability” — which is defined on page 2 as:

“The quality of being located or navigated, the degree to which an object or piece of data can be located, and the degree to which a system supports navigation and retrieval.”

The goals of findability are listed as:

  1. Help people find your website.
  2. Help people find what they are looking for once they arrive at your site.
  3. Bring your audience back to your website.

Notice there is no mention of Google or any other search engine, because obviously the ultimate goal is to help *people* find and use your website, not search bots.

To that end, Walter provides straightforward advice for improving findability at all levels of site development:

  • Front-end markup strategies
  • Server-side strategies
  • Content generation

Though not every technique will be right for every site, as someone who builds small business and portfolio websites, I found the majority of the recommendations to be practical and implementable. Furthermore, nothing in the book represents SEO for SEO’s sake — all the techniques have other benefits, primarily improving the user experience.

Aarron Walter manages to fit an amazing amount of useful, actionable information into this slim volume, but if it’s not enough, there are even five bonus chapters which you can download for free at buildingfindablewebsites.com.

I hope you and your listeners take a look at this excellent book.

I also think the author Aarron Wlater would make a great candidate for a Boagworld interview.

Thanks and keep up the wonderful podcast.

Back to top

184. HTML5

On this week’s show: We interview Jeremy Keith about the truth of HTML5 and Ryan Carson shares some more advice about building your own web application.

Play

Download this show.

Launch our podcast player

News

Apple and UI design

Whether you are a fan of the Mac OS or Windows, there is no denying that Apple know what they are doing when it comes to user experience design. There is a lot that can be learnt from them whether you are developing a piece of software or even a website.

This week I have come across two sites which perfectly demonstrates just how deep Apple’s knowledge of UI design goes. The first is Finer Things in Mac, which is a site dedicated to highlighting the small details in the mac OS UI which makes it shine. Examples include:

  • The naming of buttons so they are more descriptive than “Okay” or “Cancel”
  • The way Time machine changes the clock in the menu bar as you go back in time
  • The accuracy of progress bars when compared to windows

The second area that demonstrates Apple’s expertise is in how they have chosen to tackle accessibility on the iPhone 3.1 interface. It is hard to imagine that a touchscreen device with only one physical button could ever be accessible to blind users. However, it would appear they have made it happen.

Marco, a totally blind user who works with Mozilla wrote in his post My first experience using an accessible touch screen device:

I must say this was an amazing experience! My fingers definitely need to get used to gestures such as flicking or tapping, or using a rotor. But having an iPod Nano 4th generation helped with that, since moving the finger over the screen like on a dialer felt most like tracking around the iPod’s click wheel. Even the sound the rotor makes is the same.

This amazing result is made possible by Apple’s VoiceOver technology which is extremely hard to describe. However Apple do provide a video that demonstrates the technology in action and I highly recommend you watch it.

Do you need cake if the icing is amazing?

On last week’s show I talked about 3 Ways to Stand Out From the Crowd. One of the things I mentioned as part of that post was Paul Annett’s talk at SXSW called Oh… that’s clever. In this talk he looked at ways to add design delights that excite and amuse users.

Although I am a massive fan of this approach, it can be taken too far. A Sitepoint article entitled: Do You Need Cake if the Icing is Amazing? looks at one example of where this happened.

The article is about the HEMA website where as the author describes it:

The site renders as what appears to be a garden-variety, IKEA-like online store: navigation tabs along the top and popular products displayed in a grid. Yawn. yawn.

That’s when reality seems to break, and strange and wonderful stuff start to happen.

It all begins when a plastic cup tumbles over, bumps the sticky tape, and a domino effect is set in motion. The tape then crashes onto the stapler before squishing the cake, noisily sliding down the xylophone, and knocking over the fluorescent pens like skittles.

This chain of slapstick events continues, drawing ironing boards, blenders, yo-yos, coat hangers, and kettles into the growing maelstrom before eventually breaking out into parts of the site navigation and text.

By the time this sequence of events has all played out, the tabs are torn and frayed, the navigation text has collapsed into a puddle, and confetti flutters about from above. Very, very cute.

The post is an interesting analysis of the pros and cons of this kind of approach. It concludes by saying:

But as sublimely clever as the animation is, I have to wonder if this project, and the buzz it created, has translated into anything particularly useful for the HEMA business.

What’s more, I wonder how many users have ended up feeling disappointed, frustrated, or confused by being unable to find some of the “bread and butter” basics like locating a store, giving feedback, or asking a question.

I have to say I agree. Although adding design delights and easter eggs is nice, it is easy to overstep the line and end up damaging usability and accessibility.

GIT: Your new best friend

If you develop websites as part of a team you probably use a version control system. We do at Headscape and it seems to be common practice. At the most basic level a version control system allows you to manage files, prevent overwriting by multiple contributors and allow rollback to previous versions of an entire site or a particular file.

The dominant player in this market is Subversion but there is a new kid on the block which seems to be getting a lot of press.

Git is a free & open source, distributed version control system designed to handle everything from small to very large projects. Every Git clone is a full-fledged repository with complete history and full revision tracking capabilities, not dependent on network access or a central server.

This distributed approach has a number of obvious benefits, but it would appear this is just the tip of the iceberg. Think Vitamin has published a post entitled “Why You Should Switch from Subversion to Git” which explains the advantages of Git in full.

There is also a detailed introduction to Git on Sitepoint entitled “Git: Your New Best Friend“.

I freely confess that I know nothing about version control systems (that is Dave and Craig’s areas of expertise). However, I have seen a lot of love for Git online and if you are a developer this is almost certainly worth checking out.

Project management and simplicity

Building and running a successful website is about a lot more than having a great design team. It is also about having a visionary website owner who can think creatively and manage projects successfully.

However, being able to manage projects and have time to think creatively about your site can be a challenging combination. Life is simply too hectic.

Fortunately there are two posts this week that might go someway to inspiring and organising you better.

The first is “How Simplicity Can Help Creativity“. It looks at how simple changes to your routine can help grow your creativity. It contains good solid advice, although admittedly some of the suggestions are primarily aimed at writers.

The second is a Smashing Magazine article entitled “How to Find Time For Everything!” This is essentially a productivity post. However, it is particularly aimed at web workers. It covers everything from your working environment to prioritising and planning.

Both posts are worth a read if you find yourself constantly caught up in the day to day running of your website and never get the opportunity to think more strategically.

Back to top

Interview: Jeremy Keith talks about HTML5

Paul: So we are doing our first interview of the day at dConstruct, and joining us, of course, is Jeremy Keith – hello Jeremy.

Jeremy: Hello.

Marcus: Such a happy hello.

Paul: It is, he’s a happy, jolly person; well known for his jolliness.

Jeremy: It’s true.

Paul: So, HTML 5.

Jeremy: Yes.

Paul: There has been so much talk about HTML 5 recently, we thought, as we’re going to be seeing you, as we’re going to be at dConstruct, we ought to grab you and talk about the subject of HTML 5. Now, I haven’t thought through in a huge amount of depth want I want to cover…

Marcus: Surely Jeremy in cartoon form is want you want to cover?

Paul: Yes, that’s a really good point.

Jeremy: I was really shocked you haven’t prepared.

Paul: Yeah, but actually I managed to watch the cartoon, or read the cartoon.

Jeremy: So that was about you’re level.

Paul: That was about my level, yeah, I felt happy there. So maybe just run through this fundamental issue that XHTML 2 has gone away; HTML 5 seems to be the new thing that all the cool kids like, so what’s going on there?

Jeremy: Okay, well first of all HTML 5 has been around for quite a while; they’ve been working on this, so nothing has particularly changed. Well, Google had their IO Summit thing a few months back, and they came out and said, “We totally support HTML 5, and we think it’s the future”, and suddenly a lot of people got very interested in HTML 5 who hadn’t been paying attention, which is a bit weird. It’s like it’s been going on for ages, but as soon as Google says it’s interesting then people are interested. So that was one thing that kind of sparked a bit of interest in HTML 5 which is kind of good to see. But then the whole XHTML 2 thing was just really bizarre because I hadn’t realised the misconceptions that a lot of plain old working web developers were under about the format. Basically, XHTML 2 has been dead for years, and I thought everyone understood this.

Paul: No.

Jeremy: Okay, so HTML 4.01 was finalised around 2001, and after that W3C said okay, HTML is done, and we think the future is XML based… all these various XML based technologies, and amongst that is XHTML. Now, we all rated XHTML 1, but all that was, was just HTML 4, really. I mean all it is, is just an XML version of HTML. Nothing new was added, it’s all the same elements; everything works pretty much the same. So, really, XHTML 1 is just HTML, and most people used it that way, they would serve it as HTML. This upset a lot of people who thought, “Oh no, you’re serving XML as HTML and that’s bad,” but most of us didn’t care, you know. Browsers rendered it, we were able to validate against it, and that was good. I mean that’s why I use XHTML 1. I serve it as text/html, I don’t care that browsers then treat it as HTML, I get the validator telling me if I forget to close a paragraph, or if I forget to quote an attribute; that’s useful to me as a web developer. But it’s not a completely different format to HTML, it’s just HTML redefined as XML.

XHTML 2 is what the W3C started working on after HTML 4 was finished. XHTML 2 was going to be a complete break; an utterly new format. I mean things like you wouldn’t have an image element, you would have ‘object’ to cover any kind of thing you would put on a page. All sorts of things that really, theoretically, were wonderfully pure and abstract, but practically, just no way anybody’s ever going to use this, because it wasn’t backwards compatible with all the content on the web today.

So there was this kind of split in this W3C around 2004. There was this one particular meeting where the W3C really put their foot down and said, “The future is XML and particularly, XHTML 2. We know it’s not backwards compatible, we don’t care, we’re going to plough forward with this.” And some people in the W3C said “That’s it, we can’t deal with this”, and split off into this separate splinter group (this was Opera and Mozilla at this point), and they called themselves the ‘WHAT Working Group’. Web Hypertext Application something… I don’t know. It’s clearly a ‘back-ronym’ right? They came up with the word ‘what’ and figured out words to go around it.

So, they start work on this thing which they call HTML 5. That’s kind of this buzzword umbrella term to cover one, the next version of the mark-up language we know as HTML, two, XForms which is a good thing that the W3C have been working on to make life better for web developers, but mostly this idea of what they were calling web applications one, which was the idea that we’re moving from documents to web apps, and that’s what real people working on the web really need; fill in the gaps in HTML… We’re working with HTML now to kind of force things to act like applications, we don’t have native things to build applications like, let’s be able to make applications natively so that we don’t have to rely on a plug-in like Flash, or Silverlight, or any of these other non-open technologies.

So that started in 2004. Meanwhile XHTML 2 is being developed at the W3C in the ivory tower where no-one is actually going to use it, and in 2006 Tim Berners Lee wrote a blog post and said, “Yeah we were wrong, we were wrong.”

Paul: Good for him.

Jeremy: Yeah he said, “Actually HTML is still good and is actually the future on the web,” and restarted a charter for the HTML working group. So in 2007, the W3C start work on HTML 5, as in the sequel to HTML 4.

Paul: Corr, this is complicated!

Jeremy: Working with the W… what, working with the WHAT working group?

Marcus: I need a coffee.

Jeremy: I know, I know.

So basically now you’ve got two groups working on this one spec. You’ve got the WHATWG which has a very open process, you’ve got the W3C which is generally more closed, although the HTML working group is more open than most W3C things. A lot of things with W3C happen behind closed doors. Actually with the HTML working group now, anybody can join; it’s a little bit convoluted how you join, but anybody can join.

Meanwhile XHTML 2 was still being developed, you know, down in the cellar they’re working on XHTML 2. But everyone knew, or I assume everyone knew, that it was like this kind of joke really – it wasn’t really intended for working web authors to use on the public web. So earlier this year, finally, 2009, W3C announced, “Oh buy the way, we’re not renewing the charter for XHTML 2″, and most of them went, yeah, no surprise there – really it’s been dead for years.

But a lot of people got really confused, “Oh no I have to change from XHTML to HTML now; I have to change all my mark-up back.” No, if you’re writing XHTML 1, that is basically HTML anyway, and HTML 4 and XHTML 1, those doctypes aren’t going anywhere, your documents are still perfectly good, you don’t have to change anything; everything’s absolutely fine. And what also happened was that some of these people, who were sort of traditionally, as I said, hated it when people like me would serve XHTML 1 as HTML, “Oh no the browser’s treated it as HTML”… They started gloating and saying, “Ah, this is great, this proves that the problem is XML and XHTML in particular, and everyone who ever used XHTML was a fool”, more or less… which really bugged, because like I said, Gareth Rushgrove write a great blog post about this. The reason I use XHTML is to make the validator more powerful, it catches those little things. Basically, it’s like a best practices coding style. So in the same way you’ve got things like JSLint that catches JavaScript coding practices, even if your JavaScript is perfectly valid and will execute, this thing will catch little things which aren’t best practices. That’s what I use the validator for when I write XHTML – it catches little things that wouldn’t be caught if I was writing HTML. So even though I think that’s the reason most developers use XHTML, these people who really looked down on XHTML from the start were like, “Hah-hah, we won!” and were gloating now, and that kicked off a whole shit storm. I’m sorry I shouldn’t say that!

Paul: That’s okay.

Marcus: You can say what you like!

Jeremy: Yeah, so that needed clearing up and a bunch of us were like, “Okay, this is the story and this is what it’s like with XHMTL 2. I know it sounds like XHTML 1, but actually they’re different as chalk and cheese.” I wrote a blog post, and that was okay, and this guy Brad turned it into a comic, and then everyone read it. Then they were, “Oh now I get it – cartoon Jeremy says it’s like cheese, so now I understand it.” No seriously, it did make a big difference, it was more accessible…

Marcus: You must have been happy with ham and hamster…

Jeremy: That I did like; that got quoted on Twitter a lot.

Marcus: Fantastic.

Paul: So this leaves you writing what now? Are you still writing XHTML?

Jeremy: Let’s take sites I’ve built already, so my own personal site, adactio.com, that’s XHTML 1, it has been since 2001, I’m not going to change that. Actually I’ve made a vow not to change my mark-up anyway. Because I kind of assume when people redesign their sites, they change their CSS and they change their mark-up, and I think…

Paul: That kind of destroys the whole point of it, yeah.

Jeremy: So whenever I do a redesign, what I actually do is I add sort of a skin on top. So I’ve got a bunch of skins to my site, I kind of made a vow to myself that even if I’m doing a redesign and think it’ll be really useful to change the mark-up here, but that’s just me personally. Actually at work, and on other projects, I do now use HTML 5.

Paul: Right. Now how does that work, because everybody says, “Well, HTML 5 isn’t supported.”

Jeremy: It’s not ready yet.

Paul: No, exactly.

Jeremy: 2022…

Paul: Yeah, yeah – all of that kind of stuff.

Jeremy: Here’s the thing. If you want to write HTML 5, you take whatever doctype you’re using today, XHTML 1, HTML 4, HTML 3.2, and you change that doctype to ‘doctype HTML’, and there you go you’re writing HTML 5.

Paul: Okay!

Jeremy: So most of HTML 5 is HTML 4. The vast, vast majority of it is exactly the same language, and yet even that is really, really ambitious because one of the things they’re doing is they’re going to define error handling for HTML. Every version of HTML before this, 3.2, 4… All of these previous version, they just defined here’s what authors can do, you’ve got this element, you’ve got that element, boom – the end.

They never defined what happens when you do something wrong, or what a browser should do when it encounters mis-nested tags, things like that. So the browsers have had to kind of invent it, and what happens is that most browsers… Talk to a browser maker and they spend fifty percent of their time figuring out how does Internet Explorer handle this error, and recreating that. A huge amount of time is wasted on this. Or, whatever the leading browser maker is today, how does that browser handle errors? We need to copy that and reverse engineer it. The spec doesn’t tell them how to handle errors. So HTML 5, one of the ambitions is to take HTML 4 and define error handling for everything in it. That alone is massive; massively ambitious. And that alone would take a long time.

In addition, there’s new stuff. So you’ve got this web form stuff, you’ve got new types of inputs, user agents will be able to give us, you know, calendars and sliders and all this stuff, really cool. You’ve got some new structural elements, you’ve got some new rich media stuff like audio and video, you’ve got canvas… So that’s on top of the error handling. So, yes HTML 5 has a lot of new stuff that, frankly, you can’t use today, although a lot of it’s quite well supported, obviously not Internet Explorer, but in a lot browsers, you can use stuff like audio and video, and canvas and stuff like that.

You can’t use all of HTML 5 today, that’s true. But we probably don’t use all of HTML 4 today. For example, if you say, “I’m not going to use a mark-up spec if all of it isn’t implemented in the major browser vendor,” which would be like Internet Explorer, you say, “I’m not going to use a mark-up spec unless Internet Explorer fully implements it.” And yet you would have been using HTML 4 for years. Now, Internet Explorer didn’t fully implement HTML 4 until Internet Explorer 8 when they added support for the abbreviation element.

Paul: Right, okay.

Jeremy: Internet Explorer 7, Internet Explorer 6, Internet Explorer 5, didn’t support HTML 4, if you define support as every single thing in the spec. And you’ve been using CSS 2.1 for years. There isn’t a browser out there… Actually Internet Explorer is the first browser to fully support CSS 2.1, although you could quibble on some stuff, and yet we’ve been using it for years. Because if, ideally, you have to wait until something is fully support until you use it, it’s kind of silly, you just support features. You decide this feature is supported enough that I can use it. Enough browsers support video or canvas that I can use it today. So when people say, “I can’t use it because it’s not ready or it’s not support,” that’s too binary; it’s too simplistic a way of looking at it, because all the technologies we use today, CSS, HTML, are partially support in different browsers – that’s just the way it is.

Paul: Let’s talk about the new structural elements that have been added in to HTML 5. So you’ve got header and footer, and these various other things. I mean obviously you can’t use those as is at the moment because the support isn’t wide enough, is that correct or incorrect?

Jeremy: Well, support’s actually pretty wide in a lot of browsers. What a lot of browsers will do… It’s not so much that they’re supporting these elements, it’s just that they allow you to use arbitrary elements. So in Firefox and Safari, I could write a tag called ‘foo’, and in my style sheets I could say ‘foo, display block, colour red’ and it would work. So if you define working, or support as that, then actually yeah in Firefox and Safari and Opera you can use these new elements today.

Internet Explorer doesn’t have that, Internet Explorer doesn’t let you use arbitrary elements, but there’s a little JavaScript hack you can use to make Internet Explorer behave. In fact we’ve been using this for years with the abbreviation element. If I wanted to use abbreviation and style it in Internet Explorer, in JavaScript I would say ‘document.createElement(‘abbr’)', and suddenly I could style it. It doesn’t make any sense, but then again whatever does with Internet Explorer. So we use the same hack to say create all these new elements.

Paul: Okay, so are you using them at the moment?

Jeremy: No. What I’m doing is, I’m trying to get my head around how these structural concepts work, but I’m not ready to make the move to new elements, and I’m not ready to do client side work that relies on JavaScript, which is what I’d be doing if I used this JavaScript hack. So what I do is, I take the concept, I take the names – header, footer, section – and I use them as my class names. So I’ll have div class equals section, div class equals header, div class equals footer, and it’s partly so I can get my head round how these things work together, and also, it allows me to basically have self documenting code in that when I’m handing it off to developers that are back end developers who are building a system, I often give templates – HTML templates. And I would usually have to write out this is how this class works, and I’d have to comment everything and say the class of ‘foobar’ is used for this kind of content. And now I can kind of say, just link to the HTML 5 spec; header is for this, footer is for that, section is for this, and okay I’m using classes not elements, but the definitions…

Paul: Are the same.

Jeremy: Are the same. So there’s benefit for me getting my head round this new stuff and sort of getting a jump up on what we’re going to be using in the future, and it’s a benefit for documentation because it’s a great big spec documenting all this stuff. So I’m using them but not really in day to day work.

Paul: Because there’s some debate, is there not, about these pre-defined elements, you know, things like footer I mean. I was reading Zeldman about, well footer isn’t what you expect it to be. So potentially, as this is still in draft, you might be using footer in what will ultimately end up being the wrong way because they might change the way footer works and then you’re going to be out of sync with things.

Jeremy: Yeah, but it’s by using these things that you get to know these problems, and flag them up and bring them to the working group. In Zeldman’s thing, he said… So Zeldman asked a bunch of us to get together with him in New York about two weeks ago, because basically we’re all working web developers, we’re all interested in HTML 5, but we’re kind of sceptical of it, so like we’d be hearing conflicting things people say, there’s a lot of rumours going round, we don’t know what to believe, let’s all get together in one room and go through the spec.

We spent two days literally just going through the spec, and figured out how it affects us. And we’re not interested in the browser features, and the DOM stuff and the APIs, we’re interested in the structural stuff; we spent most of the time talking about this and the semantic meanings of these new elements, and that’s where we came against these issues. Like, wait a minute, the content model for what they call footer is totally different from what any working web developer would call a footer. So in our element, footer, you can’t put a nav element, and you can’t use headings, you can’t use H1s or H2s. But you ask a working web developer what footer is, and they point you to Flickr, or their blog they have, you know, “Oh a footer’s where I pull in my pictures from Flickr, and I have other navigation, and stuff like that.” So instead you have a flat footer which has kind of got a bit more popular in the last few years. So there’s a clash there in the semantic meaning of footer in English for most working web developers, and the semantic meaning of footer the element, and that’s something that came out of that meeting, we realised okay, this is an issue. That’s one of the things that we flagged up.

And there’s a few things like that, that when you really sit down and look you realise hang on, these two elements sound really, really similar, why are there two of them? So there’s a section and an article… For historical reasons I can see why they’re different, but they’ve actually evolved over time now to converge and get really similar. So we found a bunch of these things as authors we realised there were issues with, and we’re bringing them to the working group, we’re flagging them up, we’re publishing them, we’re blogging about it. And I think the reason this hasn’t really come to light before, is that most of the people on the list, and in IRC and the WHAT Working Group, they’re kind of hard core developers making web apps. These are the people building Google Wave, and building these big, big apps, and they’re not really thinking so much about the semantic meaning of documents. And also, there’s the browser makers, which is good – you want browser makers involved in the spec so that you know this stuff’s going to be implemented…

Paul: Yeah, of course.

Jeremy: As Hicksy keeps saying, you know, if one browser maker says I won’t implement this feature, that feature comes out of the spec, because otherwise the spec is just fiction, and it wants to be practical. And of course, that means the spec won’t be the best possible spec it could be, but it will be the best possible spec it can be and be implemented…

Paul: …Realistically.

Jeremy: Exactly, realistically. So, there hasn’t been enough working web developers involved in the process, in my opinion. There’s a lot of programmers, a lot of browser makers, not enough just, you know, working web developers. So, recently, Zeldman made this effort, let’s all get together. I’d been researching it a lot, and so I was explaining stuff to them, they were telling me about how they felt about this stuff, there was Eric Meyer there who’s got a lot of history with working with specs, and Tantek was there and he knows about how to read these kind of specs. So together we had a really good group of people, and we were able to come to the consensus that we can all… I mean, we disagreed on some stuff, I’d like to have this feature, and I don’t care about that feature, but there was a core set of stuff we all agreed on that was in the spec: this was confusing, that needs to either change, be dropped, stuff like that, and that would be our concerns. And what I what I’ve been encouraging people to do on my blog, which has kind of turned into an HTML 5 blog…

Paul: Yeah it has, I’ve noticed this!

Jeremy: …Is to get you, the kind of people who would read my blog, to get involved in the process, to get involved in the WHAT WG, and I’ve seen it happening, it’s great. I’ve seen web developers going on the IRC channel asking really basic questions like, “I’m confused by this element, how am I supposed to use it?” And then these people who are writing the spec, having to explain in normal words how it’s supposed to work, and then realising hang on this might be a problem, if I can’t explain it well then maybe this element is going to be an issue, and things like footer are obviously a problem; it’s got to change.

Paul: I read some article which seemed very left field, which was basically saying why is the W3C actually defining things like nav, and footer, and article, and section and all the rest of it? Why can’t we make up our own tags? Which kind of almost brings you back to XML I guess.

Jeremy: Yeah, the idea of extensibility. I think it’s probably John Allsopp’s List-A-Part article you talking about.

Paul: It wasn’t actually, but yeah I was aware of that one as well.

Jeremy: So there’s basically two schools of thought. What you need to provide is a mechanism for extensibility that allows anybody to extend it, and this kind of is the W3C idea of RDF and RDFA, that potentially you could encode any data in the universe, it’s infinitely extendable, and any author can define a vocabulary. And then there’s the other school of thought which is you keep the extensibility deliberately limited, and deliberately centralised to a community, and that people have to cooperate to decide what extensibility is to be used. Now that basically comes from the micro-format school of thought, where you don’t try and encode everything in the universe. You look for what’s the most common use cases, what’s the minimum you need to allow people to encode those cases, and you quantify that. You say we’ll create an element for that because eighty percent of people are publishing it, but we’re not going to create an element for something that’s really fringe, and sort of left field.

And that’s the way the HTML 5 group have gone, it’s like we’re going to keep things scarce and controlled, and if we create a new element it’s for a really good reason; we’ve thought about it, and it’s actually going to help web developers. And if anything, I think they might have created too many, not too few, and it’s only a handful, there’s maybe like ten new elements, you know structural elements, and if anything I think so of them could go.

So there’s these two very different schools of thought, and I was reading a blog post from 2006, nothing to do with HTML 5, it was to do with this idea of namespaces in HTML, which is what you get in XML – allows namespaces to allow you to create your vocabulary, you can put anything in there. It said if namespaces had been allowed in HTML then during the browser wars in the late nineties when this browser was inventing this tag, and that browser was inventing that tag, and it was just this mess of stuff, if there was a way to infinitely extend HTML, it would have legitimised that. They would have been okay with that, and we couldn’t have complained. As it was, they had to sit down in the end and sit around the table and hash this stuff out, because we complained and said, “It’s a messed up landscape and you’ve got some browsers supporting some stuff and some browsers support another thing.”

So, because HTML is limited, you have a certain amount of interoperability, and so I’ve come around to that point of view. That actually I can see the case for extending HTML and we have some mechanisms, we have the class attribute, a fairly limited extensibility thing, and I can see why for your own personal needs you might want to extend HTML, but I do actually think there’s a benefit to having a community deciding what’s the best elements, as long as that community is listening to all concerns, and that includes authors. My concern is that the community isn’t getting enough input from working web developers, but I see that changing. So I’m actually pretty reassured.

Paul: Okay, that makes a lot more sense. There’s one other question that I want to ask before we wrap things up, which is this canvas element. There seems to be a lot of excitement about canvas, but very little descriptions about what it does and why it’s exciting that is accessible to a lot of people, and understandable by a lot of people. Can you kind of summarise the canvas?

Jeremy: The canvas is a dynamic image.

Paul: Right.

Jeremy: The image element is static, and the canvas element is dynamic over time, and it can be interactive. So basically I believe you can have interactive graphs, you can have moving things like animation, you can draw on it and define movements… So it can do a lot of stuff that say, you know, Flash 1 could do, all this basic sort of stuff, and it is very exciting that where you would have needed a plug-in, you can now write an element and write some script, and you don’t need a powerful piece of software to write this stuff, you just need a text editor and everything’s cool.

So that’s good, and it’s already implemented in a lot of browsers; Safari, Firefox – they’ve got canvas, and people have already done really exciting things. John Resic has ported the processing language into JavaScript, processing.js, that uses canvas; it’s amazing. You’ve got this ball bouncing, and lines going, and generative art; all this amazing stuff – no plug-in required, it’s all native to the browser. That’s great. So the spec that defines canvas is for interactive or dynamic images. It is not for text. The spec doesn’t ever say… in fact it will forbid you from using text. But because it can, people have started putting text in there and then dynamically…

Paul: Because doesn’t Google Wave use it?

Jeremy: Err, I’m not sure about Google Wave, I haven’t really checked that out…

Paul: Perhaps I’m getting confused…

Jeremy: But Google is certainly experimenting with canvas with some things. But there’re things like… Have you seen Bespin? It’s this Mozilla project which is basically a text editor in your browser, or a code editor in your browser, and it’s all built using canvas. It’s incredibly powerful, it’s really impressive. But, those bits of text that are in canvas are just shapes to the DOM, there is no DOM saying this is a string, this is an element, it’s just there are some vector shapes, because canvas is just vector. So any piece of assistive technology just sees a bunch of… like there’s an image here of some kind. And you can find some fallback to describe the image, this is a chart showing blah blah blah, but if you’re putting a text editor in there, there’s no way they can interact with it, it’s just impossible.

Now, you could say, “But that’s not the point,” and the spec should maybe say you don’t use it for this, but people are going to use it for that because you can. So you say, okay, then the challenge is, if people are going to use it for that, even if they should be using a different technology like SVG or Flash, if people are going to do that how do we make it accessible, and that’s where there’s a lot of work going on. There’s people at Apple working on this, James Craig, who’s a really smart guy, he’s working on this idea of a shadow DOM that’s in canvas, so there is work on that. I personally think it’s such a big issue, it’s such a big thing, it’s such a powerful thing, I think it might benefit from being split off into its own spec.

Paul: Oh, okay.

Jeremy: Which has already happened with some HTML 5 stuff. Things like storage and client-side database, there’s all this powerful stuff. A lot of that ends up being spun off into a separate spec because it’s like it’s getting too unwieldy for the mark-ups.

Paul: Yeah, yeah.

Jeremy: And I kind of have this suspicion that this might be the case with canvas, because otherwise it may hold up the rest of the spec, and we’ve seen this happen with CSS 3. There were certain parts of the modules that were really important to solve for internationalisation reasons like text modules, but because that one part of CSS 3 was hard to solve it held up all this other stuff like multiple background images and border radius, and it held the hold thing back, and I would rather see things split off and worked on separately than be part of a spec and holding it back. So we’ll see; canvas is a big, big issue.

Paul: So you wouldn’t be doing a huge amount yourself in Clear Left, doing huge amount with canvas at the moment?

Jeremy: No, but that’s not the kind of work we do, it doesn’t really require…

Paul: But then the kind of work you do is the kind of work that a lot of the people listening to this will be doing. Rather than big fancy web apps.

Jeremy: Yeah, what we tend to do is documents that have interactive elements to them rather than applications that sometimes have document-like parts, and I think most people working on the web are like that, you know documents… Some things you want to be more interactive. So there’s other things in HTML 5 I would use, but that wouldn’t be one of them.

I’ll use some of the new input types already, because the default behaviour, if you say input type equals foo, the browser doesn’t know what foo is, it will just display a text input. That’s the default fallback behaviour for every browser. So if you try one of these new things like input type equals search, well in Safari will get this nice search field the same way you get in the Google search part of Safari; you get this nice styled thing with a little ‘x’ in the corner. Every other browser just gets a text input, which is what you would have got anyway. And there’s a few things like that I use today, because there’s no harm and because there is that kind of degradation that works well. But it’s the little things I use.

Paul: So, let’s finish things by saying okay, there’s some people that have listened to this and thought, “Yeah, really cool. I want to be doing some of that kind of stuff that you’ve just mentioned.” Where do they go to learn that stuff? And don’t say the spec!

Marcus: Where do normal people go?

Jeremy: The full spec has got loads of stuff for browser makers; we don’t care about that – we’re not browser makers. Michael Smith at W3C has actually spun off… Parse the spec, take out all the stuff for browser makers, and that just leaves the stuff for authors.

Paul: See, now didn’t that… That was like today that came out wasn’t it?

Jeremy: No, no, it’s been out for a while, but I pointed Zeldman to it and he blogged about it.

Paul: Ah, that’s where I read about it. There we go.

Jeremy: Yeah, because we’ve got this basecamp going for our HTML 5 super-friends group, and err…

Paul: You’re a super-friend!

Jeremy: Yeah, with unicorns.

Paul: Okay, that’s good!

Jeremy: And Eric was saying, “We should create a version for the spec that’s just the author’s stuff without the browser stuff,” and I was like actually that exists and it’s over here and then Zeldman linked to it. If you look at Zeldman, he’s linked to it; I’ve linked to it in my blog a few times as well. So there’s that, that’s really useful for just getting the semantics. Going to the IRC channel and the chat there, there’s also sites like html5doctor.com, that’s people like Bruce Lawson, and Remi Sharp, and these people. You have a question, you write to them, they answer the question.

Paul: Brilliant.

Jeremy: They also get questions from people with genuine medical problems, because they give out good Google juice for the word ‘doctor’.

So that’s very useful for web developers who say, “How do I do this? I don’t understand this element.” Yeah, start using it. I would say you’ve basically got three options today. You can just swap out your doctype to ‘doctype html’ and stop there, and just carry on doing what you’re doing – that’s one way. You can swap out your doctype and start using the class names that are taken from these structural elements, that’s what I’m doing, that’s another way. Or you can be hardcore. Swap out your doctype and start actually using these new elements, and use this JavaScript hack for IE.

So you’ve got these three levels of how far you want to go. I mean, on your personal site you could use that third option, push the boat out and go for it. I wouldn’t really do it on a client’s site yet. So you’ve got those things, there’s a validator, html5.validator.nu, and actually the W3C validator uses that, so you can validate HTML 5 today, and that means you can use Aria roles in HTML 5, which you can’t do in HTML 4 or XHTML and validate at the same time. So that’s really, really useful having Aria and HTML together. So you can do it today, keep up with HTML 5 Doctor, hang out in the RSD channel, and if you’re up to it, join the mailing list, although there’s a lot of talk from browsers makers. It goes way over my head.

Paul: Okay, thank you so much Jeremy, that was really useful. I think that has certainly clarified a lot for me, and I’m sure for a lot of people listening too.

Jeremy: I sew clarity.

Paul: Yes, thank you for passing your wisdom on to us.

Jeremy: Any time Paul.

Paul: Okay thanks.

Thanks goes to Gareth James for transcribing this interview.

Back to top

Ryan Carson: advice on building web apps part 3

Hey everyone, I’m Ryan Carson, founder of Carsonified.com, the makers of Think Vitamin, DropSend and the events Future of Web Apps and Future of Web Design.

We’ve both failed and succeeded in building web apps so I’m going to share a few tips that we learned the hard way. Hope you find them useful!

  1. Measure marketing success. As developers and designers, we often shy away from marketing as it’s perceived as dirty. This will absolutely kill your web app. So make sure every time you place an ad, send out an email newsletter or ask someone to link to you, use the Google URL Builder and track the results as a campaign in Google Analytics.
  2. Write out the signup steps for your app. Before you even begin wireframing, spend a day jotting down the rough steps that the user will go through to sign up for an account. This helps you spot potential areas for improving the user experience. Make sure to pay special attention to which form fields should be required and what kind of help text you’ll write to accompany the page.
  3. Give away free-upgrade coupons. When we were running DropSend.com, we placed a simple status message at the top of every page of the app. We changed it weekly to make sure people noticed it and we also made it really noticeable with colour. We regularly offered a coupon code which allowed users to upgrade for free for the month and it worked surprisingly well. I think this is because it removes the risk of trying out the more expensive plan. I’d definitely recommend it.
  4. Create content for your potential users. One of the most powerful ways to do marketing for your product is to offer valuable content to your potential customers. This is expensive and time consuming but it’s highly effective. For example, if you’re building a todo list web app, write a blog that offers a free daily productivity tip or GTD hack. Make sure to offer a weekly newsletter – they’re very effective if they’re based on good content (and not cheesy sales offers).
  5. Get your hosting and deployment nailed down. The thing that will haunt you forever is poor hosting and deployment methods. I’d highly recommend that you make a 1-button deployment system that quickly deploys from a development environment to a staging environment and then to a production server. Make sure the database on the staging environment is identical to production, as this will help you spot bugs. I can’t tell you how many times we’ve had trouble because no one except the developer new how to deploy the site. It needs to be easy, bullet-proof, and reversible if things go wrong.

That’s it – hope everyone found those simple tips useful.

By the way, we’ll be discussing other important web app topics at The Future of Web Apps on Sep 30 – Oct 2nd in London. Speakers include Twitter, Facebook, Mozilla, Gary Vaynerchuk, Kevin Rose of digg, Mike Arrington of TechCrunch and more. Feel free to stop by the site at http://bit.ly/fowa-london-09

Back to top

183. Inspired

On this week’s show: Paul shares 3 ways to make your site stand out from the crowd. Matt Curry introduces us to Google website optimiser and Lyle Barras reviews Dropbox.

Play

Download this show.

Launch our podcast player

Housekeeping

A couple of random pieces of housekeeping this week.

Sponsor SXSW

First, we are looking for some Micro sponsors for this year’s Great British Boozeup. In case you don’t know the Great British Boozeup is a party that Headscape and Clearleft have thrown for the last few years at SXSW.

This year we are looking for some additional sponsors. So if you are a company interested in reaching out to the web design community and have £500 to spend, drop us an email and will look at making you a sponsor.

We want to showcase your work

Second, I really want to start showcasing upcoming members of the web design community on Boagworld. Therefore, if you have written a great blog post that you think Boagworld readers would like, drop me a line with a link to the post and we will look at reprinting it on Boagworld. Obviously we will link back to your own blog and publish a little bio about yourself.

Back to top

News

6 Steps to Creating a Unique Selling Proposition

One of the first questions we ask new clients before beginning a site redesign is “what are your unique selling points?” Of course in reality it is extremely rare to find an organisation that have truly unique selling points. However, every organisation should have a clear idea of what their distinguishing features are. What are the things that makes them stand out from the crowd.

What surprises is how few clients know what their USPs are. This is fundamental stuff and yet many organisations fail to address them. Whether online or off an organisation needs to be able to clearly articulate what sets them apart.

There is an excellent post on Sitepoint this week entitled “6 Steps to Creating a Unique Selling Proposition” that kinds the reader through the process of establishing their USPs. The six steps include:

  • Describing your target audience
  • Explaining the problem you solve
  • Listing the biggest distinctive benefits
  • Defining your promise
  • Combining and reworking your promises
  • Cutting the whole thing down into a single statement

It is a great post and definitely worth a read if you are a website owner trying to communicate what your organisation is about online.

Building a blog with HTML 5

Last week I was at the Future of Web Design Tour in Bristol and was fortunate enough to hear Bruce Lawson talk about building a blog with HTML 5. It was a real eye opener.

Many of us have the perception that HTML 5 is a technology we will work with in the dim and distant future, when all the major browsers fully support it. However, that is not the case. Browser manufacturers already support many of the elements in HTML 5 and handle gracefully many of those they do not. The result is that we can start building sites using HTML 5 now.

In Bruce’s talk he built a basic blog live on stage demonstrating many of the new characteristics of HTML. It was an amazing demonstration that significantly improved my understanding of how this new specification would work in practice.

Unfortunately the talk is not online yet. However in the meantime Bruce has released an article on HTML 5 Doctor which covers exactly the same subject.

This is a ‘must read’ if you code HTML. There really is nothing stopping you using HTML 5 right now. However, if you are still to be convinced listen to next week’s show where we plan to interview Jeremy Keith on exactly this subject.

Colour communicates meaning

Colour is one of the most powerful tools in a designers arsenal. Colour can have a profound impact on how we respond to design and significantly influences our behaviour.

However, it is often an area that is underestimated by website owners. They view colour as a personal preference not as something that we respond to collectively. That is why I was so pleased to see Rob Mills post “How Colour Communicates Meaning.”

The post is a great introduction into colour theory and the meanings that are communicated through your choice of colour. The post looks at:

  • How colour affects our mood
  • How different colour communicates different messages
  • The cultural significance of colour
  • How colour is inspired by our surroundings
  • The political and religious associations of colour

It is a great post that introduces the reader to the world of colour theory.

With all of that in mind it is unsurprising that picking a colour palette can be tricky. One approach used by designers is to use a key image or photograph as the basis for a colour palette. Another post we came across this week shows you how to use Kuler as a tool for doing exactly this. So next time you are struggling to select a colour palette checkout this Sitepoint post on how to use Kuler to pick a palette from an image.

The Seven Deadly Sins of Web Project Management

TheSamBarnes.com is a great blog about web project management. We have mentioned it before on the show and it is certainly one of my regular pit stops.

Web project management is not the most exciting of subjects, but one that to some extent we all have to deal with. Whether you are freelancer running your own projects or a website owner dealing with politics and external suppliers, there is no avoiding project management.

A new series on the blog particularly caught my eye. It features the seven deadly sins of web project management. At the time of writing there were only two posts dealing with four ‘sins’. Nevertheless it is shaping up to be a great series.

If you ever find yourself managing projects this is a series you will want to read.

Back to top

Make your website stand out from the crowd

This week we discuss how too many websites look the same as their competition. If you want users to remember your site it needs to stand out from the crowd.

Read 3 Ways To Make Your Website Stand Out From The Crowd

Back to top

Listeners feedback:

A/B Testing

Joshua writes: I recently read an interesting post over on the 37signals blog about how they use Google Website Optimizer to test different versions of their landing page to see which converts the best. Do you guys have any experience using tools like this? Any tips or thoughts on the subject?

I’m Matt Curry, Head of New Media for apetito, and for my sins I’m one of Paul’s clients. We’ve worked with Headscape for around 5 years now, predominantly on WilthsireFarmFoods.com, an ecommerce site with a unique elderly customer base, which if you subscribe to the podcast, you’ll know a fair bit about by now.  As at WiltshireFarmFoods.com we have a healthy obsession with conversion rate and website optimization, so Paul’s asked me to respond to a reader question this week. How exciting.

Joshua writes: I recently read an interesting post over on the 37signals blog about how they use Google Website Optimizer to test different versions of their landing page to see which converts the best. Do you guys have any experience using tools like this? Any tips or thoughts on the subject?

Google Website Optimiser is a tool used, unsurprisingly, to optimize the conversion rate of your site. Now every site ultimately wants a user to do something, be it buy a product, subscribe to service, make a donation or something simply forwarding the article to a friend – if your site has a clear goal, Google Website Optimiser allows you to perform 2 types of tests on your website content, A/B Split tests and Multivariate Tests.

In the case of 37 Signals, they were seeing if Website Optimiser could help them increase the conversion rate of their paid plan signup page – they were testing different variations of copy for the Heading and subheading of the page, to see which combination worked the most effectively.

This is of course nothing new, and indeed, some platforms such as Demandware have content testing built in, alternative analytics packages such as Omniture or Coremetrics also do this, and looking at email content, many ESP’s such as Pure allow you to test multiple subject lines and broadcast times. At Wiltshire Farm Foods, being as obsessed with conversion rate as we are, we’ve performed numerous tests, such any rate changes a new design brings, testing changes to Average Order Value during a price led promotion, and checkout abandonment rates given different variations of microcopy.

Whilst simple A/B testing can be performed in easier ways – remember a simple landing page conversion test can be done by varying destination address in your Google Adwords, Google Website Optimizers power comes from it’s multivariate testing suite. This allows you to perform tests on variations of your content, as in the example from 37SIgnals, to see which combination works better at driving your visitors to action.

However, if you have a particularly complex site, as we have, Google Website Optimiser can be frustratingly limited. For example testing a new product detail page layout across the site – when you have friendly URLs in place, which we do via an isapi rewrite,  can be rather difficult. Google Website Optimiser is very strict on the criteria needed to complete a test, and if you most of your content is dynamically generated, be prepared to write considerable additional code to ensure you’re calling the correct tracking script for each experiment.

If all this sounds too much for you, remember many such tests can be done using User Defined Variables in your Google Analytics. I dearly love the Advanced Segments part of Analytics, and despite “still” not being able to overlay segments, it can tell you a great deal about your site. So, for example, for an A/B test based on a redesign of dynamic content such as a Product Details page, you could set the variable to “New Design” or “Old Design”, and track goal conversion from there.  Just remember to drop a cookie to ensure a consistent experience. Being able to set visitor variables like this in code, rather than having to rely on the strict requirements of Google Website Optimiser, means your open to test a great deal more.

Remember, that if you’re testing a radical change to your website, you should expect an initial drop in conversion – users tend not to like change! You may wish to only test the new design with only a small percentage of your traffic, and increase the percentage as you become more confident. When we launched the new Wiltshire farm foods website mid February, we started with only 1 in 20 visitors seeing the new design, and gradually (or not!) increased it as we saw the positive effect on conversion rate it had.

And of course, nothing even got to this stage without User Testing – but that’s a topic for later!

Personally, I’m surprised by the significant increases in conversion that 37Signals had – how many of us even read the headings of such pages – you normally can’t expect vast jumps in conversion rate unless you are radically changing content.

The most successful variant 37Signals tested was the one that communicated no commitment, a minimal time cost – signup takes less than 60 seconds, and a delayed monetary cost with a 30 day free trial – yet giving immediate utility to the user.  I’m not exactly shocked it won! If you haven’t read Richard Thalers Nudge, which deals with incentives & choice architecture, then I heartily recommend it.

Of course, any good website copywriter would be able to tell you this, without copious testing.  There’s certainly a danger, especially when you are looking at testing and changing copy that each page may end up with a different tone of voice, and your site could easily come across as schizophrenic. If you’re serious about conversion, employing someone to develop an audience-appropriate tone of voice is very important.

I’d be interested if 37Signals play around with the words “Free Trial” – since with nowadays promotionally savvy audience, these words can have negative connotations.

Finally, I would say, as a caveat, don’t get wrapped up in statistics, it sounds corny, but analysis paralysis can happen, getting so wrapped up in each little percentage point increase that you forget the bigger picture. We’re all clever people, we hopefully know our audience, what works and what doesn’t, and we should trust our gut instincts more.

A review of Dropbox

Lyle Barras has been kind enough to send us an audio review of Dropbox:

Hi Paul and Marcus, my name is Lyle and I’m a hobbyist web developer. I’d like to give a quick review of an online tool called dropbox and a little about the way I use it.

Dropbox is an online storage device. You simply sign up for an account at www.getdropbox.com; the free accounts give you 2GB of storage, and then download the little application.

You can download as many copies of the application as you want so that you can sync up as many computers as you want and the really great news is that it’s Mac, Windows and Linux compatible. I have tried it on all three and it works seamlessly. There is also a pretty cool web interface if you happen to be on a machine that doesn’t have the app installed.

As soon as you place a file or folder into the dropbox then it sync’s to the other machines you have set up and the file is there almost immediately.

If 2GB isn’t quite enough you can upgrade to one of the two paid accounts. Pro 50 gives you 50GB for $9.99/month and Pro 100 gives you 100GB for $19.99/month. I think the Pro 50 is pretty good value if your storage need is big enough.

At any time you can refer the tool to your mates. If they then sign up, even for a free account and download the app then you get another 250MB of free storage and so do they. To date I have referred two of my mates and got 500MB free.

I have found one problem with dropbox. When I upgraded my iMac and MacBook I found dropbox to be a bit glitchy and crashy. I did a bit of Googling and found that dropbox had already released a new fixed version of the app.

To pinch a bit of the advertising guff from the site

Dropbox replaces:

  • Emailing file attachments to yourself and other people
  • Using USB drives to move files between computers
  • Renaming files to keep a history of previous versions
  • Complicated backup software
  • FTP servers, system-specific sharing methods, Network Attached Storage (NAS)

As I said at the beginning I’m a hobbyist web developer. I had been using a memory stick to carry round my work as I can really justify one of these posh versioning tools. I was sick of thinking “Right I’ll do a little bit” and find that I have left the drive at home or in the office.

Dropbox replaces all that. I just use it as my memory stick and it’s always there I don’t even need to be connected to the net as long as I have sync’d the machine recently.

I’m utterly sold and couldn’t imagine not having my dropbox now.

Thanks for your time guys, keep up the good work and keep up the dodgy jokes Marcus.

Back to top

ForeUI: Create Skinnable & Interactive Prototype

ForeUI is a handy UI prototyping tool. It can rapidly create skinnable and clickable UI prototype for your website or software, and run the interactive simulation in your web browser.

ForeUI provides a set of predefined elements for creating mockup, you can drag them into the editing area and tweak them. You can also create your own elements and libraries.

ForeUI makes prototype skinnable, by changing the UI theme, all elements in the prototype will change their look. Currently ForeUI provides four UI themes for prototyping, including Hand Drawing, Wireframe, Windows XP and Mac OS X themes. These UI themes cover the high, middle and low fidelity degrees, you can switch the UI themes at anytime, thus the fidelity of wireframe will be switched as well. The figures below is the same mockup rendered with different UI themes.

via ForeUI: Create Skinnable & Interactive Prototype | Konigi.

Looks like Balsamiq has some competition here.

175. Collaboration

On this weeks show: Ryan and Stanton take the helm, we interview Simon Collison on client collaboration and answer your questions about improving your design skills

Play

Download this show

Launch our podcast player

News

How to design a portfolio site

First up is a two part video series on Carsonified.com called “How to design a portfolio site” in which Elliot Jay Stocks shares his advice and experience. If you’re a freelancer, you know how important your portfolio is to your business and these 2 30 minute screencasts are filled with useful information such as:

  • The three key concepts that make a portfolio site
  • How to build great case studies to reinforce your expertise
  • The ultimate portfolio checklist
  • How to use narrative theory to strengthen your portfolio
  • How to take your design from Photoshop to HTML and CSS
  • How to integrate your design into a CMS like WordPress
  • Lots, lots more.

I’m also going to give a slight plug here to my co-host Ryan, as he’s just published a video interview with Elliot on his site havocinspired.co.uk where he asks Elliot about his career and how he got where he is today. Both definitely recommended viewing!

I’m also going to give a slight plug here to my co-host Ryan, as he’s just published a video interview with Elliot on his site havocinspired.co.uk where he asks Elliot about his career and how he got where he is today. Both definitely recommended viewing!

A/B testing and microcopy

Paul talked about microcopy last week and another article passed my way which further highlights just how powerful microcopy can be and how A/B testing can help to improve your calls to action. Dustin Curtis performed an experiment over the past few months where he tested a specific call to action on his website which prompted people to follow him on twitter and measured the number of clickthroughs various versions generated.

He started with the statement “I’m on Twitter.” Which led to a 4.7% clickthrough rate, then switched to a command “Follow me on twitter.” which resulted in an increase of 55%. He then went on to try a stronger personal command “You should follow me on twitter.” which increased even more and finally added a literal callout “You should follow me on twitter here”.
Overall, the clickthroughs increased by 173% showing just how much of an impact microcopy and A/B testing can have on your site and it might be something you want to look into.

Did Digg and YouTube just spell the end of the Internet Explorer 6?

Sometimes I sit back and wonder what life would be like without IE6 and the whole world is sunny, I sit in a lush meadow with my laptop, coding away without a care in the world… If only.
Every so often someone sets their sights on IE6 and declares war, most of the time we scoff, knowing IE6 has too many troops to be defeated, but two new armies have stepped into the ring, and they’re big armies at that. Digg.com and YouTube have both recently announced that they will be taking sides against IE6 sometime soon. This was highlighted in a blog by Chris Heillman.

A post on the Digg Blog shows that they’ve been researching the situation for quite some time, monitoring the reduction in IE6 use and weighing the number of visitors using the browser to the costs associated with developing specifically for it.

Admittedly, the audience of Digg might be slightly biased towards a more tech-savvy crowd, so these results might need to be taken with a potential overdose of salt, but it’s encouraging to see a fairly large outfit taking the time to research the situation and I’m sure that they’re not going to shut off support completely, but concentrate their bells & whistles on the newer, more capable browsers leaving just the content accessible for IE6.

YouTube have already started showing a message to IE6 users saying that they will be ‘phasing out support for their browser soon’ and recommending the user to upgrade. Chris points out this might not be as impressive as it first seems as 70% of YouTube’s traffic is from embedded media.

He also points out that both Digg and YouTube are social web sites, which are normally blocked by the kind of organisation which forces their users to use IE6, so the true impact of this news remains to be seen.

Back to top

Interview: Simon Collison on client collaboration

Ryan: OK, joining me today is Simon Collison. Hello, Simon.

Simon: Hello, nice to be here.

Ryan: And we’re here at the Future of Web Apps tour in Leeds, and you’ve just done a talk this afternoon, it was a very good talk, I really enjoyed it.

Simon: Smashing, thanks for that.

Ryan: And we thought it would be really good for our listeners to just cover a few of the things you talked about in that talk. Now your company, remind me your company name.

Simon: Er yep, Erskine Design. Or Erskine if you’re looking to impress, I think. Not quite sure where to stand on that.

Ryan: Where did that name come from?

Simon: It is, I think the origin of it means ‘upon the knife’, which is quite interesting. So, obviously, it’s a place in Scotland, it’s also an old saying and if you tweak it or someway, in this day and age, it means upon the knife, which we quite like for a design and development agency. We often feel as if we’re on the knife. So, it works quite well.

Ryan: Cool. And you started off your talk by telling about your biggest disaster, which I thought was quite interesting, but you were quite open about it and that was the Vanilla Pages.

Simon: That’s right.

Ryan: Just for the benefit of us listeners, would you like to tell us what the Vanilla Pages was, is…

Simon: Sure, definitely past tense, um yes. The Vanilla Pages was an idea that was brought to us and we worked on that for a client team, so it’s very important to stress that; it’s not our disaster, as such; we may have facilitated it. Basically, the Vanilla Pages was an idea for a web app that fitted a perceived niche in the fine food and drink arena. THe idea for the Vanilla Pages was that is was a 24 hours a day, 365 days a year tradeshow. Suppliers, wholesalers, buyers kind of creating links and making connections and finding new sales opportunities. On the face of it, we thought this was a good idea. Also, Erskine had only just begun, so we were looking for new and interesting clients and we met with the client we thought they had some good ideas and we spent some time discussing what the process would be. Now, obviously this was 2 or 3 years ago and our process is very different now – very well honed – but at the same time we had enough experience as a team then, we were kind of discussing the need to understand the audience, really get to the bottom of this niche and find out: “What do people really want, will they use ‘X’, will they want to do ‘Y’ abd so on”. And initially, it was like “Yeah, this sounds great” and we signed everything and we began work and instantly we found that our suggestions were being thrown out. There was very little room for us to use our experience to make suggestions and say: “have you thought about this?”, “why don’t wet a focus group together, why don’l;t we ask some retailers some questions” and so on. And as I showed in the presentation today, we then started to receive incredibly detailed and colourful Excel documents, pretty much telling us everything we needed to do, every nuance of the user experience was being dictated. Now, we’re not fools, we stood up for ourselves and we illustrated many warnings but it didn’t really happen and we continued the project and we launched it. It received quite a lot of advertising and it failed. And so, yeah, today I introduced the presentation with a video that was created for it and then proceeded to rip that video apart.

Ryan: Which was quite amusing.

Simon: And used that as a basis for everything else.

Ryan: I know that Ryan Carson’s been recording the talks, I’m sure that will appear on there.

Simon: Excellent. I’m sure this will come back to haunt me. I’m expecting an email from that client in the next few weeks.

Ryan: But you telling us about that site set up the entire theme for your talk, which was collaboration and the process of collaboration with your users and you came up with some, a list of points, a process that you kind of went through which; the first one was collaborate and then research and then… Can you just take us through that process?

Simon: Yeah, sure. I mean, to address the point of collaboration, I think, a point I made today was that it’s a collaboration across all kind of boundaries, so on one hand it’s the design and development team itself. So, to quickly summarise that, and this will be old news to many listeners, but essentially, the designer can talk to the developer; the project manager or, heaven forbid, account manager knows as much as the designers, the developers and so on; everybody is aware of every aspect of the project, or as much as possible. This gets away from that production line approach and allows the developer (to use labels here) to dictate, or suggest ideas, to the designer, and so on, because he or she is armed with enough information and understanding, through the process, to feel that they can contribute, that they’re not going: “I don’t know if this is relevant, but…” why not make the suggestion? So, a lot of collaboration within the office, if you like, if it’s an app for a client, then obviously look to collaborate with them as much as possible, so it’s not just a one-way process, so as many opportunities for focus groups, workshops, talking to stakeholders, investors, whatever that might be, and key to that, the intended audience, which was the main point today, as well, to collaborate with them from the earliest stage as best possible. In terms of the process, yes, collaborate at the top, it’s more of a reminder, through the process. So, we looked at things like research, prototyping, testing, rinsing and repeating that process really. If there’s an agile approach to what’s happening, then you know, there may well be a product launch, then loop back and go through the thing again. Yeah, and to summarise there again, it’s, we were talking about whether it’s waterfall, agile or a fast sprint. We wouldn’ make that decision until we’d spoken to the audience and we’ beginning to get an idea of what they might need, or how best to pitch this website or application.

Ryan: Which, I find quite interesting, because I seem to get the impression that, as a company, you don’t have a set process, so you basically, you know, a new client comes in and you’ll look at the audience and then you pick whether you’re going to through an agile process, or a waterfall process, whereas, you know, we hear a lot about, you know: “you must use agile, agile, agile, agile” or, you know: “waterfall’s best, waterfall’s best” and you seem to, you referred to it actually as: ‘Organic Collaborative Process’

Simon: Yeah, absolutely. I mean, it is very difficult to, in most situations where there’s a client involved, you need to respond to an RFP, or some kind of brief, you need to reach an agreement over what’s going to be done before they’ll say yes, we’ll give you ‘X’ amount of pounds and we’ll build this together hopefully. It’s very difficult to say “take a leap of faith with us, we will put some of the pieces together, shortly into the process, we need to find out more first, and get under the skin of what you want, what you’re intended audience might want.” So, that’s quite tricky, some of the greatest things we’ve worked on have been based in that leap of faith and we’re taking one as well, working with a client sometimes, you know. We’ve learned that it doesn’t always work out as it might look and they take a leap of faith with us. I guess a lot of it is, kind of, proving through previous work and illustrating how that process worked. So, it sounds a little trite and I never want anything to sound arrogant but a level of education, I think, commissioning for the web is difficult for a lot of people. If we can help them understand what they need to do and how we meet in the middle and how we collaborate then, you know, we’ll do everything we can, because that’s a great foundation for the project.

Ryan: Maybe slightly off the topic of collaboration, but do you price differently for different processes, so whereas agile’s much more extensive than just a waterfall method. Would you look at the project, pick which process you want to use, and would you price accordingly, depending on how thorough the process is, or do you look at a project and, you know, just price it the same across the board.

Simon: Yeah, that’s a killer question. It’s the… First of all, we try and be as flexible as possible and again that comes back to that leap of faith situation. There may be a ballpark figure involved early on. The ideal situation is that, if it’s a pitch, for example, we would kind of get the go ahead, if we’ve been fortunate, without having to be too specific. Hopefully, the illustration of our process and what we’ve done previously, and what we’re aiming to do can be enough. That is difficult. If the approach is going to be typically agile, it’s obviously a very different beast to a waterfall process, where you can pretty clearly define, you know, we’ll do A, B, C, D, we’ll end at Z – job done. With agile, who knows, because exactly how many kind of releases might there be? What’s going to be involved after the initial launch? So, very difficult. As a team, we democratically discuss everything, everybody is involved, and again collaborates on how we approach a potential job. Like a lot of people, and I’m sure there’ll be plenty of people listening who’ll empathise with this, we’ve burned many times, so we are extremely careful about it now. So, no set answer. We work with whatever flexibility we’re given.

Ryan: OK. Moving slightly on. You talked about logovisual thinking and these weird disk things

Simon: Yeah

Ryan: Which you looked to have lots of fun with, you put pictures up and everything and you want to just tell us s little bit about that?

Simon: Yeah, sure. The product itself is, yeah, LogoVisual Thinking, I couldn’t even begin to tell you why it’s called that.

Ryan: It’s the ‘logo’ bit, I can get ‘visual thinking’, it’ the logo bit.

Simon: Yeah, I’ve no idea. Maybe Mr Logo invented it, I’m not sure. That would be a great name. The URL, I’m pretty sure is logivisual.com, in fact, it is and they produce loads of products. I’m not affiliated with them in any way, I should make that clear, but I do wax lyrical about this stuff. Essentially, they are magnetic hexagons, but they also do all kinds of shapes and different tools and I think they’re really, they’re used a lot in business. You can just imagine the dry management meeting: “come on everyone, we’re going to imagineer for the next half an hour” and they’ll break these things out. It’s possibly easiest for people to think along the lines of Post-It notes, or using something like that. A classic example where we would use them is we would get a stakeholder or workshop team together and a few of us and we find that there are people in the room who are contributing a little less, you’ll have, you know, Johnny Smartpants who knows everything about Web 2.0 and he’s throwing all these ideas in, and there are some other people and you think “I wonder what they’ve got to contribute”, so give them a pen and a pile of magnetic hexagons and then give them a, let’s say, for simplicity sake, “list all the kinds of user you can foresee using this product or website” Go into detail, rather than say ‘government’, talk about specific roles, you know, what kind of people within a government department might use this thing and why. They all go away and, because there’s no pressure, the write whatever they want. We bring that together and then we’ll look at grouping these items in a particular way. The example I used today was audience grouping. We prefer to work with a broader brushstroke than the typical user persona, so you’ve got Johnny or Mary who, you know, Johnny does this, Mary does that, she knows about this but not that etc. Sometime we, and⁄or the client, forget exactly what Johnny’s supposed to be, we have to go check so with these tools, we’ll take everything that people have contributed and we’ll group them into 4 or 5, maybe, audience groups. We’ll then label those groups and then they will be in our minds throughout the process. So, for example, we’ll have a hierarchy, it might be that it’s a government site, it might be there’s a certain kind of user is ‘Hierarchy1’, a certain kind of group is ‘Hierarchy2’ and so on. And the outcome will be, we will do some lo-fi diagrams and look at where typically would somebody from this audience group arrive; what might might they do while they’re there; and, vitally, what action might they take, what might be there outcome, what do we want them to do. So we use these LogoVisual tools for things like that. Essentially we just have them around as whiteboards and they’ll be around for a project, we’ll move them around on the boards, because they’re hexagons you can group them beautifully and, yeah, I mean, have a look at logovisual.com, there’s some good ideas on there of how people are using it.

Ryan: And you talked about having a project space in your office, didn’t you, which you brought this picture of a, really impressive actually, all these things stuck to your walls and everything.

Simon: Yeah, it was. Well, that particular example was from the Erskine.com redesign, so we really did go hell-for-leather on that one. Yeah, we’re fortunate to have quite a large office space I’m not bragging there because it’s got no heating, single-glazing windows, it’s freezing, it hasn’t got enough plug sockets, it’s kind of rubbish, but we love it, and it’s a creative space.

Ryan: It’yours.

Simon: It is ours, which is wonderful, although we share with an idiosyncratic, little illustrator called John Burgerman, who’s gradually spreading himself through the office, but we love him. So, yeah, we set aside an area of the office, if there’s a spare computer, we’ll stick a computer in the middle, so we can access online information, but really it’s offline scrapbooking, so you know, we print out typefaces, we rip this out of magazines, classic stuff, as we produce wireframes, or any kind of, you know, back of a cigarette packet sketches, whatever they might be, or source material from a client, maybe, we just throw it all in this space. It acts as a constant reminder, so if you’re scrapbooking in a flickr pool, or, what is it, LittleSnapper, or something like that, that’s fine, but it can e difficult to share and it’s a bit out of sight, out of mind. With the project space it’s just there, and you can keep adding to it, and if you’re stuck for inspiration, 2 or 3 of us might, rather than just discuss this idea over Skype or, as you do when you’re in the same room, sad as that is, or sort of face to face at our desks, we’ll wander over to the project space, where we’re kind of surrounded by the project, and delve in and add to it, tear things up, I don’t know. It works for us; if you’re a remote team, and you’ve got people in different locations, it’s maybe not so good, but it’s a nice idea, and I think people like Clearleft and Mark Boulton, people like that, I’ve spoken to them and I know they do a similar thing. It’s just a, it’s a tip, but it doesn’t work for everybody.

Ryan: You talked about community and you had to rush through that a little bit, because your talk was overrunning, could you talk to us a little bit about that. Again you had bullet points of trust, and brevity and things like that. Could you just take us through what you were covering there.

Simon: Yeah, sure. Yeah, half an hour’s never enough really.

Ryan: It flies by, doesn’t it.

Simon: Especially when you waffle, like I do. Terrible – you should see me after a few pints, actually no, that’s a bad idea. Yeah, basically we have, they’re our kind of, what would you call them, they’re like little waymarkers or points to observe throughout the process, so through that early collaboration with the audience or the client, we’ll define some key aims and objectives, but they’re usually project specific, but I certainly believe that there are a number of conventions, if you like, or almost courtesy items to be aware of, when you’re looking to create a community around a website, so you mentioned trust, that’s something I really think is important, especially where you’re asking people to submit their own information, share information and kind of confide in the site, in a way, so it’s very important that the user feels safe, secure, this isn’t just a fly-by-night website. I don’t know why there aren’t more Web 2 applications that essentially fish, you know, imagine if flickr ended up being, you know, all that stuff and that was all going to be used in a way we didn’t understand. You need to build that trust. So we’ll look for certain devices, we might fall out with a client over their choice of a URL, because if they’re a business to business organisation, you don’t want something jokey. Also, who’s behind the site, are there humans behind it and how can we bring them into it, can we get them to write dome kind of introduction, can we make them visible, can we make them contactable? So, little things like that. And then other items on the list were classics such as, you know, brevity with content, making things easy to find, I’m sure that’s relevant, regardless of the subject matter, and so on.

Ryan: OK. You also mentioned having a features roadmap during the process of developing your site, do you want to explain why that’s benefit?

Simon: Yeah, I rushed through that as well, didn’t I? Basically, we often find that, if the first meeting with a client or, you know, if we’re building something for ourselves, grandiose ideas, you want to kind of do everything and I think it’s very important to bring simplicity into whatever you do it’s a bit of an obvious thing to say when it comes to responsible design, but at the same time, you know, 37 Signals and other companies have talked about this stuff for years and I think many of us have learned from it. Essentially it’s what are we going to do; when are we going to do it, sometimes it falls in very smartly with the agile process; what do we know about the audience, in terms of what we can throw at them and when. So, we obviously favour starting small. I was talking to somebody after the presentation about low expectations, take that the wrong way and it sounds quite negative, but I think, you know, it’s just putting the bar somewhere where you can reach it. I think it’s a very negative thing if you launch a site with all the bells and whistles in the world and then end up retracting too much after launch. I think it’s natural that some things will change and some things may be removed, but if you kind of visibly change your whole plan, because you haven’t thought it through, I don’t think that’s very healthy. So yeah, it’s defining a roadmap, as we call it, and probably others do as well, where we essentially outline what we’ll do, when and try to stick to that, but ensure it’s malleable, so as we learn more, we can rethink it, think let’s wait on that and the way we reflect that with the client, as well, in a more tangible way, is we try to get rid of all the sort of, the Basecamp noise and whatever other channels are in operation, reduce a project down to it’s deliverables, so we will have, I guess establishing a, if it’s not too pretentious to say a narrative to the project, so there’s point A, and there’s lots of things to click, on be they kind of sitemaps or research findings, through to batches of wireframes or comps or prototypes and whatever. We find that, in tandem with that roadmap thinking, kind of illustrates what we’re trying to achieve and when, and I think it can be reasonably easy for a client to buy into that, so it’s a case of OK, so, I guess it’s what you say and then backing it up, so proof as you go along. So that leap of faith is, kind of like, yeah, you were right. So, that seems to work quite well for us.

Ryan: Great, and you got everybody excited right at the end of your talk by showing them your ‘Ultimate Package’ [Laughs]

Simon: Yes, ladies

Ryan: That must sound very odd coming over a podcast

Simon: I’m sure it does, yes my ultimate package. OK. It would be really unfair of me to take credit for this, I do like the idea of conventions in web design and development, whether it’s navigation and using the word ‘About’, ‘Contact’. I think there’s plenty of other areas to create and do exciting things. Personally as a web user, I like certain constants. So, those kind of conventions I love. In terms of actually building websites, we use a lot of them in our development process. So, for example, when we start a project, we actually start building it, whether it’s a prototype or even if we’re just experimenting, we have a folder that we iterate, we’re on version 1.9 of our Ultimate Package at the moment, and we just drag it onto, we just FTP it.

Ryan: Like a template?

Simon: Yeah, basically. Responsibility for this goes to whole Erskine team, but specifically Greg Wood, our lead designer who is, kind of, the custodian of this thing so he’s very passionate about it. It’ll be up to Greg whether I’m able to share some or all of it with you all eventually, I don’t know, and I’m sure other people have their own versions. So, for example, you will have, in the Ultimate Package, some JavaScript files, the latest jQuery, some stuff to control certain functions and some JavaScript to help with IE6, PNG transparency, whatever it might be, and then a cascade of CSS files, so our main screen.css, with some basics in there, reset.css, our own version of Eric Meyers Reset CSS, and things like a scratch file, so if one of the, one of my colleagues wants to do some work in the CSS, they do it in their own file which cascades in, so, you know, Greg or somebody can approve it or ditch it, withough it really having any great affect…

Ryan: I like that. That’s a good idea.

Simon: on the main stylesheet, if you like, again that’s something that Greg’s introduced and we all find that really useful.

Ryan: Yes, that’s a good idea, I really like that.

Simon: And there’s a few other bits and pieces in there as well. The beauty of it is, if you start working, you want to start working fast, the external JavaScript, CSS and so on, is already linked up, so you can throw a function in very quickly, without thinking: “oh, I must, why is it not working? Oh, I’ve not called it in the <head> of the document” No, it’s all kind of there. You remove stuff as you go along, but it’s there. And there are things that help us with ExpressionEngine builds and a few rules in there as well, so that we’re all on the same page, if you like. If I’ve not worked on a project at all, the person who might have led it is on holiday, the client calls and they’re in a panic, I go into the code and I start looking for certain conventions: I know there will be a ‘Contents’ at the top of the main stylesheet, I can “Ah, 10.1, scroll down, find the flag for that” So, it works really well.

Ryan: And if we’re very, very lucky, we might get a chance to get a sneak peak at it?

Simon: I’ll have to speak to Greg. I’m really, I love the spirit of sharing.

Ryan: [Laughs] Greg’s baby.

Simon: Yeah, I don’t know if I owe him any more beer, but I’m sure that will be involved.

Ryan: It’s a good idea for people to think about and if they’re going to build their own anyway, I like the idea of a scratch file.

Simon: Yeah, just use your own, you know, your own conventions, if you like. I love the spirit of sharing in this community, especially we saw it through web standards, and everything else. I’ve really benefited from people sharing this kind of stuff, so, you know, hopefully we will. I’ll keep you posted.

Ryan: If not, there’s some ideas.

Simon: Yeah, I’ve already been asked today to write about how we go about producing it, so even if we don’t share the actual ‘Ultimate Package’.

Ryan: So, keep an eye on your blog or Twitter feed and that should be it?

Simon: Yeah, either myself or Greg will probably put something together at some point about that.

Ryan: Fantastic. OK, Simon, well thank you very much for taking the time.

Simon: It’s been a pleasure to be on boagworld.

Ryan: Thank you very much.

Thanks goes to Simon Douglas for transcribing this interview.

Back to top

Listeners section: Improving your design skills

David Smith

I’ve a question for you regarding how to improve my design skills in order to further my career.

I’ve been working professionally in the web industry for just over a year now. My current role involves web page design, web page development (XHTML & CSS) and some work with server side code.

Of these three aspects of my job I much prefer designing. Having listened to the feature of “Surviving the Recession” and hearing you telling us to specialise I feel that I would like to become primarily a web designer. However, I have no formal graphic design qualifications (my degree was in Music and History!), and although I have produced numerous successful websites for clients I don’t feel my skills are developed enough to compete with true pros like yourself!

Could you or any of your team/contacts offer me and others like me some advice on what I could do to improve my web design skills? I have considered courses but can’t seem to find any that fit my requirements.

I’d really appreciate it if you could take time to answer this question as I’m a big fan of the show and it would really help me to further my career.

Good question and I have to admit it’s something I often think about myself. I think a lot of it boils down to how you personally approach learning and seen as everyone is different this is probably going to turn out as quite an ambiguous answer, so I’ll go through some of the steps I use and have used in the past.

Learn how to use your graphics program, properly!

Personally I’m a big Photoshop fan, some people prefer Fireworks or various other graphics programs, it doesn’t really matter the principle is still the same, learn how to use them properly!

I’ve found that it can often be easy to think of a design in your head but converting that idea into Photoshop can be difficult if you don’t have a solid understanding of how to use the software. Equally so you can often find that your ideas are limited to your understanding of the software you’re using and as a result your work suffers.

Read books

And when I say read books I don’t mean for you to burn your brain out reading the Photoshop Bible from cover to cover (worst book I’ve seen for photoshop by-the-way, black and white images in the a graphics software book???), I’m talking about a good reference book. Pick a tool to learn an read that section.

I can personally recommend Ben Willmore’s Photoshop CS3 Studio Techniques (there is a CS4 version of the book but I’ve not read that one), which is about half the size of the Photoshop Bible, packed with tons of example images (in colour) and the explanations are concise but informative.

Watch examples

Video tutorials are cropping up everywhere these days and I love them, what better way to learn how to use graphics software than to be shown.

Lynda.com is a great place to have a look at as well. Short bite-size videos 3-5 mins on average that show you how to use the software through examples. It is a subscription service but you aren’t tied in for any length of time so you could simply pay for a month and watch as much as you like.

Challenge yourself

Its difficult to improve your skills without have a goal or objective, sitting down and saying “Right I’m going to improve my design skills” rarely works, you need to challenge yourself however you also need to be realistic. I’m not saying you should take on a huge blue-chip client and attempt to turn around a top class design as a challenge. Start small, push yourself and build upon your skills gradually.

Experiment

If you’re inspired by a piece of design work then try and figure out how it’s done, dissect it, try and learn how to achieve a similar effect, but obviously don’t rip it off!

You’ll find that the more you practice achieving various effects the more comfortable you’ll feel about taking on more adventurous projects which in turn will contribute to improving your skills.

Courses

Course are a tricky one because you have no idea how beneficial they’re going to be until you’ve paid your money and sat through a few lessons.

I went on a 10 weeks, intermediate to advanced Photoshop course a good while back and in all honestly I didn’t learn anything that I hadn’t already picked up from elsewhere.

Perhaps there are better courses out there? If you’ve had a good experience leave a comment in the show notes.

On the other hand you typically get a certificate or something to show for you effort which can go on your CV.

Conclusion

As I say everybody learns in different ways but the most important think to remember when developing new skills to just do it, learn and apply, take on projects that allow you to push yourself push yourself, do something different and try something new. You may be surprised with the results.

Back to top

Web Design Wisdom from Twitter

I asked my twitter followers for their web design words of wisdom. I had over 200 responses. Here are some of the lessons learnt.

I am a lazy guy and Twitter is the perfect tool for people like me. Rather than go to all the effort of searching for an answer on Google, I often find myself turning to the Twitterverse. After all, some of the brightest minds on the web use Twitter and I can get an answer faster from them than looking it up myself.

However, with this article I am taking laziness to a whole new level. Instead of carefully considering my own words of wisdom regarding web design, I have turned to Twitter…

I am writing a post on web design words of wisdom - think 'confusus says'. Post yours to Twitter in 140 characters or less. #webwisdom

Setting aside the people who wanted to point out that I cannot spell confucius, the responses was amazing. Answers ranged from the silly to the surreal. However, there were also some real gems and a number of recurring themes. What follows is a summary of the main recommendations.

Focus on the user

There was a general consensus that maintaining focus on the needs of users, was a crucial component in a successful website.

Dan Goodwin put it best when he wrote…

If you can’t work with your users, talk to them. If you can’t talk to them, at least think about them.

A number of users recommended Steve Krug’s book “Don’t Make Me Think”. However, the irony of one particular tweet made me smile…

Confucius says “Don’t Make Me Think”.

There was also a lot of advice about the importance of providing adequate signposting for users as they navigate your site. Colin McCormick wrote…

When leading a user make sure they always know where they are, how to leave and how to continue.

The issue of users becoming lost and confused also led to a call for simplicity.

Keep it simple

A number of contributors spoke about the importance of keeping our sites simple and intuitive. Niki Brown encapsulated this attitude when he wrote…

Keep it simple… the average user tends to get confused with massively complicated interfaces.

It is certainly true that many damage their sites by continually adding features and content, when they should be simplifying. However, according to some of our twitterers that is easier said than done. One wrote…

Simplicity is the most complex achievement.

While another indicated that the ability to create simple sites only comes with experience

As you become a better designer, your designs become simpler.

There is no doubt that simplifying a website can be challenging. However as I explain in “The Three Secrets of Simplicity“, if you challenge the need for new features it is possible. Too many web projects experience scope creep that undermines simplicity. That is where having a clearly defined brief comes in.

Clearly defining the scope

Too many web projects lack clear boundaries. Often they are wishlists of functionality that have not been fully considered. As Rich Wells points out, the first step is to define the problem…

When planning a site it’s always worth asking “what problem am I trying to solve?” before looking at functionality/solutions.

The trouble is that many of us are seduced by some new piece of web functionality and forget that our websites should primarily be about fufilling business objectives. As Marc Hindley points out…

Think business first, technology second.

Of course defining the scope of a project should not just be the role of the client. The web designer has a responsibility too. As Wendy Phillips explains…

Clients think they know what they want until you ask the right questions.

It is down to the web designer to ask the right questions. In order to do that they need to understand the business. One twitterer encourages them to…

Get as much info from the client upfront as possible, even things you think aren’t that relevant – get to know their needs.

Web designers and clients should work together to define the scope of a project. The client brings their business expertise while the web designer brings their knowledge of the web. Unfortunately the role of web designer is often reduced to that of a pixel pusher.

Recognise the value of web designers

Interestingly it is not just clients who undervalue web designers. Many web designers undervalue themselves. Andy Clarke endevours to encourage fellow web designers when he writes…

You don’t get paid for the hours you work, but for the years learning your skills and craft.

However, it is not just an issue of payment. The Twitter community also encourages web designers to be willing to walk away if clients become unreasonable. Alun Rowe writes…

Don’t be afraid to say no, or to walk away if a client becomes unreasonable. It’ll only cause you pain/distress later on.

David Roessli echos Alun’s point before also going on to say…

Be clear, direct, and honest. Don’t make promises you can’t keep.

Too often web designers will say anything to win or keep a piece of work. Ultimately this is damaging to both the web designers business, and the website of their client.

Of course, this advice doesn’t apply just to designers. It is valid for developers too. That said, there was also some developer specific tweets as well.

Developers pay heed

Whether you are a front end developer or a server side coder, there was some excellent advice coming from Twitter. Our very own Craig Rowe shared one particularly pragmatic piece of advice that made me smile…

Web development is a balance between well made and made just to work.

His second tweet contained a touch of bitterness that can only come from a .net developer fed up with receiving abuse from the fanatical PHP crowd…

The backend language really doesn’t matter.

That said, there is no denying he is right.

Talking of fanatical, Mark Mcaulay put another overly enthusiastic group in their place when he wrote…

WordPress is not the solution to everything.

Of course you could just as easily replace the word WordPress with any other CMS or development platform. Nothing is a silver bullet.

There was certainly no shortage of tweets touting the benefits of various frameworks, CMS and platforms. However, there was a general principle that 29Visual summed up well…

Learn a framework or develop your own. About 90% of the Website structure can be reused. The other 10% falls on design.

You can save yourself a lot of time with the right tool. However it is not just tools that can save time. Good code can too, as Joel Drapper explains…

Code with the next developer in mind.

I think we can all remember times when we have inherited code that is impossible to read let alone understand!

Our last piece of advice for developers comes from Vicky who shares one of the nicest tweets of the lot…

Code with humility and grace – acknowledge those who are on IE6 or screen readers.

That brings us on to the subject of accessibility.

Always keep accessibility in mind

The Twitter responses I received were particularly passionate about the importance of accessibility. However as Ricky Onsman pointed out, they wanted more than just access for the disabled…

Forget disability access – go for universal access.

In particular universal access included access to those using older browsers. That said, there was realism in their expectations. Nobody expected websites to look identical in all browsers. David Randall commented…

Web sites should not look the same in every browser – it’s okay to be different.

This passion for graded browser support was encouraging. However, it was not the end of their ambitions. As Joel explained, accessibility also brings with it improved search engine placement…

If your site is accessible, it’s also search engine friendly.

Website owners are often willing to invest considerable money in things like SEO or design, but rarely in accessibility. Hopefully Joel’s words will encourage them to reconsider.

Talking of investing in design…

Lessons about design

I conclude these words of wisdom from Twitter with three pearls surrounding the development of a design. The first comes from Colin who says…

Prototype and consider other designs. Do not be narrow minded. Be prepared to throw away every design at the design stage.

This is excellent advice. Often designers become locked into a single approach too early in the development cycle and fail to experiment and seek out inspiration. Of course there is a fine line between inspiration and theft. Tom Kenny writes…

Remember, inspiration is not about copying but rather kick-starting an idea of your own.

And that takes time and lots of different ideas and approaches.

But do not fret! If you are struggling to find your inspiration remember Bruce Lawson’s words of wisdom about design…

Readers care much much much much less about your design than you do. They care about content.

Conclusions

To be honest the idea of a twitter driven post was somewhat of a whim, but the replies I received were extremely impressive. This post does not do justice to the depth and quality of responses. There were superb tweets on launching a site, reinventing the wheel, and the importance of copy. I highly encourage you to look through the entire list.

However for now I leave you with some final words of wisdom from Jonathan Snook.

Anything is possible. Its just a matter of time and money

173. UX

On this week’s show: Paul talks to Leah Buley from Adaptive Path about user experience design and Marcus provides some advice on warranties and other legal stuff.

Play

Download this show.

Launch our podcast player

Housekeeping

I just wanted to mention the Summer Camp that Carsonified are running on the 20th and 21st of July in Bath. Its a free ‘get together’ for students or web entrepreneurs looking to discuss web start-ups. Sounds like it will be an interesting gathering and with numbers limited to only 8 places there will be lots of time for addressing individual problems. Check it out.

Back to top

News

XHTML 2 is dead, long live HTML 5

The big news this week is the W3C’s decision to stop development of XHTML 2 so that more resources can be put into HTML 5. In a statement the W3C said…

Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the Working Group, W3C hopes to accelerate the progress of HTML 5 and clarify W3C’s position regarding the future of HTML.

Although I am no expert, this strikes me as a good decision for two reasons. First, the two ‘flavours’ of HTML was causing confusion. The overlap between the two was significant and they lacked distinctive roles. Second, HTML 5 has gained significant momentum in terms of browser support and community engagement. XHTML 2 on the other hand seemed to be floundering with little movement from the working group. According to Bruce Lawson the decision to drop XHTML will make little difference to most developers. However, one can at least expect to see an acceleration is the adoption of HTML 5 and hopefully greater support by browser manufacturers.

Designers tools

I spotted a twitter by Paul Annett this week that is worth mentioning. It was a link to a collection of Photoshop files containing UI elements for each major browser. The files contain browser windows, dropbox boxes, radio buttons and other user interface elements. This is extremely useful to any web designer mocking up a web page, and saves having to screengrab and isolate each element manually. However this resource is just one of many available on the “Designers Toolbox“. Other resources include…

It also has a load of additional resources for print based designers. It is an impressive site and definitely worth checking out.

Inspirational about us pages

Smashing Magazine have released Best Practices for Effective Design of About Me Pages. The post first caught my attention because “About Us” pages are so often neglected. As the article says…

The “about me”-page is one of the most overlooked pages in development and one of the highest ranked pages on many websites.

I get the feeling most website owners don’t really know what to do with this page. They feel obliged to have it because everybody else does, but fail to really understand its role. Unfortunately I am not sure that this article provides any answers. It focuses on the “About” pages of web designers rather than more general websites, and also shows a lot of examples while providing little in terms of ‘best practice’. That said, it has some stunningly designed “About” pages and so is definitely worth a read. They really are inspiring and will make you long to redesign your own “About” page. Toby Powell's About Me Page

Password Masking

Why is it that as human beings we have a tendency to accept the status quo? Even if we think something is a bad idea we often fail to speak up because it has always been that way and ‘surely there must be a good reason’. One example of this for me is password masking. This is the practice whereby content entered into a password field is blanked out for security reasons. Although I can understand the logic of this it has always struck me as a significant usability and accessibility issue. However, despite that I have never actually challenged the practice. Fortunately Jakob Nielsen has in his post ‘Stop password masking‘. He writes…

Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures. Password masking has become common for no reasons other than (a) it’s easy to do, and (b) it was the default in the Web’s early days.

I couldn’t agree more. I believe the security concerns are massively over rated and the usability issues largely ignored. Unsurprisingly Jakob has come under some criticism for his cavalier attitude towards security. Christian Heilmann writes…

As a frequent traveller I am constantly seeing people logging into web sites in hotel lobbies (when they check in for their flight for example and enter their bonus miles account details), in Internet Cafes or when they use their laptop in a public space.

However Jakob addresses this when he writes… Yes, users are sometimes truly at risk of having bystanders spy on their passwords, such as when they’re using an Internet cafe. It’s therefore worth offering them a checkbox to have their passwords masked; for high-risk applications, such as bank accounts, you might even check this box by default. In cases where there’s a tension between security and usability, sometimes security should win. Again I agree with Jakob. Too often password masking is used without thinking. When a user registers for a site that contains little personal information and no financial details, why should they have to enter the password twice simply because they cannot see if they typed it right the first time! Its absurd.

Interview: Leah Buley on UX design

Paul: OK So I have Leah Buley today from Adaptive Path. Great to have you on the show Leah, thanks for agreeing to come on.

Leah: Thanks Paul I am excited to be here.

Paul: So I heard you this year at South by South West(SXSW) talking about UX teams of one, which I have to say, was the highlight of my SXSW. I am not just sucking up it really was the most enjoyable one

Leah: (laughs) You might just be sucking up but I will take it. I will take it all in.

Paul:Yeah just take it , just go with the flow. So the reason it was so erm inspiring I think from my point of view was that the company we run Headscape was for a long time a distributed company and we then came together and started having an office, but I don’t think we have really got our heads around the advantages of all being in a office together. So all of your talking about brainstorming and stuff like that was hugely, kind of blindly obvious but revolutionary at the same time. It was a light bulb moment for me. So thank you very much for that.

Leah: My pleasure. Paul. So I thought lets share some of the stuff that you covered at SXSW with the listeners of Boagworld because I know there is a lot of people out there that em maybe are open to a new approach to the way they are handling design and User interface, usability and all that kind of thing. So lets kick off by talking about and perhaps defining design as you see it, because you obviously don’t see design purely as the aesthetics of a site, and as you were talking you obviously had a much bigger role in mind for what you would consider a designer so tell us a little about that.

Leah: yeah, well actually the first caveat I should make is that I am not a trained designer,

Paul: OK

Leah: I have an information science background and have done years of work as a developer so you should take everything I say with a grain of salt. But I think what is interesting from my perspective is that a lot of people in our field are not actually trained designers but they are doing design work.

Paul: yes

Leah: So recognising that and understanding essentially there is a process to design and how anybody can do it is an important thing and for me the way that I would define design is basically anybody who is taking a known problem and consciously reframing it, often with the use of constraints. So in my mind design is much more a process as whereby something new emerges as opposed to outcome that somebody produces. The designer or the role of the designer, anyone who does the design is to shepherd that process basically.

Paul: hmmm Yes This is kind of a complete tangent really but it was something that came up in your talk and I was fascinated by it and wanted to know a little more about it. You talking in your presentation about Forrester CX model ? Which I had not come across that description of it. I had heard of kind of a similar approach used in sales as the sales approach, but could you explain what that model is and why you brought it up in your presentation.

Leah: Sure yes , it’s a report that Forrestor’s put out called the customer experience journey it is written by a guy named Bruce Temkin who actually has a excellent blog called experience matters where he writes a lot about user experience, from the kind of business person’s perspective so check it out if you haven’t already. The interesting thing is that Bruce has written a lot about experience based differentiation for companies, which is basically just the idea that you have a better user experience you therefore have a better product and evidently his writing about his experience based definition has been one of there most popular reports, which sort of suggests that executives recognise customer experience as really critical to their success and that many of them are many of them are offering a sub-par experience right now. So then in this customer experience journey Bruce essentially explains how an organisation can build a strong customer experience practise and the report has a lot of recommendations about a corporate culture and employee training and how to deal with trade offs, but in particular there’s a sort of a model that describes five steps for the evolution of customer experience in an organisation it’s great, it’s like it’s beautifully simple but it is also deceptively simple at the same time.

Paul: yeah

Leah: The five steps are, er the first step is interested basically so at that point the customers organisation is aware that user experience or customer experience is something they should be thinking about, but they have not really done anything about it yet. The second step they get invested, which basically means they hire somebody to do some work, this tends to be someone that is at a pretty low level. At the third step they become committed, which means they have someone who is an executive who has responsibility for the outcome of that user experience work. At the fourth step they become engaged at a very high level sort of a organisation’s initiative level user experience is a priority and then the fifth step the nirvana of customer experience is that they become, it becomes so embedded into the fabric of the organisation that it is kind of like the first principles to everything we do it does not have to be explicitly called out like a project team to make the website more user friendly or a project to make our products less funky to hold or whatever.

Paul: hmmm

Leah: So emm that’s the model so it fascinates me and kinda frustrates me a little about it is that it makes it seem so linear like you can just put one foot in front of the other and eventually over time you will reach step 5. I think there are different stages that are tricky for different reasons, the leap from having lower level user experience people to executive user experience people can be awkward for organisations for a lot of reasons and what I have seen just on my personal experience is that companies have, it is not like they start out with one user experience person and then it grows and grows and grows and then ends up they have a team what happens is they have kinda epics in the approach to user experience so sometimes it’s big and they will hire big staff and in lean times or some executive goes away the staff will shrink and then some other champion will come along and he will want to bring it back. I have been in situations where I am a user experience team of one or even when I am on a team of professionals and you learn that there was a user experience practise several years ago and then it went away and it is like discovering cave paintings or hill dwellings or something and you realise there have been other people that have come before you and you are like why did they go away what happened? So that leads to like a really core belief I have about user experience practise which is that it is not built by delivering killer projects and sort of building on top of killer projects one by one but it is built through relationships and patience and mutual respect over time and that it is about really erm sort of investing the time to actually get to know the people who need to work with you as a user experience professional investing the time to understand their concerns and their objectives and to take those things seriously and to work with them as a designer to facilitate them achieving their goals as well as you achieving your goals. I know that is touchy feely but I think it is in my personal experience that that works well, has worked well for me.

Paul: I think it is very true as well I mean I think there will be a lot of people listening to this interview that maybe er you know feel like they are stuck on one of those stages and can’t progress things and can’t move forward. Whether they are responsible for their website within the organisation, whether they are a internal web designer or something else. And it is very easy to become kind of bitter and angry and become the no person within the organisation that is constantly you know fighting against the system but actually building the relationships is the best way to move things forward and you know I do a lot of work in large higher education and public sector organisations that have huge amounts of bureaucracy and it is ultimately the relationship and carrying people along with you that enables you to do things and move things forward.

Leah: Yeah. I absolutely agree and I think it is particularly interesting talking to you as someone who has worked in big bureaucracies because they are the hardest places to do it I think, it is just the bureaucracy itself can add an extra layer of frustration that is on top of the initial frustration that I think we often feel as user experience people just trying to communicate why this new area is important. So it is very easy to get embittered, yeah if I think of my own personal experience I have seen that too and the trick is to make yourself feel a little less alone and the challenge for that is if you are user experience team of one, and you do not have a big group you don’t have colleagues who have the same experience as you, you kind of have to find a way to find a way to make friends with the non user experience people that you work with and turn them into colleagues and turn them into allies and that you do through soft skills much more than design skills on some level. I think the dirty secret of design is that it is fifty percent soft skills and then the rest is design and if you can learn to listen well to people and ask more questions than you answer and I don’t know be a fun lunch date I think those are the sort of things that will serve you very well in this line of business.

Paul: Yeah, totally agree it is really interesting to hear you say that because yes, really good really good. Let’s move on before I start ranting about that particular subject. Ermhmm lets talk about Adaptive Path and the process to design that you guys take. Obviously you guys produce some superb work and I am really interested in the little glimpse you gave us in your presentation at South by of that process and how you go about doing things so maybe you could try and summarise that for the listener.

Leah: Yes of course. Well in a nutshell it is a mess it is just a total mess and I am serious about that it is a messy process and that’s part of the magic er but actually, when a little secret of Adaptive Path is and it’s design process is we do not have a set design process unlike some other companies in this field who you know often have like the discovery and then the research and whatever phases. We don’t really have a set process we what we kind of do is custom design each project to match the problem that the customers have but even so I think must projects tend to involve at least three things in some kind of configuration to one another and those three things would be 1. Trying to understand the business environment in which the project has to succeed 2. Trying to understand the user’s context in which the product is actually going to be used in the end and the third part and the thing I talked a lot about at SXSW the design exploration and when I say exploration I use that word very deliberately because we try to treat it er as a process that has to widen before it can get narrow, we try to sort of approach design as actually as a erm exploring a new field essentially but in terms of those three prongs understanding the business problem tends to be really just a lot of honestly trying to ask the hard questions of our customers in a way that will help them to be open to the answers. One of the kind of philosophies of us t Adaptive Path is that we encourage our clients to reframe or rethink everything and so that is a really great foundation then coming back to them and saying in terms of the design approach we are going to take we are going to really explore wide, really broadly and present to you some ideas that maybe push further than you would be thinking of pushing right now but we do that so we can potentially adjust those ideas for the things that are the right size for the constraints and the objectives you have right now. So the design exploration, that particular process we tend to . It is pretty basic we tend to start out and force ourselves to actually spend some dedicated time coming up with lots of different ideas and obviously that is informed by user research which is the second item that I mentioned. We try and start by going into the field to observe users and in context and get as much information as we possibly can about not just what they want to with the product but also the circumstances of their lives at the point at which they are going to use the products because one of the things we find that people are always more distracted and busy and multitasking when asking them than they think they are. Understanding the nature of that helps us to say OK now we are going to sit down and explore the designs for this product what are the constraints that we know our user has and our business has and then the constraints become just a useful device in sort of the process of design exploration hmm in that you can say well if we know that the person who is going to be using this product will also have four other applications open on their desk at the same time or fourteen other applications or forty how do we design something that is optimised as for minimal attention or for is optimised for quick hit interaction so then that little nugget becomes a thing to design with. So lets design a screen that is the ideal starting point for somebody that has ten seconds to do anything but the trick is that you can’t just let yourself stop with those known constraints, you can’t just say we have designed the screen for ten second interaction so we are done with it. If we are truly delivering on our promise that we are helping our clients rethink everything we need to explore beyond that we need to explore more widely beyond that so then we use a lot of other devices that kind of help us to brainstorm in really different ways. This is kind of a funny example but I will bring it up because it illustrates nicely how different kinds of tools help you brainstorm in different ways. We did a project not long ago where we wanted to rethink mobile devices and how we work with them in the world and so in order to force ourselves to rethink that we actually did an exercise where we went out into the world with different kinds of physical objects that were not shaped like mobile phones. They were shaped like pencils and magnifying glasses and wire whisks.

Paul: OK Leah and pretended like those things were mobile phones and imagined what we would possibly want to do with something like that and it is just great because these simple devices would help you to re.. to just forget your assumptions, we have some many assumptions about what a thing has to be and the trick is as a good designer is to force yourself to erm break those assumptions at least for a little bit of times so you can allow your creative process to suggest new ideas to you. Paul. It is really interesting it is fascinating to hear that you are doing that kind of stuff but I am sitting here thinking there are going to be people listening to this show that their design process may consist of you know understanding the business objectives, understanding the users needs and putting a bit of time into that and then they launch Photoshop or fireworks and they are sitting there and they do the design.

Leah: Yes

Paul: and your coming along and talking about going out with whisks and you are talking about coming up with loads of ideas and they are just thinking that is so divorced from the way they are currently working that is this kind of quite hard to imagine that transition.

Leah: Well I don’t think it has to be and that’s what’s interesting and that’s what I tried to talk about a little at SXSW which is that you may not be on an adventure to re-envision the mobile experience but that there are some pretty basic techniques that we can employ even when we are sitting at our desks, even when we are in front of our computers to help us think more broadly. So some of things I have talked about they are really basic they are almost like hacks you can think of them as design hacks if you wanted to 1. Is essentially stealing ideas stealing inspiration from the visuals, sort of visual sources that you encounter everyday so one idea that I really believe very strongly in is keeping an inspiration library

Paul: Yes Leah So if you are using the web and you see something that is an interesting design to you take a screenshot of it and put in some place where you stores those things and then when it is time to start designing flip through that thing flip through your inspiration library and see if there is anything that kind of inspires you in a way that you wouldn’t expect. If that is not on the level of taking a wire whisk out into the world to redefine a phone but if your designing a kind of news portal and you happen to see a guided wizard that, you know screenshot, that has some real interesting kind of treatment of help information and then you realise oh call out boxes could really work in a real interesting way in my news portal that’s sort of the level of forcing yourself to think in a different way or more broad way I also think that just playing with word association is actually so kind of beneficial and talking about what do we want this thing to feel like, or what if it felt like this plus that and then actually just doing a quick sketch of what that would actually mean or look like. The interesting thing is that I have worked with classically trained designers who would probably most certainly call me a design hack but who would say there is one kind of optimal way to design a webpage or design a sort of software that essentially takes the top priority into consideration then the second kind of priority and then the third priority and then lay out the page accordingly so people notice the top thing first and then the second and third thing. But I think the way that metaphor kind of works on us as human beings is actually much more interesting and it can create it can make the experience of using a product or a website feel like something really pungent that is not just actually about information processing it is about a user experience. Ermhmm at the IA summit Cindy Chastain a Information Architect based out of New York city did a presentation on using themes in design and the way she described these themes was basically that you sort of create a little story or create several little stories for what we design could be about and that depending on the story you take the way that you actually design that thing will be really really different. The example she gave is that she did a website for a woman who wrote all of these soap operas in the United States that a soap opera that has been popular for decades and decades she was the primary writer on it and the website is for fans of this soap opera to go and see all of these you see all of these pre-recorded old recordings of the soap opera but in figuring out ermm what experience they wanted to provide for this product they created three different themes and one theme was like the story of a writer and which was basically about the woman who worked the soap opera and the other theme was a love affair with a soap opera which is basically about the fan experience and the third was like forty decades of television or four decades of television which was basically about the TV creation process. Depending on which theme or story you were to go with would create a very different design. In fact they did pick one design that ended up being very specific and tangible and allowed them to design for a really meaningful metaphorical experience for the people who used it but you have to imagine as a end user going into a website that tells you about the story of a writer is going to be very different from a website that tells you, that immerses you in the feeling of being a soap opera fan and I think when I and so I love that example because it shows really nicely how just choosing metaphors and choosing inspiration and choosing examples can encourage a whole world of brainstorming in various possible directions.

Paul: I recently warmed very much to this principle of generating a large number of ideas and the idea of stepping away from the computer, and you have talked about having sheets which forced you to do like six wireframes, like different mock-ups on a single page and you talked about overcoming that thing of running out of steam, like you know I have done two or three designs now what do I do, type of thing. So all of that was really interesting and the idea of including other people in that process so you are not working in isolation and I went back and we did this. We sat down and got er a developer in the room and I got a project manager, I got lots of different people in and we did this and we had a really productive day and got loads done and then it occurred to me that I got five people sitting in a room for a day and that is five man days worth of work.

Leah: Ahhhh

Paul: And you suddenly go crap that is out of our budget that’s a lot. You know it suddenly meant I started going into the practical mentality is a cost effective way of doing things and should we be working like this. I am interested in you thoughts on that.

Leah: Yeah Well it is interesting I hear this concern a lot from people and I am fascinated to hear that you did it and that you did it for a day which I want to hear more details about that later on but I think that the thing is it does not have to take a day and I think that the concern that it will be a vast investment of time for everybody isn’t isn’t .. it is a real concern but I think it is something that can be managed. I have actually had some pretty productive workshops that are an hour long or two hours long and that’s if you round five people for you know an hour or two it is obviously still five or ten hours it is not a week of man hours necessarily. So I think you actually need to be very careful about scheduling sessions that are fixed in time and have clear goals and end points, and just to constrain it a little bit. I actually personally believe that constraining time is another benefit in the brainstorming process. Particularly when you get people that are not necessarily used to being usually involved in designing it can be very scary to jump right in developing ideas and hard actually so I think what happens in a group like that, is people like to think about the ideas for a while and then maybe one thing and get warmed up have a cookie or muffin or something and they feel like they are more casual and they will start sketching, you do not need that time that is just road clearing what you can do is you can give them structured activities that will get them to put there ideas on paper immediately and that will have the same sort of net effect. When we do workshops with folks we do these sort of template based workshops and we give them literally five minutes or seven minutes to sort of sketch out all of their ideas and maybe we will do a couple of rounds of that but the beautiful part is when you have five minutes you don’t even have enough time to think what it is you want to do you just start drawing..

Paul: Yeah

Leah: and it sort of it circumvents the throat clearing that happens in the sort of longer meetings erm and templates I think are really helpful actually in those workshops particularly because people are funny you know we really like to accomplish tasks, if you put something in front of us kinda well defined and has a clear end point I think our impulse is to just do it and kind of get it over with. So if you give someone a template it helps them to sort of say like draw an idea for say what you think should happen in the system explain what the important aspects of that idea are and tell me another product in the world that it is kind of like erm and then you tell them they have five minutes to do it you will be amazed how quickly people can crank out a lot of ideas and then you do a couple of rounds of that and it’s erm in a structure like that that you can really get a lot out in a hour or two hours.

Paul: I mean yeah you have hit the nail on the head there we made, you know the first time we did this we made a lot of mistakes and there was a lot of kind of oh I don’t know whether I am kind of comfortable with this, there was a lot of preamble kind of thing and also we just got tired out. You know there is only so long that you can do something like that. Now admittedly along side that we were doing things like, it was kind of a kick off meeting as well and we were kind of introducing the project to some of the people in the room and that kind of thing but to be honest putting it all together in one big meeting was too much we would have been better of splitting that over a period of time, there were reasons why we had to do it that way because one of the guys isn’t local and he was down but it did kind of get me thinking about this you know the amount of time but like you say if you have structured activities and you set time limits on it then actually that is beneficial yeah

Leah: But also I think actually it is probably important to acknowledge the point that you make that there is time commitment in working this way and it is not like, it is not like you can squeeze it in and still do everything in the way that have already been doing it, it’s there is an actual time commitment to doing it this way. We often at Adaptive Path can do week long design sprints where we essentially we do a lot of the brainstorming activities that we have been talking about in this conversation in the first part of the week and will actually produce wireframes by the end of the week and it is really aggressive and it’s incredibly productive and brings us a lot of work but you cannot do anything else during that week there is just no way. So you sometimes you have to make time move quickly.

Paul: Another thing is ultimately you get the time you are investing back in things like having a developer sit in the room is going to avoid problems later down the line where you know …

Leah: yeah

Paul: where he suddenly turns round and says hang on a minute you have come up with this is the design and we can’t implement that or there is something suggested at these early stages but because the project manager is not there it gets lost in the system and all the rest of it. So I think you know it just feels like a lot up front is the best way of describing it.

Leah: Yeah and I think it is important, you know if you are a team of one in an organisation or where you do not have a lot of support as the user experience and where they may not have a lot of erm comfort, your colleagues may not have a lot of experience or comfort or familiarity with design it is important to go just sort of take baby steps with them with this stuff. I think that you rather than coming in and you are there for a little while and you realise this isn’t quiet working lets change everything and have a two day off site and get the executives to support all this. That might be a little ambitious but erm what might be a little more feasible is to talk to the team and say I feel like there are some ideas we all have that er that maybe it would just be good to get out so that we can actually consider them directly and talk about what’s appropriate or not for the product, could be schedule a hour and half workshop I will structure it don’t worry you do not need to do anything just come with yourself and a pencil in your hand and I will give you cookies and it will be fun and that’s kind of like a starting point to get people ending up engaged in the activity and what I find is when you give people a little bit of a taste of it and they see it can be so productive they become much more enthusiastic about participating and making time for it later on. So particularly if anyone who is listening to this conversation is a team of one or is even like a freelancer with a organisation that they do not have an established relationship with I would say start out with baby steps and structure a workshop in a way that will actually help the participants to see the effects of it pretty quickly

Paul: So we have talked a lot about kind of generating a lot of ideas and you know certainly when we gave this a go we ended up with loads of ideas, erm So I think we need to end this interview by kind of going well now what? You have got this big pile of ideas how do you kind of refine them down into what you are going to actually use.

Leah: Yes, that is always the hardest part of the process actually and not at the same time I think what will happen is there will be a couple of ideas that will be really exciting and everyone will sort of know it. I do not know if that correlates with your experience but the trick is even though some ideas seem like wooh that is pretty cool or wow that would be kind of awesome if we built that it is a question of is that appropriate for the business needs that are driving the product, appropriate for the users needs and for that it ends up a lot of kind of compromise but in order to know where you make sense to compromise or where it doesn’t make sense to compromise it can be really critical to have a well articulated statement of what experience you are trying to produce.

Paul: yes

Leah: We use design principles at Adaptive Path which I know a lot of folks in the field use but for us we try to potentially create five to seven short succinct statements of what the experience of the product should be and doing that helps us to look at all those ideas and say, like this is the coolest most web 2.0 interface I ever saw but it does not support our design principle so it is probably out of the door. The key to the design principles are that they are not, it is not a statement of what the functionality of there system is, it is not like sort of brand attributes it really needs to be something that implicitly invokes what the experience is going to be like so like TiVo has some great design principles early on in the development of their product they created some statements of what they wanted their product to be and you can even when you use TiVo now you can really see a reflection of that. Their design principles were “it’s entertainment stupid”, “it’s TV stupid”, “it’s video dammit”, everything is smooth and gentle, no modality or deep hierarchy, respect the viewers privacy. These are all things they are not quite features and functionality although some of them allude to it, they are not quite brand statements although there is certainly a lot of brand personality expressed in them. They sort of describe what the experience of using TiVo should feel like and it kind so works well in that respect.

Paul: hmmm, excellent that’s been so useful I could carry in talking for hours about this particular subject, but that is certainly a brilliant introduction and I would encourage people to check out the slides that you produced for that presentation which are up on slide share if you search for UX team of one you will find them no doubt. Thank you very much for coming on the show Leah and hopefully we will get you on again in the future to talk about other related issues and we can start this whole conversation all over again.

Leah: That sounds great, thank you very much Paul, I really enjoyed it.

Paul: Good to talk to you, Bye

Leah: Take care, Bye now.

Listeners feedback: Warranties

Got this question through from Andy Wickes:

I’m really interested in how you draw up a warranty regarding a website, and what you cover and for how long.

We are constantly plagued with clients expecting us to continue to support their site months after completion even though they refuse to pay a support fee.

There seems to be an expectation that a site should never develop a problem, never break when new browsers are released, and never cause issues even though we all know that sometimes issues arise from hosts that we end up attending to on their behalf.

I agree with your that the most vital thing is a firm agreement between agency and client at the outset as to exactly what each party expects from the other, but I am keen to learn what you expect to find in a ‘standard’ warrarnty agreement, what is covered, what length of time is suitable as part of the build fee.

Slightly ‘how long is a piece of string’ I grant you, but something I know my team and friend find a constantly challenging topic!

We include the following warranty as part of all our contracts:

The Contractor warrants that all the Deliverables shall collectively provide the functionality specified in the Statement of Work. For a period of twelve (12) months from the date of acceptance by the Client of the final Deliverable the Contractor shall promptly remedy at the Contractor’s own cost any non-compliance of the Deliverables with the specification set out in the Statement of Work or such non performance of the Site.

So, in English, that means that we will fix any genuine bugs for free on a site that we have developed within twelve months of the go-live date. There are two key issues that can crop up relating to warranties.

Interpretation

Taking my last sentence as an example – what does ‘genuine bugs’ mean? If it’s a CMS job, then some kind of functionality defect such as a form not submitting properly would definitely fit that description. But, as Andy mentions, what about rendering bugs in new browsers? The legalese states that we will fix bugs “within the specification of the Statement of Work”. New browsers aren’t included in that.

That old adage ‘common sense’ tends to come to the forefront in situations like this. If the ‘fix’ will take a tiny amount of time and, at that point, you are negotiating another much larger project with the same client then giving a little slack probably wouldn’t hurt your relationship. However, you always have to make sure that the client knows that you are offering something that is outside of the warranty otherwise you could end up creating an expectation that it will happen every time.

Another recent example where we decided it was in our interest to fix a number of sites free of charge – that were all outside their warranty – was when early versions of our CMS became vulnerable to a security risk.

Though we could have insisted that the work we carried out was chargeable, we decided that having a bunch of broken sites was potentially more damaging to our reputation than worrying about chasing clients for the small cost of fixing the sites.

Expectation

The second issue relates to what a client expects of a warranty with an agency. There is a view, I believe, that a lot of clients see a warranty as a support agreement.

We have often had calls or emails that relate to CMS usage, for example, “I can’t remember how to input a news story on to the site, can you remind me”.  Again, in this type of situation, common sense should rule but if a client is continually asking support related queries or is outside of the warranty period then explain that you can either provide an estimate for the work they are requesting or that they may wish to consider setting up a support agreement where they can call-off your time more easily.

This can be occasionally met with a frosty reception especially if you are no longer working with that particular client but, you are not being unreasonable in any way. You are simply charging for your time like everyone else in business. To use an analogy, no-one likes paying to have their car serviced but equally, we don’t expect the garage to do it for free.

Summary

As with most things contract related, make sure that you discuss what your warranty means with your new client before you start work. Concentrate on the fact that it is not a support agreement and discuss the potential need for a support agreement.

Also mention that websites, like most things, do break sometimes and often this is long after a warranty period has run out.

Back to top

The 7 wonders of wireframes

Quick, hand drawn wireframes can provide substantial benefits that will save you time and money.

Wireframes have become an intrinsic part of the way we work at Headscape. In this post I want to explain why we are so enthusiastic about them, and how we use them in our process.

However before we do that, lets take a step back and look at exactly what we mean by wireframes.

It is easy to think of wireframes as HTML prototypes of an entire website (or at least key sections). Although this is certainly one type of wireframe it is not the one I wish to focus on.

The problem with HTML prototypes is that they are time consuming and expensive. Building a functional prototype takes a lot of work and in most cases is  discarded once the final build begins. Unless you can find a way of turning your prototype into a working site, this strikes me as a waste of resources.  In my opinion, this cost precludes their use for anything other than the largest and most complex project. However, wireframing does not need to be like that. At Headscape the vast majority of wireframes are hand drawn sketches.

An example hand drawn wireframe

This most basic approach brings with it 7 benefits:

1. Improvements in team working

For us wireframing is not just the responsibility of a designer or user experience expert, it is something everybody participates in. We will regularly bring together designer, developer, project manager and whoever else is involved in the project, to wireframe key functionality. This is valuable because it improves team working and helping each member to better understand the role of others. It is also an excellent way to breaking the waterfall model of running projects, where each team member essentially works in isolation handing off work to the next person.

2. Clearer communication

These group wireframing sessions not only improve team working, but also communication.

We used to suffer from a problem where developers was not included early enough in the project cycle. This led to functionality being promised that was difficult or impossible to build. By including everybody in the wireframing process this problem has been eliminated. A developer will quickly spot issues in a wireframe that may be missed if  buried in an email thread or functional specification.

That is the beauty of wireframes. Because they are visual it is much easier to grasp what is being proposed. Specification documents and emails are fine, but they are harder to visualize and perceptions can vary. Wireframes leaves much less room for misunderstanding.

3. A more engaged client

Of course, wireframes do not just improve communication within your own team. They also improve communication with the client. Engaging with the client continually throughout a project is vitally important. This is especially true when it comes to visual design (see The Battlefield of Design: Designers vs Clients). A client who has seen a wireframe and has been given the opportunity to provide feedback, is more likely to sign off the final design.

With some of our clients we go even further by including them in the wireframing process. We have found that with the right client this can significantly increase the quality of work. What is more, it gives the client a sense of ownership and engagement which invests them in the final design.

4. More numerous approaches

Another huge advantage of hand drawn wireframes is how easy they are to produce. When all you need is a pen, some paper and a few seconds to sketch something out, it becomes liberating. It lets you to explore many more approaches than full comp production allows.

Much of our approach is based on Leah Buley’s presentation at this years SXSW. She encourages the production of a wide variety of wireframes tackling the problem from many different angles. We will produce wireframes aimed at different user groups, different levels of expertise, and with emphasis on different business objectives or brand values. The aim is to generate as many ideas as possible.

Thanks to Paul Mooney for the use of this video

Once you have established a wide variety of approaches, you can refine, discard and combine them until you have two or three that could work.

It would be impossible to explore this number of different approaches in any other way.

5. A basis for testing

Once you have two or three wireframes with potential, the next step is to test them with real users.

There is a perception that it is necessary to test against completed comps or HTML prototypes, however that is not the case. There is real benefit in testing even the most basic hand drawn wireframe. You can…

  • ask users what they would click on to complete certain key tasks,
  • get feedback on the naming of labels,
  • establish whether you have the right visual hierarchy.

Obviously testing against a hand drawn wireframe is not as informative as testing against a final site. However, it does enable you to identify problems before too much time has been invested.

6. A greater willingness to change

The problem with user testing a final design, HTML prototype, or worse still a completed site, is that a considerable amount of work has already been done. This makes it hard to change.

The same is true if a client rejects a finished design. Hours of work have gone into that design and the designer feels committed to that approach. There is a substantial cost in starting again.

This is not the case with hand drawn wireframes. Because they are quick and easy to produce, it costs nothing to discard them and try another approach. This willingness to change makes you much more responsive to the results of user testing and feedback from the client.

7. Faster and cheaper projects

Finally, although wireframing in this way takes a small investment of time and money, ultimately it brings cost savings and prevent slippages.

This is because…

  • The developer has been involved in wireframing and so isn’t surprised by unforseen functionality that might increase costs and extend timescales.
  • The client has seen the wireframes and so is more likely to signoff the final design. This reduces the need for expensive iterations or multiple concepts.
  • User testing is done earlier in the project and so changes can be made before significant development has begun. It is more expensive to change existing work than build it right first time.

Wireframing upfront also reduces uncertainty in projects. It is possible to budget for, and schedule in, wireframing. However, it is much harder to do that for unforeseen complexity and multiple iterations.

Adding polish

It is worth noting that hand drawn wireframes do come with their drawbacks. We have found that sketches can become messy and confusing once they have been drawn and redrawn based on feedback. This can lead to confusion and also lacks professionalism when presenting to the client.

We therefore tend to take the final wireframes and produce a more finished version to present to clients. This becomes the definitive document that we work from. It is at this stage we also add more detail in terms of copy, making it a complete roadmap to work from.

When we first started this process the final wireframes were very polished. However, we discovered that this caused confusion among some of our clients who mistook these for final designs. We also found that producing these was time consuming and so undermined the benefits of hand drawn sketches.

Finally, we have settled on a tool called Balsamiq for producing finished wireframes. The reason we like Balsamiq is because it is amazingly quick to produce a wireframe, but also still looks like a wireframe rather than a finished design.

An example of a Balsamiq Wireframe

Conclusion

Too often we begin the design process by opening Photoshop. However although Photoshop is a powerful tool, it is the wrong place to start. It is a sledgehammer to crack a nut.

You may shy away from sketching wireframes because you cannot draw. However, this is not about artistic ability. It is about quickly and visually communicating ideas. Wireframing should be fast and furious, and I actually believe that artistic ability can make you overly precious about the quality of your sketches.

Hopefully this post has communicated the benefits of hand drawn wireframes and encouraged you to close your macbook and open your sketchbook.

170. Versus

On this week’s show: Paul talks about the conflicts surrounding design decisions, and Teifion challenges a BBC article that asks “Are the days of the web amateur numbered?”

Play

Download this show.

Launch our podcast player

News

Please start from the beginning

Not long ago I read Malcolm Gladwell’s book Outliers, which includes many stories about how well known individuals got their big break. There is something fascinating about people’s backgrounds – the opportunities and experiences that help shape a career. I am often surprised that people’s success has more to do with circumstances than talent.

Our very own Ryan Taylor shares this fascination and so has started a new video series where he asks industry figures about their background. He started the series by interviewing me. Apparently he wanted to practice before interviewing important people :-) He has since moved on to talk to Drew McLellan and has Mel Kirk and Sarah Parmenter waiting to be released.

I think there is a lot of potential in this series. The web is still such a young medium and few trained to be a ‘web designer’. It is therefore fascinating to see how people came to the industry. There is also a lot to be learnt for those starting out in their careers. Be sure to pop along to Ryan’s site and subscribe to his RSS feed. I look forward to future interviews.

Running a card sorting exercise

Establishing your site’s information architecture can be one of the most challenging jobs for a website owner. You face two major obstacles. The first is your organizational bias. You can become so institutionalized by the way your organization works, that it can prove  hard to view things from an outside perspective. What seems logical to you can make no sense to an end user. Second is internal politics. Information architecture can often become an area of contention with different parts of the organization vying for top level billing. This can lead to IA by committee, which never leads to a user centric approach.

Card sorting is one way to overcome these challenges. It is an objective way of organizing the information on your site, around user’s needs rather than company structure. It works by putting users in control of creating that structure by asking them to sort cards containing content in a meaningful way.

At first glance, running a card sorting exercise can appear intimating. However, as a post on Sitepoint demonstrates, it is actually straightforward. “Run Your First Card Sort” is a step by step walk through of everything involved in running a card sorting session. Although the method laid out is not the only approach, it does tackle the key steps including…

  1. Preparation
  2. Recruitment
  3. Running the session
  4. Interpretation and reporting

If you haven’t run a card sorting session before and would like to make your IA more user centric, then I would highly recommend this post.

The complete Google Analytics power guide

I have watched with fascination as Google Analytics slowly decimated the website statistics sector. When Google Analytics was launched it was a relatively simple product, more aimed at smaller websites and blogs. However, over time it has become increasingly more powerful and useful to even the most stats hungry power user. Enterprise products have struggled to compete with a product that offers so much functionality for free.

However, with this increased power came more complexity. What was once a simple product has become increasingly harder to master. Although Jeff Veen did some amazing work at simplifying the interface, it is still hard to harness its full power. The result is that many fail to use it to its full potential while others are too intimidated to try.

This is unfortunate as Google Analytics offers so much information to an experienced user. It paints a picture of how users are truly interacting with your site, while informing your sites structure and content.

Fortunately “The Complete Google Analytics Power User Guide” equips website owners with all they need to know to squeeze the full potential from this incredible powerful tool. This series of posts include detailed information on every aspect of the program from setup to tracking goals and funnels. Best of all the various posts have also be brought together in a single 45 page PDF, making it a lot more accessible for offline reading.

If you ever use Google Analytics or are interested in what it can do for your site, this is definitely worth downloading.

Estimating time for design projects

One of the toughest parts of being a web designer is estimating the price of projects. There are so many variables. So many ways you could approach a project, and so many things that could go wrong. Nobody likes estimating a job and rarely do any of us get it spot on. It is a minefield of pain. On one hand you need to add contingency  for the unseen, but on the other, if you add too much you become uncompetitive.

Effective Strategy To Estimate Time For Your Design Projects is a new Smashing Magazine post that endeavors to address these issues. It begins by looking at what causes a project to be misquoted. Reasons include…

  • Unknown technologies
  • Grey areas in the specification provided
  • Bespoke development in unfamiliar areas
  • The cost of sale being too high
  • Lack of time to quote properly
  • Too high a desire to win the work
  • No previous time tracking to refer back to
  • Estimating time for a project is not fun

It then goes on to address each of these issues with a particular emphasis on granular planning and the need to track time.

I have mixed feelings about this post. It provides an excellent structure for creating quotes and even has a list of common tasks to quote against. However, it feels a little labor intensive at points, going into more detail than most can justify. I guess to some extent it depends on the size of projects you undertake.

That said, it certainly makes you think about your quotation process and encourages you to be more efficient in the way you price projects. This can never be a bad thing.

Before I move on from news – if you live in UK mark the 22nd June down in your calendar. That is the date tickets for dconstruct go on sale, and judging by previous years they will sell out shortly thereafter. Myself and Marcus will be there recording interviews for the show. However, we are also going to arrange a meetup over lunch so hopefully that will be an extra incentive to come.

Back to top

Feature: Clients vs. Designers

Establishing the look and feel of a site can be a point of contention. Web designers can become frustrated because their expertise is not respected. Client are annoyed because their designer does not listen to them. How then do we ensure the design process runs smoothly?

Read The Battlefield of Design – Clients vs. Designers

Back to top

Listeners feedback: Amateur vs Professional

Teifion Jordan sent us a very insightful review of a BBC article that I wanted to share with you…

The article is titled “Is the web’s amateur hour over?“, a provocative title for those that blog, contribute to open source, have a flickr account with photos licensed under CC and so on and so forth. The article opens describing somebody that revels in the name “Antichrist of silicon valley”, anybody that revels in a name such as that is either crazy or doing it for the attention and page views it brings them. It sums up the rest of the description pretty accurately.

The article then explains how he dislikes things such as Wikipedia because they’re maintained by people working for free, how seasoned professionals are being put out of work by amateurs on youtube. At this point the article moves onto showing that all the big tech bloggers, these so called “amateurs”, are actually seasoned journalists.

The crux of the article is of course Amateur vs Professional, does the fact that anybody can start a blog mean that anybody is a journalist? Does having a flickr account make you a photographer? Yes and no, technically yes but in reality most people will never gain enough of an audience to become influential or make money from it. Professionals are paid and generally for a good reason, a professional blogger probably has experience and good writing ability, an amateur probably won’t.

But we’ve still not come to the actual issue, I’ll say it again. Amateur vs Professional, yes that’s it, it’s the 2nd word in, verses. The sensationalist man described at the start of the article seems to feel that there is a competition on between those that work for free and those that work for money. More importantly, he feels that those that work for free are making it harder for those that work for money to find work!

But that’s really not true is it? If it were true then wouldn’t we all be using Linux because it’s free? Wouldn’t Open office be the de-facto standard of office software? Why would Apple even bother making the iPhone if Google is just going to make Android? Why does Paul bother to make websites when anybody could just do it for themselves?

There are I think three main reasons. Quality, Trust and Support. Open Office is a nice piece of software but it’s not got the features of MS Office, it’s not as high a quality product. Linux is really really well supported if you know where to look, for most people however they’d much rather get a normal computer which they already know how to use and can phone tech support for. And trust, if you pay Paul huge sums of money to make a website for you then you trust he will do a good job, that he knows what he is doing.

So no, I don’t think it is Amateurs vs Professionals, I think it is Amateurs and Professionals. One does not exclude the other, instead one will spur on the other and generate often healthy competition. Think about how much IE6 stagnated because nobody was competing with it any more. Now that people are competing with them on browsers MS are starting to get their act together somewhat.

Next, the work of an amateur can be used to help a professional. PHP is a free product but countless people make money writing websites in PHP. Throughout this “review” I have maintained the position that on average a paid for product or service will be of a higher quality. This is true, on average it will be better but not always. There’s a reason that if I had a 2nd computer it’d be booting Linux and not Vista, there’s a reason I develop websites in PHP rather than C#. It’s because the free option is better or the paid option not good enough to warrant the cost in my opinion.

Lastly I want to come to why. We’ve all seen them, the blogs that must have about 3 readers one of whom is the Mum of the author, I know they exist because I write one such blog. Why do people post up bad photos to Flickr? Why do I spend a lot of time running an online game from which I make no money? It’s because everybody has a hobby or two and this is the way that they peruse it. There is nothing wrong with this and should in fact be encouraged. What may now be a bad set of photos on a flickr account could in a few months with encouragement and tips a very good set of high quality photos. What may for now be just a programming hobby could in a few years turn into a very very good language.

Paul started up this podcast because he thought it’d be fun and may or may not have been high from using the computer for too long. It’s come a long way since then with thousands of listeners and an entire community built around it. Thus I end with the idea that while something may be amateur now, it can become professional in time and that this is good.

Back to top

169. Type

On this weeks show: Paul talks about the power of story telling and shares some tips for “getting in the zone” and Mark Boulton joins us to talk about web typography.

Play

Download this show.

Launch our podcast player

Housekeeping: Jobs and Projects

Whether you are looking for a freelancer to build your latest web project or a permanent addition to your web team, the Boagworld forum is now the place to go.

We have added a new jobs category which lists web design projects and jobs free of charge. So, whether you are looking to post a job or pick up some work you should take a few minutes to check it out. Right now there are jobs for…

  • A web project manager
  • A joomla expert
  • ASP.net developers
  • PHP developers
  • And much more.

Back to top

News

Coding like its 1999

This week Cameron Moll has posted “Coding like it’s 1999“. The reason for this witty title is his decision to return to using HTML 4 and pixel font sizes, both of which were best practice in 1999.

The post is essentially a justification for these two decisions and he puts forward a very convincing argument for both. He credits his decision to move back to HTML 4 to Dave Shea who recently wrote a compelling argument to drop XHTML. Dave writes…

Six years ago, many of us thought XHTML would be the future of the web and we’d be living in an XML world by now. But in the intervening time it’s become fairly apparent to myself and others that XHTML2 really isn’t going anywhere, at least not in the realm that we care about…. I’m not ready to start working through the contortions needed to make my sites work with an HTML5 DOCTYPE yet, which leaves me with the most recent implemented version of the language…. [U]ntil I get a better sense that HTML5 has arrived, 4.01 will do me just fine for the next four or five years.

As for the decision to move back to pixel based typography, Cameron writes…

However, recent versions of every major browser — Safari, Firefox, Google Chrome, Opera, and yes, Internet Explorer — now default to page zooming instead of text scaling… What does all this mean? It means px can again be considered a viable value for font-size. It means the difference between setting text with absolute units or setting text with relative units is negligible for users. For you and me, however, the the difference is substantial. The burden of calculating relative units throughout a CSS document is replaced by the convenience of absolute units — 14px is 14px anywhere in the document, independent of parent elements whose font-size may differ.

Although at Headscape we still work with XHTML, we have moved back to pixel base typography and I suspect will do the same with HTML. I do not think it will be long before most web designers follow suit.

The power of words

Problogger has published a post that demonstrates the importance of our words. It shows how the words we pick can have a real effect on how users act. Word your copy carefully and you could substantially increase conversion.

Interestingly the post does not demonstrate this through example of good website copy. Instead it looks at the language used by successful waiters. The article takes three phrases often used by waiters and explains why they are so powerful. The phrases are…

  • “Our chef recommends”
  • “Everyone else has ordered… and they love it”
  • “So gentlemen, is everything delicious?”
From these three phrases he raises the following points…
  • Invoking the power of a higher authority will influence decisions - For example using a testimonial from an influential figure.
  • People believe in safety in numbers - “If others like something then surely I will too”. For example highlight your most popular products or articles.
  • Positive wording generates a positive feeling – For example “Thanks for subscribing to my email feed! I hope you find every post as exciting as the one that made you subscribe”.

It is an excellent article and there is a lot more detail than I have covered here – make sure you check it out.

10 tips for creating a more usable web

The Web Designers Depot has published “10 Tips to Create a More Usable Web“. Its not exactly the most original post and we have seen similar posts from Smashing Magazine in the past. That said, it is still a worth while read.

The problem is that it is so easy to forget best practice when it comes to web design. There is just so much to take into account as we design a website that we can easily overlook things. Articles like this may not necessarily teach us anything new, but they do bring to the fore best practice that may have been pushed out by more recent issues such as WCAG 2 or web typography. We can never be reminded enough of the principles of usability.

This particular list includes…

  • Creating active navigation
  • Clickable labels & buttons
  • Linking your logo
  • Increasing the hit area on a link
  • Adding focus to form fields
  • Providing a useful 404 page
  • Using language to create a casual environment
  • Applying line height for readability
  • Utilizing white space to group elements
  • Being accessible

As with all good list posts, each point is accompanied by a brief explanation and some nice examples. Check it out.

Four quick tools

I conclude today with a quick round up of various tools that have been released this week. Its a bit of an eclectic mix but they are all worthy of note…

  • Google Page Speed – Page Speed is an open-source Firefox/Firebug Add-on. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them.
  • EntityCode – HTML entities are HTML code that is used to display special characters such as the £ sign. However, remembering them all can be tricky. EntityCode is a useful reference that lists some of the most commonly used HTML entities in a very swish AJAX driven format.
  • Google Web Elements – Google Web Elements allow you to easily add your favorite Google products onto your own website. Widgets include calendar, conversations, custom search, maps, news, presentations, spreadsheets and Youtube news. All of these widgets existed previously but have now been brought together on a single site.
  • Adobe BrowserLab – Adobe BrowserLab is a browser compatibility service that provides designers screenshots of their pages on leading browsers. There has been a lot of excitement around this one, but I was not overly impressed. Sure the interface is nice and Adobe are a big name. However, the service only offers screengrabs (not interactive sites) and only for a limited number of browsers. In my opinion there are better services out there such as Litmus’ Alkaline.

Back to top

Interview: Mark Boulton on web typography

Paul: So, the next in our series of interviews from the Future of Web Design is with Mark Boulton. Hello, Mark.

Mark: Hello there.

Paul: So… we interviewed you on boagworld, didn’t we, about… quite a while ago.

Mark: It was a while now, January?

Paul: Yeah

Mark: Something like that.

Paul: Something like that, yeah.

Marcus: What, that long ago?

Paul: Well, in internet terms, that’s forever.

Mark: That’s forty years ago.

Paul: So, at the time, you were just embarking on this odyssey of doing a redesign with Drupal, or you were part-way through it. And we were talking about this very unusual approach of ‘Hey’, you know, we normally discourage people, don’t we, from doing any kind of, don’t show your design to a group and you were showing it to thousands of people.

Mark: Yes, yes.

Paul: And you talked about how great it was going to be and there was this slight fear and trepidation in your voice at various times. How’s it gone?

Mark: It’s gone really well.

Paul: Has it?

Mark: It has. It’s gone really well. It’s been terrifying on a daily basis. Posting comments for… you know, registered users on drupal.org are about 400-500 thousand.

Paul: Right.

Mark: A fairly active, passionate community; a lost of these people have invested time, money and have businesses riding on Drupal. So, however, the vast majority are really in favour of what we’re doing.

Paul: So what, how did it work in practice? You know, were you uploading designs to a blog and just saying: ‘Hey, have your say’ or was it more structured than that?

Mark: It was more structured than that; it wasn’t initially, I mean we’ve learned some painful lessons along the way. But it was a very distributed approach, so we’d have a Twitter group, we have, sorry a Twitter account, we’d have a flickr group, YouTube groups, our own blogs – mine and Leisa Reichelt’s.

Paul: Right.

Mark: We’d have drupal.org, which is the main kind of Drupal page, but we’d also have groups.drupal.org where you can create your own little groups and we’d have a group there.

Paul: OK.

Mark: The view is that, so if we just posted things to Drupal, if we just spoke to the Drupal audience, we’d get a very slanted feedback on what we were doing.

Paul: Of course.

Mark: So, the idea was that we would touch on all sectors of the, kind of all bits of the audience. And then we’d, we were working weekly iterations on a 12-week schedule.

Paul: Right.

Mark: Which was killer.

Paul: Yeah.

Mark: We would not do that again and we would release material, whatever that would be; mostly it was HTML prototypes, fairly lo-fi, and we’d release them on a Thursday and then we’d sit on our hands

Paul: And watch.

Mark: And watch, yeah, with trepidation.

Marcus: Dealing with hundreds of thousands of comments.

Paul: How did you deal with that?

Mark: Yeah, we, we…

Marcus: Ignore them!

Mark: At first, I mean, there’d be the odd occasion where you’d get flamed and things could get personal and nasty and the&helllip; of course, the natural, human reaction would be to get in there and defend yourself and, but we, after a couple of times of trying that, which didn’t work, we didn’t, we really had to walk away from the computer and…

Paul: Yeah, I think that…s a good lesson for anybody running a community or interacting with people.

Mark: Absolutely, I mean the first lot, you know, if you post something up to a community, your first day’s worth of comments are setting the scene and then the following days from that trends will start to emerge &endash; repeated themes &endash; and that’s what we were watching for. So, we’d spend maybe four days, through till the Monday, just watching, you know, over the weekend, which was quite nice because we could do other&emdash;have a life…

Paul: Which is always good.

Mark: Yeah. And then we’d go back over the comments on the Monday and try and establish some themes that we agreed with and we put forward into the next iteration.

Paul: Right.

Mark: But it’s probably worth saying at this point that it was not a design by demo… it was not a, kind of, a democratic process.

Paul: No.

Mark: Because you just end up with mediocrity, I mean, kind of a little bit of a dissing WordPress here, but what WordPress are doing with the voting.

Paul: Right.

Mark: That’s not really our approach. Our approach was… we had a clear design vision.

Paul: Right.

Mark: And we pretty much stuck to that, but it was the way that you presented the material and gathered the feedback, that’s kind of steering that vision.

Paul: Yeah, so did you learn lessons about presenting the material and how to do that?

Mark: Yeah, we’re still doing that, we’re still on a kind of weekly basis.

Paul: Because that’s always the big thing isn’t it? You know, you can’t just take a design, show it to people and say: “What do you think?”

Mark: No, just go: “Here you go” No, which we did early on and it was a disaster.

Paul: Yeah, I can imagine.

Mark: Yeah, it was. It was like: “What do you think of this? I’ve got some ideas for the logotype.” “It’s rubbish!” You know, hundreds of comments.

Marcus: And they all start arguing with each other, no doubt?

Mark: Yeah, and it was… so, you have to put something in place to ask for specific feedback; that’s where we got to. So, it was, if you’re posting up an iteration which involved heave change to the masthead design, we’d steer it like: “What are your thoughts on the navigation? You know, do you think this works, do you think that works?” And wherever possible, we’d validate our design direction with testing and research anyway.

Paul: OK.

Mark: But, recently we’ve been starting doing videos.

Paul: Right. Which is quicker, I’m guessing.

Mark: Kind of, a little, er… yeah, it is. It’s been good.

Paul: I guess, I mean, the videos, did you, so you’re talking over the top of the videos and…

Mark: No, no. I mean, it’s literally we’d… so, I’d come up to London and I’d work with Leisa in the British Museum, or whatever, and after a morning, we’d have a Flip and I’d just video the two of us talking about stuff.

Paul: See, I think that’s really good, because it makes people think twice before criticising, because there are real people behind them.

Mark: They see you as a real person. Absolutely.

Paul: So, there’s probably a benefit to that.

Mark: I think there is, I think… a lot of people hated it. And a lot of people hate the…

Paul: Yeah, but a lot of people hate everything.

Mark: Yeah [All laugh] A lot of people hated the distributed approach because they couldn’t keep track of everything, but i’s not…

Paul: Which I can kind of understand.

Mark: It’s not really their job to keep track of it, they can if they want, they know where everything is and, sorry if it’s difficult, but that’s the way it is. So, this time around we set up a bunch of Yahoo pipes, and things like that to aggregate everything from all over the place and just pop it in a WordPress blog.

Paul: Right.

Mark: That’s the approach that we’re doing for redesigning the back-end, and that’s working pretty well, because people have a framework in which to feedback, they’re not going hunting for everything all over the place.

Paul: I’m guessing that people are even more opinionated about the back-end than the front-end?

Mark: Oh, massively! A lot of people don’t really care about the drupal.org website, I mean it’s looked terrible for years and it’s not done them any harm, so a lot of people are saying like: “Well, why bother?” But Drupal’s almost, kind of, on a tipping point, I think; there’s a lot of big commercial companies using it and it’s important, but the back-end is been developed by developers for developers.

Paul: Ooh, painful.

Mark: Yeah, so to go in there and say that the user experience is broken, which is what we have said, has been interesting.

Paul: Right.

Marcus: Because they know it backwards, I guess.

Mark: Well, they know it backwards and they’re comfortable with it. THe thing with the Drupal, as a system is that you download it and you install it and then you hit this brick wall really hard and then you have to spend six months of a pretty steep learning curve to even get a rudimentary site online. And that’s, we’re trying to flatten the curve. But a lot of developers don’t really understand the need for it.

Paul: That’s developers for you!

Mark: That’s fine. [All laugh] I’m fine with that.

Paul: So, I mean, this is quite an unusual approach that you’ve taken here and it makes a lot of sense because, you know, Open Source software, it has to be an open and collaborative process and all the rest of it. Do you, would you ever do this again and if so, would you only do it with Open Source stuff, or do you think there’s a value in doing it with non-Open Source stuff?

Mark: I think there’s a value doing this with communities, where communities have a vested interest, either financially or with time spent in the community to take that community on board and redesign it for them; I think it’s pretty disrespectful. So, I think it would work for communities, you know, the social side of the web is ever increasing and I think this approach would work for the majority of that, but it takes a certain type of thick-skinned designer to take it on the chin, because it goes completely contrary to the way that designers are schooled and the way that we practice our craft every day, is that we’re the problem solvers with the years of experience and we’re the experts and here’s our solution, it doesn’t work in this sense.

Marcus: Can I ask a sales-y question?

Mark: Yeah.

Marcus: Because I don’t know how you won this work. Was that the differentiation that gave you the… this is what we’re proposing to do?

Mark: Er, yeah, I believe so, yeah. It was the kind of the loose, almost by the seat of our pants agile approach and the fact that we were not ingrained in a process and we were quite happy and willing to break it apart and completely.

Marcus: Because it’s going to take a long time, isn’t, and most clients want it, you know, can you do it in a week?

Mark: Oh yeah, the drupal.org redesign isn’t due to go live for another few months and our involvement was four months.

Marcus: Sure.

Paul: Right.

Mark: So, yeah, it takes a long time, it’s a lot of effort but, from a sales point of view, we’ve now taken on more of a, so we use to work pretty strict waterfall, like a lot of agencies did, and now we don’t, we work, I wouldn’t say we were agile because agile can be as restrictive as waterfall, just a different name. But we work a very iterative design process now and are finding that our clients are loving it because they’re getting involved right away, there’s no time wasting on functional specifications and weeks and weeks and weeks of scoping; it’s getting in and solving the problem, and from a financial and a business point of view, it’s a very scalable model, so you have x number of days at a certain price on a sprint and you can expand and contract that process according to scope and budget. It does require quite a leap of faith by the client, to say: “what, you mean you’re not giving me a fixed price?”

Paul: Yeah, that’s the hard sell.

Mark: I’m like: “No” And that is hard but I’ve found that a lot of clients you sit down and you talk them through it; they can see the advantages.

Paul: Because we’re not at that point, are we?

Marcus: Er, not with new clients. Old, you know, existing clients will accept it because they trust you, but it’s always this… I mean, I don’t know, would I… say, if I owned a business and I was going to hire someone I didn’t know, even if I could see that they’d done a lot of good work etc. etc. it would be like: “Ooh, I don’t know if I could do that” You know.

Paul: Difficult.

Mark: So, a lot, so, in those instances and there have been a few, then phasing comes into it, you know and let’s see how a few sprints go and if you like how it’s going at this price, let’s expand it out and…

Paul: Yeah.

Marcus: Interesting stuff.

Mark: So, yeah, it’s interesting.

Paul: So, you like to do things different, don’t you [all laugh] you know.

Mark: Wherever possible.

Paul: Yeah, and talking of which, you’ve just given an interesting talk about web typography that’s got a bit of a different slant on the whole subject of web typography. Talk us through a little bit, you know, give us a potted version of your talk.

Mark: A potted version is 20-25 minutes. So, this week there’s been a lot of discussion online, based on Comic Sans.

Paul: Right.

Marcus: Right.

Mark: Comic Sans is evil, apparently.

Paul: Yes.

Mark: I don’t think it is evil.

Paul: OK.

Mark: I think it’s the victim of being used in the wrong context for years and years. And I think that, so there’s also been a lot of talk about font embedding, you know people are crying out for it, it’s why sIFR exists, and all of that. The technicalities of how it’s going to work with browsers and manufacturers and the font foundries aside, is it actually a good idea?

Paul: OK. [all laugh]

Mark: And I mean that from the point that the majority, the vast majority of typefaces have been designed for a particular reason and they are primarily designed for print usage first and screen usage doesn’t get a look in beyond the preview of the screen font. Now, Georgia and Verdana and a bunch of the Microsoft ‘c’ fonts have been designed the other way around. They’ve been designed for screen first and print second. Now, we’re constrained by those typefaces and that’s actually a good thing.

Paul: Because it makes sure you’re using typefaces designed for the purpose.

Mark: It makes sure you’re using the right tool for the job. Font embeddign could be opening the floodgates to a whole world of pain, I think, in terms of type, and it’s not the designers that will be at fault, it will be, you know, the people who are going to suffer are the users of the sites.

Paul: So, is there a… I mean, surely that shouldn’t preclude font embedding, but perhaps there is an opportunity here, I don’t know, to limit font embedding to fonts that are enabled for the web, and open up a whole new business.

Mark: Could be, exactly, could be. I haven’t really thought beyond my twitchiness of this being a good idea. I haven’t really, I would like to think: “I don’t think this is good” but, I think the crux of my point is moving beyond font embedding, is to actually, the reason why fonts in other tools, which has led to the usage of Comic Sans is because the tools that people can use don’t allow them to make good design decisions.

Paul: Right. While some constraints do.

Mark: So, with some constraints and some steering, can help, so why not as designers, why don’t we get our heads together and think about how we can, kind of, scaffold that experience for people. How can we make, because every one’s a designer now.

Paul: Yes, for better or worse.

Marcus: Even me.

Paul: Yes, Anna wants to talk to you about your design for your band website, we won’t dwell on that now, in the middle of an interview.

Mark: Everybody’s a designer and everybody’s, you know, someone who uses Comic Sans because they think it’s fun and quirky is right in doing so, but what they’re not considering is their audience, and the context that it’s used and all of that. So, that’s pretty much the, my talk in 3 minutes.

Paul: The crux of the argument. I mean you did in your talk go on and discuss the role of typography more generally, which I thought was quite interesting as well, share a few of your thoughts about that.

Mark: About how I see typography as a craft and that kind of thing?

Paul: Yeah, and how it fits into the whole process and the relationship between design and content and that kind of thing.

Mark: So, it was split down into 4 really. This talk was quite good, it was quite therapeutic, in a way, because it made me really answer a lot of tough, ask a lot of tough questions of myself as to what do I think typography is, on the web, to me, what is it personally. With that is type as kind of structure, which, you know, is a lot of information architecture, really, that to me that is typography; it is type as language, how typography is married with content and how the, we’re in a world on the web where designers are designing systems for content to go into.

Paul: Yeah, template-based design.

Mark: Exactly, and they’re divorced from the content, you know, divorced from the language, in that sense, typography’s quite hard to do, good typography anyway; then there was, what else was there? Type as process, so the Jesse James Garrett’s levels of user experience, with the idea that typography in that instance is relegated to the surface plane, which is the visual plane, you know, it’s: “make this look nice” typography; to me that isn’t typography.

Paul: So, what is typography?

Mark: Typography goes deeper, typography goes deeper than how something looks, it is how information is structured, it is how information in understood, it is how words and language is conveyed.

Paul: Can you give some examples of that, because that’s quite, you know, it sounds very good, but it’s quite hard to get your head around maybe.

Mark: Yeah, OK, so it’s, what’s that quote: “You cannot not communicate”

Paul: Right.

Mark: No matter what you do, you’re saying something to somebody, so your choice of typeface says something about the words that you’re writing.

Paul: Yes, it does.

Mark: If, as a designer, you don’t know what those words are, how can you communicate the message?

Paul: Yeah, I mean it goes back to Comic Sans.

Mark: To Comic Sans, exactly, and that’s one of the difficulties, there’s been a lot of talk about art direction on the web, and I see that as the biggest barrier to art direction is that designers are divorced from the content.

Paul: I mean, this is almost quite depressing.

Mark: Yes, really I…

Paul: It’s not really happening.

Mark: Sleepless nights!

Paul: It’s not happy idea, because, I mean, fundamentally, that isn’t going to change, we’re not going to get into a situation, you know, because rightly want to be able to change and update and alter content on their own website and that makes a lot of sense, which means even if you have the content up-front, it may change further down the line. I guess maybe the tone doesn’t.

Marcus: I was going to say you’re looking at tone here.

Mark: The tone, you’re looking at branding and you’re looking at designers being involved right at the offset.

Marcus: And I think that is better now than it was even two years ago.

Mark: Oh, it is, yeah, it is, yeah, absolutely.

Marcus: I mean, we are looking now at involving copywriters, we are pulling copywriters, we’re talking to our clients about employing copywriters through us, that’s new.

Paul: And from the start of the process as well.

Mark: Yes, right. So, we’re doing the same, we’re looking at employing content strategists rather than actually writers, more from a branding perspective, because that kind of stuff, you know, doesn’t really change, depending on the words that you, the values of the client are still communicated and it’s aligning, it’s the designer’s job to align the typography, not just the font, but the way the information is structured and working with a copywriter to make sure the typeface matches the tone of voice. and all of that is a package. So, that’s what I mean about the surface plane; typography shouldn’t be relegated to: “choose a typeface and away you go”

Marcus: Yeah, I mean, that’s the big thing isn’t it, that’s for me, what I’ve taken from this is your, is the font, the typeface has to match the message, basically.

Mark: Yeah, absolutely.

Marcus: It has to fit with the branding.

Paul: OK, good stuff. I mean, that’s yeah, you’re doing some really interesting stuff. I love the way you’re pushing, kind of, what is the conceived wisdom in lots of areas, which I don’t suppose you think you’re doing, you just stumble into these things, obviously.

Mark: Yeah, I did. Getting together this talk was one thing, this talk did not pan out the way I thought it would and to question the very notion of font embedding is quite a…

Paul: Because our whole culture really is built around the idea of choice, more choice is better, but actually that’s not always the case.

Mark: Yep, so I mentioned that in my talk.

Paul: Oh, did you?

Mark: About the jam stall, have you seen this?

Paul: Yeah, yeah. That classic, tell that story, that’s a good one.

Mark: So, there’s a couple of psychologists, a few years ago did a study where they had a jam stall and they had 26 varieties of jam and nobody bought any and then they reduced the jam varieties down to six and sales increased by 10 and it’s just the choice.

Paul: You could almost be overwhelmed.

Mark: Well, yeah.

Paul: Even as a designer you can, you can open up Photoshop, look down that font list and go “crap!”

Mark: So, this is where I showed a screengrab of TinyMCE and that, out of the bag, has 82 choices for a user, so WYSIWYG isn’t great in those terms, but there’s something within there which is, as designers and the design community could build on, which is this notion of styles and how you can use the styles to create a cascade, through your typography, through your design, so we’d limit the end-user’s choices, but not in a bad way, constraints are good.

Paul: No, I mean, the way we now work, because we use our own content management system with our own adapted WYSIWYG editor it, we’ve taken a third party’s and messed it around, that basically we only allow, by default, obviosuly sometimes clients disagree, but we only allow them to mark up the content semantically, so they’re not at any stage picking fonts, because that’s the designer’s job, they’re just describing what the content is, whether it’s a heading or a sub-heading or whatever else, which, you know, obviously, you know, ensures that design style goes through, but also makes it much easier to use for the user as well, they’re not having, you know, a plethora of options and buttons to deal with, so…

Mark: But it goes beyond the web, I think, and this is what I was thinking as I was going through this, the reason why Comic Sans is all over the place is because Word makes it easy for you to make those bad design decisions, so it goes beyond that and content management systems in 10-20 year’s time could look nothing like what we’ve got now and if we don’t think very carefully about this notion of choice, then we could be in a real mess.

Paul: Yeah. Well, certainly we’ll be in a real mess anyway.

Mark: But, you know, a lot of people would push back on that and say: “What’s your problem? That’s fine. Mess is fine.” I don’t agree.

Paul: A little bit of mess is alright. No, I see where you’re coming from and, you know, I think there is a lot of value in that. I think I would personally still like to see font embedding, but I wouldn’t object to that being limited. I mean, one of the big problems to font embedding, as I understand it, and I’m not as knowledgeable on it as you, but is a licensing problem. So, if we have a new generation, I just look at the font industry, you know, the people that produce fonts and go: “Look, you’re missing a trick here, you know, you could create a whole new range of fonts, designed for screen, licensed for the web, and there we go.” So, if that’s what we end up with, I mean, that’s great.

Mark: That would be great, you know, if we got the calibre of typefaces like the new Microsoft ‘c’ fonts, and we got, you know, a library of 40 of those to use, 50, that would be awesome. If we ended up with a way of embedding up to, you know, Bitstream’s library’s what 28000 fonts, you can choose what you like, I don’t see that as…

Paul: Not so good.

Mark: Not a good thing.

Paul: I mean, even as somebody, I mean, I went to art college and, you know, obviously I had to study typography as part of that, I still feel overwhelmed. When I, I know some people absolutely love, you know, going to some of these foundries with all these different fonts and they spend hours picking through and it’s like buying shoes for, no I won’t say women because that will be sexist but, you know it’s almost like an addiction. For me, it just overwhelms me.

Mark: Yeah, no, I’m the same, I’m never, and this is one of the great things about the web is the restrictions in the typeface you can use because it makes you think more about typography beyond the font choice.

Paul: Yeah, which is only a tiny part of typography.

Mark: Exactly, and it makes you really push typography, and people are still pushing Georgia and Verdana and there’re still pushing it and they’re still making great looking sites. Font embedding can only confuse all that, unless it’s done in a pretty structured way, but like you say, the licensing is one big hurdle to get over.

Paul: Well, that was probably the most eclectic interview we’ve ever done, covering lot’s of random subjects,but very good, thank you for coming on the show, Mark.

Mark: No, thank you very much for having me.

Thanks goes to Simon Douglas for transcribing this interview.

Back to top

Listeners feedback

Storytelling

Mark from Taunton writes:

I run a rather dull corporate website for a company who builds and sells pre-fabricated timber houses. It is a competitive market and although a lot of users visit hardly anybody contacts us for a quote. To be honest, I have lost any enthusiasm for the site. Can you help!?

I could answer this question by focusing on the importance of repeat traffic on conversion rates. We could look at generating repeat traffic through the use of articles, newsletters and offers. However, we have covered nurturing repeat traffic before. Instead I want to look at the power of story telling as a way to engage with users.

Users considering purchasing high value products and services have a number of generic questions…

  • Can I work with these people?
  • Are they experts at what they produce?
  • Can I trust them?
  • Is the product or service of sufficient quality?
In short any corporate website that sells a product or service should be about the product and the people. One way of focusing on these two things is to tell the story of the product/service. In Mark’s case this would progress through the process of designing, manufacturing and building a pre-fabricated timber house. At each stage you would introduce key people involved in the process – the account manager who deals with the customer, the architect, the project manager, the builder etc. The story could even be the experience of one particular customer and so end with a testimonial from that customer. These people could be interviewed on video or profiled in the copy. Either way it gives the user the chance to see the expertise and personalities behind the business. It builds trust and demonstrates the quality of your product and people.
Finally, the story based approach helps the user imagine themselves going through the process and therefore helps them picture working with your organization.

Getting into the zone

Paul wrote a question aimed at Elliott Jay Stocks in our forum that I would like to respond to as well. Paul wrote…

As a designer, I feel times when I am very creative, others when I know an hour infront of Photoshop will be useless. So, fellow designers how do you make yourself get into the zone. I imagine this is even harder for freelancers, or maybe easier actually, as you can pick and choose hours to work.

Like most people I find it very hard to artificially force myself to be ‘in the zone’. However, I have learn’t over the years that there are some things you can do that increase the chance of it happening. These are…

  • Change your environment – If inspiration is hard to come by I often find that a change of scenery can be a massive stimulus. Go and work in a different room, a local coffee shop or even in the middle of a field. Anything to kick start your creative juices. In my younger days I was even known to work under my desk or on top of a wardrobe.
  • Use a different approach – Another similar approach to changing your environment is to change the way you are tackling the task. If you are trying to design a site in Photoshop move to pen and paper. Try designing just in black and white or reduce your design to simple boxes. Often approaching a problem from a different angle sparks inspiration.
  • Create distractions - Everybody always advices that you remove distractions to ‘get into the zone’. However, personally I find this leaves me staring at a blank page until my eyes bleed. An opposite approach that has worked for me is to actually add distraction. For example I will set an alarm for 10 minutes. After that 10 minutes I force myself to take a 2 minute break. These short spurts of creativity seem to work for me and the breaks are a frustration that make me hungry to get back to work.
  • Take a break – Proper breaks are important too. Sometimes you need to walk away from a problem before the solution comes to you. It has taken me a long time to accept that some of my best work on a problem is done when I am not consciously thinking about it. If I get stuck I find that watching some TV or going for a walk is a very effective way of putting me ‘in the zone’ when I return.
  • Go with the flow – Finally, it is important that when inspiration strikes  you run with it until it has been drained dried. Even if you find yourself in the zone at the end of the business day, do not stop working. Cancel meetings if you need to but make sure you keep going. This is the time when you need to remove distractions and just go with the flow.

Back to top

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.

167. Beyond Technology

On this week’s show: Paul shares his inspiration on blog writing and we talk to Mike Kus about our obsession with technology.

Play

Download this show.

Launch our podcast player

News

Good vs Great Design

Cameron Moll is one of the most intelligent and inspirational designers I know. Where some design on an instinctive level finding it hard to describe what makes their designs work, Cameron has carefully deconstructed his work and seems to have a firm grasp of what makes it tick. He understands design. He understands the processes behind design and the rules that make it as much a science as an art.

This deep understanding of design shines through in a free PDF download (Good vs. Great Design) available from his website. The PDF has been produced to accompany his talk at the HOW design conference in Austin Texas and is packed with little insights into good design practice.

The document is only 10 pages long and yet touches on subjects as diverse and grandiose as…

  • The nature of great design
  • The differences between influence and inspiration
  • The need to understand a problem before searching for a solution
  • The power of typography
  • Definitions of visual hierarchy
  • The need for a ‘creative pause’
Obviously, there is only so much Cameron can cover in 10 pages. However, the document is a great starting point for further reading on the subject. Cameron recommends 4 books in particular…
  • How Designers Think (Bryan Lawson) – A book devoted to the idea that design thinking is a skill, and as such it is something that can be improved.
  • The Elements of Typographic Style (Robert Bringhurst) – A complete study in typography, from the broadest concepts to the smallest details.
  • Universal Principles of Design (William Lidwell, Kritina Holden, Jill Butler) – A reference of vocabulary and examples from the disciplines of graphic design and user interface design.
  • The Design of Everyday Things (Donald A. Norman) – An extensive investigation of the interplay between design and living.

If you are looking to deepen your understanding of design, then this is a great place to start.

Eye tracking findings

I have mixed feelings about eye tracking exercises. This is probably partly because I am not particularly knowledgeable on the subject. Although, I am happy to acknowledge that they offer a valuable insight into users behavior and are a useful tool in our usability arsenal, I do have two concerns…

  • Running an eye tracking session is expensive. If this leads to a reduction in the number of rounds of traditional user testing or the number of users tested, then I would have serious concerns.
  • Although eye tracking provides an insight into where a user is looking, it does not reveal anything about intent or comprehension. For example, if a user only briefly glances at a key screen element this doesn’t necessarily mean they are ignoring it. It could mean that it is well designed and the user quickly processed the information it was attempting to convey.

Ultimately, I would be concerned to see too much weight put on their results. That said, it is interesting to see the results of eye tracking and Eyetrack have released some results from one such exercise that focused on the homepages of news site. Useful nuggets included…

  • Dominant headlines most often draw the eye first upon entering the page.
  • Smaller type encourages focused viewing behavior.
  • Navigation placed at the top of a homepage performed best.
  • Shorter paragraphs performed better.
  • We also learned that the bigger the image, the more time people took to look at it.
  • Our research also shows that clean, clear faces in images attract more eye fixations on homepages.

It’s a good read and although most of the points are common sense, it is nice to have evidence to backup those opinions.

Online reputation management

“Online reputation management” – Sounds ghastly doesn’t it? Sounds like the horrible love child of social media and marketing BS. That said, for better or worse, it is becoming increasingly important to manage how we are perceived online.

As I recently said in an interview at FOWD, our websites are no longer the only place where our brand is discussed. As a result we need to engage with users wherever they are talking about us. The question is, how do we do that successfully?

Whether we are responsible for our organizations brand or just want to know what is being said about us personally, there are various techniques and tools that can help.

This week Sitepoint have brought those tools and techniques together in 3 useful and informative posts…

Past disasters like Dell Hell are perfect examples of just how important this area is. It is time we all started to think carefully about how we are perceived.

7 Quick CSS Enhancements for Better User Experience

I haven’t seen much written about CSS over the last year or so. It has been as if everything that can be said about CSS, has been said. However, just recently we are beginning to see a few CSS focused blog posts appearing. One example is 7 Quick CSS Enhancements for Better User Experience by David Walsh.

What I love about this post is the ideas suggested can be applied on top of an existing site design. They are just little ‘touches’ that make the site visually more appealing and easier to use. The 7 suggestions are…

  • Change the text colour of selected links
  • Prevent Firefox scroll bars from jumping
  • Give form fields rounded corner
  • Control where page break occurs when printing
  • Show icons that identify the file type of link destinations
  • Change the cursor when it hovers over a submit button or label so it actually looks clickable
  • Increase the clickable area of a link  using display:block

Each suggestion comes with an explanation of its benefits and the code required to implement.

Admittedly not all browsers will understand these enhancements. However, because they are not crucial to the functionality that really does not matter. Its a nice example of graded browser support.

Back to top

Interview: Mike Kus on our obsession with technology

Paul: Okay, so joining me today is Mike Kus from Carsonified – good to have you on the show.

Mike: Good to be here.

Paul: It’s really nice. So, as the listeners will have gathered by now, we’re doing a whole series of little interviews off the back of ‘The Future of Web Design’ conference, where we can do all our interviews in one go, rather than spreading them out over time.

Marcus: Yay, we like this.

Paul: So Mike has just finished his presentation and there’s some excellent stuff in there, but you were quite kind of, what’s the word… You were quite harsh to the poor web design community and their obsession with details of technological stuff.

Mike: Yeah, maybe yeah.

Paul: You know, all of this “does it really matter whether your code validates”, not that you used that as an example, but I can’t remember what examples you did use, you did have a few didn’t you.

Mike: No, well I mean things like [a lot of debate to un-debate] which I come across and you see lots of times. You know, it’s a question that’s probably never going to get answered. I just come across it all the time still, and it’s like make up your own mind and move on.

Paul: I got the impression that you feel that perhaps as a community we’re a little bit petit, and overly concerned with minutia.

Mike: No, I mean, I love the web community *laughter*, no I do I love it and I love being part of it; it’s great. The funny thing is I started off two years ago doing web stuff, and I really do feel now two years on, that web design… I don’t see many differences to me between web and print now. It’s all the same thing to me, you’re just designing, you know. And I guess because I feel design is so important, I sort of maybe feel a bit left out *laughter* in conversations, because people don’t seem to talk about the design as much. And the reason that talk was called “Forgotten Web Standards”, I mean I know some guy heckled at the end saying about it not really…

Paul: “It’s not really a web standard.”

Mike: No, and I know that. It’s just a cool title I thought – it gets people thinking, and really the part that related to web standards was just because I feel like for a site, good layout and thinking about things from a graphic design point of view contributes to accessibility on a web site.

Paul: Yeah. And also to be honest, I mean what is web standards other than a set of guidelines and criteria. Equally there’s sets of guidelines and criteria about good design; use of colour, you know.

Mike: Well that’s it, yeah. To be honest it was really more just a good title, and I didn’t expect people to start analysing.

Paul: But they will!

Mike: Yeah I know, yeah; I should have known.

Paul: But I think you raised an interesting point, or a good point which is that we can get so hung up in the logistics of how web sites are built that we’re not always giving the attention to the design aspects of it. And even more specific than that, it’s the whole discussion about, you know, we spend a lot of time talking about usability and accessibility, but aesthetics do matter. We almost have this attitude in some ways that aesthetics are just skinning it afterwards.

Mike: Yeah, yeah I know, I agree. I think aesthetics do, well to me they matter. You know my opinion is just my opinion and other people have different opinions, and on a day like today you’re going to get people talking about the code side of things, and I just feel that I know what I know best, and it’s what I can bring to it, it’s what I can bring to the table, and people can take away from it what they like. Someone’s got to do it haven’t they.

Paul: It’s quite interesting, in your mind you don’t make a differentiation between the print stuff you do and the online stuff you do. Surely there are differences Mike.

Mike: Of course there are differences, yeah. But the processes I go through as a designer are the same.

Paul: Right.

Mike: I’ve noticed that much more; I guess of course there are differences. I mean for a start you’ve got to think about things differently in web design because you’ve got to make sure that people understand where you’ve got to go to click things; how you’re going to navigate your way through the site. But once you sort of know that, it’s sort of… Once you’ve built a load of sites and you know that, that’s just something that comes naturally to think about.That’s a different part, that part where you just get used to doing it, then ,he essence of the process is the same. Designing something for a web site, I find there are the same pitfalls and hurdles designing for print as for web. And the funny thing is, and I really feel now as well, that the coding side… I’m not the best coder in the world, and probably not the worst, but I’ve learnt loads in this past year, and I’m writing much cleaner code now than I was a year ago. I enjoy that too, and I know it’s important.

Paul: Yeah. But like you say there are lots of people discussing that, and not as many discussing the design side of things.

Mike: Yeah, and I totally read up on stuff about code; I know it’s important. I guess for me, sometimes I’d want to go in line and get involved in discussions about design, and I know you get Photoshop tips and tutorials don’t you, but that’s not really design.

Paul: Yeah. But a lot of that’s about using the tools of design rather than the principles of design.

Mike: Exactly, it’s all tools yeah. I’m interested in the principles and the ideas and imagination part, you know.

Paul: You talked in your presentation about design aiding the experience, you know; experience based design. I was just interested to hear you talk a little more around that, about how you feel that design can… In what ways can design affect the experience that a user has and what do you mean by the ‘the experience of a user’?

Mike: Well I guess I mean when I go to a web site, and for a start, at least if we’re just talking from an aesthetic point of view, if I return to, and again this is something that appeals to me, if I go to a web site and it gob smacks because it looks so beautiful, that in one foul swoop is my experience of it, you know? But I think there are other things more technical, and when I say technical I don’t mean in a code way, but in a technical graphic design way, you can enhance people’s experience just by… I like the idea of merging more, like you said, things I learnt at college about graphic design and where to make people look in a page, and how to highlight. Combining the technical bits of graphic design, what to highlight and what to push back, how to take people’s eyes in to the bits you want them to read, and then the slightly less important stuff, pushed back a bit, and combining that with an aesthetic. So if you’ve got a great aesthetic and you’ve really thought about where people are looking on your page, and how they’re going to follow through you’re site, to me those things combined is what I mean by designing for experience; a good experience. Because you could obviously design for a bad experience!

Paul: Well obviously, yeah, that’s easier! Another thing that interests me about your work in particular, and really people need to go and look at examples of stuff that you’ve done to grasp this, but you have a very distinct and obvious style; I think you do anyway. So I can look at the stuff you’ve done for Carsonified, and then even the stuff you’ve done here for Microsoft and there’s obviously a consistent theme to that. Do you think that having a very strong style creates problems sometimes when you’re trying to reach different audiences, and you’ve got to battle with your own style, do you find that a problem?

Mike: Well, this is something I find really interesting because growing up as a graphic designer and stuff, I was always someone who basically… For a start if you’re working for clients and you’re an agency, and you’re getting different jobs, you’ve obviously got to be able to create something completely different one day to the next, potentially. And the funny thing is I actually carried that through into my personal work, and I was like “I can’t do something like this because I’ve done something that looks a bit like that before.” But then you know how you can get famous illustrators who basically churn out the same stuff all the time and they get seriously famous, and one company gets them to do something, and another company…

Paul: They come to that person because of that style.

Mike: Exactly, and I think the only reason my stuff you’re seeing… if you looked at the Orchestrate site, that’s me turning my hand to something through a brief.

Paul: Yeah that’s true actually, yeah, because that has got a very different style.

Mike: I’m just answering the brief there, you know, so it is something I can do.

Paul: Sorry, I didn’t mean to imply you couldn’t, it’s a constant discussion isn’t it.

Mike: I don’t think you implied that *laughter* But it’s interesting, and the only reason I do bring my style into the projects you see that overlap each other is because I’ve had the freedom to do so.

Paul: Yeah, and I guess to some degree, the style that I’m exposed to is the style that’s aimed at people like me.

Mike: Yeah.

Paul: So the fact that you did the Microsoft stand here at ‘The Future of Web Design’, well actually it’s good that it’s got the same style as the other stuff that’s going on because it’s a style aimed at web designers and people like me.

Mike: Yeah, and another thing about doing stuff that’s similar, is you do get to get known for a certain thing, which in some ways I think “is that good or bad?” I don’t know, but I think I’m keen to make sure people know I can do different stuff. But at the same time I’m happy to be known for a certain style, because I think it’s sort of like an identity you get. And so I’d like to keep a balance there, but I definitely don’t mind being known for something that’s got a feel about it.

Paul: Yeah. I mean equally after saying that, which kind of brings me on to the next topic I want to talk about, is that the style that I typically associate you with is quite illustrative, you know, you’ve got this certain way of doing things. And then your set of slides for this week weren’t at all like that, they were very typographic, and you did talk a little bit about typography. We interviewed Mark Bolton on the subject of typography as well. I’m interested in your take on typography because you seem to use letter forms almost as design tools rather than necessarily as standard typography if that makes sense.

Mike: Yeah, well that’s interesting because when I did those slides, the reason they look like that is because I basically took a theme and I got interested with that, what’s his name… I can’t remember, a Swiss graphic designer, very famous I can’t remember his name now, it’s escaped from me, but it’s sort of Swiss modern graphic design, and I was looking at Swiss modern graphic design and some Russian constructivism stuff on Flickr, you know. And because when I was at college, that sort of graphic design, I was brought up on that; it was the first thing I was interested in, and because it was a graphic design themed talk, I used that as the style. And it just so happened that throughout it, the experiment with type and shapes and stuff was something that just happened in making those slides, and I suddenly realised I was getting something out of using type in a graphical way, it’s not just about the words, I mean a slide I like – my own stuff I love! *laughter* – that one that says (and I loved doing that slide and I think it looked great) was the one that said “buck trends and break conventions”, and conventions was all mashed up in different ways. There’s something beautiful about type though isn’t there, like huge letters, and I wish I could have seen those slides, because that screen was so big.

Paul: It looked spectacular, yeah.

Mike: There was a huge, massive letter N, you know. I guess now it excites me, type; I think it can be the basis for great design, not just in a traditional typography way, but actually great graphic design. I guess I think the whole type debate as in “where are we going to get all the fonts from”, or “what’s going to be the standard way of using them” – for some reason I don’t feel restricted by the web font thing.

Paul: No, it’s interesting. Mark was saying exactly the same thing as well.

Mike: It’s not something that bothers me, and I’m quite happy.

Paul: I mean a lot of the ways, certainly the ways you used them in the slides, we’re talking about using type as a graphic element in those cases, rather than necessarily to convey large amounts of copy; it’s a subtlety different thing going on there.

Mike: Yeah, yeah.

Paul: I was also quite interested when you talked in your presentation about a logo design that you did, and about how you were being stopped at every turn by the client effectively because they were saying “no, no, we don’t want to be associated with that etc.” So you then added in a strap line into that which you then built the logo around the strap line rather than the brand itself. Now, that was quite interesting because that gets into the realms of relationship between copy and design, and how the two things work together. And in that case, you came up with the strap line did you?

Mike: Yeah, I’m quite into… I mean, I don’t want to say it myself, but Ryan for example seems to think I’m quite good at copy – which is nice of him to say. It’s a way I work quite a lot, I’ve done loads and loads of logo / branding stuff in the past, and I did something, for example, for the Body Shop once. Basically I could do anything, and it was about raising money for a school in Kosovo to get it built, and they just wanted a poster. I just thought of a strap line anyway, because I could do anything I wanted. It was “building a future”, and that was all it was, and it had all these huge letters. Well it had “building a future” and the letters were all piled up and leaning against each other. I guess often the first thing I think of is copy whenever I’m designing something, especially if I’ve got a new site to design, I’m like well what are the words, what’s going on, what’s it about, is there a strap line, do you need one – you know – what’s written in the first paragraphs in the home page, is there something in there I can use to spark the idea for the design. I think copy in that respect has got a massive relationship to design. It’s rubbish trying to work with Latin text.

Paul: Yeah I know, lipsum, yeah.

Mike: It’s alright for that filling in a paragraph or something, but it’s nice to have that proper copy to hook your design on to it; it can be really helpful.

Paul: The thing that you intrigued me with is that you were going through things like layout, colour, typography, then you hit imagery, and you said there’s a whole presentation there. I want to know what the presentation is, I want to know what is it that you know, obviously there’s a lot of depth there that you couldn’t cover, and I’m just interested in that.

Mike: I think what it was, you’ve talked about my illustrative stuff already, so say you use that for the sake of argument right now because you could apply this to photography as well, I guess to me a site doesn’t have to be like you put it together; I don’t know, I’m going to put a picture here or an illustration there… It can evolve round an illustration from the very beginning. I know it’s a pretty one off site, but the Twiggy site for example, which is just a bit of fun, really quick, but that was just literally me, do what the hell I want, just have fun, and it wasn’t the most practical site design maybe, but you know that just literally was an image that built up and changed, and it was the basis for that site design. It wasn’t just in the site it was the site, and it had the huge letters in the background. I only had a short slot, and if I had more time I would have gone into why I felt it can be the basis for your site, not just something you add to it. Your site can grow from your photographs and illustrations rather than putting them into your site.

Paul: That’s a nice way of thinking about it, yeah. Because I do tend to start with the grid structure and the layout, and all that kind of thing, and then slot imagery in which I can see what you’re saying, you can miss a trick there if you’re not careful.

Mike: Yeah it’s funny I’m changing the way I work lately, and I was talking to Keir about this. I’m starting to think about stuff like you remember when Andy Clarke said he works from the inside out, and I’m starting to do that design wise.

Paul: Right, okay. You mean start with the detail or something?

Mike: Well start with something on the middle of the page. I just open a Photoshop document to start, and I know at one point in the page I’ll have like this… For example, I’m working on something at the moment, it’s got the planet Earth, and all I’ve got on the page is the Earth, I’ve got some bits coming off of it, and then I’m going to add this descriptive paragraph, and I haven’t got anything else on the page at this point, I’m just building it out.

Paul: Wow, that’s quite interesting.

Mike: Rather than thinking “ohhh”, and worrying about things like navigation afterwards, because it’s so easy to just go “no, nav-i-gat-ion”, and then I think no wait a minute what have I done, it’s literally just this autopilot.

Paul: Yeah, and to be honest that’s almost why, in the end, I moved on from design in my career, because I felt I was beginning to do exactly that, go on autopilot. So there is this need to find ways to refresh the way you’re working and stuff like that.

Mike: The funny thing is, it’s natural progression as well. It’s not a choice I’ve made, I just found myself doing this.

Paul: That’s good, that’s really good. You talk a lot about “I had a lot of freedom on this project; I could do what I wanted.” You said that several times in this interview. Do you like that, or do you like having constraints? Because a lot of people that are listening to this are going, “well it’s all well and good for him because he’s working on internal projects and he doesn’t have clients”, and that kind of thing, although you are doing client work now. So there we go, there’s a nice comparison between the client work you’re doing and the internal stuff. Where does your heart lie?

Mike: Yeah, I don’t know actually. Sometimes I hate having no restrictions. Sometimes, no restrictions is the worst thing in the whole world, I hate it. Sometimes it can be terrible, sometimes it’s great. Because if you’ve got no restrictions at all sometimes it’s so hard; that Microsoft thing, I was like “what the hell am I going to do, I haven’t got a clue”. For a start, I’ve never designed a stand before, let alone just an idea. I spent three days getting to that, just getting to the beginning of that idea. I literally produced nothing for three days. The fourth day I was like, “I think I’ve got something”, and that was hard because it had no restrictions because the whole point they came to us was because they wanted to do something different. So the pressure was on to think of something really different, and it’s hard when you can start anywhere. Sometimes it’s really nice to have restrictions, like that Orchestrate site was nice; I got back after Christmas, and John Hicks has put together roughly what had to look like.

Paul: Right. You had to carry on with his style.

Mike: Yeah sort of. I mean it did progress from that, but it had a logo and a colour scheme and a nice, tidy, neat… you know I just had to follow it through and it was nice, I enjoyed doing it. It was a nice break from “you can do anything”, which is actually harder I think.

Paul: Right, that’s interesting.

Mike: Much harder actually. I used to do music quite a lot, and in a way what was always helpful was restricting our instruments completely, and not having much to work with. Because it sort of sets you on a path at least, where as when you’re starting out and you can go any which way you want…

Paul: Yeah, it’s too open.

Marcus: It’s the starting part that’s the hard bit; it’s that initial creative spark. If somebody said “this is my idea, I want you to build me something,” then it’s like great I can do that. But, what’s better about when you’ve got, because I do a quite a lot of music as well (or did), it’s when you get something going and it’s good, that’s more satisfying than working on someone else’s work, but if it’s one of those days when it’s just not coming then, you know…

Paul: Which brings us on to what I wanted to wrap up with, which was you mentioned this slide about bucking trends and breaking trends and that kind of thing, and you advised against CSS galleries, you advised against Smashing Magazine’s trends for the last year, which people turn to for inspiration because they struggle to know where to begin. So if you’re advising against those things, which by the way I think is an excellent piece of advice, we asked Jim Coodle this as well, where does your inspiration come from? Where do you turn to if you don’t turn to that kind of thing?

Mike: I guess I do advise that, but I don’t like to sound like I’m telling people what to do *laughter*

Paul: Well if you stand on a stage…

Mike: I guess, yeah. But the funny thing is, I’ll be in a book shop… A year ago, for example, I was in a book shop and I picked up Jamie Oliver’s book, it was made of a nice sacky cover, don’t know if you’ve seen it, it’s got white and blue in it, it was beautiful. The graphic design and the layout was lovely, and I was like “oh I’ll buy that”, not for cooking, just because it looked nice, and I was like “I’m going to design a web site like that”. And someone on Twitter just said something about how they’d just discussed Mike Kus’s talk over lunch and how much of an idiot I am, and something about imagine your web site in print, which is what I said at the end.

Paul: Which I thought was brilliant, but he had problems with that did he?

Mike: Yeah, well he said it’s absolutely useless, different mediums, why would you do that.

Paul: It’s to take it out of context, and give yourself a chance to look at it from a completely different angle. It would be the same as projecting it huge on a wall or sketching it out in chalk, or whatever.

Mike: Well that’s it, exactly. It’s like what you said a minute ago about it’s so easy to go into autopilot with these things, and I think sometimes you need something to jolt your brain into looking at it a little bit differently. Because to me there are a lot of things on the web… Just imagine if you get a web site like your average one – it’s got the gradients all over it and everything, you put it on a magazine page; it would look weird. You have to ask yourself, why are you doing that. I know it’s a different medium, and I think we can all be clever enough to realise that, and there’s obviously bits I’m not going to say it’s got to be like a magazine, but I think it’s worth asking yourself those questions.

Paul: In the same way as in the talk, which I thought was really nice, was you had these amazing set of slides that had a very distinct look, and that was being projected massive on a wall, and yet you transposed that into a poster you gave away to people. So you were crossing those mediums and using inspiration from both which I thought was excellent; it was good. It went well didn’t it?

Mike: It was good, yeah I was pleased.

Paul: Excellent. Well thank you so much for your time Mike, that was really useful, and I think it will be very helpful for people. Especially freelancers that are stuck by themselves, and stuck in their own routine of working. It’s nice to hear how other people work, so thanks.

Mike: Cool. Cheers, thanks a lot.

Thanks goes to Gareth James for transcribing this interview.

Back to top

Listeners feedback:

APIs, source control and Ryan Carson

On show 164 Ryan Carson shared some more advice on running and building web applications as part of his ongoing series for Boagworld. Although Ryan’s advice is excellent, Boagworld listener Glen Bennett wanted to offer an alternative perspective over a couple of Ryan’s suggestions.

Hi Paul and Marcus, this is Glen Bennett from small business hosting. I was excited when you had Ryan Carson on the show talking about web application building, finally someone on the show who knew what they were talking about, however he cave out some information that was a bit misleading and I wanted to clear it up for your listeners, first of all he talked about spreedly.com and indicated that their fee is an alternative to the standard processing fees, in actuality it’s a fee that’s in addition to all the standard processing fees, there service sits in front of the processing gateway and therefore it’s an additional fee and there fee is not insignificant, in addition to that you would have to build an interface to their product. So there is some building cost at your end. I agree that building a processing engine is pretty substantial and something that you want to get help with if you possibly can there are packages out there anywhere from a few hundred dollars to a few thousand dollars that are actually pre-written source code that you put into you payment package, you have to do that pretty early in the process so that you can make sure that your user registration matches up with the processing system.

The second thing he talked about which is a source code repository, which is GIT hub, fantastic product and I recommend it highly, I think all developers should go and look at it, however the free service is primarily for a public repository so I don’t think he would have wanted to put DropSend source code into a public repository so their free service is not something that you’d probably want to use for your web application unless it’s an open source web application and there is a small fee for GIT hub but a lot of hosting packages come with SVN included for free so you might want to look into that, you can use GIT locally on your local system and then SVN them up to your free repository on the internet so you have a remote repository that’s free during development time. So there’s a couple of tips, a couple of corrections for web developers, I hope that helps and I want to thank Ryan Carson for the additional information that he had in his tips, I found it all very useful. Thank you very much.

Blog writing inspiration

Recently we received an email from Jon. He wrote:

I was wondering how do you find inspiration for your articles? How do you expand upon your initial idea and is there a process you go through when writing an article? How long do you spend writing an article? And lastly what do you think is the hallmark of a good article?

These are all good questions. The majority of blogs  have long since been abandoned by their authors. The owner either struggle to think of new content or finds running a blog more time consuming than anticipated.

I don’t claim to have all the answer when it comes to successful blogging. However I can share with you a few principles I work by…

  • Limit your time – I work best when I have a deadline. If I have too much time I over think things and pick at the details. This makes blogging  high maintenance and hard to keep up. Unless the content of a blog post is going to be used elsewhere (see Recycle below) I will never spend more than a couple of hours writing something. To me a blog is about sharing ideas, not writing a perfect piece of copy. I know I am not the best writer in the world and so make up for this by sharing ideas on a regular basis. In order to do that, I limit the time available for each post.
  • Keep an ideas list - Ideas for blog posts occur to me all the time and I have trained myself to constantly ask ‘would what I am doing make a good blog post?’ However, you can guarantee my mind will go blank the moment I sit down to write one. That is why it is important for me to keep a list of ideas. Whether you add them to a notebook or keep a list in WordPress, you need to make it as quick and easy to add ideas as possible. Also, when I add an idea, I try to flesh it out a little. Instead of just adding a title I also include a rough synopsis of what I want to cover.
  • Create an outline – Before I begin writing, I always create an outline of what I want to cover. I usually do this using Omni Outliner where I jot down random thoughts on the subject. I then sort those ideas into a logical structure. Once the structure is in place, writing the final post is much easier. This is because I know where I am going. It also ensures I lead the reader through a story, rather than throwing random thoughts at them.
  • Write first, edit later – Its easy to get caught up in spelling, grammar and structure to the detriment of flow. I tend to write posts in one go. I don’t re-read what I have written until the whole thing is finished. Stopping to check what I have written breaks my focus and leads to disjointed articles that take longer to write. Better to write the whole thing and then re-read the post afterward editing it then.
  • Write for your audience – Before I begin a blog post I always ask myself whether this will be of interest to my audience. Sometimes I indulge myself with personal posts, but most of the time I work hard to stay on topic and only write content that is focused on meeting my readers needs. This applies not just to the subjects chosen. It also to the style of writing and terminology used. For example, I try to avoid too much technical jargon because it may not be accessible to website owners. However, I don’t always succeed!
  • Write for scanability – There is a vocal minority in the blogging community who frown upon image heavy, list based, blog posts. However, I think there is a lot to be learnt from them. People who subscribe to my blog read a lot of other blogs too. With so much information to keep abreast of they rarely have time to read everything I write. I therefore write in a way that lets them get the ‘gist’ of a post without reading every word. Lists are one way to do this, as is the use of imagery. However, I also use headings and front loading too. Wherever possible make content easy to skim read. If you do not, users are likely to skip it entirely.
  • Ask for suggestions - I have found the best way to come up with ideas for my blog is to ask my readers. I actively encourage people to email me with questions, reviews or comments and these inspire ideas for posts. In fact the very question I am answering here would make a great blog post. Hmmm… perhaps I should stop before I waste the opportunity :-)
  • Ask your readers opinion – As well as asking for suggestions also ask for feedback. A good blog post does not have to be you sharing your words of wisdom with the world. It can also be asking a question and encouraging feedback. Some of the best content on blogs  can be found in the comments, rather than the actual posts. Try to write posts that encourage a dialogue rather than a monologue. Also if you do manage to spark a passionate discussion, followup with a second post that summarizes the views expressed.
  • Recycle – Finally, I am a great believer in recycling ideas. For example the answer to this question will appear on my blog, on the podcast and also will make a great Audioboo tip. Many of my best blog posts have either come out of a presentation I gave or a chapter from my book.

This is not a definitive set of guidelines and every blogger will work differently. However, this approach has helped me to continue blogging for over 4 years. I will leave it to you to judge whether the quality has remained high ;-)

Finally, if you are a regular blogger I would love to hear your thoughts on keeping your blog fresh. How do you come up with ideas and ensure the quality of your posts? Let us know by adding a comment below.

Back to top

165. Creativity

On this week’s show: Jim Coudal shares his thoughts on monetizing creativity, Marcus talks about questioning clients and Paul gets excited about eye candy.

Play

Download this show.

Launch our podcast player

News

The power of asking questions

I am spending a lot of time recently advising clients how to ‘engage’ with their users. Engagement seems to be the buzzword of the moment, and to some degree rightly so. Engaging with your users is important for a number of reasons including (but not limited to)…

  • It increases loyalty and repeat business
  • It encourages users to promote you and your services
  • It informs your products and services

Although a lot of people understand the importance of engagement, few know how to do it effectively. As is so often the case website owners turn to technology as the solution. They launch forums, add comments and sign-up for twitter. However, when it comes to engaging with human’s, what you say is considerably more important than the medium through which its said.

Take for example your blog. Just because you have comments enabled, does not mean users will post. As is pointed out on the Pro Blogger website, if you want to encourage comments you need to ask questions.

Pro Blogger provides 10 reasons why questions are good, before going on to share 12 tips for asking them. Some of the suggestions are extremely useful, such as using the answers you receive as the basis for another article. Its a good post and definitely worth reading.

The do’s and don’ts of modern web design

I don’t normally highlight new web design sites, but this one caught my eye. Called “the do’s and don’ts of modern web design” the site is essentially a directory of web design posts. What makes the site different is that each article is boiled down to a single  concise tip that is either assigned to the “do” or “don’t” column.

The Do's and Don'ts of Modern Web Design Site

Posts are also tagged according to their level of complexity (beginner, intermediate or advanced) and users can  view posts by popularity or date.

The user also has the option to read the entire post or simply rate the advice being given.

As a blogger I do have some concerns about this site. The idea of somebody boiling my posts down to a single point is disturbing to say the least! However, as a user there is something very convenient about getting short condensed snippets of information. We are all busy people and too many bloggers take forever to come to the point (myself included).

Uses for hover

The Web Designers Wall has released a post this week entitled “Maximize the Use of Hover“. If you are a designer it is definitely worth reading.

I am a huge fan of using hover in my design work. This is primarily because it makes additional information available without cluttering up the user interface. It keeps things simple and prevents the user becoming overwhelmed.

The post breaks this argument down further and identifies 4 reasons to make greater uses of hover. Their reasons include…

  • Using hover to beautify layout
  • Using hover to minimize clutter
  • Using hover to display additional information

Each point is supported by some great examples of hover in action. The post also ends with some links to useful ‘hover’ tutorials to get you started. One is a CSS only tutorial while the other uses jQuery. Personally, I use jQuery a lot for achieving hover effects simply because it is visually more attractive and also easier to build.

In defense of eye candy

I want to conclude this week’s news with one of the best articles I have read in a long time. ‘In Defense of Eye Candy‘ on A List Apart is a well constructed argument for the importance of aesthetics.

The author (Stephen Anderson) explains how aesthetics affect…

  • our understanding of a user interface,
  • the level of trust we have in a brand
  • our ability to complete a task.

It is a beautifully considered case that delves into the world of cognitive perception and provides some excellent examples of how aesthetics alter our attitudes. One particular favorite is the example of the Sony AIBO and their decision to make the robot look like a puppy. Stephen writes…

Here, you have a robotic device that isn’t perfect. It won’t understand most of what you say. It may or may not follow the commands it does understand. And it doesn’t really do all that much.

If this robot was an adult butler that responded to only half our requests and frequently did something other than what we asked, we’d consider it broken and useless. But as a puppy, we find its behaviors “cute.” Puppies aren’t known for following directions. And when the robot puppy does succeed, we are delighted. “Look, it rolled over!” What a great way to enter the robotics market.

However, ultimately the entire article is summed up in the following quote…

According to a 2002 study, the “appeal of the overall visual design of a site, including layout, typography, font size, and color schemes,” is the number one factor we use to evaluate a website’s credibility.

Back to top

Interview: Jim Coudal on monetizing creativity

Paul: So, joining me today is Jim Coudal. It’s good to have you on the show.

Jim: Thank you.

Paul: Thank you for coming along. We’re actually sitting here at the Future of Web Design. Jim has just given his keynote presentation, and I’ve also got Marcus here, hello Marcus.

Marcus: Hello Paul. Hello Jim. (Laughs) I’m not normally in on the interviews, that’s why it feels a bit weird.

Paul: Yeah, you’re not used to this bit are you really?

Marcus: No, I’m not used to being at the Future of Web Design doing it either. He does the interviews over the phone usually.

Paul: Yeah, this is weird – face to face. Um, so, brilliant brilliant presentation as always, um, and I wanted to talk to you about some of the different, um, issues relating to creativity, because you seem to talk a lot on that, and obviously at, um, Coudal Partners, isn’t it, Coudal Partners, yeah, you have to deal with this kind of issue all the time and working with creative people and how to encourage creativity and you do some very interesting stuff.

Jim: I mean, first to say, I think part of the structure of Coudal Partners is in response to a, er, earlier career frustrated with creative things, so really Coudal Partners, er, everybody there is artist or writer. So, you know, there is no, you know, we probably without business plan for 13 years, you know, there is no superstructure of account planning or any of that.

Paul: OK.

Jim: That’s possible, I think, because we’re all responsible people, but it’s also possible because we’ve made a concerted effort over the last 5 years to reduce the amount of revenue that comes from clients.

Paul: OK.

Jim: So, erm, we. Our biggest clients now are companies we own.

Paul: Right.

Jim: So, which is a blessing because we can do whatever the hell we want, and a curse because things don’t work out. (laughs). You konw, you’ve still got to make payroll.

Paul: Yeah, totally.

Jim: So, yeah, I think that the, you know, we’re all adults and we’re all responsible people and we all have a variety of interests and I’m reminded of a story. Do you know Cabel Sasser, from Panic, Panic Software in Portland – Transmit, and Coda and all that?

Paul: Oh, yes.

Jim: Well, he posted, at that time, Panic was just Steven and Cabel and he posted a video on his site, because everybody said: “what’s a typical day like at Panic?”

Paul: Yeah

Jim: So, he posted a video on his site, and I think it was like 20 minutes, of 2 guys with headphones on, staring into computer (all laugh), and like about 10 minutes into it, one of them gets up and goes to the washroom and then comes back and puts his headphones back on and stares at his computer.

Paul: Right.

Jim: And so, I watched the whole video and I wrote him right back and I said: “Cabel, it’s amazing, it’s exactly like that here!”(all laugh) Everybody has this idea that, you know, the rock and roll is blaring and, you know, someone’s having a bong in the back, or whatever, but it’s very much a individual efforts in a collective environment.

Paul: Ah, see that’s very interesting, because you’ve got a company full of creative people that are obviously coming up with lots of creative ideas and the question is: “how do you monetize that?”You know, you’re trying to move away from client work and we all understand how client work is a nice neat model and a way of making money, but you know, you guys are coming up with ideas all the time and they’re very broad-ranging. So, how do you decide which ones, you know, you can make money out of?

Jim: I mean, the purist answer to that is, the ones you’re most excited about. Erm, and try them all and get ready to bail on the failures, you know. The one question I always get whenever I speak, the first question I really get is: “Jim, what is your most spectacular failure?”people always say, and my answer is always the same is that we’re working on it right now! (all laugh) Its going to be a beauty! Erm, you know, we… Ideas tend to take the path of least resistance and frequently that path is being talked to death. It’s very easy to have a good idea and then sleep on it and then the next day come up with a thousand reasons why you can’t do it. Er, in this day and age, where we have, at Coudal, we have the superstructure, we could pretty much sell anything in a couple of hours. We have built our own e-commerce background for, we own a brand called Jewelboxing, which sells custom DVD and CD packaging systems, we own Fieldnotes, which is a, er, series of memo book, cool memo book, designer’s sort of memo book, and various other things and so we can put an idea into play very quickly, and, erm, and just a little less quickly find out if it’s going to work. The key to the whole thing, though, is that, erm, when we started this idea of creating products and services, erm, as opposed to, erm, doing work for hire, we sort of looked at the things we had, what were our assets and what were, you know, what were the things that we had, and what we had was this site coudal.com which generates a lot of traffic and the site is strange. It is not, it is sort of a daily magazine of web design intellectuals, I guess, for like a better term. And, erm, many people don’t get it at all, but a lot of people do so we figured that those people must be like us, in some way. I mean, it’s, it’s impossible to think that they are people who are unlike us, who are coming to the site and a) understanding it, and b) coming back tomorrow. So, these people must be like us. So, if we make that leap of faith and we develop products that we want, there’s probably a lot of people like us out there and we don’t actually need 5% of the global notebook market to make a lot of money, you know, so, erm, the same goes with our ad network, The DECK ad network, which is tremendously successful because it targets web-designing creative professionals like us, so the idea is, if you’re true… The question is how do you decide which ones you do, and my answer is it’s the ones you’re most excited about. I think that the secret underneath that is, if you make something you’re excited about, somebody else is going to be… Somebody like you will be excited about it as well. So, erm, but not everything has to make money; a few things have to make money, we have mortgages, we have tuitions to pay, for our kids, you know and we’re not getting rich, but, you know, we’re pretty satisfied creatively and we have the freedom to do pretty much whatever we want, so…

Paul: I mean, I think a lot of people that will be listening to this show that may be a creative, um, are kind of creative, um, within an organisation that isn’t creative and you talked about the frustrations you experienced, you know, they’ve got to, kind of, justify to management and all the rest of it, that they need time to play and to experiment and to try new things. I mean, how, have you got any advice for those people about how they tackle that, you know, how they, they kind of demonstrate the need to be creative, if that makes sense.

Jim: This is, I’m going to come off like a smart-arse, but I think that the real advice to somebody who’s truly creative and in that situation is to quit.

Paul: Right, OK.

Jim: I mean, you’re never going to succeed in that environment; you may succeed, but you’re not going to be happy or fulfilled. But outside of that I realise that there is a wide range of things and I… But, I don’t have any advice, because I tried everything I could, within a corporate structure as a creative director of a large ad agency, erm, and it got to the point where we were doing work I wasn’t proud of for people I didn’t like, and, you know, no amount of money can make that feel better; like, you work for a month on a project and, the revisions and the bullshit just steals your soul and by the time you’re done with it, you don’t even want to show it to anybody, like, there’s no amount of money that can make that feel better as a creative. So, so, you know, I think, you know, we all have to make our bargains, but I’ll say one other thing, Paul, is that I know a lot, through this whole, we’ve talked about this moving from work for hire into a more, what Zeldman calls sort of a design entrepreneur, sort of, er, piece. We’ve talked about it a lot in public so we’ve got a lot of feedback and I’ve spoken about it on a number of occasions, so I’ve met a lot of people who are sort of in the same place and there are a lot of people who are in the same place.

Marcus: We are.

Jim: Who are creative firms, what you’re doing for other people. The guys at Threadless are good friends of mine, you know, like all these people who have taken the skills that they used to use on behalf of clients and put them to work, their craft, on behalf of themselves, and every one of them, without exception – I will include you in this and I’ve never even asked you this question. Every single one of them says exactly the same thing about the process and they almost always say it in exactly the same words.

Paul: OK.

Jim: And what they say is: “I should have done this sooner”.

Paul: Yeah, totally.

Jim: So, my unanimity and this response continues with Paul, who agrees with the whole thing, but sometimes you know that first leap is kind of difficult. I would say that if you don’t have kids and you don’t have a mortgage, you better get on it.

Paul: Yeah.

Jim: After you have kids and a mortgage you got to make other decisions but, you know, we did it when we had kids and mortgages.

Marcus: So have we. It was your chat with Brendan Dawes at the 2007 Southby.

Jim: The ‘Short Attention Span Theatre’?

Marcus: Yeah, but you were talking about The Deck and various products and it was kind of, I was sat watching it, not with you, you were in another talk…

Jim: You were in another talk? What the hell!

Paul: I know, it’s disgraceful, I’m ashamed, I’m sorry.

Jim: That was a funny day because that was like Twitter was just new and so like people were twittering that, because Brendan Dawes is such a great speaker, he’s so funny and so they were twittering that: “oh, you got to come and see Coudal and Dawes”, and so we encouraged that so we’re like, so everybody tell people in the other rooms to come over here and we’ll give them a book and so people started doing it and then people started coming in and I’m like: “oh, my God, I feel so bad for the people next door”, you know, so it was really an interesting kind of a…

Paul: Social experiment.

Jim: It’s like live social reviews. Anyway, go ahead.

Marcus: It was great, I mean, basically what it did, Chris and I – another partner and I in our firm – we basically walked out of that speech and said: “we’re doing this wrong”. We were just thankful that clients wanted to work with us at that time and more and more clients were working, but it was kind of like we got this huge team of very creative, very talented people, let’s do something ourselves and ever since that day, I mean, we haven’t been as successful as, as successful in doing that as you have, but I think you put the nail, you hit the nail on the head…

Jim: Well, it takes time, I mean, we didn’t just flip the switch, I mean we went from 75% client work, 25% our own work and then eventually we got to 50%; I remember, I remember that month when I was doing month-end numbers and I saw that on gross revenue we had made more money from our own than we had made from client teams for the first time, I remember that being a significant moment for us as well.

Marcus: Time for a drink.

Jim: So, you know, um, that’s interesting, you know Brendan’s doing the same thing.

Marcus: Yeah, I know, I keep up with him on Twitter, but it was the fact that you said you can do things quickly and we’re always, we get these great ideas and then it’s like that’s going to take 3 months, or that’s going to take 6 months.

Paul: We faff around a lot.

Marcus: And client work gets in the way.

Jim: We share space in Chicago, in a big loft space, with 37 Signals.

Paul: Oh, I didn’t know that.

Jim: And they are, they’re rapid to the, to a fault, where their ideas, if they have a good idea, let’s whack it together and put it out there and then, you know, let’s launch the ship and then we can turn it once it’s moving, but we can’t turn it if it’s still up here in dry-dock, you know, which is an interesting thought, so you know, and it’s… The thing is when we’ve worked for clients, the problem with exclusively client work is that you have to feed the beast, so if you get good at it, you’re screwed (all laugh), because you get more work.

Paul: That’s exactly what we’re finding.

Jim: And then you’ve got a bigger payroll and overheads, so now you’ve got to take more work and eventually you’ve got to take a project that you might not take that…

Marcus: We’re screwed, Paul.

Paul: Yeah, we are, we need to do something.

Marcus: We keep hiring more people.

Paul: This is turning into a therapy session for us.

Marcus: I told you that.

Jim: How do you feel about that, Paul?
(all laugh)

Jim: You know, generally the thing is this, the opposite it true, because the best thing that ever happened to us is that our client business went to hell, through no fault of our own.

Paul: Right.

Jim: Right after September 11th, you know, a couple of clients cut budgets and all of a sudden, nothing will get your attention faster than not having the money in the bank on Wednesday to make payroll on Friday, so…

Paul: Which is often the way with this whole, you know, leave if you’re somewhere where you’re not happy and set up by yourself. Often you need that push.

Marcus: It happened with us, yeah.

Paul: I mean we worked for a dot-com and that went under, so it pushed us into doing something ourselves. I mean that’s interesting, that… When you, when you left the big agency, and you set up by yourself, was it just you or did you set up with other people?

Jim: One other fellow.

Paul: Right.

Jim: And one accountant.

Paul: Because that’s a lot of problem, there are a lot of freelancers out there, that are working in isolation, and that’s quite hard as well, from a creative point of view to, you know.

Jim: Very difficult.

Paul: I mean, where, where do you look for inspiration? You talked in your talk about looking to the past, which I thought was very interesting, but what kind of, where do your ideas come from?

Marcus: That’s a fair question.

Paul: That’s a really unfair question, I’m sorry.

Jim: Erm, I think they come from Dublin, no I don’t know. Let me take the two parts one at a time.

Paul: Yeah, I’m sorry it’s a messy question.

Jim: The first thing about working alone, erm, we are not a distributed company, unlike a lot of companies, we actually, we’ve tried some of it and been unsatisfied with the results. We actually all get together, we all get together in the same space and then don’t talk to each other (all laugh).

Paul: But at least you’re together.

Jim: But there is some advantage in adult conversation, there is advantage in: “hey, how about this?”There is: “can you look at this and see what you think?”or “do you have a headline for that?”You know, there’s some advantage in, sort of, serendipitous conversation, there’s advantage in going to the tavern and having some beer and blue-skying, you know.

Marcus: Boardroom B.

Jim: Yeah, conference room B. Er, conference room D, whatever, whichever conference room it is. So I find it difficult; now, I’m particularly good at working alone as an individual.

Paul: Right.

Jim: But as a firm, maybe we’re not so good at it. So, you know, I need help because I’m like Brendan, I’m a great starter but not such a good finisher.

Paul: Yeah, I’m the same.

Jim: So I need people to sort of clean up after me and make sure things get done. I’m OK with it.

Paul: It’s so nice to hear someone else say that. It’s OK that I’m like that, Marcus.

Marcus: Well, I’m kind of not far from it, to be honest, but Chris and the rest of the guys…

Paul: We’ve got a whole company that exists purely to pick up our rubbish.

Jim: And they just roll their eyes, like: “there’s another idea from those guys, like that’s going to happen”. Well, that’s the thing, we have this thing, maybe I talked about it in the, Brendan talked about this thing: ‘The Book’ – we’ve had this thing for a long time which is this repository of un-, unrequited love, of ideas that we never did. Um, and we’re getting so good at it that we know immediately when an idea is for The Book; it doesn’t stop us from blue-skying about it, say OK, in fact sometimes we say: “here’s one for The Book”. We know immediately that, you know, everybody knows immediately. We have this other, we used to have this thing, we haven’t been doing it lately. We have this other thing is that when we’re brainstorming about something, it helps if, um, you, er, talk about potential taglines and headlines, while you’re brainstorming an idea, but you don’t want to get the conversation caught up in the specifics of the headline or tagline that you’re suggesting. So, we used to have this thing where, if you keep your hand over your head when you are talking, it means: “like this, but not this”. (Paul & Marcus laugh) Try that sometime in one of your creative meetings, seriously. “I want this to be, sort of, you know”, Tim is holding his hand on his head, sort of thing. Erm, collectively ideas come from a variety of different interests, I think, and obsessions. I mean, it wouldn’t be too difficult to go through the archives of all the links we’ve posted at Coudal and figure out that we, you know, you could build a Coudal robot pretty easily that is a Stanley Kubrik freak, who is into Swiss design from the mid-part of the century, who is a James Joyce and a, er, Terence Malik fan, you know; it would be pretty easy to see Bob Dylan, you’d be able to see the sort of influences in some places. And, erm, I think to have a lot of different skillsets together, like Steve in our office is a film, primarily, he writes some copy and does a lot of things, but primarily he’s a shooter and an editor and a creative guy and I don’t do either of those things, you know, and, erm, Brian is a print guy, I mean everybody does everything at Coudal but we have like a bunch of different skills and so i guess that’s it, I don’t know.

Paul: Yeah, that’s good.

Jim: I probably didn’t answer anything.

Paul: Well, I think the trouble is with a question is that it’s, you know, to some extent it’s different for every person, you know.

Jim: Different for every day.

Paul: Yeah, that too, yeah. So, you know, that’s understandable.

Marcus: I thought you were going to go off into the into the equation of, I don’t know, maybe you covered that in your talk? The er, what was that…

Jim: The ‘General Theory of Creative Relativity’; we don’t have enough time for that.

Marcus: Let’s move on.

Paul: You could google it if you want to know about that.

Jim: Yes, actually that was the South-by talk for last year, and that, erm, was a pseudo-scientific to sort of come up with an equation to solve all creative problems, erm, and somebody said: “what is the answer?”and then someone from the audience yelled: “42”.

Paul: Well, obviously. It would be, wouldn’t it. Um, let’s just wrap up by talking about layer tennis, because you’re kind of quite well known for layer tennis and, just explain the basic principle for those that maybe haven’t heard about it before.

Jim: Layer tennis started 5/6 years ago as Photoshop tennis and it started in our office where we were, we just swapped a file back and forth continually adding layers and type and images to it and it was sort of a collaborative dance, and, erm, we just had the idea that maybe people like to watch it, so we put it online and invited designers that we know or, even better, designers that we admired but didn’t know, to participate and we had the brilliant, somebody had the idea to do it on Friday afternoons because no work gets done on Friday afternoons anyhow, and so we did it for a couple of years, it was tremendously popular, and then we left it on the back burner and went on to other things and in the meantime we had been working with Adobe on a couple of things and they were looking for an innovative way to promote their CS3, Creative Suite 3, and we said: “well, we have this Photoshop tennis thing, we could sort of restructure this in a way”, one of the big parts of CS3, a big, big step forward for me as a user was, the interoperability of the apps, it was the bringing together the Macromedia applications, as well as original Adobe applications into one place in which you could really move a file back and forth from vector to Photoshop to Flash, whatever. And so we proposed that we re-launch it as layer tennis to, not only that I didn’t want to have someone else’s trademark in my trademark, so we re-launched it as layer tennis and now I think we’re in the tenth week of this second season, we’ve had some tremendously talented designers from all over the world and basically what happens is there are 10 layers, somebody serves by serving up an image or image and type and, or illustration, or Flash animation, whatever it is, and the other designer takes the original source file and revises it in someway, either adds to it or changes and then he sends it back to the original guy and they trade the file back and forth over about 3 hours and each of their volleys gets posted live to the web. In addition, we invite a third person, frequently a blogger, or a writer, or a smart ass, to write play-by-play…

Marcus: That’s the bit I like!

Jim: To write play-by-play commentary. Quite frankly, that’s the hardest job (Paul: Yeah) on any Friday, to write play-by-play commentary; and then everybody watches and twitters about it and votes who they think the winner is and, you know, we’re doing 30-40 thousand people every Friday are tuning in to watch the match live, which is like, if you think of it, that’s a full football stadium, so we’ll have a couple more weeks of the regular season and then we have, we’re going to do some play-offs and hopefully there’ll be layers tennis season 3 next year, so (Paul: excellent) it’s interesting because we’ve tried to get out of the client business, right, and now we’ve got this sponsored web event which is sponsored by AARRGH! Adobe, a client. But, I think the difference is that it’s on our terms and they, it’s through good being in San Francisco, they couldn’t have been greater they’re great supporters of it and they take great ownership in it, so…

Paul: And the other thing about it is that, you know…

Jim: It’s relevant.

Paul: You did it anyway, you know, it was an idea you’d had previously that you then found somebody to help fund it and sponsor it.

Jim: And make it bigger and better, right? And it’s relevant to the product, like, you know, I’m not sure that Budweiser layer tennis would have the same relevance.

Paul: No, of course.

Marcus: Friday afternoon?

Jim: Maybe a little sloppier, but, you know, so, I think, it was just a lucky, you know, I mean, we’re pretty smart about things, but that was, kind of, a lucky break for both of us, I think that Adobe gets a lot of valuable exposure out of it that is not seen as “advertising-y”, you know, layer tennis exists on our site, it’s not on the Adobe site, it is seen as an independent, which it is, very like you said, it existed before the sponsorship and will exist after it and it was seen as an independent thing for the good of creativity on the web that Adobe is a good citizen for sponsoring and, you know, that’s a nice thing, maybe that’s the future, you know, that sort of which is actually…

Paul: Collaborative relationship

Jim: And that’s actually looking to the past as well, because think about the beginnings of television, or at least in the United States, the beginnings of television were a single company which sponsored a single hour drama, they would be the ‘Hallmark Hall of Fame’, where, here we have this lovely drama brought to you by Hallmark and they’re all about emotions and drama’s all about emotions, you know, and then somehow we got to the point now where we have an hour where we have 22 minutes of 30 second commercials, you know what I mean, like, you know, there’s, you know, so…

Marcus: It comes down to the fact that the content’s got to be good and it’s something that people want, and if it is good, then you’re going to get sponsored; it’s like sports, isn’t it? From that point of view.

Jim: It is a sport, I mean, in a way, the layer tennis thing is attractive, I think, because we do compete as designers all the time, like my firm will compete with your firm for a piece of business, but we never compete head-to-head (Paul: No) and never, ever, ever, compete head-to-head in public. So, it’s nerve-wracking, the designers are like: “Oh yeah, I’ll play”and then they get to see the site, “oh my God, 15 minutes”, you know, and the poor writer, like the designer at least volleys and then gets to breathe for 15 minutes while the other guy has the file, whereas the commentator has just got to be funny all the time, you know. I just did, for the first time ever I did commentary myself two weeks ago.

Paul: Ah, that’s why it’s showing up that you’ve got sudden sympathy for it.

Jim: And all the other commentators were writing me, like “ah, now you’ll see, asshole”(Paul & Marcus laugh), but I bailed out, I’m such a terrible typist I did it, I did audio.

Marcus: That’s alright

Jim: Yeah, I just talked about it, you know I got nervous that I wasn’t doing well enough, so I called my friend John Gruber and brought him into the booth, so everybody got mad at me, because I didn’t do it the way I was supposed to.

Paul: You cheated.

Jim: I did, but I have that option.

Paul: Hey, it’s your game.

Jim: Since I’m the commissioner.

Paul: Exactly, yeah.

Jim: The ‘Royal and Ancient Society of Layer Tennis’

Paul: So, what do you think people are getting out of it, you know, as they watch layer tennis? Is it just to waste a Friday afternoon (Jim: Yes) or do you think there’s a… I was going to, I was expecting some profound answer about the value of it.

Jim: No, I mean, I think it’s interesting and I think it’s entertaining and I think people like to see designers they know and with talent compete in a interesting situation, but it’s the almost perfect sport for procrastination.

Paul: Right (laughs)

Jim: Because nothing happens for 15 minutes and then something happens (Paul: Right), so you just leave it open in a tab and you can do your work and then bounce over and see it and, er…

Marcus: Is there not the kind of moment – sorry, Jim to interrupt – of kind of like: “I would never have thought of doing that?” and then you take that away to something you’re working on, so…

Jim: Yeah, we could…

Paul: Yeah, yeah. Let’s pretend, let’s pretend there’s value in it.

Jim: I can see, because you do so much client work, you’re getting good at rationalising things (all laugh).

Marcus: This is why we did this, and this is why it’s going to cost you.

Jim: This is my idea and this is why it’s great – it’s the Python skit about, you know,“I want you to help me sell all of this string that I’ve got left over”, “oh great, string, good for tying everything up, perfect for putting around your backyard”, he goes, the problem is that the string is all cut into 6 inch lengths: “just the right length!”

Paul: Well, that’s great, Jim, thank you very much for that. Where can people find out more about you and about layer tennis and stuff.

Jim: Coudal.com pretty much has links to everything; layertennis.com is where that is and I’ll make a pitch for our products, go to fieldnotesbrand.com and buy some notebooks and add a note that says you heard it on this and we’ll throw something extra in the package.

Paul: Excellent. Good stuff, thank you very much, Jim.

Jim: You’re welcome.

Marcus: Cheers!

Thanks goes to Simon Douglas for transcribing this interview

Back to top

Listeners feedback: Questions, questions, questions

We have this question from Iestyn:

I’ve done a quick search on your site and on Google but can’t seem to find what I’m looking for. I’ve been in the print industry for 9 years now and finally making the jump to web design with a friend of mine. What I’d like to know before getting our first client would be what questions should we ask the client about what his or her requirements are, as the client might take some stuff for granted or wouldn’t have thought of some things? And what questions are we likely to receive off our clients? To be able to have a questionnaire at hand to refer to and to go back to if the client changes his/her mind.

Users

One of the most important areas to consider when first discussing requirements is user focus. Does the client think in this way or are they looking for a site that meets internal expectations for design and content?
Who are the target audiences? ‘Everyone’ is an unacceptable answer. Get the client to prioritise their audiences.

Talk about your expectations of the roles of client and agency. You don’t want them to comment “I don’t like the red” rather you are looking for “I don’t think red will work for our users because…” Stress that it is their responsibility to highlight issues but yours to solve them.

When reviewing information architecture, ensure that content is grouped for users, and not based on internal structures and ensure that labelling is clear and descriptive.
This will underline the importance of the role of the user to the client and hopefully start them thinking in a way that will help you deliver a more usable site with fewer hiccups during the build.

Goals

It’s important to get to the bottom of why a client has a website and what they want it to do for them. What are their business goals and why?

For example, are they looking to increase sales via the site? The goal may simply be ‘we want more sales leads through the website’. But, more leads do not necessarily mean more sales. The quality of the lead is likely to be paramount. The design of the site should not simply encourage more leads, it should help to encourage more high quality leads.

Measurement

When you have a good understanding of the client’s business objectives, it is then a good idea to agree how best to measure them. You are not necessarily putting a personal guarantee next to each of them, but it will help you focus on the priorities for the site.

The good, the bad…

It’s very rare to be asked to build a brand new site these days. Chances are there will be a number of previous versions of the site that you are being asked to redesign. These old sites are goldmines of information.

Ask the client to list what works on their current site and why. It’s possible, for example, something that is popular is distracting users from achieving calls to action associated with the business objectives.

Ask the client what their top three issues are with existing site and ask them to prioritise them. Ask them what the most important content is on the site and ask them to prioritise it.

This information needs to be checked against user requirements and business goals. I’m heading off track here… back to questions.

Other sites

Even though I have said that clients need to focus on what their users want from their site, it is also important to cover competitor sites and sites that they admire. Let’s face it, these people have to live with the site every day – they do need to like it!

When reviewing competitor sites try to focus on areas that differentiate each site/company. Are there any common issues? For example, do all the competitor sites avoid plain English? Is this an issue for the user base (or not)? Could the client make it a differentiator for them?

USP

Make sure that you have a good understanding of why people ‘buy’ from your client? What makes them different?

Also, make sure that you are aware of any strategic goals and possible changes in directions that might be coming up in the future.

Nuts and bolts

General areas that you need to cover on top of all this could be:

  • Branding/corporate identity – what, if any, are the constraints?
  • Technological constraints
  • Assets – such as content and imagery
  • Timescales, milestones and project management
  • Contracts
  • Support

So what about you?

Most client concerns will focus on your reliability. Have you done this type of work before? Was it successful? Did you deliver on time and on budget?

There is a mutual trust issue at the start of any client/contractor relationship. We have found that the most effective method of calming any client fears is to actively encourage them to speak to your existing clients. If you’re really brave, let them look through your portfolio and let them select the client!

I guess this wasn’t really a checklist of questions but I hope it was useful.

Back to top