General UX, discussion list avatar mismatch

wizgriz

(Contrary to my previous tag spiel the general tag was too tempting not to add here given the discussion's title. Feel free to remove it - once you've had a hearty chuckle)

Some general ideas I've gathered while browsing this forum. Sorry in advance if any of these are obvious/already planned, implemented for the beta or overly nitpicky.

Better contrast for the reply box. I barely notice it on my monitor (which isn't a particularly good monitor).
Auto follow discussions you start? Dunno which is better: Manually switching it on, or manually switching it off. Depends on the person, probably.
Allow tags to be tab-completed when starting a discussion 😉. Currently you can narrow the tags listed by typing in the input box, but it requires that mouse click to select it even if you type the entire thing in (afaik).
Show the avatar of the person who last replied in the discussion list. Not fully sure about this, but all I know is that this: is very disorienting. "Person replied..." next to a completely different avatar, with the real username of the owner of that avatar hidden.
I know that adjusting the forum for all possible widths is laborious enough, but I sometimes use really small windows, height-wise too. There seems to be an arbitrary gap between the discussion info box and the top of the page. Perhaps it could be moved to top on certain heights? https://i.imgur.com/HQ5KQW2.png
Follow up on the last point: It would be nice to see the top bar transform into something condenser when you scroll down. It's a bit too demanding on real estate for my tastes, especially since I tend to have those small windows. Not too sure about this one though, scroll-transformations can be obnoxious.
When a reply box is minimized, make mouse hover maximize it, and mouse out minimize it, until a maximize button is clicked again to make it stick up. Good when you're reading another topic with it minimized, but want to check your reply quickly.
Hovering to see replies can cut into the top/bottom. I always like it when websites allow for these to go either below or above the mouse to prevent this. http://i.imgur.com/Xk7Nc1L.png, http://i.imgur.com/UhAmXxj.png
When finding a reply using @, you shouldn't see quotes inside the post. Here I would like to quote the post starting with "Yes,", but I end up seeing another post's content/another person's username.

Otherwise Flarum looks and functions stunningly. Amazing work. I'm surprised that's all I could bring up. And I suppose at the end of the day a lot of these can be fixed with light themeing tweaks.

Dominion

wizgriz Better contrast for the reply box. I barely notice it on my monitor (which isn't a particularly good monitor).

I would like to second this. I had similar concerns about sliders and such in iOS recently while trying out one of the new iPhones. Looking slick and sophisticated is all well and good, but it can be hard on aging eyes. O.O

Franz

Good list, thank you!

wizgriz Show the avatar of the person who last replied in the discussion list. Not fully sure about this, but all I know is that this: is very disorienting. "Person replied..." next to a completely different avatar, with the real username of the owner of that avatar hidden.

Agreed about this, it is very confusing. How about displaying the topic creator here instead?

Dominion

Franz How about displaying the topic creator here instead?

Matching the name to the avatar would be a good idea, but it's also nice to see who's replied from the thread list.

I'd like to suggest having the names and avatars for both the creator and the latest replier, but I'm having a hard time thinking of a way to manage that without creating way too much clutter.

henrywright

Dominion I agree it's useful to see who replied last. I kind of like that info and hope it stays 🙂

Franz

Dominion I'd like to suggest having the names and avatars for both the creator and the latest replier, but I'm having a hard time thinking of a way to manage that without creating way too much clutter.

How about using the topic creator avatar for the large icon, and adding a smaller avatar (for the author of the last reply) on the left of that small text ("Dominion replied 5 minutes ago")?

It might get rather messy pretty quick, but it's worth a shot...

wizgriz

Franz Anywhere, really, I guess, as long as there isn't an avatar<->username mismatch.

Dominion Yea I think the person who last replied is more relevant than the discussion starter since the last reply is the reason it's at the top of the list. The discussion title is really all you need otherwise.

Dominion

Franz How about using the topic creator avatar for the large icon, and adding a smaller avatar (for the author of the last reply) on the left of that small text ("Dominion replied 5 minutes ago")?

Yes, that's the sort of thing I had in mind. I do think it'd be hard to avoid the clutter.

Or ... this is kind of funky, but how about putting the smaller avatar between the user name and the word "replied"...?

That would put some space between the big and small avatars, at least.

henrywright

Franz I'd value an uncluttered list of topics more than a cluttered list so -1 to multiple avatars (just my personal opinion).

henrywright

I'm wondering what value is added by having the topic creator's avatar?

An alternative idea would be to replace the topic creator's avatar with the avatar of the person who last replied. That way the list of topics don't become cluttered with multiple avatars. Just the details of the user who last replied is shown. Of course, when you click through to the single topic, the original creator's details are shown for all to see.

Franz

henrywright Yes, that's the alternative. As long as there's no mismatch between avatar and text, we're good.

henrywright

Franz definitely agreed the mismatch is what's currently confusing.

Dominion

On the whole I agree with henrywright ... the list design is so clean now, I'd rather not add anything more to it.

Dominion

Hey @Franz I just had an interesting idea. Currently the software displays a text tooltip identifying the thread starter (which I guess isn't enough to dispel the confusion of the avatar/name mismatch).

If you replace the thread starter's avatar with that of the most recent replier, perhaps the tooltip could be expanded a bit, to something along the lines of what we see when we hover over an avatar in the thread view. Except it could be two lines, something like this:

🙂 wizgriz started 14 hours ago

😉 henrywright replied 11 hours ago

That'd give you a way to display the names and avatars of both users in a space where you can control the formatting, without adding any clutter to the thread list. (Naturally the tooltip wouldn't have to be quite as wide as this quote box.)

Toby

wizgriz Thanks for the feedback!

Better contrast for the reply box

This should be fixed now. We've had an orange outline for a while, but not with the correct browser prefixes, so it was missing for some people.

Auto follow discussions you start?

This was brought up not too long ago. We're going to implement it as a user setting.

Allow tags to be tab-completed when starting a discussion

Good idea, will do. (For the record, currently you can press Return to select a tag that you've typed in.)

There seems to be an arbitrary gap between the discussion info box and the top of the page

Not arbitrary – it's actually the height of the discussion header area at the top of the page. But I see what you mean. Made an issue: https://github.com/flarum/core/issues/190

It would be nice to see the top bar transform into something condenser when you scroll down. Not too sure about this one though, scroll-transformations can be obnoxious.

Yeah, I'm very much against a scroll transformation. I'm not really game to cut off any more pixels, it starts to feel a bit too cramped for my liking. Sorry!

When a reply box is minimized, make mouse hover maximize it, and mouse out minimize it, until a maximize button is clicked again to make it stick up.

Interesting – will definitely think about this!

Hovering to see replies can cut into the top/bottom. I always like it when websites allow for these to go either below or above the mouse to prevent this.

Good idea.

When finding a reply using @, you shouldn't see quotes inside the post.

Known issue.

Regarding the discussion list avatars... I'm torn. I agree that having mismatching avatars/usernames is confusing... but I kind of like having the avatar for the discussion author (the way it is now) because it gives the discussion a permanent identity. If I think "hmm I need to find that topic about translation that Dominion started", but can't remember the exact title, I can just scan down the list looking for Dominion's avatar. Same thing with JoshyPHP's text formatting discussion – I don't find it by its title, I find it by his avatar.

I tried adding smaller avatars before the last posters, and it looked terrible. That's a no-go.

So I don't know. I guess we could try changing the avatars to the last poster for a while and see how we find it?

Franz

Toby Regarding the discussion list avatars... I'm torn. I agree that having mismatching avatars/usernames is confusing... but I kind of like having the avatar for the discussion author (the way it is now) because it gives the discussion a permanent identity. If I think "hmm I need to find that topic about translation that Dominion started", but can't remember the exact title, I can just scan down the list looking for Dominion's avatar. Same thing with JoshyPHP's text formatting discussion – I don't find it by its title, I find it by his avatar.

We could try moving the "Toby replied 5m ago" to the right side (along with the matching avatar) and instead having "Created by Joshy 5d ago" on the left. Of course, we could also experiment with a group of avatars on the right, similar to how Discourse does it.

Dominion

Toby but I kind of like having the avatar for the discussion author (the way it is now) because it gives the discussion a permanent identity. If I think "hmm I need to find that topic about translation that Dominion started", but can't remember the exact title, I can just scan down the list looking for Dominion's avatar.

I'll try be careful not to spam too many new threads then. 😉

This very point has been bothering me as well, to tell the truth. I couldn't get too enthusiastic about the avatar changing every time a new reply was added, but couldn't put my finger on the reason until you brought this up. Thread identity! Yes, I've been using the avatars the same way.

Franz We could try moving the "Toby replied 5m ago" to the right side (along with the matching avatar) and instead having "Created by Joshy 5d ago" on the left.

I'm envisioning the reply avatars lined up on the far right, where the tags currently are. I suppose that would entail moving the tags back to where they were before?

wizgriz

Toby This should be fixed now. We've had an orange outline for a while, but not with the correct browser prefixes, so it was missing for some people.

Do you mean when the reply box is maximized? I actually just meant when it was minimized, and the border is hidden. I understand it's supposed to be inconspicuous in the minimized state but currently it blends a lot with the background so e.g. when scrolling the discussion list, threads sort of disappear/pop out of nowhere, and you never really get a good feel of where you're supposed to click to bring the box up again. Not really the biggest of deals though.

Franz We could try moving the "Toby replied 5m ago" to the right side (along with the matching avatar) and instead having "Created by Joshy 5d ago" on the left.

That's a simple but effective solution. I suggest, to avoid clutter, the tags and "Toby replied 5m ago" could simply switch places and the avatar tooltip is kept.

Toby

wizgriz I actually just meant when it was minimized, and the border is hidden.

Ah, gotcha. I agree. I'll push a change to make it a bit more prominent soon.

It's really important to me that the whole column containing the discussion titles is free of high-contrast elements. They just draw too much attention and make scanning through the titles very uncomfortable, IMO. For this reason, I am strongly opposed to moving tags back there – they must stay on the right. Thus, there is no room to move the "last reply" info over to the right, and even if there was, there would be nothing to put below the discussion title (showing the author info == too much information).

Realistically, for me it comes down to the following options:

Overlay mini replier avatars on the author avatars. The avatar stays out of the way of the title column, while still lining up with the replier's username. Some extra clutter but could be worse I suppose.
Leave it as is. This is personally my preferred option – I don't actually mind the fact that the username isn't the same as the avatar, and I value the conciseness and cleanliness of it. But I do see how it's confusing. Can we gauge: How big of a deal is this to everyone?

Anyone have any other ideas?

henrywright

Toby Personally, I'm loving the avatar overlay approach; especially how the avatar image lines up nicely against the "Username replied 3 minutes ago" text.