The project I’ve been working on since February has now gone live. Hailo is a service that allows you to book a London black taxi from your smartphone with just a couple of taps.

It’s early days but so far the response to the service has been fantastic. I’ve been using the service for a couple of months now and it really is great. We’re adding drivers to the network all the time so It’s only going to get better.

For me It’s been an amazing experience. Focusing purely on product design with native apps has been a huge challenge for me and a thoroughly enjoyable one. What we’ve achieved as a team is fantastic. Im so proud to be working with such a passionate and talented team.

We are looking for more talented people to join us on our little boat, so take a look at our current openings and get in touch.

Lots more to come from Hailo so watch this space. Try it out and let me know what you think.

Instapaper is the most used app on my iPhone. If you are not familiar with Instapaper it’s an app that with the help of a bookmarklet on your desktop browser allows you to save content to read later.

With the realease of 2.3 comes a little UI detail that I love. Its only a small change but its a great one. Its a length/progress indicator. The number of faded dots indicate the length and darker dots your progress. Simple, small but lovely.

If you are a web designer and do not know what I mean when I say “responsive web design” get your backside over to A List Apart and read Responsive Web Design by Ethan Marcotte. Also check out Jeremy Keith’s posts on responsive design.

I’m not going to go into the details of responsive design here but in a nutshell its a way of building sites that adjust their design to best suite the screen width or device your content is being viewed on. Resize your window on this site and you should see what I mean.

What I’ve noticed while playing with responsive design is how much performance can be negatively effected when using the most basic CSS3 techniques on low powered devices such as the iPhone. It seems our friends Mr Drop Shadow and Mrs Gradient are messing with the responsiveness of our responsive sites.

Check out these two very simple (and ugly) pages on a mobile browser (Sorry I’ve only tested on webkit so far). The first contains just a few CSS3 goodies (Drop shadows, rounded corners and gradients). The second identically marked up page contains none of these fancy pants styles.

On my iPhone 4 the difference in responsiveness is obvious. If I scroll down the fancy page at speed it becomes sluggish and well un-responsive. I can see the browser struggling to render the page as it descends. No such problem on the basic page as it zips along merrily. The sluggishness on my old iPhone 3G is even more apparent.

I’m not for a moment saying stop using CSS3. I love it too much. Instead maybe use it responsibly. When adjusting your designs for the smaller screen think about the performance not just the appearance.

note: The sluggishness mentioned is less noticeable on a recently rebooted iPhone. But who reboots their iPhone.

If we are not designing with set goals in mind we are just decorating and prettifying. This can be fun and with a bit of luck can be beneficial but without goals its hard to determine if a design exercise has been of any real value.

Once goals have been outlined we should set about achieving them using all the skills and knowledge available to us. As designers we have an arsenal of skills at hand to help, from design fundamentals such as colour theory and visual hierarchy to web/application specific skills such as usability and information architecture. But rarely does the application of these skills lead us to a single solution to a specific problem.

Analysing data from analytics software or usability testing can provide huge insights on how designs have met business and user goals. And with an iterative design process in place we can continue to improve designs through a process of monitoring key metrics and tweaking our work where necessary.

What metrics you use to measure the success of a design really depends on the goals you set at the beginning of the process. What is the purpose of the design? What problems are you trying to solve?

Using data to help inform your design is a great way to work especially if you’re sometimes in need of ammunition to convince clients or stakeholders that a certain direction is the right way to go. Using quantitive data to help make design decisions does not replace creativity it just gives us tighter constraints to work within. It’s just another tool to help us when building products that work for both the business and the user.

In a future post I’ll outline some of the basics to get started with data driven design. In the meantime take a look at these:

Beyond Web Analytics

Great podcasts covering all aspects of web analytics

Web Analytics Demystified

Free PDF book. Also includes “The Big Book of Key Performance Indicators”

I’ve used a debug css file for years. Its changed a lot over time but I seem to have settled on a format that works well with my workflow and other debugging tools (Firebug). This simple css file simply gives a background colour to every element to quickly enable me to see how well these elements are arranged on screen.

At a glance you can tell what’s not aligned correctly, where spacing is uneven and where certain elements are breaking out of their containers.

It’s nothing special but saves me a lot of time so I thought i’d share incase it helps anyone else out there.

Download: debug.css

Feel free to use and improve. Let me know how this could be made more useful.

Feeling inspired by a recent talk given by Bruce Lawson on HTML5 and CSS3 I felt inclined to have a play with what many see as the most exciting part of the next generation of HTML – video.

With HTML5, video is now native to the browser. No longer is it isolated from the rest of your page trapped in a third party plugin. You can now style and script your video content much easier than before. And because it’s easier designers will I’m sure be concocting fancy new ways to present video content to the world.

With this in mind I had a little experiment with the new video element to see how the native player responds to some basic styling. All the browsers I tested performed well and seem to have quite robust video controls. Opera’s video controls (10.61) seemed to have the least robust UI when applying rotation to the player but apart from that it too performed admirably.

Keyboard access

What stood out for me though when doing these tests was the different ways browsers give the users control over video playback. In particular I noticed how limited keyboard access to the controls were in most of the browsers tested. Here is the skinny…

Opera had the best keyboard access, allowing a user to give focus to the video element by tabbing without the need for tabindex. Once in focus further tabbing allows the user to play/pause and control the volume using the cursor keys. The play head can also be focused but I cant work out why as the ability to scrub forward and back doesn’t seem to exist. One other small problem occurs when the video is the only focusable element on the page and focus becomes trapped on the volume control. In this situation I’d like to see focus loop around the individual controls again.

Firefox (3.6.8) also has good keyboard access and does not need tabindex to bring focus to the element. Once in focus the user can control play/pause (spacebar) and the movement of the play head in 15 second increments (left and right arrows). No default visual feedback was given to indicate focus. Firefox allows full screen viewing but this option is only given by the contextual menu. It would have been good to see this option on the controls.

Safari (5.0) has the best looking controls in my opinion but the keyboard accessibility is non existent as far as I can tell. Tabindex is needed to give focus but once in focus I could not get the video to play via the keyboard. There are also no controls in the contextual menu. In fullscreen however the player is fully controllable with the keyboard.

Chrome (5.0.3) also has no keyboard access but does have play, pause and loop control through the contextual menu.

All this HTML5 video stuff is so new and there are bound to be teething problems. So I’m not waging a finger disappointingly at any particular browser vendor. Instead I’m just sharing my findings in the hope that one day we will see some more consistent player behavior.

If keyboard accessibility is important to you you can of-course script your own controls for now. Remember don’t hate the player..

I’m not too fused about job titles but I’m fully aware of their importance within our fast evolving industry. They enable us to quickly understand what skill set a professional might have to offer. Some job titles are more fuzzy than others “social media expert” springs to mind and some are cut and dry “.net developer”.

I call myself a user experience designer but I’m not massively confident in doing so. I first used the term “user experience” on my CV in 2000 and I’m confident in my ability to design and build solid usable websites that people engage with while meeting the needs of the business etc, but the job title UX designer doesn’t feel 100% right to me.

This is partly due to confusion over what a user experience designer does, not just outside the field but from within too. Much of the confusion arises from the title itself. You would assume from the title that we design user experiences but we don’t. Experiences are personal and different for everyone so cant be “designed”. Instead we design for the experience, the many parts that make up the experience. We design the user interface, the information architecture the interactions and even venture in to the murky world of strategy.

If it was up to me I’d call myself a web designer and have done with it. However UX design does seem to be a better umbrella term for what I do so I’ll roll with it for now.

Right I have a leak in my kitchen. I better call the utility infrastructure architect.

Oh and just be sure not to use the word “Ninja” in your job title unless you are an actual Ninja.

I’ve just completed some avatars for use in a personal project of mine. Please feel free to download and use them as you wish. No need to attribute them to me but a tweet to this post would be nice. hope they come in handy.

A coming soon page for hireFox. I used campaign monitor to collect the data.

You’ve just bought a lovely new doormat for people to wipe their feet when they enter your house. Its a great looking doormat, nice and chunky with a witty welcome message.

But every time someone visits they trip up on this chunky thing of beauty. They don’t break their neck, its more of a stumble and steady yourself situation. This seems to happen to every visitor that comes to your house so what do you do? That’s right you fix the problem by getting a new thinner one.

Now imagine these people were letting themselves in and you didn’t actually see them trip. Because they haven’t broken any bones they probably wont bother to mention it to you. Seeing people trip and stumble prompts you to fix the problem.

Watching people use your site is just like this. Sometimes its just a few chunky doormats to deal with, other times its a door without a handle or a floorboard that rears up and slaps visitors in the face. The point is we often need to watch users to find these problems and most of the time a fix is as easy as getting a less chunky doormat.