Help Overlay

Introduction

It would be nice to be able to see the relevant keyboard and touch gestures to the current application context. This is particularly important in light of the reduced use of menu bars. The view can be context specific and more complete than menu bars could be. We could show both keyboard and touch gestures.

Objectives

  • Discover shortcuts and gestures without having to hunt for them.
  • Intelligently display only items that make sense for available input methods.
  • Highlight actions that are relevant for the current view.
  • Keep the help page stable, to aid navigation on return visits.

Designers

Relevant Art

Gmail

gmail-shortcuts-overlay.png

Eclipse

eclipse-key-assist.png

GitHub

github_services_all.png

Discussion

I'm thinking we probably don't want this to appear for the application window in the Overview, above system modal dialogs, or in the lock screen / login screen.

We probably want this to be easily dismissable. "Feel" somewhat like a tooltip for the window. Which probably means we don't want it to be clickable like some kind of huge menu.

We probably want actions to be grouped logically. How should groups be sorted?

How should accels per group be sorted?

What keyboard shortcut would be used to bring this up? Win+"?" ?

  • What about just pressing and holding the Super key, like in Unity? The "?" key varies over keyboard layouts, and can be uncomfortable to reach with a hand. -- Fitoschido 2013-07-12 09:40:08

Tentative Design

Overlay help is activated using the F1 key?

Outstanding:

  • Show a link to the help pages? Where/how?
  • Mockups for search.
  • Can we only show touchpad gestures if there's a touchpad present?
  • What if there's a touchpad and a touchscreen? How do we display gesture information for both?
  • Search doesn't seem necessary when there aren't many shortcuts.

Notes on layout:

  • Shortcuts are laid out as groups, which are manually specified.
  • The order of groups are also manually specified, in order to reflect their importance and position within the UI. (Does this mean that some orderings will need to be reversed for RTL?)
  • Ideally, the window would be sized to fit the content. It would be great if the window could relayout if the screen orientation changes.

Paged Help

If there isn't room to show all shortcuts, they spill over on to multiple pages.

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/overlay-help/gedit.png

Show All Toggle

If an app has multiple views, only shortcuts for the current view are shown by default (including global shortcuts). Pressing the Show All button shows the shortcuts for other views.

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/overlay-help/clocks-some.png

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/overlay-help/clocks-all.png

Sections and Pages

More complex applications can have multiple sections, which correspond with views or modes. Each of these can have multiple pages. Shortcuts for the current application mode are shown by default, alongside global application shortcuts.

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/overlay-help/builder.png

System Overlay Help

Can be accessed while in the Activities Overview? Uses custom navigation, because it's special.

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/overlay-help/system.png

Comments

Alternative Proposal

Hi,

I am a bit worried about our current approach because of the following reasons:

  • The user has to remember the shortcut for getting to the shortcuts.
  • Ubuntu, GMail and the others tried this approach. They succeed at least in the manner that I know that they exist. However I never got to use them despite me actually caring for shortcuts because...
    • If you want to know a shortcut for an action you actually have to read some text in order to get that. Takes time. Hard to remember.
    • Usually you have to read all shortcuts and you can't remember them all anyway so you close it again.
    • The overlay feels "heavy" in terms that it blanks a big area, takes you into a whole other world and then throws you back again.
    • I usually get it accidentally because how should I know how to get it - and usually because its so big I *just* want it to *go away fast*. (Thats my experience.)

So I have been thinking about an alternative, here's an image of how I imagine this roughly:

https://raw.githubusercontent.com/coala-analyzer/coala-design/master/misc/shortcut_overlay.png

Advantages:

  • Such an "overlay" can be shown when pressing the ALT key which is a common thing many people do when they want to snow which shortcuts do what.
    • As we currently do it with mnemonics we can have a delay between pressing the alt key and the appearance of the overlay. For usual, fast, shortcuts the user won't be disturbed and if he's mindlessly pressing alt in order to search for a shortcut we have the answer for him right here.
    • ALT is the one shortcut that is a) shortest b) associated with the action (show the overlay) and can thus be memorized best.
  • It shows the shortcuts contextually right so the user visually identifies the shortcut with the button. This visual connection at least helps me memorizing this - I don't have to memorize what each shortcut does but I only have to memorize where it belongs, i.e. the most important part (what does it do?) is already in my mind because I know this button. This is also related to a memory technique where you associate things you want to memorize with a location or thing in a room you already know.
  • It has no text. Related to the previous point.
  • I'm not aware of the technical details below but it could probably be implemented generically, so programmer associates a keyboard combination or mnemonic with the button and gets the overlay for free.
  • The overlay is not as distractive as the one from current design. It feels lightweight. It doesn't throw you out of the context. You are not so much disturbed by it.
  • The overlay is contextually sensitive, i.e. shows only stuff that is relevant right now.
  • Basically this concept achieves the objectives without adding an additional complexity to the user. It is a natural evolution of how we highlight mnemonics when alt is pressed currently.

Disadvantages:

  • The user doesn't get the overview about the shortcuts that make contextually no sense right now for him. If he's interested in getting an overview over shortcuts this will not suit him. (But we have a shortcuts page in the help at least for some apps that fit this usecase.)
  • If actions are available via shortcuts only these won't be shown or the concept needs at least an extension. However usually all actions should be reachable via mouse.
  • This concept is rather feasible for apps but not really for the shell.
  • The mockup is a bit raw. Just to get the idea to you.

In order to compensate those disadvantages we could do the following things:

  • If the user wants an overview about all shortcuts I'd bring him to the help page. We carefully write them and they do exactly provide this information.
  • For global shortcuts there is a help page. When pressing F1 in activities view we can just open this one for the user.
  • We could introduce a shortcut to fire up the shortcuts help page for this particular application.
  • We could work on a nicer mockup :)

All that said this approach and the one proposed here are not mutually exclusive. I'd love it if any of you have feedback on this.

LasseSchuirmann

Another alternative proposal

Hi.

A few weeks ago I made a mockup of the shell shortcuts overlay. Alas I was not aware of the existence of this page. You can find the post here.

It's supposed to work like the Ubuntu overlay (hold Super until it appears, disappears when you let super go). With this proposal the applications overlay would be activated by holding Alt.

It's also supposed to greet the user on their first login, explaining the basic concepts of GNOME.

Please also see the text inside the image.

Also, the mockup matured over time. You can find several different versions there.

The source files are in the thread. Thanks.

JurajFiala

See Also

Design/OS/HelpOverlay (last edited 2015-10-12 16:53:19 by AllanDay)