Create updated version of online status facet with new Sociable status

[Frooxius]

Describe the Underlying Issue

We're adding new "Sociable" status to Resonite: https://github.com/Yellow-Dog-Man/Resonite-Issues/issues/909

The current version of facet template for switching online status needs to include this.

To Reproduce

No response

Expected Behavior

Create an updated version of this facet template which includes the Sociable status.

• The locale key is Profile.Status.Sociable
• The color for this is Cyan (from platform palette)
• Use a current build in prerelease channel for making this, which includes the new status in the Enum and other functionaliy
• DO NOT overwrite current version, save it with "V2" suffix

Screenshots / Video

No response

Additional Context

No response

Reporters

No response

[RyuviTheViali]

Okay, I have saved a new V2 version of the facet in the templates folder ready for production - all that's missing is a new icon for the mode.

[TisFoolish]

A heart? Or a plus to further counterbalance the Busy status.

[shiftyscales]

I personally feel like "Sociable" should be above online @RyuviTheViali? That way the statuses are sorted by availability.

"Open to be social" > "Online" > "Away momentarily, will be online again soon" > "Do not disturb me" > "I'm not here".

[shiftyscales]

A plus sounds like a great idea.

[shadowpanther]

Or a plus to further counterbalance the Busy status.

A cross-out usually rhymes with a checkmark, would be more distinct.

[Frooxius]

Yes, I think it should be above "Online" too, because it's sort of "More online than online" kind of status. Opposite of "Busy".

[RyuviTheViali]

I've reordered the items to have Sociable on top.

[TisFoolish]

A cross-out usually rhymes with a checkmark, would be more distinct.

Check marks don't have symmetry and all the other statuses have symmetry in some form. It'd be sad to ruin that aesthetic

[Frooxius]

We could also go with something "spiky" like a star, to give it more "energy".

[shiftyscales]

Internally, I had made the joke name suggestion of "Online+" for this status because it's "more online than online". So a plus could unironically be a good fit I think.

When you say spiky- I imagine Kiki. If we do that- we'd have to go back and change the busy icon to Bouba (kidding). x3

[shiftyscales]

But then again, Bouba is the more inviting shape- so perhaps flip them?

[Banane9]

If going for something symmetric, I'd definitely support the +, even though it's rotationally similar to the x in Busy.

[stiefeljackal]

Although a star symbol was suggested, I also want to suggest an asterisk symbol for the new status. Those symbols, the star and the asterisk, make sense because typically those symbols are used to provide additional context to something when the symbol is placed at the end of a word or a sentence.

The plus symbol is the next best thing, but that is rather similar to the 'x' symbol as some suggested.

[lxw404]

I'm adding this info from the issue that was closed above, which originally I believed was tangential to the discussion of the sociable icon:

All of the icons are currently ambiguous as to which one is active when you select them. This becomes extremely noticeable if you resize the facet to its minimal state with just the icons visible:

Guess which one of them is active above before revealing the answer below:

Spoiler

It was the Online (green) one

I mention in that issue that the current icons do not have a consistent way of telling when they are active versus inactive. For example, the offline icon when active looks like the online/sociable buttons + vice versa, and the outlining on the away button looks like the other icons with outlines in different states. There should probably be a way to at a glance determine which is active without ambiguity (only one of the icons with a specific property, eg only one with an outline etc.).

[shiftyscales]

I actually knew it was online if you can believe that, @lxw404 - but I could see how someone less familiar to the platform might not recognize that.

The online status there is slightly wider to the rest because it has an outline where all of the rest don't as you suggested as a possible solution- so clearly a bit more is required than that.

E.g. maybe further thickening the outline, or inverting the visual so that all of the unselected statuses are an empty circle, and the active status is a filled (or dotted) circle similar to radio buttons.

[shiftyscales]

30 second MS paint mockup:

If we opt for a direction like this- we probably wouldn't need to worry about the outline either- have them all be a uniform width.

[JackTheFoxOtter]

Since this is currently being overworked, I would kindly ask to take a look at the scaling / size of this facet. The space of the facet taken up (green outline on the grid when you grab it) and the actual visual size of the facet are different, which makes this one a very frequent pain point when trying to arrange my dashboard layout.

[djsime1]

Might as well chip in my two cents here,

I used an online color-vision deficiency simulator to contrast how the Online and Sociable status look to somebody with color blindness. I figured since both Hero Green and Hero Blue have a similar hue, saturation, and luminosity, they could be difficult to distinguish for those with degraded blue perception. Sure enough, the two colors are rather difficult, if not nearly impossible to distinguish without accompanying labels. Below are the simulated results:

Normal vision

Blue-Weak/Tritanomaly: Tough to distinguish

Blue-Blind/Tritanopia: Nearly identical

Monochromacy/Achromatopsia: Indistinguishable

So, I agree that an icon is needed to distinguish the two statuses, like Away, Busy, and Invisible. I mocked up some prototype icons, and like several others in this thread, I think that a 4-point star is probably the best option in terms of distinguishability, symbolism, and simplicity.

Stars

As I said before, these are the simplest. Easy to recognize, apart from the 5-point star, which might be interpreted as a "favorite" or otherwise special contact by a new user. These should also be readable at a small scale.

Dots

I guess these could be thought of as representing a conversation circle, but I don't think they offer enough visibility, especially at smaller scales.

Symbols

These intentionally convey the point, but when compared to the other status icons they are too noisy. They could also be mistaken for meaning you have a new message, or you're being invited. (Comment icon from Nucleo Core icons, Waving Hand modified from Twemoji)

On a minor side note, as brought up by lxw404 earlier in the thread, having your current status be Online makes it the same shape as Invisible. I've not tested the contrast through colorblindess filters, but the lower luminosity of Hero Purple should make it different enough from Hero Green. Still, another point of accessability worth considering.

[Frooxius]

We definitely should go for a symbol and get one made for this. I don't think using only color is a good idea, especially for the color blindness.

The text helps distinguish them right now, but having more distinguishing factors helps overall and some people seem to like to create a condensed version.