This post has moved.
An updated version is available here:
This post has moved.
An updated version is available here:
I’m pleased to see Trade Me have started posting their browser stats again, something I used to do here, way back in the day.
Here is the latest update, for May 2010: Browsers and Operating Systems
When people talk about Open Data they are nearly always referring to government data. But, I think there are also lots of examples like this, where private companies have data which has a public good, and which they can open up at no material cost to themselves.
Trade Me is such a popular site that their audience can pretty much be used as a proxy for the internet in New Zealand, so this gives developers working on smaller or less popular sites a good idea of the sort of browsers they should be targeting.
Remember, if the equivalent numbers for your site are different from these there are two possible explanations:
Just about everybody assumes #1, when #2 is often more likely.
Remember that the 5% of Trade Me visitors using IE6 is still 31,500 unique visitors per day, or nearly one Westpac Stadium full. Are you happy to turn all of those people away with a message telling them to upgrade their “browser”, what ever that means to them?
… as pointed out by Eric Ries at Kiwi Foo:
What’s the next step after that?
What do you do?
As the video says:
“Less than 8% of people interviewed know what a browser is”
These are the people who use the things you build.
Keep them in mind. :-)
The quality of form design, in general, on the web continues to be a huge source of frustration for users and an embarassment for all of us who are involved in designing and building sites.
Here is a payment page that I needed to traverse recently…
Firstly, as originally served:
And, here once I’d disabled CSS:
It took me a few attempts to even work out what was happening. Initially I just assumed that the page had somehow not completely loaded.
Then I highlighted the area where the labels should be and realised that they were actually white text on a white background!
I’m guessing that in this case the design is incompetent rather than malicious.
Perhaps it works fine in Internet Explorer? Who knows.
I was determined, so worked it out. But, I expect I’m an exception.
If they measured their conversion rates on this page, surely they would find that a significant number of people simply give up, unable to work it out.
So, you have to assume that they probably never bothered to measure.
Of course, none of the intelligent and experienced people who take the time to read this blog would ever make a mistake as outrageous as that. Would you?
You might be surprised …
Let me try and debunk some axioms of registration page design, and in the process highlight a simple mistake that I would guess many of you have made without even realising it (I can only say that with confidence because I’ve made it myself many times).
To start, a question… what is the difference between these two forms?
Form A: with tick-box
Form B: without tick-box
Which is easier to use? Or, to ask the same question in a more measurable way: which would have a higher conversion rate?
As we’ll see there is evidence to suggest that Form B is a much better design.
So, why are registration pages like Form A nearly ubiquitous?
Here are some possible reasons I can think of (if there are others, please let me know)…
In case it’s not obvious, I’m not a lawyer!
If there are any lawyers reading I’d be interested to get an informed opinion on this.
My guess is that it doesn’t make any material difference.
Just think about how this would sound in court: “But, your honour, they ticked the box when they registered!”. Yeah, right.
And, even so, at what cost this additional legal protection? How many fewer registrations can you afford before it’s worth taking the risk?
Because everybody else does
This is probably getting closer to the major reason for the ubiquity.
And, there is something to be said for consistency. But, surely only when it doesn’t hurt! Lemmings!
Just because everybody else does something, that doesn’t excuse us from measuring and understanding the impact of our design decisions.
How hard is it to tick a box?
Now we’re getting to the interesting bit…
I was recently talking to Nigel about some of the work he did on improving the StarNow registration page. This is the first example I’d come across where somebody had actually taken the time to measure specifically where people were failing on this sort of registration form.
It turned out, in their case, that 27.9% of people didn’t tick the box the first time, and as a result got a validation error. What’s more this only compounded other problems. When the tick box validation error was displayed the password fields were reset (as is common, unless you explicitly set these values when the page is returned, which is frowned upon by security types). So, of course, many people would read the error message, scroll down and tick the box, only to find that the form still didn’t submit successfully as they also needed to re-enter the password.
Does this sound familiar? I know I’ve been through this exact dance myself many times, and I consider myself a pretty savvy web user.
Overall they found that over 34% of people who attempted to complete the page (i.e. pushed the submit button at least once) abandoned the site without successfully completing their registration process.
By making simple changes they decreased this to 17%. That’s a staggering 26% improvement!
So, some suggestions:
I love the buzz of a big crowd. It’s exciting to soak up the atmosphere created when lots of people are all in the same space at the same time.
If you’re lucky enough to be the band, or sports team or speaker who is the focus of the crowds attention, then that is quite powerful.
(Or terrifying, I suppose, depending on their mood!)
If you design or develop software it’s much harder to get feedback like this.
But, it’s still useful to think of crowds to help you visualise the audience of people who are using what you’re building.
This was the idea behind the photo I use in the header this site.
Another from the same shoot is below, for those of you reading via my feed:
The stadium seats about 35,000 people when it’s full. At the time there were about that many people online at once every evening on Trade Me.
(As I type there are over 80,000 online, showing how much it has continued to grow since then!)
When you think of that many people all in one space together, and the noise and activity they generate, it changes the way you think about the people using your site.
One of the things that software developers do all the time is dismiss a percentage of their audience as unimportant for one reason or another, without thinking of them as a distinct group of people.
If you don’t think you need to worry about people stuck using IE6 (for whatever reason) or a dial-up connection, or people who struggle to read small fonts, or people who are colour blind (or completely blind), or people who don’t know how to use a command line, or people who are still nervous (paranoid or otherwise) about entering their credit card details into a website, or people who want help from a real person, or people who use Firefox on a Mac … because on a percentage basis they are not that many … calculate just how big that group is (take your unique visitor count and multiply by the percentage, however small), and then imagine standing up in front of that group and telling them to their face that they don’t matter to you.
If you don’t think it’s a big deal for your site to be broken or off line while you make changes … think of all of the people who happen to be visiting at that point and imagine what it would feel like to have them all in the room with you while you flick the switch. No matter how small the number it would probably feel like a lot of people. And, you might be motivated to get the site back up more quickly if they were all standing behind you impatiently looking over your shoulder.
You can use the same technique to help put other numbers in perspective.
It’s amazing the difference it makes when you start thinking of your metrics as real people.
Help me out with some more examples…
Here is an example of a beautiful iPhone app and a simple promo website:
The UI is very easy to look at – little things make it obvious this was designed rather than just developed: like the wood grain background, bold easy to read fonts and navigation elements which have clearly been designed to be touched rather than clicked.
I especially like the trail map link on the resort page which includes a bar chart showing the percentage of runs that are beginner, intermediate and advanced – a nice way to communicate a lot of information without adding lots of noise.
Their website is great too – a single page with screen shots and an obvious link to the App Store.
At the moment they only cover the US and Canada, but according to ReadWriteWeb they have plans to add NZ and other countries soon.
Other apps from the same developers, all of which look just as impressive:
Also, something fun… check out Burn Ball by Tim Haines!
PS: If there are any aspiring iPhone developers out there looking for a project to get stuck into in 2009 drop me a note.
Measuring everything doesn’t necessarily have to involve complex analytics tools, or lots of development.
Here is a simple way to quickly log events of interest, for example if you are running an AB test.
Create a single table in your database with the following columns:
Then whenever something happens that you want to track, insert a row. You can use the details field to track whatever data is relevant to the event.
Optimise the table for inserts, so that you can quickly add rows whenever required. Then export the data when you want to run reports. You can flush all of the data when you have your answer (or do it automatically every week, or month)
Do you AB test?
Lots of people talk about it, but I don’t see many examples of people actually doing it.
Here is one example I saw last week, which sounds like it produced some great results.
The key, I think, is to keep it simple.
For example, find something small you can change easily and run an experiment. Find an appropriate ID and use a mod2 to split your audience in half. And, track the results so you know what impact the change has made (more on this shortly).
Then rinse and repeat.
When I say small, I mean small – see this from the Google blog:
If you’ve done AB testing I’d be interested to hear from you.
How did you do it? What results did you get?
Google has published their list of the top search terms for the year:
Top 10 searches on google.co.nz in 2008
- trade me
Half of these are site specific brand names (in bold) – meaning that rather than using Google the person doing the search could have simple added .com or .co.nz to the term and entered the URL directly into their browser and found the site they were looking for directly.
(the same trick would actually also work with most of the other terms too, but it’s not so obvious that people searching for these things were after the corresponding .com)
The one that will really surprise many web developers, I suspect, is “Google” itself – the sixth most popular search this year.
How do you explain that? What’s the mental model those users have of the web and of search engines specifically?
Most technology people will, I suspect, find it difficult to understand the sort of person who does this sort of search, but that’s exactly what we need to do if we’re going to build products these people will like to use and will tell their friends about.
Now Hiring: Web Designer
Interested? Check out the job description.
Jason from 37signals last week posted one of my favourite quotes about complexity, and specifically complex systems:
“A complex system that works is invariably found to have evolved from a simple system that worked. A complex system designed from scratch never works and cannot be patched up to make it work. You have to start over, beginning with a working simple system.”
Here is another along the same lines:
“There are two ways of constructing software; one way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”
C. A. R. Hoare, the inventor of the Quicksort algorithm
And, why do we think complexity is desirable in the first place?
“People often misinterpret complexity as sophistication”
Niklaus Wirth, the father of Pascal
Are you trying to be too clever?
One of the dilemmas with building something for yourself, rather than for a third-party, is you are never really forced to commit to a delivery date.
Or, at least, there is nobody else who will be angry with you when you run late.
For those of you in this position: how do you create a false sense of urgency for you or your team?
I’m interested in your ideas.
When I was in San Francisco earlier this year I caught up with Ben Goodger, who I first me when he was in Wellington to speak at Webstock. He kindly took some time to show me around Mountain View and we had a nice Mexican lunch at one of his regular hang-outs.
We talked about lots of things, but exactly what he was working on wasn’t one of them.
He said he wasn’t working on Firefox any more. And, I saw that he was running Visual Studio in a VM on his Mac.
But, I didn’t press him beyond that as he was obviously reluctant to say much at that point.
Today we all find out: Google Chrome
Even before it was officially announced there was a lot of buzz about this. There is already a decent Wikipedia page with a good summary of the various features that are included in this initial release.
Here are my thoughts about this:
The rise and rise of WebKit
The number and variety of browsers that web developers need to consider has grown considerably in the last couple of years – IE7 has become the most widely used browser, although there are still plenty of people using IE6, Firefox has been steadily ticking up, and Safari has doubled (albeit from a very low base) probably on the back of people switching to OS X. IE8 is on the horizon. And, now this.
These are the most recent browser stats I have from Trade Me (from July 2008):
Those sites that don’t take Safari seriously at its current level may need to re-evaulate on the back of this announcement, as Google Chrome is based on the same WebKit foundation as used by Safari (and the iPhone).
Steve Job’s decision to open-source WebKit in 2005 is looking smarter and smarter.
Who said the browser wars were over?
The Google engineers have made a big deal in this annoucement about each tab having its own isolated process and memory space and the performance benefits that will come from this design – most notably when one tab dies it won’t take the whole browser down with it.
It’s true that this is one of the big weaknesses of Firefox, especially when it’s running on an OS that doesn’t need to be re-booted too often. :-)
But, I wonder if in time the isolation under the hood won’t pale in comparison to the isolation options presented to users.
By selecting the document options (immediately to the right of the
address bar omni bar in Chrome) and choosing “Create application shortcut” from the menu you can quickly and effortlessly create a single instance browser for your favourite web applications.
Over the last couple of months I’ve been experimenting with something similar using Fluid on OS X (another browser which uses WebKit).
I have created separate applications for many of the web apps I use the most: Google Reader, Google Docs, Xero, WordPress, etc.
I’ve found various reasons for doing this…
Because each site is running in a separate app I have far fewer problems with the browser leaking memory or crashing. I also don’t tend to leave Firefox running for days on end as much as I used to, as most of the sites I tend to leave open are elsewhere.
Fluid also lets you customise each application – with a nice icon (which shows in the dock – allowing you to navigate directly to the site), user scripts (using GreaseKit) and other options, such as whether to display the address bar, which URLs are allowed etc.
For example, with Nik from Code To Customer I created a Xero application with a high-resolution icon and a simple script which shows the count of unreconciled transactions on the dock when the app is running. This now feels much more like a native OS X app.
If you’re a Xero and Mac user and you’d like to try this out: download the application and user script (the script needs to be installed manually once you’ve run the app – start with Command-Alt-N and follow your nose). I’d be interested to hear what you think of it.
Google Chrome seems to just use the favicon, which looks pretty ugly. Perhaps they could support an alternative link in the header to a higher resolution icon to use in this case? UPDATE: they do, see below.
I’ve even created a Fluid app for the web-based control panel on my home NAS, which broke horribly when I upgraded to Firefox 3.
Why are single instance applications important?
For those of you who run your own site, look at your referral logs and notice how many people type your URL into a search engine. If they had a good mental model of their browser wouldn’t it make more sense to use the address bar?
My prediction… look out for icons for all of the different Google apps on a desktop near you soon (or dock if you’re one of the cool kids).
And, if you have your own site, you should be thinking about how to package it into an application.
A little bit of personality goes a long way
Add Scott McCloud to that list (see: scottmccloud.com).
The cartoon book they have put together to announce the launch and describe some of the design decisions behind Chrome is really well done and well worth a read if you haven’t already taken the time.
Perhaps this is what all technical documentation should look like?
Is there anybody in New Zealand who can do this sort of thing? If so I’d like to talk to them.
Using the engineers who built the browser as the characters is a nice touch too, and I’m sure a nice ego boost to those involved (many of the same people appear in person in this video)
They have also managed to strike a good balance with their user interface.
The blue background differentiates it from other apps and makes the tabs stand out.
They have definitely gone for the “less is more” approach, which is great.
“I have to admit, Google Chrome has one of the simplest — and the least attractive — UIs I’ve seen in a while. I didn’t realize how much I rather liked the color that the icons in most toolbars lend my apps until faced with the Spartan blue tagged interface that Chrome opens with.”
Here’s how the “chrome” part of the various browsers look in Windows Vista (via VMWare):
Internet Explorer 7…
When you see these side-by-side you realise how putting the tabs on top is a great design decision (although some credit should go to the Opera team for pioneering that approach).
Also, look out for the “stats for nerds” link on Task Manager :-)
Just because Google builds it doesn’t mean they will necessarily come.
Many of the problems it solves are not problems that many people know they have. Is it really 10x better for those people?
I remember web developers getting very excited when Firefox first launched. Finally a browser to replace Internet Explorer, we all thought.
While that may have been broadly achieved amongst technical types, it’s not true at all for the general population (see: We’re Not Normal).
Firefox 1.0 launched in January 2005 (a long time ago now, eh?) By August 2006 it had achieved just over 11% market share in NZ and, as per the numbers above, has since grown to around 16%. While this is a huge number of users it’s not really the predicted global domination.
I think it was Blake Ross (one of the other original Firefox guys) who said that he appreciated Internet Explorer, because how else would people download Firefox!
He was joking, obviously, but there is an element of reality in that statement.
You could probably argue that 16% is the proportion of general internet population who have ready access to a geek to upgrade their browser for them. Everybody else is blissfully unaware. :-)
What market share do you think Chrome will achieve?
And, how much of that will be at the expense of Firefox?
UPDATE (12-Sept): Ben got in touch with some more information about adding custom icons when creating application shortcuts in Chrome…
You actually can specify larger images to be used in your application
shortcuts when the user chooses the menu in Chrome:
In addition, you can write script in your page so you can offer UI to
create the shortcuts yourself using Gears:
Hope this is useful info!
This is a guest post by Jay Nielson from Kiwibank. Enjoy!
To coincide with the launch of the iPhone in New Zealand, we at Kiwibank decided to launch a new Mobile Internet Banking system. We knew from the start that we wanted to support many different devices, but unfortunately, we were stuck with a full timeline of just three weeks. We had this time to design, build, test and implement essentially a new Internet banking platform and we had one developer and one tester to do it.
My name is Jay Nielson and I was that developer and I’m hoping that this guest post that Rowan has allowed me to write will give a bit of insight into how we approached this project, some issues we came across, some of the tricks we found and lessons we learnt especially for developing for the iPhone.
We launched the first version of the site in July with basic support for the iPhone. Of course, we wanted full support for many devices, but the iPhone was going to bring the publicity that a basic site may not be able to. Behind the scenes we set up the architecture of the site to be able to dish out completely different code depending on the device. We were able to include different style sheets as necessary and, of course, different images.
For example in the latest version, the login page is designed to fit the device if you’re browsing on an iPhone but is stripped down if you’re browsing on a simple Sony Ericsson phone.
iPhone Login Page
Mobile Phone Login Page
We knew from the start that there were other mobile sites out there but the difference between us and them is that we never meant to have just a single version of the site.
We had the basic design used on some of our other websites from our design company (Springload in Wellington) to use as a base. Because our current site is written in classic ASP (and I know that site inside out) I decided that the limited amount of time we had meant that the site was going to be built with the older technology, with a rewrite at a later stage.
I developed it with a very rudimentary controller/presenter system where I bought all the page logic out from the presenters and left them to render the page as they needed. This was the way I managed to easily add new device support – with the page logic separated out (and most of the presentation data bundled into classes) adding new device support was easy. As for detecting the different devices we found plenty of information on the net about which phones use which user agent strings, it was just a matter of finding the common attributes and taking them out. In all there are about 20 checks to determine the 6 different devices (iPhone, Browser, Windows Mobile, Mobile, PalmOS and Blackberry)
We decided to include the 90% most used features of our Java mobile application:
We restricted funds movement to only within your own accounts, which allowed us to defer implementing the KeepSafe security used on our other sites.
The trick with all of this is getting the site working as a web page but looking like an iPhone application that people are familiar with. This meant big buttons, simple layout, uncluttered and to the point. Our friends at Springload helped immensely at this stage.
The biggest issue we had with the iPhone (apart from being able to only test on a Mac) was the fixed width. Browsing the web on the iPhone is pretty simple. The device can render the page using Safari and you simply zoom in and out with a pinch motion with your fingers. Now, there are META tags you can add to the heading of the page to restrict the zoom levels and while they are pretty straight forward, but the device would never seem to return the text back to the font size it was to begin with after you rotate it to landscape mode. A bit of research was needed and we found the following code seemed to overcome it:
<meta name="viewport" content="user-scalable=no" />
<meta name="viewport" content="initial-scale=1.0" />
<meta name="viewport" content="maximum-scale=0.6667;" />
<meta name="viewport" content="width=device-width" />
<meta name="format-detection" content="telephone=no" />
The first four lines dictates that with width and zoom levels are to be static while the final one stops our accounts numbers being turned into phone numbers for auto dialing!
iPhone Accounts Page – with option to rotate to widescreen for more detail
With the iPhone version of the site working it was release time. We got it live the day before launch and have received positive reviews. As far as marketing it went, we decided to keep it a little low key and went more for word of mouth with a single press release rather than full page newspaper ads. It worked well. As far as our estimates are concerned, we had about 10% of the iPhone sold in New Zealand logging in and the only limiting factor was that no one could buy any more – we’re still waiting for our three to arrive!
Something else we tried which we haven’t done much before is to be quite open about it. We posted on blogs, answering questions people had and set up email addresses for feedback. We knew this was going to be an iterative process and took steps early on to get the feedback from customers that we needed.
With the launch a success we looked to the future. We had given out an email address for people to post their ideas about the site and the number one requested feature was support for Windows Mobile, so of course that was a priority in the new release. There were a few layout issues as well we needed to fix, but we also decided to try out hand at multiple language support.
A little addition that I wanted to sneak in was changing the page layout to display more information if the iPhone is rotated to landscape. There are a few issues at this stage, but the concept works perfectly. On Rowan’s post about us, the comments got into renaming accounts. I added that functionality in as well after the discussions there.
The latest version of the site, launched this week, now has the extra features we wanted including support for multiple languages, starting with English (the default), Russian (as the tester’s wife could speak Russian and it was a perfect way to test international character sets) and my favourite, Swedish Chef Bork Bork language, for a bit of fun (Bork! Bork! Bork!). All the language strings needed to be taken out and are stored in a database which is then cached in the session for the customer when they first log in (or change their language). I created a C# GUI front end to that database to allow us to update/add new string values without a full release of the code. In reality, we could release Arabic tomorrow without any updates to production. The language strings are per device and per language. So for mobile, if needed, we can summarise a lot more text as it has a smaller screen real estate.
Login Page – Russian
Login Page – Swedish Chef!!
The new version of the site works on the iPhone, Windows Mobile devices and mobile phones with sufficient browsers.
To top it off we have even been nominated for three TUANZ awards, including innovation of the year so wish us luck on the 28th.
We’re always looking for new ideas and feedback and would love to hear it. You can email us at firstname.lastname@example.org
Given that most of their competitors measure their progress in months or even quarters, I think it’s great to see a bank turning something like this around in just three weeks. And also to iterate quickly – already they have released a second version which incorporates a lot of the feedback they’ve received following the launch.
Plus can you imagine any other bank launching a Swedish Chef version of their site? It’s fantastic!
What do you think? If you’re a Kiwibank customer, how do you find this application? If not, would a good mobile app be enough to make you switch?
I’m interested in your comments.
Also, if you’re interested in writing a guest post here about something you’re working on please feel free to get in touch. My email address is on the right hand sidebar.
How many steps does it take to get a change live on your website?
Ideally it should be a one click process.
Otherwise, when the pressure is on (i.e. when there is a bug on the site that you quickly need to fix) you’re sure to forget some critical step and make an even bigger hole for yourself.
What we called “the deployment process” changed a lot during my time at Trade Me.
In the very early days we just copied ASP scripts directly onto the production server. We only got away with this because there were not many people writing code and there were not many people using the site.
Later, as we moved to having multiple web servers which each required a copy of the code, we created a simple Windows application which copied the files from our local directory onto each of the web servers and would also execute selected SQL scripts against the production database. This was much better, but still relied on the developer doing the push to have the correct files on their local machine.
As the site got bigger there were some new complications. For a start there were more people involved. The teams responsible for testing and for maintaining the database and servers got increasingly nervous about developers having the ability to push code at any time. The code base got bigger, making it more difficult to keep in sync. The number of people using the site increased massively, making it less and less practical to just put code changes multiple times during the day. And, we also moved to using ASP.NET, which added the complication of having a build step in the process.
To address some of these issues we developed a new tool we called the “Release Manager” which hooked into source control and allowed us to package up changes so that they could be pushed to test or to production with one click (using simple NAnt scripts under the covers). This removed a lot of the complexity and stress from the process.
I’m sure it has continued to evolve since I left – if anybody from Trade Me is reading it would be interesting to hear about how you do it now.
Towards the end of my time there the test team, who had final sign-off on each release (twice per day at that point), got into the habit of queuing up ‘Push The Button’ by the Sugarbabes on the MP3 player when they were ready for changes to be deployed to production. Every time I hear that song now my pulse increases slightly at the prospect of some site changes going live!
I always thought it would be fun to wire up a proper red button to trigger the deployment, but never got the time …
If you’re interested, I wrote a little more about the tools and processes we used (as at April ’07) here:
How do you manage deployment?