Adapting to accessibility

Posted in Accessibility, Mobile on March 25, 2010 by Phil Powell

Is it time for us to take a fresh look at the subject of accessibility? Phil Powell offers some thoughtful insights into how we might make the web a more accessible place – not just for those who are disabled, but for everybody.

Let me get this out of the way at the start: I’m a disabled web user, registered as severely sight impaired. I’m also a web designer and developer – have been for over 10 years. I’m not just a tinkerer: I’ve worked for the likes of Audi, Levi’s, Adidas and even won a few awards for my work with U2.

In the early days, like many of us, I didn’t take issues of accessibility as seriously as I ought to have done (I committed my fair share of usability sins and implemented some really bad design decisions). But, I saw the error of my ways, and nowadays I’m a loud advocate for good standards and better accessibility. And, as both a disabled web user and a web practitioner, I think I have some useful insights to offer on how we might make the web a more accessible place, not just for those who are disabled, but for everybody.

We’ve come a long way

There have been fantastic advances in improving access to the web over the past ten years or so. The wider adoption of web standards by both browser vendors and web practitioners has bought huge benefits to all types of disabled users. These advances have helped to inform trends in web design and development in a myriad of positive ways.

Personally, I’m finding that my web experience is steadily improving thanks to these adoptions, which is a fantastic thing. There is still some way for us to go though. I still occasionally stumble across high-traffic sites which are terribly inaccessible: code soup which makes a site unintelligible to screen readers; design treatments which bewilder anybody with learning difficulties; tiny hit areas which make for horrible target practice amongst those with motor disabilities. These aren’t old, creaking relics of a by-gone cyber-era either: they are new, high-profile commissions.

Sure, not everybody is signed up to web standards, nor is every web designer or developer experienced enough to appreciate the importance of accessibility. But from my experience, it seems that public sector and cultural organisations are the ones who are failing the most. This always baffles me a little, as you’d expect publicly-focused bodies to have a commitment (and in many cases be required) to ensure accessibility to all. Ignoring disabled members of society in the physical world is wholly unacceptable, so why do we still tolerate it in our virtual world?

The fact is that not every disability is the same, and the acuteness and intricacies of a disability can affect people in so many varying ways.

Well, part of the reason, I think, is due to a slightly skewed way we think about disability. It is easy to fall into the trap of thinking of someone with a disability as part of a generalised group: someone who is blind, who is deaf, who is a wheelchair user. The fact is that not every disability is the same, and the acuteness and intricacies of a disability can affect people in so many varying ways. This misconception makes it a complex and confusing subject to understand, especially for people with deadlines.

But I think there’s something else we need to address.

There’s a bigger problem

Our industry isn’t innovating enough. We’re simply not being intelligent enough with our design of the web.

Now, that reads as quite a bold assertion, so I’ll try to explain where I’m coming from.

I’m a firm believer that good design should be both beautiful in it’s aesthetics and in the way it functions. But it seems that a lot of the time, when it comes to designing for the web, aesthetics and functionality are treated as two very separate disciplines. I’m generalising, but I’ll bet that the approach to the design of most web projects is still either: a great visual style which needs to function well; or a functional architecture which needs to look good. One generally informs the other.

I’d like to see the wider adoption of a new, emerging type of web design, where style and function are embraced as a single, integrated discipline. Gone are the days where a designer’s job stops when they hand over a Photoshop mockup to a site builder. And similarly, gone are the days when site builders try to design in the browser and then a visual style is conjured up around markup. Both of these approaches have their benefits, but equally, both have their failings. Can we not be a bit more inventive?

Accessibility can be beautiful

I think this is where accessibility could step in. I think accessibility can be a killer tool for some amazing design. But it needs us to look at it in a new way. As much as any of us claim to take it seriously, how often do we think about how it can be done better? The tendency is to just tick the boxes and then move on to another pressing task.

Rather than being a secondary consideration in the design and build of our web experiences, we can better use the disciplines of accessibility and usability as tools to inform and inspire beautiful aesthetics and functional design.

Accessibility should be embraced as a way to allow us all to adapt our online experience to fit the way we use the web.

Good accessibility doesn’t just have to be something which assists people with a disability. We need to flip that idea on it’s head. Accessibility should be embraced as a way to allow us all to adapt our online experience to fit the way we use the web – disability or no disability. Better access to the places we visit on the web doesn’t just benefit people who are disabled, it benefits everyone.

We’re already heading there

Apple are a rare example of a company who take good design seriously and who are already doing amazing things in this field, albeit with installed software.

I have very low vision due to a rare form of albinism. My distance sight is really bad; I wouldn’t be able to recognise your face across a room. But my near vision is exceptionally good; I excel when working with pixels and detail. I predominantly do most of my work on OS X because it has so many low-level accessibility aids built right in: I can zoom the screen with keyboard shortcuts; well-adopted UI guidelines make it easy for me to understand a new app; standard controls and focus help me to navigate without a mouse; finding files, running applications and searching can all be done swiftly and easily using the keyboard.

I adopted an iPhone for the very same reasons: not because I’m an Apple fanboy, but because it brings with it the same accessible features as my operating system, features I’ve struggled to find in any other mobile device.

For me, these are amazing productivity tools. I tend to work faster and with more efficiency than my well-sighted peers, and that’s purely down to my use of accessible tools. I’ve adapted my working world to not only achieve an equal footing, but my adaption allows me to be more productive than many able people.

But these enhancements haven’t been developed for the sole use of people with a disability. They are elements of good, well-considered design, beautiful in both aesthetics and function, which are available to all. Try it right now: if you’re using a fairly modern version of Safari, hit CMD-F, then start typing a word, and you’ll see a perfect example of what I mean. If you’re using another browser, chances are you’re missing out on the advantages of a piece of simple, but clever, assistive design.

Example of CMD-F functionality in Safari

A subtle, but important distinction

Assistive accessibility means providing add-on tools which help people. My local Co-op print braille labels on their wine bottles: a nice bit of assistive design which helps us visually impaired lot choose our tipple. A worthy amount of effort goes into the transcription of subtitles and closed captions for TV programmes and DVDs: a service many of us don’t use, but which is an invaluable assistive tool for the hard of hearing (and incidentally a tool which is only now appearing as a feature in mainstream online video services).

Adaptive accessibility is about building things into our everyday world which aren’t used by everybody all of the time, but are available as a helper to everybody all of the time. It can be something as simple as a handrail on a stairwell: the more sprightly among us may bound up stairs two-at-a-time; those who are more elderly need the extra support; sometimes children use it; if you’re tired, lazy, carrying something heavy you might use it. You adapt your behaviour through use of the tools around you, depending on all sorts of factors.

I see no reason why this analogy can’t be translated into our experience of our online world. We’re moving away from the desktop, to devices in our pockets, on our laps, in our cars. We can go online virtually anywhere, with different distractions; different demands for our attention. We’re moving away from navigating with the keyboard and mouse, to using touch, gesture, using our voices, using our ears. This might come as a surprise to you, but us “disabled” lot are way ahead of the game when it comes to alternative ways to navigate the online world.

I don’t have any answers

So how do we start building more adaptive online experiences?

I do not have a simple answer as to how we achieve this, I’m merely posing the question and acting as an advocate for the discussion of ideas. Perhaps it involves rationalising the UI design of the web (the adoption of iPhone design conventions shows an early example of what this might mean); perhaps it means decoupling data and presentation even more than we already have, and looking at a more ubiquitous approach to design; perhaps it means we’ll see the emergence of new creative workflows, and a new breed of designer (there are plenty of “creative technologists” emerging who fit the mould). Perhaps we’ll invent new tools, services and devices which change the way we experience, and perceive, the web.

Or perhaps we’ll just keep plodding on for the next ten years, pontificating and prevaricating, waiting year on year for the ratification of standards, stifling our creativity, innovating by increments, never really being progressive, never being bold. History has taught us that freedom and inclusion can reap huge rewards for all members of our society. The world wide web has shown us an inkling of it’s potential. But unless we take a good, hard look at one of it’s core principles: access for all – then that potential may not have a chance to blossom.

If you recognise that the mobile web is important and you need help deciding on a strategy, then book a mobile consultancy clinic.

Book a consultancy clinic or contact Rob about a more in-depth review.

Running a successful web design agency

Posted in Web strategy on March 24, 2010 by Paul Boag

Mike and Keir from Carsonified interview Marcus and Paul on how they have made Headscape the successful web design agency it is today.

Keir: Okay, hi Paul

Paul: Hello!

Keir: Thanks for joining us.

Paul: That’s alright!

Keir: Thanks for agreeing to let us turn the tables.

Paul: Are we not saying hello to Marcus?

Keir: Oh sorry, hello Marcus!

Paul: He’s refusing to talk now!

Marcus: Hello!

Keir: So we’ll ease you guys in gently, first of all to you Paul, obviously now your company has grown big and strong and you’ve moved on really from being a web designer / builder…

Marcus: I want to see where this is going!

Paul: You’re going to ask me what my job is aren’t you?!

Keir: No! I’m not going to ask that I’m just going to ask do you miss doing that, being hands on, that sort of thing?

Paul: I have moments of it, yeah. Because I’m somebody who has a short attention span, and I like skipping from thing to thing, I felt like I’d reached a point where when I was designing, all my designs were looking the same. Which was an indication that…

Keir: I think Marcus is nodding for some reason Paul..!

Paul: That my designs all look the same?! So that to me was the part where I had to start moving on and doing different things. But no, I dabble still, I do Boagworld, I do Headscape, but yeah, I do miss it sometimes.

Headscape website

Keir: On the same subject, do you find it hard to relinquish that control at all?

Marcus: No!

Paul: (Laughs) No! Not at all!

Marcus: Sorry I was answering for Paul!

Paul: And I think you’re correct! No, I have certain standards that I think we should keep to as a company in terms of quality of code, that kind of thing. But the guys at Headscape are very good. So it’s often semantic arguments that we have rather than anything of value! In terms of design I have to battle against the fact that I have personal preferences in that I have a design style…you have a design style. When you’re working with a designer, not everybody at Headscape produces design that is in line with my personal aesthetic, and it should be that way because you want a broad range of stuff, but sometimes I struggle to recognise that this is a good piece of design, it’s just not what I like.

Keir: Is there not a Headscape aesthetic, a little bit?

Paul: I think there is to some degree, we pretend there isn’t and we tell our clients there isn’t, but I think there probably is, and I think that’s largely come about (a) because of my own personal bias, but (b) because of the type of clients we work with. With the majority of clients we work with we would be laughed out of the room if we did the kind of stuff you do.

Marcus: That’s a bit harsh! Bloody Hell!

Paul: I’m not saying its bad! It’s great design!

Keir: I think a nice big pumping heart on the homepage of Headscape? That would go down a treat Paul!

Paul: And I know that Mike can do that kind of design.

Marcus: We’ve been talking Mike up a lot lately.

Paul: I know!

Marcus: We’ll have to start interviewing you now!

Keir: Right, back to the questions!

Marcus: As an inspiration for the guys at Headscape to maybe go down a different route, and your work is very inspirational from that point of view. They all say ‘Ooo Yeah, we like a bit of that!’

Keir: That’s nice to know!

Paul: They need to have opportunities to break out from the constraints and the boxes that they’re put in because of the type of clients that we work for.

Keir: So that raises an interesting question, how do you deal with that internally when someone comes and the brief maybe doesn’t quite need a new avenue to go down – how do you hold a designer back from experimenting, do you suggest other outlets internally?

Paul: To be entirely frank with you, our problem at the moment is the other way round, that our designers self-censor themselves, because they work on so many of these kinds of sites, and they predict what the client is going to say and so hold back sometimes.

Keir: And are they normally right or is there room for expression?

Paul: Yeah, they are normally right, but that’s not the point. I see it as our job to push the client. I mean there’s a classic example, I won’t name the client but there was one recently that said they wanted something ‘different’ and ‘radical’ and so we said ‘are you sure?’, and then we did all this cool stuff for them and then they said ‘could we tone it back?’ and so I turned round and said ‘you wanted something radical?’ to which they responded ‘Yeah, we didn’t really did we?!’ (Laughs)

Keir: So what do you see as the hot topics, or is there anything in the web world right now that really excites you? Or even you Marcus?

Paul: (Pauses, sighs) No. No!

Marcus: I’m much more business oriented, so things that excite me are…

Paul: Spreadsheets?!

Marcus: No, no… God no! Because we’ve been doing this for a long time, and we were never the sort of people to say ‘in five years time we’d like to be there’ but then suddenly we find ‘Oh, we’re there!’, so then you find yourself saying ‘What now then?’ and so I’m more interested in what the new thing would be. Because I’m not a designer, I’m not a developer, so I don’t really feel it’s my job to get enthused about anything in particular, HTML5 for example. I’m like, ‘great, cool!’ Paul is much better placed to answer that question as it’s not my specialism. My specialism in this world, if I have one, is talking to people who have websites about what their website could do for them, and so to a certain extent I need to be informed, but he does that for me.

Boagworld Podcast Live

Image Source

Keir: So how do you split your work for a new client? I contact Headscape for whatever reason, we agree to meet, I give you a brief outline of what my requirements are, would I speak to you (Marcus) and what sort of stuff would you want to get out of me and then would you hand over to Paul or the Project Managers?

Marcus: It varies. If it was a really big project I’d say to someone on the phone…

Keir: Give it to someone else!

Marcus: (Emphatically) No! No! Rather than have a lengthy chat on the phone I’d say I’ll come and meet you, and it would usually just be me at that point. And for virtually all projects people will come to us with a ‘We want to do something’, not a ‘We’ve heard you guys are quite good, what can you do for us?’ 99% of the time people have a pretty specific idea that they want us to do x, y or z, so I’ll go along and talk about that, and question why they might want to do that – that’s really the big part of it actually. Why do you want to do that? How’s that going to help you? Is it going to make you more money, is it going to make people who come to your site happier?

Keir: So very much from the business angle, the benefits of having a web presence or what expanding it will do for their own business? Bottom line stuff really?

Marcus: Yeah, to a certain extent, but also that’s the kind of nice client who comes to us. Quite often what we’re doing is responding to invitations to tender, and then it’s case of a brief will come through and we will respond usually with a phone call and questions – what do you mean by this and this and this, are you sure you want to be doing that. We’ll respond with a proposal and hopefully we’ll be invited back to talk to these people, at which point I’ll wheel him out (Paul!) and he’ll enthuse at them for half an hour!

Paul: It takes me a while to latch on to the part of the project that excites me, because if you go into a pitch not excited about the project, you ain’t gonna win it.

Keir: Sure.

Paul: But once you’ve indentified that thing in it that really grabs you and you want to do then I’m away and it’s great. So I mean, I tend to go in at the pitch stage and I give the big presentation. Then we normally, if we win it, at the beginning part of the project is where I flesh out that stuff that I was enthusing about, so where we really develop and set the direction of it. I talk the client through the process, help them to focus the vision, and that’s done in conjunction with the development team, the developer, project manager, designer, all the rest of it. Once that process has been done I step back and the project manager runs with the project.

Marcus: That’s the big bit out that I do. Requirements, information architecture, stakeholder interviews, all that stuff, and then I’ll step away from it usually. Then project managers, designers and developers get on and build it.

Paul: Periodically through the project I keep my eye on it to make sure that that vision that was created at the start of the project hasn’t been lost at any stage.

Keir: Just quickly because I’m really keen to know, there’s a lot of talk in the internet about, and I hate the term, spec work. Mark and I have talked about this a lot. I’m of the opinion that doing a tender or response to a proposal could be deemed as doing spec work in some respects because by the definition you’re doing work – how much time or value and what’s the end product of that…

Marcus: Shall I tell you how I define it? I as a sales person, and I do information architecture as well and that is all paid work, but at least 50% of my role is as a sales person and sales people don’t get paid by clients.

Paul: They’re a cost of sale.

Marcus: So if it’s work that I’m doing then it’s fine, if I have to get a designer to do work as part of that document, then I don’t think that’s right

Paul: Because those are chargeable people, I’m a chargeable person.

Keir: We know that Paul!

Paul: The most that Marcus would require of me would be to bounce some ideas around in the proposal stage. The pitch obviously is free; we would go up and do that. But the way that I view it actually is that spec work in my opinion is work that you give to a client that could potentially be used in the actual project. So our proposal documents aren’t spec work….feel free to disagree

Keir: No, it’s interesting because you make it sound like you go to a pitch with nothing?

Marcus: Correct. We don’t pitch any graphics ever.

Paul: No. Never. Never any graphics.

Keir: OK, so how much work would you say goes into a pitch?

Paul: Into the pitch itself?

Keir: Not the actual time of the pitch.

Paul: OK, preparing for the pitch, well the proposal, a lot of work goes into that.

Marcus: At least a day. Usually two.

Paul: Because that, with the type of work that we do, there’s quite a lot of boilerplate in it, ‘We’re Headscape this is what we do’ but with large public sector organisations that we tender for they want to know a lot of detail like financial history, they want to know the name of your third child, but it’s not a document that necessarily contains lots of ideas.

Marcus: A good way to think about the process is – we’ve won the work, and the process usually starts off with him analysing the existing website, the brief they’ve got, talking ideas, he’ll make a bunch of recommendations out of his own mind as it were. I’ll then test that on a load of stakeholders via one to one interviews. Based on that we’ll then put together a report which pulls all that together. Then we’ll do information architecture, then we’ll do mood boards that will kick in to the actual design. And that’s a load of work that I’ve just described. If we value giving designs up front then all of that is pointless.

Paul: It’s the fact that before you make a recommendation to the client, either in terms of visuals or in terms of the direction or vision of the site, you need to understand the client, you need to understand the business and the objectives. You never get all of that from a brief. It doesn’t matter how thorough they think the brief is. So therefore our proposals are very detailed responses to the brief that has been provided. But oftentimes that not what we’ll end up delivering. Often we’ll win the work, do a lot of research work and then turn round to them and say ‘Actually what you asked for out of the gate was this, and that’s not the right thing, we need to be going in this direction.’ So the proposal document only really exists to establish our credibility and to get us to the point of actually winning the work. There’s not loads of stuff in that proposal that they could take and say ‘A-ha’ I really like these ideas I’m going to take these and go with another agency. It’s not that type of document, but with a piece of speculative design they could do that, they could say ‘A-ha’ I really like this bit of design, I’m going to take this and give it someone who is cheaper.

Marcus: To finally nail this point to the table! We see proposals and pitches, the proper response from us is to basically tell our prospective clients that we can do a really good job, and give them lots of reasons why. We think your project might be really similar to the one we did for this client. Look at all the work we did on this and this was the process we went through, with lots of pictures of what we did for that client, but no actual ‘ We might be able to do something that looks a bit like this for you.’

Keir: That’s a historical thing though because you’ve got a canon of work, you’ve got heritage. What would your advice be to young people up and coming, 18, 19 20 years of age when you’ve not got that canon, you’ve not got that history?

Paul: I would encourage them to actually do some voluntary work.

Keir: Build up the portfolio

Paul: Yeah.

Marcus: It’s the same when you’re looking for a job, we want to see your portfolio, what you’ve done before and we think clients are the same.

Paul: My attitude is, let’s take a piece of speculative design work is going to cost two days of a designers time – I’m just plucking random figures out of the air here – but you could spend two days doing speculative design work for some dodgy guy who says ‘If you do some speculative design work you’ll win the business’ – and let’s be honest, these are the kind of guys you are going to be working for when you start out – screw that for a game of soldiers, he’s just trying to get one over on you. I’d prefer to spend to the two days working for a local charity that have got no money but a really worthy cause, give them a great design that they can take away and build or do what they want with, and then I’ve got a good portfolio piece.

Marcus: That said, we used to do designs up front. We were shooting ourselves in the foot doing it.

Keir: Before we move on, I think the one thing that struck me was of your comments, and I think it was in response to a particular blog post was that spec design work was actually bad for the client, more than it is for the designer which is quite a unique perspective

Paul: I was reading some of my stuff over that because I think we have a rock solid argument. I won’t go through the whole argument now because there are other things to talk about but basically it boils down to the fact that as a designer or developer you are not well enough informed at the spec stage to produce anything other than a piece of show-off work – so all you are doing is going ‘Taa Daa!!’ look how talented we are! You are not solving any problems, you are not challenging their brief, you are literally just doing a bit of fancy work. And the reality is that if you are the client you are paying for it anyway, because we have to roll the cost of sale into the project. But here’s the killer. You’re not just paying for the piece of speculative work I’ve done for you, but you’re also paying for the speculative work I did for ‘Mike’ who turned us down., because we still have to recover the cost of time we spent doing Mike’s piece of work. So the reality is your paying for your own speculative piece of work and for other people’s speculative piece of work! Sorry, I’m pointing aggressively!

Paul Boag speaking at Future of Web Design

Keir: I’m retracting quickly!

Marcus: I’m gonna get him a box to stand on!

Paul: But I get really annoyed about it and really passionate about it. I would never hire a company that does speculative design work because I’m paying for other people’s design work! It doesn’t make sense!

Keir: Moving swiftly on! (laughs) Going back to the original question! So there’s nothing exciting going on in the world of web?

Paul: Sorry, I’m very aware we’ve gone off on a tangent! There are two levels of excitement. There’s the Silicon Valley, web app type of excitement that everybody features. The cutting-edge, we’re-some-fancy-agency-startup-with-lots-of-venture-capital. And then you go to a conference and there are large companies that are ‘dealing with scalability with over a million hits!’, and you think to yourself ‘very interesting, but no kind of impact on my life’ – but over time that sort of cool stuff tends to trickle down, and I get excited at the next tier down. I get excited when I start to see some of that really cool stuff that maybe is old hat now, that everybody was talking about a year ago or maybe two years ago, when I start seeing that appearing on average websites. Websites that the vast majority of us are working on.

Keir: Can you give an example of something that has done that for you recently?

Paul: Just this whole web application culture of Javascript driven, application-like / desktop-like, because for such a long time that was only for things like Gmail and Google Maps and stuff like that, but now that’s all trickling down and you’re starting to see rich internet applications in boring everyday sites, whether it be a university site or you know, Sussex Police! Anna was telling me about a Police website where is you hear a police helicopter flying over you at night you can look it up the next day and find out why it was there and what it was doing! And all of those Web 2.0 things about openness and transparency as well as some of the technology stuff like AJAX, all of that stuff is now becoming mainstream. And I get excited when fringe stuff becomes mainstream, and the bigger community of developers outside of ‘The Valley’ all start doing it. That’s why I get excited about the web, and that’s why I get excited about stuff that everybody else was excited about a year or two years ago!

Mike: We wanted to move on to the subject of blogging. As a company I believe you don’t blog?

Paul: Not as a company no.

Mike: So you blog as Boagworld, but recently we’ve been intrigued to see you’ve been blogging more personally on Posterous so really we’re trying to work out, is Boagworld purely on the education side and those on your micro-blog are more personal? We were particularly struck by one article – what was the title? ‘The Idea of Personal Brands Stinks’, you use AudioBoo, you have a lot of outlets, how do you decide what goes where?

Paul: You’re making a fundamental mistake here!

Paul: I make many Paul!

Paul: The fundamental mistake you’re making is that you’re presuming that I have a strategy! Which I really really don’t!

Mike: The question should have been, what do you get out of blogging professionally and personally?

Paul: I’ve never been so professionally interviewed!

Keir: Apparently Anna can cut stuff out! It’s apparent that you might get work out of your blogging, I don’t know, but you obviously get more out of it than just that?

Paul: OK! Let me see if I can find a question in there somewhere!

Keir: We don’t do this for a living you know!

Paul: There’s a few things to comment on. First of all, without a doubt, blogging is a major marketing tool for Headscape. The vast majority of our new business comes in via that. It is definitely and categorically a business tool. But it didn’t start out that way. When I started out blogging, it was a little bit of ego – we went to @media 2005 and they got different bloggers to stand up and I thought ‘I want to be like that!’ so I get very inspired and I started blogging partly because of that. But I quickly realised no-one was interested in what I was writing at the time so the blog for me became this place where I could take what I was learning and picking up and rationalise it in a way that made sense to me. So it became a way of me wrapping me head around everything that was going on. It was also a way for me to be storing and holding the stuff I was learning because my memory is horrendous and to this day I find myself saying ‘I’m sure I’ve written something on that’ and I go onto my blog and it’s a way for me to remember. I know it sounds stupid but I really do this, and so I’ll read through my blog and say ‘OK, so that’s what I’m supposed to think about this!’ But it really helps to clarify my thinking – so that was a big part of it. But Boagworld, the domain was bought and I thought I’d write a bit about web design, it was my personal website, and as I wrote more about web design as my head was buzzing with that at the time as this was the time of Web Standards and we were getting into accessibility. And then other people started to take an interest in it and it grew and grew – and then we started the podcast which really came out of the fact that (a) I’d got an iPod for Christmas that was just about beginning to support podcasts, and so I looked for a web design one and there wasn’t one so I thought ‘I’ll do that’ because it’s easier than writing one and I’m crap at writing.

Marcus: (Shyly) Hello, it’s Paul, this is the first ever podcast!

Paul: (Laughs) Which is pretty much what it sounded like!!! It’s like stepping back in time listening to those early ones.

Keir: How long ago was that Paul?

Paul: 2005/2006? I’ll have to have a look. No, it must have been 2005. It was growing, it was building momentum until it eventually became this thing of it’s own. It was beginning to have marketing benefits and I was beginning to spend some of my work time doing this. So relatively recently I came to this realisation that Headscape had robbed me of my blog! Which I’m quite happy with as it’s turned into this great marketing tool which is fun to do and I love it. But I had nowhere to share, I dunno, a silly video of James or some cool thing that was nothing to do with web design or whatever else. So that’s where Posterous came from. It was just an easy way for me to talk about something that wasn’t web design. Occasionally bits of web design get in there – I’ll tell you my dirty little secret for this one, which is that often, if there’s an idea I’ve had, I’m too lazy to write a blog post about it, I’ll record a video. But I won’t put the video onto Boagworld as there’s an expectation that I’ll have a transcript of it to make it accessible, and so I just put it on Posterous to get around it which is really naughty and I should be ashamed of myself! But I do occasionally do that. But most of the time Posterous is just about me having fun. Then you get into things like AudioBoo – AudioBoo is my idea of micro-podcasting, like Twitter is micro-blogging. So it’s little snippets of tips and advice. So, how do I decide what goes on where?

Keir: You’re interviewing yourself now!

Mike: Let’s go and get some coffee! Marcus?

Paul: So basically, if it’s not good enough and not long enough to be a blog post, it’ll become and AudioBoo, that’s if it’s about web design. If it’s about web design and it’s too long for an AudioBoo, it’ll become a blog post. If it’s not about web design, it’s Posterous.

Keir: So you do have a strategy!?

Paul: But where it falls down is where I’ll do a little AudioBoo about something which is the beginning of a thought, then it ends up as a blog post and then it ends up on the podcast as well. So it kind of ripples through.

Keir: That’s cool – it’s interesting to know all that but what I’d personally like to know is what makes you want to share such personal stuff sometimes? I know you’re a Christian and you talk about God, but you also talk about some other personal stuff sometimes too? What is it in you that makes you want to do that?

Paul: I think it’s two things. It’s two major parts of my personality. One is that I am a massive extravert, I’m a massive show-off – I’m never happier than when I’ve got a massive audience. To be entirely frank, you know!

Keir: Had anyone spotted that?!

Paul: Unlike Marcus I can’t sing or play a musical instrument! The best I can do is jump up and down, wave my hands in the air and say ‘Look at Me!’ So there’s that aspect to it. I think there’s another aspect to it. Somebody said to me right when I was a young kid, they said Paul, the thing about you is that you live with your heart on your sleeve, what you see is what you get. And I still think I’m like that now. I’m a very open person. If I’m grumpy everyone knows I’m grumpy, if I’m happy everybody knows I’m happy. I live my life in the open and always have. So I do that online, because I’m not a different person online than I am offline, and I know a lot of people are, but I don’t choose to be that.

Keir: Thanks Paul, that’s a nice explanation.

Mike: OK, one of the questions we have is about honesty and speaking and blogging. Do you ever…

Paul: I make up stuff all the time!

Mike: But it’s very hard I think to always be honest, in all spheres of life. Do you feel you are always as honest as you are?

Paul: Does this go back to the conversation we were having previously Mike?

Mike: It does yeah.

Paul: Because we had this conversation, me and Mike about when you stand on the stage, and sometimes you get off after a presentation and sometimes you go ‘Why did I say that?’ and you think, ‘I said that because I think that’s what people expected me to say’ rather than what I was actually thinking. I mean you gave the example about where you gave a talk about sketching where you said ‘Get away from your computer and start sketching’ when that’s not actually what he does. (Laughs) Well it was either a case of share an example where I had done that and I would rather humiliate you than me!

Mike: Yeah, I wanna reverse that! Anna can apparently cut things out.

Paul: No, no, no editing. We tell people that but it’s a lie! And I’ve done similar things, I’ll be honest. For me where the line comes with honesty is, I don’t think there’s anything wrong with saying ‘I think this is the way it should be’ – but where you fall down and it gets a bit shady is where you say ‘I think this is the way it should be’ but fail to mention that you’re actually there yet, we’re heading in that direction. And I’ve made that mistake too. But I do try and be transparently honest – I don’t try and dress up anything that I talk about, and in fact I’m probably a bit self-deprecating actually. Actually I think a lot of people think I’m a bit of a joker and a bit of a moron. But I do like to simplify things and I do like to take the mystery out of things – I think there are a lot of people, and this goes back to our conversation, I think there are a lot of people making out like their job is a lot fancier, a lot harder than it actually is – and we do like to justify our own existence by using lots of clever words., and having ‘processes’ and ‘methodologies’ and ‘systems.’

Mike: Cool, thanks, that’s interesting. So coming on to status, how important do you think status is in the industry?

Paul: OK, well I’m glad you worded that question the way you did, as I was worried that you were going to word it ‘How important is status is to you?’, and you’d purposely put the question of honesty beforehand! (Laughs)

Keir: We were going to ask ‘How big is your ego?’ but then we’ve scribbled that out! But this also comes off the back of your article about personal branding; the idea of web celebrity, a lot of people would refer to you as one of those.

Paul: I’m going to be entirely honest about this right – which I don’t think a lot of people are. Yes, I love it.

All: (Laughs)

Paul: Of course I love it! Of course you’re going to love it when someone comes up to you and says ‘You’re Paul Boag aren’t you, I really love what you do!’ and anyone who pretends that they don’t like being praised is a liar.

Marcus: I’ve got quite a funny story actually. I went to the Comedy Store in Leicester Square last Friday evening, and we got there and sat in our seats, and there was this young couple, both of them in their early twenties came and sat down next to us for the first half. And I kept seeing this guy look at me, and I thought ‘He’s recognised me!’

All: (Laughs)

Marcus: Nothing was said! Interval comes, I get another beer and sit back down. And he said, ‘I think I know who you are’ and I was like…you’ve got it wrong!

Keir: You’re Paul Boag!

Marcus: But supporting what Paul’s saying, I get recognised at conferences. ‘Say something’ that’s what they always say.

Paul: Yeah!

Marcus: Especially Americans!

Marcus: So I said to one guy, ‘You’re a web designer are you?’ and he said ‘No, I think my Mum’s got one of your records!’

All: (Laughs)

Marcus: It’s gone full circle now. If it’s someone young I expect them to recognise me from the podcast.

Mike: Didn’t your daughter’s friend come up and say she knew you from the podcast?

Marcus: Yes, yes, it still amazes me, because I just pitch up once a week and try and make it look stupid!

Keir: What band were you in again?

Marcus: A band called ‘Breathe’

Keir: And now it’s ‘Stroke the Toad?’

Marcus: Now it’s Stroke the Toad.

Paul: Yeah, to say you don’t like that, I mean, I was at Thorpe Park recently with my youth group and we were queuing up and some guy came up to me and said ‘Are you Paul Boag?!’ and my youth group were wetting themselves, they thought it was hilarious! And yeah I like it, course I do! And people are really kind, they’re really nice about it – but you gotta keep it in perspective right? You know, I’m a niche of a niche of a niche of a niche. I might aspire to be Leo Laporte, and Leo Laporte might aspire to be a daytime TV presenter who aspires to be I dunno, a mainstream TV presenter who aspires to be a film thing and so it goes on. And it’s the whole premise – and I reject the premise – but it’s the premise that because you’re well known, and because a lot of people have heard of you, that in some way your life is of more value. And I think that’s the point I was trying to get across in the personal branding thing. There’s this friend of mine I grew up with who got married to this Indian guy, and she works out in India – we actually raised money for her on the podcast over Christmas – and runs an orphanage out there with a couple of hundred kids who have had their lives ruined. She does more good in a single day than I will do in my lifetime. And OK no-one knows about here, and no-one is interested in her, and I get people come up to me on the Tube?? And that’s ridiculous to me! And that’s what made me angry and that’s what made me want to do that post. And then it all gets out of proportion and it all gets silly. Where in our culture – sorry this is all getting a bit heavy! – where in our culture did we get to a point where Kevin Rose can’t stand in a blimmin’ party without being mobbed by people? You know, that’s weird? There’s something screwed up there.

Marcus: That’s not weird? That’s normal?!

Keir: I guess celebrity is changing? When I grew up fame was the pop stars, the rock stars and now you’ve got tech celebrities.

Marcus: If they had a rock star in that room they would get even more mobbed, but it still happens.

Paul: Just because it’s normal doesn’t make it not weird. Just because it’s been going on for a hundred years, doesn’t make it not weird.

Marcus: I’d say it’s human nature.

Paul: Yeah, and I’m saying human nature sucks!

Marcus: Well deal with it!

Keir: OK, so it has some benefits to you, but it is important?

Paul: In the industry?

Marcus: I’ve been thinking about this. Who’s the most famous web celeb? Zeldman maybe? People with big web projects and big budgets go to Happy Cog because of Zeldman’s celebrity. Not only that – he wouldn’t be famous if he didn’t know his stuff and talked well etc etc.

Paul: The sad fact is there are designers and developers and agencies out there that are as good as Happy Cog.

Marcus: Course there are.

Paul: And there are certainly ones that are better than us. But they don’t get the exposure because they are introverted people. It makes me sad but that’s the reality.

Keir: You actually said the other day in your video…

Paul: Oh don’t quote me back! I’m going to have to contradict myself!

Keir: You said the other day that you could be introverted and be just as successful.

Paul: Yeah, I think you can, but in a different way.

Marcus: What, in a non-successful way?! You can be as good a designer, as good a developer without being famous, but if you’re trying to win business using the Zeldman / Happy Cog argument then you’re going to be a lot better off if you’re somebody who’s known.

Paul: Yeah, but you could still be known and be an introvert. It’s indentifying the methods by which you’re known. For example, Rachel Andrew. Until relatively recently she didn’t do a huge amount of public speaking, and even now doesn’t do massive amounts. But she’s written book after book after book after book. She’s known for that writing and that has given her the profile. You could be an introvert and blog, and have one of the best blogs in the world. You could be submitting gorgeous designs to CSS galleries and be winning work that way. So it doesn’t need to be by being mouthy and extrovert.

Keir: The funny thing is there are agencies out there that are as good as each other – some might win work because of their public persona, and then there are those who win work because they constantly put out a really high standard of work.

Marcus: There are others that might win work because they have a really pushy salesman! It’s just another way of marketing yourself or your company.

Paul: To be honest, look at yourself Mike. OK, you’ve done a couple of speaking slots, but you haven’t spoken a huge amount. But your work has been picked up by people, and people have gone ‘Wow, I really like that’ and that’s spread virally without you jumping up and down like I do going ‘Look at Me!’ So it’s perfectly possible, it’s just a different way of doing it.

Keir: Another question that’s worth asking is that a lot of people have become well down for their niche – recently you’ve been talking a lot about educating clients, Mike has talked a lot about creativity and where he gets ideas from., they tend to be offline. Andy Clarke talks a lot about progressive CSS, CSS3 that sort of thing, for someone who is looking to get their face known in the industry is that something they should do? Find something they’re really interested in and just push it out?

Paul: Absolutely. I remember much nearer the beginning I’d built up a popular podcast that a lot of people listened to and were passionate about. But I couldn’t get speaking opportunities. And I think it was Ryan actually, who was honest enough to talk to me about it and it was his response that was ‘I don’t know what it is that you do?’ – a lot of people don’t know what it is I do! But

Keir: That’s a whole other interview Paul!

Paul: He didn’t know what box to put me in. People like putting other people in boxes.

Mike: It makes picking speakers easy to be honest.

Paul: So you can go, ‘We need someone in this slot who’s going to talk about business’ or ‘development’ or whatever else. I packaged myself very specifically for conferences and speaker opportunities, I will talk about this kind of stuff. Once you’ve done it once, that’s it. But, the problem is you can’t do that forever. You need to re-invent yourself. Jeremy Keith is very good at that. He started off as the DOM scripting guy, then he became the microformats guy, now he’s the HTML5 guy. He knows how to move from thing to thing. He would say that his interests change and he moves on, it might be, it might be a totally subconscious thing, but it’s a damn clever thing, however you slice it.

Marcus: I would argue that this applies to life, not just web design. I’ve got quite big kids now, and I’ve been saying to them for years now relating this to subjects that they are studying, do what you like doing, not what you think you ought to be doing. It applies across the board. If you can do something well, you are going to enjoy doing it.

Keir: Yeah, that will come out when you speak about it, in the passion.

Paul: OK?! Finished with us?!

Marcus: You’ve got a whole podcast here! At least 45 minutes!

Paul: OK, well thanks very much for listening to Boagworld, we’ll see you again next week!

Keir: Thanks a lot!

Thanks goes to Andy Wickes for transcribing this interview.

Web Design News 23/03/10

Posted in News on March 23, 2010 by Paul Boag

This week: IE9 is revealed, a new web design resource is launched, visual hierarchy is explained and we apply some phycology to our sites.

Microsoft reveal Internet Explorer 9

The big news of the week is Microsoft giving us a glimpse of IE9 at the MIX conference. This has been followed up with more details on the IEblog and the release of the IE9 Platform Preview.

The focus of the new browser seems to be on performance, standards support and improved font rendering. All good news for web designers.

The response has been generally positive with Zeldman writing:

The reported web standards improvements are encouraging, and better type rendering in IE is a consummation much to be desired.

Roger Johansson was equally enthusiastic when he wrote:

I’m still amazed at how few IE8 problems related to CSS 2.1 I have run into. If IE9 can deliver that level of support for HTML5, DOM, CSS3, and SVG… yay!

Unsurprisingly this announcements have further fanned the flame of anti-IE6 hatred. However, over at Sitepoint there is an interesting article that points out that we will never be happy with users choice of browser.

So will the end of IE6 make you, me, and everyone else happy? Ten years ago we were calling for Netscape 4 to die (if you thought IE6 was bad, NS4 would have appalled you!). IE6’s death may be imminent, but will we then start demonizing other browsers?

There is just no pleasing some people!

New web design resources

There is an interesting new web design blog on the block this week.

You might be asking why we need yet another web design blog? This is a perfectly valid question. However, Relpost is different.

As the site says…

Relpost diggs deep to bring you fresh content from the hottest web designers and the coolest blogs serving you juicy, related goodness.

In other words it hand picks some of the best web design posts out there and collates them into one handy place. Useful if you have given up on keeping on top of your RSS feeds.

Relpost

Another random resource I wanted to mention is Mark Boulton’s book “Designing for the Web.”

This book that provides an excellent introduction to good design has been around for a while. The reason I am mentioning it now is because it has just been re-released for free!

If you’re a designer, developer, or content producer, reading this book will enrich your website and plug the holes in your design knowledge.

I highly recommend it.

Visual hierarchy & weight explained

While on the subject of design principles can I suggest you check out two posts on 52 Weeks of UI. These posts tackle both visual hierarchy and visual weight, and are excellent reading for anybody interested in understanding better how design works.

The posts not only explain what hierarchy and weighting are but why they are important. For example when talking about hierarchy the author writes:

The best visual hierarchies lead users to take the action confidently. They have a clear, obvious order in which to view and act on things, with the most important things first.

These are actually great posts for non-designers because it explains the things designers do intuitively but can rarely explain well.

Bring psychology to web design

If it was possible to have a single theme for a conference as diverse as SXSW, this year it would have been psychology. From Andy Budd’s talk on persuasive design to Stephen Anderson who looked at the art and science of seductive interaction, it was all about understanding what motivates users.

The one thing that grabbed my attention the most in Stephen Anderson’s talk was his ‘Mental Notes‘ cards.

Get Mental Notes

Although not currently available he did hand out preview packs to all attendees and they are truly awesome (as the american’s would say).

Each one of the 50 cards highlights some characteristic of human psychology. It then suggests ways you can use that characteristic to improve your website. For example…

Curiosity – When teased with a small bit of interesting information, people will want to know more!

This is the kind of tip that helps shape the design of your site.

There was a real feeling at SXSW that subjects like usability, accessibility and standards should be taken for granted. Instead the conference seemed to focus on nuances that take your website to the next level.

Web Design News 09 /03/10

Posted in News on March 9, 2010 by Paul Boag

This week: Giving and receiving design feedback, are you bored of your sites design, CSS typography and helping users when they are too busy to read.

Helping users when they are too busy to read

As is pointed out this week on 52weeksofux the days of reading help manuals are over. In a world of twitter, facebook, mobile phones and email we just don’t have the opportunity to spend long lengths of time learning a new system or website.

As the post suggests…

We don’t have two hours to read a help manual. We probably don’t even have 20 minutes. Instead, we learn a bit here and a slice there, all adding up to real learning but not in contiguous time.

In short we learn as we go along.

This should have a considerable impact on how we design our websites. We can no longer except users to consult a help section or contact you for advice when they cannot use your website. According to 52weeksofux we need to change our approach:

In its place is embedded support: directions, tips, cues, and other signposts that can nudge us back on track. One example of this type of inline hand-holding is microcopy: the small, useful copy that helps answer contextual questions and defray concerns.

So what about your site? Do you provide enough support to help users learn about your site as they go? Are your error messages and instructional text clear and descriptive? Perhaps it is time to revisit your website copy.

Critiquing design

One of the most controversial areas of the web design process is design sign off. Everybody (including clients) has strong opinions about what they like or dislike. Designers on the other hand are often overly sensitive about their work and so this can lead to a lot of friction.

Being able to give and receive criticism as well as discuss design in a constructive manner is a skill both designers and website owners require.

Fortunately an article on Smashing Magazine called “Web Design Criticism: A How-To” guides us through the process.

The article explores the subject of design critiques before suggesting 8 pieces of advice on how best to give feedback. It’s a valuable article and well worth reading.

In my opinion design critiques are extremely important, especially in teams of designers. It is always good to have another designer looking at your work and provide feedback. As a designer it is easy to become too close to your project. A fresh perspective is always valuable.

If you are a freelancer and don’t have anybody to discuss your designs with why not try the website critique section of the boagworld forum.

design critique

Image source

Are old designs boring users?

Talking of design, I am constantly amazed how many websites still go through regular redesigns that involve major overhauls of the look and feel.

I can understand designers desire to do something new and fresh. However, even website owners seem to want something new.

The problem is that although you might get a kick out of doing a major overhaul of your sites look and feel, users often do not respond so well.

In Gerry McGovern’s latest post he points to Facebook as an example of what can happen when you redesign:

“After a redesign in March, a Facebook poll revealed that 94 percent of users didn’t like the changes,” Caitlin McDevitt wrote for Slate in February 2010. “When Facebook introduced its News Feed in 2006, students organized to protest against it.”

In fact most users like familiarity and dislike change. This is because users do not want to be excited by a new design, they just want to get things done. Gerry goes on to say…

The vast majority of them are at your website to get something done as quickly as possible. The only people who are likely to complain about your website design are website designers. Craigslist is constantly being told that its site is boring. “But the people I hear it from,” Craigslist CEO Jim Buckmaster told Wired in 2009, “are invariably working for firms that want the job of redoing the site.”

Sites should evolve over time rather than go through sporadic redesign.

Does this mean our websites should never change. Absolutely not. However, we need to examine our motives for change and when we do change it should be an evolution not a revolution.

CSS typography

There has been a lot of excitement recently about services such as Typekit and Fontdeck that allow designers the ability to use custom fonts on their websites.

However, custom fonts are only the beginning of what can be done with typography using CSS. Unfortunately it can be hard to keep up with all the latest innovations so it is good to see a post by Yaili about CSS typography.

The post on Smashing Magazine is a comprehensive overview of everything you can do with type using CSS. This includes:

White space
Word wrap
Word and letter spacing
Indentation and hanging punctuation
Web fonts
Text shadow
And some new emerging text decoration

For a beautiful web site

With all of these tools at our disposal it is looking like the days of Cufon, Flash replacement or image replacement are numbered.

A great example of moodboards in action

Posted in Design on March 8, 2010 by Paul Boag

Moodboards are a valuable tool in the design process. However many web designers lack experience in producing them. Find out how to produce a stunning moodboard that will impress clients.

At Headscape we have been using moodboards for some time as part of our design process. We believe that working with moodboards is considerably more effective than producing multiple design concepts.

They have the advantage of being quick and easy to produce. This means that, unlike design concepts, they are disposable. You can try lots of different approaches to find the one that works for both you and the client.

However, as I said in my post ‘How Moodboards Can Save Time, Money And Your Sanity!‘ they can be tricky to produce. Inexperienced web designers can often overwork moodboards making them more like a design concept than some initial ideas.

Moodboards in action

Recently I came across this concept video for Microsoft’s upcoming iPad competitor. Although the technology looks very impressive that was not what grabbed my attention. What impressed me was the moodboard they created to show off the technology. This is a great example of moodboards in action and demonstrates the kind of look and feel a moodboard should have.

Of course we don’t all have fancy (and as yet non-existent) tablets to create this kind of thing on. However, all of this could just as easily be achieved using a Wacom Bamboo Pen and Touch.

Hopefully this video inspires you to create freer, less structured moodboards that don’t take hours to craft.

Building better forms with Steve Marshall

Posted in Development on March 4, 2010 by Paul Boag

Steve Marshall from Yahoo! draws on his many years of experience to share with us best practice in form design.

Paul: Joining me today is Steve Marshall who is here to talk about form design. Hello Steve.

Steve: Hey Paul.

Paul: Good to have you on the show, thanks for agreeing to do this. I think a good place for us to start is a little bit of an introduction about who you are and I guess why form design? Why we’re discussing that with you? So a little bit about those two things would be great.

Steve: OK, so I guess I’ve been working on the web for about ten years or so now, for the last three of them working at Yahoo. And a lot of what I’ve been doing at Yahoo has been on fairly high-profile sites that no-one would really think of, if that makes sense. You know the kind of unsung heroes of the web, that serve hundreds of thousands of page requests a day that no-one really thinks of as interesting websites in our community. Things like Yahoo TV, Yahoo Music, Games, video games – these sorts of things. And I guess really the reason I wanted to talk to you guys about this was it’s kind of a subject that’s very close to my heart because a lot of basic interactions on the web that can be made brilliant for everyone, if only people put a little thought into it – things like: search forms. A classic example for me is on google.com and even on Yahoo Search you have a search box and then you have channels, if you like, for that search so you can say “I would like to search the entire web,” “I would like to search for images,” “I would like to search for video,” these sorts of things. Typically they’re done with links. Now, if a screen reader user, for example, say goes to use that form they can fill out their search keywords, but they will never ever get to those links because in forms mode they don’t get presented with the links in the form. And so you know a little bit of thought about what actually the use case for this form is means you can maybe think about using the right elements for the right purpose.

Photograph of Steve Marshall

Paul: OK, fair enough. That makes a lot of sense. Well, you could come back with the question: “Why does that matter? Why is form design particularly important? Why is it worth us discussing?” How would you respond to that?

Steve: I guess there are a couple of things really. For one it’s essentially using the tools of HTML, CSS, Javascript the way they were intended to be used – using the right pieces of HTML for the correct use. Rather than grouping things in a semantic context, you wouldn’t group list items (<li>) with a paragraph (<p>), you’d group them with an unordered list (<ul>). And it’s just a case of doing the same with forms. Furthermore, though, it allows you to enhance accessibility and enhance usability in general, it means that your forms just work better for all the users of your site, whether they be using full on Javascript-enhanced CSS or if they’re on a really, really old crappy mobile phone that can only just about show HTML forms.

Paul: Yeah. I think as well there’s the aspect to it that forms are a fundamental user interaction on the web.

Steve: Exactly. Particularly given that we’re getting into web applications these days. A really good example of bad use of the web is Google Mail. When they first brought Google Mail out it was all Javascript and all really badly built. And because they did it this way and didn’t want to lose any functionality, they tacked on a basic HTML view. Now if they’d made the page properly and designed it with correct use of forms, correct use of semantics, all this sort of thing, then they could have just progressively enhanced until they got to the point where the main interface is and, for those user agents that couldn’t support all of the funky multi-selection and blah-blah-blah-blah-blah, they could’ve just… they would’ve just not gotten that because they couldn’t support it. And it would mean that they would have one interface to maintain rather than the, and I’m just looking at my Gmail account now, rather than the at least three that they have.

Paul: I mean, the thing is that so often forms are used, you know on an eCommerce site a form is used to make the purchase, you know it’s the call to action. On another site it’s used to signup to a newsletter, it’s kind of really fundamental stuff and don’t often get enough attention really.

Steve: Exactly. There’s a lot of talk about the ‘read-write web’ and the form is the ‘write’ part. The form is essentially the only tool – Flash aside – it’s the only tool that we have in the core HTML, CSS, Javascript bucket that we can use for all users of the web to allow them to contribute back to our sites or allow them to interact with us. So it is very important, but it very often gets really heavily overlooked.

Paul: So let’s talk about some potential ways to make your forms more user-friendly. What kind of advice would you have in regards to that?

Steve: It’s really about going back to basics; stopping for a moment and… you know it’s great to have really flashy ideas for the brilliant, wonderful things you can do with Javascript, but thinking about how your form would be interacted with if you just were using HTML. And a lot of people say “I test my site with just HTML; no CSS and Javascript.” But quite often that goes out the window when they’re talking about forms. A superb example of this is the work that Brad Wright did on Yahoo Answers with their workflow for adding a question to Yahoo Answers. Now there are hundreds of nested categories on Yahoo Answers that you can add your question to and in the Javscript-y workflow, as with quite a lot of sites, you select from the first drop-down and then another drop-down appears with a whole bunch of other categories in it, you know subcategory type things. Now what Brad could’ve done, like most websites, is just present one initial drop-down with all of the initial choices and then another drop-down with every subcategory from every choice, or presented one big drop-down with every subcategory listed with its major category or something like that. And that would’ve worked. It would’ve allowed people to select the right category, but it would’ve meant that you would have to scroll through a couple-hundred different categories to put your question into. What Brad did instead is use nested fieldsets and radio buttons so that you can select your top-level category with one group of radio buttons and then that is essentially the header for a fieldset, if memory serves, and that fieldset then contains the radio buttons for the subcategories of that category.

Paul: Wow.

Steve: It’s not elegant; you do get a really, really big form, but it makes sense and it provides the same level of information and the same flow that you would get with the progressive drop-downs. It’s things like that, just putting that little bit of extra thought in, thinking about how this might work with HTML. To go back to the search example I used earlier I have to – you know full disclosure here, this is something that I did myself about two or three years ago when I first started working for Yahoo and it’s something that various people trumpet as brilliant and I’m very proud of it.

Paul: Very modestly so.

Steve: No, but I feel like it’s an example that gets abused, but it’s a good example. Essentially, everyone as I was saying uses hyperlinks to create the channels for their search. Of course, if you don’t have Javascript, you type your search keywords into the box, you click on the ‘images’ link, for example’s sakes search for images about let’s say ‘Britney Spears,’ and what happens is you get redirected to the Image Search homepage with no keywords. Which will be really frustrating. The way I fixed that, if you will, is – rather than using links, which as I said won’t be presented to screen readers and will lose your keywords, as just two problems with it – I changed them for radio buttons and styled them to make them look like links. It’s a really, really simple change and it just changes the interaction ever so slightly so that people without Javascript, people using alternative browser modes, all these different things, can use that interaction and can benefit from it.

Paul: It’s interesting that you mention that search example. What other kind of accessibility problems are you seeing coming up when people are creating forms?

Steve: I guess most of the problems are around people not thinking about the way that their form would be interacted with in alternative browsers, and the classic example is the screen reader. But things like screen magnification: people may not necessarily group the form fields together or may put the errors away from the form fields to which they’re related and so if you’ve got someone with screen magnification or tunnel vision who doesn’t get quite such a broad view of the page – they only get maybe the couple-hundred pixels that they’ve got magnified – they don’t necessarily have the context of the error message right next to the form and so they don’t get to see that error message and will get frustrated by that.

Paul: To be honest I think that even applies with normal-vision users as well, that if you have an error message at the top of the form and you’ve scrolled down to the bottom, you need to put the error messages where you’re interacting; where the error’s occurring really.

Steve: Yeah exactly. And almost all of this stuff, with a couple of exceptions, it makes life easier for your regular users as well. It just… if it doesn’t improve life for everyone, it improves life generally for a significant enough portion of your user-base that it’s worth paying attention to, I think.

Paul: What about Javascript? You’ve mentioned Javascript a couple of times and although I would entirely agree that you need to use Javascript to progressively enhance a basic HTML version, there are some cool things and some useful things you can do with Javascript when it comes it forms and I was just interested in your opinion about what examples of good Javascript use have you seen with forms?

Steve: The absolute best one, well in fact two, that I’ve seen are on the Yahoo Finance site. One of which is the currency converter. It’s a really simple thing to do a currency converter, or so you would think. But the work that’s been put into the currency converter on Finance is so superb. They do things like: you type into the text box to specify which country or currency you want to convert from and as you type it will intelligently search through lists of countries giving you their currencies if you don’t know the currency for them. Currency codes if you search for currency codes. The full name of the currency and a whole bunch of other stuff. It’s just really smoothly designed. But if you don’t have Javascript, it still gives you a very good base interaction. The other example on Finance is, you have the ability to change the layout of the ‘Top Stories’ page. Changing layouts is something that a lot of people do on a lot of different sites, typically CMS type things. What they’ve done on the Finance site is made this thing work with Javascript, but it’s actually been built so that for screen readers and for various other users it works flawlessly; you don’t necessarily have to be able to see the form to be able to move the items up or down in the list. And quite a lot of people would say: “OK, well you should be able to drag and drop the items.” Well, that’s great, but what about the people who can’t use a mouse, for example… and things like that have been considered.

Paul: Do you think that there is a case where, although something works at a basic level without Javascript enabled, that it’s not always necessary to provide exactly the same functionality?

Steve: Oh, completely. That’s the interesting thing about the likes of the currency converter and the Finance layout changer: it’s the fact that the functionality is not presented identically, but it still gives you the core functionality, particularly with the currency converter – it still gives you the core functionality you want to be able to convert from one currency to another – it’s just that with the Javascript version it gives you much more entry into it, so you can do things like say “I’m going to Guatemala, I don’t know what the currency is, but give me the Guatemalan currency exchange with the Pound.” You don’t have to know that, whereas, with the non-Javascript version if memory serves, you would have to know which currencies you want. It gives you the option to search for them, but to use the interface you would have to know those currency codes. So yeah, using Javascript to provide a different, but enhanced interaction is perfectly fine so long as you can achieve the same results. And that’s the key thing, it’s thinking about what the problem is and what the best way to solve that problem is in the situation you’re in, whether that be plain old HTML or whether that be fully WYSIWYG, Javascript crazy nonsense.

Paul: Heh, “crazy nonsense,” is that a technical term?

Steve: Yes, that’s a very technical term.

Paul: OK, for some of the people out there that maybe are not the Yahoo’s of this world, they’re not the Google’s of this world, that are just basically creating fairly basic sites, what’s the fundamental advice that you would want to give people about form design? What are the things that they should be considering at the most basic level?

Steve: OK, I guess the big thing is, as I’ve said a couple of times, think about what your HTML is doing. By all means think about how you would like it to work with Javascript, but before you start implementing, think about how this should work without Javascript and without CSS. It’s also worth paying attention to accessibility experts in the world because that may impact the way you create copy for your form, for example. One of my absolute favourite pieces of advice is one that Ann McMeekin gave at a talk she did for the Web Standards Group where she told everyone there that apparently screen readers in certain configurations will read out the legend of a fieldset before each and every field, before each and every input within that field. So for example if you have a field whose label is ‘The Web’ and the legend of the fieldset that it’s in is ‘Search’ that’ll be read out as ‘Search The Web’. Try to use these sorts of thing to your advantage, but at the same time at least be aware of them so you’re not flying in the face of your users essentially and making their experience worse. Yeah it is really all about just thinking about what is the lowest barrier to entry, what is the core functionality that you’re working with.

Paul: You mentioned earlier ‘form mode’ for screen reader users. Can you explain that a little bit more? Because I don’t think… I confess I only relatively recently found out about this ‘form mode’ and I don’t think a lot of users realise the consequences of that. Can you explain how that works?

Steve: OK, so – full disclosure, I’m not an accessibility guru, this is all information I’ve picked up from having conversations with our accessibility gurus here. Essentially, screen readers are modal. Because the users of screen readers can’t see the web page, the screen reader presents them with various different interfaces onto the page and you can read through the page as a normal user would in HTML, reading through element by element, paragraph by paragraph. And that’s fine. But when you want to interact, you obviously need different types of controls and so screen readers provide what’s known as ‘forms mode’ and this is a special mode for editing input and working with forms where the screen reader will only present, as I understand it, form fields, labels and titles of fieldsets. So links, paragraphs of text, these sorts of things won’t be presented when you’re in ‘forms mode’.

Paul: That has real serious consequences doesn’t it?

Steve: Exactly, that has massive implications. So quite often people will provide explanatory text after a form field that’s not entirely clear or whose label is not entirely clear, saying ‘You need to fill out this field in this format’. Date fields are a classic example. They will put a paragraph underneath saying ‘Must be in the format ddmmyyyy’ and the screen reader user will never get that because it’s being presented to them in a paragraph (<p>). If the person building that form just took a couple of minutes to rethink the way they were putting the label together and put the label with ‘Date’ and then a <span> around ‘Must be in form whatever’ inside of the label and then styled it however they wanted, the screen reader user would get that and they would get all the advantages of knowing what format it should be in.

Paul: It strikes me it’s all about actually using the form tags that are available to us to the full degree. So many of us don’t use things like groups and legends and all of those kinds of things.

Steve: Yeah precisely. The interesting thing is that these things that aren’t really used are actually really, really beneficial. So for example fieldsets – again, as I understand it, I may be slightly misquoting here – fieldsets allow screen reader users to more easily jump between sections of a form. So if for example you have optional pieces of your form and they’re grouped in a fieldset which says ‘Further Details (optional)’ as the legend of that fieldset and they don’t want to fill out those further details, they can just jump over it to the next fieldset.

Paul: Which, yeah, is amazingly valuable. I mean as soon as you listen to a screen reader and hear how laborious it is, being able to skip over content is really important.

Steve: For those of us who are lucky enough to be fully visually capable and fully able to use motor skills – because of course this, whilst I think about it, this doesn’t just apply to screen reader users, this applies to people who have potentially fine motor skill issues so they have to navigate with a keyboard.

Paul: Which then you get into things like ‘tabindex’ and stuff like that.

Steve: Exactly, exactly. Which you know is a whole other holy war that I dread to get into for fear of upsetting someone. Yeah, these sorts of things again can help with that, and thinking about those sorts of things just makes everyones life easier. Because I mean, for example, I don’t always use the mouse, I will quite often use the keyboard. And I’m perfectly able with my hands and perfectly able to see, but I will quite often ‘tab’ through a form simply because my fingers are already on the keyboard and it saves me moving my fingers a couple of inches… because I’m lazy.

Paul: (CHUCKLES) So you’ve kind of mentioned a couple of people in this that you’ve learned various things from. If people want to learn more about form accessibility and form design and that kind of thing, where would you refer them to? Who do you really respect in this kind of field and you know that they should be following?

Steve: Oh, wow. I guess the people who, in terms of pure accessibility, I would say definitely Mike Davies who goes by Isafarro or Isolani exchangedly, Ben Hawkes-Lewis who I don’t think has a blog, or if he does, doesn’t blog enough. Dirk Ginader who is weboutput.de. Those three guys particularly, Ann McMeekin who guys by the name of pixeldiva. All of those guys are absolutely invaluable resources in terms of HTML, CSS, accessibility type stuff. Other than that I have to admit I don’t really know because this stuff is stuff that people don’t talk about enough.

Paul: Yeah, yeah totally.

Steve: So it’s very much a case of scratch what you can find from what’s left on the web, if you like.

Paul: Yeah. OK Steve thank you for that, that was very helpful. It’s good to kind of dig under the surface a bit. So thanks for coming on the show and hopefully we have you on again soon.

Steve: My pleasure. No problem. Yeah, hope so. Thanks a lot Paul.

Paul: Bye bye.

Thanks goes to Simon Hamp for transcribing this interview.

Is ‘John the client’ stupid or are you failing him?

Posted in Working in web design on February 24, 2010 by Paul Boag

Meet John the client. John runs a reasonably large website. He is a marketeer who considers himself smart, articulate and professional. That said, he doesn’t know much about web design and so needs your help.

John comes to you with a clear set of business objectives and asks for a quote. What happens next leaves John confused, frustrated and extremely unhappy.

Explain why you are asking about money.

Before giving John his quote you ask a little more about the project. After chatting for a few minutes you ask him about his budget. A fair enough question you think. After all there are so many ways you could approach the project. Without knowing the budget it is impossible to know where to begin.

In your mind, building a website is like building a house. Without knowing the budget you can’t possibly know how many rooms the client can afford or what materials you should use to build.

John on the other hand is instantly suspicious. Why would you want to know his budget? The only reason he can think of is that you want to make sure you don’t under charge when there is more money available. Anyway, he doesn’t really know his budget. How the hell is he supposed to know how much a website costs?

Money Grabber

Image credit : Be careful not to come across as money grabbing.

John goes away determined to find a web designer who isn’t trying to screw him over. Fortunately for you all of the other designers he asks also fail to explain why they need to know about his budget and so you manage to win the project anyway.

Justify recommendations in language John can understand.

Once you have won the job you arrange a kickoff meeting to nail down the final specification. However, John is instantly regretting his decison to hire you as his worse fears are confirmed.

In his eyes you are immediately trying to squeeze more money out of him as you waffle on about the importance of usability and accessibility.

John doesn’t care about disabled users. No disabled users use his website anyway!

As for usability, surely it is the job of the web designer to make the website usable. Why do we need expensive usability testing? He is pretty sure usability testing involves expensive things like cameras, usability labs and two way mirrors.

Unfortunately you believe you have explained the issues clearly. You talked about WCAG 2 and mentioned Jacob Neilsen. You are beginning to wonder if John is stupid.

People looking confused

Image credit : Avoid technobabble if you want your clients to understand what you are talking about.

Maybe if you had talked about accessibility in terms of search engine rankings and usability testing as a way to increase conversion then John might have listened. As it is John puts his foot down and refuses to pay for any of these ‘ unnecessary extras’.

Include John in the process.

You go away from the kickoff meeting pleased to have a signed contract. However you have the feeling in the pit of your stomach that this is going to be another one of ‘those’ projects. Nevertheless you pick yourself up and dive into the design process.

Almost immediately you get a phone call from John asking if there is anything for him to see. You explain that it is still early days and that that you are not ready to present. John sounds disappointed but resigned.

A short while later you are ready to present the design to John. You are really pleased with the result. It has taken a lot more time than you budgeted for but it was worth it. The final design is extremely easy to use and will make a great portfolio piece.

Person hiding

Image credit : Stop hiding from your clients. Show them work early and include them in the process.

When John sees the design he is horrified. From his perspective you have entirely missed the point. The design clashes with his offline marketing material and fails to focus on the right selling points. Also he is convinced his suppliers will hate it and although they are not the end user, their opinions matter.

After a tense conference call you go away demoralised but with a compromise that will hopefully make John happy. You wonder in hindsight whether it would have been better to show John some of your initial ideas and sketches. Perhaps you should have produced a wireframe first.

Educate John about design.

After much agonising and compromise you are once again ready to present to John.

John is much happier with the new design and feels it is heading in the right direction. However, he does have some concern. For a start he has to scroll to get to most of the content and yet there is empty whitespace on either side of the design. He tells you to move key content into this wasted space.

Also as he thinks about his young male target audience he realises that the colour scheme is probably too effeminate, so he tells you to change it to blue.

While John is feeling somewhat happier you are feeling crushed. It feels like he is doing your job for you. The string of feedback about moving this and changing the colour of that, feels like it has reduced you to pushing pixels.

By this stage you are sure the client is stupid, and just want the design signed off. At no stage do you stop to ask John why he is requesting these changes. Perhaps if you had understood his thinking then you could have explained concepts like screen resolution or suggested an alternative to corporate blue which is so massively overused on the web.

Teacher teaching maths

Image credit : Educate your clients so they make more informed decisions.

Instead you wash your hands of the design and just give John what he wants.

Communicate with John regularly.

Now that the design is complete you turn your attention to the site build. At least John won’t care about your code. Now you can finally do things right.

Its a big job and it takes a lot of time. Even though you put too much time into the design and then washed your hands of it, you have your pride. You are not about to cut corners with the code. After all other web designers might look at it and judge you!

You work damn hard, putting in more work than you probably should do. John even managed to slip some extra functionality in at the scoping phase, which turns out to be a pain in the ass.

John on the other hand is wondering what is going on. He hasn’t heard from you in weeks. Surely the site must be read now? He decides to drop you an email asking how things are progressing. You reply with a short email saying everything is progressing nicely. After all, you never did like project management and you are sure John would prefer you building his site rather than writing him detailed emails.

John receives your email and finds himself becoming increasingly frustrated. What does ‘progressing nicely’ mean? He writes back asking for an expected completion date and you reply with a rough estimate.

The date comes and goes without a word from you. After all it was only an estimate and several complications have delayed things by a few days.

John finally looses his temper and calls you. He has arranged a marketing campaign to coincide with the launch date you and because he hadn’t heard from you he presumed everything was on schedule.

Phone with the receiver taped up

Image credit : Make sure you are communicating with your client regularly.

You try to defend yourself against John by citing the scope creep and unexpected difficulties. However, it is hard to respond when John said ‘all I needed was a weekly email keeping me up-to-date on progress’.

Explain John’s ongoing role.

By this stage the relationship has broken down entirely. You finish the work and the site finally launches. Begrudgingly John pays the invoice after delaying it for as long as possible.

What amazes you the most is that John says he is bitterly disappointed with the final result. How can that be when you gave him exactly what he asked for? This guy isn’t just stupid, he is also a jerk!

Of course John sees things differently. He came to you with a list of business objectives he wanted to achieve and the site failed to meet any of them.

He hoped that he could launch the website, see it meet its objective, and move on to the next project. Instead, after an initial spike in interest the number of users and enquiries fell overtime and the site stagnated.

Seedling being cared for

Image credit : Ensure your client understands the ongoing care his website will need.

What John did not realise is that sites need continue love and support. You cannot build it and then abandon it. John needed to nurture his website by adding new content, engaging with his visitors and having an ongoing plan for development.

If only somebody had told him.

The moral of the story.

It is amazing me how quick we are to judge our clients.

As web designers we communicate and empathise for a living. Our job is to communicate a message to our client’s users. We create usable sites by putting yourselves in the position of the site visitor. This allows us to design around their needs.

Why then do we so often seem incapable of either empathising or communicating with our clients?

Perhaps it is time for us to use the skills we have grown as web designers and apply them to our own customers.

Web design news 23/02/10

Posted in News on February 23, 2010 by Paul Boag

This week: Why speculative work suck, progressive enhancement explained, how to be different and should designers be able to code?

Why speculative design suck

The debate over speculative design has once again raised its head this week.

In case you are unfamiliar with the concept of speculative design, it is best described as the process of producing free work for a prospective client in the hopes of winning a project.

Many agencies (including Headscape) have long since rejected the idea of speculative design. However, it is still common practice within the web design community.

This week Andy Budd lays out his arguments against speculative work. Although Andy raises some good points I feel he misses the heart of the issue which is that speculative work is bad for the client.

A closed website

A better argument is put forward by one Belgium Agency who is currently on strike protesting against speculative work. They write on their website…

Pitches use up energy. Energy an agency would normally use to provide its existing, paying customers with the best possible work. So the logical conclusion of the system as it now stands is that at some point you will become a victim of it yourself. The day will eventually come when your agency has to divert the creative and strategic energy you’re paying it for into a pitch for someone else’s business.

I put it even more bluntly in my own article on the subject…

In order to remain in business every company needs to recover their cost of sale. This includes web designers. As speculative work is part of the sales process, they ultimately have to charge you for it. The web designer is forced to roll the cost of that work into the project if they win.

However, it is worse than that. The web designer also has to recover the cost of speculative design done for jobs he did not win. This means that if you choose to work with an agency that produces speculative design, you are paying for their failed sales pitches! Why should you be paying for other people’s design work?

So before you next request speculative work I would encourage you to read my post on the subject.

What is progressive enhancement?

As web designers we do love our jargon. One example is the phrase ‘progressive enhancement’. I have even been known to throw the term around casually on the show with little in the way of explanation. However, I bet that a considerable number of the website owners listening (and probably more than a few of the web professionals) do not know what the term means.

Fortunately our very own Paul Stanton has provided a great analogy that explains progressive enhancement.

He explains how progressive enhancement can be seen in video games all the time, especially the big sports titles that span all of the various consoles. Each console has different capabilities with an xbox having consider more processing power than your iPhone.

Image showing the difference between the game on the Wii (left) and the 360 (right)

The result is that although it is fundamentally the same game on all platforms it is actually subtly different in terms of game play and graphics.

Paul explains that this is very similar to progressive enhancement on the web. Each browser has different capabilities and as web designers we build to make the most of what each browser can do. It is the same website but subtly different depending on the platform.

Its a good analogy that I will be using in the future because it draws on something that the majority of people can associate with – video games.

How to be different

We walk a fine line with our websites. On one hand we want them to meet user expectations and avoid making users think too hard. On the other we want our sites to stand out from the crowd and be memorable.

In a new article on the Carsonified blog Kat Neville attempts to walk that line while challenging us to move away from Cookie Cutter websites.

A particularly narrow website

The article is a challenge both to designers who tend to get caught up in the latest trend, and websites owners who are often overly conservative in terms of design. It aims to inspire with some great examples of sites that break the mould and do things differently.

Of course the suggestions are not going to be relevant to every site. You need to carefully consider your target audience to establish how far from the norm you are able to push a design. However whatever your site, it will challenge you to ask if you are just following the crowd or really thinking about design.

Should web designers be able to code?

Ven Diagram showing an overlap between designers and developers when creating HTML and CSS

An interesting argument has exploded on twitter this week and has since spilled over into the blogosphere too. The argument was sparked by Elliot Jay Stocks who wrote:

I’m shocked that in 2010 I’m still coming across ‘web designers’ who can’t code their own designs.

It would appear this was a somewhat controversial comment and led to a massive backlash from designers who do not code.

For fear of inflaming the debate further, I have to say I am amazed anybody could disagree with this statement. Admittedly not every web designer does code, however they should at least know how.

I am not going to layout the arguments for this position here. However, I would suggest you read three excellent posts on the subject…

If you happen to be a designer who cannot code, I strongly recommend you read these posts. I honestly believe you are limiting your potential and undermining the product you provide your clients.

199. Time to generalise

Posted in Classic shows on February 5, 2010 by Paul Boag

This week on Boagworld: The changing role of web designers, Colin Firth on content and Becky Jones talks about the changes at Google.

Podcast: Download (Duration: 49:00 — 33.7MB)

Download this show.

Launch our podcast player

Having trouble listening to 199?

Housekeeping

Next week is our 200th show! Hard to believe isn’t it.

To celebrate this momentous achievement we are going to do a 12 hour live podcast marathon.

The show starts at 10AM on Friday the 12th February and finishes at 10PM that evening (times are UK based). We have too many guests to mention, but lets just say you will not be disappointed!

To listen to the live show go to boagworld.com/live/.

Obviously we will not be recording the whole show but hopefully will release edited highlights over the coming weeks.

News

SVG is back?

There are a lot of articles this week about SVG. A List apart describes SVG as…

Scalable Vector Graphics (SVG) consist of circles, rectangles, and paths created in XML and combined into drawings on web pages. You can apply solid colors, gradients, and a sophisticated number of filters to SVG—although not all browsers implement all filter types. You can incorporate text, as well as images, and you can copy and clone your SVG as much as you want. Mostly, we use SVG for graphics programs, charts, illustrations, or animations.

In principle SVG has always sounded like an exciting tool. However it became a casualty of the browser wars, where support was patchy at best.

It also was somewhat surpassed by Adobe Flash, that became the standard for vector based graphics.

However, browser support has significantly improved and so we are seeing more interest in the technology again. This week alone there are articles on both A List Apart and Sitepoint.

Although it is interesting to read what SVG can do, I have to confess I do not understand the continued interest in this technology. I admit I am no expert on the subject, but it strikes me be that SVG is somewhat pointless for three reasons…

It’s still not supported natively in Internet Explorer. Although there are ways of overcoming this, it is a significant barrier to adoption.
The near universal adoption of flash makes this a far more obvious choice. Also, now that Adobe have opened up the platform many of the old arguments against flash are less relevant.
All modern browsers now support page zoom and so there is less need for a technology whose primary benefit is its ability to scale.

Perhaps I am missing the point and if so please correct me in the comments. However, the only ray of hope I see for SVG is Apples stubborn refusal to add flash support to devices like the iPod Touch, iPhone and iPad.

The best products sell themselves

When I saw the title of Andy Budd’s latest post ‘The Best Products Sell Themselves‘ I was ready to disagree with him.

I thought Andy was going to claim that if you have a great product you do not have to promote it. I thought he was going to argue that in the age of social networking, word of mouth recommendation was enough.

Instead I read a passionate article about providing a delightful experience that inspired and challenged me…

To sell products in a networked world, you need to differentiate yourself by more than just brand attributes and a check-list of features. You need to create remarkable products that rise above the competition and get noticed. Products that your users will rate, recommend and tweet about. In fact, what you need to create isn’t a product at all, but an experience.

He goes on to write…

Mediocrity just doesn’t cut it anymore. Instead, we need to create products that sell themselves. Does this mean that marketing no longer has a place in the networked society? Far from it. Marketers often understand customer needs and pain points better than anybody. In fact, this can sometimes be the cause of frustration in itself. I know plenty of people (myself included) who’ve been wooed by the notion of integrated phone, TV and Internet services only to find yourself dealing with completely separate business units and billing systems. The marketers were ahead of the curve. It’s the product that was lagging behind.

The idea of delighting your users by going above and beyond expectations is something that has been very much on my mind at the moment. It is something I am keen to introduce more into the work we produce at Headscape. Andy’s article could therefore not have been more timely.

I am reading a book at the moment called Made to Stick. In this book it gives the example of a departmental store that prides itself on delighting its customers. They give two examples in the book. The first was a member of staff who ironed the shirt for a customer going to a business meeting. The second was of clerk who gift wrapped items bought from a competitors store.

This is the kind of exceptional service website owners should be incorporating into their websites, and web designers should be providing their clients.

The principle of proximity in web design

I seem to be featuring a lot of posts on the basics of design recently. I think this is for several reasons…

Everybody involved in the web has to do some elements of design.
There are a lot of people listening to the show who are just starting out.
The website owners listening need to understand design principles if they are to work with a designer.

This week’s contribution to the cause is ‘The Principles of Proximity in Web Design.’ It is essentially a post on layout. It takes principles that have existed for a long time in print and applies them to the web.

It is a solid introduction to layout and tackles issues such as:

Whitespace
Visually grouping elements
Creating visual hierarchy
Improving scanability
The use of grids
Leading the user

The article concludes by summing up the benefits of understanding these principles…

Proper visual hierarchy by way of proximity helps users delve deeper into your website without worrying about where they’ve been or where they’re going.

They’ll always feel comfortable, and they’ll get to the most important sections of your website quickly and efficiently.

A worthwhile read for anybody new to design and a useful reminder to those of us who are old hands.

Google is changing and it will affect your website

Have to noticed that Google has been changing a lot recently? Probably not. You may have noticed the fade effect on the homepage. However, there are many more subtle and yet significant changes going on.

In an article for boagworld Becky Jones outlines some of these changes and how they may affect your website.

Changes include the introduction of…

Real time results
Breadcrumbs
Personalised search (even when not logged in)
Regions
Search features in the search bar
Anchor links in search results

What is significant about the list above is that they each have an influence on your rankings.

These changes really are turning the world of SEO upside down and having an influence on how websites are built.

However, what interests me the most is the new prominence of real time results. With posts from Twitter being placed at the top of listings, this makes social media a crucial component of search engine optimisation.

If you care about your website’s ranking (which we all do) then this is a must read.

Feature: Website owners need more than web designers

Why is it many website owners are changing their web designer even when he or she has built them a great looking, usable website? What more are they looking for?

Read ‘Website owners need more than web designers’

Colin James Firth: Content is King

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 themselves.

Read ‘Content is king’

Designing for the next generation of devices – don’t get left behind

Posted in Design, Mobile on February 4, 2010 by Leigh Howells

I believe we live in a world where the hand-held web device equipped with an accelerometer is going to become more and more prevalent, and quickly.

As far as I have experienced there is little or no current use being made of the accelerometer on web sites when viewed on an iPhone. The accelerometer when triggered in the iPhone’s Safari browser at the moment does little for our general browsing experience beyond giving us a little more horizontal space when in landscape mode. But I believe we live in a world where the hand-held web device equipped with accelerometer is going to become more and more prevalent, and quickly.

Current Acceptance

We accept a limited browsing experience on our mobiles as merely providing a useful, mobile version of the web we see on our main machines. We work within the inherent limitations and reach out for information despite the hardware and software (Flash anyone?) constraints, finding ways to work around things and get to what we want. We certainly don’t expect anything fancy to start happening depending on screen orientation.

But look at how the accelerometer is being used in many iPhone apps to change information and design being presented to us. Tilting between portrait/landscape in apps changes the layout of many interfaces, sometimes shows completely different information, or completely different functionality.

In Awesome Note for example, changing orientation swaps the layout around to fit more comfortably in the new dimensions.

Screenshots of Awesome Notes

In the AroundMe app the orientation switches from list mode to the rather nice augmented reality mode.

Screenshots of the Aroundme app

So what will happen when we scale a capacitive touch screen device with an accelerometer up to iPad dimensions? What new and creative uses can be made of a device that presents our designs in 2 different orientations, both landscape and portrait? Surely the iPad (and other tablet devices) won’t just limit us to a wider view in landscape mode?

Sports Illustrated

The video below shows that a lot of serious consideration is being given to the future of tablet displays by some very big players in the media industry, and a lot of creative thought is being given to changes in screen orientation in tablet applications.

New Considerations

So, apart from obviously requiring a switch function in the browser and our code to detect orientation, will we be creating horizontal and vertical stylesheets for the iPad ? (and other tablets too I presume). Will we change the content or functionality depending on orientation? I think the answer to both is most likely to be yes. Layout would most certainly be useful to adapt; in landscape mode we may opt for a 3 column layout, whilst in portrait restrict to 2 columns.

Illustration of multiple=

In terms of functionality maybe an ecommerce site could add a constantly visible basket column when in landscape mode, or a photo gallery switch between full screen and thumbnail views depending on orientation.

Clear Guidance

One little warning on this however, changing functionality will require clear guidance, to avoid complete confusion. In the AroundMe app shown above it took me quite a while to discover that changing to landscape mode gave the augmented reality feature. It wasn’t indicated anywhere in the application and I simply didn’t try landscape mode as it was mostly list-based and there seemed no advantage to switching.

In summary then the accelerometer poses a new and creative extra dimension for the future of the web. We should start to consider the creative possibilities and consequences today.

If you recognise that the mobile web is important and you need help deciding on a strategy, then book a mobile consultancy clinic.

Book a consultancy clinic or contact Rob about a more in-depth review.

Lessons to be learnt from the new Google homepage

Posted in Design on January 6, 2010 by Paul Boag

Have you noticed the new Google homepage? It is now the simplest it has ever been. I believe there is a lot we can learn not only from this simplicity but also to how Google has achieved it.

There is a lot of debate about the new Google homepage with its fading of secondary content. It amazes me that some web designers see it as a mistake. Personally it perfectly sums up my attitude towards simplicity in web design, and I would like to see more website owners have the confidence to follow suit.

However, as Leesy points out in the Boagworld forum, it is not just the simplicity of the google homepage that is exciting. It is also the way they have achieved that simplicity. It is their attention to detail.

Stop Using Stock Photography Clichés

Posted in Design on January 4, 2010 by Paul Boag

I am sick of stock photography. We should refuse to use one more photograph of business men shaking hands or ethnically diverse people laughing together.

It is time to draw a line in the sand. 2010 needs to see the demise of bland, insipid photography that are the equivalent of using IBM blue.

Like IBM blue, certain stock imagery has been so overused that they have become meaningless. It conveys no information of value and carry no positive emotional message. Take for example the website below:

The WellDyne website features a photograph of two businessmen shaking hands

The image provides no clue as to the nature of the website and appears to be little more than a placeholder to fill up space.

The only reason to resort to such hackneyed clichés is lazinesses. A designer has literally millions of gorgeous images available to them online and should also be capable of producing unique imagery of their own.

This lazy approach was summed up perfectly in the design below. The designer was so lazy he did not even manage to purchase the image (see the watermark from istockphoto).

Website using an unpurchased image.

The alternative

Don’t misunderstand me. I am not writing this with a sense of superiority. I have been just as guilty of falling back on clichés as anybody else. After all, when time and budget is limited, you don’t have the resources to commission your own photo shoot!

However, just because you are forced to use stock photography does not mean it has to look terrible. There are several techniques that can help avoid clichés even when time and budget are limited.

Use Illustration

Increasingly websites are using illustration instead of photography. Even stock illustration often conveys more character and personality than your average piece of stock photography.

The style of illustration used says something about the website and organisation behind it. Illustrations make a statement and do not necessarily need to appear childish, as many clients fear.

Hull Digital Live

Safarista Design

Image based on Soviet Russian style

Image of comic fish

Better integrate

Even when you choose to use stock photography there is no reason why it needs to be confined to a box! Instead seek ways to better integrate it with your design by breaking out of the grid. This can take even relatively poor photography and give it new life.

Brooklyn Fare Website

Avenue 91.1 website

Oklahoma Wesleyan University

Stylise

Of course there are occasions when you are forced to work with poor photography. This typically happens when imagery is provided by the client or when the budget doesn’t allow anything other than the cheapest of stock imagery.

This is the point where you need to let your creativity run wild. Do not resign yourself to poor quality imagery, but rather enhance it using techniques as simple as a photoshop filter to as complex as a collage.

Suie Paparude website

Boutique website

Skipvine

The Nest

Pick images with punch

When you do have a choice of imagery make sure you select an image with punch.

When faced with an image library consisting of thousands of photos, it is easy to pick the first image that has the right subject matter. However remember, composition, colour and style make a huge difference.

Picture of a woman's face

Image of ornate costume

Image of the Festival of Colour in India

Use typography instead

Of course there is no reason why you need to use imagery at all. It is perfectly possible to create an incredibly powerful website with just the use of typography.

In fact I would argue that good typography is imagery in its own right.

Seed Conference Website

National Design Museum poster

Avoid being literal

My final piece of advice is probably the most important of all, and is one that website owners struggle to grasp – You do not need to be literal.

The reason so many websites fall back on clichés is because most organisations do not have strong imagery associated with them. When you think of a management consultant, PR agency or chartered accountant, you instinctively think of businessmen in suits shaking hands. That is the literal interpretation of these and many other businesses. In fact so few businesses produce something that can be seen or touched, they are only left with photographic clichés.

However, good imagery is about conveying a sense of personality and character, not a literal representation of what you do. After all prospective visitors understand that if you are a management consultant there will be men in suits. They don’t need a picture to tell them that. What they need to know is the character and personality of your organisation.

Images that convey information and emotion are considerably more powerful. These are the images that engage with your user and draws them in.

Unicef picture of girl holding water pistol to her head

Picture of a cactus in the shape of persons foot

Call to Action

Every good blog post needs a call to action. Mine is to ask you to be more adventurous in your choice of imagery. Do not settle for second rate stock photography but instead experiment with illustration, collage, typography and styling.

However, most of all I would encourage you to avoid being too literal in your choice of imagery. Some of the most powerful imagery can also be the most abstract.

8 ways we increased ecommerce sales by 10,000%

Posted in Design on November 29, 2009 by Paul Boag

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

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

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

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

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

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

1. Remove clutter

WFF Product Menu

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

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

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

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

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

WFF Product Listing

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

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

WFF Shopping basket

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

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

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

2. Make sure the shopping cart stands out

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

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

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

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

3. Provide visual feedback

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

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

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

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

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

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

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

Form field feedback

4. The bigger the better

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

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

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

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

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

5. Make buttons and links obvious

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

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

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

Link to Meal catagory

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

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

Example buttons

6. Always be there to help

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

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

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

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

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

1. The one stop solution

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

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

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

Help Section

2. The getting started guide

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

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

Get Started Content Area

3. Context sensitive help

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

Example of context sensitive help

7. Handle errors gracefully

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

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

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

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

Error message

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

The message is highly visible – This is achieved either by strong visual branding (as above) or by positioning the message next to field being edited (as in context sensitive help) .
The message tells the user what to do – It is important that messages clearly communicate how the user can overcome the problem.

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

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

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

8. Communicate your value add

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

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

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

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

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

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

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

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

Image showing WFFs complete service

Is that all?

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

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

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

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

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

Stop designing websites, start designing posters

Posted in Design on November 24, 2009 by Paul Boag

A new generation of websites are emerging that look less like websites and more like posters. They are easy to use, visually engaging and most of all different.

Sometimes I think I am deeply conflicted. On one side I am always going on about how print is not like the web and web designers need to stick to conventions.

On the other hand I feel inspired to be more creative in my work and take some risks. I am bored with the same old approach to websites.

In one recent post I wrote:

Too many websites look the same as their competition. If you want users to remember your site it needs to stand out from the crowd.

How then can we be different and yet still ensure our websites are usable?

Looking to the poster for inspiration

One way to remain usable and yet be different, is to look for inspiration beyond the web. For example, look at print designs that have to grab people’s attention and communicate a lot of information quickly.

One example of this is printed posters.

Posters have to be:

Visually attractive in order to grab attention.
Easy to take in at a glance
Provide more information to the more interested reader

In other words they need to be…

Engaging
Usable
Scanable
Have a clear information hierarchy

Sound familiar? Websites face exactly the same challenges.

Take a look at these posters below. Each is visually striking, provides key information first but has additional information for those interested. This is how we should approach web design.

DJ Andy Smith Poster

Art Attack 2006 Poster

Paris Je Taime Poster

Animals are not clowns

Morgellons Disease

Urban Typography

Using poster design on the web

You maybe looking at these and wondering how this approach can be applied to the web. After all, they don’t have much in the way of content.

Setting aside the fact that most websites have far too much content and need to be simplified, it is not impossible even with more content.

In fact a lot of web designers have already taken inspiration from poster design. Here are just a few from my inspiration library.

Flourish Web Design

Groovy Web Design

Kitschen Sink

Samsung

samsung

Lana Landis

Finch

Carsonified Events

Noel Design

Personally I find this new generation of websites encouraging. It demonstrates an advance in the aesthetics of the web without undermining the principles of usability.

These designers should be commended for their desire to push the boundaries of traditional web design and for looking beyond the web for inspiration. They should be commended for rejecting the myth of the fold.

What about you?

So have I inspired you? Do you think that we can learn from the print design world or are the two worlds too different? Post your thoughts in the comments.

192. Next Generation

Posted in Classic shows on November 18, 2009 by Paul Boag

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

Podcast: Download (31.6MB)

Download this show.

Launch our podcast player

Housekeeping

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

News

Mockingbird

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

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

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

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

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

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

Mockingbird

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

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

More on redesigning

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

a fully licensed, stripped-down, virtual copy of Windows XP SP3.

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

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

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

How to create clear web navigation menus

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

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

Stick with conventions

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

Avoid audience based navigation

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

Be consistent

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

Avoid quick links

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

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

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

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

Interview: The next generation

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

Jamie Rumbelow

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

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

Paul: … and cool

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

Paul

Anna: Hello Anna

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

Jamie: We have

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

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

Paul: Ok

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

Paul: Excuse me! You’re fourteen!

Jamie: Fourteen

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

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

Paul: Yeah

Jamie: Like school and…

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

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

Paul: Yeah

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

Paul: Oh well, you know

Jamie: Um…

Paul: Don’t laugh Anna. Show respect

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

Paul: Yeah

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

Anna: Hmmm, yeah it was really good

Jamie: So yeah, really enjoyed that, um…

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

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

Paul: Yeah that would be good

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

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

Jamie: Yeah

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

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

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

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

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

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

Paul: Really, you managed to get sponsorship?

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

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

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

Paul: Yeah

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

Paul: Right

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

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

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

Paul: In the Cambridge area

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

Paul: No I haven’t actually

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

Paul: Yes

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

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

Jamie: November the 21st

Paul: Ok, so not long then

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

Paul: It will be out don’t worry

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

Paul: Ok

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

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

Jamie: Well, I’m honoured, thank you

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

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

Paul: Yeah, Anna for example, yeah

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

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

Jamie: No, plenty of time

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

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

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

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

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

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

Paul: Yes, I flippin’ do

Jamie: Ok, I’ll send you an invite

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

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

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

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

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

Jamie: I’ll send you an invite

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

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

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

Jamie: Exactly. It’s like faxing

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

Jamie: But APIs really excite me

Paul: Oh do they?

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

Paul: Yeah I know Christian

Jamie: Yeah, he’s good fun

Paul: Yeah he is

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

Paul: Yes, that correct, something like that

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

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

Jamie: Yeah, maybe

Paul: Maybe?

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

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

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

Jamie: Thank you

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

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

James Proud

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

James: Thank you for having me.

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

Anna: Hello.

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

Anna: Oooh.

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

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

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

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

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

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

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

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

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

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

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

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

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

James: I was 18 a month ago.

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

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

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

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

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

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

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

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

James: Yes.

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

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

Paul: Give me some examples.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Thanks goes to Simon Hamp for transcribing this interview.

Elevator Pitch: A/B tests.com

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

We start the series with ABtests.com.

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

Joshua: Hi Paul;

Stanton: How are you doing?

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

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

Joshua: Ok it is still dark here so

Stanton:(laughs) So where abuts are you based

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

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

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

Stanton: Nice and quiet I guess

Joshua: Yes absolutely

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

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

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

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

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

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

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

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

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

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

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

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

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

Joshua: yes I hope so.

Stanton: So where can people find out more information.

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

Stanton: Good stuff, well thank you for that

Joshua: Thank you Paul

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

Joshua: Great sounds good.

Thanks goes to Shaun Hare for transcribing this segment.

191. Ecommerce Lies

Posted in Classic shows on November 9, 2009 by Paul Boag

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

Podcast: Download (30.8MB)

Download this show.

Launch our podcast player

Housekeeping

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

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

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

News

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

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

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

In it he wrote:

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

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

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

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

Finally he reached the crux of his argument:

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

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

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

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

An example of a black background website with high contrast text

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

An example of descenders intersecting underlines

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

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

Explaining user experience design

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

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

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

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

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

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

The importance of typography

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

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

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

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

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

Website maintenance tips

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

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

The article includes:

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

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

Feature: The Biggest Ecommerce Lies and How to Avoid Theme

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

Read the biggest ecommerce lies and how to avoid them

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

Got the following question from Dave Smith:

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

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

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

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

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

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

Patience

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

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

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

Perception

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

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

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

Influence

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

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

Entertainment?

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

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

Conclusion

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

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

Image Credit: MarS

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

Posted in Design on November 6, 2009 by Paul Boag

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

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

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

In it he wrote:

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

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

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

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

Finally he reached the crux of his argument:

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

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

An example of a black background website with high contrast text

An example of descenders intersecting underlines

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

190. Become a branding Ninja

Posted in Classic shows on November 4, 2009 by Paul Boag

On this week’s show: Ryan and Stanton interview Alex Hunter about managing your brand. Meanwhile Paul and Marcus look at how to speed up your website.

Podcast: Download (28.6MB)

Download this show.

Launch our podcast player

News

Offline inspiration

It has been a while since we have featured a Smashing Magazine post on the show so thought it was about time.

Shocking though this will be, it is not a top 10 list. Instead it is an excellent post on finding inspiration offline.

The post argues that using online sources such as CSS galleries for inspiration is not enough. As designers we need to be taking a walk, visiting a museum or spending time sketching. We need to consider these an essential part of our job description.

The post examines eight areas of inspiration:

Nature
Museums
Sketching
Hobbies
Music
Photography
Traditional art
Our own imaginations

It then discusses what can be found in these areas of inspiration. In particular the post looks at:

Texture
Color
Shapes
Changing our perspective
Discovering themes

The problem is that we don’t feel like visiting a museum is work and even if we do our bosses certainly do not! However, this is eloquently addressed to:

The trick is to consider alternative inspiration an an essential part of the job. While it feels more like play than work at first, finding true inspiration should mean more than browsing through the same material over and over. And we should know that in a creative industry, having fun is okay; it doesn’t mean we’re being unproductive.

Girl looking at Museum exhbit

Image source

Some of the best design work I ever did came from offline sources. I just wish I prioritised this kind of research more.

All you need to know about CSS3

Mr Stanton discovered a great new site this week – CSS3.info. With CSS 2.1. becoming increasingly supported and integrated into our work, it is time to look ahead at what CSS 3 has in store.

CSS3 has got some really interesting new features that are already supported in some browsers. From advanced selectors such as attribute selection through to multiple column layouts, there is a host of goodies we can start to play with.

What is more, by using graded browser support we don’t need to worry too much about IE’s lack of support.

CSS3.info is a great starting point if you want to begin using some of these advanced CSS features. It provides examples of each new feature and tells you what browsers support it. It also provides a selector check so you can see what advanced selectors work in different browsers. Finally, it also provides up-to-date information on how the new specification is progressing.

I really would encourage you to take a look at CSS3. Its got some really exciting features that you can start using now.

Preparing and planning for a redesign

Although I am generally against the principle of redesigning sites from the ground up, there is no doubt that every site needs a refresh once in a while.

Knowing when and how to go about redesigning your website can be a tricky process. Fortunately Web Designers Depot has a post that might help. Entitled “Preparing and planning for a redesign” it provides some valuable advice for any website owners thinking of redesigning.

The Firefox website before and after its redesign

The post starts by looking at how you know it is time to redesign. Contributing factors include:

Out of date technologies and techniques
The age of a design
The lack of a CMS
Search engine ranking problems
Under performance
Your competition

It then goes on to look at what needs to be done in preparation for a redesign. This includes:

Identifying what works
Being clear on what doesn’t
Looking at what can be removed, combined or added
Knowing what motivates your users
Whether a complete redesign is even necessary

Finally, the article concludes by looking at some potential dangers in redesigning. These include dealing with repeat users and avoiding broken links.

Although I don’t agree with everything in this post, it is a useful article if you are considering a redesign. Check it out.

Confusing menus and links: the web’s biggest challenge

I want to conclude with a post that might make you rethink your sites navigation. It is by Gerry McGovern and is entitled “Confusing menus and links: the web’s biggest challenge.”

Gerry applies his task focused approach to information architecture. He argues that too many organisations are more concerned with organising their content into an IA, than meeting the needs of users.

He suggests that to make a truly effective information architecture we need to start thinking like our users, who are focused on the task at hand.

To demonstrate his point he refers to the BBC sports site as a good example:

If you visit the BBC homepage and choose “Sport” you are brought to a page about sport. Just sport. The critical first screen is all about sport. No links to news or weather or business. Just sport. If you click on Football you arrive at a page that’s just about Football. Just Football. Not cricket. Not rugby. Not golf. Just football. If you click on “Premier League” you get to a page dedicated to the Premier League.

This is not web design. It’s web management. It’s about eliminating all choices that are not connected with the customer’s current task, which in the above example might be: Find out the latest news about the Premier League.

BBC Football website

Too often as website owners we clutter our navigation with other content that users “might want” or which we want them to look at. Although there are times when we want to cross link or promote other content, we need to be careful not to distract users from achieving their primary aim. If they become overwhelmed by links and fail to complete their task easily, they will leave.

He ends with a radical suggestion:

Menus and links need to be designed in the context of the task the customer is trying to complete. That means stripping away higher-level options and creating links that point forward based on the task at hand.

Stripping away top level navigation is not always a good idea, but this post should make us sit up and think.

Interview: Alex Hunter discusses developing an online brand

Ryan: OK, joining us today is Alex Hunter and we’ve just listened to you do a talk on… what was the talk title, I’ve forgotten?

Stanton: It was kind of “Managing Your Brand”.

Ryan: “Managing Your … Marketing Your Web App and Future Brands Online” – it was really good talk; really fascinating.

Alex: Thank you.

Ryan: So, would you like to tell us a little bit about yourself Alex?

Alex: Yeah. Sure. I’m an independent, kind of, brand ninja if you will. I’ve worked with some of the biggest brands in the world – on both sides of the pond. I live here in the UK but am originally from California.

Ryan: OK. And your talk was focused around making yourself your brand; putting your reputation on the line, in a way. It was really interesting – do you want to tell us a little bit about that?

Alex: Absolutely, yeah. Brand is one of those things that falls by the wayside, especially when it’s a developer-centred organisation. Developers are creating amazing technologies, incredible platforms but while they’ve been doing that they’ve actually been completely changing the game; they’ve been fundamentally changing the way marketing and branding works. It’s amazing, because they’ve create apps and platforms (i.e. social networking) that allow consumers to connect with brands for the very first time. Before, it was just send a letter out, watch a billboard, very mono-directional. But now we have these tools to connect with brands, and the irony is that the people that created that conversation aren’t responding to the fact that they need to have their brands intact.

Ryan: Right, OK.

Stanton: You gave a couple of examples of companies that you respect and that do this kind of thing really well. Can you give us a run through those?

Alex: Sure. I think Digg has put a lot of time and effort into their brand over their, what is, five-year or six-year existence. They’ve done a lot of little things really, really well and it was nice to hear Kevin Rose allude to them yesterday. Things like their blog – I think they’ve got the best corporate blog in the world because it’s not just the Vice-President of PR doing the blogging. It’s not even just Kevin or Jay (the founder and CEO respectively). It’s the developers, the designers, the DB admins, the receptionists, the community managers i.e. the faces and the names of the people that created and curate the community that we as the “Digg Community” have invested so much time and energy into. We can connect with those people now because it’s a name and a face of a real person. And so what they do whenever they roll out a new piece of technology or a new development, they say “Hey, I’m the guy that did this. Here’s why and here’s how (in excrutiating detail). What do you think?”. And that’s kind of revolutionary.

Stanton: So you would encourage people – especially working in small teams – not to be scared of just talking about what they’re doing and just waiting for “Let’s just wrap it up in a press release” or something and just talk about it naturally and be precious and passionate.

Alex: The being “precious” about it, I think, is a very, very big risk. That transparency is really beautiful because it brings people into the journey – especially when you’re creating something brand new – when it’s just an idea. You’re creating a new product and you’re updating people on it. It’s why reality TV is such a painful hit, I mean. It’s because people are looking into this thing and, Lord knows, the dev cycle is dramatic and painful and “4 o’clock in the morning” caffeine-induced frenzies. But also, it’s like when things go wrong, hold your hands up – be transparent, human. Don’t hide behind a brand name or a product name. And people will engage with that.

Ryan: So, how should people be doing this really? How should people be developing their brand and associating themselves towards the brand and then putting it out there. What techniques should they be using?

Alex: It’s a great question. I think that there’s – especially with Twitter, interestingly – there’s this real blurring of the line between personal brand and corporate brand. A lot of the big names that we know in technology embody their brand; Kevin Rose is Digg, Gary Veynerchuk is Wine Library TV, Tony Hsieh is Zappos – they’re all completely interconnected; there’s no separating them. They’ve invested themselves emotionally in what they do and that shows in the brand. And I think they’re defined by what they want to be. Gary has always been very clear about what his values are, Digg is very clear about what their values are. Apple are very clear about what their values are, and I think, trite as it may sound, going through and identifying your values – and it was really refreshing because as I came off the stage some dude came up to me and say “Hey, thank you. We’ve been labouring over this for years and we finally sat down – or I stopped sitting down with myself and brought the whole team in – and we defined our values” and it’s just gone up exponentially through that. And so I think it’s just define the values, creating an identity out of that and then saying “What are we now and what are we going to be, well, indefinitely really”.

Ryan: So do you think that’s got to be one of the first stages when you release it – you’ve got to be thinking about where you’re going to take it and how you’re going to present it to the world.

Alex: Absolutely

Ryan: That’s vitally important.

Stanton: So you talked about brand consistency and not to be scared of it or precious of it again. You should be willing to put it out there and how other people in your company – just use it and get it out there.

Alex: It’s… consistency is a funny one. People always say “The more people you give the message to the more watered down it becomes and the less consistent the message is”. Big brands are really scared of losing the refinement of their message. Realistically, they’ve been doing it for the last 30 years because the person who answers the phone in the call centre is the first point of contact that a user has with your brand. They are representing your brand. The receptionist is representing your brand. So giving someone an account on Twitter to do the same is no different, it’s just a little bit more of a public stage. But, on the flip side, that’s a good thing because people can see you responding to positive comments and negative comments and reacting and helping people in a very public forum. That’s why things like Get Satisfaction and applications like that – and actually in South Africa there’s a really popular one called Hello Peter which businesses are all into trying to respond and react to. So I think it’s a good thing and people shouldn’t be scared of consistency.

Ryan: Some brands, and we’re talking here quite a bit about people being associated to the brand and being kind of interchangeable. You say Steve Jobs, you say Apple, you always think of the two. For brands like, you mentioned, Diet Coke – being that you were invested into that brand – there’s no person that you can think of associated to that but you see that brand and you’re committed to it. McDonalds, things like that. What differences are there between the two? How do you promote? It’s kind of a logo you’re promoting in a way, isn’t it.

Alex: It’s a really good question. Diet Coke – the Coke/Pepsi thing is a fascinating brand battle and one of the few where it’s really only a two-horse race, especially in the consumer arena. I mean you’ve got Boeing and Airbus but they don’t really have to advertise because, well, I don’t have $100 billion lying around. Coke and Pepsi, I think, play off the fact that they are rivals and you are either one or the other. I think the more you consume of it the more passionate you become about it. So, if you are a regular Diet Coke drinker – like my wife won’t go to restaurants that serve Pepsi, she’ll leave because she can’t stand the taste of it. I’m sure it’s psychological because as Dave Chapelle said in that video, “It’s all the same”. It’s sugared water in a tin can! But they’ve managed to kind of feed off each other to an extent that has developed this rivalry and therefore developed this passion within its user base.

Ryan: I suppose then there’s so many different avenues that you can take to compete and get your brand out there. Is there any more that particularly stand out; having a direct competitor is one way of developing your brand or having a figurehead or any other ways you can go about it?

Alex: Absolutely, absolutely – especially for small – or reasonably small – brands. I think there’s a couple of things that are really important. In kind of extending the reach of the brand and the application with content like blogs – like the Digg example is a great one – but also engagement, both in the physical world and in the digital world. There are a lot of web companies that are getting really good at hosting real world events where users meet up and are rewarded both on a macro-like Digg or a Yelp on a micro level like some companies here in Europe like Qype that I mentioned during my talk that are introducing users to each other and to the people that either administrator or are the, kind of, power users within the community. Kevin Rose mentioned that again yesterday as a really good way; launch parties, regular user meetups, get people talking, get people connected. That really breeds loyalty. It’s astounding what that can do in terms of the competitive.

Ryan: I think Digg is an excellent example because they have so many methods of getting their message out there, don’t they. They’ve got the blog and the meetups and everything else.

Stanton: It’s like that with the bigger companies that come out. They can release different products that might not be wildly different but there’s the kind of umbrella brand that’s so strong that you can pick up that product and you know it’s new and you know the quality of it.

Alex: It’s really interesting. The web has actually fundamentally changed the way brand is perceived because we have these, like, loyalty mechanisms built in. Let’s look at, like, re-branding an acquisition. If my local supermarket gets bought by another supermarket, I don’t care. As long as it’s still there and has food in it – whatever! When Yahoo! bought Flickr they kind of didn’t know what to do with the brand. Do you keep it Flickr or do you make it Yahoo! Photos? And they’ve been kind of to-ing and fro-ing. But you can’t because that loyalty that’s in the Flickr community, that has built it up to where it is, would be PISSED OFF. So now, the compromise that just did recently was “Flickr by Yahoo!”.

Ryan: And people don’t seem to like it!

Alex: Exactly! Can you imagine what would happen if they rebranded it to just Yahoo! Photos? I mean, of course you’d get over it eventually but it’d take a lot longer and you’d lose a lot of customers.

Stanton: That kind of touches on one of the key things I took away from your talk. You said “Look after your users best interests, not yours”.

Alex: Absolutely. It’s hard because you gotta pay the bills. But that reputation will put you head and shoulders above anybody else. The Amazing Tunes example that I used. There are other unsigned artists sites out there, but not that give 70% of the profits back to the user and not that have a DAB radio station that you can get featured on. That’s looking after users. That’s the definition of an ethical web company.

Stanton: So for anyone starting out or building a company or a start-up or something, are there any common mistakes or pitfalls that you see all the time, or that you’d encourage people to watch out for or avoid.

Alex: Absolutely. There’s the ever-present “If you build it, they will come” mentality. If a build a solid app, no matter how ugly it is, people will come. They will not because they’ll never hear about it. And there are competitive apps to almost everything, and if there isn’t one today, there will be one tomorrow, and they will have looked at what you’ve done and they will have started an outreach, they will have started a Twitter account, they will have started a blog, they will have networked it physically and they will have networked it digitally, they will have thought about the presence, the UI. And I think that siloing and kind of compartmentalising and just saying “I’m going to iterate my app” is not going to work. There are exceptions to that rule. TweetDeck – he developed it to solve a personal problem, it just happened to be really well solved, and so it’s kind of growing on its own. But that is the exception to the rule. I think that hiding under a bushel, expecting it to develop on its own, it’s just not going to happen.

Ryan: With regards to cost of developing your brand, it can be the chicken and the egg sometimes. You need to develop an app and get it out there to make some return to put some investment into marketing it. What initial steps can be used to build yourself up before you can plough some money into it and doing it properly.

Alex: It’s kind of interesting. I think, yeah – you’ve got to have a concept obviously and some basic stuff done but I think one of the things that I’ve always found that worked, and it was really interesting to hear someone talk about it yesterday – I’m not sure who it was – but this kind of closed beta invite only concept seems to work really well at generating buzz. And if you just get one or two people saying “What the heck is this?”. You get these precious invites – which really aren’t that precious – Spotify’s a great example; actually Spotify’s a great example on two levels: 1) it was invite only for the longest time and 2) our pals in America couldn’t have it and they wanted it so badly that they were spoofing IP addresses and whatever they had to do to actually be able to use it. That kind of sense of exclusivity is a free way of generating that kind of buzz, if you can just get enough people to talk about it and it’s just an occasional whisper in the air, a Moo Card dropped somewhere with an invite code on it – that will just start to get people excited about it. But you have to make sure the product doesn’t suck on the back of it, because that will also spread pretty quickly as well.

Stanton: A lot of the talks I’ve sat in on today are starting to tie in. Yesterday it was “If you’re going to release something, release it early”. Do one or two things but do them really well, don’t try and do everything at once because you won’t be able to. And then see how things get – see how your users react to it and then build. I guess that’s reacting with the branding people that engage with the brand and then you’re building it and they feel invested.

Alex: That focus is really important as well, and I think that’s why APIs are so important in the early stage because you can get people developing iPhone apps and other integrations without taking your eye off the ball and doing those one or two things really well and going “Oh crap we’ve got to go home and develop the iPhone app”. It’s really interesting the way that it’s evolved – product development.

Ryan: Do you have any predictions of how things are going to change in the future. At the minute we’ve got these big companies that are doing it really well, everyone’s kind of imitating and doing similiar things to try and push their brands as well, and inevitably, things will change again. Any predictions about where things might be going?

Alex: I think it will become even more democratic. I think that the users will become even more powerful because the time to reaction is so fast.

Ryan: Yeah

Alex: But I also think loyalty will get even stronger and if you’re going to develop a competing app to an incumbant you’re going to have to work 10 times harder to get people off of what they’re using. As people start to use even more social currency, more points systems, giving more “value” to a user, it’ll be harder and harder to bring them over. I also think it’s going to be harder for people to acquire web brands, especially the big companies – the Yahoo!s the AOLs of the world to acquire small web brands without alienating those kind of fervently loyal people that are already their user base.

Ryan: You did mention people coming up with all this sort of cutesy names and stuff, mispellings and things like that. The market just seems to be saturated with it. How should people be thinking about deciding on a good brand and what fundamental things should they be thinking about when they’re making those decisions

Alex: I think that’s a great question. It’s less about the name – like you said it’s really easy just to misspell something or drop a consonant; that’s really lazy – you’ve got to look at it much more as a value-driven. What are our values? What is our product like? What is our team made of? Where are we in the world? And then use that to feed in the name to something obviously catchy, obviously when you can get the domain for a reasonable price – those are practical things that you need to take into consideration. But it’s got to be catchy; it’s got to be engaging, it’s got to mean something. And I think people have started to catch onto the whole “if you can make it a verb”. Digg and Google have become verbs (by the fact that they’re just ubiquitous), but I think people are now starting to say (at least, I’ve heard people around London say) “I’m going to Qype that” and it means “I’m going to check what this place is like” in terms of reviewing a restaurant before I go into it or whip out their Qype Radar iPhone app and check it out before they walk into it. So I think that that’s a really interesting revolution.

Stanton: You’ve got to work hard to get to that place, don’t you?

Alex: You really do.

Stanton: Then it appears in the dictionary!

Alex: That’s when you know it’s all over. You’ve won!

Ryan: OK, well, thank you very much for your time. I really enjoyed your talk and I think listeners will find that really useful. Thank you so much.

Thanks goes to Sam Kirkpatrick for transcribing this interview

Listeners feedback: Give yourself a speed boost!

Normally the listener section of the show focuses on me answering listener questions. However, this week on twitter and the forum it has been the other way around.

You may have noticed that boagworld has been running slow for sometime. Well, I finally decided it was time to fix the problem. However, my knowledge on the subject was fairly limited. That was why I turned to the Boagworld community and boy did they help!

I thought it was only fair that I share the top 5 things I learn from them.

Read 5 Ways To Give Your Site A Speed Boost In Less Than 30 Minutes.

How moodboards can save time, money and your sanity!

Posted in Design on October 22, 2009 by Paul Boag

Mood boards are a traditional design tool. However, few web designers use them. This post looks at how they can transform your process, increase profitability and reduce the stress associated with design sign off.

Headscape has been using mood boards as part of our design methodology for some time. We believe they are an invaluable tool that helps both the client and the designer.

However, before you can understand the benefits of mood boards, it is important to acknowledge where the traditional design process falls down.

Where the traditional web design process fails

Obviously everybody approaches the design process slightly differently so it is unfair to refer to a traditional approach. However it would appear that many agencies and freelancers follow roughly this process:

Ask the client a bit about what they want from the design
Ask the client to identify some websites they like.
Produce 3 design comps in Fireworks or Photoshop.
Ask the client to choose a design from the comps presented.
Iterate until the client is happy.

This was certainly the approach we used until we realised it was not working.

We identified the following problems:

When asked what they wanted from their design, most clients focused on personal preference rather than business or user needs.
Clients often referred to sites that were either inappropriate for their audience or were selected based on content rather than design.
Producing multiple design concepts was time consuming for the designer and expensive for the client.
Multiple concepts led to frankenstein design, where the client would try to combine the ‘best bits’ from each comp.
The designs went through a lot of iterations because the designer did not have a full understanding of the clients requirements.

We utilised several approaches to overcome these problems. However, the most successful component was mood boards.

What is a mood board?

A mood board is basically a collection of graphical elements that set the tone for your design. Typically these include examples of:

Typography
Imagery
Colour
Layout
Style

Often these elements are lifted from other sites or even from sources such as magazines.

An example mood board

They are not meant to represent the final design, but rather provide an indication of how the site may feel.

When you first start producing mood boards it is difficult. You may have a strong sense of how the site should look, and so it can be hard producing alternative approaches.

Increasingly we produce four mood boards:

One that is our initial gut reaction.
One that is a more conservative version of the initial board.
One that is more extreme.
One completely ‘out there’ approach that is probably inappropriate.

Admittedly you could get away with the first three, but the fourth enables the designer to be more creative and potentially discover a completely different approach.

How mood boards can help

The reason mood boards made such a difference to our process was three fold:

They put us in control - Previously it was the client who was making design suggestions and selecting inspirational sites. By using mood boards we were the ones setting the tone and suggesting the direction. After all that is what the client is paying us for!
They are quick and easy to create – Developing design comps is time consuming and expensive, especially for something that may ultimately be discarded. Mood boards can be produced relatively easily, which means they are viewed as disposable. As a result the designer is not overly committed to a particular path and the client can see multiple revisions.
The client focuses on design, not content – We found that when clients looked at a design comp they were more concerned with the content than the design. Because mood boards do not contain real content, this problem is avoided and the client can focus on typography, imagery and colour.

The introduction of mood boards made an enormous difference to the running of our design projects. However, over time we have made some mistakes that have reduced the effectiveness of mood boards.

Mistakes when designing with mood boards

If used correctly mood boards are an extremely powerful tool. However, it is also easy to fallback into old habits. If you are going to use mood boards, be careful to avoid the following mistakes:

Designing a website and not a mood board

One problem we encountered was that we were so conditioned to build websites that it was hard not to. Every time we produced a mood board it ended up looking like an actual site.

A mood board that looks like a final site

The solution

The way we are resolving this issue is by changing the format. Instead of designing on a 1024 by 768 canvas, we have switched to creating A4 mood boards. In fact we also try to minimise web elements such as navigation or search boxes.

Making them too finished

An associated problem was that clients were getting confused. The mood boards were looking so polished that they were no longer sure what they were looking at. Was this a mood board or a design comp? What were they supposed to be providing feedback on?

The solution

We are still battling this problem. However, one approach I have adopted is setting constraints on the designer. Typically this involves limiting what Photoshop tools they can use.

When all the designer can do is copy and paste elements they have found elsewhere, the mood boards cannot become overly designed. The emphasis shifts from designing detail to looking for inspiration and setting the mood.

Spending too long on a mood board

Of course, the final problem relating to overworked mood boards is time. As our mood boards started to become more and more like design comps, they took longer to produce.

This had two consequences. Firstly it cut into our profit margins. Secondly, the designer became increasingly attached to the mood boards and find it hard when the client don’t like them.

The solution

The solution to this one is simple. We are beginning to set time limits on mood board production. We are now asking designers to spend no more than one hour on a single mood board. Most of that time is spent sourcing elements rather than doing design work.

By taking this approach we can afford to produce multiple iterations of mood boards and experiment with many different directions.

Conclusions

I am aware that we are in a minority by using mood boards. However, I would suggest that every designer should consider them as a tool.

If you design multiple comps then this could be a real cost saver.

If you pursue a single approach, this will enable you to explore other avenues with minimal effort.

So, what do you think? Do you use mood boards already, or do you think it is an outdated tool that has no place on the web? Whatever your thoughts I would love to hear them in the comments below.

Top design tip for designing in the browser

Posted in Reviews on October 6, 2009 by Paul Boag

There is an increasing movement to put aside photoshop or fireworks and design directly in the browser. However, this can be difficult without the benefits of a strong grid system. This tip will help.

Grab the grid bookmarklet now