Tweaks to the post layout

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.

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 😉

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.

Dominion

@Toby This is slightly off topic, but a consequence of the change, so here goes:

One thing about having the controls on the right end, is I'm starting to wish the "Post Reply" and "Preview" buttons were over there too. Would that be a possibility?

I'd suggest moving them over to the right, and reversing their order so "Post Reply" takes pride of place.

Fastidious

Dominion the preview is instant on Flarum, as you compose. There is not "Preview", there is no need. Isn't reply, post reply? I am not following.

I realize you meant it on the compose screen, perhaps.

Dominion

Fastidious I'm talking about the buttons in the lower left corner of the reply composer.

There is a "Preview" button, it's the one with an eye on it. 😉

It scrolls the preview up from its initially hidden position behind the composer box.

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.

Franz

Small bug report: when opening the dropdown action menu and then moving the mouse away from the surrounding post, the dropdown menu itself becomes semi-transparent, too - that should probably not be the case.

Dominion

Maybe it would be a good idea to prevent the fading of not only the menu, but the Like/Reply/... controls as well?

... Until such a time as the menu is closed, of course.

Dominion

I too am starting to think the always-visible controls aren't really needed. I agree that their location is easily learned.

The idea of making them always visible originated with concern about the "edited" pencil icon being mistaken for a control that would allow editing. I can understand that, but I'm not sure that making the actual controls visible all the time is going to prevent anyone from trying to click the pencil.

Instead of making the controls visible all the time, maybe it would be best to do something about the actual source of potential confusion: the pencil icon. Even when used for its real purpose, it is a rather small target. Since the low-contrast text is relatively unobtrusive, why not replace the pencil with the word "edited"? Like so:

Dominion 28 minutes ago / edited

There's little chance that someone will mistake the word "edited" for a control. 😉

I just had to get that out of my head before going to bed ... it was seeming likely to keep me awake. 😮 Yawn!

Fastidious

Dominion The idea of making them always visible originated with concern about the "edited" pencil icon being mistaken for a control that would allow editing

No, no, no, no. I was hijacking that thread, but the always visible has nothing to do with editing. Having the controls always showing provide a better UX, and balance the white space reserved for "likes" and "replies."

I like the "always on" controls as they are now.

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.

Fastidious

Dominion yes, that referred to the "three dots." The "likes" and "reply" came after, when I blatantly hijacked the thread. The point you made is that you are "starting to think the always-visible controls aren't really needed." I happen to think the opposite. <polite smile goes here>

Edit: It seems you deleted your comment.

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>

« Previous Page Next Page »