zotonic / zotonic

Zotonic - The Erlang Web Framework & CMS
http://zotonic.com/
Apache License 2.0
810 stars 206 forks source link

It is hard to deal with long select menu's and lists of page connections in the admin #1686

Open mmzeeman opened 7 years ago

mmzeeman commented 7 years ago

When you have a large number of content groups or users the standard menu's and page connections panels can become very crowded.

What is a good solution for this?

I saw a nice solution for long select boxes: http://silviomoreto.github.io/bootstrap-select/

Long lists of page connections should probably be displayed on a separate page and be abbreviated inside the edit page of a resource.

ArthurClemens commented 7 years ago

I would use a separate scrollable side panel, or a dialog with the options.

mworrell commented 7 years ago

That select box is nice, could be useful for category selection as well.

I agree about the scrollable panel for the connections.

The drop downs in the dialogs could indeed be filtered using this plugin.

mmzeeman commented 7 years ago

Select boxes work best when you can choose between 7 and 15 values. Below 7, radio buttons are better. Below 7 users miss the overview because you have to click to see all possible values. Usually they can be displayed as radio buttons on one line. Too many values, and you also miss overview. For that the filtering select box idea in the bootstrap-select package looks nice to me.

I usually also try to avoid inline scrolling areas because they usually suffer from a number of usability issues. You miss overview of the content, it can suffer from scroll hijacking, on osx an ios the scrollbar is not displayed by default so you have no idea it can scroll. Usually a design with does truncation together with a filtering is better. This is what is usually done on e-commerce sites too.

screenshot from 2017-05-10 09-54-36

screenshot from 2017-05-10 09-56-53