IntelliJ IDEA series (IV) interaction design
January 7th, 2011Caution: this post contains philosophical content!
(at least some readers call it so when I reflect on what makes software great)
Please note that this is for Groovy and Grails development on Mac OS X with Swiss-german keyboard layout, so the keybindings may differ on your machine. (For Windows, you most often can replace Cmd with Ctrl)
Let’s start with a simple example.
Cmd Shift A
pops up a simple text field (and one checkbox) where you can select from all available actions in case you have forgotten the shortcut or its place in the menu tree. It appears like the picture below if you e.g. look for the dependency analysis features by entering “Dep“
- First of all, this feature is immensely useful for itself. Especially, it is much quicker than scanning through the menus or reading through the help pages. Apple, Microsoft, could you please steal the idea for your software products?
- Second, note how slick the search “dialog” is. You hardly recognize it as a dialog at all. Many other software products pester their users with ridiculously overloaden search dialogs. JetBrains learned from Google’s success: one entry field is enough.
Providing many options to the user is actually the easy way. Taking the hard decisions of what not to show is the true mastery of interaction design. - Finally, the way that you narrow down the options is consistent throughout the whole application. Here is another example: use
Cmd , (comma)
to open the setting dialog. Now let’s assume that you want to enable the (very useful) feature to highlight all usages of the symbol that contains the text cursor (also known as “caret”). There are so many possible settings. How do I find the respective checkbox? Just start typing in the search field and the settings view narrows down the options and highlights the candidates.
Try entering “highl” and you will see in the Editor section the checkbox “Highlight usages of element at caret“.
The consistent availability of interaction concepts is key to a usability.
Here are some more of those consistent features. When used in differenct contexts, they may technically do totally different things but still serving a very similar user goal.
F2 (Shift F2 for backwards)
jumps to the next error but also to the next inspection warning, i.e. the next point that requires your attention.
F3 (Shift F3 for backwards)
jumps to the next Find target (when you called the in-file finder with Cmd F) but also to the next usage of a symbol (when you used the “find all usages of symbol under caret” feature with Cmd Shift F7).
F4
from many different tools opens the selection in the editor and gives it the focus
F5
copy of classes or files, even Shift F5 for the “clone” refactoring.
F6
move pretty much any OO construct anywhere. Shift F6 for the “rename” refactoring.
The point is that these actions are technically quite different in the different contexts but serve a similar purpose and so using the same shortcut is a consistent choice – easy to explain, easy to remember.
So much for today. It was a bit more contemplative than usual. However, I hope I could inspire you to recognize more of the interaction design of the applications that you use – and maybe even to pay more attention to the interaction design of the applications you build.
The next post will again be about hands-on tips.
Dierk Koenig
@mittie

Posted by Dierk

