Picking, Poking, & Proding

I just noticed my last two posts were about Google apps.

I’m not intentionally picking on them. It’s just that Google makes the web apps I want to (and do) use every day. I’m far more likely to both notice and get annoyed with seemingly minor parts of their design than something I only use a few times a week (like say Flickr).

Subscribing in Google Reader

Here in New Zealand, Internet service is often times slow (thanks to lower available speeds and that pesky distance thing). There are also caps on the total amount of bytes you can transfer in a month. While I enjoy visiting friends sites, It can become a costly test of patience.

As a result, I’m getting back into feed readers. What I like in a reader is quick access to new information. I have little regular need for meta-data about the information.

After fiddling a bit with some of the current offerings, I’ve decided on the recently redesigned Google Reader. Reader does offer meta-data options like tagging (Three cheers for Reader forgoing the Google only convention of calling them “Labels”) and starring, but those things never feel as if they’re in my way… Or that they’re required in order to properly use the application. Combine that simplicity with snappy article load times and keyboard shortcuts for quick movement between them and I couldn’t be happier.

...Except for one thing.

Once committing to reader, I needed to fill it up with sites. Reader includes a bookmarklet to subscribe to a site while viewing it. In theory it’s great. In practice, subscribing and placing the new site into a folder becomes a six click process.

Here’s how it works:

1. Click the subscribe bookmarklet in the browser toolbar.
2. You’re taken to Google Reader, with the feed displayed. Here you click a subscribe button.
3. Now you’re subscribed. All the posts in a feed are marked as unread. Click to mark them read.
4. Click “Manage Subscriptions”.
5. Click the “Add to folder” dropdown.
6. Click the folder you would like it in.

It’s a pretty heavy workflow. There are a variety of steps that are initiated in many places on the page. Looking at those steps in detail:

Step 1: No troubles here.

Step 2: This assumes that when you clicked subscribe you weren’t committed. There are a number of feeds out there that suck (ex: a title with that title listed again as the only body content). You should be able to easily remove the feed. Here you do nothing to unsubscribe (technically you aren’t yet subscribed – confusing!) and click to subscribe. My guess would be that canceling a subscription at this point is the minority case. If that’s true, then the most common behavior also requires the most work.

Step 3: When I subscribe to something, I’ve decided to by reading some of the posts. I don’t want to see the same posts again in my new items. I can also see another type of user. The sort who subscribes instantly, then decides later if they want to delete the feed.

Steps 4 through 6: This part gets tedious quickly. I gave up on it about half way through the dozen or so items I’ve added.

With all of that in mind, how can it be made better?

The quick answer is that it needs less clicks. The longer answer is that it could benefit from those clicks feeling like a single “subscribe or cancel” process.

Here’s my quick and dirty attempt:

The “Add Subscription” box is temporarily replaced with a box to set a few feed options:

• Place in folder is the same dropdown as in the “Manage feeds” area.
  Note: after creating this mockup, I realized you can also apply tags to full feeds. That should sit in there with folders.
• Mark articles as would remember your last choice. You would rarely, if ever, need to change it.
• Remove would remove the feed from your subscriptions and show the default view.
• Add places the feed in your subscriptions with the selected options.
• In this scenario inaction would be the same as clicking Add with the default (no folder, your last used article status) options.

With this flow, it’s possible to have a one click subscription. Click the bookmarklet, then close the window. If you need slightly more advanced options they’re easily accessible in a single place.

I think that’s an improvement.

...It’s hard to say though. At this point in an application’s life, you can’t trust paper. You really need to have something working within the functional app to get a genuine feel for it. Also, Reader appears simple, but there’s a lot going on there. Having neither worked on it, or used it for very long, there’s a high chance I’ve overlooked some important interactions.

Helpful Dialogs

I’ve recently started using the web based GTalk that’s available through Gmail. It’s pretty handy for quick little things. Occasionally I’ll even “pop-out” one of the chat boxes into it’s own window, for a longer conversation.

That’s when trouble starts…

I’m not accustom to having chat tied to a browser window or to leaving my email open all the time. As a result, I routinely load a new web page over the main Gmail page, Accidentally closing all the popped-out chat windows.

Gmail notifies me of this:

That’s sorta nice. Without it, I may have spent some time trying to figure out where my window went*. It’s only information though. Now that I know there’s been a mistake, I need a way to quickly act on it.

My only option is to say “OK”, close the window, re-load Gmail, then start the chat again. That’s incredibly frustrating. Especially when it’s possible to offer a cancelation option using Javascript’s onbeforeunload.

Blogger uses this event to displays the following dialog when you close a page with unsaved changes:

It’s a little wordy. That’s Firefox’s fault. To cut down on malicious usage, only the middle line is editable by the page creator. None the less, now I have the opportunity to fix a potential mistake.

Of course, there’s a chance it isn’t a mistake. That’s happened to me many times on Blogger (I wanted to discard the changes – closing the window is the easiest option). Yet it’s never bothered me thanks to one simple reason: The dialog is helpful more often than not.

^{* Multiple web browser windows that are dependent on each other? Who knew??}

Immersive Subtitles

The Russian movie Night Watch takes an unconventional approach to subtitles. Typically, the only effort put into their display is choosing a contrasting color. Then they’re plopped at the bottom center of the frame. In this film, the subtitles are designed to match each scene – taking into account the tone of what is said, who is speaking, and visual balance with the onscreen action.

It works surprisingly well.

I feel the need to see many subtitled movies twice, because I miss a good portion of the visual language as I read the written. Here they move together nearly in unison.

There is also a wonderfully strange effect on comprehension. The actors Russian voice melds seamlessly into my own reading of the words. ...There are even a few spots where I’m unsure if the spoken dialog was in English or Russian.

While you really need to see the entire movie to get the full effect, there are a few clips on YouTube that demonstrate it well:

This scene is the least subtle variation in the movie. To represent an ethereal voice, the director uses positioning, color, and an animation that interacts directly with what’s occurring onscreen. As a result, the voice maintains presence.

Things are more reserved here. Conservative positioning is interspersed within standard centered titles. There’s also a very slight bit of movement and fade. The words help to highlight who is speaking and to focus your attention within the given frame. The effect is almost comic book like.

I would love to see more films with designed subtitles. Especially when they have a strong visual component. If Amelie were re-released on DVD with nothing more than subtitle improvements, I’d buy it again without hesitation.

Tagging convention

Spaces are used to separate individual tags when adding tags in del.icio.us.

I currently have 12 tags with commas as the last character.

I’ve gone through and cleaned out comma’d tags twice before.

I can’t stop adding them…
It’s natural and habitual when making a list.

Sketching out a better web calendar

The problems I have with 30 Boxes are a direct result of their decision to go with a single Monthly view. This keeps things simple, but eliminates the common Weekly and Daily views. Traditionally these views are used to display more information than will fit in a Monthly setup. Without them that information is pushed into hover pop-ups.

Which begs the question: Can you have a simple, feature-rich single view while maintaining an appropriate level of information for a casual user?

There are two major concerns:

1. Having enough physical space to place the information in.
2. Maintaining the relative postion of events to each other and key points (the weekend).

In a web browser, traditional scrolling extends space vertically. This completely rules out the heavily horizontal Month View. It needs something more like a Day View, for multiple days.

These are generally segmented into hours. That work great for Today. It’s handy to have a detailed idea of when an event is happening in relation to now or to other events on that day. However, that’s not needed as much beyond Today; we can compress all of those empty hours down.

Following the same thinking, extra meta information (such as location and duration) for events outside of a week also lose relevancy. That meta data can be hidden behind a time-delayed tooltip.

Which gives us something like this:

In the sidebar area there is an analog clock. It’s more specific than the “Now” bar and is easy to process at a glance. Events are created in the excellent 30 Boxes fuzzy logic style, there are controls to filter the view as needed, and finally there are small Month views for the next few months. While the Month View lacks space, it greatly aids relation. At a glance we can tell how many days/weeks till something and what day it’s on without reading the name. Adding these views with color highlights for the days brings some of that functionality back. Mousing over a colored day would expose a time-delayed tooltip with the event information. Clicking on it would jump to that day.

While far from perfect (there are many interaction issues to work out), I like it. I can quickly see and comprehend the important stuff at a glance while getting a broader view with an easy flick of the mouse wheel.

Update: I received a comment via AIM about how the calendar was nice and all, but didn’t seem very accessible to a casual user. I agree. It’s partially due to the unfamiliarity and it’s mostly a result of the wireframe. There is no graphic design. Visually it needs to be softer and more welcoming. Which is relatively easy to accomplish. I think I’ll work something up for a later post.

The widgets are coming!

Yesterday, Wordpress and Typepad released updates that allow placing widgets (self contained bits of functionality) into the sidebars of blogs they create.

I’m excited.

As a whole, blog software has reached a point where posting is easy (with a few exceptions). Forms of expression outside the post continue to be difficult for most people – Usually involving pasting a small chunk of confusing code into a larger one. Hiding the code for the widget functionality and for placing it within a page is a huge step forward.

The initial sets of widgets are pretty standard. They mostly replicate existing Javascript based includes. I’m looking forward to seeing what else comes along and the unexpected ways in which people will use them.

Loveplum is a blog covering the many aspects of user experience. It is written by Jason Sutter.

More…

Search

• Site Feed
• Comments Feed
• Add to:
• Bloglines
• Google
• MyYahoo
• My AOL
• Technorati

Login