4

I'm working on a toolbar containing objects that can be dragged into documents. You can also click on these objects to add them to the document. Some of these objects have restrictions and can be added just once. We show tooltips while hovering the objects that show these restrictions. The app manages many documents and you can browse them while the toolbar stays fixed on the right side of the window.

Once you added the object with restrictions (Blue button), is it better to disable it in the toolbar and show a tooltip on hover (picture A) or to keep the object active and show a message when you try to use it again (picture B)?

Picture A

Picture B

3

See each button as a stack of buttons of the same kind. When you drag an instance from the stack, the next one appears. But when it is the last one there is no next button underneath.

enter image description here

enter image description here

2
  • That's a good approach. What could happen though is that you'll have different toolbars configurations for different documents. And since you will change documents often it might not be good. Do you know any app that uses the approach you suggested? – Andrea May 5 at 9:12
  • No exampls comes to mind currently, but if the toolbar doesn't show how it relates to each specific document, than that is a problem in general, not just for this approach. It is a matter of making the toolbar look less general, design it in a way that it looks connected to the document itself. You can also set the title in the toolbar specifically for the document like "Available buttons for document #1". – jazZRo May 5 at 11:22
1

I think the technique in your Picture A, disabling the button and showing a tooltip when you can place no more, looks fine. It is very similar to how the video game Super Mario Maker 2 handles this same problem.

Super Mario Maker 2’s UI for parts with limits

Super Mario Maker 2 is a game that lets you build custom levels by adding parts to your level from the library or from the toolbar. The toolbar is automatically populated with items you have recently placed. You can either select a part first, then tap the level to place it, or drag a part from the toolbar to the level.

Most parts can be added without limit, but some have a limit. For example, only one Checkpoint Flag may be placed. Here’s what it looks like when you select the Checkpoint Flag from the library of parts:

1 – Super Mario Maker 2 – select Checkpoint Flag in library

After confirming your selection, the Checkpoint Flag is selected in the toolbar (at the top right), ready to be placed:

2 – Super Mario Maker 2 – Checkpoint Flag selected at the right side of the toolbar at the top

After tapping the level to place the Checkpoint Flag, that part gets added to the right side of the toolbar, as it is the most recently used item. Also, since you have placed the maximum number of that part allowed, the square for that part turns gray to show it can’t be placed again:

3 – Super Mario Maker 2 – after placing a Checkpoint Flag in the level

Tapping on the screen to place another Checkpoint Flag or trying to drag a copy of that part from the toolbar does nothing but play a wood clunk sound effect.

If you open the library again, the Checkpoint Flag is grayed out there too. If you select it, the tooltip now includes “Part limit reached” in addition to the part name:

4 – Super Mario Maker 2 – Checkpoint Flag in the library after it has been placed

I found Super Mario Maker 2’s UI pretty clear when I built levels in it. However, the game assumes input with either an analog controller or a 6-inch touch screen. A UI for a desktop computer that requires a mouse may require some changes.

Still, for your specific design, I don’t see any flaws in your Picture A. It seems a fine way to communicate why you can’t place any more of a part and which part it is you have run out of.

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.