General UX, discussion list avatar mismatch

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.

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.

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