the keyboard The rise of shortcuts on the web The (r)evolution of
are accessible via key combinations
shortcuts for o!en 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 appear simple. 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/
“A [web app] is any application that uses a
web browser as a client. The application
can be as simple as [a guestbook] or as
complex as a word processor”
About.com
1On 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 YouTube2http://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
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 certain situations ...
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 in the moment 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 feel confident
1. Introduce gradually & gracefully.
Guided tour in Mailbox for iPhone
Easy trick in so!ware: display the command next to the corresponding button
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. Follow common patterns
Apply them in their contexte.g the spacebar starts/pauses audio or video
http://www.youtube.com/watch?v=YLhB8G1IXPI
3. Follow common patterns
Others can be applied more generallye.g Escape closes full-screen overlays or pop-ups
3. Follow common patterns
Typeform supports a variety of 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/
“Although the average was 66 days, 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 on every page
4. Repetition & practice
Dribbble.com
Progressive reduction:Show tips for beginners, hide for experts.
Keep training them.
With LayerVault, 1 variant of the same button is shown based on the user’s performance
4. Repetition & practice
http://layervault.tumblr.com/post/42361566927/progressive-reduction
Keep organized, only support shortcutsfor main tasks
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 so!ware, or web apps
Let’s make shortcuts easier to learn & use
and enhance your web app
questions? e-mail me at [email protected]