Archive for the ‘Edge Case Design’ Category

jsNoSpam – make it harder for bots to find your email address

March 6, 2016

If you want to put an email address on a web page, and have it human readable and easy to click on to open up in a mail client you run the risk of exposing yourself to one of the sleazier sides of the internet. Spam email. There are bots out there which relentlessly hunt down email addresses so their masters can deluge you with unsolicited commercial email (or worse, virus infections).

The best solution is to never show the email address – get your users to use a “Contact Us” form or similar so that there’s nothing for the bots to find. But sometimes you can’t do that, either because of how the pages are hosted or your client simply doesn’t want you to.

So… jsNoSpam was born. 100% javascript, so all client side and easy to insert anywhere that allows you to edit raw HTML and include javascript.

The script works by doing a number of things…

  • Requires you to encode the email addresses so they never appear in a recognizable form in the script or HTML source.
  • Supports decoding the email address back to a usable format
  • Allows you to display the de-coded address on the page, or to require a user action (mouse over, click, keyboard navigation etc) before revealing the address.

Because the email address which is inserted into the page via the script is clickable and usable like any regular mailto: link would be user inconvenience is reduced to a minimum, but the effort for a bot to scrape the address is increased and hopefully as there are enough potential variants in how the script can be applied it will keep it ahead of the game.

Here is a live demo of the code in action.

The code is hosted on GitHub, and is open source and unrestricted license (though it would be great if you find it useful if you comment here). It’s been tested in as many browsers as I can and also with assistive technologies (eg NVDA) but if you do find an issue please comment (or better yet fire off a pull request for me to incorporate your fix).

On their own, the techniques used (encoding the address, requiring user intervention etc) are not new, but hopefully combined they will produce a robust enough solution for people who need this workaround.

Security of individual accounts matters (but not to Starbucks)

June 22, 2015

There has been a lot written recently about major system compromises, where banks, Government departments, Healthcare, and other companies are targeted and huge collections of personal information get harvested. Often lasting for months before discovered these attacks reveal PII (Personally Identifiable Information) such as social security numbers, dates of birth, addresses, email addresses and, in too many cases, passwords.

Defending against these attacks is an on-going challenge, but storing information in a way that it can be harvested has a significant impact on users of the service – ranging from identity theft to direct financial loss.

But it is not just servers where the risks lie. Poor information security on the end user experiences compromise individual accounts and can be hard to detect, easy to overlook because of how it’s reported.

Starbucks original logoEarlier this year Starbucks was mentioned as a possible victim of one of these attacks as users accounts mysteriously were being accessed. To remedy this Starbucks rolled out an update to their iOS app and presumably their Android app. This may or may not have improved things for their website or for 3rd party apps running on other platforms. Most of their response appeared to have been PR and damage limitation rather than really beefing up security.

Recently I experienced one of these mysterious losses. While I was in Australia on business someone in Ontario Canada was apparently using my card. And thanks to the convenient auto-reload facility on my account the system kept merrily making more funds available to the thief.


Connected Cars and Smarter Smartphones

June 25, 2014

As smartphones get smarter, and cars more connected it seems to me that there is a huge untapped market. Not everyone will replace their car along with their phone (or vice versa) so an opportunity exists to create a flexible, standards based solution both for new vehicles and aftermarket retro fit scenarios.

Luckily many of the standards needed to deliver this already exist. Bluetooth, NFC, wireless charging, ODB-II can all combine to present a seamless experience – if only the software was available to tie it all together… (more…)

Lazy developers make for bad user experiences

March 18, 2013

As a developer I can appreciate that dealing with user input is a pain. Dealing with anything messy humans do is always more annoying than handling nice clean inputs from an API. Developers and designers are human too, and they should think about the experiences they are creating, and how a little bit of consideration for the user can turn a frustrating process into a moment of delight.

  • Required fields: Indicate visually when a field is required, and ask yourself if the field is actually required for what the user is trying to do (delight them and they’ll come back and share more information incrementally). Especially in a world of security leaks I like to minimize what I share and you should help with that.
  • Formatting (phone and credit card numbers) is irrelevant: Should I enter my cell as (425)-555-5555, 4255555555, 425 555 5555 or something else? Actually all of those should be valid as it doesn’t take much effort to strip out spaces, dashes and brackets when you’re validating a credit card or phone number. If you need a particular format for your database or display then re-format it… but don’t force the user to comply with a rigid structure to make your life easier.
  • Don’t be redundant: Don’t make me tell you what type of credit card I’ve entered the number for. Using a simple issuer lookup you can tell me if I just entered an Amex or a Mastercard. If you need me to write an look-up API for you I will, just leave a note in the comments.
  • Passwords are a pain to remember: Just because you think the password rules on your site are obvious (at least one capital, one digit, only special character is an underscore and it must start with a different letter than your username) users have lots of passwords. Give them a reminder next to a where they have to enter it what those arbitrary rules are, ideally on initial entry and as an absolute must if validation fails.
  • Don’t ask me the same thing twice: In the US a ZIP code can tell me the City and State. Same in Australia or New Zealand or the UK and pretty much anywhere else. Can anyone explain to me why I have to enter both 90210 and Beverly Hills, California on a million forms? By all means display the City/State for me to confirm but don’t waste my time asking me to do a computers job. That thing I said about look-up APIs earlier, still true
  • Don’t be forgetful: Computers are good at remembering stuff, if developers are not being lazy. If I fill in a field or check a box on a form and something goes wrong with validation the only field I should reasonably be expected to re-enter is the password (and if you validate that and it passes assume I know my password and don’t make me rekey those asterisks again). If I checked “accept Ts&Cs” or “Don’t email me crap” the first time… I probably meant it so don’t forget it because I didn’t get my phone number in exactly the format you like.
  • On-the-fly, context sensitive validation is awesome: Make use of onchange and onblur events and Ajax to check each field as I go to save the user scrolling up and down a page to find what failed. Basic validation, like credit card checksums, for fields that are easy to miskey should not require a full form submission
  • When things go wrong, show me: When you finally get to a full round trip validation and have to show the user some errors you need correcting don’t just bundle some obscure messages at the top of the page – use visual cues and clear explanations to guide them to get it right

By making the process simple and eliminating points where the user can stumble your helping ensure that your form is not a roadblock where the user might get frustrated and abandon the process. When you go to the supermarket you look for the shortest line, or the easiest way to checkout, and you get frustrated if the process isn’t smooth. It’s just the same on the Web.

Even if you think you’ve gone beyond the things I mention above have you gone far enough? Are you watching your logs and other telemetry to see what fields users are stumbling on? Could you streamline the process further?

Your challenge: As designers and developers you should embrace the opportunity to streamline your users experience, and use every tool at your disposal to deliver a great user experience.

eBooks or paperbacks…

August 22, 2011

While I’m a fan of my Kindle (and the Kindle app on my phone) I still have a problem with the whole ebook pricing and licensing model and it’s best summed up with this picture…


So, I can buy a license to read the book I want (admittedly in a very convenient and handy package) for 8 bucks, or pick up a new paperback copy for half that. If I want second hand (and many of the second hand books on Amazon are indistinguishable from new) I pay a tenth of that.

Okay, so the downside is I may have a pay a little for shipping, and wait a couple of days rather than get instance over-the-air gratification but when I get it…. It’s all mine.

I don’t have to worry about a licensing issue making the book I’ve bought disappear. I don’t have to get anyone’s approval if I want to lend a copy to a friend, leave it in a coffee shop for a random stranger or sell it at our local Half Price Books to further my addiction (when I moved from Australia to the US I think books weighed more than any other item we shipped!)

I don’t have a problem with authors getting paid (I want them to keep writing after all!), I understand there are costs with marketing and distributing a book (but when it’s just bytes and electrons it’s a lot less than producing a dead tree format, and no risk on inventory) but this feels like a very one sided step into the future.

With my Zune Pass subscription I get an “all I can eat” subscription plan for music I can consume on my Zune (which also provides in-car listening), Windows Phone and laptop so I don’t worry about the fact I don’t actually own the content (though with Zune Pass you do get 10 credits a month to download to own tracks) and I know that the artists are getting paid behind the scenes

I would love a Kindle subscription service that lets me grab any book I want and read it. Every time I enjoy a book the author (and of course publisher etc) would get part of the monthly subscription (encouraging them to write better books!) and I wouldn’t have this hang-up about not being able to decide what to do with the book when I’ve read it.

I don’t think that eReaders like the Kindle are a fad. I think there is more evolution to come in both the reader hardware and the retail channels as the hardware gets smarter and cheaper and the author/reader relationship maybe gets redefined … but at the end of it all I really hope that the love of reading and the art of writing are what wins out…

Building a safe and portable way to get online

May 19, 2011

Over the last few months I’ve had a couple of friends go through some rather unfortunate domestic situations which have involved partners spying on their computer activities, intercepting and even sending emails from what they thought was a private account. They’ve used a variety of means ranging from simply accessing a machine that’s not been locked through to using a keylogger or network sniffer to steal passwords and read email.

There are weaknesses with any operating system, especially if you do not have sole access to the machine or a way to secure the local area network to avoid eavesdroppers, so to try and solve the problem I looked at ways to eliminate the risks of both physical access and software spying.

The solution I came up with is a little technical, but works pretty well and provides a good balance of security and ease of use

The first part of the solution is unobtrusive USB Flash Drives. These can take many forms but for convenience I’ve been using LaCie USB Keys that look like keys. They come in various sizes (though I consider 8GB the minimum for what I’m doing) and are easy to hide in plain sight, and you’re not likely to misplace it if it’s with your house or car keys.

The second part of the solution is a stand-alone installation of Ubuntu. While it’s not as user friendly or as familiar as Windows or OSX for a lot of people its fairly simple to set up a totally self-contained installation that runs entirely from the USB Key – it leaves no trace on the host machine, it never starts the host machine (so software key-loggers and other spyware are useless) and it’s fairly light-weight so you can start up or shut down in less than 30 seconds.

Setting Ubuntu up in this way doesn’t follow the usual path to build a LiveCD that most people use to try out Linux – with that style of setup you can’t store data on the drive or perform in-place upgrades (patching the build, adding new drivers or even migrating to a new version)

The final part of the solution is installing anti-virus scanners that you can use to examine the host machine, and a VPN client to secure your communications with the outside world…

Preparing the Bootable Ubuntu key

These instructions do assume you have a clue what you’re doing, and that you can deal with the consequences of doing something wrong along the way. If you follow the recommendations you should be okay but, as with anything of this nature, there may be dragons ahead…

Safely selecting the right drive.

You may omit this step if after partitioning you choose to install grub to the root of the usb drive you are installing Ubuntu to, (ie sdb not sdb1). Unless you do this correctly though you can overwrite the HDD MBR which can be a pain to deal with so it’s not recommended. If you don’t know what grub is… proceed with caution!

·         Turn off and unplug the computer.

·         Remove the side from the case.

·         Unplug the power cable from the hard drive.

·         Plug the computer back in.

Installing Ubuntu

·         Insert the flash drive.

·         Insert the Live CD.

·         Start the computer, the CD should boot.

·         Select language

·         Select “Install Ubuntu”.

·         Select Download updates while installing and Select Install third-party software.
If you have an active network connection (wired recommended) this will save time later on.

·         Forward

·         At “Allocate drive space” select “Specify partitions manually (advanced)”.

·         Forward

·         Confirm Device is correct.

·         Click “free space” and then “Add”.

·         Select “Primary”, “New partition size …” = 4 to 6 GB, Beginning, Ext4, and Mount point = “/” then OK.

Optionally configure a Home partition

If you’re only planning to have a single user and primarily store data in desktop folders then this isn’t required.

·         Click “free space” and then “Add”.

·         Select “Primary”, “New partition size …” = 4 to 8 GB, Beginning, Ext2, and Mount point = “/home” then OK.

Optionally configure swap space

This allows hibernation but from experience with this configuration it’s quicker and easier to shut down and start than hibernate.

·         Click “free space” and then “Add”.

·         Select “Primary”, “New partition size …” = remaining space, (1 to 2 GB, same size as RAM), Beginning and “Use as” = “swap area” then OK.

Finish installation

·         Confirm “Device for boot loader installation” points to the USB drive. Default should be ok if HDD was unplugged.

·         Click “Install Now”.

·         Select your location.

·         Forward.

·         Select Keyboard layout.

·         Forward.

·         Insert your name, username, password, computer name and select if you want to log in automatically or require a password.

·         Select “Encrypt my home folder” for added security (especially if there is a risk of losing the drive)

·         Select forward.

·         Wait until install is complete.

·         Turn off computer and reconnect the HDD.

·         Reboot computer and select the flash drive to start

·         Log in and complete installation, upgrading packages and adding options like Chrome browser or Evolution email client

Securing your connection

While having a stand-alone machine image that allows you to keep local content secure you want to make sure no one is sniffing communications on wired or wireless networks. At the very least you need to ensure people are not stealing passwords so in Chrome you want  to install something like the KB SSL Enforcer which will try to redirect any connection to a secure channel to make snooping a lot harder.

If you want to ensure none of your online communications are overheard then you want to install and configure a Virtual Private Network (VPN) connection with someone like StrongVPN – this has the added advantage for some that you can even choose which country you want to appear to be surfing from 🙂

There are a number of Linux based anti-virus solutions (such as ClamAV) that can be used to scan the host machine but I’d recommend if you want to clean a Windows machine that you get a bootable version of Spybot S&D (that you can also run from a Flash Drive and keep up-to-date) as that’s a more robust solution.

Email and Documents

Depending on your situation you may want to keep as much as possible on the USB Key and as little as possible on the web, vice versa or somewhere in between. Personally I recommend setting up a new webmail (Hotmail or Gmail) account only once you are securely connected (so the password is never visible on an unsecured connection) and using Evolution to keep that in sync with the local drive so you can work either from the disk in off-line mode, or log in from a web browser in an internet café or somewhere away from prying eyes. For documents a service like Ubuntu One (probably a good bet as it’s integrated with the OS), DropBox or SkyDrive gives you the flexibility of working locally or “in the cloud”.

Given the risks of losing the drive, or corruption happening due to an overzealous or early removal I would strongly recommend keeping important data backed up somewhere secure and online just in case. You might want to consider installing Prey on the image just in case you lose it.

Stay safe out there!

A lot of the things you need to do to stay safe is common sense – don’t share logins, don’t re-use password and things like that but sometimes you need to bring more sophisticated tools and techniques to bear… I’d love to see some comments about how to improve this solution or make it simpler. If you like the idea of having this sort of setup but the instructions have put you off I’m happy to build a key for you for a reasonable fee (to cover time and expenses). Support for Ubuntu or any other applications mentioned here should come from the respective suppliers.

Edge Case Design: Bathroom Discrimination

March 23, 2011

As a parent a trip to the mall was often fraught with difficulty – knowing I’d be juggling a toddler (and glad I didn’t have more than one to wrangle), a stroller (pram) and shopping cart I would often make a decision where to park based on what I knew about the facilities. While parents rooms are becoming more common in a smaller mall it was actually often easier to find a disabled restroom – which while offering space often didn’t feature a changing table.

Taking an Edge Case Design approach mall designers could combine the needs of two groups – parents and the disabled – and double the number of facilities available to both groups – placing a number of larger, accessible facilities with push-button doors would create more options and not make a frantic parent feel guilty for making use of the “wrong” facilities.

Edge Case Design: Deaf people watch movies, and go to church

March 19, 2011

In 2005 it was estimated that there are over 10 million Americans who are hard of hearing, and over a million who are deaf.

It doesn’t matter where you are in the world, the numbers are going to be around the same – up to 1 in 20 will have hearing difficulties.


Over the last decade I’ve worked on a number of projects which have involved delivering video to the web – ranging from phone camera surf reports, to 24/7 broadcasts of housemates through to online movie delivery platforms, major sporting events and even supporting a NASA educational site.


In all but one of those cases catering for the hard of hearing wasn’t an option. Either there was no budget, no resource or no-one was willing to acknowledge there was a problem that needed solving along the way.


A huge amount of effort went into designing the video playback experience. Beautiful design, hours agonizing over every pixel of the on-screen controls, optimizing the viewer area for performance and integration with the overall design.


Then came the complaints, and in some cases reminders of the legal requirements. In a panic designs were tweaked and somehow captions were shoe-horned into the experience and no-one was especially happy.


If the design had been approached from the perspective of Edge Case Design then time and money would not have been wasted on creating a panicked compromise. Ideally that design would not just to support the deaf users, but to ensure design cues were appropriate for the colorblind users and controls were accessible for those with impaired motor skills via keyboard accelerators and other control mechanisms.



As it turns out there are a large number of people who are not hearing impaired yet make extensive use of sub-titles and captions to increase their enjoyment of video content online. Watching movies when the kids are asleep; helping someone who maybe isn’t watching their native language keep up with dialogue; watching TV while your partner is on the phone; watching a video in a crowded coffee-shop or bar; watching when you don’t have headphones and don’t want to disturb others, say in a library. There are many scenarios where designs which treat captions as a first class experience are better able to engage and retain their users.


To close with a reference back to the church in the title: The Lutheran Church – Missouri Synod discovered that over 90% of the hearing impaired did not attend any form of Church. They realized that they needed to design services for those Edge Case scenarios and now provide a range of materials – both online and for Pastors to utilize – that make prayer more accessible.


No matter what your beliefs you have to respect that commitment to Edge Case Design.

Edge Case Design: Door Handles

March 18, 2011

I was looking for more examples to support my earlier post on Edge Case Design and walking out of the car park this evening this occurred to me:

How do you design a door handle that works equally well for a child or a basketball player?


The typical horizontal bar that works for the average height person doesn’t work for either of those extremes particularly well (and actually is awkward for a lot of sort-of-average height folks), but imagine if you were to rotate the bar so it was mounted vertically and you can easily cater for the edge cases… and in doing so have a great solution that fits all of the 80% median part of the curve as well. No matter how tall you are simply push against the part of the bar that falls most comfortably to hand to open the door.

I am starting to think that there’s something in this Edge Case Design philosophy… can you think of other examples?

Optimize UX by Designing for Edge Cases

March 17, 2011

One thing I have learnt over the years working on sites like Big Brother and rushTV with hundreds of thousands of active users is that no matter how much time you spend fine-tuning the basics it’s the edge cases that cause you most problems.

So… why not turn it around and make sure you define the problem and then focus on optimizing the user experience and workflow around the edge case and maybe you’ll end up with a pretty good solution for everyone?

For web design a lot of the outliers are going to be around usability – optimizing colors and contrast, ease of navigation and captions for audio content etc. For the real world the challenge gets a little more interesting.

At the moment I’m dealing with two examples of processes where rather than keep usable workflow front of mind they have accreted layers of complexity over time and no-one wants to touch it for fear of unearthing a monster.

The first is the US immigration process to go from an E-3 to H-1B and then Green Card. Rather than try and explain that particular problem I’d simply point you to this flowchart (just for the Green Card application) and ask if it’s rational or even fair for people stuck in the process (some steps can take years even if all the paperwork is in order)

The immigration process is, by necessity, a complex one but when you look at how the system functions today – with a lot of uncertainty for those stuck in it – you have to wonder just what inefficiencies and loopholes exist that are costing the country money and not protecting its borders in any meaningful way.

The other process that’s familiar to people almost everywhere, but particularly topical here in the US at the moment – Taxes.