Local-only UI rework

[exstral]

Here is the local-only UI redesign that we are using on https://queer.haus

It would be nice to have some of this merged into upstream as we are running this in production since a year now. Let me know what you think :)

Goal

The goal for us was to simplify Local-only posting for users that are new to Mastodon/Hometown and the fediverse. We identified that the separate local only setting complicates the UI. We wanted to make it more similar to the privacy options in other popular social networks that the people we are inviting to the fediverse are more used to.

Changes

The following changes have been made:

• The "Local-only" option has been moved into the privacy dropdown
  • The privacy dropdown has been moved first in list of compose buttons
  • The "Local-only" option has been made the default
  • The "Unlisted" option has been removed, as very few people understand its use
  • The text for privacy options have been changed to more clearly indicate which posts will be federated
• The broken chain icon indicating local-only posts in the feed has been removed and the new Local-only privacy icon is instead shown in the upper corner where the privacy icon is normally shown

This effectively means that the only type of Local-only post that can be made, is a public + local_only post. All other privacy levels are federated. No longer can you create different combinations of e.g. local-only + follower-only posts. I think this greatly simplifies the UI, but for some users it might feel like a limitation.

The database structure is still the same, these changes are only done in the javascript client.

TODO?

• User preference to enable or disable this simple compose UI

[exstral]

Updated the texts in the privacy dropdown to match our latest collective meeting :)

It would be super nice to get the actual instance name and domain there automatically, but I don't know how to do that in this react app. Will ask another collective member to help out.

[exstral]

Rebased on latest hometown-dev and added changes to automatically pull the instance name and domain from the page title and location url. Makes it easier to understand for new users instead of "local only". This is what it looks like on Queer Haus ✨

[bcj]

I have some mixed feelings on this. I'd love to have more visibility options, not fewer but I don't think that's actually good for Hometown since the number of not-obviously-different options is already confusing (esp. for people coming from twitter).

I personally like Unlisted but I support dropping it because it's usage is somewhat niche and I have no idea how you could succinctly word what it does to make it understandable. Also happy to see local-only DM go away because that's only ever caused me problems.

The setting I would absolutely hate to lose is local followers only. That is my main visibility setting, and I think there might be broad enough support for it to keep it as a 5th option even if that means Hometown still has more visibility options than base Mastodon.

I am unsure if the truth is all 8 of the current visibility/federation options has some small contingent of vocal supporters, so I don't know if the only real option is the toggle to allow the old functionality (that then has to also be supported forever) or some small number of people are disappointed with what is broadly more usable for more people

[exstral]

Thank you for your input @bcj :)

I'm also hearing from others that the Unlisted and Followers+Local is quite popular options. Maybe we should just add them to the dropdown then. It does become more difficult to make it a coherent and simple UX though. I've been playing around and made this work locally. It's more to learn for new users, but maybe that's not a bad thing. I guess they would just stick to the defaults until they learn more.

(We have a theme that uses color to indicate post visibility. I've also changed some of the icons to make them work together better, up for discussion)

On the other hand I do like the simplicity that would come from roughly having the same post privacy options as the different main timelines. That kind of simple logic "the local post goes in the local timeline" makes my mind happy.

• Local only = Public + Local only = shown in Local timeline
• Public = Public + Federated = shown in Federated timeline
• Followers only = Followers + Federated = shown in Home timeline
• Direct message = Direct + Federated = shown in Direct messages view

Adding these two additional options it becomes less obvious what is shown where:

• Unlisted = Unlisted + Federated = shown on your profile, but not in timelines, except sometimes
• Local followers only = Followers + Local only = shown in Home timeline, but only on this instance

Thoughts? :)

[MaybeThisIsRu]

Unlisted = Unlisted + Federated = shown on your profile, but not in timelines, except sometimes

How about rename it as "Semi-public" and then the description becomes: "Visible to those who view your profile feed, or click a post link elsewhere."

[exstral]

Hi again! I've now rebased and cleaned this up. Changed the icon for local private which I didn't like.

@hirusi I think it is best to keep the name "Unlisted" since that is what other instances use, less confusion.

This is the current state:

I think this is ready for final review and possible merge now :)

[a-dows]

I really like the bit where it says the name of the site instead of "only to my instance" but I also like the combination of separate public/unlisted/locked and federated/local-only toggles. Dads.cool is smallish so I usually post unlisted to not clutter the local, which is in heavy use. I'm also against too many options in one dropdown—and I think 6 is too many options.

[MaybeThisIsRu]

@hirusi I think it is best to keep the name "Unlisted" since that is what other instances use, less confusion.

That's true. However, in the spirit of making it easier for those coming to Mastodon/Hometown for the first time, I think "Semi-Public" or something similar still has merit.

When I read "Unlisted", at first, I have no inkling what this could mean. Not in a list where? Which list? Semi-Public already gives me a mental idea of what the description is about to be, and is more friendly for day-to-day speak.

[exstral]

@a-dows yes I agree there are a bit too many options... but compromises usually end this way? I don't really see a better solution for now? If you have better ideas please share :)

@hirusi I understand your concern and I agree that the "Unlisted" name is confusing, but I don't find "Semi-public" more descriptive. "Unlisted" is at least used on sites like Youtube when selecting visibility of your video, unlisted there means it cannot be found by searching or recommendations, only by direct link. The meaning is not exactly the same here but similar. Regardless, this pull request already changes a lot about how the privacy options work, so I think renaming existing options is a bit outside the scope of this ticket.

[dariusk]

Finally getting a chance to review this (is my executive function back? who knows!) and I do know that on Friend Camp we have a lot of people who rely very very heavily on Unlisted, even for local only posts! This is because we have a lot of, shall we say, frequent posters, who don't wish to clutter up the local timeline with their posts. If we were to support this mode, that would be 7 whole posting options in the menu, which I guess might be better than the current 4 + 2-way toggle, but not by much...

[dariusk]

Tagging this for the v1.1.0 milestone because I plan to review and possibly cherry-pick individual changes.

[j12i]

I really like the visual changes (e.g. reordering of buttons below edit field).
But please keep the seven visibillity options. (local+direct is useless obv.)
I'd like to see a two-dimensional control!

[j12i]

I made a small mockup with element inspector.

What I would like is to pair the public, unlisted & followers-only icons with the local icon if local is selected.
What I would love is a different highlight colour for local & fedi, respectively, but that would require theme support I think? Maybe something for @exstral if they will want to keep consistent with hometown's implementation of this.

edit: also the strings describing the vis opts could change depending on the fedi/local selection.

[dariusk]

@j12i Really interesting mockup! I'd be curious to hear other people's thoughts on it.

[bixfrankonis]

I like this mockup better than the alternatives so far. (Disclaimer: not currently/yet a Hometown admin or user.)

What I would like is to pair the public, unlisted & followers-only icons with the local icon if local is selected.

Clarification: do you mean in this mockup or in the timeline? (Because I was just thinking about that re: the timeline.)

[dariusk]

@bixfrankonis by "the alternatives so far", are you also counting the current implementation as documented on the wiki?

https://github.com/hometown-fork/hometown/wiki/Local-only-posting#how

[dariusk]

Linking to this post because there is also some discussion over there:

https://weirder.earth/@j12i/108272920888606108

[bixfrankonis]

@bixfrankonis by "the alternatives so far", are you also counting the current implementation as documented on the wiki?

Yeah. I know why I feel this way but I’m too exhausted to put it into words. I’ll try to expand on it tomorrow. Else by tomorrow I’ll have changed my mind.

[prestia]

I was toying with this a bit tonight and riffed on @j12i's version:

A few notes:

1. I liked the proposal from @j12i, but I wanted to keep iconography consistent with Mastodon/Hometown/third-party apps without needing to mash together the privacy and fedi/local icons. I was worried that could look busy and add a lot of extra work if the standard icons ever change.
2. To ensure it's easy to see the fedi/local selection, I proposed putting the icon in the "post" button. I suppose this could also be done with dynamic text (e.g., "Post locally!").
3. I moved the Federated/Local split panel to the top. This is totally subjective, but it felt better to me.
4. The "Mentioned people only" option should disappear if "Local-only" is selected at the top.

[biglifedecision]

i love prestia's menu mockup.

i already expressed this on fedi, but bringing it here for discussion. Since hometown is "mostly Mastodon" (and i understand it intends to stay that way) i think it's important that the posting options stay as similar to Mastodon (and, crucially, to how they appear in mobile apps, which will be based on the Mastodon spec for the most part) with Hometown's local/federated option appearing as a 'bonus' selection. We have a lot of users who primarily use mobile apps, and may occasionally use a browser to post. So keeping things consistent between the browser experience and the app experience (which is going to be, for the most part, mainstream Mastodon + the :local_only: emoji workaround) is important for us, especially for newer/less savvy users.

I get that this creates a large and confusing matrix of posting privacy in practice, but if users learn the mainstream Mastodon posting options, they will also understand the local/federated differences and be able to figure out what they want for their defaults, or for a specific post even if they can't keep the full matrix of every combination in their head at once at all times. Removing an option that users will see in their mobile app, and referenced by everyone else using Mastodon will create more confusion imo.

Along those lines, here are some more out there suggestions that i am not even sure are a good idea:

less controversial suggestion:
if a :local_only: emoji is being used it shows up in the posting option menu (instead of the broken chain?) to unify the meaning of that emoji for the user (ah yes! whatever that emoji is, it means local only!). perhaps instances should just use the broken chain as the :local_only: emoji to achieve this though.

most controversial suggestion:
if a :local_only: emoji is being used it is automatically added to a local-only post if not present (so it is indicated as a local only post to a mobile user). i'm not even sure if this is a good idea, just throwing it out there. perhaps it's an option admins can chose to turn on or off.

[dariusk]

Oh that's *very* interesting, the idea of linking the local only emoji to the UI icon itself. I'm going to think about that for a while.

[biglifedecision]

rather than the generic broken chain (suggesting exclusion from federation), we decided to make a :local_only: emoji that would suggest the inclusion of the post in a local only space. so we made a instance-specific emoji (in our case, 438punk.house, a tiny house with 438 on it and black flag on the top). the idea of instances choosing their own local symbol to indicate local only could be good for reinforcing whatever your community vibe is? very hometown-y? esp if using the emoji workaround for apps is going to be a think for awhile?

[prestia]

I agree with all of @biglifedecision's points. The only suggestion I'd push back on is adding anything (even just an emoji) to an individual's post. If that's something Hometown adopted, we'd need very clear notice and the ability to disable the feature. But, hey, it was labeled the most controversial suggestion!

I feel pretty strongly about retaining the default Mastodon iconography for the sake of consistency and maintainability, but there are some real opportunities to improve the Hometown-specific experience in my mockup:

1. Allow for custom federated/local-only iconography that is pulled into the privacy dropdown and post button. We'd likely want common aria-labels for accessibility.
2. Custom "long" text for privacy options when "Local-only" is selected (e.g. "Visible for all" becomes "Visible to all of %{instance}"). No one should have to guess where their posts are visible, and I think we can make a big impact here with relatively little work.
3. My controversial suggestion: Remove references to jargon like "Federated" and "instance" in the Federated/Local-only selection. I'm not suggesting we remove all references to "Federated" in Hometown/Mastodon (e.g., the "Federated timeline" view) (though, if I could, I might). But I do think new Hometown users should be able to immediately grasp where their posts can be seen without needing to learn how federation works or what a software instance is. When showing Hometown to some friends, this has been a consistent point of consternation.

[bixfrankonis]

So, yes, I've decided my initial reaction isn't how I actually feel. I like the existing Hometown UI for selecting "local only" when posting, as it is. (This is what I get for coming to an opinion on a bad, exhausting day.)

However, I'm wondering why the broken-link icon on a local-only post is down in the actions bar where it doesn't seem to belong. I feel like it would make more sense next to the post visiblity icon in the upper right.

[biglifedecision]

@prestia haha yes I do not even think it is a good idea. just throwing out ideas.
I like including instance name almost more than including custom emoji in the Local Only option. it's kind of the same idea i was going for, but probably prettier (emojis dont really appear in interface things elsewhere in Mastodon/Hometown). problem for long instance names maybe? but i think that's a really cool idea and maybe better than sticking an emoji in there?

[MaybeThisIsRu]

I like @exstral's original suggestion the most. It should be as easy as possible to post locally. Two toggles are often confusing. I once onboarded a friend who isn't even Twitter savvy and she really struggled with Hometown... it was too confusing.

A simple option like "For %instance only" or "For my followers on %instance only" is amazing in that respect.

[MaybeThisIsRu]

Some more context: some people on SmallCamp are usually posting to their followers only. Even when they make it local, it's often left at "locked" and that's not fun... it's just a small oversight but makes a local community harder on a tiny instance.

[lawremipsum]

I like the mockup and prefer it to some of the other suggestions in this thread. I'm not enthusiastic about reducing the number of scopings to choose from, and the mockup seems to preserve the most options while reducing clutter.

[rscmbbng]

Sane defaults are nice, I think the proposal of #907 (comment) is the strongest. Just wondering what that box will look like with long instance names..

[dariusk]

I really appreciate all the work that has gone into this. This is such a tricky UI issue as evidenced by the complete lack of consensus on which of the proposed mockups is best. I am reaching out to a UI designer I know who is a long time Hometown user to see if they have further thoughts.

[thomasmdickinson]

I love the idea of adding the server name and/or url into the menu text.

I'm late to the party here, but I have a thought on this and wanted to share. I'd propose a simplified menu with a small number of options, say for instance the four originally proposed by exstral, with the addition of a "More Options" item. This, when selected, would expand the menu to list all seven possible visibility options. And perhaps users could opt into seeing the "advanced menu" by default.

I think this solution would be easier and more intuitive for most users, without removing options for those who want them.

[dariusk]

Taking this off the v4.x.x+1.1.0 release because it's too big a feature for now.

[ghost]

here's a mockup based on mastodon 4.0

federated mode:

everything is as you'd expect, just borrowed the federated/local toggle from above.

local only mode:

the main thing i've done here is change the wording of each visibility to indicate that it's local only, and changed the globe icon for public to the home icon.

i find this configuration with the federated/local only option at the top confusing, because the original dropdown used the selected highlight for just one thing, where as now it's being used in multiple places adding a fair about of noise.

i think that i'd prefer keeping the federated/local only options in their own dropdown but still changing the wording on the visibility dropdown to make it clear when local only mode is on.

my actual preference however is to have one dropdown with local only as an option, tho i understand entirely that this would be removing features that people like, it also reduces how complex the user interface is. one thing i've thought about is, well, adding an option to add more options to the dropdown for power users. tho i also do not like the idea of obfuscating functionality.

having the simple dropdown for visibility modes and not a seperate federated/local only mode would also potentially make implementing custom modes in a third party client easier by adding an api for the visibility modes to be fetched from.

anyhow, those are my thoughts as a reluctant glitch soc user.

ps. forgive me nekoarc for misspelling my instance name multiple times, i am dyslexic after all, heh.

[ghost]

this is just as simple as can be, perfect for new users, perfect for me to be honest:

would it be wrong to just add a preferences panel that lets you select additional options that you want in your menu? that way power users can have their additional options but it's not too complex for people to get started.

it could either be a simple list of options with checkboxes:

• ☑ Queer Haus only
  Visible only for users on queer.haus
• ☑ Public
  Visible for other communities on the Fediverse
• ☑ Unlisted
  Visible for other communities, but not in public timelines
• ☐ Unlisted on Queer Haus
  Visible only for users on queer.haus, but not in public timelines
• ☑ Followers only
  Visible only for your followers
• ☑ Mentioned only
  Visible only for mentioned users

(i could go on, but you get the idea)

or it could be a drag and drop orderable list of enabled/disabled options:

enabled visibility options

Queer Haus only
Visible only for users on queer.haus

Public
Visible for other communities on the Fediverse

additional visibility options

Unlisted on Queer Haus
Visible only for users on queer.haus, but not in public timelines

this new preference, whichever form it takes, would be added to the posting defaults section of the preferences > other page. as an aside that section probably needs its own page to be quite honest, i always forget where it is (mastodon#22982).

as a work around to this, and to make all of the posting options more visible, i think there should be a settings cog on the posting form that takes you to the correct preferences page.

[dariusk]

@bunnegirl I like that a lot, and I am coming around to maybe just having that as the default and then offer an "advanced post options" checkbox in settings, maybe right under the toggle for "advanced web interface" in settings. So if you want to be a power user about it you can, but I think most people would just want the options listed there.

[lukecparr]

I'm getting a new instance ready now for my friends who mostly have never even heard of Mastodon. This is one of the areas I expect to be most difficult to communicate with all the different posting options (I'm still wrapping my head around it too). I love @bunnegirl 's idea of a simplified default menu and power user options in settings.

[github-actions]

This pull request has merge conflicts that must be resolved before it can be merged.