«
»

Innovative — but hidden — Text Field Interaction

You might know this example. It works this way in Adobe Photoshop.

Drag to adjust numberic value
Mouseover the input box, hold down Cmd + drag left or right to increase / decrease. Hold down Cmd + Opt or Shift key and drag can change the value in decimal or 10 interval. This shortcut works in all dialog palettes.
screenshot

Copied from WebdesignWall’s “Photoshop secret shortcuts”

Very interesting interaction design here. Obviously, the fields here are not a web application, but it inspires me to think about raising the bar for web apps. So this is not just a text field. You can of course write text in it normally. Now, pressing Cmd key (or CTRL on Windows) makes it possible to slide through values. Furthemore it’s still possible to click the drop-down symbol next to the field. This will reveal a regular slider, that also can be dragged.

Well thought of, Adobe! My only complaint is poor discoverability. It took me 10 years of being a regular Photoshop user before finding out…

innovation, text, field, input, html, web2.0, photoshop, adobe, slider, discoverability, usability

Technorati Tags: , , , , , , , , , ,

This entry was posted by Jesper Rønn-Jensen on Tuesday, September 11th, 2007 at 13:57 (GMT-1) and is filed under Productivity, Usability, User Interface. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

2 Responses to “Innovative — but hidden — Text Field Interaction”

  1. Jacob Hage Says:
    September 13th, 2007 at 22:46 (GMT-1)

    Sweet!

    That’s the “funny” thing about Photoshop – it’s loaded with hidden shortcuts!

    Applying it to a web form is an interesting idea, however, I think the combination of an input field and a shortcut key requires an unrealistically skilled user (referring to your last observation) :)

    Perhaps a contextual menu shown only when the field has focus is a better solution? (Almost like those date input fields where you pick a date from a popup calendar).

    By the way, did you know that you can press Cmd+Enter in order to deselect the current text field? Normally you need to switch tool, when you are done using the text tool.

  2. Jesper Rønn-Jensen Says:
    September 14th, 2007 at 09:15 (GMT-1)

    Jacob. The hidden features is an interesting topic. Affordance could be much better — and I think it’s a thing Photoshop has in common with many web applications.

    And pressing Cmd+Enter (or windows CTRL+Enter) in a text field is a brilliant trick. I discovered it after 9½ years of Photoshop usage :)