General UX, discussion list avatar mismatch

Dominion

A couple thoughts spring to mind.

First, importance may vary; I'm usually more interested in the who than the when. But you're right: the what is least important, and repetitious to boot ... and it seems the repetition of relatively unimportant information in a place of prominence is what's causing the issue.

But I'm not sure that moving the what to the back is the answer. That's also a prominent place; it seems to me the middle spot is the best, most unobtrusive place for the what. That was one of the good things about the original phrasing; but that brings us back to the original problem.

I also think it would be a bit of a shame to end up with an awkward phrasing when Flarum does such a good job of being fluid and natural everywhere else. From this perspective:

The original phrasing was perfect: natural English order.
The revised phrasing was palatable: the passive is best avoided, can be tolerated. 😉
Your current suggestion is awkward: it reads more like a data array

Of course, I don't really have a horse in that race. When I translate Flarum into Japanese, I'll just do whatever I think is best. 😉 Oddly enough, the order you suggest here is just about perfect for Japanese...

Perhaps we can still find some other way to alleviate the mismatch between the avatar and the username. I was just wondering if we could indent the started/replied line, or insert an ellipsis, or do something to move it in a bit:

General UX, discussion list avatar mismatch
... Toby replied 5 hours ago

That would distance the username from the avatar and tie it more closely to the title. You lose the nice straight margin, but it would make the title pop a bit more (especially now that they're smaller) and you get to keep the natural English word order you wanted in the first place.

javascript:app.translator.translations.core.discussion_replied = '... {username} replied {ago}';app.translator.translations.core.discussion_started = '... {username} started {ago}';app.cache.discussionList.refresh();m.redraw()

Just in case anyone would like to try it out.

Toby

Dominion But I'm not sure that moving the what to the back is the answer. That's also a prominent place; it seems to me the middle spot is the best, most unobtrusive place for the what.

Thinking about mobile though, the back is the best place for it, because anything that's too long gets truncated. So even if we found a way to go back to the natural English word order, we could end up with things like this:

LongUserName replied 5 ...
Dominion started 3 m ...

Which is not ideal. Whereas with the priority order that I've suggested, we get the more useful:

5 minutes ago LongUser ...
3 months ago Domini ...

And I'm definitely open to using abbreviations (or calendar time?) for the timestamps to make it even more space-efficient.

Dominion Your current suggestion is awkward: it reads more like a data array

Certainly when displaying a date, yes ("3 Jan Toby replied") ... but when using relative time, it does still read quite well ("2 days ago, Toby replied").

Dominion

Toby Certainly my idea of indenting it would only make the mobile situation more problematic.

I have to learn to start thinking about mobile. 😛

Toby but when using relative time, it does still read quite well ("2 days ago, Toby replied").

Especially when you add the comma!

EDIT: If you add the mobile angle in, it does seem like this order would be best. Unless there's some way to do as @Kulga suggests and use one layout for mobile, and the more natural layout for desktop.

Kulga

Thinking about mobile though, the back is the best place for it,

Anyway to have a certain layout for mobile and another for larger screens?
Or would changing the structure of it be confusing if you move from mobile to desktop..

If I'm using mobile, I wouldn't be caring too much about whether it looks like a data array or not, just that I can see it.

Toby

Kulga Anyway to have a certain layout for mobile and another for larger screens?

It's possible, but it would be far preferable to avoid it.

wizgriz

I feel bad for continuing to harp on the icons but, just to point it out, couldn't "replied" and "started" be replaced with icons if they're on the right side anyway, next to the username?

With different icons for different whats. A bit of an awkward placement I guess but if you're willing to put "replied" and "started" on the right side, I'd see this as a better alternative.

Dominion

wizgriz That's an interesting idea. Maybe throw a "by" before the username?

Or not ... without the "by" would be better for mobile, I guess. 😉

wizgriz

Dominion Now that you mention it, I was thinking about the icon as a replacement for "replied", meaning it'd still sort of read like "an hour ago luceos replied". But if you're willing to forgo pronunciation, this could also be seen as a solution for:

Toby Removing the "Last reply" text completely to leave just the timestamp and the user ... But that looked like information about when the discussion was started.

Wherein it's a simple visual indicator of what happened without any real logic to it other than conciseness and avoiding the mismatch. You could flip the icon placement too:

I have a feeling there's a bigger underlying issue with icons though - just thought I'd point out the possibility. Otherwise I think the "2 hours ago Toby replied" is better than the verbose "Last reply by".

Toby

wizgriz Sorry, I have tried icons but I remain against them:

I feel that they attract too much attention and thus feel too repetitive, just like the "Last reply" text. The mockups you've posted are all of a single, isolated discussion which doesn't show this.

The meaning of the icon is a little ambiguous. Imagine if you were visiting a forum for the first time ever... You might suspect that the arrows mean something along the lines of "reply", but you couldn't be certain. It could also be interpreted as something else like "this discussion was made in reply to {user}", or "this discussion was moved". Since we don't have a restriction on space in this instance, it's better to use text to describe the what.

Toby

Regarding my initial suggestion, it might help to add a bit of extra spacing between the when and the who so that it's less tempting to read as a sentence?

Toby

OK, what about this one?

Yes, I know I literally just spoke out against icons (sorry @wizgriz)... but in this configuration, they're kind of growing on me. Oddly enough, I don't think we've actually tried this exact combination before:

Nice, fluent English in the form of "{username} {verb} {ago}". It's compact enough that it should mostly be visible on mobile.
The reply icon breaks up the username from the avatar enough, especially when compared to a discussion without any replies.
But it's not just a reply icon, it's also described in the text to remove ambiguity
The mockup is more fair, with both read/unread discussions, and discussions with/without replies – so the repeating icons don't steal quite as much attention
We could even think about having things like:

🔒 Toby locked 12 hours ago
📌 Toby stickied 2 days ago

wizgriz

Toby Whoa! I think that might be it. I love that starting a discussion simply has no icon - like you say, I don't think there's enough room for doubt here on the mismatch for it to be a problem.

Though like you pointed out earlier, the high contrast is bad for repetition: Has it been tested on a front page comprised solely of "last replies" (no discussion with 0 replies)?

Love the sticky/lock/other events in that it makes the front page as dynamic as possible. Possibly flawed in practice but sounds damn good on paper.

Dominion

Toby I think you've found the sweet spot!

Having icons for replies and no icons for new discussions makes it easy to see the what's what at a glance. And the difference between the two also keeps it visually interesting. It feels really natural.

amdad

Dominion Having icons for replies and no icons for new discussions makes it easy to see the what's what at a glance. And the difference between the two also keeps it visually interesting. It feels really natural.

Toby I would say, new topic (started) SHOULD have icon too. But different one. When you scroll you look at the icons column and it's much easier to recognize CHANGED/different icon than just NO icon.

But I understand if you want to be HEAVY minimalistic. 😛

Toby

It's live!

Any final comments? Speak now or forever hold your peace. 😬

Dominion

Hmm ... we have no new threads now, so it's hard to get the full effect. 😃

But ... I like it! 🙂

...

If you should find yourself thinking the strings are still too long for the mobile interface, you could try doing this: replace the words "started" and "replied" with either a comma (before an "ago" expression) like so...

General UX, discussion list avatar mismatch
↖ Toby, 21 minutes ago

... or with a comma followed by the word "on" before a date, like so ...

General UX, discussion list avatar mismatch
wizgriz, on 27 Jul

That's not a request or a suggestion, merely an idea to keep in mind should you decide shorter would be better. (This makes it short enough that you could probably spell out the month names rather than abbreviating.)

« Previous Page