More descriptive View selections

[bcaseyrls]

The dynamic tree is gaining more and more views, which is wonderful. As they accumulate, however, it's getting harder to distinguish which one is desired from the simple drop down selection. I've been merging all of them, and even so am starting to lose track of which view is which.

I think it would be helpful if we could come up with a UI/UX solution that provided the user with at least a little bit more information about the views. We may not be able to do it with a strict <select>...<option> combination. But there are CSS-based selection/drop-down variants out there. We could have something like the meta.title and then below it (perhaps in a smaller font and indented) a very brief description (shorter than current meta.description). There are probably better ideas.

We might also want to think about organizing the view options a bit. They are currently sorted alphabetically, which is nice and consistent (and automatic). Perhaps we need one more meta field for "category" or something. The views could be divided into sections. I'm not sure what that would be, and the list isn't so long currently that I think this is urgent, but it's worth thinking about as we move forward.

[MichalVasut]

If you need multiline customizable and searchable select, there is great component for that: https://tom-select.js.org/ (no jquery dependency)

But is the select / dropdown what we need? Not sure if if the description would make it more usable 🤔. Well there is thing called "visual memory" - so possibly adding some icons could help in orientation - but that is for those who already seen that selection. As for newcommers - those icons should serve as metaphore, so for example as for my Printer friendly view, the printer icon is very suitable and everybody will immediatelly recognize what it is for. Also Fanchart view has easilly recognizable icon. But most of the views there are rather genealogy specific and it will be difficult to find suitable and recognizable icons 🤔.

[MichalVasut]

Okay, maybe even dropdown can be descriptive 😃 - check this https://squidfunk.github.io/mkdocs-material/ (drops down from searchbar at the top)

[harrislineage]

check this https://squidfunk.github.io/mkdocs-material/

That is quite beautiful... If we could incorporate a dropdown similar to this (with icons, Titles, and informative descriptions) I think it would go a long way to end-user adoption and understanding. Great find @MichalVasut!

[MichalVasut]

@harrislineage I think this could be done using TomSelect component I've mentioned above. (check examples there).

I just need better specification of what is expected and confirmation if the select is the right way or if there is more suitable for this. 🤔

On the other hand, there can be issue with select on mobiles / small screens.

In my vision, top panel will be reduced to minimum on mobile and search will be triggered via button (with magnifying glass icon) in modal that will cover entire screen - with WT ID input at the top. Now to the point - view selection variants

• Select - imho not really suitable in this situation, because it will create second modal over the first one (this needs to be tested...), but user immediatelly see, what is selected
• selection implemented using styled radio buttons = also "single select", expanded by default (here is problem with visibility of selected view - when expanded, the view can be out of the screen 😔)

[MichalVasut]

There is also another option - using tiles with views - check example https://cz.pinterest.com/pin/81205599508143381

But that would require modal window...

[bcaseyrls]

I think we want something relatively simple and straight-forward, just a bit more informative than a simple title in a select/option list. The "squidfunk" one is, I think, overkill. It ends up being intrusive with information rather than helpful. We want to just help the user select a view. The tom-select example looks pretty good to me. It's still recognizably a selection action. We could have categories with titles and a very brief description. Or maybe just "long titles" as a separate meta field from the "title" we use in the headline.

[bcaseyrls]

@MichalVasut Mobile friendliness is definitely a concern (though I know some of the individual views are probably hard to use on a small mobile device).

I'm reconsidering the tile view. My first inclination was to stick with something super simple - just a drop-down selection with a little extra data. But maybe that's not the most user-friendly way to do this, since we have a variety of information to display.

Maybe it would be good to have the title and description from the view's meta data in the selection. We could start with a (scrolling) grid/tile view of all of them, and add a search/filter later if the number of views grows significantly. The WikiTree ID input could be at the top as you've suggested. A single modal that popped over the page would, I think, work for desktop and mobile. We could add an icon URL or something to the view meta data (perhaps an example in PNG form) to go with the title and description.

[MichalVasut]

@bcaseyrls In the reaction to your last reply, I've looked around and checked some apps and for example Google Maps has quite good example of both - list & grid layout.

First of all, it would be great to minimize everything except the view itself (main area of the view) to some slim header panel. There would be

• profile icon - logged or unlogged user, with dropdown with actions
• rest of the area (at mobile) or reasonable wide area (desktop) would be clickable and that would open modal (desktop) or fullscreen modal (mobile) with search

So user can fulky focus on the task he / she is doing (either work with the view or searching).

Great example of the top panel is e.g. in mentioned Google Maps, where it could be 2 lines (selected vie & wtID)

This image also represents great example of the possible list layout ("Your list" at the image). At the right hand side, there is three dot button that could be replaced with ℹ️ or ❓ icon to show full description.

Another possible way is Grid layout (example also from Google Maps).

But this is not really suitable for some descriptions, rather for only title & icon.

Unfortunately, I'm not able to say, when I'll be able to help with this - after 8+ hours in front of screen at work, I'm usually not able to continue with another work with computer...

[bcaseyrls]

I like the list view, common to mobile devices, with the icon, title, and subtitle/description. I think that could work well for the Tree App View selection. We could add an icon to the meta data, use the title for the main title of the list item, and the description below that. A control like that would, I think, communicate a lot of useful information to users trying to choose among different views.

I don't like the icon grid as much. It doesn't provide as much information. There's less room for the title and no description at all.

I think the https://tom-select.js.org/ module might do the trick. It's customizable with a "render" function, so we could build a div with the title and description (and an icon) for the elements in the selection, I think.

[MichalVasut]

Hello yes, list layout will be probably more suitable for this thing. Initially I've thought about completely moving search input and view selection to the modal, but I've realized that view is not filter, but rather different context, so it would be better separated. I've realized that (again) Google maps solves same issue with switching contexts (different map styles) and they use modal only for map selection too.

As for Tom Select, it's definitely great component, but I have issue with it on small screen that I've asked its Devs to answer on Github.

https://github.com/orchidjs/tom-select/issues/554