kevincrepin
commented
1 year ago Thanks for the thoughts @BeccaMelhuish !
-
This could be solved by having the filter as sticky, either to the top or to the bottom of the page. Or we can have a mobile specific functionality. I made an example here: https://www.figma.com/proto/eHBSunqUv10fMcWmiEEXiv/Website?page-id=0%3A2160&type=design&node-id=3813-13086&viewport=-20156%2C-8221%2C1&t=JQiXI3rYHK6Q3Xvw-1&scaling=scale-down&starting-point-node-id=3813%3A13086&show-proto-sidebar=1&mode=design
-
The border comes out a bit too faint, I agree. But to be fair there should also be an arrow and when expanded it doesn't look how it was designed (https://www.figma.com/file/eHBSunqUv10fMcWmiEEXiv/Website?type=design&node-id=3123%3A17862&mode=design&t=otuzEs50XY7fxihq-1).
Still the issue would still remain that user might forget the subnavigation is there. Made one example of how it could work with bottom fixed submenu navigation: https://www.figma.com/proto/eHBSunqUv10fMcWmiEEXiv/Website?page-id=3813%3A13690&type=design&node-id=3813-13691&viewport=839%2C128%2C1&t=B7qAk0YZzLFHXoNC-1&scaling=min-zoom&starting-point-node-id=3813%3A13691&show-proto-sidebar=1&mode=design (This could also work similarly for the filter btw)
Horizontal tabs don't give any certainty about visibility, because the label of the first tab might be so long the second tab falls off screen.
MeelikaH
BeccaMelhuish
Connected to this issue, I've noticed some issues (in my opinion) with the way that tabs on our website function on mobile, and am wondering if we can revisit and explore some other ways of doing it? (We could also try user testing a few people using these tabs on mobile, if unsure, to see how they perceive/use them).
Currently we have two types of tab functionality on mobile:
1. Like on the News page and Projects page:
My issue with these ones, is that the filters are at the top, but once you've scrolled all the way down to the bottom of the content for that tab, there is no way to switch to a different tab (by which point users have probably either forgotten there were other tabs, or can't be bothered to scroll all the way up again.
2. Like on the Projects sub-pages, e.g. DDA:
My issue with the top one, is that the outline of the tab is very pale, so just looks like a heading. I don't think many users would be aware they're in a "tabs" set-up when on that section.
My issue with the two at the bottom is that again it doesn't feel clear to me they are tabs. They look like either buttons to another page, or headings where we forgot to add content, as they're very similar in appearance to the heading just below it.
For the Platform page, the current design is to have the tabs work in the same way as they do on the News page (1, above), but I feel like as this is such an important part of the page, we want it to work really smoothly and clearly, and not have an content "hidden" under tabs that people don't notice, or get frustrated having to scroll up and down and up and down again, to see all the features.
We took inspiration for the tabs on the features page from the lovely way Miro does it on desktop (see here), but I see that when you view the page on mobile, they have a totally different layout (indeed different content altogether). I'm wondering if we need to do the same.
I'm aware there are some other ways of doing tabs on mobile, that involve the tabs being scrollable horizontally off the screen, and then having a vertical scroll bar for the tabbed content to keep the tabs always visible, but I don't know if that's what we want.