• Bookmarks
• History
• Tabs
• Stored credentials

The Mozilla Weave project aims to allow synchronisation of this information across different Firefox instances. However, this particular design challenge is looking at ways that this information may be shared across different browsing devices when access to Firefox isn’t possible, i.e. via a web page.

Details of my proposal follow. It has been in part influenced by the findings of one of the Challenge’s recommended readings: Jason Hong, Contextual Web History: Using Visual and Contextual Cues to Improve Web Browser History (PDF), and other existing web-based mechanisms for managing visual assets (e.g. Flickr).

One of the findings of the paper was that visual cues in the shape of thumbnail images of visited websites helped users to better identify sites in their browsing history: the most useful size of these thumbnails was found to be around 235 by 148 pixels (p.5). This visual approach to representing history is being used by other browsers, including Safari and Chrome.

My idea expands on the use of visual cues for browsing history and also applies them them to bookmarks, tabs, credentials and history. As the data in this example becomes visual, it also lends itself to being managed by tools similar to those for managing photos and other visual assets on social networking sites. The Flickr model of page layout and set (”folder”) management, mainly due to its familiarity to me seemed to be of particular use.

The prototypes presented have been created by Balsamiq Mockups and are deliberately lo-fi. However, they help to clarify some of my concepts. They leave aside logging in, Web Weave account management and help screens etc. and are broken down into the following screens:

• Bookmarks
• Browsing history
• Tabs
• Web accounts
• Preferences

Main menu

The main menu provides an overview visualisation of all stored data. All main headings, “Bookmarks”, “My browsing history” etc. can be expanded and hidden and show recent activity.

A search box enables users to search across all stored data (with the exception of passwords) — searches would also be filtered by data type (bookmarks, history, tabs etc.).

Bookmarks

Both Firefox’s existing method of organising bookmarks and the bookmarking sharing service Delicious allow users to file bookmarks of websites and categorise these by tags (Firefox and Delicious) and / or sorting by folder (Firefox). Whilst this allows for cross-referencing of bookmarks, bookmarks are presented textually as the title of the website, its URL, user generated tags, and in the case of Delicious, a textual description.

My model presents the data visually, showing thumbnail images for each bookmark, alongside its metadata, some of which is automatically generated (URL, site title, date visited), other parts of which are user generated (tags). In this visualisation, all data can be edited in place (as with editing photo metadata in Flickr). Bookmarks can also be deleted via clicking on an icon with a suitable “delete” metaphor, and filed in one or more folders (like Flickr “sets”). The method for filing shown in the prototype was also influenced by Google Mail and Reader’s method of associating emails / feeds with one or more folders.

The folders created by the user are shown to the right, much like sets in Flickr. These can be edited by activation of the relevant edit link. Users may wish to edit the folder’s title and thumbnail image, using either the thumbnail of a representative website or an image selected by URL or direct upload. A default placeholder image would be used in the absence of a selected image.

Browsing history

Firefox’s current “show history” option presents a textual list of previously visited sites, showing the following metadata: site title, tags and location (URL).

Jason Hong’s paper cites research that, although up to 81 per cent of web pages visited by users are revisits, web browser history functions are only used around 0.2 per cent of the time to initiate these visits.

In this model, browser history is visualised as it is to an extent in Safari and Chrome, but with more accompanying metadata and the ability to add the sites as bookmarks. Selecting the “Add to bookmarks” functionality allows users to add and amend site metadata and file the bookmark in an existing folder (or in  a a new folder).

The time periods selected for differentiating browsing sessions are kept as per the standard Firefox organisation, i.e. today, this week, then previous months. A calendar widget is suggested as an alternative way of browsing by particular day, with the page content updated dynamically as the user clicks through dates. Other sort options which might suggest themselves are: web site title, URL, the device the page was accessed on or by tabs.

Part 2: tabs, web accounts (credentials) and preferences.

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

Tabs

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)

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

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.

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?

I really like this: a search on a key word (e.g. “Shetland” in the example below) brings up a results page with a gallery of images which can be displayed with increasing levels of detail (small, medium, detail, slideshow) and, to the right, related groups, photographers, tag clusters and places. Clicking on “Lerwick” in the right-hand column takes you to another screen with a detail image over an image carousel: you can either scroll the large image or browse the carousel.

It’s not just the layout and UI design I like about this, it’s the way that various constituent parts of Flickr (individual photographers, photos and groups) are all drawn together and consequently draw you in.

As an aside, I also notice that my photo of the Breckon is now being used as the icon for the Shetland group which is quite nice.

Posted via email from What’s this for?

Posted via email from What’s this for?

I would have preferred to have had some way of navigating through the information on the splash image — for instance, some carousel-style controls or something along the lines of the BBC home page:

On the BBC home page, there are clear controls to change the splash image — they even tell you what you’ll expect to see.

The problem with the Tate approach is that each image displays for about five seconds. I counted six images, so that’s thirty seconds you need to wait if you want to take another look at something that caught your eye. One sure way to frustrate your users.

I really like this approach — summarising the new features in a lightweight overlay with two clear headings: one announcing the new drag and drop functionality relating to labels and messages, and the second answering the question, “where did all my labels go?”. If you’re left in any doubt, the two diagrams nicely sum things up. There’s some clear calls to action in there too — the “Ok” dismisses the overlay and the “Manage labels link” allows you to decide for yourself which labels you want to appear on the left.

The functionality itself is quite interesting — it’s the closest Gmail has come so far to emulating the traditional folder set up found in many email clients. If you drag a message, it gets assigned a label and automatically archived, so it doesn’t appear in the main inbox. Gmail’s lack of folders has never personally bothered me; in fact I tend to find that using folders is quite often a short-cut to losing mail. Still, it’s quite useful when it comes to things like mailing lists which can quickly overwhelm your inbox.

A valid drop target is indicated via the label name becoming highlighted in inverse, e.g. white text on a blue background which is pretty intuitive. The tool-tip, “Move x conversation[s]” also changes colour to match. It’s less obvious when you choose an invalid target — in fact you get no feedback other than nothing apparent happening:

A valid drop target in Gmail.

An invalid drop target

But, this one quickly had me tearing my hair out due to its completely counter-intuitive controls: if you click and drag to the left, the map moves to the right, drag it down and it moves up. I double-checked with Google Maps just to make sure I hadn’t totally lost it, and yes, sure enough, this is a reversal of standard controls, as much as they exist. Take a look at these videos and compare and contrast:

1. South Downs Way interactive map behaviour (I’m not sure who produced this software)

2. Google Maps behaviour

But, the first one isn’t actually as daft as you might first think, it just uses a different metaphor. Google Maps (and Yahoo, and just about every other online map tool I’ve used) use something like a concept of a standard map on a table top that you stick your hand on and drag: drag it down, and it moves down. On Google Maps, the pointer turns to the image of a hand when you click which emphasises this metaphor. The South Downs map however, puts the mouse in the role of the walker. Hence if you go forward, the landscape moves behind you; go left and it moves right (kind of).

Clever as this is, I can’t see it catching on. Not only does it break with the convention of other online maps, it also contravenes the standard direct manipulation controls of just about every other software package I can think of.

Incidentally, I looked at Yahoo Maps for comparison, and to be different they reverse the zoom in / zoom out control compared to Google Maps. Just to be different I guess, but this is still very annoying and for me, counter-intuitive. In fact I find Yahoo Maps in general a little clunky — I’m sticking with Google for this one I think.

Yahoo maps: reverses the position of zoom-in / zoom-out. The scale indicators (”Country”, “Region”, “City”, “Street”), although in principle useful, just got in my way.

Maybe one day, we’ll get standard map controls?

M873 is a postgraduate module which you can take either as a standalone or as part of various MScs in Computing. I took it for professional development reasons: having realised that my real passion in Web work is designing and building usable interfaces, I wanted to get a stronger theoretical background in the area.

The course is designed to be practical — although it provides an overview of key concepts in Human-Computer Interaction (HCI), it always has an eye to how these would be applied outside of academic discourse. There are three course books covering the various iterations of the user-centred design process: requirements, design and evaluation.

Personally, I found the design book and related assessment most enjoyable. You need to produce three Tutor-Marked Assessments (TMAs) for the course, and these are all focussed on a particular system you have chosen to look at. I chose a section of a website at work to look at, mainly because I was getting funding from work to do the course, but also because I hoped it would give me the opportunity to implement any design changes I came up with. You could choose any system in theory, from a DVD player remote control to an existing website.

The TMAs were incredibly time-consuming. The course notes suggested you should take around 10-15 hours for each one, but in practice I (and others I spoke to) took far longer: at least twice of this. Which brings me to my biggest complaint about the course. The overall mark is based on the TMA marks and the exam marks. You need to get 40% in both to pass which I feel isn’t a fair weighting: after all you might spend between forty and sixty hours on the TMAs and you get just three hours in the exam hall.

I thought the exam expected a little too much: both in the amount of questions you were supposed to answer (four in three hours) and the amount of lists and tables you were expected to learn by heart. If the course must be assessed by an exam, I’d prefer to see the course weighted more in favour of the assessments or at least fewer exam questions.

The material ranged from incredibly interesting and engaging (aspects of the design book, how to “sell” UCD to your organisation) to the far dryer, verbose and repetitive (most of the first book and parts of the last). The materials were also outdated: the course was last updated in 2000, although there were some revisions in 2004. This means screenshots of websites in Netscape 4 and photos of virtual reality gloves (yeah, so they turned out to be the future of interface design didn’t they). But, it should be borne in mind that this is not a technical course but a conceptual and design course and as such is technology-agnostic so will not date as quickly as say, a course on Web development. You could pretty much do the whole thing with a pen and paper. For my part I prototyped with Photoshop, HTML and Balsamiq Mockups.

I wouldn’t say the course was enjoyable as such: it was very demanding and there were many concepts to try and understand. However, it was very useful and although it’s not going to guarantee me a glowing future as a usability professional in itself, I’ve already employed many of the concepts and ideas in my day-to-day work. Would I recommend it? Yes, but with caveats: I think the course materials could be slimmed down and I do think the coursework / exam mark ratios should be addressed.

It’s also worth bearing in mind how you will cope with distance learning: it worked well for me, fitting in with other commitments, but you do feel you’re on your own and there were few opportunities to bounce ideas off other people or to get a tutor to go over a particular issue. There was a course forum, but this seemed to die about a month into the course. One of my co-students set up a Facebook group which saw a little more action, but not much.

As a postscript: it should be pointed out that apparently this course is not going to last much longer in its current format. It’s been long overdue for review, so I think that it’s not going to be offered after this year or next (but please don’t take my word for it!).

With that in mind I started doing a bit more research and last year I started a course in User Interface Design and Evaluation which has been a great introduction to the field of HCI and usability. I’m hoping that with the knowledge and experience I’ve built up, I’ll be able to refine my career more in the direction of interaction design and usability.

But, this got me thinking — how easy is it to change tack in the Web industry? Back in the 90s it was more fluid before things got a bit more professionalised. Now roles are a bit more clearly defined: you’ve got a whole range of job titles from information architect to designer and developer, each with their own knowledge, skills and training requirements. How easy is it to move between these different disciplines?

With this in mind, I posted to IxDA to get the view of the professionals. I got some very useful responses, some on-list, some off. All the responses were encouraging — some people thought education was more important that others, but no-one was saying, “MSc in HCI or forget it”. Some people had been in the same boat as me and made the transition. What came out was yes, it is possible to make this transition — but you’ve got to work at it. In a nice bit of serendipity I came across a recently-recorded Podcast produced by UIE called “Transitioning to IxD and Usability” where a Web Developer was asking exactly the same question.

I’ve summarised a few points from the respondents to my question and this podcast which might be of interest to others in a similar situation:

• Apply your knowledge in your existing post — this may depend on how supportive your employer is (I’d say I’m lucky in that my employer is reasonably supportive about this and I’m already involved in some usability projects).
• In terms of new roles, consider one which is a “hybrid” between your current role and the direction you’d like to move into.
• In smaller companies, such as start ups or in Agile teams there may be more opportunity to combine different skills.
• Coming from a development background puts you in good stead for communicating design ideas to developers and also you’ll understand the kinds of problems they experience
• Read and learn! There are a lot of useful books, sites, blogs and podcasts out there (c.f. my post on 8 interaction design and usability sites).
• You are what you say you are: you may be the most knowledgeable person in the room about usability! Think about how you market yourself.
• And my favourite from the UIE podcast: it helps if you dress in black, wear Buddy Holly glasses and complain about the usability flaws in every system you come across!

I’m going to continue to research this matter, time permitting. I’d love to hear the views of some more employers on this. If I manage to get any I’ll publish a follow-up post!