Your SlideShare is downloading. ×
The (R)evolution of the Keyboard – The Rise of Shortcuts on the Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

The (R)evolution of the Keyboard – The Rise of Shortcuts on the Web

32,446
views

Published on

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 …

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

Published in: Design, Technology

7 Comments
88 Likes
Statistics
Notes
No Downloads
Views
Total Views
32,446
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
117
Comments
7
Likes
88
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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