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 users perspective, theyre

Because we, as designers, dont 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 theyre shortcuts for functions that might be hidden on a deeper level in the interface

shortcuts are ubiquitous in software..

webapps as well but theyre 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 nd 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 uid & fast for regular visitors

Problems with shortcuts

Shortcutoverload The way in which theyre presented is overwhelming and complex

dierent 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 rst-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 dont 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//entry.asp?1786

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

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

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

Let the user perform the command to make them feelcondent 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 theyre 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 ll 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 users 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 eectively in a game like Street Fighter takes years of practice. The same applies for software, or web apps

So... ...

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