Flarum mobile UI suggestions

hrvoje_hr

Flarum on desktop is perfect, but on mobile is lacking in the field of user experience. I remember someone of the core developers lately mentioned the same, and that one of the goals for some future versions would be to fix that.

I feel that notifications and user icon should move from the hamburger menu to the main menu. Especially notifications shouldn't be hidden behind unnecessary tap. This is some concept I made with rearranged icons. Something like this would drastically improve user experience on mobile.

Front Page:

Tag view:

Darkle

hrvoje_hr It looks really good, the mobile view should be improved, definitely the logo without weird CSS tricks (which is how I do it nowadays) should be something basic.

I don't know exactly why the mobile view wanted to move so far away from the desktop, in this example there are quite a few things in common and it looks good.

010101

hrvoje_hr I like it. Should the drawer item selector (is that what it’s called?) look like a button? The “All Discussions.” And I think the discussion view filter (latest, oldest, etc.) should be a funnel/filter icon. https://fontawesome.com/icons/filter

What if the create post icon was over with the other two little buttons with the same button background. So three/four little buttons on the right. Post, Sort/filter, mark as read, and refresh... refresh has to fit over there too for those without auto refresh. I think 4 could fit over there... then on the left side is the all discussions or tag name with the follow tag icon if you use that.

It’s challenging to display everything and it still look good. A lot of sites take the easy way out and everything is in the hamburger menu. Except the logo and a log in button. Which looks nice, simple and clean. So it has its positives. But, then you’re going to the menu for everything. 😒

Edit: After posting the above I went to the home page on my phone... and you know... having to tap the hamburger menu isn’t the end of the world. If it was on all pages instead of that back arrow, then it’s always there. If you scroll way down... it’s still there. In other words, it’s not the end of the world to tap a hamburger, then tap one other thing. What I’m getting at is, everyone might also think about actually putting the filter or other options in the hamburger menu. Because, then you either have room for other things, or you have a more minimal/cleaner mobile UI. 🤷‍♂️ I know we’re trying to get things out of the hamburger menu it sounds like. But, you could also put others things in the hamburger. Maybe, the profile image comes out, but something else that is visible now actually moves to the menu?

[deleted]

hrvoje_hr Front Page:

WOW It is amazing PLEASE give Css Please

tolgaaaltas

It looks great but I prefer the search bar to always be visible on the screen.

Source

Dropdown navigation tool can be inside of the hamburger menu.

User24

tolgaaaltas love it! The hamburger menu can be moved a little left and place a search bar there? logo on all pages is lit 🔥

hrvoje_hr

010101 I think the discussion view filter (latest, oldest, etc.) should be a funnel/filter icon. https://fontawesome.com/icons/filter

Except it isn't filter, it's sorting menu.
https://fontawesome.com/icons/sort

It's already used in Discussion filter. But you got a point, icons for All Discussions field and sorting menu are reversed.

Something like this?

tolgaaaltas the issue with the search icon on Flarum is that barely anyone is using it in regular communities. It makes sense here on Discuss which is technical forum, but on my community no one is using it.

MikeJones

I would rather have the tags in the pop out draw from the hamburger menu

tolgaaaltas

hrvoje_hr I usually use the search function but maybe you're right. I didn't follow behaviors of users.

010101

hrvoje_hr Yes. I think this is the direction Flarum should go with the mobile UI.

Darkle

hrvoje_hr tolgaaaltas Maybe it depends on the community, I also think that the search function is very important, especially with the future Revamp of the search API, currently I use Google more to search for discussions than Flarum's own search engine, so I think that in the future the search function will become more important.

hrvoje_hr

Darkle I agree, but it's not something that regular user use every day. Maybe because it's not so good at the moment... I'm using Google too when need to search something. Usually it gives better results than Flarum.

Now when you've said that... has any of you ever used sorting option for discussions? Me personally never. It's fun to check once a year what are the most popular discussions, but maybe that can move into the hamburger menu. And create more space for search icon.

Darkle

hrvoje_hr Hardly ever, especially on mobile, where it's usually for a quick look at the latest.

I think we should also explore the UI that is becoming the "standard" because it is more comfortable for today's phones that are getting extremely long. For example in Discord, Twitter, Instagram is used and works well, in Instagram for example 2 fixed bars top and bottom, in Twitter fixed the bottom one and the top one appears back when scrolling up.... It works well and you have a lot of space to accommodate the functions.

For example here in the middle (search icon) could be the filter icon, in the @ the notifications, the drafts I would keep them at the top as they are not used that often...

Until the 24th I'm going to be pretty busy, but I'll try to make a solid concept in this direction.

Edit:
I know (flarum/core867) @010101 didn't really agree with the bottom bar but there really shouldn't be a big problem these apps I mentioned do it on iOS with the difference that they add a small margin for the black bar and that could be done in Flarum.

Ps I still don't understand the black bar on iOS though, I mean you'll forget you're using gestures if it's not there? I don't have that black bar and I don't forget the gestures! 🤣

010101

Darkle Ps I still don't understand the black bar on iOS though, I mean you'll forget you're using gestures if it's not there? I don't have that black bar and I don't forget the gestures!

I agree. Apple needs to remove it.

Bottom menus are fine. As long as some space is added at the bottom for the iOS black bar. But then on other devices you might wonder... why is there blank space here?

Or you try to detect iPhones and change the height just for those.

dev.to does it well.

hrvoje_hr

010101 010101 Darkle

Those are great looking UI's. I especially like dev.to, but with it other changes are needed. Notifications separation, something like:

Mentions
Replies
All others

To encourage quality discussions it's important for users to know when they are mentioned and when they are quoted/ replied. All other notifications are not that important and can be classified as they are now. But I feel we are going too deep with that suggestions and core developers will for sure recommend that something like that is better for extension.

askvortsov I had some thoughts in flarum/core#867 (comment), but that needs refinement.

This is by far the best analysis about mobile UI which I have read so far. Everything is on point.

hrvoje_hr

Yeah, personally I'm big fan of bottom menus. That would be huge change for Flarum, but for now none of the guys from the core team didn't even responded for this change which is fairly minimalistic and should be done relatively quick until some radical change in the future.

In the next few days I will try to create some concept of bottom menu like Discord one too.

askvortsov

hrvoje_hr for now none of the guys from the core team didn't even responded for this change

I've been following this, but mobile UI is a very difficult topic and I haven't had time to fully formulate my thoughts.

Personally, I don't like the proposal in the first post. Either:

The bar containing "all discussions" isn't stickied, in which case you need to scroll all the way up to switch pages
The bar is stickied, which dramatically increases the size of the top nav bar and cuts down on usable space. Also feels a bit unbalanced.

I do think that logo and search should be visible. For search UX I really like Discord's approach, but that's another topic. Getting logo in there is quite important, because otherwise branding is relatively limited.

One thing I'll note is that the dropdown you refer to as "filter" isn't always just for filtering; on the user page, it's used for switching between posts, discussions, mentions, setting, etc. Although maybe this system could be made less confusing.

Personally, I really like having a top bar and a bottom bar. The top bar would have display content (e.g. logo) and less commonly used buttons, and the bottom bar would have more frequently used buttons and actions. Question is what goes where. I had some thoughts in flarum/core867, but that needs refinement.

For iphones, aside from the black bar, Safari has its own navigation menu at the bottom that makes it a pain to develop a website's bottom nav bar (since clicking on the website's bar could trigger Safari's bar). This is generally solved by forcing safari's bar to always be open, such as in https://app.ft.com/stream/home

Darkle

010101 I just tested dev.to from Android with gestures and there is no such space, so it's a good example. It's easy to apply a specific CSS by detecting the browser (I don't know how hard it will be to detect the device itself) for example with Safari, maybe this is what dev.to does, it would be a matter of doing the same test on Chrome from iOS to see what happens.

askvortsov Personally, I really like having a top bar and a bottom bar. The top bar would have display content (e.g. logo) and less commonly used buttons, and the bottom bar would have more frequently used buttons and actions. Question is what goes where. I had some thoughts in flarum/core#867 (comment), but that needs refinement.

I really like that way, by leaving less frequent functions at the top, like the hamburger menu or the drafts (for example) like the Twitter app does, you could hide the top menu when scrolling and show it again when scrolling up, to have a better use of the screen for example when reading a discussion without losing functionality or branding.

010101

askvortsov For iphones, aside from the black bar, Safari has its own navigation menu at the bottom that makes it a pain to develop a website's bottom nav bar (since clicking on the website's bar could trigger Safari's bar). This is generally solved by forcing safari's bar to always be open, such as in https://app.ft.com/stream/home

I’d rather just have to tap twice (which is I think how it might work??) than be forced to have the Safari bar there at all times.

If the core devs implement this, I’ll be a tester with my iPhone. 🤓

JohnP

askvortsov Personally, I don't like the proposal in the first post. Either:

The bar containing "all discussions" isn't stickied, in which case you need to scroll all the way up to switch pages
The bar is stickied, which dramatically increases the size of the top nav bar and cuts down on usable space. Also feels a bit unbalanced.

Or it isn't sticky but appears on upward scroll - which I think is better than either of those other options.

010101

This is an even better UI to copy. Google News.