1

Current situation I am currently working on a product where the users can modify text, image, logo and shape elements by clicking on them. On click, a small menu opens that allows the user to view property categories, and after clicking on a category, a similar little menu opens with the properties. (see image)

enter image description here

Problem i'm facing Before this, these properties would appear in a sidebar. It was changed by my predecessor because it was quite lengthy and complex to be completely embedded in a sidebar. However, the change was made without any testing, so the actual effect of the redesign is unclear.. Additionally, In many situations this menu is in the way of other elements that can be modified, and as such some clients have complained that the new panel is obstructive to the workflow.

What I'm looking for I am looking for best practices/alternatives for modify-able property menu structures outside of my own knowledge, and tools that i know. Because I have trouble finding the name of this UI pattern, I haven't been able to find any research/documentation and could really use outside input.

  • 1
    How can something be too long and complex for a sidebar but not too complex for a context menu? (that's probably the name you're looking for btw) – Big_Chair Jun 28 '18 at 9:39
  • I wonder if the contextual menu vs sidebar preference is not related to users habits with Windows vs Mac OS. Windows users have the habit to right-click and open a contextual menu on everything. I noticed that some applications ported from Mac to Windows don't offer this contextual menu (Adobe XD for example). I find it quite annoying personally to have to change my focus to another part of the screen every time I want to edit something. This doesn't mean one is better than the other. Do you know if your users are more likely to have Apple or Windows mental models? – celinelenoble Aug 27 '18 at 20:56
1

Try a Filtered List instead

The power of the old design was everything was visible instantly as the different objects were selected. Now when an object is selected I assume there is some sort of gear icon which must be discovered and clicked before users can see which options are available.

You might want to try showing the full list of categories and options attached to the selected object with a way to hide it by clicking the gear icon. This will be closer to what existing users are familiar with while still allowing them the option of turning it off.

full list

Just make sure that as a user types for the thing they are looking for the list automatically shrinks so they can easily access the thing they need.

filtered list

click here to try this Filtered List example

0

I couldn't also find one. But as per my point of view,

For ease of use - You can keep actions in the menu (appearing on click) that needs to be performed quickly and frequently based on the user preference and other options along with frequently operated can be in the sidebar.

For giving the user feel of control - On click menu actions can be made customised by users and Sidebar view can be on and off.

You can also refer Wix and Medium blog editors

0

You can use Material design pattern. Windows same size, with scroller and search. Should not be too robustive then.

https://i.stack.imgur.com/nYCzh.png
https://i.stack.imgur.com/UuBAX.png

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.