Traditional pagination

Pagination, those 1 2 3 .. Next page links at the bottom of a page of search results or content. Are they dying a slow death? I think so and when you step back and think about it, it makes perfect sense. Why do we need it? If you scroll to the bottom of a page of content surely that’s indicating you want to see more? So, website, load some more and save me the click and time!

Some good examples I’ve seen of this are on Forrst (screen recording below as it’s an invitation only site) and the new Google image search (go give it a try).

Note the back to top button top right in the screencast as well, nice touch!

Twitter has a big “more” button at the bottom which is somewhere in between traditional pagination and where I think we’re heading – a paginationless world. I think they should just load more tweets as you scroll and save us some clicking.

This post inspired by discussions at 99designs.com.

Update: This article Pagination alternatives is a good related read.

UX Australia Logo

I recently conducted an interview with 3 UX Designers who will be speaking at the 2010 UX Australia conference – this year hosted in my home town of Melbourne (August 25-27).

The interview is on sitepoint.com entitled UX Design: What it is, What it Takes, and Where it’s Going.

I’m really happy with how it turned out, I thought the guys had some insightful views especially around what it takes to be a good UX Designer. Have a read and let me know what you think.

The winning codaroos team. Photo courtesy of FullCodePress

It’s been almost a month since myself and the rest of the Aussie team brought the FullCodePress trophy to the shores of Australia for the first time. After suffering defeat at the hands of the New Zealand team for the first 2 years it was a nice feeling to win. And what a fantastic event to be a part of. I really enjoyed what was an intense long weekend in Wellington – the friendly locals, the lovely meals, the stunning Martinis, the excellent Webstock talks and the event itself. It was certainly an experience I’ll never forget and am glad I plucked up the courage to be part of.

An overview of the event

For those unfamiliar with FullCodePress, it’s the brainchild of Mike Brown and Russ Weakley and was conceived as a way to do something charitable while furthering the awareness of the web industry – as well as having some fun along the way.

How it works is each team, comprised of 6 web experts, competes to build the best website they can in 24 hours for a charity that is revealed to them at the start of the 24 hours. My favourite description of it is the Geek Olympics.

This year there were three teams competing; America (Team USA), Australia (Codaroos) and New Zealand (Code Blacks). It was Americas first competition and New Zealand had won the only 2 previous events. I’m proud to say I helped bring the trophy to Australia for the first time – and with a unanimous decision to back it up.

How we won it

So how did we win it? Philip Fierlinger of Xero (one of the judges) wrote a great article outlining the judging criteria and process but I’d have to add that I think we had a fair bit of luck on our side.

Some luck on our side

The teams were evenly matched in terms of skills, experience and talent (with the exception of Team USA who boasted some well known names in the industry) but I believe luck helped us to win.

1. We had a much simpler service to communicate compared to the other teams. Hearing dogs is easier to communicate than mental health and community youth services.
2. Our organisation was the only one that had an existing site which we could learn from.
3. We got a great representative from the organisation who was smart, knew her subject matter intimately, was trusting, a great communicator and who stuck with us for the full 24 hours.
4. We had some good imagery and video to use.
5. By coincidence, four of our team members had at differing times crossed paths with each other which made it easier for a big chunk of our team to work smoothly with each other.

The away advantage

It’s not that significant but travelling and staying together in a hotel really helped our team bond and get to know each other. I believe it played a part is us being able to work well together.

Lots of planning and preparation

Although nothing can really prepare you for the intensity of those 24 hours together, we did a reasonable amount of planning and preparation in the lead up. We used Teambox to share our thoughts, links and files. We had quite a few conference calls and we spent a fair chunk of the day before in the boardroom of our hotel collecting our thoughts and planning our approach. We even called a past contestant (David McDonald) to get a better understanding of what to expect and plan for.

Focus on content – it’s not all style

I believe our site is the weakest of the the three in terms of visual style. We won it for the content and stories told through the site and the usability of it. We kept the site flat, only 3 pages deep, and we organised it focusing heavily on their primary audience. We didn’t add any fancy features, we just kept it simple. We did plan to get in one fancy feature, for example an AJAX interaction somewhere significant, but it never happened. We did however create a pretty cool 404 page for them.

Quality over quantity

We went in with the approach of delivering quality not quantity and I don’t think we quite got there but it’s the best approach to take. 24 hours is not long to overlap interaction design, visual design, content writing and publishing as well as coding. If you want to deliver a winning solution then focus on delivering the bare essentials in the best possible format.

Collaborate with and give the client what they want

Collaboration was another thing we focused on. We wanted to all sit down and share a vision for the site first before we split off into our disciplines and did our own thing. We wanted to make sure we were on the some page and heading in the same direction.

In the initial workshop there were a lot of good ideas that we thought would benefit the client that we wanted to do but it became clear it wasn’t a priority for them – like a news area and accepting online donations. We pushed gently on some of them but in the end we listened.

We also made sure the client was involved in every part of what we did, from helping us develop the information architecture of the site to the visual direction and especially in shaping the content within it. She was constantly involved and contributing to what we were doing. Taking her on the journey as we say I believe was one of the keys in how we won.

It’s wasn’t all smooth sailing

It wasn’t all smooth sailing for the Codaroos over the course of the 24 hours. Without going into detail they were a few bumpy moments for our team that started around the 8 hour mark. This tainted the overall experience for me but at the same time it was great to see how everyone dealt with it and pressed on to the end. It also taught me a few things.

What I learnt

I learnt a lot from being part of FullCodePress. I learnt from my talented peers and competitors, from the Webstock talks I attended but also from being locked in a room with 5 other people for 24 hours in a public competition. It’s interesting the dynamics that form when 8 people are teamed together for for an intense 24 hours. I didn’t really expect it but it taught me a lot about myself.

Thank you, thank you, thank you

I’d like to send out a very big and warm thank you to the events organisers, the volunteers (especially those who plied me with coffee – you know who you are) and the sponsors, whom without I wouldn’t have gotten free flights, accommodation and an unforgettable experience:

• http://google.com/
• http://xero.com/
• http://www.sitepoint.com/
• http://www.multi-media.co.nz/
• http://www.netspace.co.nz/
• http://www.wellingtonconventioncentre.com/
• http://www.museumhotel.co.nz/

New Zealand is stunning

I can’t finish without mentioning how stunning and wonderful New Zealand is to visit. After FullCodePress I took the chance to explore some of the north island with my family and the landscape we saw was spectacular. Another thing I loved about New Zealand was how celebrated the Maori culture is in their everyday lives. I realise it’s not without it’s issues for New Zealanders but as a tourist it really added to the charm. Australia could well take a leaf out of New Zealand’s book there.

Tumblr payment form

He framed it as “it’s not very often a payment form wows [him]” and it highlights to me how we designers sometimes overlook pushing the boundaries for established conventions – particularly when it’s something as serious as a payment form. Nice work Tumblr!

The article details ideas around using visual cues from the real world in user interface design to help communicate state, functionality etc. Some excellent examples and thoughts.

Ready-made Logo Store Homepage

A lot of the user experience and key interactions are hidden to the general browsing public – they’re behind the designer administration screens (where they upload and manage their logos) and the purchasing and handover processes. Saying that I’d love to hear any thoughts you may have on what you see. I’m expecting the product will not be to some of my colleagues liking but I’m really keen for any feedback you may have.

I think the Ready-made Logo Design store will be a great compliment to the 99designs offering and a big success and I’m looking forward to building on what we’ve achieved to date.

Oxfam donation form - email address re-entry fields

I suspected I wasn’t alone so I tweeted to find out what others do when presented with this situation and I have to say I was overwhelmed with the number of responses I received. It seems most people (well I should say most of my online web savvy friends) hate it as well and that they usually copy and paste the email address from the first field into the second. Ctrl A, Ctrl C, Tab, Ctrl V is less keyboard presses than typing an email address and therefore tends to be the preferred approach.

To me the whole idea of re-entering your email address feels like a heavy handed, ill thought out trend that creates more work for the user, doesn’t solve the problem it attempts to, goes against the websites business goals and causes untold pain and wasted time for many *slight exaggeration there perhaps*.

Where do you draw the re-entry line?

The point of re-entering your email address is to make sure you get it right – error prevention, a usability fundamental. So where does one draw the line on something like re-entering information? If I’m ordering something online that is to be delivered to me at home, should I re-enter my home address to make sure that’s correct? Surely having my expensive online purchase delivered to the right address is more important than getting my email address correct?

It’s rude, it’s assuming the worst of the user

Asking me to enter anything again is to assume I’ve gotten it wrong the first time. I’m comfortable suggesting the majority of people prefer to be treated like they got things right. In the unlikely event they got it wrong it may be difficult and/or embarrassing to rectify the problem but that’s life and I suggest most people prefer it that way.

It doesn’t actually solve the problem

Double entry doesn’t actually solve the problem of mistyping your email address, users can still get it wrong. There’s no doubting it will reduce the number of errors from say 1% to 0.5% but big deal! Why penalise the 99% of users who get it right first time for such a minimal gain? Two fields means two chances of typing it incorrectly and the new possible error that the 2 fields don’t match.

Is my email address really that important?

Using the Oxfam form mentioned, my goal was to sponsor a work colleague. Why is getting my email address correct so important to this process? I can print out a receipt at the end of the process if I need it. I have the charge on my credit card if I need it as well. So if my email address is not critical to the process then there is certainly no reason to ask for it twice. In this case I wonder if it needs even be a required field. My cynical view is that Oxfam want my email address so they can market to me – I don’t appreciate that.

It reduces the chance of conversion

In our time starved, attention deficient society one extra field can make a difference to a user completing their task. This one field, when taken in context of how it makes a user feel and how it can create new errors, may just be enough to push the whole process into the user’s too hard basket.

Disabling copy and paste is just criminal

It’s bad enough asking me to confirm it but not letting me copy and paste the email address from the first field into the second confirmation field, as the Oxfam form in question does, is criminal. Why would you do it? In the unlikely event I’ve entered my email address incorrectly in the first, the fact I’m copying and pasting it means I’m looking at it again so that in itself should be more than enough of a check. Please people stop with this madness!

Autocomplete is reason enough to abandon it

The vast majority of browsers now autocomplete email addresses as you type. This is a wonderful feature and interaction that to me renders the whole double entry idea dead in the water. This reduces the likelihood of errors greatly and I think is the single most compelling reason to abandon email re-entry.

A better solution

As well as the tweets of frustration I got from friends I also got some nice suggestions on better solutions and links to interesting articles on this very issue. My preferred approach to this problem has been to show the email address the user has entered on the confirmation page in large text, with a link that makes it easy for them to change the email address if they did get it wrong. Here is an implementation I recently designed (albeit slightly verbose in hindsight):

A respected colleague and mentor of mine Brett Collinson of Modal Dialog also suggested this as his preferred solution. Another idea that Dan Naumman sent me was this one that suggests repeating the email address at the end of the form before the final submit button. I like the approach and think it, especially in combination with the confirmation page approach, is a much better solution than the double entry. The main reason is because it’s treating the user as though they got it right the first time and not adding any extra work to the process if they did.

I wonder if putting their email address on the button itself, e.g. “Create account for joe.bloggs@domain.com” would be even more effective. Maybe it would create a big an ugly button but then big buttons are very usable.

Thoughts and especially other suggestions welcomed.

Sunny day forecasted

Storms forecast

The specifics of what I’ve done and the rationale include:

• Added background photos that represent the overall forecast for the day. They are to instantly communicate what the day is likely to be like for users.
• Changed the sunrise and sunset text to icons (thanks Brett). Also removed the am and pm from the times, it’s pretty obvious which one is which! Both these changes help to reduce the overall visual noise.
• I increased the size of the current temperature considerably based on the feedback I received. This is the most important piece of information on the screen for users so make it really pop.
• I made the forecast maximum temperature bigger, this is because I consider it to be the second most important piece of information on the screen.
• I aligned the forecast min and max temperatures to the left of the screen with their lines extending full width across. I initially wanted to indicate where the likely peak temperature would be by just having a short line but I feel the projected line as well as the graph are indicators enough. Having them aligned on the left just feels much tidier.
• For Mr Green I added an umbrella icon which indicates whether you need to pack the wet weather gear or not.
• I faded out the beginning and end of the graph line as this feels more elegant. Ditto for the hour and noon lines. This again reduces the overall visual noise of the screen.
• I moved the title bar to the bottom of the screen – the information on it is once off information that once you know becomes insignificant.
• I added the long version of the forecast on the left-hand side of the screen – I feel this detail is important to have on the screen.
• Lastly I added the short version of the forecast below the city name in the title bar. Not necessary but it works there.

Love to hear your thoughts and ideas.