September 2009

You are currently browsing the monthly archive for September 2009.

Web Weave UI Entry

September 30, 2009 in Design Concepts by Murray | 1 comment

Mozilla Labs has another design challenge this fall: Web Weave UI. The purpose of this challenge is:

“Visualizing your browser data – How can we provide intuitive and useful visual representations of your browser data (such as bookmarks, history, tabs, stored credentials etc.) on a web page?”

In response to the challenge, here’s is my thought-about-too-long-but-finally-sketched-up-last-minute concept:

Web Weave Concept Sketch

Web Weave Concept Sketch (click image to see large version)

Not as polished as I’d like it, but I guess back-of-the-napkin works for the challenge as long as the idea’s there. Here’s more to explain the ideas behind the sketch:

Concept

Showing history and actions in a timeline view, using strings to represent different properties of visited pages. Strings can represent viewing by tabs, websites, and tags, or a combined single view of all visited pages. Strings can be sorted horizontally by different properties: title, most recently viewed, total duration viewed, most pages viewed, and so on. The range of the timeline can be adjusted to any start and end dates selected by the user, and viewed at different scales.

The Strings

Each string is made up of bars attached to a vertical line. Each bar is made up of coloured bands where pages were open and viewed. Colour variations in the bands indicate if the page was open, active, and if it has been previously visited. At points in the timeline where no page was open, the band is white. Gaps between bars represent timeframes where there was no activity in the string (set by a threshold value in view options).

When hovered over, each banded area in a bar displays a flyout of the pages represented by that string at that point in the timeline. The flyout has:

  • A title showing the indicating the name of the string and the point in time being viewed
  • A thumbnail of each page related to the string at that point in time, also showing the URL and title for each page (often this will be one thumbnail, but with multiple tabs and browser windows, more than one may be shown)

As the user moves over the band, thumbnails will update automatically, with no clicking required.

Each string can be pinned in a position to the left of the horizontal view when side-scrolling across strings occurs.

Timeline Selection

The Start and End date and times can be entered manually and adjusted through text boxes, a calendar picker, or via buttons for commonly-used time periods (e.g. today, yesterday, one week ago, one month ago).

The entire vertical scrollbar represents the total selected range. The scrollbar’s elevator can be moved up and down to adjust the timeframe being viewed. The elevator can also be stretched or shrunken by dragging on the handles on either end, causing the timeframe being viewed to zoom in and out, showing a shorter or longer timeframe, respectively. As the elevator is moved or stretched, the elevator’s endpoints indicate the timeframe being viewed in the current window. On the left side of the window, the range of time is also shown, with labels at predetermined intervals appropriate for the range being shown.

String Selection

Strings can represent various aspects of the browsing experience:

  • Sites: each string represents a collection of pages for a specific website domain, which is an often-used way to sort pages. It may also be the easiest way for the user to re-find visited pages he or she visits often.
  • Tabs: each string represents pages viewed under a tab in the browser. This option will most closely represent the browsing sessions in a visual manner.
  • Tags: each string represents pages with a specific tag assigned by the user when bookmarking pages. As pages could appear in more than one string simultaneously, this view would not allow the Show Followed Links option to be active.
  • Single string view: one string, combined of multiple side-by-side bars that just represent the maximum number of tabs open over the selected timeframe. Hovering over any bar shows a flyout with all thumbnails related to that point in time. Gaps do not appear between individual bars: gaps only appear when there is a lack of activity for the entire browser longer than the Gap Length setting

String Sorting

Users can select how strings are sorted along the horizontal axis based on the type of strings selected. Some common sorting attributes may include:

  • Alphabetically
  • Most recently viewed
  • Most times visited
  • Number of Pages viewed
  • Duration viewed
  • Duration open

Tunnel View

Below each string is an option (that also appears in a right-click contextual menu for each string), that allows the user to view the string in a full-window “tunnel view”. The tunnel view shows thumbnails of the pages related to the string along points in the timeline, including text-based information for each thumbnail such as time, title, and URL. Arrow keys can be used to move forwards and backwards in the tunnel. Pages are shown in the tunnel view at the point they are first viewed.

If the Show Followed Links option is on, the tunnel view will allow users to jump between strings as where links were followed. This is indicated in the tunnel view by blue dots along the wall of the tunnel. When hovered over, the dot will show the thumbnail, title, and URL of the link destination. If clicked on, the user is shown a view of the link’s related tunnel.

Viewing Options

A number of options are available to the user:

  • Show Followed Links: checkbox that toggles the visibility of which links were followed between strings. If made visible faint arrows between strings (but not within a string) are shown where links were followed.  This also affect the “tunnel view” by allowing users to turn into another tunnel where a followed link occurs.
  • Highlight Bookmarked Pages: checkbox that toggles the visibility of indicators showing when a page was bookmarked. The indicators are displayed as small stars slightly off-center from the bar.
  • Hide Skipped Pages: The user may wish to keep pages in history, but exclude certain pages or sites them from view in the timeline window. The user can setup a list of pages to skip, from anything under a specific domain name to specific pages.
  • Hide Pages Opened But Not Viewed: When using multiple tabs, the user may open many pages but never view them, essentially appearing as “false positives” in the timeline window. This checkbox toggles the visibility of such views.
  • Set Gap Length: the user may wish to change the gaps between bars to a shorter or longer timeframe. This option allows the user to do this, selecting an integer value and unit of time.

Tags: , ,

The Missing Link

September 18, 2009 in Bridge-builder by Murray | No comments

Many moons ago, soon after finishing engineering school, I took a trip to Europe. One stop on the 3-month journey was Paris, with its elegantly laid out streets artfully touched with oh-so-much dog poo. While waiting in line for tickets to the subway I had a moment that sticks in my mind. When things get frustrating, it’s one of those memories that reassure me I’m in the right line of work.

In front of me in the line up for Metro tickets was a Japanese man. He was trying to buy a ticket but running into some difficulty. The tickets were being sold by a Metro attendant in a glass booth, not an automated machine. He kept trying to give the attendant some money, but for some reason the attendant wouldn’t take it, pushing it back to the man. The man didn’t speak French, the attendant clearly didn’t speak Japanese, and neither seemed to speak English. Growing up in Canada, I should have learned more French, but my only practice was reading the back of cereal boxes while eating breakfast. And although I couldn’t speak Japanese either, I could see that both the man and the attendant were getting frustrated.

Then I noticed a couple things. The attendant kept shaking her head, pointing to the window of the booth here the fares were listed. Was the man not using French money? Nope, he was using Francs (this was before the Euro). But another thing was that the man kept trying to pass two separate bills to the lady, one after or beside the other, rather than one handful of cash. After that it occurred to me what to do. I tapped the man on the shoulder, wrote something on my hand, and showed it to him. He nodded, paid the attendant easily, and got his tickets.

What was it I wrote? I don’t remember the exact numbers, but it was essentially something like:

,=.

5,10 ≠ 5+10

5,10 = 5.10

In French, a comma represents the decimal, and vice versa.  Not knowing this, instead of the 5.10 Franc fare, written as “5,10″, the man kept insisting he pay 15 Francs, thinking his money was being refused. The attendant wasn’t aware of what the man was seeing (or at least how to explain it), so she kept trying to return the extra bills to help him out, leading to a vicious cycle. Each of them had the best intentions in getting the transaction completed, and understood most of what was required. But since they didn’t have a common context, this seemingly little thing got in the way.

It just took someone to help connect the two, even it it was just someone who knew enough “cereal box French”, and “Japanese decimals”.

I think there are some parallels here to doing work in User Experience. As practitioners, we can’t know everything about a client’s business or their customers, but we do help make the connections between them better. Each may think they’re on the right track and doing all they can to help the other out, but until they are talking the same language, they won’t be able to get to where they want to go.

Tags: , ,