Revealing Keyboard Shortcuts

30 Nov 2006 - 11:00am
7 years ago
6 replies
871 reads
Mark Richman
2006

I am building a desktop application -- which may also find its way
to the web. A few months ago, for a different project, I researched
accessibility literature because there was a clear need for keyboard
shortcuts in some parts of the interface. In the literature, I didn't
find any ideas or consensus that gave me an 'A-ha' moment.

I'd like to make keyboard shortcuts very clear in the current
project. The only commonly-used method of which I'm aware is to
underline the shortcut character within the command name. While this
seems to work fine for menus which are at the periphery of a page, I
don't like underlining letters on prominent buttons, fearing they may
ultimately be an attention hog, and also might confound the viewer
into thinking they are hyperlinks.

So, what am I going to do? My current idea is to take pains to name
buttons with distinct first letters -- although that is certainly not
a universal solution -- and also to include any button's keyboard
shortcut within a hover help for that item.

Has anyone tried another means? How did it work out?

Thanks for all your past help and ideas,

Mark Richman

Comments

30 Nov 2006 - 2:35pm
carl myhill
2006

Why not put them on the tooltip?

On 30/11/06, Mark Richman <markjrichman at gmail.com> wrote:
>
> I am building a desktop application -- which may also find its way
> to the web. A few months ago, for a different project, I researched
> accessibility literature because there was a clear need for keyboard
> shortcuts in some parts of the interface. In the literature, I didn't
> find any ideas or consensus that gave me an 'A-ha' moment.
>
> I'd like to make keyboard shortcuts very clear in the current
> project. The only commonly-used method of which I'm aware is to
> underline the shortcut character within the command name. While this
> seems to work fine for menus which are at the periphery of a page, I
> don't like underlining letters on prominent buttons, fearing they may
> ultimately be an attention hog, and also might confound the viewer
> into thinking they are hyperlinks.
>
> So, what am I going to do? My current idea is to take pains to name
> buttons with distinct first letters -- although that is certainly not
> a universal solution -- and also to include any button's keyboard
> shortcut within a hover help for that item.
>
> Has anyone tried another means? How did it work out?
>
> Thanks for all your past help and ideas,
>
> Mark Richman
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

30 Nov 2006 - 2:41pm
carl myhill
2006

Oops sorry I was reading too quick, I see you have the tooltip covered.

I wouldnt have thought underlining individual characters would be too much
of a problem.

I've thought about this for my little websites. To make it obvious that
there is something going on I write the access keys next to the headings in
[], see http://www.impingtonswimmingclub.org.uk/ . Lots of people wonder
what that means, then they find out and learn something. Perhaps you could
do similar with shortcuts that can be switched on and off optionally (I
think office does that with their tooltips).

Carl

On 30/11/06, carl myhill <carl at litsl.com> wrote:
>
> Why not put them on the tooltip?
>
> On 30/11/06, Mark Richman <markjrichman at gmail.com> wrote:
> >
> > I am building a desktop application -- which may also find its way
> > to the web. A few months ago, for a different project, I researched
> > accessibility literature because there was a clear need for keyboard
> > shortcuts in some parts of the interface. In the literature, I didn't
> > find any ideas or consensus that gave me an 'A-ha' moment.
> >
> > I'd like to make keyboard shortcuts very clear in the current
> > project. The only commonly-used method of which I'm aware is to
> > underline the shortcut character within the command name. While this
> > seems to work fine for menus which are at the periphery of a page, I
> > don't like underlining letters on prominent buttons, fearing they may
> > ultimately be an attention hog, and also might confound the viewer
> > into thinking they are hyperlinks.
> >
> > So, what am I going to do? My current idea is to take pains to name
> > buttons with distinct first letters -- although that is certainly not
> > a universal solution -- and also to include any button's keyboard
> > shortcut within a hover help for that item.
> >
> > Has anyone tried another means? How did it work out?
> >
> > Thanks for all your past help and ideas,
> >
> > Mark Richman
> > ________________________________________________________________
> > Welcome to the Interaction Design Association (IxDA)!
> > To post to this list ....... discuss at ixda.org
> > List Guidelines ............ http://listguide.ixda.org/
> > List Help .................. http://listhelp.ixda.org/
> > (Un)Subscription Options ... http://subscription-options.ixda.org/
> > Announcements List ......... http://subscribe-announce.ixda.org/
> > Questions .................. lists at ixda.org
> > Home ....................... http://ixda.org/
> > Resource Library ........... http://resources.ixda.org
> >
>
>

30 Nov 2006 - 2:56pm
Lorne Trudeau
2006

I like the Google GMail method: a quick one liner in the footer of the
page:

"Shortcuts: o - open y - archive c - compose j - older k -
newer more >"

That way you can also include a link to further help and even indicate
whether the user should be using some sort of key combination (alt-k,
apple-c, alt-shift-y).

Lorne

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of
Mark Richman
Sent: Thursday, November 30, 2006 8:01 AM
To: discuss at lists.interactiondesigners.com
Subject: [IxDA Discuss] Revealing Keyboard Shortcuts

I am building a desktop application -- which may also find its way
to the web. A few months ago, for a different project, I researched
accessibility literature because there was a clear need for keyboard
shortcuts in some parts of the interface. In the literature, I didn't
find any ideas or consensus that gave me an 'A-ha' moment.

I'd like to make keyboard shortcuts very clear in the current
project. The only commonly-used method of which I'm aware is to
underline the shortcut character within the command name. While this
seems to work fine for menus which are at the periphery of a page, I
don't like underlining letters on prominent buttons, fearing they may
ultimately be an attention hog, and also might confound the viewer
into thinking they are hyperlinks.

So, what am I going to do? My current idea is to take pains to name
buttons with distinct first letters -- although that is certainly not
a universal solution -- and also to include any button's keyboard
shortcut within a hover help for that item.

Has anyone tried another means? How did it work out?

Thanks for all your past help and ideas,

Mark Richman
________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
List Guidelines ............ http://listguide.ixda.org/
List Help .................. http://listhelp.ixda.org/
(Un)Subscription Options ... http://subscription-options.ixda.org/
Announcements List ......... http://subscribe-announce.ixda.org/
Questions .................. lists at ixda.org
Home ....................... http://ixda.org/
Resource Library ........... http://resources.ixda.org

30 Nov 2006 - 4:43pm
Donna Maurer
2003

We've been working on something clever for a big (internal)
browser-based app. We use a particular shortcut key combination to
target discrete and visually defined parts of the page, then only show
underlining when that part of the page is targeted. Keeps the underlines
out of the way in the majority of cases and reduces visual clutter, but
reveals them as needed. The only trick is knowing the initial magic
shortcut key, but this is a heavily-used enterprise app and that part
will be included in training, tip sheets, help etc.

Will hover help work for you anyway? Depending how it is implemented
Ithink hover help is particular to the mouse, not the keyboard focus.
I'm, as far as possible, a keyboard user and reaching for the mouse to
find out the keyboard shortcut is not great. I'd only invest that effort
in something I use very frequently - otherwise I'd just tab to it...

Donna

Mark Richman wrote:
> I am building a desktop application -- which may also find its way
> to the web. A few months ago, for a different project, I researched
> accessibility literature because there was a clear need for keyboard
> shortcuts in some parts of the interface. In the literature, I didn't
> find any ideas or consensus that gave me an 'A-ha' moment.
>
> I'd like to make keyboard shortcuts very clear in the current
> project. The only commonly-used method of which I'm aware is to
> underline the shortcut character within the command name. While this
> seems to work fine for menus which are at the periphery of a page, I
> don't like underlining letters on prominent buttons, fearing they may
> ultimately be an attention hog, and also might confound the viewer
> into thinking they are hyperlinks.
>
> So, what am I going to do? My current idea is to take pains to name
> buttons with distinct first letters -- although that is certainly not
> a universal solution -- and also to include any button's keyboard
> shortcut within a hover help for that item.
>
> Has anyone tried another means? How did it work out?
>
> Thanks for all your past help and ideas,
>
> Mark Richman
> _____________________________
Donna Maurer
Maadmob Interaction Design
e: donna at maadmob.net
web: http://maadmob.net/maadmob_id/
book: http://rosenfeldmedia.com/books/cardsorting/

1 Dec 2006 - 12:07pm
Eugene Chen
2004

I think this is a very important question. Keyboard shortcuts can be very
powerful, yet there is a large majority of people that will never learn
them. Those that do, probably only learn 3 or 4 shorcuts per application.

To be more precise, keyboard use not only can be quicker than mouse, it can
enable different types of interaction: you can select with a mouse and then
act with the keys. You can enter information more precisely (5 taps instead
of a vague analog guess). It can be more ergonomic. It requires both less
hand and less eye movement than a mouse and thus it is easier to keep
attention focused on the task.

Ableton Live is a music program that allows the user to utilize both the
computer keyboard and a midi (piano) keyboard to execute commands. Their
solution is to press a KEY button on a toolbar, this puts the screen into a
mode for both reviewing and programming keymappings. All the buttons are
overlayed with a translucent box displaying the keyboard shortcut. At this
point, the overlay can be selected and the keymapping can actually be
changed. During this mode, pressing keys will reprogram the mapping rather
than using the mapping. However, mouse can still be used.

The KEY button itself is visible all the time as a discovery path.

On this page, search on Key Map Mode Switch to see
http://www.ableton.com/pages/tips/2004_04

Ableton Live is my favorite source of inspiration for new interfaces. They
turned every convention in music sw upsidedown by looking at what users
really needed and were successful at getting users to learn entirely new
conventions because they made perfect sense. It is a perfect example of
"activity-based" design. By changing the design, they enabled a new kind of
activity.

Eugene Chen | User Experience Research, Strategy and Design
mobile 415 336 1783 | fax 240 282 7452
web http://www.eugenechendesign.com | aim peastulip | skype eugene-chen

> ------------------------------
>
> Message: 12
> Date: Thu, 30 Nov 2006 11:00:30 -0500
> From: "Mark Richman" <markjrichman at gmail.com>
> Subject: [IxDA Discuss] Revealing Keyboard Shortcuts

> I'd like to make keyboard shortcuts very clear in the current
> project. The only commonly-used method of which I'm aware is to
> underline the shortcut character within the command name. While this
> seems to work fine for menus which are at the periphery of a page, I
> don't like underlining letters on prominent buttons, fearing they may
> ultimately be an attention hog, and also might confound the viewer
> into thinking they are hyperlinks.
>

4 Dec 2006 - 11:11am
Mark Richman
2006

Thanks to everyone for their suggestions.

Donna - great point about hover help not necessarily being available
to keyboard users.

Based on a suggestion from Esteban Barahona, I took a good look at
ITunes and saw that it featured a 'Controls' menu which listed its
shortcuts. It seems to me that if that is prominently placed, people
unfamiliar with ITunes may be curious to see what that menu is about,
and those familiar with ITunes may know what to find there. I think
this offers a good alternative to constant visibility of shortcuts, at
least on the desktop. I also plan to offer an option by which the user
can reveal shortcuts, and until I get a better idea, will be using the
old 'underline' method.

It seems to me that keyboard shortcuts are also very important to
users with poor eyesigh. Perhaps a 'hot key' convention (Alt+CTRL+'K'
on PCs)? could be adopted?

Mark Richman

> We've been working on something clever for a big (internal)
> browser-based app. We use a particular shortcut key combination to
> target discrete and visually defined parts of the page, then only show
> underlining when that part of the page is targeted. Keeps the underlines
> out of the way in the majority of cases and reduces visual clutter, but
> reveals them as needed. The only trick is knowing the initial magic
> shortcut key, but this is a heavily-used enterprise app and that part
> will be included in training, tip sheets, help etc.

> Will hover help work for you anyway? Depending how it is implemented
> Ithink hover help is particular to the mouse, not the keyboard focus.
> I'm, as far as possible, a keyboard user and reaching for the mouse to
> find out the keyboard shortcut is not great. I'd only invest that effort
> in something I use very frequently - otherwise I'd just tab to it...

Syndicate content Get the feed