Separate the background of posts

[eveneme]

I suggest separating each post with its own background instead of a combined one. In my opinion, it looks better and more readable because there aren't those harsh dividing lines between each post.

Before:

After:

[eveneme]

@dtdesign @BurntimeX

I would do something like this. In my opinion, there's currently too much use of borders, which could be replaced with shadows for a better visual effect. In my humble opinion, there are too many borders in the current design. The user sidebar could also be done in a similar way to the example in the attached screenshot. It's just a sample without most of the buttons and functions.

[eveneme]

[eveneme]

@BurntimeX @dtdesign

Overall, I think a large user sidebar is unnecessary and a poor solution. The best option would be to create something in a similar style to what I’m showing below, which would allow the text to span the entire width. This is, of course, just an example, as it could be done better in terms of UI/UX. Please consider this.

[aze-dzn]

@BurntimeX @dtdesign

Overall, I think a large user sidebar is unnecessary and a poor solution.

I don't like that version. You're losing a lot of space with that solution. How you want to display profile fields? If users are using more than one rank, there isn't enough space to display these, the same goes for trophies.

[eveneme]

@aze-dzn I don’t agree with you; you're not losing space on the contrary, it actually looks better, and there’s room for ranks, etc. Just take a look. As for the current version, that's where you’re losing space. Look at how much empty space there is, especially with long messages. And in my example, you have the full width available for using trophy icons, post count, etc.

Plenty of unused space designated for nothing:

Moving the addition time below this spot makes even more space, and in my opinion, it’s better designed in terms of UI/UX than a large empty field under the user sidebar.

[cadeyrn]

I suggest separating each post with its own background instead of a combined one.

I have also done this in my forums. I therefore agree with this proposal.

Overall, I think a large user sidebar is unnecessary and a poor solution. The best option would be to create something in a similar style to what I’m showing below

I don't agree with that at all. The sidebar version is better in my opinion. It provides much more space for additional information. And sidebars are a good concept for additional information which are not necessary to read. Also, you read from top to bottom and with your proposal, there is always information between the posts that is not relevant to the flow of reading. This is a classic case where function should take precedence over a supposedly modern look.

[eveneme]

@BurntimeX @dtdesign version v3:

In my opinion, this layout is better designed in terms of UI/UX, with space being used more effectively compared to a side sidebar, where there is a lot of unnecessary space underneath. Please consider this. If there are any questions or suggestions, feel free to discuss.

I don't agree with that at all. The sidebar version is better in my opinion. It provides much more space. Also, you read from top to bottom and with your proposal, there is always information between the posts that is not relevant to the flow of reading. This is a classic case where function should take precedence over a supposedly modern look.

Okay. And how does it look on a mobile device? :) The user avatar and so on are also on top. You read from left to right.
The top bar takes up significantly less space than the left sidebar, which has a large empty area underneath, so the text spans the entire width of the box.

[cadeyrn]

And how does it look on a mobile device? :)

On mobile, you have to deal with the different viewport size. It doesn't mean that you have to do the same on desktop. And as far as I can see, this is a proposal for the desktop design.

You read from left to right.

I was not talking about the reading direction of sentences. You usually read posts from top to bottom. And on the desktop, with all the available space, there is no point in putting irrelevant information between these posts. The sidebar concept allows the user to easily skip the irrlevant information which is a good thing.

The top bar takes up significantly less space than the left sidebar

I don't see the argument. Space is not an issue on the desktop at all. Again: The proposed top bar is a clear disadvantage for the reading flow and if you want to provide additional information, the sidebar provides more space for that.

[eveneme]

And how does it look on a mobile device? :)

On mobile, you have to deal with the different viewport size. It doesn't mean that you have to do the same on desktop. And as far as I can see, this is a proposal for the desktop design.

You read from left to right.

I was not talking about the reading direction of sentences. You usually read posts from top to bottom. And on the desktop, with all the available space, there is no point in putting irrelevant information between these posts. The sidebar concept allows the user to easily skip the irrlevant information which is a good thing.

The top bar takes up significantly less space than the left sidebar

I don't see the argument. Space is not an issue on the desktop at all. Again: The proposed top bar is a clear disadvantage for the reading flow and if you want to provide additional information, the sidebar provides more space for that.

Unfortunately, I don't agree with you on this matter. The user's sidebar takes up much more space than a small top bar. On Facebook, the user is also placed above each post, not on the side. Calculating in pixels, the narrow top bar takes up significantly less space than a side sidebar with a lot of unused space in the case of long messages.

[eveneme]

V4:

[dtdesign]

The top variant of your version 4 looks quite nice, although I would strongly prefer a different background color for the sidebar (maybe just a different shade). Our current mobile design uses a similar layout and the different background color serves as a visual guideline to quickly skim over a list of messages.

That said, I don’t see us abandoning the sidebar on the desktop view for two primary reasons:

1. There is a significant demand to display extra information alongside the message. The limited space with the sidebar at the top does not solve this, especially when dealing with text based information.
2. Removing the sidebar on the side on desktop causes the message to span most of the width of a screen.

Especially the display width is a major concern for us. As a rule of thumb, text shouldn’t be wider than 600-700 pixels because beyond that it becomes harder to read for many people, for example, it’s easier to lose track of the current line when wrapping. There are always people that have no issues reading super wide text rows but we need to design for the average user.

Moving the sidebar to the top is an option on desktop when either the layout width is heavily constrained and/or there is a permanent sidebar present that reduces the available text for the message. Pay close attention to the width of the content area on most platforms, it has a reason why they’re somewhat narrow.

[eveneme]

@dtdesign I understand; however, as for separating the background of posts, I believe it should be done this way. In my opinion, it looks better and more aesthetically pleasing than a solid, continuous background with

---

dividers.

[dtdesign]

Yes, I agree. The current visuals are a result of a somewhat different approach in WoltLab Suite 3.0 which was subject to a significant change in WoltLab Suite 3.1. We’ve started adopting the card layout on more and more places as we overhauled and continue to overhaul parts of the software.

The message view is long outstanding for a complete visual and technical overhaul but somehow other (more urgent) things managed to get in the way. After all we have to take a lot more into consideration when deciding what to focus on next. The current view is looking quite dated but it’s still functionally getting the job done. Again, we can all agree that it is in need of an overhaul, I’m just explaining why we put our focus on other aspects first.

[eveneme]

@dtdesign @dtdesign I would also clean up the appearance a bit; I would move the "edit" and "report content" buttons to a dropdown menu (three-dot icon) and leave only the essential buttons like reactions and quote. We could also add the text "quote," and it would be worth considering an "mention" button, which, when clicked, adds the tagged user's to the form text.