Contextual UI

A contextual UI is any kind of UI that becomes visible only when relevant, and adapts to the context.

Dropbox Paper (selecting a picture):

Hovering buttons can be visually pleasant. Easily discoverable. They appear right where we need them.

Google Docs: Contextual menu

Menus that appear on Left-click are reserved for long list of actions (including complex and rarely used ones), much like the application menu. Right-click should be avoided, since it becomes hard to discover. It can easily block interaction (hijacks the click).

Pros

  • Good discoverability.
    When done well, the relevant actions appear at the right time and place, and you know instantly what is available. When done poorly, it can be hard to find what triggers the apparition of actions. "Am I not selecting the right thing? Should I hover this? Is it even possible, somehow, to do that?"

  • Good context.
    Actions are close from the thing they act on. And their meaning is supported by the context they carry, which helps to have an understandable UI. For example, a hovering menu appearing over a selection will most likely act on what is selected.

  • Good coverage. For most common actions. The difficulty is to know when a given action should be offered, especially for complex and rarely taken actions. Example: "Search and replace in Project".

  • Limited visual clutter.
    If done well it can help reduce the user distraction.

  • Easy to remember. Since most of the time, you only need partial memory of "where to find the action". It can be logically, or visually easy to remember what to do to make the action available again.

Cons

  • Still a bit slow to use. Needs to use the mouse, hover things, etc. But at least the UI is close from the thing being edited.

  • Still a bit of visual clutter,
    can have too much information. It distracts a lot and is not beginner friendly.

results matching ""

    No results matching ""