wheresrhys

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

After greasemonkey

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.

All 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 CNN.com 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??

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

• Firefox
• Safari
• Internet Explorer (ie)
• Chrome
• Opera

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).

Here 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.

I’ve just spent a  little time adding some useful sounding plug-ins (initially prompted by wanting an effective backlinking plug-in), one of which was the Wordpress Automatic Upgrade plug-in. So, with that installed I finally got around to upgrading wordpress and, to both my delight and dismay, wordpress has changed its admin screens layout since the last version I had (2.3 I think). It’s a much better design, but it does break toolbarize. In fact, it renders it unneccessary as the layout is much more user friendly and screen-space efficient, with scrolling not being no nearly so disruptive to the postying process.

However, it has inspired me to write a plug-in which makes perfect use of screen space by hiding things I very rarely use… or putting them in the footer. I could even make it so users can customise which screen elements are hidden.

If, like me, you subscribe to a number of web-related blogs in an effort to keep abreast of what’s happening in the world of websites and the internet, you’ll have heard all the chatter about Chrome, Google’s new web browser. I reckon it sounds good in boring, but important, ways – more stable, faster javascript, ability for certain components to crash without crashing the whole browser. They say they’ve re-thought the web browser from scratch, and it seems they have addressed some important issues that maybe no-one else, committed to extant browsers, would have been able to – but from the point of view of allowing people to use the web in new and exciting ways it’s a bit of a dud. Firefox’s add-ons, and even IE8’s anticipated new features are far more innovative, flexible and of use to users.

One immediately obvious attempt by Google to break new user interface ground is the positioning of their tabs. All existing tabbed browsers (Safari is the example in the picture) put the tabs below the address bar. Chrome, on the other hand, puts them above.

This makes sense, as the address bar is the address of the web page in the tab – the address of the whole browser doesn’t actually make sense when a browser supports multiple tabs.

But does it make the browser easier to use? I think not (although one has to assume the people at Google have tested it thoroughly and found the opposite, or at least inconclusive evidence either way).

Often I open up numerous tabs for the sole reason of wanting to hop between them. In this situation I can imagine the address bar getting in the way, both physically (you have to move the mouse further to get from hovering over the page and clicking on the tab), and conceptually (In these days of super-doopa search, and long, dynamically generated URL’s a website’s URL doesn’t take on the de facto role of “page title” it once did. It could be argued that putting the address bar physically within the tab adds semantic clutter rather than information of high priority to the user. Putting it outside the tab makes it less of a distraction).

So to sum up, I think it’s a good example of when the logical, ideal way to set up a user interface doesn’t necessarily equate to the most ergonomic way.

As this blog is merely a pretext to fill a web design portfolio website with regular content, I suppose I should knuckle down and write something related to the day job.

Jakob Nielsen, as well as being a good candidate for a Bond villain, is, according to many, the world’s leading authority on website usability, and as such I reckon he’s a good egg.

Contrary to what you would expect his website isn’t – in my humble opinion – very easy to use. The trouble is there’s very little sense of hierarchy, or use of visual clues. One of the golden rules of usability is that sticking to conventions tend to make things easier for the user, and he doesn’t make his navigation look different enough to ordinary content.

Also, despite writing a regular column on web usability, it’s infuriating that he does not publish a feed of this column, thus making his website more unusable still for RSS reader user s (which surely make up a higher percentage of his readership, given the subject he writes about appeals to people with an interest in all things good and webby). (Fortunately, somebody has used their initiative and put it right for him with this feed).

Anyway, one of his latest columns, on whether to put ok to the left of cancel or vice versa on web forms (the dilemma is that non web applications on apple put the buttons the other way round to windows) got me thinking about whether it’s possible to detect he operating system of a visitor, and change whether the buttons are floated left or right, depending on the OS, which would eliminate the problem.

And it turns out it is possible. One day maybe I’ll follow this post up with some example code.