Please visit my new campsite listing site

Archive for the ‘usability’ Category

Delicious, though not so easy to swallow

Thursday, February 11th, 2010

For a long time I’ve wanted to work with the Delicious API. Initially it was because the Delicious website not only had the difficult to remember url, but was also very badly designed. If you compared its progress – addition of new features, cleaning up of design, making use of new techniques suchas AJAX – with its web2.0 compatriots (Flickr, Digg, it lagged way behind.

So I initially planned to build a new front-end for it, making it easier to work with your bookmarks, but before I could progress far enough in my coding abilities they completely redesigned the site; a vast improvement.

Though still not perfect. For a while I’ve found it frustrating that there is no easy way to simultaneously see the content of a bookmarked page and delete the bookmark if you deem it no longer useful, so my delicious account gradually got more and more cluttered. Well, this afternoon I decided to do something about it (and not just because I’m avoiding doing more important stuff).

But I was foiled for a long time by the laziness of the Delicious developers. My initial plan was to use javascript to get a JSON of all my bookmarks (or alternatively request one at a time) and go through them one by one, displaying the webpage in an iframe, and offering the option to discard or keep the bookmark. However, delicious only publish this data as XML which means, due to cross-domain restrictions on AJAX, you can’t just use javascript. I may be a bit hasty in pinning this on developer laziness, but I imagine creating alternate templates (because that’s all the difference between JSON and XML really) wouldn’t be too time consuming, and would greatly enhance the versatility of the API.

Anyway, I realised I would have to use a bit of PHP to get the XML and create pages from which my javascript would be able to access the data. Luckily, before I dived straight in I came across phpdelicious (which, appropriately, I have now bookmarked in Delicious) , a very easy to use php class for wrapping the Delicious API, which is very handy indeed. Less than an hour later I had built exactly what I wanted.

I reckon a few more hours development and I can make it a publicly available service.  All I need to do is include a form for other users to be able to login, and (ideally) preload websites in the iframe to speed things up (though this is problematic as some sites force the whole web page to be redirect if you try and put them in an iframe).

jQuery listSplitter plugin

Monday, February 1st, 2010

A very short post to announce my third  jQuery plugin: listSplitter, which takes a long list of categorised items (where the categories can overlap) and creates a tabbed interface to show only one category at once. I haven’t done a demo yet (well, I have, buthaving teh same old problem transferring to the server as the server runs on UNIX while my laptop is Windows. I recently found out why this causes a problem, but no easy fix has presented itself) so you’ll just half to take my word for it, though before too many months have gone by I will use it as the basis for a new portfolio.

*edit: Here is a demo

And it can be used with jQuery themeroller, i.e. use the tool at, to design how it shoudl look, then after clicking “download theme” make sure you have ‘tabs’ ticked underneath widgets.

Facebook fail to make it easy for people not to embarrass themselves

Thursday, December 17th, 2009

Head in hands

My attitude to Facebook has always been that it is a useful address book of sorts (with built in slideshows), and that all these scandals where people get fired from their jobs for posting on facebook pictures of themselves disfiguring a company business card with a nail file are their own fault for showing a lack of discretion.

That said, though, Facebook do have a reputation (fairly well-earned if you ask me) for not making it clear to people who they will share things with, but now they’re putting it right as when you login you are nagged to confirm you old privacy settings or change them to new ones, just so everybody’s clear what to expect.

Heres’ the form you fill in, which looks pretty simple – radio buttons to indicate yes or no… or so you would think. But regretably facebook have ballsed up their privacy issues again.

For each element of facebook you can set it’s visibility level to either what you’ve already got it set to, or one of Everyone, Friends of friends or Friends… but for each bit of Facebook you don’t get to choose from that list; you are presented with one of them as an alternative to your current settings (picture).  Now, that’s a pretty confusing start, because

  1. It makes the layout of the form all weird: the radio box in the first column doesn’t always mean the same thing, which users come to expect from columns of radio buttons.
  2. Some elements have “Old settings” checked, and others have the other radio button checked, which confuses the whole idea of you changing your own settings
  3. When you arrive at the page there is nothing to tell you what your old settings are. I’m sure many users will go straight from here to check in their account what their settings are.

But on hovering over an old settings checkbox it displays a tooltip to tell you what those settings are, which si helpful , yes, but nowhere near as helpful as just including it in the original page’s text. Horrible overuse of technology.

So does the confusion end there?

Of course not.

Below are three examples where it doesn’t allow you to do what you want, or just gets more confusing

Facebook settings detail

  1. I can choose to allow everyone to read About me or just friends. It doesn’t allow me to let Friends of friends see this
  2. At the moment ‘Only Friends; Except: Limited Profile” can see photos and videos of me, but it’s taken me a while to remember what “Limited Profile” means, and now that I do remember, why is this not an option for …
  3. … sharing my email address, which I’m more likely to be cagey about. And it would also be nice to have radio buttons which allow me a wider choice than sharing my email address with “Friends” or “Only Friends”

It amazes me how sloppy supposed beacons of the internet can be sometimes.

A List Apart survey

A greasy framework

Monday, December 14th, 2009

As I think I may have mentioned, the latest project I worked on I’ve been using the Zend Framework for all the server-side development. Over the last few months I’ve developed a love hate relationship with it. On the plus side it does pretty much everything I need without needing too much customisation, a few of the negatives though are:

  • The quickstart in the documentation assumes way too much background information about configuration of a php app and data sources etc. They don’t seem to have considered that a reason many programmers use zend is because they don’t know too much about back-end development and want something to take care of the tricky bits for them. It took ages to get past this stumbling block, with the help of this tutorial (WARNING: The bit on connecting to the database either uses quotes when it shouldn’t or vice versa) and this website with tutorials on various zend components.
  • Having said it does everything, there are lots of gaps. I’m sure a lot of thought goes into deciding what gets included and they must get all sorts of requests, but some simple standard things are missing, eg a validator to check a confirm password field. Nevertheless it is fairly easy to write extensions, but the zend documentation site should have a lot more and clearer information on this. Linked to this, there seems to have been very little thought put into building some sort of community to share plugins, unlike jQuery, for example.
  • You may have sensed that I don’t have a great deal of respect for the documentation. It’s very sloppy to be frank. There are so few cross-links to different sections, and a lot of the classes contain examples which I found fairly irrelevant, covering a way of doing things unlikely to be used in a real website (eg the examples for querying your database don’t really use the Model-View-Controller structure you’re supposed to use). And, in my view, it’s way too wordy, and much of the text is just waffley clutter; far more so than better examples of documentation, such as php and google maps. The website is also very difficult to navigate.

To fix the final gripe I’ve written a greasemonkey script (my first ever one) to replace the existing documentation layout with one a little easier to negotiate.

Before greasemonkey

Before greasemonkey

Before greasemonkey

After greasemonkey

Wide open space

Friday, December 11th, 2009
Not a LOL cat

Not a LOL cat

My laptop (now on its very last legs) has a fairly dinky screen. It’s wide enough to not be a problem, but the height is always a pain, especially that now (unlike when I bought the laptop all of 4 years ago) I am a web developer and routinely have firebug and the web developer toolbar open, which sucks up about two fifths of the height of my screen.

Enough is enough, and I’ve decided to get tough on undesirable widescreen, tough on the causes of undesirable widescreen.

First off, although I don’t like Google Chrome’s tabs at the top interface, I do like the fact that they’ve squeezed something useful onto the otherwise desolate windows title bar, i.e the bar at the top of the screen that tells you which program you’re using and, in firefox, the webpage’s title. As I have no need for firefox to tell me anywhere other than on the tab which web page I’m on, this bar is pretty much useless. And, luckily for me, there is a new firefox extension to get rid of it: Hide Caption. It shifts the close, maximise and minimise buttons down to near the search bar and gives me an extra cm of space. It warns that it may not be compatible with tab-mix plus, though I haven’t had any problems, and I use loads of other extensions too with no clash. Although I did uninstall another plug-in called Hide Navigation Bar as this didn’t work, but it may have been a clash.

A few of other things I’ve done to save space and decrease clutter is decrease the text size in firebug, change my windows taskbar to a single row rather than two, use the personal menu extension to hide the menu bar, and got rid of my bookmarks toolbar (although not sure how long that will last). It would be really handy if firebug could have an option to place it to the side of the screen rather than the bottom. Most of the time the lines don’t span the width of the console, so it’d be a great space saver to stack them vertically down a narrow strip at the side of the page.

Incidentally, one of the few add-ons that has remained a constant for me over the years is the qute theme. It’s really nicely designed with light colours and small icons and makes the screen seem a lot less cluttered. There’s two versions available at the moment; the authentic new version for firefox 3.5, and the retro version based on the original icon designs from years ago, which is the one I plump for. Aside from being aesthetically more pleasing it also has the advantage of not having a heart as the icon for bookmarks, which always took me a second to work out what it meant.

Anyway, here is my current, much cleaner looking, firefox appearance now (I would do a before and after, but it’s way too much hassle to go back and disable all the things I’ve changed):

Slimline firefox

Candy floss UK

Tuesday, July 14th, 2009

No, this isn’t an artist’s impression of the UK trapped in the midst of a swine flu epidemic, but is in fact what all my geocoded points look like plotted on a map of the UK*. All 4,528 of them. Now I just have to figure out how to make this look presentable, i.e. feed the points to the map gradualy as the user zooms in. I bet this is where things will really start to get difficult.

UK sites

*with apologies to Cornwall and northern Scotland

Snapshots – one (or maybe just half) better than websnapr

Sunday, June 28th, 2009

Yesterday I railed against the useless, so-called functionality added to web pages by websnapr. However, I did close by adding that the technology is impressive, if only somebody could find a use for it that isn’t sanity-shatteringly pointless.

You’re expecting me to say I/someone else has succeeded, but I’m not going to.

What I will point to instead is another service, very similar to websnapr, which is in fact very useful (though still suffering from the same problems as websnapr in a lot of cases). It’s called snapshots (and it, rather than websnapr, would also appear to be the market leader for this sort of thing).

Snapshots still suffers from the pervasiveness of the same annoying, information-scarce tiny screenshot provided by websnapr but, where possible, it makes that extra step (probably less technology intensive, in fact) to genuinely improve the user experience. Two examples I’ve discovered so far are:

  • If the link is directed to wikipedia, a sizeable chunk of the  article appears in the pop-up window, which is exactly what I would want to read if I went to the webpage itself.
  • If the link is to google maps, it embeds the google map in the popup window.

Snapshots screenshot

These things which are both useful to see at a glance, not necessarily requiring loading a full web page. And there may be more examples where the snapshots preview is more than just eye-candy… so kudos to them. I just doubt, somehow, that they have an option to turn off the default screenshot previews.

Why not to use websnapr

Friday, June 26th, 2009

You’ve all seen websnapr at work most likely. Or rather, you’ve been one of its unsuspecting victims, innocently surfing the net when, suddenly, the rules all change and you’ve no idea which way is up and which way is left any more.

What websnapr does is convert any link on a website (or a select few chosen by the site’s publisher) into a useful preview thumbnail of the website in question, thus enabling the user to preview what’s at the other end of the link before clicking and wasting their time with something so time-consuming as as a visit to the site (see screenshot below). And it’s very easily installed by means of inclusion of a javascript file.

websnaprAll well and good, you say… but is it? Is it really?

If you don’t want this heightened user experience it is quite obtrusive and off-putting; Accidentally drifting the mouse over a link while reading an article leads to bits being obscured and a brief “what was that?” moment, breaking your concentration. One of the golden principles of usability is to more or less stick to accepted norms of page layout and interface behaviour. Yes, these norms can be broken if you know what you’re doing, but websnapr is just added willy-nilly by website publishers who think it’s cool, without any real consideration for the fact that, to most of their visitors, it will make the website odd, and as for the most part we want our visits to websites to be straightforward, it will be a turn-off.

Related to this point (though slightly less subjective) is that only a minority of sites on the internet use websnapr, and it’s likely to stay that way. Possibly (notwithstanding my next point) I could accept that if every external link on every site gave a preview of the webpage it points to then this might be useful, but as this isn’t the case we all have to develop our own methodology for choosing which links to click. For instance, I hold down ctrl and click all the links that look interesting, to open them in new tabs. It’s surprising how automated this process is; I go for the ctrl key without even thinking. Showing me unexpected, thumbnail previews gives me more information than I’m used to and, it’s reasonable to suggest, could actually slow down my web browsing. (And for people who like to have the previews on all sites, there are firefox extensions (and probably ie7 by now) that achieve the same thing).

This interpretation becomes even more plausible when we take a closer look at what the thumbnail previews show us. Look at the one above for CNN. What preview information does it give us?

It tells us the website is by virtue of the logo… and that’s about it. The text is too small to read, even the headings (and out of date to boot – today’s site has a big picture tribute for Michael Jackson, conspicuous by its absence in the screenshot). Is it useful to know the website you’re being directed to? Yes, definitely, but it hardly merits making a tiny visual copy of the site, which in many cases might shoot itself in the foot by obscuring the website’s identity as not all logos are legible at small resolution. You could argue that the preview also gives you a more holistic feel for the site; a glimpse of the design gives you a hint of the website’s tone, a guess at the intended audience etc…, but even this is shaky justification. The design’s impact and general feel are largely lost in the shrinking.

And finally, I can’t help thinking that websnapr goes against the spirit of the internet. Contrary to it’s probable aim of making it easier to discover and filter new sites, it actually devalues the most useful tool of all for doing this: the link itself! Links don’t just appear from nowhere. They are put there because the author of the piece you are reading thought you might like to visit an extra site. If you value the author’s opinion – whether due to a long-standing readership or being impressed by the current article – that should be enough to justify clicking through.

After all this, I don’t want to put too much of a downer on websnapr. I think it’s useless as a tool for making clicking on links more productive, but it’s still impressive that you can get a screenshot of any site on demand. There has to be a use for it somewhere… but what??

crossSelect jQuery plugin

Wednesday, May 27th, 2009

I thought I should write a short post to say I have written another jQuery plugin, for making multiple select form elements more intuitive to use. It’s called crossSelect, and here is a demo.

One of these days I will make a proper portfolio site/subsite which collects all the stuff I make together.

I will, I will, I will!

Why Internet explorer is losing the browser wars (or, Microsoft – design numptys yet again)

Wednesday, April 8th, 2009

Below is a list of links to the browser download pages for each of the major web browsers:

Each design is essentially the same – a little bit of text, some images (normally of the browser) and a massive link to download the latest version. All, that is, except for ie. (It also bears mentioning that the firefox page commits the usability cardinal sin of not actually mentioning it’s a web browser).

Microsoft internet explorer download pageHere is a screenshot of ie’s page. It’s difficult to see on this small image (but click it for bigger), but I thin kit must be one of the most ill-thought out, though supremely important, pages I’ve ever seen:

  • Despite ie7 still being the officially stable and sanctioned browser, the most prominent text and download link is for ie8.
  • You will already have clicked “get it now” once from the ie home page, but the top part of the home page and the download page are exactly the same, so it looks like “get it now” is just a download link that doesn’t work.
  • Once you figure out it’s not the download link you have to scroll down the page to actually download the software. Scrolling down to get to the most important bit of the page?! In the words of Kyle from South Park, “Really??!!”
  • You have to choose your operating system in order to download an installer which then downloads components appropriate for your OS. Given that it ends up downloading additional files anyway, why not just make it a generic download that detects your OS and then downloads all the relevant components. Or even detect the OS with javascript, with the select box as a fallback.

It beggars belief that usability mistakes like this can be allowed through.

Having said that, I bet most users never see the page as ie updates automatically… but still!

On two not unrelated notes:

  • I wish open source projects, in particular maybe the core design of sourceforge, would make use of prominent download buttons for the latest stable version, instead of the maze of  download links for every version under the sun. It woudl surely increase the use of what can be very useful tools.
  • I downloaded ie7 finally as I needed it to install IETester , a great tool for installing ie5.5, ie6. ie7 and ie8 simultaneously on either windows vista or xp.