How to choose between a Popover, Inspector, or Toolbar to edit properties?

Question

macOS apps have the following patterns (and possibly others) for editing properties of selected items:

Popovers (See here)

Inspector Panels (Right Sidebar)

Toolbars

In the following example, the toolbar changes in response to what is selected.

What criteria should one apply to choose between these patterns?

Answer 1

It depends on the context, and the amount of functionality you need to complete a task.

Popovers

Apple declares in their Human Interface Guidelines:

Use a popover to expose a small amount of information or functionality. Because a popover disappears after the user interacts with it, limit the amount of functionality in the popover to a few related tasks.

When to use:

Popovers are useful when there's a single purpose (and few functions) for the selected object. I.e. a calendar's primary object is an Appointment, and you can directly edit the base properties of an appt.

For complex objects like graphic symbols, there's often many properties, so the default selection is often reserved for positioning and resizing.

Sidebars

There are common use patterns, depending on the position of the sidebar.

Left sidebars: often used for Navigation

Again referring to the Human Interface Guidelines:

Consider using a sidebar to let users interact with file-based data without exposing them to the file system. When it comes to the minutiae of file management, a sidebar abstracts files into app-specific elements and containers. For example, iTunes lets people navigate and manage media files like songs, podcasts, and movies using libraries and playlists, and without ever needing to interact with the file system.

A file browser example:

Atom Editor. This is a common pattern for IDEs

Right Sidebar: often called an Inspector panel

Inspector panels, or Property Sheets are used when you want to examine details, modify properties, but don't want to isolate or drilldown into a separate view.

It allows you to examine a potentially large amount of detailed information while retaining context of the whole.

An example is Omnifocus, the task management application:

Notice the left navigates me through my projects.

The Inspector panel allows me to examine the details of my task (due dates, notes, and status.

Since a task is one aspect of a larger object (the project), I would lose the ability to keep scanning and working through the list of tasks if I was sent to a new screen each time.

Toolbars

These are used in content creation, often in manipulating complex objects and graphical editing.

They are also an example of many icons being displayed without supporting text labels, often because of space.

Since these application are often used frequently and for long sessions, it is geared for experienced users.

Choosing a tool from the left toolbar:

In Adobe photoshop, users can either:

• Add an object to the document (shape, text, lines)
• Select or crop a region of the document
• Modify existing objects in the document (blur, dodge, etc)
• Navigate (zoom, pan)

Answer 2

You should use modals/popups if you are going to edit the parameters in a fast way (click, click, ok).

When it appears a sidebar or toolbar, you will use some functions for X time (not a short one like modals).

I think between a sidebar and toolbar, it depends of the number of functions and agility of each parameters AND the general content of the UI.

Toolbars are not as agile as sidebars, but these one takes more space.