TASK: Revisiting website tabs UX/UI on mobile? #486
Comments
|
Thanks for the thoughts @BeccaMelhuish !
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 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. |
|
1. Sticky - if we can make it work in a way that people can also close it when they're annoyed that it covers part of the text while yo scroll (on mobile, this to me is very annoying when this happens), then I'd support this idea :) 2. I think arrows could help here indeed. Maybe not visualise filters with an arrow? @BeccaMelhuish I've also made a suggestion to reduce news categories, just have news and case studies or inspiration stories, best practices etc. However we name it. This would maybe also make it easier for people to remember? Websites are not being analysed as journalistic channels where we can't call articles on various topics "news". I think it's not an issue. We don't produce massive amount of content to the news section on a weekly basis and search function addition should help people to find interesting content from pages and news, both. 3. Platform sadly, I could not see this page because Figma just keeps loading forever. I'll try again later and hope I can review. |
|
@kevincrepin thank you for the options and @MeelikaH for the input too!
|
|
Thank you @kevincrepin! I'll just focus on the Platform page ones right now then come back about the rest soon :) I think 3.1 and 3.2 work really nicely for platform, as like you say the content will be nice and short there. The only concern I have is about accessibility/readability with having the body text on some of the less pale colours, like this pink for example:
What do you think, is it an issue? Are there any paler shades of these colours that are allowable, or would it look inconsistent? (Might also make it feel a bit "lighter" generally, with all the coloured blocks it feels a bit heavy). Then I think we could see what @MeelikaH thinks of this solution when she's back tomorrow, and if she likes it too then approve that one for development :) |
|
I think maybe that one colour we shouldn't use and reuse the other ones. Don't want to introduce (even) more shades tbh, these used are already the lightest defined ones. |
|
@kevincrepin OK great yes, that makes sense! And I noticed in this example (also below) the text on these blocks is a bit darker than in 3.2 - maybe better? So if we avoid the darkest pink, and have the text a little darker for all of them? :)
|
|
Yep, let's do it so. Design is updated. |
|
@kevincrepin Thank you! Though I see the dark pink's still there - should we still swap it for a lighter one, or you think it's OK?
|
|
It's changed. But as I mentioned before, because this content doesn't even exist yet we shouldn't stare too blindly at which colours are used for which blocks, because we need to define those once we know the actual content. All these designs currently also exist in the "playground page" and only what ends up in the "Design" page should be considered "final". So when @MeelikaH checks this out and also agrees then I can move these updates to the final design. |
|
Noted, thanks @kevincrepin! Looks great. So @MeelikaH, when you're back and have a minute, this is the link to check for a potential solution for the Platform/Features tabs on mobile :) |
|
Hey @kevincrepin, just had a quick call with Meelika and she gives the thumbs up for this one too! Please transfer it over to the designs for the Platform page :) For the rest, we'll have a call with Oks when she's back from holiday to review the options together, then come back to you. |
|
Great! It's all available here now: https://www.figma.com/file/eHBSunqUv10fMcWmiEEXiv/Website?type=design&node-id=3733%3A14271&mode=design&t=HhO9PzqPqw3nshoK-1 And I also added the different colour options for the boxes. |
|
@kevincrepin perfect, thank you! |
|
@kevincrepin - Meelika, Oks and I will have a meeting on Tues 17th to discuss the tabs among other website things. One request before then if you have time - would it be possible to make the following prototypes so that they show the full page from top to bottom? So then we can see how the little pop-up menu interacts with the content, headings etc. on the page. At the moment it's a bit hard to visualise the idea. (And if possible to make the prototype show at what point the pop up menu appears and disappears that would be great, or also just with words here if quicker and easier - i.e. will it be there while scrolling the entire page, or only appearing while scrolling the tabbed section?) 1.2 Mobile: https://www.figma.com/proto/eHBSunqUv10fMcWmiEEXiv/Website?page-id=3813%3A13690&type=design&node-id=3872-15524&viewport=-2679%2C-1752%2C1&t=CkXsw6x08ukbFtv1-1&scaling=scale-down&starting-point-node-id=3872%3A15524&show-proto-sidebar=1&mode=design 4.2 Mobile (same top submenu comparable to filters): https://www.figma.com/proto/eHBSunqUv10fMcWmiEEXiv/Website?page-id=3813%3A13690&type=design&node-id=3872-16672&viewport=-2679%2C-1752%2C1&t=CkXsw6x08ukbFtv1-1&scaling=scale-down&starting-point-node-id=3872%3A16672&show-proto-sidebar=1&mode=design |
|
You can try them out here, both have the same behaviour: They will only show when you are within the right context and stick around for as long as you stay there. If you change to another filter or project "topic" then the focus will be brought to the top of the relevant section. |
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.
The text was updated successfully, but these errors were encountered: