Additional feedback provided by @AAlhazwani-WMF in T337095#9133238.

In T344899#9137639, @CCiufo-WMF wrote:

Additional feedback provided by @AAlhazwani-WMF in T337095#9133238.

Pasting here feedback from @AAlhazwani-WMF:

In T337095#9133238, @AAlhazwani-WMF wrote:

some more feedback from the wikifunctions community about the chip input component, cc @bmartinezcalvo

• I don't know how to expect the keyboard to work (how do you finish adding one and start adding another? space? tab? enter? how do I remove one? backspace? shift-tab to the x? how do I edit one? can I just move the arrow key into it or do I have to shift-tab? can I even edit it? will it even work properly via the keyboard?)
• they're very likely to interfere with what I'm used to being able to do in input fields in some way or another
• it's not obvious whether you can edit existing values at all, let alone how
• the position of the x being dependent on the length of the text means it's in an unpredictable position on the screen, which ruins any sort of muscle memory you might have when using a mouse or touchscreen, you have to see where the x is before you can aim for it, and removing one repositions all the ones after it which makes removing more than one even harder

In T344899#9139408, @bmartinezcalvo wrote:

In T344899#9137639, @CCiufo-WMF wrote:

Additional feedback provided by @AAlhazwani-WMF in T337095#9133238.

Pasting here feedback from @AAlhazwani-WMF:

In T337095#9133238, @AAlhazwani-WMF wrote:

some more feedback from the wikifunctions community about the chip input component, cc @bmartinezcalvo

• I don't know how to expect the keyboard to work (how do you finish adding one and start adding another? space? tab? enter? how do I remove one? backspace? shift-tab to the x? how do I edit one? can I just move the arrow key into it or do I have to shift-tab? can I even edit it? will it even work properly via the keyboard?)
• they're very likely to interfere with what I'm used to being able to do in input fields in some way or another
• it's not obvious whether you can edit existing values at all, let alone how
• the position of the x being dependent on the length of the text means it's in an unpredictable position on the screen, which ruins any sort of muscle memory you might have when using a mouse or touchscreen, you have to see where the x is before you can aim for it, and removing one repositions all the ones after it which makes removing more than one even harder

JFYI consider this feedback in the context of Wikifunctions, where we use the chip input component for multi-word chips (thou i'm unsure if this is the best use of this component).

the feedback might (?) change if there would be a recommendation to use this component also for single-word chips.

In T344899#9139812, @AAlhazwani-WMF wrote:

• I don't know how to expect the keyboard to work (how do you finish adding one and start adding another? space? tab? enter? how do I remove one? backspace? shift-tab to the x? how do I edit one? can I just move the arrow key into it or do I have to shift-tab? can I even edit it? will it even work properly via the keyboard?)
• they're very likely to interfere with what I'm used to being able to do in input fields in some way or another
• it's not obvious whether you can edit existing values at all, let alone how
• the position of the x being dependent on the length of the text means it's in an unpredictable position on the screen, which ruins any sort of muscle memory you might have when using a mouse or touchscreen, you have to see where the x is before you can aim for it, and removing one repositions all the ones after it which makes removing more than one even harder

JFYI consider this feedback in the context of Wikifunctions, where we use the chip input component for multi-word chips (thou i'm unsure if this is the best use of this component).

the feedback might (?) change if there would be a recommendation to use this component also for single-word chips.

@AAlhazwani-WMF some of the feedback collected could be solved by giving the user more context on how to use the component. As we commented some time ago, you could use the helper text property in the Field to provide more info about how the user can create the chips.

In T344899#9140096, @bmartinezcalvo wrote:

In T344899#9139812, @AAlhazwani-WMF wrote:

• I don't know how to expect the keyboard to work (how do you finish adding one and start adding another? space? tab? enter? how do I remove one? backspace? shift-tab to the x? how do I edit one? can I just move the arrow key into it or do I have to shift-tab? can I even edit it? will it even work properly via the keyboard?)
• they're very likely to interfere with what I'm used to being able to do in input fields in some way or another
• it's not obvious whether you can edit existing values at all, let alone how
• the position of the x being dependent on the length of the text means it's in an unpredictable position on the screen, which ruins any sort of muscle memory you might have when using a mouse or touchscreen, you have to see where the x is before you can aim for it, and removing one repositions all the ones after it which makes removing more than one even harder

JFYI consider this feedback in the context of Wikifunctions, where we use the chip input component for multi-word chips (thou i'm unsure if this is the best use of this component).

the feedback might (?) change if there would be a recommendation to use this component also for single-word chips.

@AAlhazwani-WMF some of the feedback collected could be solved by giving the user more context on how to use the component. As we commented some time ago, you could use the helper text property in the Field to provide more info about how the user can create the chips.

Let's try to consider designs that do not rely on helper text in order to know how to use this component. It may be helpful to rephrase the intention of this task as an exploration of the specific idea that came up in the team meeting about using animation for improved user understanding of the chip behaviour.

In T344899#9155893, @RHo wrote:

Let's try to consider designs that do not rely on helper text in order to know how to use this component. It may be helpful to rephrase the intention of this task as an exploration of the specific idea that came up in the team meeting about using animation for improved user understanding of the chip behaviour.

+1, free idea: what if, when you focus the chip input component, it adds an empty chip, with the cursor already active for typing?

this definitely needs more thinking (especially around how to handle the focus, and the escape of focus), but it might be worth exploring.

It seems that we need to solve in this task different things:

1. Improve the experience when editing an existing chip
2. Explain to the user how they can create a chip

@CCiufo-WMF should we separate these 2 topics in different tasks? Or should we solve both them in this task?

In T344899#9164088, @bmartinezcalvo wrote:

It seems that we need to solve in this task different things:

1. Improve the experience when editing an existing chip
2. Explain to the user how they can create a chip

@CCiufo-WMF should we separate these 2 topics in different tasks? Or should we solve both them in this task?

IMO Let's make this task concentrate on solving 1 in a way that we don't need to solve 2 (in a similar way that we don't have help text for using buttons)

In T344899#9164233, @RHo wrote:

In T344899#9164088, @bmartinezcalvo wrote:

It seems that we need to solve in this task different things:

1. Improve the experience when editing an existing chip
2. Explain to the user how they can create a chip

@CCiufo-WMF should we separate these 2 topics in different tasks? Or should we solve both them in this task?

IMO Let's make this task concentrate on solving 1 in a way that we don't need to solve 2 (in a similar way that we don't have help text for using buttons)

Agreed. I updated the task description to reflect this (about editing specifically, and also that there are different improvements we could explore). I'll create a separate task for improvements to the experience of adding new chips.

The exploration for both of these tasks should involve some element of user research/testing. We need to confirm that:

1. The existing experiences are even an issue, and;
2. What the best improvements are.

Sorry for continuing to move this conversation around. Feedback or ideas about the UX of adding a new chip should now go to T346284: ChipInput: Explore improvements to the experience of adding a new chip. This task is about the editing experience of the ChipInput only.