Truth and Dare

February 3, 2010 in Uncategorized by Murray | No comments

Dare I do it?

I barely know this person, but I think I should go for it. A moment ago, we were just chatting, exchanging pleasantries. Am I really ready to cross the boundary to a more intimate relationship, even if it’s for only a brief moment?

Yes, I think so… and here’s my chance…

OK… Here I go…

“Excuse me,” I say, “but you have a just little something stuck to your teeth…”

Situation: Awkward

Many of us have run into this situation: we’re talking with someone we don’t know very well at a public gathering, and he or she has some sort of stray herb stuck to their incisor. That, or his fly is open, her skirt is stuck in their underwear, or there’s toilet paper stuck to his shoe.

In any of those cases, the person is blissfully unaware of the problem, and we can do something to help him or her. If it’s a dear loved one or close friend, we’ll tell mention it immediately or, if possible, even make a deft move to quickly fix the situation ourselves. But, with this person we barely know, mentioning the embarrassing situation forces us to move beyond niceties and more closely into his or her personal space. Sometimes people can’t make that move, allowing the person to go about the room, hoping someone else will tell them or that they’ll soon look in a mirror.

Retrograde Resentment

Many of us have also been that person needing help. And when, after being ignorant to your predicament, you discover the problem it yourself, your mind quickly looks backwards… When did that happen? Who did I see? Who saw me? And, depending on how bad it was, you may say to yourself why didn’t they tell me? Along with that last question is a twinge of disappointment or distrust, a flash of an evil eye cast back at those who said nothing.

What’s In Your Client’s Teeth?

With a client (or, on the in-house side another department or staff member), you may end up in a similar situation. There is something obviously wrong with their design/process/application. They would appreciate knowing about it, and you want to tell them. If you have a good, ongoing relationship with them, it’s likely easy to say something up front. If not, it may be harder to mention. Will they really appreciate what I point out or resent it?

In these cases, where the issue is obvious to all as a problem and easily remedied, you should say something. When the problem isn’t so clear to everyone, or not so easy to fix, the situation must be approached differently.

However, when someone has his fly open, it’s better to pull him aside and mention it to him quietly rather than pointing it out in front of a group. So you may still need to wait for the right moment. And the better you know them, the more leeway you may have.

But don’t wait too long. For if your client finds the problem themselves, they may also ask themselves why didn’t they tell me? How could they let me be embarrassed like that? And if it’s a big enough problem, they may ask themselves is there someone else I can trust to tell me next time?

Tags: , , ,

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: , ,