Sidebar and the column for a user icon aimlessly waste screen space

[p01arbear]

1. No issues related to space wasting or bad UX

Summary

Sidebar and the column for a user icon aimlessly waste screen space.

Environment Information

• OS Version: ​Android 13
• Mattermost App Version: ​2.9.1
• Mattermost Server Version: ​7.8.0

Observed behavior

Let's take a device with a 2400 * 1080 screen (most popular as of now).

In Mattermost version 2.9.1 the emptiness in width takes up

• 19% of the Chat window (200 pixels out of 1080)
• 27% of the Home window (290 pixels), where the Teams column constantly takes up space from the channels headers

Expected behavior

Useful content on each screen takes up the maximum screen area. It doesn't seem like good UX when a significant portion of the window intended for text is never used for text. Can it be reduced to, say, 5%, like this:

[matthewbirtch]

Thank you for the feedback @p01arbear. We appreciate it very much.

A couple notes/thoughts about this from me - as one of the designers on this project:

1. The new team sidebar was intentionally designed this way for a few reasons:

   • It aligns with what users are used to with the webapp/desktop app experience
   • It makes switching between teams and accessing channels from other teams much faster.
   • The team sidebar now sits under the new multi-server button that appears above it and it was helpful to relate these two things from a hierarchy perspective

2. The user avatars appearing to the left of the message content has been this way for quite a long time and is intentionally designed this way for a few reasons:

   • It actually makes scanning the channel much easier. A while back we played with the idea of making the message content span the full width, but it affected the ability to scan and consume the channel content.
   • It's a common pattern in business chat applications. Yes, there are exceptions to this, but we've consciously made the choice to prioritize scannability
   • The padding you see to the left of the avatar is needed - otherwise things would feel too tight
   • The size of the avatars used was also intentional. We could consider going slightly smaller, but wanted to make sure the images were recognizable and if we go much smaller, there is a risk they won't be recognizable.

I'd be happy to keep the conversation going, so let me know what you think. Again, we value your input!

[p01arbear]

Thank you for the help.

Well, I tend to agree with you about the team sidebar. I don't use I too often and I see you have some extra views on it. But let me better understand the reasons for the chat layout. I don't understand why the right layout is harder for scanning then the left one. It is not too tight and avatars are the same size.

[Tampa]

The change from having the channel selection be a sidebar-open to being the main screen is the most annoying change in this version. What's the point with that? It only makes the app slower it seems(which I noticed right away is a problem in itself) to use really. The sidebar-open to switch to a channel worked fine, changing layouts on things people are used to for no reason, well the app reviews on the play store speak for themselves on that.

The app has no way to change the font type or size either and you went up in size meaning on smaller phones the messages become really annoying to read as you constantly scroll or have a sentence break at the end of the line.

There is a plus icon next to the server name, so what would be the natural guess that does? Add a channel? No. Adding a server, but to do that you need to click the icon on the other side to show the server list? It looks like the server icon, nothing indicates you can click that to show the server list. On the desktop app you have tabs for them, that doesn't work on mobile for obvious reasons, but the accepted "Here is stuff that doesn't fit in a menu bar" is that burger icon not something that looks like a filing cabinet.

In the bottom there is a little icon showing my avatar picture, but unlike the desktop app it doesn't show my status. I have to click it to see that. While doing that the little indicator moves from the house to the avatar icon, left to right as if I am changing to a different page horizontally, but swiping doesn't return me, only pressing the house will. So the indication of "how I have moved" doesn't correspond to the actual position in the app.

Why are these things now a popup that opens from the buttom up once pressed? Swiping back down to go back to the channel list. However, worse, if I want to search anything I can't do that anymore from the view of the channel I want to search specifically, no I have to go back to the channel list and then search, remembering which channel I wanted. There is nothing in the dots menu about search or anything that really that desktop app also provides in the channel view.

When you design the desktop and webapps to behave and look vastly different you get confused people. Trying to keep as much of the layouts similar and where people expect them based on other apps is key. For something like skype the view of contacts and chats to select and then view them specifically makes sense, because we are talking about usually one-on-one chats or smaller group chats, but mattermost channels can have dozens of people in it or hundreds of bot messages and interactions. Quick navigation between them all is much more important and so is searching directly for what you are looking for, especially with the limited screen real estate.

Those are just some of the things that irked me with this update, I'm sure there is some more, but specifically I want to make the point that spacing stuff and making things bigger doesn't add clarity. You can work with colors, borders or even different fonts to set things apart from one another just as well without wasting space on a platform that really doesn't have much to begin with. I don't know where this started, but padding does not a layout make.

[Willyfrog]

Thanks for the feedback, I'm sure Matt has taken good notes from it.

There is a couple of points that we are aware that it is currently an issue and we are working on it.

The app has no way to change the font type or size

We identified some issues with different fonts that would make the app not render correctly/be difficult to use. We are working on a plan to solve this, but we have to identify all the rough spots first.

if I want to search anything I can't do that anymore from the view of the channel I want to search specifically

There is a ticket for that https://mattermost.atlassian.net/browse/MM-48229

[matthewbirtch]

There is a plus icon next to the server name, so what would be the natural guess that does? Add a channel? No. Adding a server

@Tampa this plus icon on the right side of the screen should most definitely open a bottom sheet with options to:

• Browse Channels (effectively a channel directory)
• Create a New Channel
• Open a Direct Message
• Invite/add people to the team

Is that not the case for you? You mention the plus icon button opens something to add a server? If so, there could be some sort of bug and maybe you could share a video capture of that problem?

the accepted "Here is stuff that doesn't fit in a menu bar" is that burger icon not something that looks like a filing cabinet.

Thanks for this feedback. Because this icon opens the servers list, rather than it simply being an overflow menu to things that don't fit, we decided on an icon that is used to represent servers (same icon as desktop app)

In the bottom there is a little icon showing my avatar picture, but unlike the desktop app it doesn't show my status. I have to click it to see that.

This is good feedback and we could definitely consider showing the status here. I've created a ticket for it: https://mattermost.atlassian.net/browse/MM-50256

[Tampa]

What I'm reporting are the first impressions I get after the latest update and the thing that immediately caused me to stumble. There are no written rules in UX/UI, but a lot of things behave in similar ways, because people have seen it enough times to expect it. While that does mean there are some illogical things out there people simply expect it has also brought some commonality across a wide range of apps.

I may sound a bit harsh, I tend to be overly direct. The old layout was something that worked fine for just checking on stuff. Of course being a stripped version of the desktop you have to make compromises.

The thing that I liked the most was that the channel list was a sidebar popout, as that is similar to what the desktop is like, channel list being on the right at all times. You expect it to be there. That the channel list has become a full separate page also resulting in a back button up top looks weird at first.

What irks me the most is search. It's on the channel list and not accessible directly on the channel you may want to search in. Not even in the overflow, that just contains favorite? mute and copying the link. All stuff I rarely need to do. I can't select search here and get a channel specific search suggested I could then manually remove the channel specification from if I can't find any results? That would be what I would expect to be there, cause that would certainly make searching simpler.

On my older android phone the app is also weirdly slow, more so now than it ever was and it has a tendency to get "stuck" on things. I just opened the overflow to write this comment and it won't exit out if I swipe down, hit back or even if I click on view info. I just get the suggestion to hit back again to exit. This has happened a few times now. I have to hit back quickly multiple times and I get back to channel list.

Between the server name up top, the find channels and the buttons at the bottom the screen real estate in the channel list is so little that I only see 10 channels. We don't need spacing if we use colors to distinguish parts from one another. Especially for an app where screen real estate is limited using spacing should always be the last resort.

I'm no UX/UI designer so of course my opinion and comments have no weight in that regard. I just found the old layout was mostly fine to the point it worked well enough that I would have had to really look to find something I would have changed. Course with the idea to perhaps add functionality shifting some stuff around is likely, but the new layout to me doesn't improve anything significant and instead makes navigation take more actions. It behaves more like skype now, which drives me mad for the same reasons of being clunky to use with a lot of actions just to navigate around.

Sorry if this is mostly rambling. Sharing thoughts.

I would have tried to extend the functionality of the old layout rather than ditching it. What is done is done now.

If I had to design this from scratch now here is what I would do:

• Much like the desktop app have the various servers in tabs, scrollable horizontally. Stick a list icon on the left to open a server list to scroll vertically.
• Main app view in the server being the town square or last viewed channel as it was before, keeping the channel list by swiping from the left, moving the search in channel and even the channel info stuff by swiping from the right.
• All the other stuff creating channels and whatnot as swipe from buttom up, browse channels, create channel, search global, saved messages all that stuff.

Currently the app has too many buttons all over the place and opens drawers that you cannot swipe away even if they open with a nice animation that would indicate as such. If you want to stick to having "pages" in the app then make them swipe-able. We have all these actions we can perform with a touch screen so we don't have to use buttons.

Implementing some more of the stuff from the desktop app in terms of customization and so on would also not go amiss, especially when it comes to how stuff is shown. Like I already mentioned, font sizes, spacings and such. The desktop isn't perfect, but the mobile app now behaving differently is definitely making me stumble more trying to use it I even considered rolling back. Would love to help more working out a good design, but my time is kinda limited.

[Tampa]

Another thing that I only noticed recently, but is quickly becoming a major annoyance, beside the miserable performance of the app. The buttons for channels are only as long as the text, instead they should go across the whole screen as a full width button, so that pressing on the space still goes to that channel.

The same problem with code boxes only acting as buttons where there is text, so it becomes difficult to click on them when there is little text to click on. In the desktop app the code boxes have text-wrap, in the app they don't, so if it's one one line of long text it means you are scrolling for an eternity to read it all.

Maybe it's my somewhat older phone, but compared to the old app this new one takes about a minute to open from push notification and then often doesn't even move to the correct channel the notification came from and instead is stuck on the channel that was last used.

I'm at a point where I consider moving back to the old app, because it's just not helping with productivity anymore.

[larkox]

@Tampa Regarding the channel buttons... what buttons exactly are the ones not covering the full width?

[Tampa]

Anything shorter than 4 characters it only covers about half the width for me. Not really sure why.

[larkox]

@Tampa there has been some recent changes regarding the channel buttons. Do you mind checking if your problem is solved in the latest beta?

[Tampa]

@larkox I am currently not part of beta testing so I'll have to wait for the release. Were the performance issues addressed too?

[larkox]

There has been improvements, but not sure if anything that directly addressed what you are experiencing. Would be great if you could give feedback on the latest version. Maybe opening a new issue, to keep the topics separated.

[Tampa]

I'll keep an eye out for the release then and rename the channels back to their original once that is out and see if that fixed it. The performance issues already have two tickets as far as I can tell so I'll not open yet another. :)

[Tampa]

It appears the channels work again, but the app is still ungodly slow and misbehaves a lot when following notifications, trying to search etc. It's really clunky to use still and the space isn't used efficiently which makes it more frustrating to use if your phone screen isn't the size of a tablet. It sometimes takes over a minutes from opening the app to finally seeing channel contents.

[larkox]

@Tampa Do you see anything out of the ordinary in the logs of your app? (Profile -> Settings -> Report a problem)

We have seen that some deployments are having issues with HTTP1.1 KeepAlive connections which result in lower perceived performance and more errors. Probably what you are experiencing is not related, but still would be nice to see if there is anything out of the ordinary in the logs.

[Tampa]

@larkox That just gives me a link to something, which doesn't work. Guess it's meant as link to open the log file? Doesn't work though, unable to find com.mattermost.rn.rnshare.fileprovider/rnshare2/logs/ anywhere on the system.

[larkox]

On android, it should open the share functionality to share the logs. On iOS should open the mail app to send the logs.

What are you seeing exactly?

[Tampa]

It opens up share yes, but when I go to email or copy to clipboard all I get is the content:// link, no actual log data, just the link.

[larkox]

@Tampa Are you on iOS or Android? I remember some issue on iOS if you try to share with anything that is not the iOS mail app (e.g. trying to share with gmail). May that be the issue?

[Tampa]

Android, Lineage OS. I managed to share it back to myself directly in mattermost, so that works.

I van see a lot of websocket errors in the log:

Server Version: 7.10.0 (Build 7.10.0) App Version: 2.5.0 (Build 6000475) App Platform: android Device Model: MSM8994

2023/06/26 12:13:48.605 INFO  channel switch to dtl ydc6tzibh7b83mxeuto13wb4co 210.0 ms
2023/06/26 12:13:48.634 DEBUG error on fetchBindings undefined is not a function
2023/06/26 12:13:48.638 DEBUG error on fetchGroupsForMember api endpoint requires a license; Unknown error
2023/06/26 12:13:48.742 INFO  Running "Channel
2023/06/26 12:17:16.450 WARN  Handling Javascript error websocket error false
2023/06/26 12:17:16.768 ERROR websocket error wss://#/api/v4/websocket?connection_id=8uaz1wmohfyhujd8ssqrpi1baa&sequence_number=5
2023/06/26 12:17:16.808 WARN  Handling Javascript error WEBSOCKET ERROR EVENT false
2023/06/26 12:17:16.829 ERROR WEBSOCKET ERROR EVENT {
  "message": {
    "error": "javax.net.ssl.SSLException: Read error: ssl=0x73a772a688: I\/O error during system call, Software caused connection abort"
  },
  "url": "wss:\/\/#\/api\/v4\/websocket?connection_id=8uaz1wmohfyhujd8ssqrpi1baa&sequence_number=5"
}
2023/06/26 12:17:17.496 DEBUG error on fetchSessions Received invalid response from the server.; Read error: ssl=0x73a58d9808: I/O error during system call, Software caused connection abort```

A bunch of missed websocket event and long timeout things. I checked and the cert is still valid for the server.

[larkox]

@Tampa What version of Android is the Lineage OS based on? I have seen that older version of Android may have problems with TLS1.2, and has to be manually enabled (https://blog.dev-area.net/2015/08/13/android-4-1-enable-tls-1-1-and-tls-1-2/ ). It would be great to rule out this possibility.

[Tampa]

Based on Android 9 as far as I know.

[theAkito]

I literally had to sit at the app for 5 minutes straight to just understand what the point of the original post was supposed to be. Now, I get it. It's the icons left to the text, which make everything look structured & easy to read.

Well, I'm here to strongly oppose the OP, as well as & especially some comments regarding making an issue out of a non-issue. (I am not experiencing any performance impact whatsoever on my precisely 3 year old low mid-end phone....)

I'm voting for closing this issue as "not planned".

[Tampa]

@theAkito Wasting space on devices that sometimes have as little as two inches of horizontal space is an awful experience. What @p01arbear has made shows how much space it ends up wasting and how much more compact, yet still readable messages could be. Never mind that it is different from the desktop apps, when it should be, where possible, look the same or similar to make it easier, more familiar, to use.

The performance issues are something else and still an issue, perhaps that should be split into its own issue ticket.

[theAkito]

Wasting space on devices that sometimes have as little as two inches of horizontal space is an awful experience.

Please, name the model, brand, etc. of an actual device anyone of you is using in real life, so I can see such a device for myself.

What @p01arbear has made shows how much space it ends up wasting and how much more compact, yet still readable messages could be.

The way it is shown on these screenshots makes it clear, that it is less readable. This is however also personal preference, so forcing this weird & very uncommon 2cm issue on everyone is unfair.

The performance issues are something else and still an issue, perhaps that should be split into its own issue ticket.

Not an issue. From what you said about the device size etc. I already presume, you guys are using some antique devices, which you ought to replace anyway, rather than blaming the UX of an app, which works great for 99% users, since they have a normal & common device.

---

Where do all these ideas come from, that every app must support some 12 year old Android 4.0 device, which is not only tiny, but also obselete, slow & absolutely insecure....?

I am right now using a 3 year old low mid-end phone & the screen size is not an issue, neither is performance!

[Tampa]

The desktop app does not lay out the chats like that either, commonality is key in making things easy to use. Having a mobile app behave or look vastly different to a desktop app is counterproductive. The desktop app goes even further by placing the status indicator and username inline with the message.

The model of phone doesn't matter. The screen size and resolution are the important parameters when it comes to app scaling. If you had read the rest of the ticket you might have picked up on the fact that I still use Android 9, which while older, still works perfectly fine otherwise. Buying a new phone each year is wasteful and not necessary. Also has nothing to do with a UI design issue that is solely dependent on screen size and resolution.

Older devices being slower is a given, but this affects all apps on that device. So if a app feels slow, especially in direct comparison to previous versions of that app, on a specific device then it has nothing to do with the performance of the device. If anything it hints at inefficient code or a bug somewhere that might be masked through more powerful processors. Nonetheless that is something to investigate as poor code performance is definitely not ideal.

If you have no problem with how things are, great that's good for you, but that doesn't mean others might not take issue with design decisions or changes to performance. Adding a more compact view hopefully would be implemented as option, just as it is on the desktop app and fixing a potential performance issue benefits everyone, through faster loading or less cpu=battery usage.

[theAkito]

The desktop app does not lay out the chats like that either, commonality is key in making things easy to use. Having a mobile app behave or look vastly different to a desktop app is counterproductive.

Actually, it looks exactly like that. Just checked in Mattermost Web UI on my server! It's exactly the same experience, so changing it on the phone, would make it "less easy" according to your explanation.

The model of phone doesn't matter.

It matters, if your phone is really that tiny & antique and now I also realise, why you guys never mention your phone models. Because you know exactly, that there is no problem with the app. The problem is with your hardware.

The screen size and resolution are the important parameters when it comes to app scaling. If you had read the rest of the ticket you might have picked up on the fact that I still use Android 9, which while older, still works perfectly fine otherwise. Buying a new phone each year is wasteful and not necessary. Also has nothing to do with a UI design issue that is solely dependent on screen size and resolution.

I repeat myself the second time.

I am right now using a 3 year old low mid-end phone & the screen size is not an issue, neither is performance!

So, not sure what strawman said, you need a new flagship phone every year.

Older devices being slower is a given, but this affects all apps on that device. So if a app feels slow, especially in direct comparison to previous versions of that app, on a specific device then it has nothing to do with the performance of the device. If anything it hints at inefficient code or a bug somewhere that might be masked through more powerful processors. Nonetheless that is something to investigate as poor code performance is definitely not ideal.

Actually, it does. A lot. If you only use timer apps or those old school F-Droid apps, that specifically are designed for obsolete version of Android, then comparing this masterful app with those apps is like comparing a bicycle with a motorcycle, because both technically feature two tires.

If you have no problem with how things are, great that's good for you, but that doesn't mean others might not take issue with design decisions or changes to performance.

Now, this statement is just utterly bonkers, dishonest & outright appalling.

You are the ones who have "special" phones with "special" requirements. Everyone else does not care about this "issue", because there is no issue. In this entire issue there were literally only 3 people who agreed with each other on this issue. The OP, you & some random visitor, who did not comment on this issue, yet. Everyone else is fine with how the app is now. So, please, do not be dishonest about it. Do not make it seem, like everyone agrees with you, when obviously the opposite is the case or else this issue would have a 1000 thumbs up by now. Which it has not, because simply nobody finds this "issue", because nobody searches for a non-existent issue. The reason I found this issue in the first place, is because I opened two issues in this repository today (two ACTUAL issues) and I had to research similar issues, before opening mine. Otherwise, I wouldn't even have known about this, because, as I said, nobody searches for this "issue", because it's not an issue!

fixing a potential performance issue benefits everyone, through faster loading or less cpu=battery usage.

Again, a manipulative, dishonest & outright appalling statement.

It won't benifit "everyone" if you guys with ages old phones are the only ones having a problem with anything.

---

Once again, I am voting to close this issue as "not planned". This particular user does not even want to admit what ages old phone he is using. If we cannot even get to that point, then this issue has not only no point, it has minus points, since we probably otherwise could confirm, that this "issue" is about the users' phones, rather than the app itself.

The app is fine, as it is. Everyone agrees, except these three Nokia users.

[Tampa]

Since you are so desperate to know I use a HTC One m9 primarily and also have a Doogee S88 plus. The latter has a screen with over an inch more diagonal. They are both similar in resolution for the horizontal, with just the vertical being slightly different. The scaling factors are different that especially on the larger Doogee the amount of text per line is actually less, making it even worse in terms of wasted space.

Again, if you have no problem with the app, great, that's missing the point of the ticket entirely. If you don't want anything to change why are you even here. The ticket was opened to take note of the fact the app has no compact mode unlike the desktop app, so adding that back in as option and possibly making it the default given the orientation of the screen is different on mobile so horizontal space is more limited. Your attitude towards me is entirely unjustified and frankly insulting, I would appreciate if you could check your tone.

[Tampa]

@larkox With the latest update to server the loading times for app start did improve and I get to the channel list quicker now. Process for updating channel status unread though still takes quite a bit of time. On app load is any channel data loaded or does it only check for unread message status of the channels? Reason I'm asking is because it seems like the more unread messages there are the faster a channel will load curiously enough. A channel with 140 unread messages loads significantly faster compared to a channel that hasn't seen a message in days.

[theAkito]

why are you even here

Now, I think you are just here to troll, aren't you?

I am here to stop this non-sense. I am here to prevent an update, which benefits nobody but three people among hundreds of users, to be released, just to destroy the UX for 99% of users.

Either way, not arguing with dishonest trolls, who try to hide the fact, which antique devices the use, until they are asked multiple consecutive times about it.

Nobody sees this issue, because nobody searches for this issue. Nobody searches for this issue, because nobody has this issue, except you.

Stop molesting this app's maintainers with such entitled blame shifting.

Not this app is at fault. Your hardware is. Period.

[Tampa]

If you notice I did not even open this ticket, I merely agreed with it's premise along with others in here. If you don't that's fine, but that doesn't mean there isn't something worth improving. That you feel the need to argue over something that doesn't affect you is one of the key points of a troll. Straying off topic and attacking people directly is as well.

[p01arbear]

The way it is shown on these screenshots makes it clear that it is less readable.

Can you provide arguments to support this point?

Forcing this weird & very uncommon 2cm issue on everyone is unfair. You guys are using some antique devices, which you ought to replace anyway.

Wasting chat screen space on emptiness instead of text on any-sized screen is an objective technical fact. And there is no connection between the device model and the issue of inefficient use of screen space.

why you guys never mention your phone models. Because you know exactly, that there is no problem with the app. The problem is with your hardware. Now, this statement is just utterly bonkers, dishonest & outright appalling. Not this app is at fault. Your hardware is. Period.

Such rudeness and toxicity do not make the position constructive or strong; it's not a way to argue and engage in a dialogue. Please, abandon this approach and the desire to assert yourself beyond a harmless discussion about UX.

In the very first post, a screenshot is shown from a device that clearly is not old. So it's unclear how anyone can come to the thesis about updating a device every three years if they read carefully.

Let's take a device with a 2400 * 1080 screen.
In Mattermost version 2.9.1, the emptiness in width takes up 19% of the chat window (200 pixels out of 1080) and 27% of the sidebar (290 pixels).
Can you justify why this is good UX when such a portion of the window intended for text is never used for text? For what technical reason or UX can't it be reduced to, say, 5%?

[larkox]

@Tampa Do you mind if we open a new ticket for your problem (the one about loading times)? We have been piggybacking on this one, and they are not really related. If you could do a quick summary of the current situation and mention me, I will look into it a bit deeper.