[idea] Make captions and labels of the webstudio app user-unselectable

[RedFeet]

To prevent confusion (and to make the webstudio-is app 'feel' more like an app), you could make the captions and labels of the webstudio app unselectable.

in css: user-select: none;

or take a look here: https://stackoverflow.com/questions/6900124/how-to-make-certain-text-not-selectable-with-css

[kof]

Having user-select: none by default considered bad on the web in general, but we should have this property in style panel in any case, so that users can do it when needed.

[RedFeet]

I mean in the real-estate of the webstudio-is editor app itself. Not as a feature for users.
I can now select menu captions like "Navigator" in the top left of the webstudio editor and "Style options" in the right pane, which makes me as a user wonder: 'can I edit this text?' which off course I can't since it's part of the chrome / real-estate or whatever it's called.
(Just as you can't select the tab captions "Write" and "Preview" above this pane in GitHub.)

[kof]

The only question is if it should be part of the visual css editor or linked css editor cc @taylornowotny

[RedFeet]

I'm not talking about a feature for users of webstudio to use it. I think it's confusing that I can select the menu-captions of Webstudio itself, that doesn't make sense. f.i. the word Navigator in the left top of the webstudio-screen, I shouldn't be able to select that. Now it looks as if I can change that text.

[kof]

Oh got it, I was totally in the wrong context, I was just searching for what's the decision framework on this and found this answer: https://ux.stackexchange.com/questions/83184/is-user-select-none-bad-ux

Would selecting the text be the primary/secondary interaction a user would intend if touching the screen there, or would it be a hindrance to the task they were trying to carry out?

Basically if user would accidentally select text when trying to click - we should disable user select. cc @rpominov

[RedFeet]

Well, that's a good thumb rule for this particular spec!
In this case: Yes: if a user wants to select text in the UI of webstudio-is, they would probably not want to include the navigation-texts of the left pane, like: "Navigator", that would be an unintended selection.
If the user needs to share the entire screen off the webstudio-app, a graphical screenshot/snippet would be probably used for that, not a text-selection.
Again: the tabs above this text-input "Write" and "Preview" are also unselectable, which makes perfectly sense.

[kof]

@RedFeet have you seen in webstudio any particular case where you would select things accidentally instead of something else e.g. clicking a button?

I am trying to identify the cases where selecting text actually harms the UX.

[RedFeet]

An image says more than a thousand words.... Here are 2000 words: [image: image.png] [image: image.png] Best regards, Teun Roodvoets Op wo 17 mei 2023 om 10:07 schreef Oleg Isonen ***@***.***>:

…

@RedFeet <https://github.com/RedFeet> have you seen in webstudio any particular case where you would select things accidentally instead of something else e.g. clicking a button? I am trying to identify the cases where selecting text actually harms the UX. — Reply to this email directly, view it on GitHub <https://github.com/webstudio-is/webstudio/discussions/29#discussioncomment-5924695>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA7XNWLVC2CU6B3VVRLROSDXGSBLRANCNFSM6AAAAAAX7C2YAI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[TrySound]

Images not uploaded it seems

[RedFeet]

[kof]

The fact you can do it is clear. I was hoping you would provide a specific instance where you stumbled over it accidently, where it created friction.

Right now it seems it is intentionally selected. I am looking for points of frustration I can learn from.

[kof]

I am being careful about this decision, because it will impact the entire UI and we need to decide if we use user-select none by default and only allow it sparingly where needed or the other way around, disable it on specific labels because it leads to unintended selections

[kof]

If we go with enabled-first, then we need to understand which exact points need to be disabled and why. Generally all labels - hard to make right, some elements are not labels

[RedFeet]

Well, It’s your decision anyway. I was just describing my first impression of webstudio: I immediately saw parts of the webpage that I could change the text of (which is intended, since it’s a webpage editor) and then I saw parts of your application that I shouldn’t be able to modify, but they appeared “modifiable” since I could put my text edit cursor in them (and also select the texts), which is undesired and confusing and therefore: unintended. Webstudio appeared to me as a webpage and not as a (web) application… That’s what I wanted to share with you. Do with my observation what you want. Cheers! Op wo 17 mei 2023 om 14:15 schreef Oleg Isonen ***@***.***>

If we go with enabled-first, then we need to understand which exact points need to be disabled and why. Generally all labels - hard to make right, some elements are not labels — Reply to this email directly, view it on GitHub <https://github.com/webstudio-is/webstudio/discussions/29#discussioncomment-5926964>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA7XNWLD4E4UIRT2FRF5YN3XGS6O3ANCNFSM6AAAAAAX7C2YAI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- Met vriendelijke groet, Teun Roodvoets

[kof]

OHHHHH, now I am getting it, the problem is mostly the cursor, not literally the fact that those are selectable!!!

[Erudition]

Yes, changing the cursor to pointer instead of text-select would be ideal I think, as I sometimes do want to select and copy some in-app text (and miss that ability in other apps)

[kof]

Alright, after consideration, we are switching to user-select none by default and enabling it where it's needed

webstudio-is/webstudio#1642