0

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

Popovers (See here)

Popover in Calendar

Inspector Panels (Right Sidebar)

Sidebar in Keynote

Toolbars

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

Toolbar in Affinity Designer

What criteria should one apply to choose between these patterns?

3

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: enter image description here

Atom Editor. This is a common pattern for IDEs enter image description here

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:

enter image description here

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)

enter image description here

  • Thanks! I've edited my question for clarity: I'm asking about how to choose a UI for editing the properties of selected items. So that would be distinct from choosing the current editing mode (via a toolbar) as in your final example. – Taylor Mar 30 at 18:50
  • Are you considering the toolbar as the right panel in your application? Sorry, a little bit confused. – Mike M Mar 30 at 19:00
  • I'll improve the screenshot: it's the top toolbar where it says "Rectangle" since the rectangle is selected. – Taylor Mar 30 at 22:11
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.