Posts Tagged ‘usability’

Google’s search improvements need improving

Wednesday, May 5th, 2010

Today, Google announced they are rolling out an improved search results page.

However, they seem to have battered it with an ugly stick and made the page very ‘heavy’ (click for larger version):

Screenshot from Google of their improved search results page

So again, a few hours’ work, and I’ve created an improved version. Most of my time was spent:

  • Removing unnecessary details, such as grey dividing lines and search times (does anyone care any more what fraction of a second a search takes?)
  • Improving the spacing between search results
  • Improving the design of the left search choices

Here it is (click for larger version):

Improved search results page, with better visual spacing between results, a cleaner left column with titles to divide search options, and fewer unnecessary details such as search time.

Feedback welcome, as always.

Refreshing the BBC sport website

Wednesday, April 7th, 2010

So I’m watching the live football text on the BBC website, and it strikes me that the page design is rather heavy-handed. Solid slabs of colour everywhere, excessive wordage, and a general lack of focus on the content.

Screenshot of BBC football website covering a football game, with text commentary.

I sighed, and resigned myself to spending three hours refreshing it.

My version, with which I’m rather happy:

Mockup of improved BBC football page, with fewer words, less strips of colour, and lighter fonts.

(Manchester United lost, by the way.)

Clearer Movie Rentals in iTunes

Wednesday, March 24th, 2010

iTunes movie rental screens – see the before-and-after graphic below – would benefit from some simple user experience improvements:

  • You do not need to rent directly from a search screen such as ‘New to Rent’. I would anticipate most people click through to the movie first, then choose rent, to reassure themselves on making the correct purchase. So the prominent rental buttons on the search just make the page unnecessarily busy, and should be removed.
  • There are also superfluous and visually busy buttons for buying movies, either in a forlorn attempt to upsell – out of all renters, how many people do you honestly think go to rent and end up buying from a browsing screen – or due to store-wide conventions on presenting movies with no consideration for context. These buying buttons are unnecessary.
  • There is wasted wordage. People will understand that ‘Mar 20, 2010′ is the release date for a movie when it is in a section called “New to Rent’. You do not need the word ‘Released’.
  • The supporting details, such as genre and release date, visually compete with the important title and box cover. The supporting details should be less prominent.
  • The box cover is an incredibly powerful selling tool, yet is very small on the page. This should be made as large as feasible.

Here is my mockup. (Click for large version.)

Before-and-after for movie rentals 'new to rent' page, with after having larger box covers, fewer details, and no rental buttons.

This is purposely a usability evolution, rather than a revolution. I will develop a dramatically improved approach in a future mockup.

Better Safari browsing: more vertical space (part 3)

Monday, March 22nd, 2010

We (still) need a better browsing experience, and I’m on a mission to promote it. For part 3, I’ve created a comparison picture to again show easy gains in vertical space.

Browsers, such as Apple’s Safari, need to make better use of vertical space. Less focus on functionality and more on page content.

Here’s my mockup. (Click for large version.)

Before-and-after safari browser window, with the improvement having 83 more vertical page pixels by moving bookmarks and tabs to left.

Seventy eight pixels on a 1024 x 768 screen is about 10 percent more web page.

(Also, notice how I’ve thrown my website visual consistency to the dogs with striking grey for the background, and a serif font. Rawr.)

Recipe for making iPad’s iBooks easier to read

Friday, March 12th, 2010

Recipe background

My great-great-great-great-grandfather once sat me on his knee and said, “You know what kid? People read books for the words.” He then wrote that insight down as a magic recipe.

Today, I’d like to share that recipe with you for improving Apple’s new iBooks.

Ingredients

Directions

  1. Remove lots of unnecessary eye candy pixels around the edge of your book picture, ensuring it’s still easily recognisable as a book.
  2. Move the page number up to the header, so it doesn’t waste 1,000 acres of space in the footer.
  3. Profit! Resize your content so it’s 10% bigger but still easy to read.

Alternative recipe

Instead of making your content bigger, show more content on each page.

Serving suggestion

Here’s one I prepared earlier. (New approach on the left, old on the right.)

Two-page iBooks page spread, with the updated version on the left page, the original on the right.

Improving the iTunes store – search results

Sunday, March 7th, 2010

Following from my last post about the iTunes store, I appear to be on a roll here. Here’s how you can give the iTunes store’s search results a makeover.

Here’s the current store search results page (click to embiggen) for ‘TomTom’, where inexplicably the app search results aren’t at the top – even when you search from an app store page:

Search results screenshot in current iTunes store, from search for 'TomTom'.

And my mockup (click to embiggen):

A mockup of an improved iTunes store search result, with clearer grouping of results, less vertical space used, and less visual clutter.

Again, purposely an evolution rather than a revolution. There are some really creative ways you could take these search results even further, given the huge amount of store content you have to sift through.

Improving the iTunes store – TV shows

Friday, March 5th, 2010

An iTunes thread on Ars Technica inspired me to give the iTunes store a user experience spring clean – specifically, browsing TV shows.

Here’s the US store’s current presentation of Curb Your Enthusiasm, Season 1 (click to embiggen):

Screenshot of Curb Your Enthusiasm page of iTunes store

It’s crowded. Information is duplicated, such as the main season picture, the show title and season number, and many little details like “Genre: Comedy” (we’re, uh, in the Comedy section).

The episode list feels like a wall of text, unbalanced in density between name and descriptions, and doesn’t encourage you to browse and engage. And I’ve really tried hard to think of a reason why anyone would want to sort the episodes by time – the need for a column format is questionable, not helped by the column widths not being resizable.

Finally, it has some carry-through annoyances from the rest of the store, such as the incomplete breadcrumb trail – of course, that reflects a bigger structural issue.

So here’s my version, purposely an evolution rather than revolution (click to embiggen):

Alex's mockup of the Curb Your Enthusiasm page of iTunes store, with many changes as detailed in the text.

Notable changes:

  • Episodes are visually larger with more implicit structure, and include full descriptions, a video frame, subtler presentation of metadata (time, episode number, etc.), and a clearer visual cue to try the preview.
  • The breadcrumb trail is more complete – although Apple needs to make some additional landing pages in the site structure to fix the real issue. (An overview page for all ‘Curb Your Enthusiasm’ seasons is one example.)
  • Lots of unnecessary wordage is removed. Customer reviews take half the space. Other seasons don’t mention ‘Curb Your Enthusiasm’ over and over. And I think most people understand the description without a big fat ‘Description’ heading (although there are good accessibility reasons for a heading).

I may work up a ‘revolutionary’ example. My mockup is mostly window dressing, apart from the experimentation with episode display.

The biggest problem with iTunes is this: it uses a relatively inflexible display approach for all its content – movies, podcasts, music, (soon) books, and so forth – and it’s really starting to creak and groan under the strain. Such diverse content types need tailored presentation to be fully engaging and successful.

(As an aside, remind me next time not to Photoshop up an example that uses a mottled blue background. That caused me seven levels of pain.)

The little things… bookmarking in Google Chrome

Monday, February 15th, 2010

Bookmarking in the latest beta of Google Chrome is confusing. Here’s why, and how to fix it.

Here’s what happens when you click the ‘Star’ button in Google Chrome. You get the following ‘dialog’ (or panel or whatever):

Panel saying 'Bookmark Added!', with name field, bookmark location pop-up menu, and buttons to remove, edit and close.

As you can see, the bookmark is already created, and we’re given the chance to edit the bookmark’s name and the folder it goes in.

The problem here is that the completed step of creating a bookmark with default information (“step 1″), and the incomplete step of editing that bookmark (“step 2″), are being merged together, and a single dialog is being used to cover both. It feels like a nod to how bookmarking has always been done, without understanding the effect of the changes to the task flow.

Dialogs are designed to give the user control over one clearly defined step. “You’d like to save something… okay, give me the details in this dialog, and then click ‘Save’ to complete the saving process.” The buttons across the bottom of a dialog almost always perform some action based on the fields and options in that dialog.

Safari takes a similar approach to bookmarking. “You’d like to bookmark this page, because you’ve chosen ‘Add Bookmark…’. Okay, confirm the bookmark name, then click ‘Add’ to complete the bookmarking process.” It effectively reverses and combines the steps of Chrome: rather than editing the bookmark after creating it, you make sure the details you use to create it are correct. Whatever the merit of this approach to the task (i.e. asking you to confirm the bookmark creation), it’s incredibly intuitive in how it’s executed.

Chrome still gives you a single dialog box, but uses it to give options affecting one completed step and one incomplete step: mistake one. The buttons on the bottom of the dialog affect different stages, with one button (Remove) having nothing to do with the fields and options in the dialog. (As an aside, there is also no button to cancel unwanted edits made in Stage 2.)

The purest solution to mistake one is to use a UI element or approach that could separate the following:

1. I have automatically created a bookmark based on your click of the star, but you can delete it if you want.

2. You can optionally choose to edit the details of that bookmark I’ve created.

Chrome also uses some inaccurate button names: mistake two. ‘Remove’ is actually an undo for Step 1. ‘Close’ is actually a save/apply/whatever for Step 2. ‘Edit…’ is… just plain weird.

Firefox’s approach is a half way fix. It uses slightly better buttons and wording to avoid being as confusing as Chrome, so it avoids most of mistake two. However, parts of mistake one are there too: it proudly says “Page Bookmarked”, with options in that dialog to then edit the details. “Cancel”, however, should really cancel any changes to the edits (the focus of the dialog), not delete the bookmark. They kinda get away with it.

And the ideal? It depends on how people bookmark, which I can’t judge other than my own habits. I don’t think confirming the creation of a bookmark is a huge deal. It’s not like we’re doing it excessively on the critical path of using our computers.

I’m sure an elegant solution can be found: it’s just not Chrome’s current one.

Browsing movies in iTunes

Friday, January 8th, 2010

Browsing movies in iTunes needs to be much more interactive and visual, like it is in a video store. Here’s just one concept of how you could do this, using Cover Flow in a really appropriate way.

iTunes mockup showing large movie cover, trailer and key details, with coverflow to browse through other movies.

Improving Safari vertical space

Monday, January 4th, 2010

This is how I’d like to see Safari on the Mac… or indeed, how I’d like to see every web browser. Maximise the vertical space, use all the space on the left and right on our widescreen monitors.

Mockup of Safari browser with bookmarks and tabs in a panel on the left of the window.