Join the Webstudio community

Updated 2 months ago

Improving the user experience for managing local styles in the input field

At a glance

A community member, as a new user of the WS platform, encountered an issue when trying to drag and drop "Local" styles outside of the input field, receiving a notification error. They proposed extracting the "Local" chip from the input field and placing it in a separate "Styles Sources" section, as they felt that everything inside an input field should be modifiable or removable.

In the comments, other community members discussed the implications of this proposal. They noted that the "Local" style source has 90% of the token abilities, except for order and reusability, and that moving it outside the input field could make it less obvious that the styles are on that local style source. The comments also explored alternative solutions, such as using an icon or a trailing button next to the input field, but identified potential issues with multiline inputs and the similarity with design tokens.

Overall, the community members acknowledged the main source of confusion as having local styles inside an input field, which cannot be cleared or moved. However, they agreed that this is not a significant issue, and that users can quickly get used to it. The discussion focused on finding ways to reduce frustration for first-time users, with suggestions for subtle visual changes to convey the stationary nature of the "Local" styles.

Useful resources
I can give my feedback as a new WS user, the first time, I tried to drag and drop "Local" styles somewhere else in the input field and I got the notification error, at this time I went to the documentation to understand how this thing is supposed to work. Why not extract this "Local" chip from the input field and keep it somewhere else in "Styles Sources" section separately (like on top of the input field)? Our brain expects everything inside an input field to be modifiable/removable.
O
S
H
14 comments
problem is local style source has 90% of the token abilities, except of the order and reusability
so the risk if putting it outside is making it unobvious that the styles are on that local style source
tokens and local are all style sources
local is just more limited
tokens are for reuse, local is for styling directly on the instance
would the proposal above solte the problem?
I see. The icon suggestion in the previous thread is definitely better. Someone would still think he can remove the icon chip but that's not a big problem after learning how design tokens work in WS. I was thinking about something like a trailing button next to the input field, here is an example of this pattern, but not sure it will work well with multilines input.
Attachment
local-trailing.png
multiline and similarity with tokens as a style source that needs to be still somehow clear would be 2 problems I see
I agree, the main source of confusion, at least for me, is having local styles inside an input field (having something we can't clear nor move inside the input). But to be honest that's not a big deal we get used to it quickly.
yeah, mostly trying to remove frustration from first-time users
I think little visual changes might just do the trick
Maybe a subtle anchor rope would convey being stationary, without breaking the style?
Attachments
inactive.png
active.png
Add a reply
Sign up and join the conversation on Discord