A more readable "Retweeted by" position

[tassoman]

Is your feature request related to a problem? Please describe.

Random users are popping up inside my timeline, until I realize they were retweeted by my followed one.

Describe the solution you'd like

The problem here, "Retweeted by Your pal" is not clearly visible because it's the last thing of the tweet

Describe alternatives you've considered

Have you considered moving that note just near the tweet author's name?

Additional context

I prepared a nice mockup

BEFORE (aka now):

AFTER (aka desired)

[IBBoard]

I guess this is similar to the comments on my first positioning of the "Translate into ", which was below the media as well. I wouldn't say it's unreadable, but it's less obvious where it is.

Twitter puts the RT tag above the person's name, but I think that's just messy - it screws with their spacing and flow (there's more of a gap between the line at the top of the tweet and the avatar).

I'm not sure about putting it under the name. Especially on the Tweet Info page, where we also have a date, time and client app. But then the avatar is bigger, so maybe it's okay. But then the icon reduces the available space for the RTers name, so we would lose even more of that on narrow widths compared to what we've got now.

Would it be enough to put it under the text and above the media and/or quoted tweet?

Also, @CodedOre - any thoughts? I don't think you put RTs (or lists of users replied to) in your libhandy mockups.

[tassoman]

Yes, I agree. I've compared the two layouts. "retweeted by" label stills in the same place in booth layouts.
While Tweet Info Page is contextualized by actions buttons and stats numbers, in the preview gets isolated below.
Just being between text and media, can help a better understanding.

[IBBoard]

Now I'm wondering whether below the text but above the media will look odd in a different way because the icon encroaches into the "margin" under the avatar, but is at a variable point some way down the post. At least at the moment it's consistently "bookending" the post with the avatar at the top and the RT (if any) at the bottom.

[tassoman]

Should be mocked-up to see how can work. I haven't that skill.
I only wanted to say I feel difficult to read "retweeted by" label alone as last thing. IMO it's more important than "last" because it's the reason why content is popping up

[CodedOre]

Sorry for being late here...

Yes, I did not include a retweet status field in my previous mockups...
So, here is a quick draft for it:

To be honest, the best position is most likely to put it over the "normal tweet", as it is basically "additional information" not part of the actual tweet. And Twitter places other information in this space as well, such as for pinned tweets.

But I will experiment a little bit to see if there is a better solution lying around somewhere.

@tassoman, if you want to try yourself on it:
Here is the UI-file from the picture. Just load it into Glade and test around.

[CodedOre]

Here is a new mockup with the retweet status a little bit changed:

And here how @tassoman first imagined it:

I will try to complete this mockup with other wanted items, so we can see if there has to be anything more to be considered.

[IBBoard]

The second mockup is more in-line with our current ordering of icon-name-handle. And things like "Blah has retweeted" in the first one are always hard to translate correctly when we compose them of different pieces (which we'd have to do with the "RT" icon in the middle), especially in right-to-left languages.

We have the information to show the RT time as well as the original time. I don't know if that would be too cluttered and confuse people about having two timestamps, but I did see someone get confused by the seemingly random order due to RTs (1, 2)

I hadn't thought about using separators in the UI. I wasn't even aware that they were a thing. This does seem to imply a design where each tweet is its own box with whitespace, though, because otherwise it would be easy to confuse it with some kind of "collapsed" tweet. I think Badert's redesign (with LOTS of CSS effects) was going for the "every tweet a separate box" effect, like text messages on a phone, and I didn't like it. You lose so much space.

I think the small avatar is going to be too much, though. Most avatars will be too blurry and indistinct at that size.

Maybe I'll just have to accept that "above the tweet" is the best place. It feels wrong because of flow, but it might end up being the clearest approach with a sensible semantic structure of "things to do with the tweet are together and things to do with it being a RT are together".

[tassoman]

Thanks for your complete informations!
I can get the problem here with double timestamp can be confusing.

I think this mockup can handle the situation in a better way. The only trouble I can feel is the timestamp size.
As @IBBoard referenced in the previous comment, timestamp can be confusing.
Maybe "retweeted" (and his timestamp) can be of the same size of original tweet timestamp. And original timestamp can be greyed out. This would be meant to focus the reader to retweeted timestamp.

Sorry I'm now on a M$ machine, I cant play with Glade yet

[CodedOre]

I think this mockup can handle the situation in a better way. The only trouble I can feel is the timestamp size.
As @IBBoard referenced in the previous comment, timestamp can be confusing.

Maybe "retweeted" (and his timestamp) can be of the same size of original tweet timestamp. And original timestamp can be greyed out. This would be meant to focus the reader to retweeted timestamp.

That would look something like this:

I think focusing the attention to the timestamp of the retweet is good, but I am not sure if this is a good solution for the user as well, as a retweet is without meaningfull content, compared to the retweeted tweet.

[IBBoard]

I don't think emphasising the RT time is the right way to go. The order of tweets implicitly tells you that the RT happened fairly recently. If we add to that and tell people when then that might be helpful (as long as it's not confusing).

But what's more important is when the original tweet was. Is someone retweeting something a few hours after it happened, or is it some old post from 2016 that someone dug out for some reason? That's what really puts the message in context and what we should emphasise.

[tassoman]

In my opinion the last layout don't steals focus to an early retweeted content or something old, because you have always the relative time.
So would be something like:

• 2h
• 6y
• 6y 2w

When you have a retweet, the action is "Mario, who you follow, 2h ago exposed Antonio who cited 6y ago what Laura wrote 6y and 2w ago". I think this layout can fit.

[tassoman]

When there's a blocking doubt on UI/UX, an idea can be: to design A/B proposals, put them inside an online anonymous survey, then ask @cawbird followers to express an opinion ... 🤔 💭

[IBBoard]

When I said "emphasising the RT time" I meant the time at which it's retweeted. The last design emphasises the retweeted time over the original time because it's in bigger, darker text. If we're going to display RT times as well then it needs to be more subtle (as the names are already with the lighter text at the bottom).

The important thing is WHAT is being retweeted, not who retweeted it and when. Most of the time you don't care whether it's Mario, your Aunt Zelda or UberHappyTacoTruck who retweeted it. You care that a Gnome developer (who you don't follow) has written a blog post about some interesting new change. We shouldn't let the "RT bar" at the top overpower the rest of the content.

A/B testing is fine in theory, but I think it's not appropriate in practice on our scale.

Firstly, real A/B testing needs actual hands-on time. Big companies literally roll out different versions of their websites to different servers and see how users respond. All we can do is give people screenshots.

Secondly, you need far more user responses than we'd get. Getting 15:5 in favour of Like over Favourite is fine for changing some wording that doesn't really impact your day-to-day usage that much. But design is going to be simultaneously much more opinionated while also requiring lots of considerations that people will ignore.

[CodedOre]

Well, there are some good arguments from @IBBoard here. At the end a retweet is just a "look at that".

Also, while creating the "bigger-retweet" edition of this prototype, I had the feeling that something was off.
Looking at it now I found that it lacked consistency with the quoted user tag, so I will submit this as the final design for user handles:

Keeping the date of the actual tweet big also removes the requirement of detecting if it is a retweet or tweet and changing text sizes.

As for asking the community: For something like this, it does make more sense to ask people with design experience like @bertob who can give an well-though comment.

[tassoman]

I wasn't aware of the poll feature... Can be faster than a survey, absolutely.
About the dimension/weight of timestamps, to me doesn't make a big difference.
I agree there is no content during a retweet, except the retweeted. So I agree its note shouldn't steal to much space or enphasis.
You see if we compare my first screenshot and the final mockup, I feel it a huge improvement. 👀

[bertob]

@CodedOre That looks good to me structurally, but visually it's a bit cramped. I'd increase the padding overall, and especially around the main tweet and the quoted one inside the box. The 2h/4h labels are also too close to the edge, but that's likely a result of the same padding issue and would go away if you just bump padding to 12 or 18.

[CodedOre]

@CodedOre That looks good to me structurally, but visually it's a bit cramped. I'd increase the padding overall, and especially around the main tweet and the quoted one inside the box. The 2h/4h labels are also too close to the edge, but that's likely a result of the same padding issue and would go away if you just bump padding to 12 or 18.

I had to revisit the margins (since it was also inconsistent), and 12 apparently makes for a good value:

[bertob]

Yeah, this looks much better!

I'd still tweak it in a few places though:

• The margins to the right of the avatars are still to small, I'd try 12 or 18 there, too
• The padding inside the quoted tweet looks too small also, everything feels a bit too close to the edges. Not sure if 12px padding all around would be too much here, but maybe worth a try

[CodedOre]

Problem is: We are already close to the 360 px window limit, I am afraid more padding would step over this...

[bertob]

How do you mean? Text reflows/ellipsizes just fine, no?

[CodedOre]

You know, ignore my previous comment, was not paying attention at all...

Classic example for what happens if you are only halfway in an conversation.

[CodedOre]

Well, turns out I ignored the possibilty of text ellipsizes before... Like said before, I was only halfway at reading your comment.

So, here is your advice in the UI file:

Edit about the picture: Still trying to find a good way to display multiple pictures for the overview, so this is more placeholder I forgot to hide than part of the UI prototype...

[IBBoard]

The double boxes do look a bit odd. But otherwise I'd be happy with the overall design.

The hardest part with ellipsising is getting it to do something sensible. If they're two separate labels in a box then a long display name causes the handle (the more consistent/meaningful part) to become ellipsised. I've ended up having a single label with markup because it seems to be the only way that behaves in a clean and consistent way and allows me to keep the handle visible without unnecessarily ellipsising one or the other, or ending up with weird alignments.

I'd be inclined to drop the inner Like/RT/Reply icons, though. I think it adds too much clutter and I think it's enough that people can get to those actions if they click through to the quoted tweet (which is probably something we should support as a single action rather than via the Tweet Info page)

[bertob]

That looks good to me!

One last nitpick: the 4h label should be on the same baseline as the username on the left.

[tassoman]

I agree there are too many clickable buttons with the same icon. Someone could messup tying to retweet his friend's retweet (APIs should already retweet the original content, not my friend retweeting).

More, I'm not sure about rounding the media inside a border... It takes the same "weight" of the bordered content being cited. 🤔

The retweeted content, 👑 have a timestamp (9th of February via Client) and 4h also... I feel it redundant. Maybe the relative time can be cut?

Overall I feel a big improvement, thanks!

[CodedOre]

More, I'm not sure about rounding the media inside a border... It takes the same "weight" of the bordered content being cited.

I still need to figure out a good way to display media... Is one of the last item on the list before finishing this prototype.

The retweeted content, have a timestamp (9th of February via Client) and 4h also... I feel it redundant. Maybe the relative time can be cut?

That is the idea. Having it relative in the timeline and exact in the detail view.

Overall I feel a big improvement, thanks!

Don't thank me yet... It is just a big UI file with the design, it will still take a lot of time before it will be seen in Cawbird...

[tassoman]

I enjoy being opensource because it's inclusive, I thank all the people involved in stimulating discussion.

If I can go off-topic further talkin about the media rendering, I immagine it borderless, full width inside his tweet. I feel the tweet is becoming like a "card" ui component.