TASK: Revisiting website tabs UX/UI on mobile?

[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.

[kevincrepin]

Thanks for the thoughts @BeccaMelhuish !

1. 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

2. 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 @kevincrepin

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.

[BeccaMelhuish]

@kevincrepin thank you for the options and @MeelikaH for the input too!

1. Sticky filter, I agree this could work, though am struggling to imagine how it would work in practice, with the static tab headings on the page, etc. (Would it be as well as static tabs, or instead of?). And at what point it would appear and disappear during scrolling. I also agree that it could be annoying by getting in the way, but if there was a way to get rid of it as Meelika suggested, then the user wouldn't have access to the rest of the content after having done so..

2. Here I can't get my head around what the arrow is meant to mean/do, or why it says "Introduction" at the top. I think Osama was confused when implementing too, hence doing it differently. What's the idea of how it is meant to work? (Though I feel if it's confusing to us then it may be to users too?)
   

3. This could work quite nicely (though again potential for it being annoying/fiddly for users). I think I prefer the simplicity of 1 though.

4. I'm thinking this bit could actually work quite nicely for the 'features' tabs - what do you think? With the first one expanded (e.g. 'Accessibility'), and then the rest closed with + signs underneath ('Security', 'Support', etc.)? Would keep it simple and quite easy to navigate. Just a bit boring to look at when all closed in a row, but using a variety of the pale shades like there is here could help?
   

[kevincrepin]

Did some reconsidering and have some different options.

1. Filtering
1.1 Desktop: https://www.figma.com/proto/eHBSunqUv10fMcWmiEEXiv/Website?page-id=3813%3A13690&type=design&node-id=3871-13421&viewport=-2679%2C-1752%2C1&t=CkXsw6x08ukbFtv1-1&scaling=scale-down&starting-point-node-id=3871%3A13421&show-proto-sidebar=1&mode=design

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

2. Tabs – Project Detail
2.1 Desktop (now visually styled like in platform page): https://www.figma.com/proto/eHBSunqUv10fMcWmiEEXiv/Website?page-id=3813%3A13690&type=design&node-id=3871-13561&viewport=-2679%2C-1752%2C1&t=CkXsw6x08ukbFtv1-1&scaling=scale-down&starting-point-node-id=3871%3A13561&show-proto-sidebar=1&mode=design

2.2 Mobile (content is now in colour coded boxes that can be expanded and minimised): https://www.figma.com/proto/eHBSunqUv10fMcWmiEEXiv/Website?page-id=3813%3A13690&type=design&node-id=3871-14409&viewport=-2679%2C-1752%2C1&t=CkXsw6x08ukbFtv1-1&scaling=scale-down&starting-point-node-id=3871%3A14409&show-proto-sidebar=1&mode=design

3. Tabs – Platform Page
3.1 Desktop (same as it was): https://www.figma.com/proto/eHBSunqUv10fMcWmiEEXiv/Website?page-id=3813%3A13690&type=design&node-id=3871-13461&viewport=-2679%2C-1752%2C1&t=CkXsw6x08ukbFtv1-1&scaling=scale-down&starting-point-node-id=3871%3A13461&show-proto-sidebar=1&mode=design

3.2 Mobile (also in colour coded boxes): https://www.figma.com/proto/eHBSunqUv10fMcWmiEEXiv/Website?page-id=3813%3A13690&type=design&node-id=3872-16221&viewport=-2679%2C-1752%2C1&t=CkXsw6x08ukbFtv1-1&scaling=scale-down&starting-point-node-id=3872%3A16221&show-proto-sidebar=1&mode=design

4. Tabs – Project detail
4.1 Desktop (Same as it is now): https://www.figma.com/proto/eHBSunqUv10fMcWmiEEXiv/Website?page-id=3813%3A13690&type=design&node-id=3872-17029&viewport=-2679%2C-1752%2C1&t=CkXsw6x08ukbFtv1-1&scaling=scale-down&starting-point-node-id=3872%3A17029&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

Personally I think the submenu option is the most straightforward for Project Detail, because having that content in these boxes also pushes all the other boxes down quite far. At least the submenu is always visible and at the top of the page.
And I think now the filter menu also is clearer on mobile, with the label clearly stating where you are and what the submenu offers.

For platform page I think it's ok to have the content in the boxes because it's a lot shorter anyway.

[BeccaMelhuish]

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 :)

[kevincrepin]

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.

[BeccaMelhuish]

@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? :)

[kevincrepin]

Yep, let's do it so. Design is updated.

[BeccaMelhuish]

@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?

[kevincrepin]

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.