When I close a web browser tab (or window) by mistake, why can’t I undo that?
Archive for the ‘Usability ideas’ Category
Things you thought you’d have seen by now
Tuesday, May 25th, 2010Google’s search improvements need improving
Wednesday, May 5th, 2010Today, 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):
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):
Feedback welcome, as always.
Tweaking TweetDeck’s User Interface
Sunday, April 25th, 2010I’ve been using TweetDeck for my tentative tiptoeing into Twitter.
Of course, as always, I immediately felt compelled to revamp the user interface, with my clean-up gun set to ‘Maximum’.
Here’s the before-and-after (click to enlarge):
The key changes:
- Cleaner display of tweets. Use a cleaner, anti-aliased font, replace the text-heavy date stamp with a current time offset, remove the posting client (note: not sure if that’s allowed!), and remove the divider line between tweets, relying on good alignment and grouping to separate tweets.
- Remove the column background: there’s no need for that extra shading.
- Reduce the visual intensity of some unimportant column parts, such as the Twitter logo and scroll bar, so the user can focus on the content.
- Remove the row of buttons at the bottom, allowing for more tweets to be displayed. In any case there are better ways to implement those features than using confusing, icon-only buttons, and I’ve made a first pass at showing an improvement. Want to move the column? You don’t need a button for that, just drag the column title across. How about searching? Well, let’s make that a permanent box at the top where people expect it. Marking tweets as seen? I’ll be honest here: I don’t understand this concept in TweetDeck and can’t figure out (a) how tweets look when ’seen’, and how to ‘un-see’ tweets. I’ll take an initial guess and say most people are just happy to clear a column once they’ve read the latest tweets, hence the ‘clear tweets’ button at the top. User testing would reveal more.
This mockup was surprisingly fun to do. My focus, as always, was to cleanly present what really matters: the tweets! Everything else, to a greater or lesser extent, is just ’stuff’.
Refreshing the BBC sport website
Wednesday, April 7th, 2010So 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.
I sighed, and resigned myself to spending three hours refreshing it.
My version, with which I’m rather happy:
(Manchester United lost, by the way.)
Clearer Movie Rentals in iTunes
Wednesday, March 24th, 2010iTunes 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.)
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, 2010We (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.)
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, 2010Recipe 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
- One (1) Apple picture of a two-page iBook spread on an iPad, from Apple’s iBooks page.
- Photoshop.
Directions
- Remove lots of unnecessary eye candy pixels around the edge of your book picture, ensuring it’s still easily recognisable as a book.
- Move the page number up to the header, so it doesn’t waste 1,000 acres of space in the footer.
- 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.)
Improving the iTunes store – search results
Sunday, March 7th, 2010Following 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:
And my mockup (click to embiggen):
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, 2010An 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):
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):
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.)
Maximizing vertical browser space, part 2
Saturday, February 20th, 2010I’m on a one-man mission to make a better browser window. Too much vertical space is wasted with bookmarks, fat tabs, and empty title bars. I want to browse!
I’ve updated my original Safari mockup to now have a shorter status bar at the bottom, expanding only to show relevant information (in this case, a tick mark to show the page is loaded).
Come on developers, use the vertical space better!
