Page MenuHomePhabricator

Consider design for the mode switcher
Closed, ResolvedPublic

Description

Preamble

Each ZObject key (node) has an inline "mode switcher", to allow the key representation to be changed, which is a necessary but relatively rare use case. Currently we use a drop-down with four options. Sometimes, if the key has content, two of these are disabled.

Pros:

  • This uses little space
  • Options are visibly mutually intelligible

Cons:

  • No opportunity for explanation of what these are for and why
  • Not clear why you can or can't do certain actions.
  • No "undo" option if you've done something and now decide you don't want to.

We should improve this area.

Design proposal

Swap the mode switcher in favor of a limited type selector. Here's are some examples in which an editor wants to edit a key that needs to be of type string. They can select type string (for mode literal), select type function (for mode function call that returns a string), or type reference (for mode reference that reference an existing string object). There's also type argument for the objects that require it. Every selection will dynamically change the presented UI, eg. for type string we will display an input filed, for type function we will display a function lookup.

Edit key of type string

IMG_0112.jpg (984×2 px, 706 KB)

Change key from type string to type reference

IMG_0113.jpg (1×2 px, 770 KB)

Change key from type string to type function

IMG_0114.jpg (933×2 px, 774 KB)

Other examples can be found under the "Edit mode" section of this Figma file.


Some other ideas

If we believe that the type selector (aka mode switcher) needs more explanations, we could leverage the dropdown menu real estate to give additional information on the different types (final copy to be defined).

Open type selector(1).jpg (1×750 px, 270 KB)

Event Timeline

Jdforrester-WMF changed the task status from Open to Stalled.Jun 2 2021, 4:56 PM

Stalled on our wider Design strategy work.

AAlhazwani-WMF changed the task status from In Progress to Stalled.Feb 10 2023, 5:13 PM

@AAlhazwani-WMF Should we add this improvement (descriptions under the mode switcher options) as a child task?
I see this epic is stalled, is there anything else needed for this to be finished and closed?

@gengh we can keep that idea if we encounter issues/confusion during testing. i'll move this task to the QA / Ready to close.

DVrandecic subscribed.

Indeed, let's make new tasks if needed. This design is accepted.