Tweaks to the post layout

Toby

I've just applied some changes to the way posts are laid out, and I'd love to get some feedback. (I'm playing with this in a separate branch.)

The initial inspiration for this experiment was that posts didn't feel "compact" enough; there was too much whitespace/padding, and the layout just didn't feel very tight, especially in discussions with lots of short posts. I also wanted to experiment with @Fastidious's suggestion to show post controls all the time ... admittedly, hiding them completely until hover is not the best UX.

So here's a summary of the changes:

Less padding on the top/bottom of posts.
Smaller username font size, to be less distracting from the content.
Post controls are all in one place: the bottom-right corner. One place to look.
By being over to the right side instead of the left, we can display them on the same line as the "so and so liked this" text to save room. Also, the controls don't get in the way if you're scanning down post content.
Post controls are always visible so you know where to move your cursor; they fade in slightly when hovering over the relevant post.

Note that this hasn't been optimised for smaller screens (mobile) yet.

Please try and be objective in your feedback, i.e. try not to let the fact that this feels unfamiliar influence your reaction.

Dominion

Toby ... we can display them on the same line as the "so and so liked this" text to save room.

Yay! I've always thought they should be over there.😉

Toby Post controls are always visible so you know where to move your cursor; they fade in slightly ...

Fantastic idea! It works beautifully!

While it may take some getting used to, I like this layout better. Having all the controls in one place is very convenient. And as an added bonus, it may encourage people to read the whole post before using the "Report" command.

I feel the username could stand to be a wee bit larger, but that's my only niggle.

Overall: two big thumbs up!

Fastidious

Toby I very much like the changes. Showing post controls all the time encourage participation as well. Love the use of otherwise empty spaces! I think this is going in the right direction.

tarun

Prior to this discussion being opened, I was aware of the extra space under each post, but keeping controls and likes/replies on 2 separate lines felt right - the blank space didn't affect me so much. Here are a few thoughts on the current experiment.

I like the fact that the ellipses are now with the other 2 action links. It will be easier for users to find and use the report tool.
The concern regarding invisible-controls UX would have held true if the user had to find the place to hover to make those control appear. I'd argue that a large% of the screen (any post) would invoke those controls on hover. Thus, a user's learning that those controls exist under each post would have happened very quickly. We could still hide them to keep the interface minimal and clean. That said, I'm not a UX expert - am I missing something?
On the mobile, things are getting cluttered, especially if a post has replies or likes. The older style with controls on one line, and likes/replies on another worked better in my opinion.
+1 for Dominion suggestion to increase username size a bit.
The ellipses need to be middle aligned with the Like/Reply links.

jdavsz

These changes look perfect to me. Very nice.

One small suggestion: The post control buttons (which appear after clicking) seem very large/padded. Would it make sense to make these more compact? It might align well with the other changes. 🙂

Franz

jdavsz One small suggestion: The post control buttons (which appear after clicking) seem very large/padded. Would it make sense to make these more compact?

I don't think that's a good idea. Otherwise they'll be hard to tap on mobile.

Auk

You really nailed this one, I like this. It draws attention to ellipsis button much better. 🙂 Since the "Like" and "Reply" is already next to it and users can know what to expect by clicking there. Why ellipsis by the way and not the hamburger menu icon?

Kulga

I think the post controls are more visually appealing on the right, but less efficient, taking more time to interact with the forum. I feel like I'm hovering uncomfortably in the middle with my mouse with post controls on the right. I'm going to guess I'll notice this more if I start replying to specific parts of a post a lot (requiring a highlight of the text then clicking reply)

Original

New

Toby

Kulga This is primarily true if you reply to specific parts of a post a lot (requiring a highlight of the text then clicking reply)

That won't be an issue when we add a contextual quote button.

Dominion

Kulga I think your use of discussions filled with one-word posts may be skewing your impression a bit.

Kulga

Dominion I had a create a quick example for a gif to demo my point and needed discussions with some kind of multiple posts. Why do you feel it skews my impression?
Also, contextual quotes would solve the distance problem. Switching between replying to sections of posts and liking others would require more movement... but that might be ok for the benefit of having both likes and post controls on one line.

Dominion

Kulga Why do you feel it skews my impression?

Because the words you're selecting for quotation are all on the left side of the screen.

With longer posts, the cursor will end up closer to the edit button more frequently. 😉

Kulga

Ha, I see. +1 for contextual quotes. That should fix that part.

Let's see, I'm suddenly noticing the forum feels a bit more "busy" with the post controls constantly visible - even if faded. This is more prominent on shorter posts (< 3 lines)
Maybe rather then displaying post controls on mouse hover, activate them on active post being read? I know it's being tracked as it's shown in the link.. perhaps the one above and below.. I don't know how that'd look in practice - just throwing it out there.

It definitely has a lot of little things that make the post look much more efficient - I like to play devils advocate though 😈

Dominion

Kulga I'm suddenly noticing the forum feels a bit more "busy" with the post controls constantly visible

I'm starting to notice that too ... as you say, especially when there are a lot of short posts in succession.

I'm going to wait a while and get acclimated before deciding whether it bugs me. Probably it'll get filtered out.

EDIT:

Just to bring up another possibility, though ... how about using icons for "Like" and "Reply" as well?

They'd take up less space that way (good for mobile?) and making them graphical rather than linguistic might help cut down on the sense of busy-ness. Just a passing thought. (It'd be a good idea to add tooltips for all three buttons if you end up going the icons route.)

Wombat

Initial impression: Way too cluttered.

Objective opinion: Give me a day or so and I'll post back.

Dominion

tarun On the mobile, things are getting cluttered, especially if a post has replies or likes.

Would it be a good idea to move the controls to the line below the likes on mobile?

tarun The ellipses need to be middle aligned with the Like/Reply links.

You noticed that too, huh? 😉

Toby

Dominion tarun Ah yes, I haven't optimised it for mobile yet! Added a note to my initial post. Let's focus on desktop for now.

Kulga

Franz I don't think that's a good idea. Otherwise they'll be hard to tap on mobile.

Toby Ah yes, I haven't optimised it for mobile yet! Added a note to my initial post. Let's focus on desktop for now.

That sounds contradictory 😛 There must be some way of making both desktop and mobile look good!

tarun The concern regarding invisible-controls UX would have held true if the user had to find the place to hover to make those control appear. I'd argue that a large% of the screen (any post) would invoke those controls on hover. Thus, a user's learning that those controls exist under each post would have happened very quickly. We could still hide them to keep the interface minimal and clean. That said, I'm not a UX expert - am I missing something?

I concur. I learned very quickly and I never had a issue with looking for post controls. It's kinda hard to miss when the whole post causes the controls to light up. It also made it very clear what post I was liking / replying too rather then taking a moment to "guess" that the one I want is the one between the borders of the post and not the one above.

tarun

Dominion Would it be a good idea to move the controls to the line below the likes on mobile?

Yes, that's a good idea! 🙂

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:

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

Hmmm ... I just noticed that the column width for post content seems to have changed a bit in the process.

It's not an issue, just an observation. 🙂

Toby

Dominion I was almost going to include that in my writeup, but I thought no one would notice – impressive! Basically since there's more stuff on the very right edge of posts, I wanted to create a bit more breathing room between that and the sidebar.

Dominion

Yes, that sounds like a good idea. The breathing room helps, what with the controls over there.

Hm. Though it might be making the space between the post and the avatar seem a wee bit crowded, by comparison. Now that I think about it. Still, you wouldn't want to make that gap too wide.

Nahh, it's good as it is.

Dominion

It might be a good idea to tweak the width of the post entry field to match. To increase the WYSIWYGiness.

The preview wrapping at a different place is making me confused 😉