Weave: visualising browser data: part 2

September 25th, 2009

Mozilla’s Web Weave UI design challenge seeks to find solutions to the issue of visualising browser data accumulated across a number of devices. This is part 2 of an article which outlines a potential solution to some of the issues raised. It covers the visualisation of tabs, accounts and preferences.

Please read: part one: introduction, bookmarks and browsing history first.

Tabs

Mozilla Design Challenge 3

Visualising tab history across a number of devices is possibly a little more challenging than considering bookmarks and general browsing history. Tabs can be open on any number of the user’s devices so one obvious question to be considered is how to arrange this information.

The tabs visualisation stays with the main visual metaphor, with history broken down per tab per device. This assumes the user has some way of adding and deleting participating devices — e.g. a copy of Firefox at home, or another browser running on another computer such as a work PC, laptop or mobile browsing device.

Tab data includes the title of the page being viewed and the tab history. The visualisation displays a thumbnail of the currently open page and previously visited pages. There should be a straightforward way for users to open this on their current device (and possibly all tabs open on other devices), and to save to bookmarks (or if the site is already stored as a bookmark to easily see this).

Views may change slightly depending on how the data is sorted — for instance, if the list were sorted by device name, then the displayed metadata could include information about the device the site was initially opened on.

Accounts (credentials)

Mozilla Design Challenge 5

Whilst it might be useful for users to synchronise account data across a number of devices, it is also the type of data which lends itself least readily to being visualised; in fact it is not appropriate to visualise data such as passwords.

In this model, sites with stored credentials are again presented as browsable thumbnails lending the user the ability to log in directly to protected sites. Some sites may offer API functionality which allows users to manage their credentials via Weave, but the majority will require the user to visit them in order to do so. Any changes to credentials would need to be synchronised immediately in Weave.

Preferences

Mozilla Design Challenge 4

Firefox preferences include a number of different options, the more obvious being browser home page, or Firefox persona. Some of this information may be Firefox-specific, other less so (e.g. home page). The visual metaphor can still be used, employing site thumbnails for selected home page or a visual representation of the selected persona. It could also be useful for users to be able to export the relevant parts of this information for use with other browsers if it cannot be directly applied (e.g. for Internet Explorer, Safari or Chrome); similarly options should be available to import data from a file generated by another browser or to be accessed via Firefox’s preferences menu, providing an option to pull the information directly in from Weave.

Summary

The model presented is quite simple and does not attempt any advanced data visualisation. Instead it uses models of organisation and interaction that users may be familiar with from using other social networking / asset organising websites. It is particularly influenced by models for organising visual information, for instance Flickr’s model of managing photo metadata.

No Comments »

Radio 4 website

September 20th, 2009

I was looking at the Radio 4 website the other day which I hadn’t done for a while and it looks like they’ve had a redesign at some point.

I really like the design — there’s a lot going on on the home page but it’s all clearly differentiated and the design elements are large and bold. Your eye is immediately drawn to the features “spotlight” banner highlighting four main stories. The controls underneath the banner image have a clear affordance and relationship to the featured stories.

The “Find a programme” navigation to the right of the image provides a quick way in to finding a radio programme to find out more about it or to stream it — you can either browse by genre or programme title.

Below this is a carousel feature highlighting one programme per day over the last week. It’s easy to use with obvious previous/next controls. I like the use of images too — I never imagined Rabbi Lionel Blue looked like that!

The content keeps on coming below the carousel: popular shows / podcasts and links to leave feedback and get tickets.

One of the interesting things about the design is that its producers were clearly not worried about the “fold” — if you shrink your browser down to 1024 by 800 (or if this is your default screen size) you get cut off around about the programme description in the carousel. See the images below — the first is the full page design and the second the page “folded”. Despite the content run-on, most of the key calls to action are still shown and as a user, I certainly don’t object to a little scrolling over clicking a number of links to get to what I want.

Incidentally another thing I like about the design is the number of images: I really feel that these complement the radio shows and make the site more than just a listings device.

Nice site.

See and download the full gallery on posterous

Posted via email from What’s this for?

No Comments »

Google’s new font size

September 12th, 2009

So, Google have changed the font size on their home page for the search box and buttons. At first I thought this was some setting in Firefox going awry (I'd been doing a fair amount of zooming on a design I was working on), but no. This is the way it's supposed to look.

Odd in a way as it seems inconsistent with all of their other designs which use 10pt arial (even in Gmail which I'm sending this post from) — but not unwelcome. Maybe it's because I'm getting old but I do prefer larger, clearer type.

Knowing Google you can bet they spent a long time and a lot of money on the user research for this too (remember "41 shades of blue-gate"?).

Screenshot from Firefox on OS X.

Posted via email from What’s this for?

3 Comments »

Archives