Archive for the ‘web’ Category

I blame the designer

Tuesday, December 8th, 2009

[In which Cennydd has a downright sense of humour failure over a silly web comic.]

Here’s an excerpt of a comic that recently did the rounds in the web design community.

You know what? I’m tired of this attitude.

Clients From Hell is admittedly pretty funny. Sometimes clients say stupid things; but hey, so do designers. I’ve said lots of them myself. But this sort of thing is different. It’s not an amusingly misguided email. Rather, it epitomises a harmful arrogance and entitlement that pervades the design community. It carries a bitter subtext that clients are idiots with no design skill, and it’s a designer’s duty to disempower them by any means possible.

And I’m tired of it. Of course clients aren’t skilled designers; that’s why they had the foresight to hire us. But you know what? They know business. They’re as passionate, committed and talented as anyone. Many of them put their livelihoods on the line to make the web happen. And let’s be blunt: they also pay our salaries.

If a web design project goes to hell this way, I usually blame the designer. He wasn’t skillful enough to make the situation work. He didn’t provide the force of argument required, couldn’t handle the politics, or couldn’t convince the client of the value of good design. On the rare occasion when the relationship with a client goes entirely rotten, the designer should end the relationship gracefully rather than passive-aggressively working to rule.

Unconvinced? I suggest you read Scott McCloud’s excellent post about criticism and the equally insightful comment from Mike L:

“The most common misconception about criticism is that one has to be on a similar skill level as the creator in order to have a valid opinion. I read stuff from many different artists from many different disciplines who cannot abide ramblings of people that couldn’t compete with them in some way. If said person is not an artist, their opinion doesn’t matter. But isn’t art, all art about communication? And who is the artist generally trying to communicate with? … My #1 critic is someone who cannot draw at all. He tells me things I can’t see because I overthink them as an artist.”

(Oh, and here’s what ‘pop’ means.)

Posted in design, web | 16 Comments »

Why designers should care about HTML5

Wednesday, October 14th, 2009

Concurrently published on the quite excellent HTML5Doctor site.

After a while on the fringes of our collective consciousness, HTML5 is finally getting the attention it deserves. The development community (as typified by the SuperFriends) has come together to debate practical elements of the spec, argue over the inclusion of controversial elements, and assess the timeframe over which we can unleash HTML5 in the wild.

However those of us more accustomed to the world of Post-Its, sketches, and .psds – the designers – haven’t been so vocal. Perhaps we’ve been distracted by the bright lights of CSS3 and those surface thrills we’ve longed for. (Rounded corners! Gradients! Transparency!) Or, alternatively, we’ve been in the thrall of @font-face and looking forward to the coming age of passable web typography.

Understandable. But it’s time designers got excited about HTML5 too.

Partly, it’s just good practice. Whatever your flavour of design – visual, web, interaction, user experience – knowing the native technology makes you better at your job. Just as composers should understand the capabilities of the orchestra’s instruments, designers need to understand the language of the web.

But there’s more to HTML5 than simply keeping our skills sharp. It could make a big difference to the way we design for the web.

Semantic elements

Information architects (and, by extension, user experience designers) should be excited by the new HTML5 elements – <nav>, <header>, <aside> and so on. While they won’t immediately revolutionise today’s web, they’re an investment for the future. Doing useful stuff with information is the central theme of IA, and therefore its practitioners should be at the forefront of the new experiences that machine-readable semantics will offer. HTML5 allows us to mark text up in a more meaningful way than a sea of <div>s, meaning we’ll soon see applications appearing at a sub-page level. We’ve started to scratch the surface – think about the Operator toolbar or customisable UIs à la iGoogle – but we’ll need detailed design thinking to work out how to bring the benefits of semantic richness to the end user.

APIs and other extensions

While it’s clear that some of the HTML5 APIs are far from perfect right now, when they’re refined they will offer us intriguing new opportunities and challenges.

Designers of location-based services should of course find the geolocation API invaluable. The contentEditable attribute gives us further power to make the web truly read/write without resorting to JavaScript and custom interfaces. New input types (eg type=”search”) can provide extra visual cues about input function, although of course this depends on the solutions chosen by the browser manufacturers.

Until now, it’s been easy to consider our domain as bounded by the viewport and the web server. But HTML5 is another step toward seamlessness: the merging of desktop, offline and online. For instance, the drag and drop API could see the line between online and desktop experience blur further. Local storage could allow for a web-like experience in areas of poor connectivity. This convergence is clearly a good thing, but we must also design how to expose those hidden seams at the user’s request. Users should stay in control of how their locations are published and what data is synchronised to their machine.

<video>, <audio>, <canvas>

There is of course something of a reported schism between the standards world and the Flash world. Some see the advent of these new media elements (particularly <canvas>) as heralding the death of Adobe’s poster child.

I don’t think this is either likely or desirable. Neither technology is perfect. Flash is, of course, proprietary and thus subject to the whims of a third party that stands between browser and user. <canvas> has known accessibility problems. But the two can live in harmony, if we play to their respective strengths. Some current Flash applications might be better suited to <canvas>, particularly those based around dynamic visualisation: graphs, animations, infographics. Some applications will benefit from the powerful capabilities of Flash: games, heavily interactive widgets.

This aside, there’s clearly a user experience benefit in not having to rely on an external plugin to play rich media elements, and it will be interesting to see the uptake of the <video> and <audio> elements. Although it will initially be down to browser makers to define the interface elements involved, we will need to figure out how to integrate them into everyday web experiences. The good news is that they can be styled in the same way as any other HTML element. If your visual aesthetic relies on slanted images with box shadows, it’s trivial to apply this to video too.

That said, we can’t ignore the elephant in the room: the thorny codec issue. I’m sure we’d all agree that the sooner it’s resolved, the better.

What can designers do?

Only the most patient and detail-oriented designer will relish the idea of reading the spec in full and arguing the finer points on the WHATWG list. That’s just not the way designers roll.

But as a community it’s important that we start talking about HTML5. If you’re new to HTML, now’s a great time to learn. HTML5Doctor and A preview of HTML5 give useful guidance on the differences between HTML5 and its predecessors. Above all, designers should get chatting with their developer friends: there can’t be many left who no longer have an opinion on this technology. How do they see their practices changing? What can we do today to prepare our sites for the advent of HTML5? How can we build on its strong points to make the web a better place?

We don’t yet know what we’ll accomplish with HTML5, but then it’s not often that the vocabulary of the web changes this deeply. However, one thing is clear: if we prepare now, we have a great chance to bring innovation to our users’ online lives.

Posted in development, web | No Comments »

A brief promotional message

Tuesday, August 18th, 2009

A curious seasonal habit of the web designer is the August Supplication, during which the internet reverberates with the sound of begging, back-scratching and unfettered harlotry.

South By Southwest voting.

I’m sure it’s a system that works excellently for the organisers. The pleas for votes market the conference, and those who plead well are likely to fill a room easily. Most importantly, it reduces the numbers from 2,000 to something considerably more manageable.

On one hand, I’m unsure how a conference with such sprawling breadth can be relevant to many professionals. I’m also not convinced a global desert get-together at which the alcohol takes centre stage is a Good Thing during a recession.

On the other hand, like Glastonbury, perhaps everyone should go once. So let’s make this quick. I’d appreciate your backing for my two proposals:

• Beauty In Web Design (solo)
• Design Perfect Site Navigation (panel member)

While you’re at it, feel free to have a poke around at The .net Awards. Clearleft have been nominated for Agency Of The Year, and our work for the WWF has been put forward for Redesign Of The Year.

Posted in conferences, personal, web | No Comments »

The angst of the user experience designer

Wednesday, July 8th, 2009

My work is used by millions.

When the thought first struck the numbers were lower, but I was stunned. I quickly surmised the only way I could retain objectivity and impartiality was to bury this thought, but it wouldn’t leave me alone. I’m hoping that I can now make sense of it by voicing it.

Of course the scale of the web excites me; I’m delighted and humbled that my work can communicate with so many people. Very few roles have such scale. Architecture, perhaps. Journalism. Politics too, although I’m hardly comfortable with that comparison.

While I admit that it’s something of an egocentric thrill, I’m no household name and nor do I wish to be. Web design is far less important than, say, teaching or healthcare. What matters more to me is that I do great work, and having a large canvas provides me with fascinating ways to achieve this.

However, while the web makes it easier for one person to reach millions, it doesn’t make the relationship easier to comprehend. My excitement is tempered by vertiginous apprehension. From these millions, there will be thousands who love my work. There will also be thousands who hate it: people who relied on the old site, who appreciated a section I removed, whose needs I’ve overlooked in the hurry to get the job done.

With such scale, these users are anonymous to me, just as I am to them. While I work hard to understand them and design to support their needs, there’s no way I can know I’ve improved things for an individual user. I hope I’ve done right by them.

The angst of the user experience designer.

Posted in creativity, personal, user experience, web | No Comments »

The making of Tourdust

Monday, February 9th, 2009

A few weeks ago, a new travel startup called Tourdust quietly slipped into public release. It was my first major project for Clearleft, so I’d like to explain a little about the design process, challenges and decisions involved in its development.

Information architecture

The Tourdust proposition is a classic exploration of the long tail: linking offbeat, authentic tour experiences with travel geeks across the world. Think olive oil tours or bear watching, not package deals; a shared platform for small operations that may not even have websites of their own.

Since the site intends to house thousands of travel experiences, IA was a primary concern from the outset. Holidays involve a broad information space, with extensive metadata: duration, location, activity, organiser, price, availability, cost, and so on. Slicing through this data could be a daunting challenge for users, so an early task was to focus on how people understand and find travel experiences.

After design research, personas, scenarios and considerable thought, we concluded that the two critical factors in choosing an ‘active’ holiday (as opposed to a week sunbathing) were what the activity is and where it happens. It’s therefore no accident that these two variables are featured prominently on the site, as both navigation and headings. For a while, I even pressed (gently) for the site to be called everythingineverywhere.com.

Navigation

Since what and where operate independently of each other, they lend themselves well to faceted navigation. However, many faceted systems aren’t good at conveying their function, so we made the decision to split these two key variables off and turn them into primary navigation by means of dual nav bars, part breadcrumb and part hierarchical menu.

The other metadata is mostly taken care of by a “refine bar”. I believe it’s far better to show many results (particularly so in the early days when product numbers are low) and allow the user to trim the scope, than to create a bulky and elaborate “advanced search” feature that could confuse and easily return no results.

Unusual controls like these can be a risk; they’ll only be successful if users understand what they do, and how. The designer has to quickly suggest and demonstrate their operation through affordance and example. The affordance is largely visual: arrows, 3d overlap, and the behaviour of the menus as new options are selected. Demonstration by example occurs when a product is selected, possibly off the homepage. The dual nav is updated to show the intersection of activity and location (eg. “Cycling in Germany”), quickly establishing an understanding of how the controls work independently.

Of course, since these were uncommon controls, the proof was in the user testing. Paper prototypes were the order of the day here, mostly for budgetary reasons. Had more time been available we would have undoubtedly created HTML prototypes using Polypage to be watertight in our conclusions. However, they tested well for an unusual UI element and we felt confident this approach would allow for simple yet powerful navigation through this complex array of products.

Visual language

Another factor we agreed early on is that visual impact plays a huge role in the travel industry (not a massive leap of imagination, given the glossy large photographs seen in printed brochures). It was therefore very important for us to make the products as visually exciting as possible.

My early sketches involved very large, widescreen photos, and this detail was carried all the way into the final product. The widescreen format allows for some great detail of landscapes and panoramas, without the vertical overhead.

It also involves some tricky cropping mechanics. Most cameras take pictures with a 4×3 ratio (landscape) or 3×4 (portrait). The site halves the short side and instead uses an 8×3 ratio. Therefore, when a user—in this case, a tour operator—uploads an image, the system prompts them to crop the photo to show the top, middle or bottom half (the Maths is more complex for portrait shots). This cropping is initially done by clever CSS, repositioning the image vertically behind the 8×3 slot. Once a choice is made, the crop is made server-side for improved performance.

Process

We designed and built Tourdust as an Agile project, in collaboration with our Rails dev partners, New Bamboo. I’ve discussed the challenges of Agile design on A List Apart, but I believe that despite a few teething problems mid-project (mostly a cause of us not allowing enough lead time for design), the site is better than we could have created under waterfall methods.

In particular, since the clients were still exploring the business space whilst the site was being built, the business model changed halfway through development. With waterfall, this would have been beyond the point of no return, but with Agile’s flexibility we were able to accommodate the new requirements with only modest difficulty.

We also found ourselves fulfilling a strategic role as well as just designing the site experience. Frequently this involved reaching into the realms of service design, advising on features, functionality and proposition. One of the outcomes of this liaison was that great swathes of functionality were cut en route. “Worry about it when you need to worry about it” became a useful answer for many scalability questions. I think taking these bold decisions gives Tourdust more focus and a better user experience.

Endgame

Lest I paint too glowing a picture, the site isn’t perfect. Had we had more time, there are dozens of tweaks we’d have made. Imperfection is usually a tricky proposition for designers, particularly so at Clearleft: we do believe the devil is in the details, and our work is usually subjected to high scrutiny. Despite this, we’re proud of what was achieved on a modest budget, and hope we’ve given Anna and Ben the best platform to make Tourdust a success.

Of course, it’s a potentially difficult time to launch a startup. The recession is likely to dent the high-end, luxury travel market, meaning the site’s primary focus is currently on local, UK-based tours. But I do think, if the range is broad enough to gain traction, Tourdust can emerge on the other side in a strong position. I also couldn’t think of better people to take on this challenge than Anna and Ben. People who’ve put everything on the line to follow their dream are an inspiration, and it was a pleasure working with them. They’re true travel geeks and I think their confidence and love for the field will stand them in great stead.

Of course, it’s also down to the users, so I’d encourage you to have a play and I’d love to hear any comments you have about the site.

Posted in design, user experience, web | 2 Comments »

Why “best practice” must die

Wednesday, February 4th, 2009

Anyone who’s worked in the web is aware of the “best practice” cult. To me, it’s a lazy creed that exhorts us to switch off and plunder others’ work, and the time has come to rebel.

Firstly, there’s the pure language involved. “Best” implies something that cannot be improved upon. A world of best practice gives us creationism, chariots, and gramophones. It negates progress.

There’s also a more sinister side, which is when it’s wheeled out as an argument in design projects that are heading off the rails:

“Ah, but that’s not how eBay do it”.

The unspoken implication is that eBay know better than I, and therefore I should defer to their wisdom. It’s an argument that I find misguided more than insulting. The web runs on the basis of meritocracy in a way that many other industries cannot. “That’s not how eBay do it” is industrial, corporate thinking, entirely irrelevant to the 21st century. For the truth is that large companies often don’t have a clue about design. One’s skill and knowledge are entirely independent of the size of your employer: I’m confident I know as much about my profession as the employees at any large company.

The best practice trump card also fails because it doesn’t understand the nature of practical design. It’s not a transferable commodity: you can’t just screw a design solution into place. Good design must be appropriate and relevant to the particular problem. The factors involved—technological, strategic, sociological—are far too complex and variable for a plug and play approach. To say “Well, a dropdown worked here…” is to ignore factors that can actually work in your favour. A company that rejects the easy route and takes the time to understand technology, strategy and users can offer designs that makes it stand out from the rest.

I’m not advocating isolating oneself from the surrounding environment. For instance, at Clearleft, we regularly perform competitor analysis at the start of a project. It’s useful to see where others’ strengths and weaknesses lie, and helps us understand the landscape. However, not once has it given me the answer to a design problem. That always comes later, with thought, with detail, and after many failed attempts.

So let’s not allow the enforced limitation and unvoiced threats of “best practice” to pollute our thinking. It’s harder work, sure, but standing out and being better always is.

Posted in creativity, design, web | 7 Comments »

Coping with a mainstream Twitter

Tuesday, February 3rd, 2009

January was the month that Twitter lurched towards the British mainstream. Stats show an astronomical rise in site and search traffic, and the rich and famous are now falling over themselves to connect with their fawning public.

One may ask why this tipping point has happened first in the UK, rather than the States or elsewhere. One possible explanation is that a small number of influential celebrity types have hastened this outcome, and it’d be easy to fall into a daft sociocultural analysis of Britain the country and Britain the network. Stephen Fry as the powerful Gladwellian connector, uniting the geeks and the unwashed, previously so suspicious of each other!

My money’s on random chance. The initial conditions were set, after which chaos theory is the dominant force (yes, perhaps I have been listening to Jeremy too much).

The practical upshot is plenty of new users, including several of my real-life friends. They’re perhaps still on the early adopter side of mainstream but they’re not the type to, for instance, write blog posts about why people are joining Twitter. While it’s great to have them on Twitter, I have my own selfish concern: will I be able to cope?

I’ve previously mentioned that I have an approximate following threshold of 250. My workload and lifestyle enforce that personal limit, and I can’t realistically keep up to date with more people. So if my less geeky friends continue to join, whom do I drop? The model’s different from Facebook, where I can simply accumulate “friends” (a virtual notch on the bedpost) and then largely ignore them. So do I drop existing Twitterers, many whom I’ve never met but still give me a wealth of inspiration and knowledge, or friends whom I miss and am always eager to hear from? Ambient intimacy or friendship?

It’s a quandary. I’ve been trying to convince friends to join Twitter for a long time and it would be an irony if, once they join, I admit I don’t want to follow them. Yet I’m already operating a one-in-one-out policy, and something will have to give. My likely approach will be to take a much more relaxed and liberal approach to unfollowing people. Just as I’ll go and talk to various people at a party, so my attention will shift around a bit online. It’s either that or I face a cacophony in which I can hear no one.

However, I’m aware that people have very different attitudes to being unfollowed, so I’ll treat this post as a prophylactic excuse. Seriously, it’s not you, it’s me.

Posted in personal, psychology, web | 3 Comments »

Intern position at Clearleft

Monday, January 5th, 2009

The time has rolled round again when Clearleft fancies having a fresh face in the office, so we’re currently looking for a Design/Front End Development Intern.

It’d suit someone with talent and enthusiasm (or, better, passion) for web design, UX and standards-based development, but who maybe lacks the commercial experience and wants to take a strong step forward into the industry. As Andy has commented, it’s a fairly challenging role, because we’re known for having opinions about stuff. So the sort of person we’re after has opinions too. Someone who reads, comments, blogs, tweets and generally likes to be a part of the conversation would fit in brilliantly.

Unlike many intern programmes, this one’s actually paid, and of course the right person would stand to learn an enormous amount from the likes of Natalie and Jeremy. Personally, I’ve learnt more in six months of working here than in any other position, so the rewards are definitely there.

The internment internship runs for ten weeks this Spring. See clearleft.com/jobs to find out more.

Posted in design, user experience, web | No Comments »

• « Older Entries