Supporting multiple user accounts in Mastodon clients - a UX perspective === V1.1 - 2023-02-20 By Ralf Stockmann ([rstockm@chaos.social](https://chaos.social/@rstockm) / [rstockm@openbiblio.social](https://openbiblio.social/@rstockm)) ## Preface Having **multiple accounts on multiple instances in Mastodon** can be a blessing rather than a curse because it gives users the ability to compartmentalize their different communities and tailor their content to specific groups. For example, someone might have a personal account on one instance and a professional account on another, allowing them to maintain separate personas in different online spaces. This allows users to build more diverse and meaningful connections with different communities, increasing the value they receive from using Mastodon. For these reasons, it is **essential for Mastodon client apps** to support multiple user accounts in their GUI. This allows users to easily switch between their different accounts and participate in multiple communities from one central location, improving their overall experience and making the app more valuable to them. I'll offer some hopefully helpful UX patterns and best practice guides for Mastodon app developers on how to address these needs. The following sections are loosely sorted from "easy to implement" to "quite challenging". ## 1. Show the active account. Always. It's essential that the active account is displayed on every screen that matters. The Mammoth app uses the profile button at the bottom, while Ivory offers a dedicated button at the top left. Both of these solutions are fine - it's just a matter of taste.  More important: always display the active account in composer view like this:  ## 2. Use circular user images User images in social media apps are always circular. Just deal with it - it's what people are used to. You can give them the option in the settings to make them square or circular, but by default they should be circular. **[update V1.1]** This section has led to some discussion and even harsh opposition. The tenor: this is not a question of good UX, but merely a matter of personal taste, and no Apple policy provides for such a thing. I tend to disagree. It is a question of discoverability and the "don't make me think" paradigm. It helps the user to know at first glance what an image element represents: is it an image for an avatar, or is it an image for a post. The round shape has been widely adopted for social media applications: Twitter, Facebook, Instagram, Discord, WhatsApp, Facebook Messenger, Threema, WebEx, Microsoft Teams, Apple Mail, Apple Messages, to name the most popular. And there are good reasons to use circular images for avatar images: they go well with round face shapes, and they are very clearly distinguishable from rectangular content images. They represent a different class of GUI element. And yes, I am aware that the official Mastodon website and app only use rounded avatar images: they should change that for the sake of the users. And remember: this may not be the most important item on the list - but the list is not sorted by relevance, but by complexity of implementation. This is a low hanging fruit for sure. ## 3. Offer fast account switching Changing your account should not be hidden in menus or settings, but should be possible at any time by long pressing on your avatar image - in both timeline **and** composer views. ## 4. Use a clean design for the account picker The account picker should contain this information: - complete name of the account (just "rstockm" is not sufficient, for it could be both rstockm@chaos.social or rstockm@openbiblio.social) - user avatar picture Let's take a look at some examples: ### The good: Ivory  ### The bad: Ice Cubes  Cluttered, wasted space ### The ugly: Mammoth  Missing account names, the colours feel random and distracting ## 5. Offer "interact as..." wherever possible Several times a day I want to **boost**, **reply to**, **bookmark** or **like** a post - but from/with another of my accounts. Therefore, it should be possible to interact with a post from another account without having to "really" switch accounts. Best practice can be found on Ivory: a long press on the like, boost etc. button opens an account picker. It's essential that this is available from the detailed view, as it is on Mammoth:  But it's _even_ better to offer this in every timeline view, like Ivory:  However, the booster rockets are redundant to the "Boost from..." text. It would be much better to show avatar pictures like in Mammoth. :::warning Warning: these quick "do xy as..." actions should never result in an account change. ::: ## 6. Set the right target for iOS notifications Nearly every Mastodon client supports push notifications. There can be multiple notifications from one account, or multiple notifications from different accounts.  When I tap a particular notification, I want to interact with it. So it's **important** to set the right target for the links of these notifications, i.e. tapping on a notification not only opens the app, but also a) loads the associated account, and b) displays the specific post, not the home or activity timeline. ## 7. Proposal: better navigation to unread notifications within the app This is where the fun begins. Let's imagine this scenario: I missed the notifications on my iOS homescreen. But I see the number of unseen notifications badge on the app icon:  It would be a _bad idea_ to start the app and show just the notified posting(s). Unless I decide to tap on a particular notification (see 6.), the app should always load the last active account/view. But how do I find the new notification? **Ice Cubes** does it the wrong way:  There is a "3" new badge on the activity button, but the notification are from other account! So when I tap on it, it only loads the already seen activity timeline of my "wrong" active account. Now I have to go through all six of my accounts to find the lost notification. Meh. Way better: a) show on the activity button only the number of new notifications for this account. For the other accounts, use the profile picture/switcher like this:  And when I long-press the account-switcher, this would be displayed:  Now it's crystal clear which account has how many notifications. If I clicked on the account, the account would load and the notifications view would appear. The badge count for that account would be set to zero, but not for the other accounts. ## Comparison of the clients To the best of my knowledge (as of 2023-03-10)  https://next.wolkenbar.de/s/cSY776zcwEmSTY3 ## Join the discussion Get in touch for: - missing clients - change my mind! https://chaos.social/@rstockm/109847874619471344 ## Changelog ### 2022-02-10 V1.0 - First draft ### 2022-02-20 V1.1 - Added Mona, Woolly, Tusky and Fedilab to the chart - Longer explanation why #2 - circular avatar images - belong on this list