Scotch Egg Navigation

While working on a project with Richard Amos about a year ago we were pondering the static linear nature of breadcrumbs and wondering why they should always be so. The breadcrumb serves two purposes; firstly it gives users a sense of where they are in a site’s structure, helping them to never feel lost or disoriented. Which leads to the second purpose, to always provide them with a path home. The first of these is done entirely visually, you don’t need to click on the breadcrumb or interact with it in any way in order to help orient yourself. Its second function though, is all about the interaction, and this is where I feel it falls somewhat short. A typical scenario for using the breadcrumb might go something along these lines: Bernard is shopping on Amazon for some bits for a computer he’s just bought. He’s googled for Apple monitors and been brought straight into Amazon on their page of Apple monitors. After choosing one and adding it to his cart, he decides he needs some extra RAM. Bernard looks to the Amazon breadcrumb and sees something along the lines of:

It would seem like a fair assumption that he should step back up to Computer Accessories and check in there for the RAM, but unfortunately this isn’t the case. RAM is actually under Computer Components which resides at the same level as Computer Accessories, but there’s no way for Bernard to know that this section even exists. In reality, the Amazon breadcrumb is even less useful than the one I have presented here as it hides the first level of the hierarchy for some reason.

With Scotch Egg Navigation, we allow the user to see all the options available at each level of the hierarchy. So Bernard can have a quick check to see if RAM is listed in the Computer Accessories section of the site…

And when he finds that it isn’t, he can check for other suitable categories at the next level up, where he would find Computer Components, the correct category for RAM.

One click and he’s in the right place.

The two separate purposes of the breadcrumb have both been improved:

Firstly, our visual representation of current position is still immediately viewable helping the user understand their current position in the structure of the site, but we’ve also given them the ability to view much more of the site’s hierarchy. And secondly, we’ve given them the ability to traverse that hierarchy without backing out and in again.

It’s the difference between giving someone directions to the postoffice and giving them a map with the postoffice and all other points of interest marked on it.

Scotch Egg Navigation, it’s breadcrumbs with hidden meat.

iTunes UIWTF

With every release the iTunes UI seems to get worse. This morning I attempted the seemingly simple task of copying a video from my Mac to my iPhone. Firstly, I need to drag the video to iTunes which then creates a duplicate copy of the video on my hard drive for no apparent reason. The video then shows up in iTunes, so I attempt to click and drag it to my iPhone. But unfortunately Apple have decided to put a bloody great big play button on the icon for the video itself, so in attempting to drag it to my iPhone, I accidentally play the movie.

What’s the point of this play button? It wasn’t that hard in the old days to double click a video to play it, which of course would be what a user would expect to do. Reducing the number of clicks by one has made several other tasks much harder, clicking to select or to drag the video, you now have to be careful where on the icon you click.

Clicking anywhere in the green does what you’d want to it to do, select or begin a drag operation. Clicking in the red not only starts the movie playing but changes the state of the iTunes app, you are immediately taken from a position of organising your files to viewing one of them enlarged. Bonkers.

So once I manage to not click on the play movie button, I drag the movie file to my iPhone.

But this gives me a dialogue box telling me that the movie was not copied to the iPhone because the movie won’t play on the iPhone.

Hmmm. This is strange as i exported the movie from Final Cut as an H.264 encoded .mov file, I thought that’s what my iPhone required. There’s nothing here telling me why it won’t play on my iPhone or how I can make it play on the iPhone. Maybe I need to do some kind of conversion inside iTunes. The context menu here should be my friend, if iTunes can convert this movie to play on the iPhone, then surely it will be in the context menu.

Well, looking at this menu it would appear that iTunes can’t convert the movie so that it’ll play on my iPhone. It can however consolidate the movie’s tracks, whatever that means, “Get Album Artwork” (for a home movie? Why on earth is this in the context menu for a movie?) and “Apply Sort Field”, whatever that means. I’m pretty sure now that iTunes can’t convert my movie for the iPhone as it would definitely be in the context menu ahead of Get Album Artwork, but just for the hell of it, let’s have a look what’s inside that Apply Sort Field menu.

Oh right, so I can do something or other with songs from the same album as this movie is from? What the fuck?

Anyway, a little Googling revealed that actually yes, iTunes can convert for iPhone for me, it’s in the “Advanced” menu, obviously. So what’s an “Advanced” menu I hear you ask. Well I’m gad you asked me that question. Let’s take a look at the iTunes menu bar and that should tell us…

Right, so the File menu, that’s where we can find file related tasks and operations, good. The Edit menu, another nice easy one, that’s where we find editing related tasks and operations. View, again this is easy, this is where we can find tasks and operations related to the application view. These are all easy so far as they’re pretty much universal across all OS X applications. What’s next? Oooh, a Controls menu. Well, this is still pretty straightforward, everything in here is about controlling playback of iTunes media. Simple. Next up, Store. This is obviously tasks and operations concerned with the iTunes Store. Which then brings us to the Advanced menu, what could possibly be in there? If we guess based on the other menus, it should be a set of tasks and functions to do with the advanced. Hang on, that makes no sense whatsoever. We’re going to have to take a look inside.

Oh! I see! It’s a menu of things that should appear contextually but the designers couldn’t be fucking bothered. What an absolute abomination of information design the Advanced menu is. It’s even less contextual than the context menu we got when right clicking the movie file.

So…

a) Why wasn’t “Create iPod or iPhone Version” in my right click context menu?
b) Why didn’t the dialogue box that told me the movie hadn’t been copied over offer to convert it for me?
3) What the fucking hell is the Advanced menu?
iv) Why didn’t my original movie play on the iPhone?
f) Why when i eventually found the Create iPod or iPhone version, did it completely fuck up the simple task of converting it to play on the iPhone by screwing the aspect ratio of the original video?

I still don’t have the movie on my iPhone.

Free UX tip

Testing out Linkup.com‘s new service I got a slightly unexpected error message; “We couldn’t understand the location london that you provided.”

While I don’t mind that it didn’t understand the word London, it is a shame that it doesn’t offer the user any options that may make their search work. Here it should be trying to help the user, rather than simply telling them that it doesn’t understand.

• “Did you mean…” followed by a list of linked words similar to the search term helps to catch misspellings.
• If the search term is too broad then narrow it, “Do you want London Ontario or London UK?”
• If the service is not available in that area then let the user know.
• Provide examples of search terms that do work.

I have no idea why my search failed in this case, “London, UK” doesn’t work either. In the end I’ve come away from this site not knowing why my search didn’t work and for all I know the service is just broken. One of the golden rules of user experience should be to always help the user recover from an error.

Appbeacon UX

This is me attempting to log in to appbeacon.com

This is where I get taken to once I’ve actually managed to log in…

If I’m logging in to a site that is supposed to help me find good apps for the iPhone, I don’t want to read a blog post about server problems. I want to see a list of apps.

When I do eventually find a list of apps, I can’t cmd click on them to open them in new tabs, there’s obtrusive javascript that hijacks my click and loads the new page in the tab that I’m already on. So then I try to leave a comment and this is what I get….

There is just so much wrong with this I don’t know where to start. I’ve already logged in, you know my name and email address yet there’s name and email fields, a “log in to comment” button, a “log in to comment” link and a fucking “post using OpenID” link! I’m already fucking logged in.