UI overhaul needed

[jwr1]

Description

Interstellar desperately needs a UI overhaul; some parts of the UI are overly cramped, some parts are unintuitive, and many parts the visual aspect could be improved as they just don't look good. I'm no graphic/ui designer, so if there's anyone that would like to help, please do so, other wise, I'll need to take inspiration from other fediverse/forum apps that actually do look good.

Several people have mentioned wanting a "compact" mode. I'm not exactly sure what they are thinking of (especially since we already have a "compact preview" option), but it's something to keep in mind (maybe less padding between cards?).

Related issues:

• Content navigation bar is cutoff on the right-hand side of the screen #26
• Magazine explore page extremely cramped  #59

[AndrewMathis13]

I can play around with things this weekend and try to rework the interface to simplify it a bit. I don't know enough about programming to actually write code for any of the changes, but I can definitely provide mockups with dimensions for anyone else who has the time and technical know-how to implement them.

[jwr1]

That would be great! Any help is welcome :)

I just want to put this here, but I think the UI design from the vucuit app looks nice. There are several Lemmy apps we could take inspiration from as well.

[dalz]

Regarding the compact view, compare Interstellar (with compact preview):

with Redreader:

Redreader fits 7 posts with full titles, Interstellar 2 with truncated titles.

[jwr1]

@dalz, you're right. I see what you mean. Even setting the Media Position setting to the right side (instead of top) doesn't help.

[AndrewMathis13]

That's kind of where I was going too. I played around with it a little, but I couldn't find a way to reduce the size of the standard card enough to justify a compact mode as-is. So, I decided to instead just strip it down to the basics and rearrange the layout from there, and I think this works a lot better.

[dalz]

@AndrewMathis13 looks great! I'd suggest removing the space around the cards too, or at least have an option to do so, to not waste any space.

I'd like to note also that the top and bottom bars take up a lot of space and do not go away while scrolling. IMO they should aleays hide on scroll, even on the standard layout. It would be nice if there was an option to remove them, maybe moving their content to the floating button or sidebar, but it could be low priority.

[jwr1]

Agreed, @AndrewMathis13, that looks great! When I get a chance, I'll see what I can do to replicate it in code.

@dalz, I know this wouldn't be the same as hiding the top part, but you can at least hide the "tabs" part of the top bar in the settings, so that it looks like this instead:

If you want to do that, go to settings, then Actions and Defaults, then change the "Set Filter" location to be anything else.

[AndrewMathis13]

Great! Below I'll include the measurements I was working with for both the page itself and both styles of cards to hopefully make implementing them easier.

Also, the search page still needs a few more adjustments, but after that I'll start working on the profile and settings pages this weekend.

[AndrewMathis13]

It took me a little longer than I originally anticipated, but I've finally finished the explore, notifications, and chat pages. I'm still working on the settings page, and the profile page needs a few more tweaks, but then I can work on finishing up the other miscellaneous pages as well as the compact mode and a better optimized layout for large screen devices.

For the explore page, I thought it would be better to condense it all down into one page, and then provide the user with options to filter through the different search types. If there is some way to merge all the search functions into one bar with one singular feed of results, with the option to then filter by result type if desired similar to how search works on Mastodon apps, I think that would be optimal. However, if that's not possible, then we can just remove the "all" filter chip, and just use the other buttons to switch between the different search types, but ideally still keeping everything on the same page.

No big changes for the notifications page, just a few touchups here and there. However, I did kind of make a pretty big overhaul to the chat page lol. But the redesigned chat page isn't functionally any different than it is currently, so, with the exception of the updated text input field, it should only be visual changes. But if the updated design for the text input field, or honestly even the whole chat page redesign, ends up being too difficult to implement in code, I can definitely work around it and try to come up with something else instead.

[jwr1]

Wow, that looks amazing! I think it totally makes sense to condense the Explore page; a lot of the filtering/inputs/interface was the same between the tabs anyway. I also like the design overhaul for the messaging page; it makes it a lot more consistent with other chat interfaces.

Unfortunately, for the Explore changes, you actually have to search something first before it will show anything for the "All Search" (that's just how the API works), whereas for the "Magazine Search", "People Search", and "Domain Search", you actually don't have to search anything and it will show you a full list of magazines, people, or domains. So maybe we could still have the "All", "Magazine", "People", and "Domain" filters as you have in the design, but we could have the "Magazine" filter enabled by default, and then if someone switches to the "All" filter, we could show a message saying they have to enter something in the search field first.

Overall, I love the designs, and I can't wait to implement them! I just need to see when I actually have time to do so.

[jwr1]

I mostly got the chat/messaging interface done. I did add a few things, such as the timeline for date & time, and grouping messages from the same person. I still need to work on the input field though; I'm just not exactly sure what to do with it, since the current version has a lot going on in it. I could leave it as is, or I could make it so it's just a simple text field that expands into the whole editor when a button is clicked on (like how it is in the design).

Anyway, here are some screenshots:

[jwr1]

Here's the new notifications screen:

And the Explore page (I still need to work on the info button):

[AndrewMathis13]

Wow, it's looking great. Hopefully it hasn't been too much trouble to implement. Also, I think adding timeline labels to the chat interface was a great idea!

I've also (mostly) finished with the user's profile page, though I do still need to make a few more tweaks to the page when viewing someone else's profile.

[AndrewMathis13]

Okay, the Settings page is done. I took inspiration from the Moshidon Mastodon client and regrouped the various settings into six different groups and gave each of them their own sub-page. All of the settings options have the exact same design specifications, 12dp top and bottom with 16dp spacing on the left and right and in-between elements, unless otherwise noted in the images below.

While I was redesigning the settings page I thought of some functional changes and some additional settings options that other fediverse clients have that I thought Interstellar could also benefit from:

• Add option to change where web links open.
• Add reminder to add alt-text to posts.
• Option to disable gifs from auto playing.
• Option to ask before unfollowing someone or a magazine, before boosting a post, or before deleting a post.
• Option to automatically load new posts without having to refresh the feed.
• Option for "See new posts" button when new posts are loaded on the feed.
• Option to disable haptic feedback on the device.
• "Use Dynamic Color" and "Color Scheme" can be combined into "Color palette."
• Option to always reveal content warnings.
• Option to hide/show media marked as sensitive.
• Accessibility feature to reduce animations for app interactions.
• Option to disable the ability to swipe between tabs.
• Option to choose which type of notifications the app will notify you about.

[jwr1]

@AndrewMathis13, wow, that looks amazing and very thorough! I really appreciate the help (and all the past designs as well)! Interstellar is already looking much better.

I do have a few things to note, though:

• There are actually a few options that also have corresponding settings in your Main account's settings. For example, if you go here: https://kbin.earth/settings/general (or whatever your Mbin server is), you can configure what types of events you'd like notifications for (like new threads in magazines, replies to you, etc.). We already have an option to change this (and update your Mbin account's settings) in the edit profile screen. So my question for this is, do you think we should have these types of "duplicate" settings in the app (like a way to set your Mbin account's notification preferences, and also a way to filter out notification events locally)? If we allowed both, then there are really two settings you have to think about and that would probably be confusing, so I'm not really sure what would be the best way to handle it. I think maybe the best thing to do would be to move those Mbin account settings from the profile edit page into the actual settings page and have the notification settings linked up with the API. This would mean you couldn't have per-device notification settings, though (unless we wanted to take advantage of Android's "notification channels", which would make notification configurable through the device settings. The same goes for the NSFW settings as well, though. Hopefully, that all made sense :)
• Also, I see there are new settings for "Always reveal content warnings" and "Cover up media marked as sensitive". I was wondering what the difference between those is? To me, it sounds like they are the same, but just opposites of each other?
• "Disable swiping between tabs" sounds more like a "behavior" setting than "display" since it doesn't change anything visually, but it does change what happens when interacting with the UI.
• For "Automatically load new posts", is that supposed to be the infinite scrolling we have going on for most list views? If so, I'm assuming disabling this would show something like a "load more" button?
• What are you expecting for the "See new posts" button?
• I see you placed "Keyword Filters" under the "Feed Actions" setting. Honestly, I think it might make more sense to make a new section on the settings page for "FIlters", maybe? Because the original idea for "Feed Actions" was supposed to be configurable buttons (or "Actions") that you can set to the different parts of the UI, like the "Tabs", the "AppBar", the "FAB", etc., and I'm just not sure that "Keyword Filters" really fall into that category. What do you think?
• For the "Notifications" settings screen, unfortunately, there is no way with Mbin to get notifications for "Boosts" or "New followers". Instead, I could just try to fill it in with the notification preferences Mbin does support (which was touched on above). For the "Get notifications from" setting, would that be like a way to whitelist/blacklist which "authors" of notifications would be allowed? There's definitely not a way to do that natively with Mbin, but it's possible we could manually analyze the notification payload as it comes through and filter/allow it there. It would probably make sense to move the Register/Unregister Push button to the notifications settings as well, maybe in the form of a toggle switch.
• I see the new Keyword Filters page is a lot more detailed. If I understand correctly, each filter is more like a "filter set", where it contains a list of words/phrases that will filter out and can be enabled/configured as a group. The "Duration" option seems interesting; I'll likely include it, but I can't really think of any use cases for it, and was wondering what other apps have it or where you got the idea. Also, I see you mentioned the muted words should match full words only, which totally makes sense, but should we also give the option to use regex if somebody wants to (maybe it could be another setting for the whole filter)?
• For the account switcher, I was just a tad unsure about the new design. For instance, there's no initial indicator on what account you currently have selected, and it does seems a little weird to have a log out button if you don't even know what account you're logging out of. The additional dialog also caused an extra click or two in order to switch accounts, but I feel that was inevitable anyway once the settings page got more detailed. The fact that it's a pop-up also means it could be accessible in different parts of the UI later on as well. So it's probably for the best to have it like that.

Wow, that felt like a lot; hopefully it's not too much feedback :) You don't have to redesign anything (I can make whatever changes we want as I go); I just wanted to get your opinion on those points (as the designer). And again, I want to thank you. There's no way I could ever get an app to look this good by myself :)

---

Unrelated to that, I have been wanting to mention a few other things:

• For the profile page, I actually already finished implementing most of it, I did feel like maybe the extra about section was unnecessary though (due to api constraints). Since it includes entries for Reputation and Moderated which isn't possible to get with Mbin right now (I would really love to have the option though). And if you're viewing on Lemmy, you can't even see the Following or Followers sections (Lemmy doesn't support user follows), so all you will see is the "Joined" entry. I did think the "What's in the handle?" pop up is a good idea, but I was exactly sure the right way to implement it. For example, would it show up if you click the user's main name, the smaller username underneath on the left, or the new highlighted domain section of the username? Also, should it pop up for all user profiles or just your own? If the highlighted domain button does open the pop-up and it's only supposed to show on your own profile, should it be unhighlighted for other profiles? Also, originally, you could tap on the username and it would copy the handle; if the "handle" pop up shows for every profile, we could just make the field that has the handle to copy on tap, but if it only shows on your own profile, then that's not as useful.
• For the feed design (which I still haven't gotten around to implementing yet), at the moment, we have where the same widget that shows up in feed (with the post title, image, buttons, etc.) also shows up in the post page (with the comments). I'm assuming that no matter whether the normal or compact mode is enabled for the feed view, that the normal mode would need to display for the post view, since at some point you would need a way to interact with the voting, boosting, etc. buttons.

I know I had a few more questions about the current designs, but I'll try to ask them once I remember again.

---

Even more unrelated, but if you'd like to keep helping with designing, after you've already finished all the existing UI, I think it would be great if we had a welcome screen for Interstellar (for when a user first starts the app). It could include maybe some common settings to easily configure, setting their preferred language, some info about Interstellar and the fediverse, and also let you add your first account. That's just an extra, though, totally unnecessary if you don't want to.

Also, we could keep chatting here, but it would probably be easier to do it on Matrix if you wanted (I'm fine with either one though).

[AndrewMathis13]

Thanks, I’ve really enjoyed working on the redesign. Also it’s totally not too much feedback, definitely keep it coming. It only makes the designs better.

• I had completely forgotten about Notification Channels in Android! So then yes, I think I would be better to consolidate all the notification settings into the Settings page and then have the app only modify settings via the API, and then the user can filter out different kinds of notifications from Android system settings if desired.
• Initially they were supposed to be different. “Always reveal” was for expanding the content warning on the thread or post, while “Cover up media” was to blur or hide images even if the text content of the post was visible. In hindsight though, they could probably be combined into one toggle. But if we instead want to keep them as separate options, then they should probably be renamed to avoid confusion.
• That’s a great point. That would be better placed on the Behaviors page, maybe under the toggle for animated gifs?
• It could be part of the same thing, but it’s whether or not you want Interstellar to automatically add new posts to the top of the feed as they’re published versus the user pulling down to refresh to load the new posts. So the top of the feed wouldn’t necessarily have a “show new posts” button, but if it was combined with infinite scrolling, then it would at the bottom of the feed or page if the feature is disabled.
• As a part of the “automatically load new posts” feature in a lot of Mastodon clients, a button comes down when there are new posts available at the top of the feed, and if clicked, the button takes the user up to the top to view the new posts.

• We could maybe just rename “Feed Actions” to “Filters” and then move the “Advanced” subsection out and into the “Display” page instead. It would have to be renamed obviously, but if we added another divider above “Always show instance” we could place the advanced feed actions sub-page there in-between the dividers. I guess my question then is would we also want to move the “Feed Defaults” under the “Display” page as a sub-page as well? Though as a follow up, should they go under “Display”, or do you think it makes more sense for them to go under “Behavior?”
• I think that’s a good idea. As for the “Get notifications from” it was initially going to be from the preset options of Anyone, Followers, Mutuals, Following, or No one. Though the API probably won’t support that either, but I do like the idea of a deny list of accounts a user doesn’t want to be notified for. The notification should probably still be shown on the Notifications page, but Interstellar wouldn’t notify the user. I also like the idea of moving the Register Push toggle to the main notifications settings page.
• Yeah, several Mastodon clients I’ve used on Android group filters together like this, and I may be a little biased, but I think it’s super helpful and additionally it keeps UI a little cleaner too. Personally I haven’t set a duration limit on any filters yet, but I think it could be beneficial if a user just wants to take a break from a specific topic for a while, or wants to avoid seeing any spoilers for a film or show before they’ve had a chance to watch it. But the official Mastodon Android client plus a few others that I’ve tried also have the duration limit for filters. I do think adding the option to switch to regex is a good idea, but I think we’d want to put the toggle on the page for an individual filter group, so users can have more granular control over how they want the filters to apply.
• That’s fair. There are a few options we could implement additionally. We could replace the account icon in the bottom navigation with the profile image of the active account, again like a lot of Mastodon clients do. If we did that, then add a long press to the profile image on the nav bar to invoke the account switcher outside of the settings page. Or we could replace the account icon in settings with the user’s profile image. If you don’t like either of those ideas, then I could try messing around with the main settings page and try to add the profile image, username, and handle to the page instead of the button. Or potentially, I could try adding the “Log Out” button to the account switcher instead of it being a separate option.
• Okay, well in that case we can just remove the about section completely and I can put the date joined elsewhere on the main profile card. For the “What’s in a handle?” popup, it should show up if you select either part of a user’s handle, and then you can copy the account address by selecting the box in the popup with the user’s full handle. The popup should be accessible on all profiles, the only difference being the text “Your handle” should be replaced with “Their handle” when viewing someone else’s profile.
• And as for the posts, yes it would have to be the normal card. However, I am considering changing the layout a little when viewing a full post and comments over just displaying the same card a second time. Though I still need to figure out how I’m going to tackle displaying threaded comments under the post, so I’m not a hundred percent certain yet how it’s all going to look.

Additionally, I would love to design a welcome screen for Interstellar. I still need to finish the expanded posts/comments view, make a few more changes to the profile page when viewing someone else’s profile, update the magazine page first, and then, as long as I’m not forgetting something else, I can start on the welcome screen. I do also need to make a few tweaks to the whole layout for large screen devices, but I’ll do that last.

Again, thanks for all of the feedback, it really helps. Also, we can totally move this conversation over to Matrix if that’s easier for you.

[jwr1]

Alright, that all sounds good to me 👍.

I just made a new matrix room dedicated to development that we could chat in: https://matrix.to/#/#interstellar-development:matrix.org. If I have any small questions while implementing things, I'll just ask you there if that's fine (and vice versa).

[melroy89]

@AndrewMathis13 wow again very impressive! Your work doesn't go unnoticed!

[jwr1]

@AndrewMathis13 wow again very impressive! Your work doesn't go unnoticed!

Yes indeed! It's pretty amazing.

[Dark-Thoughts]

That's kind of where I was going too. I played around with it a little, but I couldn't find a way to reduce the size of the standard card enough to justify a compact mode as-is. So, I decided to instead just strip it down to the basics and rearrange the layout from there, and I think this works a lot better.

I don't if that's still the current design for the compact view, but personally I really don't like wasting so much space for padding and frames, especially when it means that we shrink the thumbnails down unnecessarily. There's empty space within the frames of the different rows, and then again even more empty space between the different rows itself. If we look at mbin's desktop compact mode, we can see that the thumbnails pretty much fill out its entire space in each row. I'd prefer it even more if the rows were also touching and just separate with a line instead.

@dalz You can change the function of the titles to open the comments while the thumbnail / rest of the row opens the linked content, which means you can remove the unnecessary comment button on the right as well.

[jwr1]

I don't if that's still the current design for the compact view, but personally I really don't like wasting so much space for padding and frames, especially when it means that we shrink the thumbnails down unnecessarily. There's empty space within the frames of the different rows, and then again even more empty space between the different rows itself. If we look at mbin's desktop compact mode, we can see that the thumbnails pretty much fill out its entire space in each row. I'd prefer it even more if the rows were also touching and just separate with a line instead.

Yeah, I was actually planning on doing it that way (with no space between rows and just a divider) because I know the majority of people who would use compact mode would want it like that.

[jwr1]

@Dark-Thoughts, here's what I have for compact mode so far:

[Dark-Thoughts]

Yes, definitely better. I'd just remove the rounded edges on the thumbnail and the empty space around them, have them use that space fully from top to bottom.

[jwr1]

@Dark-Thoughts, like this?

[Dark-Thoughts]

Yesssssss!