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

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

Upload: soda-studio

Post on 11-Aug-2014

32.370 views

Category:

Design


2 download

DESCRIPTION

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

TRANSCRIPT

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

the keyboardThe rise of shortcuts on the web

The (r)evolution of

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

what are keyboard commands?

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

are accessible via key combinations

shortcuts for o!en used functions which

From a user’s perspective, they’re

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

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/

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

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

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

Therefore

they’re shortcuts for functions that might be

hidden on a deeper level in the interface

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

shortcuts are ubiquitous in so!ware..

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

web apps as well

but they’re gaining popularity in

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

“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

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

For example...

...

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

1On Tumblr the user can switch between

blogs by pressing +

Convenient because: the command is also used in Windows and OSX

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

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

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

.. Which also works on YouTube2http://www.youtube.com/watch?v=pNafai5HB1E

Convenient because: the number keys are an analogy for the timeline

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

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

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

With Dropbox the user can copy-paste

by pressing + and +

Convenient because: this command is also used in Windows and OSX

4

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

Thus

Keyboard shortcuts can make the user

experience fluid & fast for regular visitors

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

Problems with shortcuts

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

Shortcut overload

The way in which they’re presented

is overwhelming and complex

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

different ‘key mappings’ of each application

Therefore users have to adept to the

Lack of standards

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

Simplifying shortcuts

in four steps

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

1. Introduce gradually & gracefully.

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

1. Introduce gradually & gracefully.

(Guided) tours

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

Introduce shortcuts (or gestures)at the first-time start-up

1. Introduce gradually & gracefully.

WeatherCube for iPhone

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

“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

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

Or introduce them in certain situations ...

1. Introduce gradually & gracefully.

Dismissing a playing YouTube-video in the iPhone app

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

... when they’re relevant.

1. Introduce gradually & gracefully.

Exiting the full-screen mode on YouTube.com

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

‘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

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

Let the user perform the command to make them feel confident

1. Introduce gradually & gracefully.

Guided tour in Mailbox for iPhone

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

2. Place tips carefully.

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

Easy trick in so!ware: display the command next to the corresponding button

2. Place tips carefully.

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

2. Place tips carefully.

Emphasize the main commands to the point that they’re being utilized.

Browsing through articles with TheNextWeb.com

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

3. Follow common patterns. Standardize.

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

3. Follow common patterns

Apply them in their contexte.g the spacebar starts/pauses audio or video

http://www.youtube.com/watch?v=YLhB8G1IXPI

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

3. Follow common patterns

Others can be applied more generallye.g Escape closes full-screen overlays or pop-ups

Facebook

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

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/

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

4. Repetition &practice

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

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

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

Repeat the most important available shortcuts on every page

4. Repetition & practice

Dribbble.com

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

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

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

5. Keep It Simple & Small.KISS.

BONUS

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

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?

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

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

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

So...

...

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

Let’s make shortcuts easier to learn & use

and enhance your web app

questions? e-mail me at [email protected]