A new migration: from mobile to desktop

On June 23rd, Jakob Nielsen’s Alertbox made a case against password masking. Password masking is that funny text field that turns what you type into stars or dots.

This is password masking in our very own iqcontent.com

Password masking in iqcontent.com

Nielsen dismissed the “looking over shoulders” threat, and explained how password masking undermines usability by breaking one of its basic principles: provide feedback and show the system’s status.

Security expert Bruce Schneier agreed with Nielsen on June 26th, just to retract on July 3rd. But the interesting part of Schneier’s retraction is not the retraction itself. It’s this paragraph in it:

A reader mentioned BlackBerry’s solution, which is to display each character briefly before masking it; that seems like an excellent compromise.

This solution is not exclusive to Blackberry: Nokia S60 phones and the iPhone also use this delayed masking technique. And I am sure it’s also present in other mobile platforms.

This is delayed password masking in my iPhone 3G.

Delayed password masking in iPhone 3G

Ta da! A mobile design pattern

You could say that delayed masking has become a design pattern for mobile devices. And so, Schneier’s retraction becomes the first mobile design pattern suggested for desktop interfaces I’ve ever seen.

El hambre agudiza el ingenio | Hunger sparks wit

Mobile is a challenging environment for interaction designers. Input in mobile is an expensive operation: typing is difficult in a 12-key numeric keypad. That’s why usability problems that may not be critical in desktop interfaces become much more acute in mobile environments. Password mistyping is a clear example: it is a problem for desktop users, but it is a terrible problem for mobile users.

This severity pushes mobile designers to come up with smarter and more efficient solutions, like delayed password masking. And those solutions that make mobile users’ lives easier, might also help desktop users.

Another mobile-necessity based innovation

One-click input clearance is another mobile trend. This is applied to search fields in mobile-optimised websites. Search queries are usually sticky (to save typing in query refinement). But this stickiness makes deleting the search query a cumbersome process:

  • First, you need to click on the search field, and hope the cursor will automatically appear at the end of your query.
  • Then you must press the delete key repeatedly.

In the case of my search for “Carroll” in Amazon, I will need to press the delete key 7 times.

Deleting a search query in my iPhone 3G

That’s eight actions required to delete my initial search query. It’s not too bad if you searched for something short like “Carroll”, but becomes a nightmare if you searched for ‘The Unbearable Lightness of Being’.

The input clearance solution

Google has come up with a neat solution to this problem, the one-click input clearance. In the Google mobile site I can easily delete my search queries by clicking once in the x icon at the end of the search box.

One-click input clearance in Google mobile website

Mobile provides lessons for desktop

Deleting input is not such big a deal in desktop computers: we can use the mouse to click, drag to select the text and hit the delete key once. That’s three actions (click, drag, delete) to erase input. Still, one action is better than three. One-click input clearance is another mobile design technique that could improve desktop user experience, just like the delayed masking technique.

I see more of this happening in the future: the migration from mobile to desktop and the subsequent improvement in desktop usability. Do you have more examples of this phenomenon? Share them!

7 Comments

  1. Hi Belen,
    While I do really like the password interaction patterns on handhelds, when using desktop apps I tend to type a full password while looking at my keyboard. Therefore the delayed letter masking might not prove very useful in helping me identify a mistyped password.

    The whole area of password masking seems to come down to the illusion of security. Even though it may lead to more input errors, it would take a brave site to remove the masking altogether. I’d imagine a user’s initial perception of a website (and brand) that doesn’t mask the password may be negatively affected.

  2. Hi Darragh,

    Thanks for the feedback. I totally agree with you: delayed password masking on desktop implemented exactly as on mobile might not make sense.

    What I think is interesting is the fact that a mobile design technique has been suggested as a possible alternative to an unsatisfactory interaction in desktop applications.

    I’d say the mobile way should be taken as a direction. The implementation details should be worked out considering user behaviour in desktop interfaces (in your example, we would need to think of those users who type looking at the keyboard, and not at the screen).

    Thanks for commenting!

    Belen

  3. I’d agree its defo something that we are likely to see more of in the future. Especially with the proliferation of laptops and netbooks, which are used in settings and contexts quite similar to handhelds, in contrast with desktops.

  4. Pingback: Carnival of the Mobilists #183 -> TamsIJungle

  5. Pingback: » Our first Carnival! Carnival of the Mobilists, that is. - iQ Blog

  6. I think that showing the actual password is a good idea, especially for operations where you are creating a new password (mainly registration forms). One thing that every developer should be aware of is that you can’t achieve this result using a simple input text for entering the password. The biggest problem in my opinion is the autocomplete feature of the browsers that records what you’ve typed into the fields. If the password is a normal text field everything you typed is stored. Can you imagine the security issues in computer shared environments?

    Would be nice if the actual password field can use an option to display the typed characters and in the same time avoid storing the information that you typed in.

  7. Another great feature implemented by apple in mobile safari is the scrolling to the top. By clicking on the status bar, the webpage automaticly scrolls to the top.
    That is a really usefull feature to implement in desktop browsers.

    I know that most keyboard for windows computers have a page up and page down button, but by using scrolling this way, a keyboard is not needed. Which is especially usefull for people who browse the web reall fast with only a mouse or trackpad..