Enhancing Web UX Design Consistency with Sniffux

The Ultimate Question

Which sides should I put my Cancel and OK buttons on? This is a question of the honourable subject, USER EXPERIENCE. Read on to find out that the answer is neither and both!

Person A (his parents weren't very good with names) uses a Windows computer. The latest one of course; XP. While he is using this futuristic OS and gets a popup…

Note the button positions. The Close button is on the right and the OK button is on the left. So when we're building our lovely web apps – with all the shiny web 2.0 goodness – we will always have our Cancel buttons on the right for consistency, to make our visitor feel at home.

Stop the presses! Person B (equally poor naming choice, check if related) uses this little known Operating System called Haiku. It's compatible with BeOS which you hadn't heard of either. Anyway, she sees this when she tries to save something…

The buttons are the other way round! This is the best orientation for a number of reasons. Mac, iOS and Linux also put their buttons round this way. Windows and Android are the few who do it backwards.

The Answer

So what is a weary web developer to do? Pack up their bag of tools and leave their code cabin for good? Cater to the highest common denominator and do it the evil Windows way? Not a chance, now listen codely. We sniff the visitor's user agent and use it to determine which side the Cancel button should be on for them, then make it so! A user agent is a string that every browser sends to the server when asking for a page. Here is an example UA string:

Mozilla/5.0 (X11; U; CrOS i686 9.10.0; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.0.253.0 Safari/532.5

The "ChOS" tells us it is from ChromeOS, exciting! The rest is not useful to us so we'll sweep it under the carpet for another time. We can sniff (read) this string, work out which OS the visitor is running, then send them the buttons in the order they are used to.

If you are a Ruby developer, read on! I have a tool for you! If not, you're on your own implementing this on your site. Good luck!

I wrote a gem called Sniffux to help out with this Cancel button jiggery pokery. It Sniffs the UX of a visitor's OS. One thing it exposes is, unsurprisingly, the side the current visitor expects the Cancel button to be on. I recommend using this info to add a class to your button's container, say, cancel-left or cancel-right depending, then use CSS floats or similar to position them accordingly.

Example rails code (yes, this easy):

gem "sniffux", "~> 0.0.1"

<div id="alert" class="cancel-<%=sniffux.cancel_side%>">
  <strong>Alert</strong>

  <p>Errors and stuff!!!</p>

    <button class="cancel">Cancel</button>
    <button class="ok">OK!</button>
</div>

.cancel-left .cancel {
  float: left;
}
.cancel-left .ok {
  float: right;
}
.cancel-right .cancel {
  float: right;
}
.cancel-right .ok {
  float: left;
}

Live Example

And your venerable quest is over! That wasn't so hard. Now you can give your visitors an experience consistent with what they are used to on their OS. It may seem like extra work that you could just skip, but to me every detail matters. You want your web app to be as easy to use as possible. My golden rule is thus: Don't Annoy Your Users.