Tweaks to the post layout

Dominion

Yes, I decided that it wasn't really adding to the conversation. After all, it wouldn't really do for a moderator to ignore the Community Guidelines, now would it?

Your objections notwithstanding, I stand by every word I wrote in this post. I've said my piece, and you've said yours. I don't see a need to pursue this line of discussion any further.

Fastidious

Dominion you don't sleep, do you?! <smile>

Toby

Dominion Dominion 28 minutes ago / edited

I like this idea!

Regarding the post controls: I've made them completely invisible until hover ... let's see how it feels.

Kulga

Toby It gives a much less cluttered feeling. It gives back its left oriented feeling
Especially when you just want to read through the posts you can keep the mouse off and not be distracted. The controls are almost more visible on right border since there's more white-space around it when it appears after hovering. If you have your mouse hover over posts while you scroll (in a more active mood) it's always displayed.
I like it.

Dominion

Toby Regarding the post controls: I've made them completely invisible until hover ... let's see how it feels.

I'm not missing them at all ... as for the white space, posts without any likes do seem a bit empty at the bottom (as compared with the space above the post). But the impression of emptiness goes away as soon as the controls show up in the corner.

And the dividing line between the posts is so thin that it doesn't really matter how the white space is balanced.

Fastidious

Toby let's see how it feels

I don't like it, usability diminish (hover, then move mouse to chosen action). Flarum has lots of blank spaces as it is, showing the controls all the time helped to compensate.

Dominion 28 minutes ago / edited

I like this idea!

We hide controls, to avoid clutter, then clutter with text, over an icon? It doesn't make sense.

luceos

Toby Regarding the post controls: I've made them completely invisible until hover ... let's see how it feels.

On my android phone I cannot see any controls until I randomly click within a post. I must not click on the right side otherwise I like, reply or do another action 🙂

Felipe

Invisible doesn't works. You click to scroll the page down and likes button is pressed without you want. Also with reply button. Mobile impression.

henshaw

Might want to make it a setting for the Admin or for each user, and have it hidden by default. While I like the aesthetics of it being hidden, it's still not the best UX for all users. There's a reason why Facebook – a company that tests ALL THE THINGS – keeps everything visible. In particular, the Like option is visible and aligned to the left. I don't think there's a right way to do this because it's subjective, which is why I think there should be an option.

tarun

I've given these changes 5 days, and here are my feelings:

The right aligned controls are troubling me each time I use Flarum on the mobile. I know Toby mentioned it is not optimized for mobile yet, but I'm skeptical it can be figured out if the alignment is inline-right. IMO, on mobile, the best UX was how the controls were laid out before this thread started, with always visible links. Having the links appear on tap is happening as I'm scrolling - even when I don't want to use them. It's a distraction.
It was mentioned that it is a good idea to keep the content creation links (reply, like, edit, report) on the right as most posts will end towards the right of the screen, and the user could move their mouse pointer easily to them, and click. My worry is that the movement of the eyes almost always precedes the movement of the hand, and the latin script, being read left to right, is going to pre-dispose users to shift their attention to the start of the next line (ie, move diagonally downwards) after they finish the last line of a thread. Not move down vertically as we assumed. From my experiences on desktop over the last 5 days, I have felt that it would have been better if the links were on the left as they were before for this reason.
Hiding the controls until I require them seems right. So does keeping the Report and Edit tools alongside reply and like within the elipses.
Agree with @Fastidious suggestion that we do should not use text in lieu of the icon to clutter up the interface. As a philosophy, we should keep things as minimal as possible. Perhaps the solution to this dilemma is to find the right icon. The problem with the current icon is that it says "edit" more than "edited". Why not use something that shows a document without a pencil to signify that the edit action has happened already in the past? Some examples of how I'm thinking:

Fastidious

tarun I've given these changes 5 days

The most visible changes were reversed within hours. :-)

RaceProUK

tarun From my experiences on desktop over the last 5 days, I have felt that it would have been better if the links were on the left as they were before for this reason.

I've used several different forum packages, and they always put those links to the bottom right; it seems to me it's better to remain consistent with that expectation

accalia

luceos On my android phone I cannot see any controls until I randomly click within a post. I must not click on the right side otherwise I like, reply or do another action

I agree!

I even found a solution, i think.

if i'm right about the LESS files we can change this line to read opacity: 0.25; then we'll get nice greyed out icons when they're not active.

Kulga

Having right side controls is still a little confusing, I for some reason want to go to the left side to do reply / like and have to think, then go to right side for it.

But I like the compactness of it. Perhaps change places? Like / Replies on left side, likes, replies on right side?

accalia Feel free to try it out (modifying the LESS/CSS) on the demo site. In the admin, you can modify existing CSS/LESS stuff in Appearance. Don't worry about breaking it 😃

Dominion

Hmm. Thinking about this (italics added for emphasis) ...

Dominion you'd have to reverse the controls. Ellipsis on the far left, then Reply, then Like. Sounds doable, except the ellipsis in front seems kind of funky.

... gave me an idea. I still find myself looking for the ellipsis button in the upper right corner now and then. Maybe there's a way to kill two birds with one rearrangement.

Switch the links and the likes as described above: Reply, then Like, then the likes over on the right side.
Move the ellipsis button back to the upper right corner, where it used to be.

I understand why @Toby grouped the ellipsis with the links, but there's also a good semantic reason to keep them apart. The links are used to respond to the content; the ellipsis is used to manage the post. Different sorts of activity.

As for the disappearing controls issue accalia mentioned in the post she linked, it does sound like that would interfere with mobile use. Would it be possible to have them disappear in the desktop view, but only fade on mobile?

Dominion

Kulga But I like the compactness of it. Perhaps change places? Like / Replies on left side, likes, replies on right side?

I was thinking about that too. The present layout seems more, well, grammatical for LTR languages. You've got a list of people who like the post on the left, and right after that (ignoring the intervening space) you've got a link that you can use to add yourself to that list.

To keep the semantic connection between the "Like" link and the likes, you'd have to reverse the controls. Ellipsis on the far left, then Reply, then Like. Sounds doable, except the ellipsis in front seems kind of funky.

Kulga

Dominion A image might help illustrate your idea.

Dominion Would it be possible to have them disappear in the desktop view, but only fade on mobile?

With CSS and possibly LESS, this should be quite easy.

accalia

Dominion As for the disappearing controls issue accalia mentioned in the post she linked, it does sound like that would interfere with mobile use. Would it be possible to have them disappear in the desktop view, but only fade on mobile?

For what it's worth, I was on a laptop when i noticed the issue,. A laptop with a touchscreen yes, but still.

I also think it's important not to hide interaction points from the end user. You don't want them to be surprised at finding functionality, leave the right hints that it's there and they will use it.

In this case you are already reserving the space for the buttons so why hide them, particularly when they are still active hitboxes for errant taps/clicks

Toby

As I said much Toby, please ignore how the controls currently appear (or don't appear) on mobile! Yes, it is terrible UX to hide them completely on a touch screen, and this has been fixed in the latest code – I just haven't deployed to this forum for a while. 🙂

Dominion The links are used to respond to the content; the ellipsis is used to manage the post.

Not necessarily! Report is in the ellipsis, but that's a matter of responding to the content. Keeping them all together simplifies the thought process from "what am I doing? where should I look for this control?" to "I want to do something. I'll move my mouse to the controls." At times, I've found myself doing the same as you (looking for the ellipsis in the top-right corner)... but it's an issue of familiarity, not semantics.

Dominion

Kulga A image might help illustrate your idea.

True ... I'm trying to get back to this huge translation job I've got waiting, but I'll try to find the time. Unless someone beats me to it.

accalia In this case you are already reserving the space for the buttons so why hide them, particularly when they are still active hitboxes for errant taps/clicks

That's probably something best answered by the designer, but I think the idea is to keep the clutter down and the emphasis on the content. If you read back a bit you'll find that they were always visible (but faded) for a while there. That didn't bother me at first, but after a while it became distracting.

There does seem to be a bit of personal preference involved here. Some people seem to appreciate the invisibility, others seem to prefer them merely faded. The best solution may be to add a user preference.

accalia

Dominion That's probably something best answered by the designer

agreed there.

Dominion I think the idea is to keep the clutter down and the emphasis on the content.

Yes, i can understand that, where i'm coming from is a discoverability stand point. with the buttons invisible a user who is new to the software is not cued that there is something to interact with there, I argue that would not be desirable.

On the other hand there is a desire to reduce clutter. I get that too.

one way or another I've got to say that making the buttons invisible but still clickable is a bad idea because it means the actions can be triggered accidentally. If they are going to be made invisible they should not be active while they are invisible,.

We can agree on that at least, no?

Dominion

accalia I agree that inviting accidental triggering is something to avoid. 🙂

« Previous Page