News w/c 23/08/10

This week has a slight UX flavour by exploring help content for users, the best UX books for beginners and how to motivate yourself through creative blocks.

Good help is hard to find.

This A List Apart article starts by reminding us that “one of the most fundamental rules of user experience on the web is that developers are rarely qualified to evaluate it”. For those of us that design and build websites, we’re computer literate and don’t struggle with simple tasks that other users of our sites may find complicated.

Author Lyle Mullican explores a variety of methods of providing help content to users, explaining how tone can work in your favour and which presentation methods – such as inline help, modal boxes or tooltips – work best for which situations.

If you’re a designer or developer who is often tasked with writing or providing help content, give this one a read.

User experience books for beginners

I’d place money that the majority of people reading this post have read ‘Don’t make me think’ by Steve Krug, it’s often quoted as one of the ‘must-read’ books of our industry but if you wanted to delve more into the world of User Experience, where should you start?

Well UX Booth to the rescue! They’ve compiled a list of books which give a thorough overview of User Experience, with Christmas on the horizon, it might be time to build up your Amazon wish list!

Self-motivating through creative blocks

We work in a creative industry and are called upon for a near-constant stream of ideas, solutions and suggestions which makes creative block a particular nuisance, especially when we’re paid for our creativity.

This article over at the Web Designer Depot explores some of the most common causes of creative block, such as working too hard, lack of sleep, stress and fear and suggests some tried and tested methods of breaking out of the situation, most of which are easy to do, like taking a walk and getting away from the screen, and some really interesting tricks for self-motivation like implementing your own reward system.

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

181. Interview or death

On this week’s show: how to avoid design by committee, why you shouldn’t bother submitting to Digg and how to specialise in being a generalist.

Play

Download this show.

Launch our podcast player

Housekeeping: .net awards

Boagworld has once again been nominated for the ‘Best Podcast of the Year’ in the .net Awards. In case you did not know the .net Awards celebrate the best in web design and development, and are brought to you by the world’s best-selling magazine for web builders – .net.

The winner of the .net awards is chosen by a panel of judges and a public vote. I would therefore very much appreciate it if you would take the time for vote for our podcast.

Back to top

News

The 7 deadly sins of blogging

I few weeks back I wrote a post entitled “10 Harsh Truths About Corporate Blogging“. The idea was to highlight bad practice in the way many organisations approach blogging. This week sees the release of a similar article entitled “The 7 Deadly Sins of Blogging“. Interestingly even though both articles tackle very similar subjects in a similar way, both of posts raise very different issues.

According to the article on Copy Blogger the 7 deadly sins of blogging are:

  • Selfishness – Focusing on what you want from your readers rather than what you can give them.
  • Sloth – Not being willing to put in the work that is required to run a successful blog.
  • Impatience – Expecting to see instant returns on the time invested in blogging.
  • Lameness – Producing poor quality uninteresting content.
  • Identicality – Copying the blogging styles of others rather than finding your own voice.
  • Irrelevance – Writing about something nobody is interested in.
  • Boorishness – Being that guy who just won’t shut up about his pet subject.
Its a good list and one that really makes you think about the way you approach blogging. However, ultimately I think it all comes down to the authors first point, selfishness. As she puts it – if you want to run a successful blog you need to:
Give. And then tomorrow, you give some more. And the next day, you give more.

UX Design – Myths and consistency

There are two user experience posts that I particularly want to mention this week.

The first deals with the lack of consistency users experience online. The post asks “Should There Be a United Set of Styles For Web Interfaces?” The author argues that operating systems encourage a degree of consistency by providing standard interface elements that can be easily utilised by third party developers. Generally speaking most mac apps use the OS interface elements and the same is true for windows.

The author goes on to propose that CSS 3 provides an opportunity to standardise the rendering of form elements across browsers so that whether you are viewing that element in Firefox or Safari it will look the same.

Although I like the concept it falls down on a number of levels…

  • CSS3 is not supported by IE6 at all.
  • Even in other browsers CSS3 support varies, meaning that the elements wouldn’t be consistent anyway.
  • In my mind using different browsers is like using different operating systems. You tend to only use one at a time and so consistency is not a high priority.
That said consistency is important. However, I think getting consistency across a single site is a more pressing aim, and one that many website fail miserably at.
The second post on user experience is far more practical and frankly useful. Entitled “Top 10 UX Myths” it blasts apart many of the common misconceptions about UX design. My personal favourites are:
  • People don’t change – Just because users didn’t scroll in 1994 doesn’t mean they don’t now!
  • Design to avoid clicks – Sometimes it is better to ask a user to click more than overwhelm them with too many options.
  • People know what they like - You cannot blindly give people what they ask for. Often there is a difference between what they think they want and what they actually like.

If you are a website owner I highly recommend you read this. If you are a UX designer than check it out. It will make you smile!

Typography – Stats, facts and sizing

There continues to be a lot of buzz around web typography this week with 3 posts/sites I would like to quickly mention.

Typographic Design Patterns and Best Practices

This is a Smashing Magazine post that researches 13 web typography questions. It addresses issues such as most frequently used fonts, the average size of body copy and how often links are underlined.

Although it is always interesting to see what others are doing, it is important to remember that just because a lot of people are doing something that doesn’t necessarily mean it is a good idea.

CSS Font-Sizing: a Definitive Guide

This Sitepoint post tries to bring clarity to the confusing world of CSS font sizing. As anybody who has worked with CSS knows, setting font sizes is not as straightforward as it should be. This post lays out the various options and then recommends an approach.

Obviously there are no absolute answer when it comes to this subject. However, this post does recommend some good practice and helps you understand the problems surrounding font sizing.

Typedia

This newly launched site  is essentially Wikipedia for type. This shared encyclopedia for type attempts to classify, categorise and connect fonts.

The site has a powerful search facility that allows you to search for fonts by foundry, typeface, designer and more. It also helps you better understand typography and has growing little community where you can discuss type (among other things).

If you are a typography geek, this is definitely worth checking out.

Volume does not equal success

Are you desperate to get on the homepage of Digg? Do you crave to be number one on Google? Do you monitor your visitor stats and page views continuously? If so, then I recommend you read Gerry McGovern’s latest post “Volume is the wrong way to measure web success .”

Gerry says you are looking in the wrong place if you want to measure the success of your website. He argues that it is not the number of visitors that matter, but whether you are providing users with what they need. In fact he even argues that an obsession with volume can be damaging to a site:

Measuring success based on volume encourages bad practice. The search engine optimization industry is often a prime culprit of such bad practice. A search expert I met once refused to remove out of date and clearly wrong and misleading pages from the site he was involved with because it would reduce search traffic volume.

For too long we have belonged to the Cult of Volume when it comes to measuring whether a website is successful or not. For an increasing number of websites, high volume traffic reflects the website’s failure to help customers quickly complete the tasks they came to complete.

Perhaps it is time to stop looking at volume as a measure of success and look instead to the completion of calls to action. Did users complete your contact form, signup for your newsletter or buy your product. In other words, did your website meet your business objectives and the needs of your users?

Back to top

Feature: Hold stakeholder interviews now or pay later

Committees are the kiss of death to any web project. Give the kiss of life to your dying project with some one-to-one interviews.

Read ‘Hold stakeholder interviews now or pay later’

Back to top

Listeners feedback:

Specialise in being a generalist

Colin writes: I’m a former web design company owner – I worked initially as a freelancer, the business grew quite quickly, I took on staff, and then gave it all up. The reason was because I couldn’t decide what role to focus on and ended up doing the vast majority of the work.

Web design and development seems to be a seemingly endless list of skills – but how do you decide which direction to go down, and how do you stay up on technology?

What if like me, i’m a jack of all trades, but master of none? What can I do to help me decide where to focus my efforts?

There is certainly a big push towards specialising. This is especially true if you are a freelancer looking to stand out from the crowd. However, I do not agree it is always true. It certainly hasn’t been for me.

I was once in a very similar position to Colin. When we started Headscape I was responsible for all the design and development we did. We began to grow by simply taking on more generalists like myself. However, the point came when we started to employ specialists. As the roles started to fragment I felt the need to make a decision. Just like Colin I asked what role I should adopt.

In the end I made the decision to specialise in being a generalist. With so many of the top level designers and developers specialising I saw an opportunity to maintain a broad overview. We had specialists within the company and so there was little need for me to personally specialise. By remaining a generalist I had the opportunity to improve internal communication, identify new areas worth exploring and have enough knowledge to speak intelligently to our clients on most issues.

My level of knowledge in any particular area varies depending on my personal interest. For example, I know only a little about flash development or server side coding. However, I know enough to get by and identify any potential problems.

I understand the need to specialise if you are a freelancer. However, if you are running a small agency who are employed to provide the complete solution to clients, then I think there is a need for you to be a generalist.

Sites like Digg are not worth your time

Mike asks: Should blogmasters submit their posts to digg and stumbleupon, or should we let our users submit them for us?

I don’t think there is a right or wrong answer to this question. However, personally I leave it to users to submit for me. The reason why? – I don’t think social sites like digg or stumbleupon provide much in the way of valuable traffic to my blog. They are simply not worth my time and attention.

It is actually not that easy to drive a lot of traffic to your blog through these sites. Sure, we have all heard about the Digg effect. However, getting highly ranked is hard. It is the submissions of a few prominent Diggers that dominate the homepage. The chances of your post getting picked up are relatively slim unless you happen to post silly videos or breaking news.

Even if your post is fortunate enough to gain a high profile on these site, the quality of traffic is low. The users visiting your site are interested in only one thing – the particular post. They are not interested in who posted it or the site it is hosted on. The chances of them turning into regular readers is almost zero. The chances of them completing a call to action even lower.

In my opinion it is better to take the time you would have spent submitting your post and invest it in making that post really stand out from the crowd. If your content is outstanding it will naturally attract an audience.

Back to top

The iPhone is not easy to use: a new direction for UX Design

If the iPhone is so difficult to use, why is it still regarded as a game changer by both the design and business worlds? Because it does several important things right, but most of all because it’s fun.

Fun is the New Usable

As a user experience designer, I thought my job was to make things not suck. Until recently. As technology has evolved, human behavior has evolved along with it. Since behavior is the basis of user experience design, my job has evolved as well. Now, my job is to make things people love.

Not sure I agree that the iPhone is difficult to use but there are certainly inconsistancies in the UI. That said, I do entirely agree with the idea that it is our job to make an experience that delights rather than simply ‘not sucking’.

Posted via web from Paul Boag’s Stuff!

179. Affordance

On this week’s show: Ryan and Stanton are back and we are joined by Mr Marcus Lillington! We talk to Dan Rubin about making your interface invisible and answer your questions about working on multiple projects at the same time.

Play

Download this show

Launch our podcast player

News

RTFM

The first post this week is an article on webdesignernotebook.com from Yaili, in which she has a little rant on the fact that we, web designers, like to complain about how little recognition our profession has, how everyone likes to think they can make a website, and how clients don’t respect our work. But when it comes to actually doing something that could make us a bit closer to any other “official” profession, we’re bored and dismiss it. It’s so much funnier to complain about IE6!

Yaili has made a point of reading through the W3C specifications for CSSS2.1 and 3, HTML 4.01 and HTML 5. While most of us claim to be familiar with the specifications, how many of us – hand on heart – can honestly say they’ve fully read all of them?

The W3C specs are the closest thing we have to a manual and anyone who works in this field should have read them at least once, we don’t have to know them by heart or be able to quote from them, but we should be familiar with what they contain and be able to use them as a reference like any other professional book, as Yaili says, “After all, those specs lay the foundation of what we work on every day, so we should at least have an overall knowledge of them and of what they address.”

I know personally, this post has acted as an encouragement to print off the specs and read them again on the commute.

Structural Tags in HTML5

If you’ve been inspired by Yaili’s encouragement to read the HTML5 spec’s, then the next post might be of interest to you also. The HTML5 specification has added quite a few interesting and useful tags for structuring your markup and will replace many of our typical DIV entries from our code.

Of course this is an audio podcast, so I’m not going to start reading code out for you, but this is a nicely detailed article which explains the new tags such as header, footer, nav, article and aside which you can start using today, and includes a couple of tricks to make current browsers treat them as they should by using the CSS display:block attribute as well as a javascript fix for Internet Explorer.

It’s a nice primer for anyone starting to play with HTML5, so give it a read!

Redesigning your own site

And finally we have an article on A List Apart which touches on those times when you have to deal with your most difficult client. Yourself.

Lea Alcantara discusses her experience and thought process of redesigning her personal site. Your personal site has to demonstrate proficiency in the very latest development and trends in the industry while remaining true to the brand which you may have taken years to establish. Cameron Moll’s mantra of “Good designers redesign, great designers realign” features heavily in this thought process.

The article details Lea’s process from start to finish, explaining certain dead ends – like thinking she could jump right into Photoshop and play – to starting with her branding and letting the design evolve from that. She explains how she consulted with some trusted design friends and urged them to provide objective design analysis instead of personal taste.

While the article is focused on a particular site design I think there’s some good tips in here that we can all take away, or at least keep in mind when we decide to work with our most difficult client.

Back to top

 

Interview: Dan Rubin making your interface invisible

Ryan: You did a really good talk this afternoon on “making your interface invisible”.

Dan: Thank You

Ryan: What does that mean then? *Laughter*

Dan: Select all…. delete

Ryan: Hiding the interface from your users

Dan: making you interface invisible, doesn’t mean what it sounds like. Thankfully. It’s about the idea of designing for the experience rather than for the visuals or particular features or anything like that. Making those blend so far into the background that users don’t even notice them. That’s what I mean by making the interfaces invisible.
It’s not a new concept if you do a couple of searches on The Google, you will actually find even A-list apart article back in 2000 covering the same kind of stuff. It just hasn’t seemed to sink in and one of the reasons that I’ve kind of thinking lately is that there just aren’t enough designers and developers talking about it. Usually you here about the concept of it an interface disappearing being talked about user experience (UX folk) designers or usability experts and consultants. A lot of the time designers and developer just don’t listen to people who are the same us, those who don’t do exactly what we do. We do listen to them but we just don’t listen in the same way. So if we only hear the same kind of advice from people who aren’t doing what we are doing it’s easier for us to dismiss it. I think it’s more important for people who do the actual design and do the actual development to be talking about it not just thinking about it, but doing it.

Ryan: You mentioned in your talk your talk was targets at not just people who design interfaces but (I can’t remember how you put it), not just designers who push pixels around who do the actual visual design. I’ve always associated interface design with that.

Dan: The thing that I’ve learned from clients (first of all) and then then I realised it applies to all of us. Is that when people hear the word “design” they think that it’s something visual and it’s not. The concept of design is much more basic, its creative problem solving. I mean it can be called a lot of things, but design isn’t just a purely visual task and you can design thing without any visual element. People who design applications aren’t designing the interface to the application; they are designing the interaction, that’s why we have so many. The answer to that the industry has come up with is to come up with a lot of different terms that your experience designer, that your interaction designer. The reason we have to come up with these terms is that people hear design on its own and they think visual. But that’s a visual designer, a graphic designer an interface designer. If were just talking about the process of design, it’s something that everybody is a part of. Whether you’re a developer, an information architect, an interface designer or you’re an amateur, it really doesn’t matter. Your part of the design process. It’s a much bigger concept, that’s why when talking about the idea of designing for the experience, trying to design the experience itself rather than specific parts of it and making sure those parts blend into the background. People just come away having a wonderful experience. That’s why everybody in the team on a given project has to be a member of the design process, otherwise that won’t happen.

Ryan: In your talk you mentioned mimicking physical interfaces and you were kind of talking about trying translate what we do in the real world into your interfaces and those kind of experiences, it’s that right?

Dan: yeh, well there is this concept that we all know, we all talk about look and feel. That’s a common phrase that’s used a lot. But a more specific concept and term that I recently discovered called “affordance” and it’s been around for ages. It’s not new to people who are cognitive psychologists or who are in product design and it really we do the same thing with interface design. Any that’s designed for the screen, especially if it’s designed to be used like applications are. What we are really doing is designing products and software designers again know about this, but for some reason in the web world we’ve got a lot of people who haven’t come up through the traditional lines of education, which includes a lot of that psychology background. Which is fine as long as we are open to learning this stuff and realising we should know it. It all exists and has been around for ages. It’s basically the principal that allows us to interact with objects and interfaces in the real world, outside of the screen, and understanding that we use the size the shape the texture and constancy of things that we interact with in the real world to know how to interact with them before we touch them. And that’s the concept of affordance. That’s what it’s about those aspects of an elements design and construction or what not, that us to know exactly what to do with it and how we can interact with it. There are a lot of great examples of this in Donald Normans book the design of everyday things, which is a product design book essentials but so many of the principals apply to what we do. Not just interface design but again the design of applications and design of interaction. People are using what we build and that’s no different to people using a product that you’ve designed and engineered. We are designing and engineering what ends up being a total experience, it’s not something we can hold in our hands like a physical product but it’s a virtual product.

Ryan: You mentioned that you shouldn’t have to describe your interfaces; they should be intuitive to use.

Dan: I’m very against instructions in interface design.

Ryan: this leads me catching you taking pictures in the men’s toilets earlier.

Dan: Yes, this could be seen as compromising. But …erm… (Ryan has a little giggle fit) I do that all the time.
What I’ve found once is that now that I’ve started looking outward because I didn’t start as a designer in interface design. I started as a graphic designer and doing print. And so I’m always looking at things in the real world for inspiration. For whatever reason in the past year or so I’ve started actually realising how many direct parallels, 1 to 1 parallels there are in the real world with these interfaces that are all around us, they are just 3 dimensional. We just interact with them physically instead of through the intermediary of the mouse or the track-pad and the keyboard. And really they are not that different and so the examples in the restrooms, they are full of them for some reason whether its public restrooms or private stall in a hotel where something clearly hasn’t been designed to be intuitive and thus it needs printed instruction. It doesn’t mean instructions are bad, there are something’s that are so complex that they can’t be simplified beyond a certain point, so they need some sort of instructional text. But far too often we use instructions as an easy out, where we design something that really should be more intuitive, but instead of going back and redesigning it we put a little help icon next to it (or a little bit of help text when someone hovers over it). Or we will just put up a help page, before someone begins a task, and we expect people to read this stuff. The fact is people notice it’s there, they don’t always necessarily read it but they know it’s there and so it’s adding visual clutter that is probably not necessary. If you redesigned that interaction you could get rid of the need for instruction, you make intuitive there is no need for explanation. I think it’s a good marker in the design process that if you find an element of your interfaces requires instructions then you need to redesign it and keep refining and redesigning it. It may not be a refinement it maybe redesigning it from scratch but if you’re always on the lookout for that, like “Is this intuitive? Does this work without someone explaining how it works?” if you keep on doing that you won’t dig yourself into a hole.

Ryan: sorry I’m just chuckling to myself about your toilet reference. Realising that the last person I interview was Elliot J Stocks and I began that interview with “Hi Elliot the last time I saw you were outside a men’s toilet” (fits of laughter) I’m going to be getting myself a reputation.

Dan: it used to be the water cooler and now apparently it’s the restroom.

Ryan: we have to clear up the reason the men’s toilet reference was because you were taking a picture of a diagram of the showing taps and a description.

Dan: the taps that we are all familiar with now that are motion sensitive that don’t have taps anymore to turn them on and off, you just put your hand under it. And that design is not new it’s been around, I’ve never seen one with instructions because it is intuitive. They haven’t broken this one the one in the restroom here just works but even though I knew how to use it, the fact that I saw that descriptive image and text next to it. And its next to every single sink, it was a distraction. So where I would have been able to just go and put my hands under it, for a split second I was distracted by oh what’s this instruction. It made me think that it was something that I didn’t know how to use and that’s where instructions can be bad as well. Maybe you’ve added it in because you mean well, not because you need the instructions but you think that it will help the user by having them there. That that extra bit of information never hurts and that’s actually the wrong thing to do. It has the opposite effect, it adds clutter. If something is intuitive then you’ve spent the time designing it well that people don’t need instructions, by adding them you are actually making it harder to interact with.

Ryan: its weird (repeated… 3 times?) weird occurrence isn’t it. You also mentioned looking at desktop application design and translating that to the web, I found that really interesting. Can you talk about that a little bit?

Dan: yeh, there is a lot we can learn about interface design from the desktop. We can’t do everything on the web and even with things like adobe air and flex we can’t do everything we can do we can when building desktop applications. The thing is that basic interface conventions have been around a lot longer than any of our interface conventions, that we tend to think of being created on the web. The fact is that they haven’t there are very few things that are web specific. One of the things being the silly little Mickey mouse hand icon that we mouse over a link, that’s one of the main examples that I gave. In the desktop we have a much more precise pointer mouse or the default mouse pointer rather (the arrow) whether you’re on a Mac windows or Linux it doesn’t matter. It’s consistent, it has a very specific point, you know at the very tip of that there is one pixel that we use to interact with whatever we are clicking on. It’s much easier to use and target something accurately. Whereas the Mickey Mouse hand is more vague, there isn’t a single point that is clearly defined in the icon and on top of that it only appear once you’ve already began your interaction with something. Developers and designers we tend to work with the web and applications very differently than most users. We’ll mouse over things because we want to see whatever hover effects there are, we appreciate maybe the idea of discoverability in an interface more than the average user. Whereas a regular user (if I can make such a general statement) will look at an interface and without moving their mouse around, they will decide what they want to interact with before they then go and interact with it. So if the only way of knowing something can be clicked on is mousing over it and seeing that hand icon appear it’s not intuitive. Something can easily be missed and so what I suggest is to take a cue from the desktop and only use that hand icon for what it was originally designed and that’s hypertext links. So if you’ve got a link that you’ve underline in your text on a webpage or in a web app, as long it’s an underlined text link in the body of text use it, leave it as the default. Everywhere else if you use that default mouse pointer it’s much more like using a desktop app and it’s much more precise and it forces you to design something that looks like you can interact with it before the mouse ever gets near it.

Ryan: do you think people are just possibly used to the mouse cursor changing to the pointer, and if you took that away, that could possibly have a detrimental effect rather than a positive effect?

Dan: I don’t think so, I think we are as the creators of the web. But based on the fact that I still see some users trying to double click things on the web for instance, that is a connection that none of us on the web “we don’t do that”, and that in some instances that we should. There are some instances through JavaScript where we can do that, basically if a convention exists we should try and use it because it makes for more intuitive experience. So if we have an interface in a web app that require folders for instance, and that are folders that are more like on the desktop rather than a list in a sidebar, it makes sense that we if it was a desktop app that we double click it. We wouldn’t just do a single click, so let’s make that web app respond with a double click because that’s what people tend to expect. The mouse point, that Mickey Mouse hand isn’t something people expect, because it doesn’t happen until they have already made a decision. Maybe they are used to it appearing but it doesn’t affect their decision making process and because of that if you eliminate it what you will find is people won’t notice it’s gone. You will be designing thing people know they can click on and all they are interested in is mousing toward it and clicking on it. If it looks clickable they won’t expect that cursor to change as much, otherwise people would not be able to switch from using a web browser to using a regular desktop app because that hand never appears. If they were reliant on that they wouldn’t be able to use the web for an hour and then use a regular menu-ed app, they would be confused about how the cursor wasn’t changing but that’s not how people work.

Ryan: I think as well how many times have you seen people where they look at a file structure and expect to be able to right click on a folder and have all the options that you normally have. And just because that’s they are familiar with.

Dan: exactly and that’s what I talk about learning from the desktop, that’s the kind of thing that I’m talking about. The desktop has been around and creating these conventions for a lot longer than the web has. Users have been using desktop apps longer than they have the web, maybe you can find younger users who are coming to the web first and barely using desktop apps, it doesn’t mean they don’t use their operating system, they do. They use their web browser too. Those are the first thing they interact with when they start up the computer. Until we get to the point where (and I hope this point doesn’t come) if we had a device that was only a web device and had no other interface than the web then maybe you could make an n argument for it. But I think that would be a bad thing, I would rather see the web and the desktop come together as far as interface conventions and how we work with them in applications. Rather than being web applications, I would rather see them just being applications and when you use them you don’t think about if you’re using something that’s running in a web browser or that’s communicating with a remote server rather than your hard drive. You’re just using an application to do a task, there shouldn’t be a distinction and I don’t think that users have as much of that distinction that we do as developers. We like to think that there is a huge difference between a web app and a desktop app, but the for users it’s likely they don’t think of it in those terms. This is where I complete this task they don’t think that Gmail a web app it’s not a necessarily a web email app it’s their email. It’s their inbox, that’s how they think of it and we have to understand that’s how users perceive what we do. It’s a very very different way to look it.

Ryan: Especially as the barriers are disappearing, things like adobe air for tweet deck and emailing to outlook and mail. And the walls are just fading away.

Dan: Which is a good thing, as those walls fade away we need to as practitioners on the web we need to take as many cues as possible from the desktop and help make that transition more seamless.

Ryan: you mentioned a few resources in your talk, and I bet you can’t remember them…

Dan: Actually I can. I remember…
Jared (I would remember him anyway) – he has uie.com has excellent resources about all sorts of things about usability and that’s ultimately …that’s what this is all about usability. The article I refer to at the end of the talk of Jared’s was one he published the exact same day that I came up with the description for the idea of this talk that I gave today. So it was an odd moment and it’s about the exact same thing that this talk was. Keeping your interface invisible.

Ryan: and your talk previously

Dan: well yes we have been doing work with Jared, we have been very lucky to do a couple of workshops with him. It’s always fun to share the stage with him; it’s even fun to chat with him over dinner because you always learn something. You always come away with a smile on your face even if all you learned was how to laugh and enjoy his magic tricks with the card deck. It’s always enjoyable, so hes a great resource, his site is great resource. And UIE as a company is great resource if you’re looking for information about user testing, usability it’s the place to go. And the article is very recent so look on his site and you will see it on the list of articles a specific lot about invisible interface design and the experience.
I also reference Steve crouges book don’t make me think, which is awesome, excellent, funny, good, and thin. All the things a book should be. Educational, easy to read and short.

Ryan: plane flights worth it isn’t it

Dan: exactly yes, if you don’t have it you will get it and read it and find yourself going back to it again and again and dog ear it and mark it up like crazy and you share it around and sometimes don’t get it back.
And the other book by Donald Norman, the design of everyday things. It’s really a product design book but it’s useful for anyone who deals with designs that are meant to be used by someone else.

Ryan: have you seen thedieline.com product design website.

Dan: no I haven’t

Ryan: it may have been Elliot J Stocks last time he was on I believe it’s just the thedieline.com And it’s looking at product design. They release a series of particular products like an aerosol can or packaging for a toy and look at all different packaging. It’s really interesting.

Dan: I will have to look it up.

Ryan: it’s a really good site

Dan: I eat that stuff up because the more I look outside of the web the more I find that everything that we are doing, that we feel like we are discovering for the first time has already been done. A lot of it has already been done, especially the basic concepts of product design or we talk about information architecture all the time, but we didn’t invent the term. It’s been around for decades and possibly even decades before the web was around. And it comes from architecture and way finding enviromatnetor graphic design, these are concepts that people have been thinking about for a lot longer than we’ve been thinking about them. Possibly for a lot longer than some of us have been alive. I think it puts what we do into perspective; first of all there is a wealth of information and knowledge out there that’s been proven which can help convince us and our clients. If we are going to someone and we are explaining the idea of information architecture to them and we’re not just explaining it as something new in particular for the web. This thing has been around since before the web was even thought of that making it a whole lot easier to gain credibility with clients. It’s not just information architecture it’s so many of these basic principles of interaction, they are all basic psychological principles of human interaction really.

Ryan: what was that word you’ve been using all day again?

Dan: affordance – look it up its good stuff.

Ryan: ok Dan, well thank you very much for taking the time to interview you.

Dan: thanks for letting me ramble on

Ryan: it’s been a pleasure to see you again

Dan: always. Thank you

Much thanks goes to Andy Kinsey for transcribing this interview.

Back to top

 

Listeners Questions

Stories of our failures

Dinu writes:

Looking from afar, established agencies like yours seem to be almost perfect. However, I’m sure you’ve had to deal with missed deadlines, over-booking, etc. I would like to hear about some of these #fail stories (just to get a “you are not alone” feeling for the rest of us), and also to know how you managed to overcome these common pitfalls.
Hope this question gets a chance of being aired.

Thanks and stay awesome….

Transcript coming soon…

Working on multiple projects

Emil Sundberg writes:

Hi,
I’m running a small web agency and I just found your podcast. Great show!

We’re a small team, 4 people, doing web development for clients and use Basecamp/Backpack/Highrise/Campfire (yes we’re 37signals addicts) and I think it would be interesting to hear you talk about how you work with your team in the big picture, not an individual project. How do you plan multiple projects with a limited staff? Who’s deciding what’s most important and what should be done next. Do you use and planning tools or an Excel/Whiteboard?

Transcript coming soon…

Back to top

 

University course finders suck

I see a lot of University websites and the one area that consistently fails to deliver is the course finder.

Higher education is one of the biggest sectors Headscape works in. I have been involved in producing user interfaces for many of HE websites and have reviewed many more. It is a complex sector with significant challenges. However if I could address just one, it would be the inadequate course finders on most Higher Education websites.

Why the course finder matters

Let me start by defining what the course finder is. A course finder on a University website is the mechanism by which prospective students selects a course.

Think about that for a minute. A course is the primary ‘product’ that a University ‘sells’. Without courses there would be no students. Without students there would be no money and therefore no University.

Yet judging by the investment made in most University course finders, it would appear that many institutions fail to grasp this fact.

Sure, the course finder isn’t everything. Traditionally many prospective students will order the printed prospectus. However, this is changing. Increasingly prospective students are turning to the web as their primary source of information. Also there is a significant cost saving to be made by moving away from the printed prospectus.

You could also argue that prospective students use a lot of other criteria when selecting an institution. This is true, but these days students are largely funding their own education. As a result they behave more like traditional consumers where the product matters more than additional ‘benefits’.

However you look at it, the course finder is the single most important feature on most University websites.

With the course finder so obviously a key component it is hard to believe that it could be failing. However, it is.

Where the course finder fails

I am aware that a title like “University course finders suck” is a strong accusation, even if written somewhat tongue in cheek. However, I do believe there are some significant problems that need addressing. These fall into three areas:

  • The page mentality
  • The broadcast mentality
  • The copy and paste mentality

Let me explain those rather cryptic descriptions.

The page mentality

Users are increasingly expecting web applications to behave like desktop software, rather than traditional web pages. Unfortunately most course finders I encounter feel like they were built in 1999. While other web applications make use of technologies like Flash and AJAX to provide a faster and more interactive user experience, course finders are typically slow and page based.

Example Course Finder Page

The user is forced to navigate a series of link intensive and text heavy pages, before finding information on a single course. There is no ability to compare courses, filter results or receive course suggestions. Instead the course finder is treated like any other page of textual content on the site.

The broadcast mentality

The current crop of prospective under graduates are a generation that has grown up with social networks and value peer to peer recommendation over top down advertising. They do not trust information supplied by institutions and companies, preferring instead the recommendations of their peers. They are used to websites that facilitate this community recommendation model such as Amazon, Facebook or iTunes.

Screen capture of the rating functionality in iTunes

Unfortunately most institutions actively discourage peer to peer recommendation. Marketing departments fear what would happen if they lost control of the message and academics shiver at the prospect of having their courses rated by students. Instead they continue using a broadcast model where the content is controlled centrally and prospective students have no sense of how reliable the information is.

The copy and paste mentality

The problem is not just confined to the reliability of the course information provided. It is also to do with the quality.

In my experience much of the information about an individual course is lifted directly from the printed prospectus. In turn, that copy has been provided by individual faculties, schools or course leaders.

In some cases the original copy received has been checked for spelling, grammar and inaccuracy. Rarely is it edited to add personality and ensure consistent tone. However, even if the prospectus copy is beautifully crafted and expertly written, that does not mean it can be copied to the web.

It is not enough to lift copy from the prospectus and paste it online. The web is a very different medium and needs to be treated appropriately. Copy that maybe entirely appropriate offline can come across as cold and impersonal online. In addition, users read web copy differently to print. There is a need to aid scannability and condense text, to make it easier to digest.

Flickr community guidelines

In short most course finders feel uninspiring and out of date. While other sites are creating copy full of personality, empowering users to provide feedback and creating a desktop like experience, course finders feel stuck in the past. Why then is such an essential tool being neglected?

Why the problem exists

As with any large organisation the blame does not lay with one individual. In fact if you are reading this post, you are probably already aware of the problems I am outlining. The problem lies not with individuals but with the culture of the institution itself.

A large part of the problem is one of inertia. Although most institutions have tweaked their course finders to work with a new technology or to accommodate a new design, nobody has ever been given the job of addressing it properly. That is largely because nobody sees it as their responsibility. Addressing something as important as the course finder needs cooperation across departments and somebody with the authority to push changes through.

Of course Inertia is not the only problem. Higher Education institutions also have a responsibility to make their websites accessible. Highly interactive applications that make use of Javascript, AJAX and Flash are often perceived as inaccessible and with good reason. If you look at the majority of high profile web applications they are incredibly inaccessible.

However, the biggest boundary to modernising the University course finder is without a doubt time and money. Internal web teams are almost always overstretched with their time spent updating content and dealing with support queries. Rarely do they have the opportunity to think strategically, let alone undertake a rebuild of this scale. Their focus is on triage, not long term health.

Now as somebody who runs a web design company that specialises in Higher Education, you might expect me to suggest outsourcing. However, that is easier said than done. Demonstrating a need to finance a rebuild of an application that appears to be working adequately can be hard. Most senior managers will not grasp the benefits of upgrading the course finder.

Is this article therefore pointless? Am I simply pointing out a problem that cannot be fixed? I certainly hope not. I believe that with the right approach it is possible to push through change.

How to fix the problem

Lets begin by dispelling the accessibility misconception. Just because a lot of web applications are inaccessible, does not mean they have to be. The key is to build the application to work as a traditional page based site first. Once that has been done, Javascript can be added to intercept links and cause the application to behave differently. This article is not the place to explain the technical details of such a technique (known has HIJAX). Sufficed to say it makes Javascript driven web applications considerably more accessible, even with Javascript disabled. There are still some problems for Screen Reader users, however it is even possible to overcome these.

The real challenge to overcome are not accessibility but inertia and investment. How do you convince management to invest in upgrading the course finder?

There are two keys to success – Show and Tell.

One problem you face is managements inability to picture what an improved course finder would look like. Unlike us they do not necessarily use the web on a regular basis. It is therefore important that they can visualise the possibilities.

One option is to build a prototype. This would be the preferred approach because it best represents the final product. However, as we have already said internal web teams are overstretched. It maybe that the work can be completed out of hours. However I recognise this is not always possible or fair! Another possibility is to mockup some designs and wireframes that demonstrate how a revised course finder might work. Although not as good as a prototype, if accompanied with examples of working web applications, they can often be adequate.

Although a demonstration will prove impressive, it may still not convince. Management may not grasp the ramifications of what they are being shown. It is therefore necessary to explain the benefits so that investment can be justified.

Fortunately, when it comes to upgrading the course finder this argument is extremely compelling.

An effective, dynamic course finder is a powerful tool in differentiating yourself from the competition. It gives users the perception that your institution is progressive, relevant and dynamic. However more importantly, if it includes peer to peer recommendation, it also creates the perception that you are open and honest. Even negative comments have a positive effect because they adds credibility to the positive comments and to you as an organisation. Users can trust what is being said by an organisation that does not censor negative criticism even on its own site.

Social tools also create a greater sense of engagement with prospective students. Establishing a relationship with prospective students is a key component in encouraging them to attend your institution.

However, most importantly an improved course finder will be easier to use. This will enable more students to find the right course for them. Many students suffer from choice paralysis, overwhelmed with the number of different courses and the options open to them. A well built course finder will be able to guide them through that process and connect more ‘customers’ with the right ‘product’ for them.

Of course in reality management may not be so easily convinced. Fortunately that is where statistics come to the rescue. Monitor dropout rates from your course finder. Add a poll to it. You may even want to test improvements to the system using A/B testing. All these approaches are more weapons in your arsenal.

Conclusion

It is important to stress that I am not proposing changes to the course finder simply to ‘stay current’. This is about creating a more effective business tool. A tool that can facilitate helping potential students find the right course for them. Making this connection is almost certainly the most important role of a university website and yet in most institutions it is a wasted opportunity.

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.

171. Access

On this week’s show: Ryan and Paul talk to Robin Christopherson from Abilitynet about web accessibility and Dave shares Headscape’s experiences of moving to Google Apps.

Play

Download this show.

Launch our podcast player

News

Page zooming vs. text scaling

In show 169 we featured Cameron Moll’s article “Coding like its 1999“. In this post Cameron explained his decision to move from ems based sizing to pixels. He justifies this decision by citing the fact that all modern browsers have moved from text resizing to page zooming, as their primary resize tool.

Cameron’s position has caused some controversy in the web design community, with passionate responses from leading figures like Drew McLellan and Roger Johansson. Cameron’s original post also attracted some heated debate in the comments.

So why do so many object to this move away from text scaling and fluid design? Most of the arguments are the same as those that have been around for years. Fluid design…

  • Adapts to varying amounts of content and different languages.
  • Makes better use of screen real estate.
  • Puts the user in control
  • Prevents horizontal scrolling
  • Adapts to alternative devices (such as mobile)

However, Molls critics also point out that page zooming is not support by IE6.

Cameron has responded to the criticisms in “The debate over page zooming vs. text scaling.” He argues against the principle of “one site fits all,” which underpins fluid design.

In my opinion this is a question lacking a black and white answer. Although generally I share Cameron’s view, we still occasionally build fluid or ems based sites depending on the project requirements and target audience. There are good arguments on both sides and neither approach should be dismissed.

10 web design rules you can break

What the discussion over page zooming shows us is that nothing is absolute. As human beings we like black and white rules, but actually those rarely exist. The web is full of articles about web design that layout rules for design, usability, accessibility and every other aspect of running and building websites. However, in truth no such hard and fast rules can exist.

Sure, there is best practice. There are principles of design, development and management we should use whenever appropriate. However, these should not be followed blindly. Sometimes meeting business objectives or users needs involves breaking these rules and doing something different.

This week the Web Designers Depot has released “10 Web Design Rules That You Can Break“. This post looks at some of these supposed rules and shows examples of sites that have successfully ignored them. The rules they have challenged include…

  • Do Not Display the Horizontal Scroll Bar
  • Use a Minimal Number of Font Faces
  • Do Not Use Too Many Colors
  • Make Your Site’s Goal Obvious
  • Navigation Should Be Easy To Figure Out
  • Stick to Web-Safe Fonts
  • Don’t Have a Splash/Landing Page

In fact all of these ‘rules’ are actually very good advice. However, they should not be followed blindly. That is why I love this post so much. It highlights best practice, while at the same time inspiring people to challenge ‘the rules’ occasionally.

Grass roots viral marketing for ordinary people

While we are on the subject of challenging preconceptions I would like to draw your attention to a post on Sitepoint entitled “Create a Buzz: Grassroots Viral Marketing For Regular People.

I am constantly amazed at how many website owners (and even web professionals) believe that viral marketing and social media are the easy answer to their marketing needs. As the article points out viral marketing is far from easy and if you don’t have a massive twitter/facebook following it is even harder.

Although the article is essentially a guide on how to be successful in viral marketing, it does not sugar coat the realities. It points out a number of harsh truths…

  • You need a product or service that people actually care about.
  • You need to reach a major influencer to have any hope.
  • Don’t just rely on a single outlet (such as YouTube) to get your message out. You need lots of avenues of attack.
  • A lot of it is just down to luck!
I found two quotes particularly telling…
If your message doesn’t offer people something they need, something they want, or an opportunity to support something they believe in, you may need to rethink a viral campaign.
The truth about viral marketing is that many times it comes down to being in the right place at the right time.
I am extremely skeptical about the benefits of viral marketing and believe that unless you are willing to put in a lot of hard work it rarely proves successful. The perception that viral marketing is some kind of magic bullet simply isn’t true.

Information as a task

In order to prove I am not the only skeptical, cynical and despondent person on the web this week, I would like to refer you to a post by Gerry McGovern entitled “Information as a task“.

This barely disguised rant about working on large pubic sector and corporate websites, resonates with my own experiences. The heart of the article is a call to website owners to stop putting up content  unless it helps users fulfill a specific goal. Its a simple message but one often ignored.

Website owners too often start the process of deciding on content by asking “what do we want to say?” rather than “what do users want to know?” Gerry writes…

Many organizations have a strange attitude towards information. Its creation is nearly always disassociated from its use. Information is rarely seen as useful or purposeful. It’s just there because people need it. It doesn’t help you do things. It’s simply there for you to read just in case you need some information.

He goes on to write…

Organizations have a fabulous capacity to produce massive quantities of low grade, aimless, pointless information. Much of the information that should have a point is useless because it is not useable. People don’t understand it. They can’t act on it. It doesn’t result in someone completing a task.

I couldn’t agree more. Before any content is added to a website the author should always ask “what task does this help users complete?” and “is this task actually one real users will be trying to do?”

Back to top

Interview: Robin Christopherson on Accessibility

Ryan: Now here with Robin Christopherson from AbilityNet. Good Afternoon! How are you?

Robin: Yes, really good thanks, yeah!

Ryan: Fantastic! So for anyone who doesn’t know you or know what you do, could you explain that to us please?

Robin: Thank you very much. I am head of accessibility at AbilityNet and my team basically deliver consultancy and free advice and information on Web and software accessibility. And AbilityNet for people that don’t know are a charity and we do accessibility services but also assessments of disabled people in the home or in the workplace or in education and making sure they’ve got the right kit to access a computer and the Internet, etc. most effectively. And we’ve got now 800 advice information number, etc. so all things technology and all areas of disability. That’s who AbilityNet are.

Ryan: Fantastic. And you’ve just given a talk on “Designing for All in a Web 2.0 World” which was quite an eye-opening presentation I think for a lot of people who may not have seen or used a screen reader before. What was quite amusing was when you first started using it the rate at which your screen reader started speaking the content of the BBC home page, I don’t think any of us could understand it.

Stanton: I had no idea what it was saying at all.

Robin: You actually would tune in relatively quickly because when I’m working on the computer at home sometimes I don’t have it on earphones so it’s just kind of coming out through the speakers in the office and my wife just having walked past a few times now can get it so I think you probably kind of tune in. Maybe it’s a bit like the black faces and the white candlestick, you know you suddenly kind of see the other one and you kind of click. Yeah, when you’re reliant on speech output you don’t want to be sitting there twiddling your thumbs after having left the synthesizer at the default speed that you get when you install it out of the box. So you want to crank it up and not have to be waiting for it to finish what it’s saying.

Ryan: So you kind of highlight some of the issues from quite a site impairment point of view but there’s also a lot of other considerations that people designing websites should be looking into. You mentioned dyslexia or cognitive impairment. How do those type of conditions affect the way people use websites?

Robin: I think that vision impairment is probably the category of impairment that is the most difficult to cater for and someone like myself who’s got no useful vision, screen reader users are probably the hardest customers of all. A lot of the standards like ARIA for example, Accessible Rich Internet Applications, most of the guidance is around helping people who are screen reader users for example. But that’s not to say that there aren’t all the other impairment categories. Motor impairment people that have difficulties using a pointing device, a mouse or they’re keyboard only users or they’re voice-recognition users. People with a cognitive difficulty or dyslexia or with a literacy difficulty or for whom English isn’t their first language, all of these categories of impairment and obviously hearing impairment as well, have issues to do with accessing the Internet and software applications as well and the most notable ones tend to be those related to people like myself who can’t see: alternative text on images, not being able to access inaccessible Flash content and that kind of thing or Web 2.0 applications because of the inaccessibility of the JavaScript. But there is a significant impact on all those other groups. The speaker before me, Mark, was talking about typography and the choice of type, the font style is so important for people with a vision impairment, people with dyslexia, people with cognitive difficulty, etc. so Times New Roman may look absolutely gorgeous on the screen and on the page, but from an accessibility point of view, it isn’t necessarily the right choice to make for the body font. Maybe it’s fine for headings to give a certain style and because it’s a bigger font it’s going to be more legible than if you had to read a whole website, ten or eight point using Times New Roman. I wish I’d had three hours instead of half an hour to kind of go through the headline issues, right across all the different impairment categories. I had half an hour so I concentrated largely on the high profile issues to do with screen reader users and in particular Web 2.0 application type scenarios where the new guidelines like ARIA for example can make a significant impact.

Ryan: OK. What should we as, I suppose now that you mentioned typography being extremely important, what should we as designers and developers be doing to improve accessibility and day to day. I know it’s a very loaded question and there’s lots and lots of things we should be doing but as kind of a minimum we should just do all the time, every time we build a website, minimum we should be doing and then before we take the next step to really drive it home. What’s the minimum things we should be incorporating?

Robin: Um, there are some low hanging fruit. You know, there are some things that you could look at any site, any existing site and clean up: alt tags on images, and a decent heading structure, and make sure that the text resizes, that sort of thing that shouldn’t be too difficult to implement. On anything new that you’re building you really do need to get scripts with the WCAG, the Web Content Accessibility Guidelines, and the new version has come out last December to update those significantly, WCAG 2.0, and those are applicable to all the new technologies that are coming out, etc. and there’s really no shortcut to really kind of internalizing, digesting those and just letting them inform your every day practices in what you do, you know. They impact on everything from the wireframe right through to UAT and go live and also post go live maintenance and that sort of thing so you really just need to make sure you’re one of the web designers that have got with the program and you’re not doing the old bad habits of fixing everything to make it pixel perfect and doing lots of hacks to make it look OK in different browsers and that sort of thing. Luckily we’re in a much more standards compliant world now than we ever have been so you can really adhere to standards and only have to do minimal tweaks to make sure that things look relatively OK right across all the range of browsers and we’re asking that you go further still and you consider handheld devices and you consider Web TV as well as people with different impairments and that’s really going to significantly increase the customer base that you are going to be enabling to access your content and if it’s any kind of website with a business model with a revenue stream, right through to a site that’s an e-commerce site, you absolutely can’t afford to ignore accessibility in such a tough and competitive online environment.

Ryan: Yeah, especially with there was that Legal & General case which you mentioned earlier. They redesigned their website to be more accessible and had some quite good results with that, didn’t they?

Robin: Yeah, I mean this is an ancient example now. We helped the Legal & General in 2005. We did disabled user testing on the accessible relaunch and yeah, I mentioned that one in the Q&A at the end because most people will have heard of that one if any and they had staggering ROI. They had a saving of 200K per annum on site maintenance. They had an increase in online sales almost instantaneously after the relaunch of 90% and that kind of indicates that there was an audience out there that was knocking on the door before but couldn’t get through because of lack of platform compliance or lack of accessibility with the range of assistive technologies that people were using. Other people couldn’t tweak the browser to make the text size larger or impose their own color preferences. So there was an audience out there waiting and as soon as the site was relaunched and had opened the door to all those people, there was a step change in revenue. So, but there have been lots of cases since as well as cases that have shown the danger of ignoring legislation. You know, the Target case in The States where they thought it would be cheaper to be fined than to retrofit their site but when it came to it in the end they lost obviously, because they were in the wrong, and they were fined and they were also told to retrofit so they made the bad decision there and had loads of really bad PR as well. That sort of thing is going on over here but it doesn’t actually reach the court, they are settling out of court and part of that settlement is anonymity, a requirement for anonymity so we don’t have headlines over here, but there is litigation going on. So, there are the carrots and the sticks and all of those things have got to be an overwhelming case for getting with the program and becoming one of those Web developers who are able to build accessible websites which are being stipulated so often in tenders these days. You can’t work with the public sector without being able to create accessible sites and accessible functionality.

Ryan: Yeah, I work in the public sector myself as a full time developer so our baseline is it’s got to be AA compliant with WCAG2, have got to comply to the SENDA, the Special Educational Needs and Disability Act. Not so much the PAS 78 guidelines but I believe those are becoming the British standard, or are rumored to be.

Robin: Yeah, I mean it’s dragging on a bit, but it is going be sometime this year. I think probably Q3 this year and it’s going be a BSI full standard, BS 8878 and Julian and the panel including John Gooday from AbilityNet are on that again authoring panel. I think that one thing that is essential, is really important in assuring real life accessibility is testing. So, any web designer, any organization that have internal guidelines, style guides, etc. should have accessibility built in from a checkpoint or a good practices level but you also need to have a range of testing tools, whether it be the accessibility toolbar or some sort of accessibility checker. We can’t all afford an enterprise accessibility checking tool, but if you can they can be extremely useful from a monitoring point of view and ideally you’d have end users involved. So within your organization, if you’re a large organization or otherwise go externally to an organization like AbilityNet to get some end users looking at your content and making sure that it’s not only accessible to the guidelines but it’s also accessible in reality. We did some lab testing for a site that was strict AA about four months ago and 90% of the tasks weren’t completed by the testers because the AI was all over the place, the usability. None of the guidelines had been contravened but it was an extremely inaccessible site for people for a number of reasons. It’s an acknowledged fact that there are a lot of issues outside WCAG that you can’t really document that are specific to a site and the general layout and presentation of that site and the architecture, etc.

Ryan: Sure. So you mentioned testing there. Is there anything say that any of our freelance listeners that may not be able to afford a specific software, any quick and cheap kind of guerilla usability testing, that kind of stuff they can test for accessibility as well?

Robin: Ideally you’d get hold of a screen reader and become familiar with the basic level of functionality of that screen reader and just check with that. There are a number of browsing tools that can render the page similar to how a screen reader would read it out to you etc. but they’re not that useful when it comes to checking for compatibility, you know, if you’ve got a lot of JavaScript, how’s the screen reader going to handle those, etc.? There’s no easy answer to that apart from becoming familiar with the guidelines, using JavaScript from accessible JavaScript libraries where somebody has already done the work for you, and become familiar with a number of access technologies that you can use to double check some of the functionality and the content perhaps on a kind of sampling basis and you’ll begin to realize then which things are going to be problematic and that will inform your design from that point on. In Vista, voice recognition comes as standard and Windows 7 has got a full screen magnifier when that comes out so you won’t need to be purchasing a lot of different assistive technologies to be able to test with a number of them to inform your design process.

Ryan: In your presentation you talked about CAPTCHA still being a huge problem for accessibility and some visually impaired users can’t even register on a site. I also noticed that there was a kind of hidden extra link if you’re using a screen reader that nobody else really sees but you pick up on that once you go through with a screen reader. Are there any other kinds of sign posts that we should be putting into our sites like “Skip to Content” and things like that, that make it beneficial to visually impaired people or visually impaired users or people using screen readers?

Robin: I mean there will be a lot of other people as well, keyboard only users, when they gain the keyboard focus a lot of skip links become visible. People using Web TV, set top boxes often don’t fully support styles and a lot of those things become visible and they are in effect keyboard users. You can go over the top on skip links for example I’ve seen ones where there were like eight skip links and basically that’s a nav in itself, so you really need one at the top that says “Skip these skip links” or something so that is, you can kind of go overboard but yeah there are lots of little tweaks that you can do that make getting around a page, getting around sections of the page that are going to be hugely beneficial, but just doing something as simple as putting headings in, using the landmarks that ARIA offers to identify key, the top of key sections of the page are going to be hugely useful, not just for blind users for example but they are meant for a range of other user categories as well that would benefit from them.

Ryan: Could you talk a little bit about ARIA and how that’s beneficial for accessibility?

Robin: It’s relatively early days really and the support for it is pretty minimal at the moment. You have to have the very latest version of only a number of screen readers and the very latest version of Firefox, IE8 isn’t quite so good at having fully implemented ARIA support. ARIA stands for Accessible Rich Internet Applications and it’s basically the answer to the fact that WCAG, even WCAG2 hasn’t got a huge amount in there from a developing point of view. It’s more of a “Now let’s check the thing you’ve already done” point of view. But also didn’t define a standard for browser developers and AT developers, Assistive Technology developers, to interface and like an API almost and so ARIA has a number of things. Being able to define controls and their role and their status that you could never have done before in a browser. Slider controls in a media player for example a bit like in media player, Windows Media Player, but online in a, just as an embedded control in a page, that has never been possible to be made accessible before. Popup menus and that sort of thing before would have been done in styles or DHTML and that would be very problematic but with the new ARIA way of implementing them as long as you’ve got the right browser and the right AT then that is just like doing it in a desktop environment.

Ryan: One of the tips that you demonstrated on stage was for mobile devices. For the primary navigation one of the internal wars that’s always waged with me is “Should you put the navigation at the top or the bottom of the mobile page?” so that the mobile phone reads it from top to bottom every time the page loads and you showed that this site had the primary navigation in a dropdown menu.

Robin: Yeah, that’s how they chose to implement that as a dropdown and that is very cute implementation. That’s a good choice I think because you’ve got the nav there but it’s literally just one item or two items with the select button. Obviously it would be problematic if it was just a dropdown that was auto-fired for people that just arrowed down it without doing alt down arrow because that’s very a inaccessible implementation of a dropdown box but you’ve just got two items which you have to get over. If you had the nav at the bottom and you wanted to use the nav, then you’d have to get to the bottom and in some browsers there isn’t a quick way of doing that. On my mobile phone, the browser that comes with the Symbian operating system, WebKit I think, the screen reading software talks that I’ve got on my phone. I can literally just arrow left and right or up and down through items on a page, just like tab and shift-tab, that’s all I’ve got. So there’s no way of getting down to the bottom of a page to get to the nav so I would probably on balance having it at the top that in it is two items to get past. If you don’t want to interact with the nav it’s quite an elegant solution really.

Ryan: Are there any major issues with the predominance of touch user interfaces coming through now? I would think that using a mobile phone, the tactile feedback of the buttons is quite important or am I wrong?

Robin: Yeah, I mean we’re concentrating a lot of people who are completely blind but you’ve also got people with vision impairment and people with motor difficulty for whom iPhones are a non starter really so any kind of touch screen interface where it’s the entire interface, it’s not as if it’s an optional extra way of doing it. In Windows for example there’s going to be a lot more touch and multi-touch stuff going on in Windows 7. When apps use that as the only way of doing something, that’s when accessibility is going to become a big issue. There needs to be always an alternative way. Alternative to drag and drop for example of doing things for people with a vision impairment or can’t using a pointing device, etc. So as long as there’s a redundancy there that’s fine, which there isn’t in the iPhone.

Ryan: OK, that’s great. Just to finish up, is there a, do you have a list of things that you see regularly that are counterproductive to accessibility that you can recommend for our designers and developers to just try and stop doing or try and do better, these are kind of like my top five tips, yeah common mistakes type thing?

Robin: Yeah, if you go to AbilityNet.org.uk/webresources then one of the things we’ve got in there is top five tips and top five sins, that’s one of them. And another one is a top ten checklist of things to do. Which implies that if you do them, then um, well if you hadn’t done them like label images properly, then that would be a sin. So follow the check points, those ten and those are ten things you can avoid sinning on. So yeah, there’s a number of resources on there. Other sites that I would definitely recommend to people for getting to grips with accessibility would be WebAIM.org and they go from the very basics right through to really quite advances. Accessify.com is brilliant because they’ve got of information but also a lot of forums as well so you can kind of talk with other guys getting to grips with it. I would point you at the source of the WCAG guidelines but actually they’re kind of not the best place to start but I mean everyone who knows about accessibility knows where that is anyway which is at w3.org/WAI. But yeah, WebAIM, Accessify and our site are good places to go.

Ryan: Fantastic! Well thank you very much for your time!

Robin: Great!

Ryan: It’s been a pleasure talking to you.

Robin: Thanks ever so.

Thanks goes to Todd Dietrich for transcribing this interview.

Back to top

Review: Migrating to Google Apps

It’s something we’d been considering for a while, we’d weighed up the pros and cons and finally took the plunge. The key benefits of Google Apps are huge amounts of storage, a quality web interface and considerable cost savings. There’s also the reassurance that Google is actively developing the product with regular updates and improvements that don’t require installing fresh software or waiting for a hosted service to upgrade. If you’re currently using POP to receive emails or are archiving locally, you’re running the risk of losing your history of emails, should a disaster befall your computer. Keeping emails in a centralised service and syncing with IMAP gives you the security of safe storage and the convenience of access from anywhere. This is where large storage allowances come in handy.

Preparing

Setting up an account is easy. Google offers a team version with fewer features than the premium, allowing an admin to create users, email lists and try out the service. This is also great for demoing the service. Google provide a test domain for sending and receiving emails using your regular style company email address (firstname.surname@). Depending on how big your organisation / company is, it’s worth testing out a few accounts across as many email clients as people run. It’ll help knowing off the top of your head where various settings are to save on support time later.

Migrating

One of the key features of the premium account is IMAP email import. This allowed us to pull emails from our current Exchange server straight to Google, server to server. You basically just provide Google with your current email login details and it takes care of everything. You can specify a bunch of email accounts to import at once, and if you have a super-admin login to your email you can grab everyones with one set of credentials. This didn’t work perfectly for us, a few accounts seemed to hang and never complete. If that happens, it’s worth removing emails from the server with large attachments and trying again. If all fails, the alternative method is to setup your Google account in your email client and just drag all your emails from one to the other. Might have to leave it going overnight if you have a big inbox! Once you’re ready all you have to do is point your domain MX record at Google and you’re done.
On top of the usual email setup there are a bunch of settings Google recommends for desktop clients to aid consistency with the web version. These help prevent duplicate folders for drafts, sent and trash cluttering up your interface.

Migrating Calendars and contacts is dead easy, Google provide tools to sync local calendars and contacts can be exported / imported.

Support

The biggest hurdle in a switch like this is gonna be support. Unsurprisingly, some people don’t like change, especially when it concerns services as critical to productivity as email. They’ll need reassurances that emails won’t go missing and everything will be as easy as it was before. There will be a short period where emails could end up going to either your old inbox or your new one, but as long as you check both for a couple of weeks post switch, you’ll be fine. We did see an email or two arriving at our old accounts a week after the switch, this is due to caching of MX records, not to worry though, they’ll propagate eventually.

A different way of working

My favourite features of working with Google Mail are archiving and labels. Labels work in the same way as folders, except an email can have several labels at once. This can cause some confusion when using a desktop client, as emails will appear in multiple folders. When an email is deleted from the inbox or any folder in a desktop client, it isn’t deleted on the server. It may still have other labels and will still exist in All Mail. To delete an email from a desktop client it has to be dragged to the Trash/Bin folder. This is great for keeping a clean inbox with current / unhandled with emails.
Another advantage to having all your emails on Google’s servers is search. However fast your computer is, you can’t match the speed at which Google can search your inbox for that elusive message from last year containing critical info. Instead of using a regular desktop client, you can take advantage of Chrome with Gears for a hybrid web client / desktop app. This allows you to keep the benefits of the desktop such as offline email access combined with the familiar web interface.

Thanks goes to Todd Dietrich for transcribing this interview.

Back to top

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

161. In or Out

On this week’s show: Paul announces Micro-Boagworld, we discuss the pros and cons of outsourcing web work and see what recommendation the Boagworld forum has to offer.

Play

Download this show.

Launch our podcast player

Housekeeping

For a while I have been toying with the idea of doing a Micro-podcast that works in a similar way to Twitter but with audio. It would provide the opportunity to share hits, tricks and reviews too short for the main show. My problem was that I needed an application which made this as easy as posting a tweet. Anything more and it would prove too demanding.

Fortunately a new iPhone application has launched that does exactly that. Called AudioBoo it allows you to record 3 minute audio snippets that then get posted to a website, twitter, facebook and a podcast feed.

I am therefore pleased to announce Micro-Boagworld…

View Micro-Boagworld posts here

Subscribe to the RSS feed here

Boagworld AudioBoo Homepage

Back to top

News

Pricing and projects

Alyssa Gregory has written two good posts this week both relating to the pricing of web projects.

The first post tackles the notoriously difficult subject of How To Estimate Time For A Project. After all, time is money.

Estimating how long a project will take is tricky and although this post doesn’t provide any magic formulas it does provide good solid advice.

As well as considering the obvious deliverables Alyssa also recommends time for project management, reviewing work, debugging and client turn around. Finally, she recommends adding a buffer for the unexpected.

Of course, she doesn’t discuss how all of this time translates into your final price. How much you charge is a matter of conjecture. However, in a second post she does explore a related subject – How To Raise Your Rates.

In this post, she handles the sensitive subject of how to tell a client that you will be raising your rates for future projects. She suggests five techniques you should employ…

  • Give Notice
  • Set a schedule (make increases annual for example)
  • Make it fair (keep the increments small and manageable by the client)
  • Send it in writing
  • Balance it out (Balance your increase with an incentive – e.g. a special, a one-time discount)

Its all good advice and important too. As your skills and experience increase, you will need to ensure your rates reflect that. Knowing how to hand those rate increases is vital if you want to keep your clients happy.

IE8 and IE6

Microsoft have announced that IE8 will be released via the Windows Automatic Update starting on the third week of April.

The final version of the browser has been available since March and yet adoption has been sluggish. Hopefully Automatic update will change this trend significantly. However, it does not guarantee universal adoption. Although the update will be marked as important users will not be forced to upgrade. In fact Microsoft has released a blocker toolkit so corporate users can avoid the update entirely.

Worst of all, it is likely that the update will impact the numbers using IE7 more than IE6. IE6 users tend to be hold outs and are unlikely to upgrade now when they did not upgrade to IE7.

The only hope is that many IT departments have a policy of running a version behind the current release. If that is the case, the arrival of IE8 may encourage some of them to adopt IE7.

The entire web design community is keen to reduce its level of support for IE6 and hopefully this update will allow that. In fact, another post this week entitled – 10 Cool Things We’ll Be Able To Do Once IE6 Is Dead – points out just what a wonderful world it would be.

Once IE6 is gone we will be able to…

  • Use child selectors
  • Make full use of 24-bit PNGs
  • Use attribute selectors
  • Use a wider range of display properties
  • Use min-width and max-width
  • Throw away 90% of CSS hacks (and 90% of the reasons for needing them!)
  • Add abbreviations that everyone can see
  • Trust z-index again
  • Save time and money
  • Enjoy ourselves again!

Simple and impressive design techniques

Last week I was doing a consultancy clinic with a developer who wanted advice on designing his website. He was a great coder but did not have much experience designing.

Although I recommended The Principles of Beautiful Web Design by Jason Beaird it would have been great to point him at the latest Smashing Magazine post – 10 Simple and Impressive Design Techniques.

This post has some easy to implement techniques that are ideal for developers trying to improve their design skills. Techniques include…

  • Adding Contrast
  • Using Gradients
  • A Better Use of Colour
  • Improved Letter Spacing
  • Changing Case
  • Use of Anti-Aliasing
  • Adding Imperfections
  • Implementing blurring
  • Careful Alignment
  • Trimming the Fat

Read the whole articles for more details and great examples of these techniques in action.

Influencing user behaviour

A big part of good design is guiding the user to complete the actions you want. Influencing user behaviour can be achieved through a variety of techniques. However, it can often be hard to know where to begin.

One resource that might help you influence user behaviour is The Design with Intent Toolkit. This is essentially a printable ‘cheat sheet’ that suggests a variety of techniques you can apply to your projects.

The techniques do not just apply to web design but all aspects of design. Consequently not all of the techniques will apply. However a lot do, ranging from the use of metaphors to setting up good default options.

Some of the techniques contained in this cheat sheet are also beautifully demonstrated in another post I wanted to mention. Entitled 12 Excellent Examples of "Lazy Registration" it addresses the problem of user signup.

Essentially it is a post that showcases methods for getting around the problem of user registration. As the post itself says…

Signup forms have long irked the casual visitor. During the process of discovery, nobody wants to stop and fill out details before they can "unlock" the rest of the site’s potential.

It has certainly been my experience that signup forms are a barrier and so it is interesting to see how different web applications have overcome the problem.

Back to top

Feature: When to outsource web work

Your in charge of your organisations website. It has become moderately successful and now you have a decision. Do you hire a full time web designer or outsource to a web design agency?

Read the full article

Back to top

Listeners feedback:

In this week’s listener feedback section we look at a series of recommendations from the Boagworld forum…

A good introduction to Javascript

Jake writes: I’m curious as to whether or not anyone on the forum has strong opinions on a good introductory javascript book? And by introductory I mean something that’s more about initial learning steps such as syntax, etc. and then talks about best practices.

Doug answers: You might want to look at one of the books out for coding in jQuery, if you’re planning on going in that direction anyway. As for how to learn javascript I usually push people towards Lynda.com.

Matt also replies: Awesome book – DOM Scripting – I’d start with this before jQuery as I think you need some javascript knowledge to use jQuery to its fullest.

A good but free survey tool

Simon asks: I want to create some simple(ish) survey’s to get clients to fill out after a training session. I know of some paid for solutions, but does anyone have any suggestions for any free tools?

Laura replies: For something short, I’d use the survey function on PollDaddy. You can get up to 100 responses, and I think ten questions. Ten isn’t many, but you can do conditional branching for free, which is rare, and good.

I’ve also used SurveyMonkey before, it’s clean and simple.

A review of Clicktales

Peter shares his experiences of Clicktales…

On the recommendation of Paul, I tired out ClickTales.com; and I have to say the results have been interesting (sad, in my personal case) to say the least.

For those of you not in "the know", or missed episode 141, ClickTales is an app that lets you record and review the actions of your website’s visitors. And I’d agree with Paul: inexpensive, revealing, but limited in essence because you can witness what a user goes through.

In my case it was most effective because my results have been telling me that I should redesign my website’s structure completely… so I decided I should start from scratch all together and redesign. :)

Web Design for ROI

Bill reviews Web Design for ROI by Lance Loveday & Sandra Niehaus…

Each year I find one or two books that really stand out. This book, Web Design for ROI, changed the way I look at current eCommerce projects and helped me identify better strategies for building web sites.

Rich adds: I agree this is an excellent book.

Not too much new for a seasoned pro like myself, but I did still learn a fair bit and I’d recommend it to anyone with an interest in websites that make money.

Pro Paypal e-commerce

Finally, Ian shares an extensive review of the book ‘Pro Paypal e-commerce‘. Ian writes a very thorough review but here are a couple of highlights.

I thought this was a great read. It’s not often you finish a book and feel confident you have all the information you’re going to need to complete your project. The book isn’t just technical but also has lots of useful nuggets on business practices and background on payment systems in general for those that are unfamiliar with them at this level.

I feel confident in recommending this book to anyone who is involved with developing E-commerce systems or is going to be in the future. The author Damon Williams has a very readable style that is mercifully faux-humour free but never dull and explains everything clearly and concisely and despite its relatively low page count at 260 pages or so, still manages to cover a lot of ground without ever feeling as if it’s being too terse.

For more reviews about everything from web design books to software visit the Boagworld forum. We are also going to do some cool new stuff on the forum over the coming weeks. Keep an eye on it. We have already added a Jobs category for those of you who are looking to hire a web designer, so be sure to check that out.

Back to top

 

159. Special Guest

On this week’s show: The northerners are back with special guest host Sarah Parmenter.

Play

On this week’s show: The northerners are back with special guest host Sarah Parmenter. We answer your questions on how to quote for projects and whether using off-the-shelf software is wrong and we have a chat with Sarah on her experiences in the industry and the difference between developing for clients and developing for yourself.

Download this show.

Launch our podcast player

News

Alkaline

Our first story for is a new product by the guys over at Litmus, you may have come across their Browser and Email testing apps before and they’ve just released a new Mac app called Alkaline, this is a Mac front-end to their online browser testing suite and lets you test your website designs across not only 17 different Windows browsers which they mention on the site, but also all of the Mac and Linux browsers that the online Litmus services test against.

Alkaline grabs screenshots of your site rendered in all major browsers, the number of which depends on your chosen pricing plan, It’s free to test against IE7 and FF2 and if you need to test across all browsers, it’s available under the standard Litmus pricing plan which offers both individual and team monthly subscriptions, and a handy day-pass if you only do this kind of testing every now & then. Litmus also stores a history of your screenshots so you can see the evolution of your design and also reports your HTML and CSS errors.

There’s plugins available for Textmate and Coda, and you can preview the sites right inside Coda 1.6’s preview window, however because Alkaline grabs screenshots of your pages it’s not possible to do any live updating of CSS and see the results in all browsers.

Paul at Litmus also informed me that throughout April, they’re offering full access to the Litmus service for free on Weekends, so on Saturday and Sunday you can test across all the browsers (using Alkaline or the Litmus site) and all the email clients, even if you only have a free account.

16 design tools for prototyping and wireframing

It’s no secret that prototyping or wireframing can really help in the overall design process, and there’s now a wide range of tools on the market that aim to help you in this process. A recent Sitepoint article lists 16 of these tools and rates their usefulness.

The list of tools is good, convering favourites such as Omnigraffle, Axure and Balsamiq to other applications which can be used to wireframe such as Powerpoint or Keynote. If you’ve not looked into these kind of apps before then do check it out, they also lists the price of the apps so you’re sure to find something within your budget.

10 Lessons every freelancer should learn

If I remember rightly, I came across this link from one of the people I follow on Twitter and it covers some killer tips on how to be a better freelancer, covering everything from self promotion, organising your workflow, finding time for your own projects, keeping motivated and how to charge appropriately, this is a must-read for anyone considering freelancing, or indeed those already in the freelance world.

Some great tips come in the way of keeping customers happy and generating repeat business and I’d like to squeeze in a forth link here to another Sitepoint article (sorry) which covers how to upsell additional services to clients as a freelancer you should be looking at maximising the amount of money you can make from each project through added services, whether it’s packaged services such as hosting, logo design or business cards.

I don’t really freelance but I do manage a couple of small sites I built on a freelance basis, and I get recurring revenue by hosting them on a small reseller account. I’ve also been able to tempt the customers into paying for a years hosting rather than a monthly cost by rounding the amount down to an even figure, which while it’s only a couple of pounds cheaper, always got chosen.

Back to top

Interview: Sarah Parmenter on the difference between developing for clients and developing for yourself

Ryan: OK, so onto our interview section and what we are going to do today is an off-the-cuff interview with you, Sarah, er, so for people who don’t know who you are, er, do you want to introduce yourself.

Sarah: Sure, my name’s Sarah, I’m based in Leigh On Sea in sunny old Essex and I own a company called ‘You Know Who Design‘ that’s been going for about nearly seven years now, um, and I just do web development and sometimes I dabble in a bit of graphic design. Um, when I started off when I was younger, it was more graphic design than web but now it’s purely web and, er, yeah, it’s what I love doing.

Ryan: Right, OK, and we think a good topic to have a chat with you about would be the difference between developing for clients and developing for yourself.

Sarah: Yup

Ryan: So, er, let’s start off. Do you give yourself time to work on personal projects?

Sarah: I do, but not as much as other people do; whenever I see on Twitter, there’s a lot of people who have a lot of personal projects on the go and it generally tens to be on a Friday as well (all laugh), you see Twitter on a Friday, generally full of people, um, doing their own stuff but I tend to, if I’m doing something I tend to, maybe, give myself a couple of hours if I’ve got a spare, if I’m waiting for a client to get back to me on something and I can’t proceed with anything. I put client work first, and I don’t know if that’s a good thing or a bad thing, but that’s the thing that pays the bills, so, um, they always come first and if I’ve got a bit of downtime, I’ve always got projects that I want to work on, but possibly haven’t got the amount of time to dedicate to them as I’d like. I think it’s probably the case with everyone.

Sarah: Yeah, absolutely. You get some time, don’t you, through work?

Paul: Er, well we did sweet talk our boss into giving us 5% time, which was supposed to be like Google’s 20% time, where they get a whole day to work on personal projects, if it benefits the company.

Sarah: Really?

Paul: Yeah, well we got, like an afternoon on a Friday, which is kind of sidelined at the moment.

Ryan: To spend in the pub (laughs)

Paul: That’s personal projects, I’m sure. No, it’s kind of sidelined at the moment, we’ve got some major projects on which are taking up all our time with some heavy deadlines, so we’ve had to shuffle that. Hopefully we’ll start to get that back over the summer and work on some cool stuff instead of the business stuff.

Sarah: I think it’s rea
lly difficult, because obviously your client stuff does have to come first, and even if you’ve dedicated an afternoon or a couple of hours, if something comes up that morning, or if you’ve got a problem that needs sorting, unfortunately, it’s just the way it is, your client work has got to come first.

Paul: Yeah, pays the bills.

Sarah: I mean, a lot of personal projects, a lot of people’s personal projects, do end up very lucrative for them, and you could argue that it’s just as lucrative to just go along with your own personal projects, but I think in general, most people would find that their client work would, er, would have to come first.

Paul: We’re trying to convince our boss to let us build, er, an iPhone app

Sarah: Really?

Paul: and sell it on the app store. He’s not having none of it, because we’ve told him we all need iPhones to test it on, he just won’t buy them for us.

Ryan: and a mac to develop on

Paul: a Mac to develop on, yeah. For some reason, he’s not warming to the idea.

Ryan: he can’t understand the thirty grand, you know, outlay to…

Paul: We’ll easily make that in a day on the app store (all laugh), I keep telling him this.

Sarah: the app store!

Paul: Yeah, the app’s 50p, you know…

Ryan: Er, completely sidetracked there, erm. What differences do you find, er, between developing for clients and developing for yourself? What major differences do you find?

Sarah: I find, when I’m doing stuff for myself, I’m actually a lot less decisive on stuff. I sort of, because I’m immersed in, maybe my own branding, or sometimes it’s really good to look at it from an outsider’s point of view. If you’re doing stuff for clients, I think sometimes it’s easier to look at stuff and go ‘well, that needs to go there and that needs to be there to catch someone’s attention’ or you need to move that or make that a different colour, and when it’s your own stuff I think you tend to be either really creative and you don’t really care if you get stuff wrong, or if, do you know what I mean? It’s more, sort of… the boundaries aren’t there, you’re not time-constrained, there’s no brief, you just go off on one, doing whatever you want, whereas with client stuff, there tends to be a bit more, erm, what’s the word, consistency across everything, and I find, personally, when I’m doing my personal stuff, I could sit in front of Photoshop pushing something from the left-hand side of the screen to the right-hand side of the screen for two hours, wondering whether it looks right or not, whereas if it’s a client site, I think ‘right, I have to make a decision on this – where would this go, or where would it be best placed, and you make a decision and you move on, because otherwise the more time you, you take going backwards and forwards is, er, less money that you’re earning, so I think I tend to be more decisive with client work and with my own I tend to be a bit more, erm, easy-going and, er, possibly a bit more creative, in the sense of trying things that I haven’t tried before. Erm, yeah, I think it’s just good to be (pause – all laugh).

Paul: I think personal projects give you time to play with the stuff that you wouldn’t normally risk putting into a client’s site, things that might take you a week to figure out.

Sarah: That’s what I, sorry a man just walked past my window in a pair of shorts, as I was answering that question, which completely put me off,

Ryan: Was it an ugly man, or a good-looking man?

Sarah: No, he was an old man.

Ryan: Oh, right. OK

Sarah: I wondered if he had dementia or something, and he thought it was summer.

Paul: Was he in just a pair of shorts?

Sarah: Yeah

Ryan: A pair of shorts and a smile?

Sarah: No, and a newspaper.

Paul: Strategically placed.

Sarah: It just completely sidetracked my thinking pattern, then.

Paul: That’s OK.

Sarah: Oh, sorry.

Ryan: Where were we? So, which do you prefer, developing for clients, because obviously you’re doing that every day, or do you prefer developing for yourself?

Sarah: I actually prefer developing for clients, erm. I prefer getting a brief and thinking ‘right, how can I best interpret this brief, and get the objectives that they want, er, they want to get out of this website, how can I do that in the best possible way?’ Whereas, I think that when you do stuff for yourself, you don’t necessarily write down a brief as strict as you’d get when a client is sending through something. So, I, I actually prefer developing for clients, I really like, I don’t, I really like doing all the end, getting to the end product with a client. I think I get more satisfaction out of that than I do when I’ve done it for myself, because I still look at it in a very critical point of view, I still think, ‘oh well, maybe I could make those buttons a slightly different hint of green and it will look better’; whereas, with client stuff I think it’s just all about decision making, I think you tend to make more decisive decisions with client work than you do with your own. You think of your own as an ever-ongoing project that you can forever tweak and make changes to, whereas with client stuff you, once it’s live, it’s pretty much. You might get to update…

Ryan: Yeah, it’s difficult to come back, isn’t it?

Sarah: Yeah. Exactly. So I much prefer developing for clients, when they’re nice clients!

Ryan: Yes, we only like the nice clients.

Sarah: Yes, we all like nice clients.

Ryan: But do you think personal development time is important, do you think it’s important to develop your own projects?

Sarah: Yeah, I do I think it’s important from the sense of being, when I personally do lots of my own stuff, I find that I tend to be a bit more, erm, creative, in the sense of I’ll try stuff that I might think ‘oh, that’ll look awful, I won’t bother doing that for a client site’, but I might try it and actually surprise myself and think ‘oh no, actually, that’s a really good technique to use’ or do something a bit different because you’re not constrained by time when you’re doing stuff for yourself, necessarily. But I think, I do think it’s really important to do your own, your own thing, because I think it’s also a learning curve, you might try out different systems to use, you might decide to learn something, you might decide to use something like, if you’ve never used WordPress, you might decide to go and bolt WordPress onto your site just to see how you get on with it, you might try different apps. I think it’s important, because it frees the mind to use other things that you might not necessarily get to use when you’re in an office environment or, or perhaps even day to day because you don’t have the time to learn it, so I do think it’s important, but I don’t think it’s the, er, the be all and end all of everything.

Ryan: I think, er, a good tie-in question, not specifically about developing for clients and, er, yourself. Erm, keeping it with blogs and stuff, do you allot yourself a, like, time to read your feeds and, er, things like that, and to keep up with them, because I’ve been so busy in the last two weeks, my feeds have just gone like – you know when Google Reader says ’1000+’ and that’s it, it’s just stopped counting, it’s gone ‘look man, give up on these feeds, you’ve passed a thousand.’

Paul: You need to declare feed bankruptcy, I think.

Sarah: I tend to do this really annoying thing, where if someone posts a good link on Twitter, I’ll open it up in a browser window in a tab, and then if someone else posts, I’ll open that in another browser tab, so I’ve got about 100 tabs open in Firefox that I never get round to, to looking at, which slows the whole thing down and end up having to then bookmark them in a little folder called ‘Interesting Links’, that I never get around to reading.

Ryan: When you look back, they’re four years old and completely out of date.

Sarah: Yeah.

Paul: The shocking thing, because I do the research for the, the Boagworld news and push it all through the links, I probably churn through 150-200 feeds a day (Sarah: gasp), which is so many feeds that I haven’t got time to read them, which is shocking; I get so much information, so many good things that I’m pushing out to other people, that I just don’t have time to read them, there’s too much information.

Sarah: Do you skim-read them?

Paul: I do, I skim-read, I usually read the first few paragraphs, just to see what the article was about, clip out the interesting bits of text for the previews and then send it on it’s merry way out of Twitter and then I’ve written a function that, every time someone clicks a link on Twitter, it kind of lets me know, tracks back and so I can see, right, which… and I watch it, I’ve got live stats and streaming on one of the spare monitors, so as this link goes out onto Twitter, I can see it being read, so I can actually what’s actually what the people are reading, what’s been interesting that way, instead of me thinking ‘that’s genius, we’ll use that on the show’. It’s actually kind of crowd-sourcing information like this.

Sarah: Yeah, that’s a better way of doing it, isn’t it? It’s more productive.

Paul: Yeah, but I do the same, it’s like something I really want to read, I’ll open it in a tab and I’ve got the permatabs thing on Firefox, so I’ll set it so that I can’t delete it until I’ve read through it, but usually it just ends up there for weeks.

Ryan: I tag them in Delicious, so I’ve got like tutorials and stuff that I think ‘oh, that looks fantastic’ and I’ve got a ‘to try’ thing, which is slowly increasing in number and I never sit down and have a go through the tutorials or anything like that.

Paul: Yeah, I think the key is to follow a few key, key things and not try and follow too much information, and then just look at what everyone else around you, the people that you respect, in what they’re sending out and try not to get overwhelmed because there’s a lot of information out there.

Sarah: Dead right, there’s so many, it seems to be a new thing on Twitter to actually post those sort of links, day in, day out, which is really handy because there’s a lot of people who have a lot of good stuff on Twitter.

Paul: Oh twitter.com/boaglinks is the premier source of all this information, of course.

Sarah: Of course! (all laugh)

Ryan: Er, OK, so I think the final question to you, then Sarah, is, erm, what inspires you to pursue your personal projects?

Sarah: Erm, oh, that’s a difficult one. I kind of get inspired in strange places, when I came back from the Future of Web Design and Future of Web Apps, I kind of get inspired by other people, not necessarily the apps that they’re producing, or work that other people are producing, but I sort of feed off other people’s energy, strangely. If other people come away from something really, erm, excited about something, I tend to think ‘oh, yeah, that sounds like a good, like when Adobe Air came out, that was a kind of a buzz around that for a while and it got me thinking ‘um, what can you develop with that that would, you know, might be interesting to other people or that other, that other web designers might want to use?’ but that’s kind of what happened with my own app, Olive, it’s kind of on the backburner at the moment, but there was a problem that came up at work and it was coming up time and time again and I thought ‘there must be something out there that actually addresses this issue of, of erm, client management, so went around, couldn’t find anything and then ended up building it, and it was actually built more for me, rather than other people and when I sent it out to a few people, they really liked, and got into using it and, erm, it’s just kind of handy if you build something that’s, that’s great for you, but equally other people find interesting as well. It’s, erm, it’s a win-win, really. I mean, I use it all the time, and there’s other people who do as well, bu
t at the moment it’s, er, needs a lot of updating, because I’ve been so busy with client stuff, but maybe I should have put that first, but clients pay the bills unfortunately.

Ryan: Absolutely, absolutely. I think I, erm, I think I overthink things, so I think to myself ‘oh, I’d love, love for this to exist’ and then I think to myself ‘I could spend the next three years developing that’ and, and someone would do it better than me, you know and just finding time as well.

Paul: Yeah, I think it’s right what Sarah says, you’ve got to scratch your own itch, you’ve got to find something that you would want to use so much that you would spend that amount of time to build it, and then if it’s for you, it doesn’t really matter that much if no one else wants to use it because it does something that you want it to do.

Sarah: Exactly.

Paul: And it’s a learning process, you can choose any language. If you want to learn a new language, if you want to learn Django or Python or something, you could build it in that, just to learn that language, erm, and then send it out in the world, see if people use it.

Sarah: Exactly, that’s kind of what happened. I was learning quite a bit about Ruby at the time, because Olive, Olive’s built on the Ruby on Rails platform and it was so interesting just to get an insight into how different developing with Ruby is compared to PHP. That was just worth it in it’s own right, really because I find that I learn much better with real world examples rather than looking at a load of code. I find that if, if I ever get something like that, I have to take it apart, almost, and then try and work out how to put it all back together so that it works. I think I learn better by doing that and a lot of people do. If you going on to any of the tutorial sites now, there tends to be a lean towards developing an app or something small; I think on the Nettuts at the moment, website – do you guys know that one?

Ryan: Er, yes.

Paul: Yes, ah the Nettuts, oh yeah.

Sarah: Yeah, there’s a, there’s a sway towards actually building like login systems from scratch and things like that on there, where it’s actually showing you the code and then showing you how it works in real world situations which I think is really good, for me, I don’t know about you two, but I personally prefer picking stuff apart (laughs).

Paul: Yeah, absolutely. I usually start at the very lowest common denominator, like a user access system, and I’m learning CakePHP now which is, kind of a Ruby clone for PHP and instead of using their in-build methods which will do it all for you with build this, just write these classes and it’s like ‘No, it’s like the most basic thing I can do in this language, let me learn how to do it’, and I’ll learn that way.

Sarah: Yeah, yeah, that’s, I think when, erm, when I looked at using Ruby for, er, for Olive, I didn’t build it, it was built by a guy, a brilliant guy, Adam Cooke, but I was still really interested to know how it would work and how Ruby is different and the first thing I did was built a, erm, a basic recipe, sort of database thing with, it was off of a tutorial site and I think it’s great if it gives you just a little bit of insight into something that you might not have already realised or known about building your own stuff, then I think you have that sort of passion to go forward with it, you have that confidence to then think ‘oh, well I’ve done that tiny thing, maybe I can do something else with it. Whereas, if you’re doing it for clients, you don’t, you wouldn’t really venture into using another programming language that you weren’t comfortable with on a client site, unless you were a bit silly.

Ryan: Absolutely, absolutely. Paul told me a really funny thing, in between, er, when he told me he was learning CakePHP. He said, I’m trying to remember what it was that you told me, it was ‘if Ruby’s French, CakePHP is French with an English accent’

Paul: Yeah, its kind of the same, just not quite as elegant.

Ryan: Yeah, I thought that was fantastic, that was so fantastic, I made it into, I have some rotating quotes on my web-site, and that made it into my quotes, that was fantastic.

Much thanks goes to Simon Douglas for transcribing this interview so quickly!

Back to top

Listeners Questions:

Is Using Off-The-Shelf Software Wrong?

Jon Writes:

I guess my question is about the use of off-the-shelf software. I must admit I feel slightly uncomfortable using it at all. As a decent sized agency of 9 people, with our own very capable developers, I can’t escape the nagging feeling that we are “cheating” slightly by using an off-the-shelf platform at all. Although we adhere strictly to licensing requirements, most of our customers do not know that their stores are powered by what is essentially a ready made system, which we then skin, configure and populate.

What are your views about off-the-shelf stuff and the pros and cons of using it on client work?

Thanks and keep up the good work!

I think the main source of your discomfort is the fact that your clients don’t know you are using off-the-shelf software for their projects, which raises the question why not?

Your clients have approached you to provide them with a service they cannot perform themselves. Whether that is building a system from scratch or integrating and customizing an third-party system to meet their needs, you are still the expert.

There are very powerful off-the-shelf e-commerce systems, blog engines and CMS’s that should be thought of as weapons in your arsenal rather than “cheating”. Explaining to your clients why you are going to use a particular system for their project can be hugely beneficial. It shows that you don’t want to waist their time and money re-inventing the wheel.

Therefore, the pro’s are:

  • It meets there project aims
  • You are experienced with the system
  • It’s supported by a third-party team of developers who are dedicated to that one product and includes a vast community of other users who support each other
  • It can be implemented in a shorter period of time than building from scratch (i.e. cheaper for the client all round)
  • It’s a tried and tested system (You could even give your client a list of other successful companies that are using it)
  • It is also more than likely that a third-party product that has been around for several years is a more reliable and robust system than the one you develop in a couple of months.

That said there are always inherent risks in using anything third-party, whether it be API’s, frameworks, libraries or software and I have a general rule of thumb that I try to always adhere
to:

Don’t implement something you don’t understand!

If it breaks, it costs you time and money to fix the problem, and that’s once you’ve diagnosed what that problem is. The longer it takes you to fix the higher the risk that your client is going to lose confidence in your ability to deliver.

So take the time to do some dissecting and learn how to use your tools as fully as you can prior to implementation.

How do you price and quote different projects?

Jamie who’s just started up his own web development company is having trouble working out how to price and quote different projects and wonders if we have any tips that we’ve found helpful when quoting for clients?

One of the hardest things when starting out, and even for established businesses is finding your feet with pricing. I think the biggest lesson I learnt is not to under-quote just to gain the business, even though you are in need of clients. It makes no business sense to work for peanuts, you’re better holding off for a client who respects the work you do and pays honestly for that work rather than being a design machine churning out work just to make ends meet.

The other important thing I learnt in my first year of business is, clients who barter with your prices are generally bad news. We’ve all heard it, “if you can do this one at x-amount we have plenty of other work in the pipeline we want to use you for” – while this sounds tempting, 9 times out of 10 the promise of the further work never comes off, even if it does they would normally expect further work at the “cheap” price they paid you before, as you accepted it so you must be happy to work for that right? Wrong.

I always find it helpful to ask the client for a ballpark figure prior to laying out the full proposal, this negates you wasting time putting together the proposal of cost plus terms and conditions only to find the client wants to build ebay on a budget of £300.

I also find ballpark figures helpful because I find it easier to provide the client with options, even if they have a relatively small budget there is normally still something you can do, even if it is very basic – but it gives you a starting block to explain if their budget was a bigger they could bolt on a CMS system or have a better shopping cart, then explain the benefits of those. You’d be suprised how much the budgets are then increased by.

It’s all about providing the client with the best solution for their project at the end of the day, and if you think the best solution would be bolting on Expression Engine or the like, you need to give the client the choice to do this and expand their budget if necessary rather than cut them out of the equation because of it, it’s all about educating the client.

158. Home

On this week’s show: We share the highlights of SXSW, discuss home working, and interview Rob Borley about project management.

Play

Download this show.

Launch our podcast player

Housekeeping

Headscape still recruiting!

Headscape is still recruiting. We are looking for an enthusiastic, talented developer to join our team, working from of our offices in Hampshire. For more information see the job advertisement on Boagworld.

Back to top

News and events

The best of SXSW

Well, SXSW is over and I am back in the UK. But what happened at the conference? What was the big news this year?

That is actually a hard question to answer. There is so much at SXSW that it is almost impossible to get a sense of everything that is going on. Even if you could attend every panel that isn’t always where the real action takes place.

The real conference often happens at the parties and in the corridors. In fact, more than one spontaneous panel was started via Twitter, thanks to official panels being full.

Panels this year ranged from the downright dull to all out flame wars! One that I unfortunately missed was "Is Spec Work Evil!". However, Marcus attended and tells me it was particularly fiery. Personally, I am very much against speculative work as I have said before. However, not everybody would agree and the panel seemed to reflect this diverse opinion.

One panel I did make was Paul Annett’s amazingly inspirational talk on Easter Eggs and design twists. The talk focused on the little things you can add to your site to make users go ‘oooo that’s clever’.

Too often I neglect such ‘bells and whistles’ in favour of usability and accessibility. Paul demonstrated how these different priorities can sit side by side without compromising each other. He showed some great examples including the hidden arrow in the FedEx logo and the vines on the Silverback website.

fedex logo

The final panel I want to mention is ‘Being a UX Team of One‘ by Leah Burley of Adaptive Path. To be honest the title of this one was a little misleading (at least from my perspective).

What I took away from this session was that design should not be a solitary activity, solely reliant on the creative inspiration of one individual. Leah seemed to be arguing for a more collaborative approach especially at the wireframe stage. She proposed that all of those involved in the project should sit down together and hammer out the wireframe designs.

This addressed two separate problems we have been having at Headscape

  • The developers concerns at not being involved early enough in the process.
  • The question of who should do wireframing – the designer or the IA person.

Best of all Leah’s presentation was very pragmatic. She provided lots of practical approaches that encourage idea generation and collaboration. I highly recommend listening to the podcast of this when it is released.

Browser testing and IE6

In other news, there seems to have been a lot written about browsers this past week. Three stories in particular caught my eye…

  • .net Magazine seems to have hopped on the ‘dump IE6′ bandwagon – My opinion is the same as that of Jeremy Keith as expressed in last weeks show. It is not a matter of dropping IE6. We should instead being deciding whether we wish to offer it the same level of support as modern browsers. I am entirely in favour of providing IE6 with a basic stylesheet that avoids its shortcomings. However, I dislike the idea of dropping it entirely.
  • Microsoft has released SuperPreview this week that allows Windows users to test different versions of IE simultaneously. I have to say this looks like an impressive tool. It allows you to view IE6 and IE7 side by side. It also has many other tools that may also be useful. Support for IE8 and other browsers will follow and although it is currently in beta, I think it will quickly become an indispensable tool for Windows based web designers. Just a shame there is no mac support!
  • Finally, Sitepoint have written a brief outline of how to create the perfect browser testing suite. Ideally for those starting out it lists various online browser simulators, virtual machines and desktop browser emulators.

Browser testing continues to be a pain in the neck and I for one would be willing to pay for a decent way of streamlining this whole process. This is especially true now that IE8 has been officially released and we have another browser to add into the mix.

Screenshot of Superpreview

A simplicity case study

A few weeks ago I wrote about the importance of simplifying your website. Well, this week Gerry McGovern has written the perfect case study to support the argument I was putting forward.

Removing poor quality content increases customer satisfaction‘ talks about how the Microsoft website consists of a staggering 10 millions pages. Of those pages 3 million have never been viewed!

The post goes on to explain how the Microsoft Office team took a different approach with their site by removing irrelevant pages. According to McGovern…

By weeding the garden, the top task pages became easier to find. But just as importantly it became harder to find a minor task page when you were looking for a top task page.

In short, removing pages reduced noise. Disturbing though it sounds, I think we could all learn something from Microsoft’s example.

An introduction to Microformats

My final post today comes from Richard Rutter’s blog. It is basically an introduction to Microformats aimed at the non-geek. He wrote the post because he recently found himself trying to explain microformats to a client and could not think of a good post that covered the subject from their perspective.

Personally, I am not sure it is necessary to tell a client you are implementing Microformats. The cost of adding them is so small and the benefits so hard to explain, that you maybe better off just doing it.

That said, this is an excellent post and if you are struggling to understand the point of Microformats, this is certainly worth reading.

Back to top

Interview: Rob Borley on Project Management

Paul: So, joining me today is Mr. Rob Borley. Hello Rob.

Rob: Hi Paul, how are you doing?

Paul: Very well indeed. Good to have you on the show. It’s been a little while.

Rob: It has, It has. It’s weird hearing the show above you, um rather than being below.

Paul: Oh yes, because you sit upstairs, don’t you?

Rob: Indeed.

Paul: Do you actually hear it?

Rob: I do. It’s like have a little base bin ?

Paul: Awh. So, um, we have kind of been thinking for a little while that we need to get someone on the show to talk about project management. And the idea was we’d get some high profile web design project manager to come in and talk about web design project management. Then I realised, um, that I can’t actually think of any. You know, I really don’t know of any kind of web design project managers out there, other than obviously the people that work at Headscape.

Rob: Well, maybe there’s a gap in the market.

Paul: I think there is a gap in the market.

Rob: (unintelligible) celebrity project manager.

Paul: Well I think that’s somewhat of an oxymoron, but setting that aside, lets shift around a bit, yeah, so, um, so we thought, lets get you on the show. Um, now, you’re quite and interesting case because you started of as a techie.

Rob: Yes.

Paul: And you became a project manager.

Rob: Yes.

Paul: And, so, um, let’s start by talking about the role of project manager. How would you describe your core role? What is it that you do? I should know this I guess.

Rob: Well, you mean other than manage projects.

Paul: Ok, you just have to make a joke out of it. But you know what I’m getting at.

Rob: Yeah yeah. I mean, I guess, um, the main thing that we do is shovel shit, really. We deal with crap. You know, the main thing project manager would do is a filter between clients and the production team for the project. I mean, there are a couple of stages I guess. So you’ve got the planning part of the job, which is essentially working out what it is you need to do, um, making sure you got the results to do it, plotting a nice time line so they can all fit as far as having deadline. And then you’ve got the people said, because really project management is a people job. You need to know how to get the most out of all the people that are in your project team, um including the client. You need to include the client in your thinking, always. Yah, that’s essentially what we do.

Paul: Yah. It’s a people person thing. I always thought you were so charasmatic. Ok, so, I mean, I guess the question is, if you look at the kind of, if you look at Headscape, and the way that we’re organised, we’ve got four developers, four designers, and three project managers. I mean, that’s a lot of project managers. And, you know the question is, why, why have project mangers at all? Why couldn’t the designers and the developers do the job? Why couldn’t it be spread across multiple people? Justify you exsistance, Rob.

Rob: Yeah, this question kind of makes me nervous here. I feel like I’m re-interviewing for my own job. Not that I interviewed in the first place, but, I guess in one sense, if you were in a small project environment, you could almost get away with one person. If, you know, its a one person job, you could get away with them managing themselves for a limited amount of time. Um, but, as soon as you get beyond jobs which are more than one person, um, and go on for an extended period of time, you start needing to provide some glue to stick things together. You need someone whose got an overview of everything that’s going on. You know, the developers have got a very developer mindset about the way things happen. Designers are the same way, they know about the design stuff. Um, but actually translating what the client wants and feeding that into both areas and bring them together is what’s missing, if you don’t have a project manager.

Paul: So, to some degree, project management becomes necessary with scale. The bigger the projects, and the more complex the projects, then the more a need for a dedicated project manager.

Rob: Yeah, definitely. I mean, I guess the real role of a project manager in these situations is the facilitator. You’ve got all of these tools which are basically your resources, your developers, your designers, um, and you need to be able to enable them to work effectively together to produce what the end product is going to be.

Paul: So here’s a question that I didn’t pre-give you, in advance, which is always the best type. Why, why, why become a project manager? What made you – because you were heading up our technical development team, you were, you know, you were doing very well. Why did you feel the need to get involved in what you call shit shoveling?

Rob: Well, I think my main motivation was, Headscape was growing, and we started employing all of these younger, more dynamic, much more talented, better looking developers, that were basically going to show me up. So I figured that before I got shown in true light that I was going to need to move somewhere else. Um, no, well that’s partly true. Really, I think, its the people’s aspect that I’m really interested in. A good project manager is someone who is able to understand how his resources or how her resources work and how your clients work, and joining the two together. Um, while I quite like writing code really, I’m not passionate about it. So that side of it, you know, I reached as far as I wanted to go, and I really enjoy the people thing.

Paul: Ok. So what other, I mean, what other kind of characteristics do you think make a good project manager, obviously the people skills you talked about, what other, I mean if there are other people out there going well actually I’m not that passionate about coding, or I’m not that passionate about design, but I am passionate about the web, I do like the web design process, perhaps project management is the way I ought to be going. You know, what skills, what characteristics do they need, what personality traits do they need?

Rob: I think well, you need to be able to plan. Um, you know, planning is very very important. If you plan well, then your project will usually go well.

Paul: I like the cornification in that.

Rob: You have to be able to predict the future is helpful.

Paul: Yes.

Rob: A major part of what we de in the planning stages is assessing risk. You know, so, we’ve got what we’re starting with, we’ve got what we want to achieve, and we’ve got a time scale, now we need to work out what things might appear that are unforeseen, which are going to affect us reaching the time scale. So being able to foresee the future is helpful. Um, and so planning, being quite analytical and thorough. The logical background I have from being a programmer, a developer, is really helpful because you have to approach project management in a very analytical way, to make sure you don’t miss things. So there’s that side of it. And then there’s communication skills. You not only need to be able to communicate with a client affectively so they show that you understand what they want, um, and they understand where you are with the project, and they’re happy because a happy client makes everyone happy. But you also then need to communicate that with the various personalities in your team. You know, whether thats the developers locked up in a dark room with no social skills, or the crazy charismatic designers who…

Paul: You’ve just gone with stereotypes that so don’t apply. If I look at our team, no offense to our designers, they’re the ones that sit in the darkened room with their nose right pressed against the screen. And the developers are the ones that are crazy and never do any work.

Rob: (unintelligible) something about reading personalities. No, but you see my point. You’ve got these almost extremes, especially in the web, I guess, in the web world, you’ve got these extremes of personailities which somehow you need to be able to communicate with and put it all together and so, yeah, that’s an important skill. I think the third area, is to be quite relaxed about life. Because things will go wrong and do go wrong, it doesn’t matter how well you plan and how good you are at predicting the future. Stuff will appear that is completely unforeseen and will completely throw (unintelligible). And everyone gets really upset and people will shout at you and it goes a bit nuts. Um, and if you go nuts as well, you project team falls apart, because they look at you as the calm rudder in the storms of life. I can feel my other project manager buddies laughing at me, um, but if you’re calm and you can not get stressed at that but actually see, try and find a clear path through a very stressful situation, then really helps.

Paul: I would so be the worst project manager in the world. I’ve got the attention span of a newt, I’ve got no organisational abilities and I get stressed at everything. So overall, I think I’d fail.

Rob: Yeah, stick to web celeb.

Paul: Yes, I’ll come up with some other title that sounds good. Um, ok, so you talked about this really is, I can honestly say, a foreign area to me. Right? You talk about planning a project upfront. I’m not a planning person. Right? And there seems to be so many variables involved in a project and so much as you say, that can potentially go wrong. How do you plan it? I mean, you know, the kind of thing that you always talk about, when you talk about project management is endless gantt charts that seem to be outdated in about 5 minutes, sort of kicking a project off. How to you effectively plan a project?

Rob: Um, well, we do use a gantt. We always start a project with a gantt. And, um because it seems like thats what project managers are supposed to do, so we justify the time with a gantt. Um, but you do need, um, I think assessing risk is something that is vital in successful project management. Its something that we’ve been doing at Headscape, um, increasingly more over the last year or so otherwise this need to actually spend time highlighting what could actually go wrong here. So, you look at, I’m not going to be able to think of any examples now, but a particular, let’s say you building a shop or something. So potential things which could delay that project would be: the client not getting around to telling you what the products are on the shelf and content population is a big risk on meeting a project deadline, because it is out of your control. So, its like, I need the content by this date, and he needs to put the content in by X date. If the client doesn’t do it, there’s nothing you can do about it.

Paul: I’m guessing integration must always be a big risk. Integrating with third party applications.

Rob: Exactly, so if you’ve got some sort of third party database or a web service you’ve got to pull in, something that you’ve done a bit before, but you don’t know anything about, that’s a risk. Because you can guesstimate what’s going to happen, but its unforeseen. And so, the trick is basically, to find all the tasks that have these risks and then multiply (unintelligible) an hour by some random number. And then make the rest up as you go along.

Paul: So what about once the project gets going, how, what techniques and tools maybe do you use for monitoring and controlling the process and trying to keep on top of everything.

Rob: Yeah, I mean, there are lots of tools out there, obviously, lots of funky web-based ones, um, there is no substitute for talking to you team. Um, trying to (unintelligible) email or basecamp or something is impossibly without talking to you team. So, communicate. It’s a big part of what we do. You have to talk to the people doing the work, you have to talk to the clients, um you have to keep the lines of communication open. Um, but as far as actually keeping track of what’s going on, we do use basecamp, um which is great for managing lists, basically, you manage lists. So from our gantt shell, we’ll break it up into a series of tasks if you like, wide areas, um, and then, (unintelligible) ask people to add comments to them and take them off and then we’ve got kind of an overview of where our project is. Um, and hopefully from there, and when we’ve got the gant shell, we’ve got some dates, some milestones and reminders like you should have done this by then, um and so, you use that to kind of keep track of where you are.

Paul: Cool. What about, so that’s kind of dealing with the internal side of things. What about when it comes to the client, I mean, you talked about, you said earlier, a happy client makes everybody happy kind of thing. So what makes a client happy? What are the things that really, or perhaps turn it around the other way, what are the things that really piss of a client and where can it really go wrong?

Rob: This is really where the people side of it really comes in because every client is different. Some clients want you to talk to them for five hours a day, hold their hand, you know, spoon feed them, and some clients just want to know when it’s finished. So initially, when you’re kind of trying to assess your project team, if you like, your resources and what you’ve got, assessing the personality of your client early on, will really put you in a good place. Um, but, I guess, general principles, if you’re honest, it helps. Um, so, be realistic about what you’re telling your client is going to happen. Don’t promise the Earth by yesterday. Because then you won’t deliver and then they’ll get upset. If there’s going to be a problem, if things have slipped for some unknown reason, then tell them as soon as you know. Tell them as quickly as you possibly can. Um, manage their expectations is kind of the phrase that we use a lot. You gotta manage you clients expectations so that they’re not expecting something that you can’t deliver. And um, and then that limits the amount of upsetness that they get.

Paul: Slippage is a big one, isn’t it? This kinda whole area of things like, you know problems you kinda face, things, like slippage, scope creep, non-delivery, I mean, how do you have any kind of broad techniques for dealing with these kinds of things, or is it just kinda communications thing again.

Rob: It’s mainly I think a communication thing again. Um, part of the planning stage is trying to asses these risks and so you try and build in contingency to cope with those, and if you’re building enough contingency, you deliver the project early and that makes everyone really happy, even if its a long project, you deliver it early, you’ve exceeded their expectation also. Um, so I think, if somethings going to slip, I think you should say you’ve got to be honest. Sometimes things are just out of your control, so you’re two weeks before the end of a project, you in the middle of snagging, your lead developer goes down with appendicitis. There’s nothing you can do about that, and so you just need to communicate with the client and hope they take it well.

Paul: So wishing everything works out, I’m loving that approach. Ok, so, um, let’s finish of with a piece of generic advice. Either people starting out in project management or those that have had project management foisted upon them. You know, whats the kind of one piece of advice that you would leave for people?

Rob: Get to know your team. I think that’s the main thing I would say. Um, its kind of like, when you drive you car, you’re environment is a very organic, dynamic thing, you know what it really what’s going to happen and the only thing you’ve got to get you through it is that you understand you car. You know almost instinctively how it works, how to drive it it, if you get to that situation with your team, then whatever the project throws at you, you kind of, you can deal with it. If you understand how you client is going to react to a certain situtation, you can intincfully deal with it. And it keeps the stress levels low. You need to find ways of managing your stress levels.

Paul: There you go, that’s great advice. Thank you vert much for that, it was wonderful. I really appreciate you coming on the show.

Rob: My pleasure.

Thanks goes to Meredith Marsh for transcibing this interview.

Back to top

Feature: Home Working

I was recently contacted by a friend of mine Marieke Guy about writing a guest post for her blog on remote working.

I have been working at home for over 7 years now and am a great believer in the benefits. However when I actually sat down to write the post, I realised just how long it has taken me to find the right way of working.

As a large number of people who listen to this podcast work from home, I thought I would share my experiences to date and my hopes of where remote working will take me in the future.

The reality of home working

Back to top

What's with the attitude?

We face many challenges as designers and developers – IE6, the fast pace or change, meeting the needs of disabled users. However, I am coming to believe that our biggest challenge is our own attitude.

This post started off as a bit of fun. It was going to be another spoof, this time in the form of a top 10 list of harsh truths. However, as I began writing I found myself actually believing many of the points. In the end I was forced to scrap that draft and start from scratch.

I am worried about how people see us as web designers. More than that, I am worried how we behave as web designers, both with our clients and towards one another.

Let me explain what I mean, starting with the more obvious and damaging area – our attitude towards clients.

Our attitude towards clients

I speak to a lot of web designers and in all of those conversations I rarely hear a positive word said about the people who keep us employed.

The overwhelming attitude towards clients is one of disdain. Oh, we hide our feelings reasonably well when dealing with them face to face. However, behind their backs we are often critical and derisive.

We see clients as stupid, awkward, or intent on derailing the project. In short we see them as the enemy.

We have to change this attitude. Not only is it damaging to the relationship, it is also untrue. Just because somebody doesn’t understand the web, does not make them an idiot. Without a doubt they will be far more knowledgeable than you in many, many areas.

You cannot have it both ways. On one hand we set ourselves up as experts who should be listened to. On the other, we are surprised that the client doesn’t instinctively know, understand and except everything we suggest. If they could, we would not be the expert!

We need to recognise the critical role the client brings to the web design process and stop trying to exclude them for fear they might bring something different to the table we might not like.

Stop treating your clients like children and start treating them as peers. That means listening to their contributions even when it does not sit comfortably with your own views. This involves us losing our sense of moral superiority.

You do not have the moral high ground

I do not hide the fact that I am an evangelical christian. That means associating myself with some people who have an enormous sense of smug satisfaction and moral superiority. Some of these people really think they are ‘Gods gift,’ literally! However, they pale in comparison to the moral and intellectual snobbery I encounter in the web design community.

I am fed up with web designers who judge others (and their own clients) with such passion and vigour it borders on the fanatical.

We are not poets, artists or preachers. We do not have the luxury of free thinking theory. We should be pragmatists that work in the real world and solve real world problems.

The problem is that most of our high minded ideals are nothing more than ego. It is about exalting ourselves at the expense of others. Let me give you a few examples of what I mean…

Why doesn’t your site validate?

I can’t believe they code in .net

He is always asking people to retweet his posts.

Oh, they are just link baiting

Comments like that are just about pulling others down. Validation isn’t everything and how can you judge somebody’s decision to code in a certain language without any background information? Hell, what does it matter to you anyway? As for link baiting and retweeting – what is wrong with wanting to drive traffic? There seems to be an attitude that desiring your site to be popular and working towards that end, is in someway wrong! Admittedly new traffic is not the whole story but it is a part of it.

Promoting your sites or services is not desperate or needy. It is good business. If all you offer clients is moral superiority and a well built site, then you are only offering them half a service.

I am not saying there are no lines. I do not condone black hat SEO techniques and I hate SPAM as much as the next person. However, I think we need to drop the attitude and consider the broader picture. We need to consider the business behind the site.

Stop trying to be intellectually superior

Unfortunately we do not just like to feel morally superior, we also like to feel intellectually superior.

We dress our profession up in impenetrable jargon and give ourselves fancy job titles. In many ways we are like teenagers trying to appear more grown up by smoking and drinking.

I guess this is not surprising. Our industry is barely in its teens. We are trying to find our identity and justify our existence. However, in the process we are in danger of becoming elitist and inaccessible to outsiders.

Take for example the recent rash of Top 10 posts. It is something I have started doing myself and have received a massive amount of criticism for it. I have been accused of dumbing down, catering for the lowest common denominator and being desperate for traffic.

Indeed top 10 posts do drive more traffic. That is because people like them. They like them because they are accessible. They are easy to scan and easy to assimilate. In what way is that bad?

Those who criticise do so because they feel that in some way these posts cheapen the industry or devalue what we do. I get the same criticism about my podcast. We joke on the show and have fun. We make the information accessible. Therefore we must be devaluing it.

In my opinion this is a view driven by insecurity. By wrapping up what you say in long words and impenetrable jargon you can hide the truth. You can sound better than you really are.

Unfortunately this just isn’t true. By making it impenetrable you are actually hiding its worth. By explaining what you know in a clear and accessible way you demonstrate its real value.

The desire for exclusivity

All of this is driven by a desire to the ‘cool kid’. Perhaps it is a hang over from our school days when geeks were far from popular. We try to impress and dominate, when we should be empathising and working together.

Another manifestation of this cool kid mentality is our rejection of anything mainstream. As soon as something becomes popular we drop it like a stone. Now our clients are talking about twitter, we accuse them of ruining it and start looking for the next thing. We want to be exclusive, special, different.

The trouble is the mainstream pays the bills. We need to break out of our exclusive little bubble and try to associate more closely with that mainstream. We need to understand what the general populace are embracing and go with that, even if it means still supporting IE6.

Conclusion

This post is aimed as much at myself as anybody else. I catch myself doing many of the things I have written about here.

In many ways the web design community is awesome. There are not many industries where direct competitors talk to one another so openly and freely. However in doing so we have become somewhat insular and very intense. I think sometimes we are under the impression that we are shaping the future and that every choice we make is of crucial importance.

At the end of the day we are just building websites. We need to get some perspective.

Thus ends the rant :p

152. War?

On this week’s show: Daniel Burka and Joe Stump from Digg discuss the supposed war between designers and developers. Paul talks about using twitter effectively and we ask ‘are you placing too much emphasis on your homepage?’

Play

Download this show.

Launch our podcast player

News and events

How to film video case studies

Increasingly your web strategy is about more than a website full of pretty pictures and well written copy. Video in particular is playing an increasing role, whether it is embedded in your website or shared via YouTube.

Video can be used in all kinds of ways from product demonstrations to viral marketing. However, a growing use for video is customer case studies.

This week 37 Signals have published a fascinating insight into how they created their customer case studies for Highrise. The article covers everything from…

  • How they chose who to interview
  • The way they shot the videos
  • What questions they asked
  • How they conducted the interviews
  • How they edited the videos
  • The time they spent preparing the whole thing

There is little written about producing quality videos and even less about customer case studies. Without a doubt these kinds of videos are extremely powerful and so it is great to read quality advice about their production.

Effective communication in web design

Smashing Magazine has posted an excellent article that I would highly recommend to all website owners. No, it is not my excellent Twitter article that I will cover later. It is actually an article entitled – Clear And Effective Communication In Web Design.

In essence it talks about how to communicate on the web through both copy and visuals. It is a comprehensive overview (if somewhat superficial) of all the key considerations of communicating effectively through your website.

The article focuses primarily on your website, largely ignoring broader communication issues. However it does tackle…

  • The different methods of communication – Images, text, titles, icons, design styling, colour, audio and visuals.
  • The challenges of clearly communicating – This includes the curse of too much copy, the need for personality and much more.
  • What you should be communicating – Your company vision, the websites offerings, the benefits to your users and calls to action.

It also nicely demonstrates how the design and copy work together to communicate your message. This is something I will be discussing with Jeffrey Zeldman in an upcoming show.

Do we place too much emphasis on the homepage?

Following on nicely from my recent post about where we invest our money, Christian Watson recently wrote about one of his clients who requested a homepage redesign.

In the article he writes…

Sure, I could refresh the colors and move some content around. But is this a good use of my time and her money when the home page represents 20-25% of page views?

It is a good question. Christian goes on to argue that we often place far too much emphasis on the homepage and that in fact it is little more than a gateway page to direct users to more important content.

He uses a nice analogy borrowed from Jared Spool. He compares the homepage with a hotel lobby…

When visitors arrive at your hotel, certainly they should find that the lobby represents the hotel favorably. It should be attractive, spacious, with elegant lighting, welcoming colors, and the odd feature here and there.

The lobby should make it easy for the visitor to orient themselves — to see where the front desk is and where the lifts are. It should make it easy for the guest to find out any important information at a glance — upcoming events or where the conference is being held.

However, hotels are ultimately judged by the quality of their rooms.

It is an excellent post that provides real food for thought.

Back to top

Interview: Joe Stump & Daniel Burka on War Between Designers & Developers?

Paul: So I am really excited to have joining me today Daniel Burka and Joe Stump from Digg. Hello Guys

Daniel: Hello

Joe: Hey hey

Paul: I have had both of you on the show individually and Joe you were on not long ago were you really…

Joe: ermhh yes a couple of months ago maybe

Paul: What can I say, we cannot survive without you. So erm but I though lets bring the two of these wonderful people together and talk about designer,developer relationships and how the two of them get on together working at Digg. I mean I have to say this is just a rip off really isn’t it, it’s a rip of a panel you did. Was that Future of Web Design (FOWD) you did that panel?.

Daniel: Yes it was Future of Web Design in New York. I think we are rehashing the panel at South By South West (SXSW) this year so if anyone is there it would be awesome if you dropped by.

Paul: Excellent, I need to persuade you two to come along to the SXSW live Boagworld as well, but I will hassle of of air so that you can back out if you want to without committing yourself live in a interview.(Paul laughs). OK so lets kick off by talking about the designer and developer relationship and really I think that it strikes me there is a lot of mythology around this that you know designers and developers hate one another and I am not convinced it actually works like that in practice. When you guys did your panel at FOWD you actually were agreeing on a lot of points so I though we would start of by maybe highlighting some of the differences and then look at ways of working together er mm further down the line so lets talk about to begin with what you guys see as the main differences in outlook I guess between designers and developers. How do you look at the world in different ways, do you think? Maybe Joe do you want to kick us off. How do you think developers see the world differently to designers?.

Joe: Sure I think erh developers are definitely, their default kind of response erm is that they would rather, I always make the joke that coders by default are lazy, good coders are extremely lazy people that’s why they’re good coders because they want to automate as much of their lives as possible. Ermm so I think that erm developers tend to get a little complacent when it comes to the actual erm product sometimes because they are so busy and so interested in and so worried about the actual code or the more nerdy side of things you know like are we running the latest greatest versions of different softwares. Developers also tend to be a lot more interested in what the new hip nerdness is as opposed to what’s actually going to make the product better for users, you know so like I have been in product review meetings where people are like “well Why isn’t this new version of some strange bizarre open web specification that nobody has ever heard of ahead of some major forward user feature” . (laughs)

Paul: (laughs)

Joe: So ermm I think that that tends to be like a big difference. The designers you know it is their job to be curators of the website in my opinion and kind of move the user experience forward and often times developers don’t have a whole lot of interest in that. (laughs)

Daniel: On the flip side of that if we are both going to slag our own professions ermm I think designers are often you know pushing unrealistic goals. They are interested in building you know the perfect product and you know aiming straight for that instead of looking pragmatically at doing things in steps and figuring out what is technically possible and I think there is also a gap where designers can only see sometimes what features that they can view and don’t understand, don’t see the vision, of where developers can see you know amazing things they can you know do pro grammatically that designers just aren’t envisioning.

Paul: Yeah

Joe: I think that’s er is another key difference that I know that there is a lot of, there have been struggles and tensions between Daniel and I in the past over this idea of a holistic approach to design where where Daniel designs his vision and his vision is normally version 10.0 and I am looking at you know the technical roadmap and things that I need to do and like I am OK well lets talk about version 1.0 and then we can start talking about 2.0 like, developers are much more focused on an iterative process as far as releasing, you know like small chunks, reducing risk etc. etc. and designers tend to kind of like go well erm you know it is like I wanna build a pyramid it’s like great well how about first we start out by finding some limestone and then we work our way up to building a pyramid.

Daniel: So what you are saying is we have got a fantastic optimism. (laughing)

Joe: Yes

Daniel: But I think that’s partly it. Developers are very interested, as Joe was saying,in mitigating risk and in a lot of ways designers are very adverse to even thinking about risk and want to think about opportunity. So I think this is kind of the crux of the whole thing and what we are trying to talk about on that panel is that both of those views are super valuable and if you manage to find the right mix of those two things then you can develop a fantastic product that is both concerned about risk and pushes the boundaries of what is possible.

Paul: Mmmm I remember one point that came out from the presentation which is one that you made erm Joe which is about the dangers of if that mix is not right. It is always the designer that’s in front of the client or the boss or whatever ermm the kind of realism of the developer is kind of left out of the process and ideally the developer either needs to be involved in those kind of meetings or there needs to be a conversation that happens between the designer and the developer before anything is ever presented. Is that kind of, do you still feel like that is that still a valid point?.

Joe: Yeah, I feel that is a extremely valid point for two reasons erm and this is a discussion that Daniel and I just had yesterday in fact. The thing is as a developer the reason I want to be involved early on in the development or in the design and like development of the product phase you know when requirements are coming together and when you know the first kind of formations come out of the clays so to speak is because two reasons. One ermm and they all kind of come back to this same kind of problem, is that the designers and the product people don’t know the system, the actual bits and bytes that like you know go into making the product, as well as the developer like the data and the code and the actual systems and stuff like that and how they are put together. So Often times two things happen Daniel comes up with a design and there is like one small minute detail on the page that would require you know one of the largest computer farms in the world to calculate in real time. Whereas in lots and just as often as you know that happens where it is like Daniel I can’t calculate that number in any meaningful way on a regular basis so you gotta remove that. But just as often as that happens because of you know as a developer I have such like intrinsic knowledge of the relationships in the data and what data we are storing and stuff like that just as often I am like well why don’t we expose this data or do this and Daniel is like I did not know we could do that actually I totally would have done that if I had known that that was possible or feasible.

Daniel: Yeah and that’s, especially that side of things designers often hear the first part Joe is talking about, the you know well that is just not possible or more difficult than you think. Any designer that has worked with a developer has heard that aspect of it you know and that is of course very valuable but it is the other side of things that I think people fail to leverage most frequently is the ability of developers to see different patterns than you in the data and come up with those suggestions, you know it might still be your call whether or not that is a valuable thing for the user but just hearing these ideas coming out is is amazingly valuable. That has shaped a lot of Digg.

Paul: So would you say that is a kind of you know a common mistake that maybe designers make with developers that they don’t communicate enough with them ermm

Daniel: Absolutely

Paul: yeah

Daniel: Designers often see developers as mules its like I made this thing go build it and that is a bullshit attitude, its terrible.

Paul: mmmm what …

Daniel: Its not just designers either all product people have a tendency to do that. In some ways, as Joe was talking about developers being involved in the process, at Digg we’ve got a pretty good structure where design actually falls under the marketing team and in some ways I see design as a bridge between marketing and business development you know product interests and the development team. Because I am often sitting over here and I hear you know someone from business development or marketing throwing around an idea and I am like “I’m no developer but I have a good sense of what the developer sees as important and you’re talking crazy talk like that is going to be nuts” and they are about to go and pitch that to a potential partner and you know like every week I put the brakes on from that kind of thing I am like listen you need to talk to Joe you need to talk to a developer because that what you are talking about is going to be months of development and you are promising it to a partner in two weeks that’s nuts and so I like that in you in some ways the design team can often be a bridge between product marketing people and the technical teams.

Paul: Joe from your perspective what kind of, you know as your communicating with Daniel and other designers within digg looking back where do you think you’ve made mistakes in your relationship with designers?.

Joe: Ermm I mean the mistakes that I often make ,its a not even a mistake are I don’t wanna say are what we do are like flat out mistakes it’s just more ermm you know being a bit more reserved and not necessarily defaulting your answer to no. Err You know I think that Daniel often talks about how a natural tension between design and product and development is actually good for the product because you have eventually, as long as you can keep that at a good tension and not you know bad or where things are breaking but ermm I think often times developers are quick to say no. You know they will be sitting in a meeting and it is just immediately no I am not going to discuss that when in reality if they sat back and let the idea germinate you know they would, Its kinda weird because I have in a lot of meetings where things were, where the developers were like be oh my god that is an amazing product but we will never be able to build it and so it is like they want to build it but their default is to avoid risk so they say no. So a lot of the times when I talk with Daniel now and this is something I like quit doing I try not to say no unless it is just like blatantly in black and white no way that is possible kind of thing. I might let the idea germinate more I might no say no immediately I might want to go back and spend a couple of hours thinking about it if it is actually feasible because maybe you know. That’s what engineers love doing they love solving difficult problems and if you are saying no to difficult problems then you are failing at what your passion and hobby is. Ermm so I think that ..

Paul: There is also an aspect is there not of not just saying no but explaining why you are saying no so that the other party is kind of educated into the kind of problems you face so as Daniel said earlier that they can be the bridge to you know business development or whoever else.

Joe: Yeah absolutely, I am the king of analogies at this point ermm but the other thing that developers erhh, this is extremely common that they utterly fail at is that they think for some reason that they are like the target demographic of the product so they will come into a meeting and say this product will absolutely fail because it doesn’t have key binding so I can keyboard shortcuts it’s like nobody uses keyboard shortcuts like in the real world, they are all mice people like you know. It is stuff like that that a lot of the time developers are like “this will never work unless you have least 14 completely nerdy niche features in it” you know and I think developers too often you know they do that and that is just silly.

Daniel: Hey guys that’s been a special problem at digg,since we started of as the pure technology side so it was seen as by developers for developers and you know we have obviously branched out from there and now we have got other interests I want to make sure peoples mums can use the website and that’s you know certainly a , you make different choices based on that.

Paul: I mean it is very timely from my point of view to have this interview with you because on Friday we had a internal meeting in Headscape where we talked about all kinds of production things and one of the things that came out of the development team was this desire to be involved in the process more and err to have their say more and just to be included earlier. So I am quite interested in you know because obviously you guys have been working together for a long time what kind of practical advise would you give to a , maybe this is just a question for me and not for anyone else, but what kind of practical advise would you give for designers and developers working together within the organisation. How can that relationship work better?

Daniel: Yeah, absolutely involving your development team earlier in the process but that doesn’t necessarily mean sitting around brainstorming right at the beginning of a feature with them. I mean I try to sit down work out an idea get it 20% of the way there, you know work out some of the basic issues figure out what this thing really means what’s at the core of it you know it might be ten different features together but what are we actually trying to achieve with it right so at least get that far even throw down so basic wire frames or some really basic comps and then present it to the developers its like listen this isn’t just an idea I came up with you know last night I just want to spill my entire brain out in front of you it is something at least I have thought through you know I have put a few things through my brain and now here is this totally unformed, not totally unformed, slightly formed idea but it is not baked you know don’t wait until you have got it baked and then you are so disappointed when the development team says well that’s not possible or have you really though about this and you have got this complete package already made up in your mind but come to them with a least you know the kernel of the thought out idea and get them to poke holes in it. Get them to push it in other directions and show you what else you could be doing and then go back to the drawing board again.

Paul: What about from your point of view Joe?

Joe: Well yeah, So ermm I agree with Daniel in some sense on that I think it is crucial to before you take it to developers to formulate a cohesive problem or hypotheses. Like if you come to the developers with a half baked problem that you are trying to solve you are going to get like, they are just going to run wild with it and it is like you know difficult sometimes to keep developers focused when they get excited about a problem. So have a formulated problem that you know you have a small idea of how you are going to fix but not fully baked. The other thing too and this goes on both sides of the aisle it shouldn’t be get developers plural involved and it shouldn’t be get. like a lot when you are first germinating that idea and you haven’t really moved it forward start small and then continuously expose it to more and more people errmh because I find if you involve too many people early on in a the process whether it is designers, developers, product people things tend to , you tend to loose focus quickly and everyone wants you know it’s kind of like port barrel spending and major bills its like everyone wants to piggy back extra features and stuff and pet projects that they have wanted for so long into like some major new feature.

Daniel: It is just simple death by committee

Joe: Right

Paul: Yeah Yeah OK That’s interesting a little random question I remember going to a talk once where, and I can’t remember who it was who was giving it, where they suggested that errmh designers and developers swapped roles for a while. Where you try and sit in the other persons shoes and I was just interested whether you two had tried anything like that?

Joe: That would be disastrous for me. (laughs)

Daniel: I I mean I appreciate development roles and I am you know somewhat technical for a designer but yeah I know I have never done that but I have always worked so closely with the development team like at silverorange where I worked previously to digg there was only ten of us and I sat in a room with developers all the time. I worked in their code with them and worked on problems as a group so I think I, you know I have never worked in a place like say you worked in a big enterprise and your in this classic where designers are in one office and developers are in the other office and you toss stuff over the wall yes then I think that would hold value at least go and sit in the other office, go work in the other office for a few months just hear the other discussions that are going on because there are a totally different set of concerns a totally different set of values than what you are doing and if you don’t at least appreciate and understand that, and not just understand it so you know what you are fighting against but understand it to know what is important and how you can work with it then you know you would be really missing out.

Joe: I think I am ermhh I think I am kind of spoiled at Digg because you know I work with two of the webs brightest, you know Daniel and Mark Trammell as well so I actually push back on my developers pretty frequently where they you know we will leave a meeting and they are like I really really completely disagree with what Daniel or Mark are doing with the design and you know I tell them all the time like look you are not a designer and you definitely not at the level that those two are at and you sometimes have to defer to them and trust that they are doing their job and they are doing it well you know and ermhh I think developers don’t do that often enough they make these assumptions that you know the arty-farty designers are doing stupid shit again and that’s not the case. I mean they would not be especially where we are at at Digg and what not I mean Digg is able to be very picky with who they bring on and the people Daniel has brought in to design are extremely competent at what they do err so I am probably not qualified to answer that question because I am so spoiled at Digg but that is a common problem I see from developers where ermhh they don’t let the designers do their job and they try and be designers when in reality you know they do not have the experience or the expertise so.

Paul: Lets talk about conflict resolutions, sounds very grandiose but basically you know how do you go around resolving a situation where you know OK you kind of respect each others skills and you respect each others competencies but you know where some feature is suggested by Daniel and you know and you Daniel from your point of view it is absolutely core to what you are trying to achieve you know it is extremely important and then from a technical angle Joe it just seems incredibly complex and very very difficult. How is the eventual decision made as to whether that feature should be implemented and in what way it is implemented? How do you go about resolving that difference?.

Joe: Ermhh Well I mean I think as far as making the decision whether or not the feature makes it in, because there is actually two possibilities when it comes to the conflict resolution. Whether or not a feature actually makes it into the product and in what capacity does that feature make it into the product and I think in the former whether or not the feature actually makes into the product if Daniel comes to me and he’s resolute like this feature has to be in the product the feature is going to be in product. I am always going to defer to Daniel on on, if he feels that strongly and is that passionate about it you know and it is not something completely hare-brained like I want magic ponies to come flying out of the screen I am going to defer to his expertise on the fact that feature needs to be in the product. Where the conflict resolution comes into it is what capacity is that feature going to come into the product like a perfect example of I think of something where there has been we have had a recent discussion at Digg and where this has happened we have, and I talked about this probably in our last talk but, there are these little green badges on the digg buttons and they indicate one of your friends has dugg that story and when you hover over the digg button it shows like a little sample of the people that have dugg it. Ermhh So those were causing significant strain and problems with our systems and our code and on our databases so I came to Daniel and of course again as my risk aversion developer brain was coming to Daniel I was like Can we axe this feature until we can figure out how to like fix it. He was like “No” that feature cannot absolutely be axed and then we came to a resolution which was a short term solution until we can get a better solution in place where operations now have knobs they can dial down so the green badges don’t show up on stories older than 48hrs, they don’t show up on stories that have more than say 5 or 600 diggs and stuff like that. So the conflict resolution came in basically making trade-offs in how that feature is surfaced in works ermhh at our scale more often than not what that means is that Daniel has to give up the notion that everything is in real time. The feature will work it is just that it may take you know thirty seconds to a minute for an action to be distributed across the entire system, that is probably more how things are now at Digg so.

Paul: What about from your point Daniel, when do you back down over something and when do you keep pushing on it? How do you decide you know how serious Joe is about something and whether you should keep pushing or not?

Daniel: Right I mean it kind of comes down to you know when I am looking at the product I am not thinking of any one feature, I am thinking about the whole set and I want it all to work together and so you know I know I want to push out six different features this month and if I push and push Joe to do the one really hard one well that is going to affect the other five I wanted to get done. So any feature is tied to other features and it is also based on a time line if I want something done in a certain time line and that’s just not possible well then I have to start making compromises so you know you have to be realistic and then at the same time you have to realise developers work well with shame and so if you tell a developer well I bet a good developer could do that (All laugh) they will go back to their cube grumbling at you and figure out a more efficient way to do it.

Paul: OK. So now we are getting into the realms of how to manipulate each other.

Daniel: Absolutely.

Joe: That’s definitely err one that I agree does work but is not a trick you want to pull out of your bag too often.

Daniel: No it is the same with designers too, it is like I want to do this really complex thing, no way I can explain that to users in a way they will understand. “I thought you were good” arhh shit I will go back and try that again.

Paul: That is quite interesting what you just said there because so far we have talked very much about you know designers initiating features and that kind of stuff I mean are there situations where the developer is the one initiating features you know just said there a developer wanted to do something really cool and you said you couldn’t explain it. Does it run that way as well? or is it always the designer who drives first?.

Daniel: No Absolutely that happens at Digg, it happens sometimes at Digg so Joe yesterday sent me an email that had two big feature ideas in it. They may not be things we implement this month but maybe later on this year. I was looking at them and you know it is easy to disregard well he is a developer he does not understand what’s going on with the product but you look at the ideas and they are strong and they fit in with what we are doing and now I am trying to figure out you know how they make sense in the big picture I guess. So we have got a brilliant development team a lot of people over there with great ideas and we try to sit down, you know I guess Kevin has been doing those where we do meetings once a month I guess where developers if they have been working on a side project you know something they have always wanted to build into Digg they can present this at the Digg ideas meeting.

Paul: Ah OK

Daniel: A bunch of those products will make it into the full Digg I mean its awesome these brilliant people go and throw around crazy ideas and show you what is possible.

Joe: I think err yeah I mean I agree with that you definitely have, it is a two way street erm largely stuff comes from product at this point the Digg ideas meetings is definitely helping that you know open that up and kind of what I would call level that playing field a bit. But one of the things I think developers are in a in a unique position just like Daniel I work with people across the entire companies so I know initiatives that are going on in marketing I know initiatives that are going on in PR and biz dev etc. and you know if nothing else developers are very good about noticing and pointing out and discovering patterns and err a recent product that made it out that err was a developer initiated product was Digg dialogue because basically I noticed this common pattern where business development and Marketing and PR were setting up interviews and then like reaching out to people to like conduct interviews using the Digg engine kind of thing and I was why don’t we bake this into like a cohesive feature that’s turnkey because you know business development like Daniel was saying earlier lots of times they are just making these one off deals you know and they don’t really recognise when there is a product to be had there erm so that is another one that recently went out. It was like I recognised a pattern and baked this into something cohesive and move it forward.

Daniel: That is a good example of where we are being lazy some people want to do this one off thing over and over again and it is a bunch of work to don it each time well like we will just build a system to do it and we won’t have to do all the work every time. It was great.

Paul: OK that is really good lets leave then with one final question or one thing from each of you. Which is if you could give you know one piece of advice to either designers or developers on how to kind of interact with their counterpart what would that one piece of advice be?. Lets kick of with you Daniel what would be your one piece of advice to designers about dealing with developers?.

Daniel: My one piece of advice would be to see the big picture, you know aim for version 10 like we were talking about earlier and know what you want to build in the future but be realistic enough to back it up and build it in stages. You know waiting and building a feature over six months and eventually launching it is a terrible way to develop and it’s a terrible way to design having an idea of where you want to be in six months but realising in one month increments is so much better you’ll end up in a different place but at least you know where you are heading and you can adjust that goal as you go forward

Paul: Yeah. Brilliant. Joe what about you?

Joe: Ermhh I would say to the developers out there that there is different shades of no ermhh that you know there is the, the default should not always be no and remember what I said about the conflict resolution you should be deferring to the people that are experts in their field by default for the most part and to work on compromise in how the feature operates and make your concessions and have them make their concessions rather than just defaulting to saying no to the entire feature.

Daniel: And as a developer push to be involved early in the process, even at Digg we struggle with that a lot and as a designer I appreciate when developers want to be involved I want to hear their opinions you know it is fun to have them involved I hear all kinds of crazy stuff I never even considered that’s awesome.

Paul: Excellent. Thank you so much guys that was really good I appreciate you coming back on the show yet again. It was really good to get your perspectives together on that relationship because it is one a lot of people struggle with. So it is good to hear that it can work most of the time. Thanks for your time

Daniel: Thanks for having us on Paul

Joe: Bye

Thanks goes to Shaun Hare for transcribing this interview.

Back to top

Listeners feedback:

With everybody from Britney to Obama now on Twitter it is safe to say the social networking platform has gone mainstream. But what does this mean for the service and how can we as website owners use it? Read More

5 options when website budgets get slashed

Your site is in desperate need of a redesign, content is out of date and the technology is archaic. Unfortunately times are tight and your budget has been cut. What do you do?

The economic downturn is affecting everybody and even at Headscape we have noticed the budgets of clients shrinking. With less money to spend how can you maximise the return on your investment?

To be honest I think it is a good thing that people have less to spend on their websites. We have had too many clients approach us asking for complete overhauls of their sites when that is not what is really required. Often more subtle changes can have a greater impact over the longer term. They certainly generate a better return on investment.

We have been working closely with our clients to suggest ways they can improve their sites without breaking the bank. Here are just 5 of our suggestions.

1. Realign rather than redesign

Why do you need a redesign anyway? Redesigning your entire website is time consuming and costly. However, more importantly it is often unnecessary. I seem to be quoting Cameron Moll’s excellent article “Good Designers Redesign, Great Designers Realign” a lot recently, but that is because he talks a lot of sense. He writes:

Like a kid in a candy store, we creatives redesign like it’s the new black. Why do we possess such an insatiable desire to refresh and remake? Why do we thrive on renewal? What tempts us to be seduced by the sway of renaissance?

I believe it is because we see a redesign as the solution to a failing, tired site. However that is rarely the case as Cameron goes on to explain:

Too often, look and feel, color scheme, layout, and identity are presented as solutions to problems… long before regard is given to other less-aesthetic issues that may very well be the root of the problem. The old warning against treating symptom rather than cause comes to mind.

What is more redesigns can often cause more harm than good by confusing the loyal users who are familiar with your old site.

When budgets are tight let go of the notion you need to do a complete redesign. You can improve your site many times over with the smallest change. Just take the case of the $300 million button I mentioned in show 150 of my podcast.

My facebook profile

2. Simplify

As website owners we are always looking to expand our websites by adding more features and content. However, that costs money we may not have.

Here is a radical alternative – Instead of adding more to your site, why not take things away.

Typically websites are stuffed with content and features that users simply do not use. A quick look at your analytics package will demonstrate the problem. The vast majority of traffic is to a handful of pages.

The problem is we tend to leave content in because ‘somebody might find it useful’. Although this maybe true, it does not necessarily mean keeping content is a good idea.

The more content and features we make available the harder it is for users to find what they need. It is the proverbial ‘needle in a haystack’.

Fortunately, simplifying your website does not have to be entirely about removing content. According to John Maeda’s book ‘The Laws of Simplicity‘ we can also streamline our sites by shrinking and hiding content too. Consider ways to reduce the prominence of less important content, to place a greater emphasis on what matters.

When budgets are tight take a long hard look at your site and ask whether more can be achieved by simplifying what you have rather than adding complexity.

Apple Homepage

3. Prioritise and phase development

Another technique which can be used when budgets are tight is to phase development. There seems to be a tendency among website owners to store up changes and roll them out in a single large deployment. Unfortunately this means a large single expenditure too and that can be problematic from a cash flow perspective.

A better approach is to roll out incremental changes on an ongoing basis. Not only is this better from a financial perspective, it brings other benefits as I explain in the Website Owners Manual. Phase development also provides:

  • Faster delivery because new features are launched independently. Some features can be launched while others are in development. This prevents a single feature stalling the entire rollout.
  • More accurate estimates. Bigger project are harder to estimate. Breaking them down makes it easier for suppliers to quote accurately.
  • Better PR opportunities. Whenever a new feature is launched there is an opportunity to publicize the site. New features can motivate users into taking another look. A single large project only provides a single opportunity to grab peoples attention.
  • Limited risk of working with a new supplier. Choosing an agency is always a risk. Until you work with somebody, it is hard to gauge how good they are. Reduce this risk by limiting the size of project they are commissioned to build. If the agency fails to perform, you can look elsewhere when commissioning subsequent work.

This is an approach commonly adopted by larger websites with their own in-house teams but much rarer among smaller sites who use external agencies. Nevertheless, it is an approach which works well in tough times.

Digg Technology Homepage

4. Reuse and recycle

Too often we reinvent the wheel. When budgets are plentiful this can make sense. Although there is similar functionality out there, we might choose to develop it ourselves so we have more control or can customise it to our exact requirements. However as budgets begin to get squeezed these are luxuries we cannot afford.

In a world of widgets, APIs and open source it is becoming increasingly hard to argue the case for custom builds. Why build your own mapping application when there is Google Maps? Why build a forum when you could use an open source alternative like Vanilla?

My only word of warning is in regards to integration. It can be hard to get these ‘prebuilt’ tools to work together. Be careful that the savings made are not lost to integration problems. Where possible use tools like WordPress that provides an architecture with a wide range of plugins for quick integration.

opensourceCMS screenshot

5. Move beyond the website

Finally, I think it is important to remember that your web strategy is not all about your website. We spend the majority of our ever decreasing budgets on adding bells and whistles to existing websites when there are large number of potential customers who never reach our sites.

Instead of sinking your budget and efforts solely into your website consider looking further afield. Could your web strategy be better served by putting resources into a Facebook group or a twitter account for example? Would your target audience listen to a podcast? Do they read RSS? What about a mailing list? The possibilities are endless.

Ask yourself where your target audience congregates. Instead of constantly trying to draw users to your site begin to spend time where they already meet. What social sites do they use? What editorial sites do they read? Contribute to these communities and offer to write for the editorial sites they read.

Many of these things can be done at almost no cost and with little technical knowledge. All it takes is some time and enthusiasm.

Conclusions

Whether a site is successful is not dictated by its budget. However many larger organisations have relied on money as a method of driving their web strategy forward. As these budgets are slashed there is an opportunity to gain a competitive advantage by being smarter.

Hopefully this post has demonstrated a few of the possible avenues available and inspired you to discover some more of your own. However if you would like some more personal advice specific to your own website then feel free to drop me an email.

144. Scale

On this week’s show Paul talks to Joe Stump from Digg about scalable websites, we review the best apps for web designers and investigate services for sending bulk emails.

Play

Download this show.

Launch our podcast player

News and events

How much should you charge?

If you are starting your freelance career the number one question you will have is ‘how much should I charge?’ It is important and yet strangely it is not something you are taught at college. Perhaps they don’t teach it because it is a damn hard question to answer. It is certainly something we have avoided talking about on this show.

Fortunately an article entitled ‘Six things to consider when setting your freelance rate‘ has been released this week. Although the article does not give a magic number, it does provide 6 valuable insights that will inform your final decision. These include…

  • Young freelancers and recent grads almost always ask for too little.
  • You can do things your clients can’t.
  • Your rate influences your perceived value.
  • You don’t get to keep it all.
  • An hour worked is not an hour billed.
  • The higher you start, the less you’ll need to increase.

I couldn’t agree more with everything said in this article. However, the one that really resonated with me was ‘You do not get to keep it all.’ Your rate has not only got to cover your billable hours but the cost of sales and marketing, as well as your various overhead. The article has a link to a superb rates calculator that helps you work out your chargeable rate based on these various costs. Definitely worth checking out.

A plethora of accessibility posts

With the implement arrival of WCAG 2.0. we are seeing a resurgence of interest in accessibility. This has led to a plethora of accessibility posts over the last few weeks. These include…

  • Writing good ALT text – This is a simple post about the use of the ALT attribute. It suggests two rules of thumb when it comes to writing ALT text. First, if you were to describe the document to someone over the phone, would you mention the image or its content? If you would, the image probably needs an alternative text. Second, does the alternative text of any images in the document make sense if you turn off the display of images in your web browser? Simple advice, but well worth remembering.
  • Designing for Dyslexia – This is a series of 3 in depth articles that look at the subject of Dyslexia. It asks what Dyslexia is and how we as web designers can improve our sites to accommodate the needs of Dyslexia users. Its interesting stuff. Part 1 defines what Dyslexia is. Part 2 looks at some of the conflicting requirements with users who have visual impairments. Part 3 suggests some specific things you can do to improve the legibility of your designs.
  • Accessible forms using WCAG 2.0. – This extensive post aims to provide web developers and others with practical advice about the preparation of accessible HTML forms. It compares the WCAG 1.0 accessibility requirements relating to forms with those contained in WCAG 2.0. Important stuff but not a 5 minute read!
  • Too much accessibility – The RNIB explains how the LEGEND tag can cause more harm than good if not concise and relevant. The reason? LEGEND text isn’t read at the start of the FIELDSET, it is read at the start of the label. It repeats at the beginning of every single text label in that FIELDSET.

A business case for deleting content

I find myself using the word ‘simplify’ a lot when I talk to clients these days. So many website owners are constantly wanting to add features or content to their site. However, in reality we should be removing not adding to our already bloated websites. This is particularly true for large institutional websites. However it does also apply to smaller sites.

Take for example the Headscape website. When we started the redesign process for our site, I sat down and really thought through what information prospective clients wanted. The answer was very little. In the end our large text heavy website was reduced to a single page. That is the power of simplicity.

Gerrry McGovern summed it up perfectly this week in his post entitled the ‘Business case for deleting content‘. He wrote:

The more you delete, the more you simplify. The more you simplify, the more you increase the chances of your customers succeeding on your website.

We may think that we cannot delete content because ‘somebody might want it’ or because we believe ‘it will help our search engine ranking’. However, bloated sites bring complexity and with complexity comes confusion. The more content on your site, the less chance a user will be able to find the content they need.

12 principles for keeping your code clean

We finish today with a great post for those who need help with their HTML code. Whether you are a student learning HTML or a designer who is more comfortable in Photoshop than Coda, this is a very useful article.

The post provides 12 excellent tips for keeping your code clean. These include…

  • Use a strict doctype
  • Set your character set and encode those characters
  • Indent your code
  • Keep your CSS and JavaScript external
  • Nest your tags properly
  • Eliminate unnecessary divs
  • Use better naming conventions
  • Leave typography to the CSS
  • Add a class/ID to your BODY tag
  • Validate
  • Order your code logically
  • Just do what you can!

The article explores each of these points in depth and communicates clearly current best practice in coding HTML. Well worth the read even if only as a reminder.

Back to top

Interview: Joe Stump on Building a Scalable Site

Paul: Ok, so joining me today is Joe Stump from Digg. Good to have you on the show Joe.

Joe: Oh, good to be here.

Paul: Have we had you on the show before?

Joe: Ah, not that I’m aware of.

Paul: Oh, wow, well we need to rectify that then. It’s good to have you on. Well, I have to say, this interview was arranged by Ryan, who is our producer. And he’s a developer, and I’m a designer. And he suggested we got you on the show, not that I wouldn’t like you on the show, obviously. That we got you on the show, obviously about scaling websites. Now, I’m going to be out of my depth very quickly here, so you’re going to have to be very gentle with me Joe.

Joe: Sure

Paul: So, in fact, it was so bad, that as I sat down to write questions I thought: "I don’t know what I’m doing here" , so I went and talked to some of the developers at headscape, and I asked some of the Boagworld listeners, and so we’ve got a little selection of questions for you, that, hopefully we can learn a little bit about how you go about doing things at Digg. Lets start off, what’s your job title, what is it that you do at Digg?

Joe: Ah, I have a really fancy job title that doesn’t mean a lot of anything, but ah, my official job title is "Lead Architect" and um, I think what best describes it, is that I manage the technical implementation on the code side.

Paul: OK

Joe: So, Digg’s broken up into a lot of different arenas on the tech side, we’ve got, R&D, which is headed up by Anton Cast, we’ve got operations, which is headed up by Scott Baker, and then under that are the people that I work with, ah, probably most closely in implementing solutions for Digg. Ron Gorodetzky is our lead systems engineer, Tim Ellis, also known as timeless, is our chief DB wonk, and then, Mike Newton is our lead network guy. So I think us four kind of steer the technical implementation along. The managers, ah, the manage, and handle the strategy and partners, and stuff like that.

Paul: You managed to say the word manager with real distain.

Joe: Oh, no actually, I have a great manager, John Quinn, he’s our VP of engineering, he’s by far the best direct manager I’ve probably ever worked with. Yeah, he’s really good.

Paul: OK, well lets go back in time a little bit. And start by, well, when was the point when you realized, that you were going to start having scaling issues with Digg? When did you start thinking about the whole subject of scaling?

Joe: Um, well Digg was pretty big when I came on board, so Digg was about 10 – 12 million uniques when I joined on.

Paul: Wow.

Joe: And I think we’d just cleared 35 million last month. So scaling was obviously an issue, but the big difference is that, I think sites generally go through a few different levels of scaling, where like the first one’s like, "I’m just going to throw it on a virtual server, or an Amazon server, you know, you’re basically just seeing if things are going to just "stick to the wall", and then they do. Ah, so the first thing you normally do is start breaking services off onto separate boxes. I want to put my DB on one box, my server on another box, and maybe memcached on each of them. And then you hit, read saturation on that one DB server, so then you go to the kinda next level of scaling. Which is where Digg was when I started, where you start dangling, a whole bunch of read slaves, off of your DB master, so, and for those who are not familiar with the master / slave terms, you send all your writes to one database server, and then that disseminates those writes to a whole bunch of slaves, and then you send all your read traffic to those slaves. So that’s where Digg was when I started. It’s write http traffic across a whole bunch of servers, its read traffic across a whole bunch of slaves, and then we have one master. And we’re now going through, what I think is the third phase, where you hit write saturation on your master, which is a bigger problem, because you then need to start sending some write traffic to some masters, and we’re actually going with a strategy that’s common with Facebook, and Flickr, and those kind of websites, where it’s called horizontal partitioning, where you put some of your records on one server, and the other records on another, so it’s like, you can say, for users, all users whose names start with A through J, would go on this database server, and K to Z live on this other database server. So we’re in the middle of implementing the first swipe at that. So we’ll be pretty aggressively into where everything will be federated and partitioned across a whole bunch of servers.

Paul: OK, one of the questions which kinda came up, which kinda relates to that, is, once you start spreading things across multiple servers, how do you handle things like user sessions, which have obviously got to be persistent.

Joe: Aha, so there are a couple of ways to handle that which, I’d say most people are handling it by.. There’s two ways, probably that you can do it easily. One of them, is if you have what they call "session affinity" on your load balancer, so the load balancer will say: "Oh, well this person, last time I had them here, they went to server A, so we’ll send it back to that server". So the session always lives on only one box. That’s one way to do it, we don’t do that here, we have a custom session handler in PHP which sorts the session in Memcache, and that allows you to.

Paul: Can you just clarify what memcache is, for idiots like me who don’t know.

Joe: Sure, memcache is a distributed caching system that’s actually, basically what it allows you to do, is expose a machines RAM over the network, and cache stuff into another machines RAM across the network.

Paul: Ah, OK

Joe: Yeah, it’s insanely fast, it was developed by Danga back in the day, and Brice Fitzpatrick, yeah so it’s heavily used by anyone whose scaling with LAMP, even a lot of people who aren’t. They all use memcached.

Paul: Wow

Joe: So, yeah, we store all of our session data in memcached, so PHP creates a unique session id, and we just stuff session data into that in memcached, and we can distribute that across, I don’t know, 50 or 60 memcached servers, and what not.

Paul: So how many servers do you guys have, it must be a staggering number by now.

Joe: Um, yeah, it’s kinda funny, every time I ask Ron that, he’s always like "Ah, I don’t know"

Paul: Laughs

Joe: Because we really can’t I mean, I couldn’t give you a specific number because on any given day, we’ll pull or push into production, a dozen servers, so, hundreds, there’s definitely hundreds in production. So.

Paul: I mean, with that many servers, so obviously you’re talking about taking servers on and offline, and all that kind of thing, I mean, making updates to the site, when Daniel comes up with some stupid idea, that you’ve got to apply to the site, of a new feature that he wants to apply on the site, and you’ve gone through the process of making it work. And you’ve then got to push it live.

Joe: Aha

Paul: How does that work? How do you go about pushing something like that live when there are so many servers involved.

Joe: So we have Ron Gorodetzky our lead systems engineer guy. So us developers have a bunch of M4 make files, that, when you check the code out, you run basically Make, Install, and it, for lack of a better word, it builds or compiles the website into a cohesive package, and then Ron pushes that to each server, I think he is still doing it by rsynch, but I know we are migrating over to Puppet, so it may happen via Puppet soon. The production side of things, is something that’s handled completely by operations, so I couldn’t tell you specifically how it happens, but generally, we make a tag of the website, and tell Ron, we need you to push "9.4.15" or something like that, and he does a checkout, builds it, and pushes it to all of the different servers.

Paul: So is that – do you actually have to take the site offline to do those updates? How do you minimize the downtime that’s involved with that.

Joe: Oh, well there’s a bunch of different ways. Um, we don’t bring the website down normally for pushes, it depends on the size and complexity of the push. But like, day to day pushes, we probably push I guess, a minimum of once a day, just little bug fixes and stuff like that. And those happen generally in the middle of the day, and nobody notices, it’s no big deal. Ah, the outages these days, are completely dependant on database activity, you know, like database fixes and stuff like that. And the ways that we’re getting around that these days, is using a different method of partitioning called vertical partitioning. Where, like for instance, like I think our comment Diggs table, of like, who’s dug a comment, up or down, that’s like 15 billion records in it.

Paul: Wow

Joe: that’s like, yeah, if you’re like to alter that table, you’d probably crash mysql, but if you were, it would probably take a week to alter it. So instead we probably create another table, where we have like comments, and then we have another one called comments_made_up, or something like comments_diggs, comments_diggs_beta, and that has a couple of extra fields in it. And so we’ll say, OK, we’re about to push the code, at the end. When we push the code, the first comment id that was added to the table was 15,000,000,001, so then you start at 15,000,000,000 and work my way back in the table. So we do some of that live as well. For the next push that we’re doing, we’re using a migration table, which will tell us how far along each record is, and which records we’ve actually migrated, and stuff like that. And then we’re going to use this package called "GearMan" which is a queuing system which we’ve had in production for a while. And we’re basically turning our servers into a giant BotNet, so we’ll back fill all those partitions quickly.

Paul: Wow, that kind of amount of data, it must create huge problems, even adding a new piece of functionality onto the site, to actually code it in a way that’s not going to have a momentous impact on the database. This must be something that’s always constantly on your mind I guess?

Joe: Yeah, I’ll tell you a really funny story that highlights that perfectly, we have these little green badges that are on the Digg button, and they indicate, that a friend of yours has dug that story. And when you hover it shows the last four friends to dig it or something. So that’s a pretty knurly query, against a very big table, and we’ve actually had to, what I would call "dial it down a bit", so that it only shows up on the stories that are 48 hours old, and it won’t show up if there are more than 500 diggs or something. So the features fairly usable, but it’s not like… Well before if someone went to the top of 365, it was basically crashing our servers. So we’ve been rewriting that, and we basically, the way that we’re rewriting it is: If you write something, we take that Digg and we drop it into each of your followers buckets. So we make a bucket for each story for each person. Any time one of their friends digs it, we drop that dig into their bucket, but the problem is, like Kevin Rose is followed by 40,000 people, so every time he digs something, I need to drop 40,000 things into 40,000 different buckets. And we did the math, and just to get that feature up and running in a vast sane manner, so that it will scale, so we can bring it back in full capacity so everyone can use it all the time. We need 1.25 GB of storage, and we need to be able to sustain 3000 writes per second in order to keep just that small feature online.

Paul: So that really kind of illustrates that a relatively small feature that someone comes up with, has massive ramifications from your point of view.

Joe: Yeah, this is something that has kind of been something that I always talk about. I mean even back when I was doing consulting, I’d kind of have clients come to me, and it would be: "Check out this awesome design", and I would be like "that designs awesome, but that little feature down there, that’s going to cost you know, $100,000 in servers, and 500 man hours. But it’s, like, well the designers think of sizes and shapes, and so Daniel always jokes around and says: "Well I can make it purple" if that will make it easier for you" you know, it’s like…

Paul: Laughs

Joe: Laughs – well that doesn’t make it easier!

Paul: Well, we’re going to get you and Daniel back on the show to talk about this whole design / developer relationships, so you can lace your side of it now, and get your side in first. Before he defends himself.

Joe: Sounds like a plan.

Paul: So are you at the point now where you’ve got an architecture that’s kind of infinitely scalable, or are you going to have to go back to the drawing board if Digg just goes even more, you know off the scale than it already is?

Joe: Yeah, well we’re actually at the drawing board right now.

Paul: Yeah?

Joe: Yeah, Ron, myself, and some of the other senior peeps, about 8 or 10 months ago, we started putting together… well we knew that we were going to start to have serious limitations, especially since we were going to be scaling internationally. You know there is a problem with latency. With you guys across the pond hitting the west coast and other things like that. So we want to be in multiple data centers. We want to be actively serving traffic from multiple data centers, so we’re are, well we need to horizontally partition, we need to make sure we can do that. And we need to live in two different data centers. We need to be able to survive one data center disappearing. So we spent basically a week in front of the white board, and we created this thing called IDDB, which is kind of an elastic storage engine, built on top of SQL, and memcachedb, that we’re going to be putting the first bits and pieces into production, probably over a month or so. And really, the whole partitioning thing isn’t the difficult thing to figure out. The difficult thing is basically spanning multiple data centers, and also we’ll have a couple hundred gigabytes of data, and I need to spray that across, you know, a couple dozen different servers, without bringing the site down. So we have a couple million – 3 or 4 million users, and I need to take all of their records, and all of their auxiliary records, here’s like your user record, and there’s also a bunch of cruft related to that. So I need to take all of that, and migrate it to different partitions. But I need to do that while the site’s still up and running, and I need to do that without breaking the site for you. So, that’s the more complex problem at this point.

Paul: I mean you talk about spreading across multiple data centers, and if one of those data centers goes down, the site does too, and whatever. How are you currently handling redundancy? How are you making sure the site stands up at the minute?

Joe: Right now, our only single point of failure at this point, is our actual data center, so if the data center falls off the planet, then we’ve got problems. But we’ve got a general architecture. We’ve got a couple of general balancers up front. And those two have, what we call a "heartbeat" between them, and if one of them falls off, the other instantly takes over traffic for it. And that balances traffic across, I couldn’t even tell you, dozens and dozens of web servers, and of course, the load balancer does help checks on those, so if any of those falls over, it will drop it out of the pool. Behind that, we have, I think, 4, I guess our masters are technically single points of failure, but we have multiple masters as well, and we have dozens of read slaves hanging off of them. I think right now it takes about 10 minutes to bring a new master into production if one fails. So, and then we have, to store our files, we have a thing called MogileFS, which is a distributed web dav storage engine of sorts, and we can loose multiple nodes on that, and not have any problem with that as well.

Paul: Yeah, so at the moment it’s a physical problem that you have, that if your data center gets hit by an earthquake or whatever, then you have problems. Please tell me it’s not in San Francisco?

Joe: It’s not in San Francisco.

Paul: Ha ha, yeah, you’re not actually going to say where it is are you?

Joe: No I can say we have one on the west coast, and we have one on the east coast.

Paul: Oh, well that’s at least something. Um, I mean so far we’ve concentrated a lot on scaling technology, but there’s kind of another side to this, as well, where you get something like Digg, that has grown incredibly rapidly, over a very short length of time, and that is, kind of scaling the team behind it. You know, I don’t know how many developers were working on Digg when you joined it, but there would certainly be a heck of a lot more now. And I’m quite interested in how you went about growing the team. And how you deal with that kind of rapid growth, and making sure everyone knows what they’re working on, and not overwriting others work, and all the complexity that goes along side of that. How have you dealt with that?

Joe: Sure, I guess, to put things into context a little bit, when I was hired, we had both Kurt Wilms and I, were both hired on the same day, and were respectively employees 18 and 19, and developers, I think there were 7 of us. So, now we’re at the low 20′s as far as developers, and we’re in the mid 80s, as far as total employees, and that’s been in a year and 9 months. So as far as scaling the teams go, some of the building blocks were well in place by the time I got here. Like, source repository, stuff like that. But I think the crucial things that we’ve done, since I’ve come on board, that were, we had some coding standards that were out there, but they weren’t really in force. And then we had, we didn’t really have any frameworks in place. I think one of the problems, you know, when Jay, our CEO, was asking, where do we find more senior developers, I told Jay, like that’s not the right question, the right question is like, how do we get the code, and how do we get the technology, in a position, where we don’t have to hire really senior people. So I think the keys to that are, we do have pretty strict coding standards, so we do enforce those rigorously, through continuous integeration environment, and code reviews. Every piece of code that gets pushed to production has to be reviewed. And that’s literally 4 or 5 coders, sitting in a room, going line by line through change sets, and stuff like that. And that sounds really time consuming, but without question, on every code review I’ve sat in on, we’ve found one show stopper bug. So, those have been crucial, in getting things put together. The other things we did as we grew, is we broke the team up into smaller teams, so we have a development team of 20 – 25 developers, but that’s broken up into teams of between 3 and 5 developers. This really helps in a couple of areas. 1, it enforces code ownership. So everybody has this problem. I code this, then I go and work on something completely different. And 6 months later I come back to this code and I’ve forgotten. I don’t remember any of that. Where as if you’re always working in the same area of the sites, not only do you remember a lot more, you’re a lot more familiar with that. But also, you feel a bit more of a sense of ownership over that. You’re not just this hired gun that’s come in and ploughs through this feature then moves on to something else. You have your own territory that you need to keep track of. You need to keep really nice and what-not. So we did that, and then we have a bunch of core frameworks, that we’ve built. We have a small application framework, we have an AJAX framework, and now, we have this data access layer that we’ve been building up called IDDB. So I think those are pretty crucial too. It’s difficult to find coders that are intimately aware of memcached, and race conditions that exist in memcached, and um, we have to be very selective about what fields we add indexes on in mySQL. We also have to be very selective about how we store that. Normalization flies totally out the window, if you’re a DBA guy. A lot of concepts, they are not bad developers, by any means, they do great AJAX work, they do great application level PHP work, but if you don’t have frameworks in place for them to not have to worry about the super-super complex stuff. It’s going to be really difficult to hire, and it’s going to be really difficult to, you know, get a lot of stuff running in parallel and stuff.

Paul: Wow.

Joe: Yeah, and then we also, another one of the things we’ve adopted, is the agile SCRUM. So we’re doing sprints, and we’re running those in parallel now across all the teams. So right now we have 4 major projects going on right now.

Paul: Ok. So you talk about a sense of ownership there, and the developers are split down into multiple certain areas. You know, does that not get boring, for the developer, having to work on the same bit of code long time, or do you rotate people?

Joe: Well, we don’t currently rotate people, the team structure’s been in place for about 4 or 5 months now. And you know, most of the work they get is fairly immediate, and we’re moving major projects like Facebook connect, so the "Tools and integration team", their doing facebook connect now, and after this, they will maybe work on a new version of the API and so on. It’s written out to wide swaths of the site, so that we have "Site Apps" which does like, all the different applications on the site. And then we have "Tools and Integration" where we have the external projection of Digg, then we have "Core Apps" which is like, search, R&D stuff like recommendation engine, and what not, and then we have "Core Infrastructure".

Paul: So it’s probably enough to be interesting?

Joe: Yeah, we have pretty broad teams, and also, when we put people on those teams, even if someone has an amazing core infrastructure background, but they say, look, like, one of our UI guys, used to be really heavy into core infrastructure stuff when he worked at Quest, and managed massive warehouses, but he says, like, "That’s not what gets me up in the morning any more". It’s like, "Javascript UI interfaces are". So we try to put people on the teams where, you know, where their passions lie. And that’s kind of another thing that people need to recognize. And that’s like, not all developers are driven by, or interested in the same things. We have some, what I would call "UI / Frontend" developers, where like, they could care less about PHP, but we have PHP guys who could care less about Javascript. So I think, recognizing strengths and weaknesses, and capitalizing on those, is pretty important too.

Paul: OK, one last question to finish off, and that is, well you know, the kind of things that you’ve been talking about are fascinating to hear, about the kind of challenges that you have to face with the size of Digg, and the amount of traffic you have to handle. But obviously a lot of people who are listening to this podcast, aren’t at that stage. They are not working on massive projects like that. So I’m really interested in what advice you would have, for those who are just beginning to suffer from scalability problems, and they feel that it’s coming, and it’s something they need to be paying attention to. But it’s not on the enormous scale that you have to deal with. What things can they do right now to prevent problems down the line?

Joe: Um, I think, the easiest things you can do, is you need to re-think the LAMP acronym, because that stack is actually no longer really that stack. I would take Linux, and I’d take Apache out of that stack, and it doesn’t matter, as long as you’re running on a Unix. And as far as Apache goes, Lighty and EngineX are much better at getting a lot more money out of your box, as far as scalability goes. The two areas, that I think people, they sound hard, but they are really easy. One of them is installing and using Memcached, and the other one is installing and using a queuing system of some sort. And I think, like, recently I went through this with a little side project, called "Please Dress Me" which AJ and Gary Benashack and I did.

Paul: Oh, yes yes.

Joe: And we had a very small virtual server at MediaTemple, that survived pretty crushing blows from TechCrunch, Digg, BoingBoing, with almost no load. And that was like, beforehand, memcached is so second nature to me at this point, that I was just like, "Oh, well I’m just going to cache everything in memcached", and it was literally just like this RAM spewing machine. It didn’t actually hit the database. Actually my sysadmin at MediaTemple was like "Something’s really weard, MySQL is only doing like 1 query a second, and you’re doing like 500 requests per second from BoingBoing. So I’m cached. Yeah memcached is just like, it takes literally 10 minutes to install, and probably another hour or two to implement.

Paul: Wow, that sounds excellent, that’s really good advice. Joe, thank you so much for coming on the show, and I can’t wait to get you and Daniel fighting with one an other in the not too distant future. I’m hoping to get a good violent argument about designers and developers, just because I can.

Joe: Laughs.

Paul: I was a little bit disappointed when you guys sat down at Future of Web Design, were far too nice to one another, compared to the evening before, when you’d had a bit to drink, and you were talking in the restaurant. That’s the kind of conversation I want, that real vicious session.

Joe: OK, I’ll make sure that Daniel and I get liquored up before coming on then.

Paul: Yeah, that’s the answer. Ok, thank you so much Joe, that’s really good advice, and we’ll talk to you soon.

Joe: Thanks Paul, bye.

Thanks goes to Nathan O’Hanlon for transcribing this interview.

Back to top

Listeners feedback:

Top web designer applications

Often this section of the show consists of questions for myself and Marcus. However for a change, I thought we should ask the questions. Via the forum, the boagworld site and twitter I recently asked you to vote for your ‘favourite web designer application‘. The response was overwhelming and you can see the complete list of suggestions on UserVoice. However, here are the top 5…

  1. Firebug – Firebug is a Firefox addon that puts a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. A less popular suggestion was the Web Inspector in Safari.
  2. Web developer toolbar – The Web Developers toolbar is a Firefox addon that provides a variety of web development tools. You can disable CSS and Javascript, visually highlight elements, manage cookies and much more. A less popular alternative was the IE developers toolbar.
  3. Adobe Photoshop – A professional image-editing and graphics creation software from Adobe. It provides a large library of effects, filters and layers. This is the grandfather of such applications and many (like myself) use it out of habit more than anything else. Less popular suggestions included Fireworks, Illustrator and Inkscape.
  4. Coda – Coda is a one window development environment for the mac. It includes FTP, text editor, browser preview and even terminal window. A beautifully designed app it appeals to the more visual web designer. Simple, easy to use and elegant.
  5. TextMate – TextMate is a powerful text editor for the mac with an extensive plug-in architecture. From its code highlighting in near endless languages to support for numerous version control systems, TextMate is probably the most powerful text editor out there.

If you disagree with the Boagworld Listeners top five or want to see the other entries then head on over to UserVoice and vote for yourself.

Sending out bulk emails

My second listener contribution comes from the forum. It is a question from Richard about sending bulk email.

Richard writes: I need to send out bulk emails to approx 200k registered (opted in) users on a monthly basis.

Does anyone have any recommendations for an outsourced bulk email provider?

As with the previous contribution I want to focus on your responses rather than my own. This is what the Boagworld community had to say…

Jamie was the first of a number of people to recommend Campaign Monitor. Judging by the feedback from the forum they offer an excellent service but are expensive when compared to others.

As well as recommending Campaign Monitor Nick mentions Silverpop, which he described as ‘an enterprise affair’. Apparently it is not as polished as campaign monitor but considerably more powerful.

Phil recommended two more, Mail Chimp and Mad Mini. He hasn’t used them personally but the prices look good and he says the user interfaces appear polished.

Doug doesn’t recommend a specific service but does refer Richard to a post on Creative Tips which provides a comprehensive review of Campaign Monitor, MailChimp, AWeber, and Constant Contact.

If you have suggestions for Richard or would just like to share your experiences of using bulk email services then contribute to the thread in the boagworld forum.

Back to top