This presentation focuses on the trend (in product design and development) of utilisation of keyboard shortcuts in websites. The first part consists of an introduction of keyboard shortcuts that are available in sites like Tumblr, Soundcloud, Feed.ly and YouTube. Although sites can already be navigated by the use of the keyboard (the ones the browser already supports, e.g using 'space' to scroll down). Web applications take on a new approach in supporting main tasks via keyboard shortcuts. This enhances the user experience by making it more fluid and faster. However, there are 2 problems with keyboard mappings of many powerful web apps. on the one hand that there's a shortcuts overload (mappings are complex therefore hard to get into) The challenge for designers lies in making the user aware of the existence, and train the users (progressively) in adopting these shortcuts. The presentation explores the ways users can be trained in 5 steps: 1) Introduce gradually & gracefully 2) Place tips carefully 3) Follow common patterns 4) Repetition & practice 5) Keep it simple and small (KISS) -- Photography sources -- "Desire path and desire cycle path" by Kake Pugh under Creative Commons (2007) http://www.flickr.com/photos/kake_pugh/1307255998 "Underwood" by higginskurt under Creative Commons (2009) http://www.flickr.com/photos/higginskurt/3203504243 "Guided tour in Capitole" by Åsmund Bø under Creative Commons (2007) http://www.flickr.com/photos/aasmundbo/2814050387 "Marina Abu Dhabi UAE Traffic Sign" by Swissrock under Creative Commons (2010) http://www.flickr.com/photos/swissrunner/4956818726 "Rucker Bat Cave Entrance" by Chris Vreeland under Creative Commons (2005) http://www.flickr.com/photos/cvreeland/3453891090 "Autobahn 2" by Ralf Müller under Creative Commons (2013) http://www.flickr.com/photos/dmc59/9511839630 "Productivity Future Vision" by officevideos on YouTube (2011) http://www.youtube.com/watch?v=a6cNdhOKwi0

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

2. what are keyboard commands?

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

4. 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/

5. “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/

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

7. shortcuts are ubiquitous in software..

8. webapps as well
but they’re gaining popularity in

9. “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

10. For example...
...

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

12. 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

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

14. 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

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

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

17. Problems with shortcuts

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

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

20. Simplifying shortcuts
in foursteps

21. 1. Introducegradually&
gracefully.

22. 1. Introduce gradually & gracefully.
(Guided) tours

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

24. “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

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

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

27. ‘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

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

29. 2. Placetipscarefully.

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

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

32. 3. Followcommonpatterns.
Standardize.

33. 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

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

35. 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/

36. 4. Repetition&
practice

37. “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)

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

39. 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

40. 5. KeepItSimple&Small.
KISS.
BONUS

41. 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?

42. 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

43. So...
...

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