Working on UI Consistency

Davis

The purpose of this thread is to discuss inconsistencies with the Flarum UI.

Example 1:

Why are icons shown in the blue boxes and the orange box but not in the red box?

If you have any more examples, please post them and I will add them.

luceos

jordanjay29 I thinnk what Davis meant is:

Why are there icons for all actions, except on the buttons to do them (add a like does not have an icon, although those that liked does).

Right?

jordanjay29

I'm not sure I understand what's inconsistent about your example. Flag is an uncommon action to take on a post (and really, putting it inside a menu helps prevent misclicks the result in annoying modals that have to be dismissed). Like and Reply are very common actions.

Davis

luceos Exactly. Why not have just a thumbs up icon with a tooltip that says 'like'?

jordanjay29

Davis Facebook's dominant market position and usage of the thumbs up makes that a worrying legal position to be in, IMHO. A different icon for like might work as you suggest.

antonjw

Inconsistency in usage of 'Discussions' Icon

Profile View

Discussion List View
Forum View

Not sure that the use of the 'hamburger' icon is a good one to represent discussions. The hamburger is well recognised now as a menu icon, and of course is already used in Flarum for that purpose, anyway.

Suggestion: Why not design a 'Discussion' icon based on the one in Flarum's logo? Seems to me that would do the job nicely.

Dominion

antonjw Why not design a 'Discussion' icon based on the one in Flarum's logo? Seems to me that would do the job nicely.

That's an interesting suggestion, though I'm wondering if we couldn't just use the same icon as "All Discussions". The meaning of "Discussions" in the profile isn't the same as the "All Discussions" link, but it's a close cognate.

antonjw - Get rid of the combined 'Back / Hamburger' button (I think getting rid of the Flarum back-button has been mentioned elsewhere). At least, drop the 'hamburger'.

It has been discussed elsewhere ... some people feel it might be a good idea to drop the < sign and back button functionality (which is redundant) and leave just the hamburger ... or the opposite of what you suggest.

In this location the hamburger is functioning not as a back button (that function is indicated by the < part) but as a button that opens the side panel. That's close to the standard meaning of the hamburger, since the menu generally appears as a slide-in panel ... but since the panel doesn't contain a menu in the desktop layout, I agree that it's a bit misleading. Perhaps we could use the same icon as "All Discussions" here as well?

antonjw

Possibly been mentioned elsewhere:

Inconsistency in usage of 'Hamburger' icon:

Mobiles - Functions as expected; opens the Flarum menu.
Tablets and Desktops - In discussion view, is merged with the '<' symbol and functions as a sort of back button (not expected)

A bit confusing, and unsure what the hamburger icon offers on desktop and tablet.

(+ above-mentioned use as 'Discussions' icon)

Suggestion (Desktop Layout):
- Get rid of the combined 'Back / Hamburger' button (I think getting rid of the Flarum back-button has been mentioned elsewhere). At least, drop the 'hamburger'.
- Make the 'Pin' button visible at all times (in Thread View), at top-left corner.

antonjw

Dominion In this location the hamburger is functioning not as a back button (that function is indicated by the < part) but as a button that opens the side panel.

Is it? I thought I had tested this reasonably well before posting... (I'm on iPad as I type this).

As I recall, hitting that button takes you back to the main forum view. Whereas hovering in that area (including next door, where the Pin button is), opens the Discussion Panel. But so does moving your mouse generally to the left of the screen, anywhere lower than that.

On iPad, there is of course no real concept of 'hover', so pressing the button works the same; it takes you back to the main forum view.

So I don't think the hamburger is doing anything menu-like at all, here? This is why I'd suggested making the Pin icon visible at all times... because I think that would communicate better that there's some action to take, which isn't related to the site menu or navigating back.

Dominion Perhaps we could use the same icon as "All Discussions" here as well?

That could work. That makes me picture another new icon... (more on that later :p)

Dominion

antonjw Well, in terms of function, you're absolutely correct ... clicking that button does get the results you'd expect from a back button. I was just pointing out that this function is indicated by the < mark ... I probably could have phrased it better.

The hamburger mark is there to indicate the response you get when you hover over the button: you get the panel with the discussion list, which sort of resembles the way menus work. Or at least, that's how I read what Toby must have intended by putting it there.

I wonder if it would be possible to have it display the hamburger only in mobile view, where it would correctly indicate there's a menu available ... and perhaps some other mark in place of the < ... How do you feel about the idea of replacing that with something more discussion like?

For myself, I'm leaning more and more toward the idea of leaving the Back button function to the browser.

Franz

Dominion For myself, I'm leaning more and more toward the idea of leaving the Back button function to the browser.

It's fun how that is almost always the conclusion when doing things that work against the way HTTP etc. were meant to work. (In this case, a single-page application trying to re-implement browser features.)

Dominion

Franz I probably need to learn more about how single-page apps work. Is there an important difference between Flarum's back button and the browser's?

antonjw

Other Issues with the Back Button
So the thing is... the 'Back Button' isn't actually a back button.

Its literal meaning is: 'from a Discussion, take me back to the Discussion List which I was previously viewing'
(and forums do usually carry this particular function; it's usually labelled "back to xyz forum").

Explanation
If you were viewing say, the Dev Tag, and then open a Discussion in it, then hit the 'Flarum Back button', you get the Dev Discussion List again. But then the Back button disappears; I can't use it to navigate back to my previously-viewed Tag or All discussions. I would need to use the browser back button to 'back' to that.

I conclude that the button does have a useful and actually typical navigational function, but that the usage of the 'Arrow' icon is causing unnecessary confusion with the browser back button.

Suggestion: Replace the 'Back Button' with the 'Tag' Icon (coloured to represent the Tag you were last viewing) - or the 'All Discussions' Icon (if that's where you were).

Alongside an always-visible 'Pin' icon, I feel that this would communicate better (e.g):
Go back to Dev, or Pin it in a side panel.

jordanjay29

As long as we have another topic for the back button concerns, let's keep this one to UI Inconsistencies to keep OP's topic from getting lost.

antonjw

jordanjay29 I blame whoever lumped the damned hamburger in with the back button ?