Revamp mobile UI

[tobyzerner]

I've been thinking about this for a while... Flarum's mobile UI can be a little annoying sometimes:

• You can only access the hamburger menu (and consequently search, notifications, log out, etc.) when you're on the homepage – not from any other page.
• Notifications, which are pretty important, are two taps away (hamburger > notifications). Would be better if they were one tap away.
• Whenever I want to filter by a certain tag, I instinctively press the hamburger button. Cannot unlearn. It's not obvious that you need to press the "All Discussions" title, especially when the hamburger button is right next to it.
• Search is hidden and cramped in the hamburger menu.

The solution? A tab bar.

Google have just come around to this way of thinking too. Really, hamburger menus suck as a primary means of navigation.

Here's what I propose:

(Don't mind the out-of-date discussion list styles! I based this mockup on some old mockup files I had lying around :P)

The four tabs are inspired by Facebook's mobile web interface:

• Home is the equivalent of clicking the forum title. It takes you to the forum's default route. We could potentially allow this icon to be replaced with a custom brand icon.
• Search shows a blank page with a search box, ready to show you suggestions as you type.
• Notifications shows the notifications page. (I also want to merge Flags into Notifications and add the ability to filter the notifications list by type so you can still see a list of just flags. But I'll make another issue for that later.)
• More shows a page with the forum title/logo, the user menu, and any other links in the header.

Additionally, discussion list sort-by and "mark all as read" would go into a dropdown menu.

The tab bar would be the same on every page, stuck to the top when scrolling down, with the current tab (if any) highlighted. When viewing a discussion, there would be an additional sticky bar below the tab bar with the reply button and the post index/count.

Technically speaking, we can probably make this work with (more or less) the same component structure/markup as the desktop UI uses currently:

Desktop	Mobile
Header	Tab bar
Forum logo	Home tab
Primary header links	(hidden)
Search box	Search tab, linking to a mobile-only page
Notifications dropdown	Notifications tab, linking to a mobile-only page
(hidden)	More tab, linking to a mobile-only page

Any thoughts?

[luceos]

What's the difference between the tripple dot next to all discussions and the menu in the tab? I find that confusing.

For the rest it looks really good.

[tobyzerner]

@luceos The hamburger menu tab is a global site menu - it shows a page with the forum title/logo, the user menu, and any other links found in the desktop header. The ellipsis next to all discussions is the controls that you usually see above the discussion list (sort by latest, mark all as read).

We could make it a cog icon instead of an ellipsis? That might make more sense.

[luceos]

We could make it a cog icon instead of an ellipsis

That would probably make more sense. Hamburger vs tripple dots don't differ that much in their meaning, at least not to me.

[dcsjapan]

Really, hamburger menus suck as a primary means of navigation.

I agree ... the only time that works is for a site with something that you want visitors to really focus on, such as artwork surrounded by a lot of white space.

I like this layout, with the same reservation that @luceos expressed about the ellipsis. It works when it appears next to a conversation title (in which case it has a different meaning altogether), but in this context I'm not sure what to expect when I click it. It would be better to avoid it, due to the fact that it's being used with another meaning in the desktop layout.

I'm not sure about the cog either ... to me, that says "settings" such as notification preferences and such. Again, this could be confusing; another type of icon might be better:

• sort doesn't cover "Mark all" but it does cover the rest of the controls.
• check-square-o is the reverse, and probably a poorer choice.
• th-list could mean generic index controls ... though it may be too similar to the hamburger.

There are probably some other possibilities worth considering. But please take this with a grain of salt; I don't use mobile apps enough to have good instincts where their design is concerned.

That said, I really like the tabs across the top. It's slick enough that people may stop asking if you'll ever do a Flarum mobile app. 😃

[franzliedke]

Well, "more" could also be the simple text.

I like it. But shouldn't this menu bar at the bottom, where it's easier to reach with the thumb?

[dcsjapan]

shouldn't this menu bar at the bottom, where it's easier to reach with the thumb?

See, that never occurred to me. But it's an interesting idea, not only for the ergonomics, but also because the non-alignment of the right- and leftmost tab icons with the icons below looks a bit awkward. Moving the tabs to the bottom would alleviate that as well.

Is it common to put tabs on the bottom in mobile apps? It does seem a sensible thing to do.

[moutonnoireu]

Is it common to put tabs on the bottom in mobile apps? It does seem a sensible thing to do.

That's a very insteresting thought, it always bothered me that people kept thinking that a mobile usage should be the same as a desktop usage. That's just wrong, you need to think in terms of usability before all. And, putting a menu at the top of the screen when the mobile's screen are being much and much bigger is keeping this wrong idea of "same thing across all devices", no, stop beating the dead horse, he's tired of it, now.

The funny thing is that 3 day ago, google started to encourage to put the menu in the bottom of the screen, where the thing should have been all that time, damn iOS guideline, eh.

So, i'm in favor of putting the menu at the bottom of the screen or making it swypable and it's the best case, both.

We could make it a cog icon instead of an ellipsis?

Cog = settings, can't do that.

[tobyzerner]

Ellipsis/cog button

OK, I think it's pretty clear that putting the sort/mark as read controls under a menu isn't going to work. How about this alternative:

Tab bar at the bottom

In an ideal world, absolutely!

Unfortunately we don't live in an ideal world, but rather a world where Safari on iOS reveals its toolbar when you tap on the bottom of the viewport. A second tap is required to interact with an element on the page.

There is no workaround for this, so we simply can't have the tab bar on the bottom – it must stay on the top. Presumably this is the reason why Facebook have their tab bar on the top of the mobile web app too, because on their mobile native app, the tabs are moved to the bottom.

[dcsjapan]

How about this alternative:

That looks very nice! Making the All Discussions button bigger seems like a good idea.

That button will use the tag color when a tag is selected, right? How about coloring the New Discussion icon in Flarum orange, to match the appearance of the button in the desktop layout?

[meetdilip]

Can I ask for a wider " Start Discussion " button in mobile UI ? Something like in screen shot below

[luceos]

The mark all read link is very risky. What if you tap on it by accident? I'm not too sure about having them right under the all discussions. Fat fingers and links 😁

[franzliedke]

For future reference: we need to revisit the discoverability of the sorting dropdown, once this is implemented (as explained by Toby in flarum/lang-english#94 (comment)).