0

I notice that a lot of modern UI components, specifically chip input fields allow a user to hit enter which adds a new chip. Google’s material framework also has an enter event for adding new chips. https://material.angular.io/components/chips/overview

The question is, is this bad UX? Typically the enter button is used to submit a form, provided the other fields are filled in that is. If this is an exception to the rule, what rules does it raise an exception to?

Improve this question
2
  • 1
    Related: Submit form on enter without focus (ux.stackexchange.com/questions/98690/…), Behavior of the Enter button in a form (ux.stackexchange.com/questions/36713/…), Hitting enter to submit a form (ux.stackexchange.com/questions/90645/…) and What should ENTER do? (ux.stackexchange.com/questions/864/what-should-enter-do)
    – locationunknown
    Commented Jul 13, 2020 at 6:46
  • 3
    Although it is historically common for enter to submit a form, I personally would avoid that unless I had a specific reason to do so (i.e. the users asked for it). I think these days it's far too common for people to hit the enter button after they have finished typing something, especially considering how much we use chat applications these days. I would worry that too many users would accidentally submit forms they haven't finished filling in yet. If my form had a single field, I might consider allowing enter to submit the form. I guess really it largely depends on the form.
    – musefan
    Commented Jul 14, 2020 at 9:40

2 Answers 2

Reset to default
1

Here as you asked about the chip component, using the enter key to add chip, the action would be right UX behavior or no.

I would say if you do not set the primary action in place for activities can result in bad UX for the user.

You can solve this problem stepwise.

Step1: Define Actions: for Component and its combination to another component.

In the chip component, you have multiple actions.

  • Adding new chip
  • Deleting added chip
  • submitting a form if you're using the chip component in the form template.

Step2: Set Emphasis of action: I believe the emphasis of work needs to be set for each action.

  1. Primary Action
  2. Secondary Action

Step3: Define User Behaviour: For Each action, you need to define the user's behavior for defined actions based on their emphasis, which should match with the user's mental model.

Eg; The user's Mental Model for submission is, to press enter key.

Eg; if the chip component is not combined with form, its better utilizes the enter key behavioral to assign to defined action based on the emphasis we set.

Tip: And behavior: to press enter key would be a good user behavior for primary action: add selected/typed token or chip.

Improve this answer
1

This is a very thoughtful question.

Most designers are not aware of implicit submission (using the Enter key).

I would try to avoid using chips but that is beside the point.

Some native form controls will not submit the form when pressing Enter like a textarea so I think it’s okay to have a specific control that uses it.

That said, I would always try to make custom controls out of native controls.

You can see my autocomplete control as an example:

https://adamsilver.io/blog/building-an-accessible-autocomplete-control/

So in the case of a chip UI thinger, I would have a list of checkboxes filterable by a search box (text input).

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.