Improving the user experience for managing local styles in the input field
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.
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.
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.
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.