the keyboard The rise of
shortcuts on the web The (r)evolution of

what are keyboard commands?

are accessible via key combinations
shortcuts for often used functions which From a user’s perspective, they’re

Because we, as designers, don’t
want all functions to be visible at all times, we hide a lot .. http://www.uxbooth.com/articles/a-simple-usable-book-review/

“Hiding is [a] great method
of making the complex appearsimple. For example, when using the Swiss Army Knife you will only really open one knife or tool at a time — the rest remain concealed inside.” http://www.usabilitypost.com/2010/02/07/the-laws-of-simplicity/

Therefore they’re shortcuts for functions
that might be hidden on a deeper level in the interface

shortcuts are ubiquitous in software..

webapps as well but they’re
gaining popularity in

“A [web app] is any
application that uses a webbrowser as a client. The application can be as simple as [a guestbook] or as complex as a word processor” About.com

For example...
...

1 On Tumblr the user
can switch between blogs by pressing + Convenient because: the command is also used in Windows and OSX

On Soundcloud the user can
jump to a part of a track by pressing to Convenient because: the number keys are an analogy for the waveform https://soundcloud.com/saux/only-for-today 2

.. Which also works on
YouTube2 http://www.youtube.com/watch?v=pNafai5HB1E Convenient because: the number keys are an analogy for the timeline

With Feed.ly the user can
jump to the next item by pressing Convenient because: the ‘J’ key is easy to find due to a bevel 3

With Dropbox the user can
copy-paste by pressing + and + Convenient because: this command is also used in Windows and OSX 4

Thus Keyboard shortcuts can make
the user experience fluid & fast for regular visitors

Problems with shortcuts

Shortcutoverload The way in which
they’re presented is overwhelming and complex

different ‘key mappings’ of each
application Therefore users have to adept to the Lackofstandards

Simplifying shortcuts
in foursteps

1. Introducegradually&
gracefully.

1. Introduce gradually & gracefully.
(Guided) tours

Introduce shortcuts (or gestures) at
the first-time start-up 1. Introduce gradually & gracefully. WeatherCube for iPhone

“Most people (sometimes over 90%)
skip over intro tours as quickly as possible and those that don’t rarely remember what they were supposed to learn.” ... So, keep it small, introduce only the necessary steps to get started 1. Introduce gradually & gracefully. Luke Wroblewski (2013), http://www.lukew.com/ff/entry.asp?1786

Or introduce them in certainsituations...
1. Introduce gradually & gracefully. Dismissing a playing YouTube-video in the iPhone app

... when they’re relevant. 1.
Introduce gradually & gracefully. Exiting the full-screen mode on YouTube.com

‘Just in time education’: “teach
inthemoment when specific information is actually useful.” 1. Introduce gradually & gracefully. Luke Wroblewski (2013), http://www.lukew.com/ff/entry.asp?1786

Let the user perform the
command to make them feelconfident 1. Introduce gradually & gracefully. Guided tour in Mailbox for iPhone

2. Placetipscarefully.

Easy trick in software: display
the command next to the correspondingbutton 2. Place tips carefully.

2. Place tips carefully. Emphasize
the main commands to the point that they’re being utilized. Browsing through articles with TheNextWeb.com

3. Followcommonpatterns.
Standardize.

3. Follow common patterns Apply
them in their context e.g the spacebar starts/pauses audio or video http://www.youtube.com/watch?v=YLhB8G1IXPI

3. Follow common patterns Others
can be applied moregenerally e.g Escape closes full-screen overlays or pop-ups Facebook

3. Follow common patterns Typeformsupports
a varietyof shortcuts. The arrow keys, Tab, Enter & custom keys* can all be used to navigate and fill out a form. * e.g ‘1’ to ‘5’, or ‘y’ and ‘n’ , https://www.typeform.com/

4. Repetition&
practice

“Although the average was 66days,
there was marked variation in how long habits took to form, anywhere from 18 days up to 254 days in the habits examined in this study” 4. Repetition & practice PsyBlog (2009)

Repeat the most important available
shortcuts oneverypage 4. Repetition & practice Dribbble.com

Progressivereduction: Show tips for beginners,
hide for experts. Keep training them. With LayerVault, 1 variant of the samebutton is shown based on the user’s performance 4. Repetition & practice http://layervault.tumblr.com/post/42361566927/progressive-reduction

5. KeepItSimple&Small.
KISS.
BONUS

Keep organized, only support shortcuts
for maintasks 5. Keep it simple & small On Twitter.com nearly every action or screen is available as shortcut. Are they overdoing it?

Multiple buttons per command are
much harder to memorize and increases room for failure 5. Keep it simple & small Using combinations effectively in a game like Street Fighter takes years of practice. The same applies for software, or web apps

So...
...

Let’s make shortcuts easier to
learn & use and enhance your web app questions? e-mail me at sjoerd@sodastudio.nl