Status design and flow

[ksesong]

I have been curiously watching Elk's changes to the status page, from the reordering of replies into threads, the repositioning of mentions to a separate line, the hiding of the mention line when the information is already suggested by surrounding context, to Zen Mode.

If we start removing all the boilerplate as this had been the case with these changes, the page actually starts to look like a chat conversation, a list of replies in roughly ordered chronologically, from top to bottom, mostly from old to new, mixing direct replies and sub-conservations, in a single flow.

Elk is not a chat application, but it increasingly looks like one. I feel this shows a willingness to focus on the reading, not only the reading of one status, but of the flow of statuses.

It then feels natural to continue to look at chat applications, which, by their nature, enable a more direct form of communication. With this in mind, I've been to trying to see how we could incorporate some simple design patterns from messaging apps into Elk.

• The action toolbar currently takes the entire width of a post, and acts like an implicit border, a separator between the different posts. I suggest to shorten the action bar, breaking this impression of separation, similar to Slack, Discord, or WhatsApp, where it is often shown aside of the messages in a compact shape.
• The name and handle line is currently shown for all posts, even for statuses that are written by the same individual as part of a thread. I suggest to remove the username line, for the consecutive replies that have the username as the first post, similar to WhatsApp, Discord...
• Replies that start a new thread are only identified by the line "Replying to", followed by the name of parent poster. I suggest to add further context to this line, such as the name of the mentions that are part of that initial thread, and an excerpt of the parent message, similar to WhatsApp, Discord...

I made a quick mock-up to illustrate these changes, the visual aspect will obviously require further work, especially the message preview, but this should sufficient for demonstration purposes.

With just these few minor changes, replies appear as if they belong to the same document, less segmented, a thread from one individual appears like a longer text, with fewer obstruction, without losing functionality. Messages are seen as part of a context, less likely to be singled out, and picked apart.

I am curious to hear your opinions.

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

[patak-dev]

This looks interesting, I like the idea of dropping the avatar and name in some cases. I think that for the detailed post in your screenshot we should still show the avatar. I would only hide it in the second one there.

About having the action buttons left aligned, that is indeed quite interesting. One idea we could try is maybe left aligning the first three, and have bookmark right aligned. May have a similar effect and help to separate public actions from private ones (bookmark is different).