Mobile version institution page

[Grizzly127]

I developed responsive/flex design suggestions for the institution page in Figma:

Version 1:
the museum information is reduced and you can ask for more information on the button.
The information comes as an overlay card and the background gets pass through:

The filter options can be shown by the search and filter icon, it also comes as an overlay:

As a smaller, phone version it would look like this:

--> one question for the icons:
Now they are the same size like the object card icons, but a different size than the history or profile icon on the navigation bar. I like the bigger size better, but when it's close to the navigation bar, you can see that it is a different size. What do you think?

Version 2:
the museum information is not reduced:

when scrolling down the information could still reduce like this:

phone version:
here also the icons are smaller, just to compare how it would look like in this size.

@lozanaross

[lozanaross]

thanks @Grizzly127 - both options look good, but i think I prefer option 2 it's a bit simpler and we have an unfolding button only once (show more) instead of 2 times as in option 1.

In general in both options, i would say on mobile, the filters should span the whole screen, so don't leave the small gap that shows the underneath content. i think it will look cleaner and be a bit simpler for users.

Lastly, regarding icon sizes - how does it look if they are all the same bigger size?
On phone screen sizes, I am not sure if we should show the login icon and the history icon outside the hamburger menu. They could be integrated inside it with text labels. Also we have to consider that the kompakkt logo will be a bit longer in the case of semantic kompakkt.

Search icon (at least) and possibly also filter icon could technically also be at the top menu level, not underneath - because right now it's a bit confusing to me - are we searching only within the content of the museum or searching the whole repository?

Perhaps something to discuss with @HeyItsBATMAN and @ZetOE - are we going to offer search and filtering on the level of the institutional pages, or is the search always going to be site-wide.

[Grizzly127]

Thank you for your feedback @lozanaross

This is what it would look like using the same size of the icons:

I think right now we are using the filters only in the content of the institution,
filter options can also be integrated on the top bar, but for me it would look like then we are searching in the whole repository. But yes, maybe this should be discussed again.

here they are still below the top bar, but the profile and history icon is included in the hamburger menu and I also tried the semantic Kompakkt Logo

[lozanaross]

Thanks @Grizzly127 - the last two options both look very nice, so I think it depends on the search / filter functionality. @HeyItsBATMAN - what's your opinion, should search and filter be site-wide or limited to the institution when users are on an institutional page?

[HeyItsBATMAN]

While it necessitates changes on the server-side, I think context-based search (as in, search is dependent on the page you're currently viewing) would handle possible future use-cases.

I think it would be easy to indicate that one is only looking through the objects/collections of the specific institution using some text, and big institutional pages would otherwise maybe be difficult to navigate.

Having this search could also allow:

• searching through large user profiles, if users should ever get a "public" page like the institutional page
• searching through collections, if they are for some reason, very large

Also, if a user is searching for something, e.g. "Vase" on the page of an institution, and it returns no results, we could display a text like "No results matching your query for institution XYZ" with a button underneath "Search all of Kompakkt" to switch to the global search.

[lozanaross]

@HeyItsBATMAN OK, cool, then let's keep the search / filtering options specific to the institutional / collection page that the users are browsing through.

This means we'll use the second version of the mockups shown by @Grizzly127 above, i.e. this one.