Category: Computer Software

My password manager of choice is Agile Web Solutions’ 1Password, which holds all of my sensitive information like passwords, credit card numbers, banking data, etc. When you log into a website for the first time, 1Password can automatically grab the username and password and lets you add them to the application’s encrypted database via a little toolbar right inside the browser.

In case this automatic process fails, you can save the login credentials manually. And, for a while, I simply could not figure out how to use this feature…

The application’s documentation describes the manual-save function as follows:

Some websites perform some “tricks” that prevent 1Password from detecting that a login occurred, so the Autosave bar does not appear. When this happens, you can manually save the Login by selecting Save Login from the 1Password toolbar menu

Note how this explanation does not mention at what point in the login process you should select the Save Login command.

When using the auto-save feature, 1Password will bring up the corresponding toolbar after you have entered your credentials and hit the submit button. Based on that experience, I assumed that this order of actions also applied when saving logins manually. But when I tried this approach, 1Password told me that “[n]o logins [were] found on this page.”

So I tried choosing the Save Login command before entering any data, expecting to somehow “arm” 1Password for magically intercepting the login data — even though it had failed to do so while unsuccessfully attempting to auto-save those very credentials. While this did not bring up any error messages, the resulting database items were empty.

And of course they were empty. When you think about it for a moment, there is only one configuration in which 1Password can definitely harvest the login credentials from a webpage: that is when a) that login information has been entered into the login form on the page and b) the page containing the form is still being displayed in the browser.

Hence, the proper way to use this feature is to:

1. Enter the credentials
2. Select Save Login
3. Hit submit to log into the website

In hindsight, it is painfully obvious that this is the only process order that makes sense. Until my mind adapted the mental model it held for this process, however, I simply did not “see” this solution.

Because 1Password does such a wonderful, near-magical job of compiling data from websites under normal conditions, I was expecting it to always execute something complicated “under the hood.” Consequently, I also assumed that I needed to do something non-straight-forward, more-complex-than-usual when the application needed a little help for saving a specific site’s credentials.

Which goes to show that, sometimes, even perfectly good designs cannot prevent our mind from coming up with mental models that are plain wrong.

In this specific case, though, there is a way to prevent others from running into the same problem. Namely by extending the application’s help file to state “…you can manually save the Login by filling out the login form and, before clicking the Login button, selecting Save Login from the 1Password toolbar menu.”

Anand Kulkarni has developed an interesting and fun demo of the bubble cursor, a UI concept conceived by Tovi Grossman and Ravin Balakrishnan.

Standard mouse pointers usually have just a single-pixel “hot spot.” It is this single pixel’s position that determines which UI element receives the click when the user presses a mouse (or trackpad, etc.) button. Because of the hot spot’s tiny size, it requires precision to hit a specific target on screen, especially if the target is small, too.¹

Grossman and Balakrishnan address this problem by expanding the cursor’s “hot spot” to a circular “hot area.” The area’s size dynamically adapts to the cursor’s position in relation to nearby UI widgets so that, at any given time, exactly one widget is selected as the click target.

Grossman’s and Balakrishnan’s 2005 CHI paper (1.1MB PDF) explains the idea in detail and contains research which shows that the bubble cursor is consistently more effective than single-pixel and fixed-size area cursors.

Thanks to Anand’s JavaScript-based demo, you can try out the bubble cursor hands-on.

Unfortunately, though, you cannot disable or modify the area indicator around the cursor. It would be interesting to see whether changing the area indicator influences the feel of using the bubble cursor and, if so, in what way. I’d especially like to try out the demo without any visual feedback except highlighting of the current click target.

Found via Nat Torkington’s Four short links: 23 September 2010

Update 2010-10-05: Stuart Knightley has implemented the bubble cursor as a JavaScript bookmarklet that works with just about any webpage, so you can test this interaction concept in a real-life setting. As an extra feature not included in Kulkarni’s demo, this bookmarklet lets you toggle the display of the cursor’s click area.

Bill Waterson’s “Calvin and Hobbes” has been one of my favorite comic strips for years. Although I have quite a few of their wonderful books in my dead-tree library at home, in weak workday moments devoid of self-discipline, I sometimes check out the comic’s online version.

When I did so today, I noticed something odd: somewhat absentmindedly and occupied with other trains of thought, I repeatedly clicked on (what I assumed was) the “previous comic” navigation button.

Until, that is, I realized that, instead of moving backwards through older comic strips, I was actually going back and forth between only two of them. The reason? Bad UI design.²

When you point your web browser to the generic web link http://www.gocomics.com/calvinandhobbes, the website displays the most recent comic strip — you’re at the “end” of the publishing timeline. There are no more-recent comics than the one shown.

Consequently, the designer decided that not to display the navigation controls for moving “forward” along the comic’s timeline: the only available controls are for moving to the very first Calvin & Hobbes comic; for moving to the previous comic; and for bringing up a calendar widget.

As soon as you move to the previous comic, however, you also need controls for moving to the next strip, as well as for moving to the most-recently published one. The designer (correctly) placed these to the right of the calendar view to balance out the “first” and “previous” buttons.

Because the navigation buttons are right-aligned with the comic strip, though, the button for “next comic” ends up in the exact position that was occupied by the “previous comic” button before.

Unless you make up for this shift by moving the mouse pointer, you click on “next,” then “previous,” then “next” again, then “previous” again, and so forth.

Don’t hide. De-activate!

Just like in native software applications, unavailable UI widgets on web pages should be represented by grayed-out, un-clickable placeholders. That way, all controls remain in their original place at all times.

When implementing such a navigation widget, however, designers need to make sure that the whole group renders properly for all navigation states.

Here’s why that is important: the page navigation for Customer Reviews on the iTunes Store does use “de-activated” widgets for “previous” and “next” links. The ellipsis graphic is slightly narrower than the number buttons, though. As a result, when an ellipsis is displayed, the alignment of the buttons is slightly off. In case of two ellipses being shown, the “back” link slightly moves position, as well.