Skip to content

Commit

Permalink
Add requirement Id to ui-recommendations.md
Browse files Browse the repository at this point in the history
  • Loading branch information
koppor committed Oct 10, 2024
1 parent 16512ed commit 098ae44
Showing 1 changed file with 12 additions and 4 deletions.
16 changes: 12 additions & 4 deletions docs/code-howtos/ui-recommendations.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,27 @@ parent: Code Howtos
* For a usual form, place the label above the text field
* If the user uses the form often to edit fields, then it might make sense to switch to left-aligned labels

## Designing GUI Confirmation dialogs
## Designing GUI Confirmation Dialogs

1. Avoid asking questions
2. Be as concise as possible
3. Identify the item at risk
4. Name your buttons for the actions

More information: [http://ux.stackexchange.com/a/768](http://ux.stackexchange.com/a/768)
More information:

- [StackOverflow: What are some alternatives to the phrase "Are you sure you want to XYZ" in confirmation dialogs?](https://ux.stackexchange.com/q/756/93436).

Check failure on line 20 in docs/code-howtos/ui-recommendations.md

View workflow job for this annotation

GitHub Actions / Markdown

Unordered list style

docs/code-howtos/ui-recommendations.md:20:1 MD004/ul-style Unordered list style [Expected: asterisk; Actual: dash] https://github.com/DavidAnson/markdownlint/blob/v0.35.0/doc/md004.md
- JabRef issue discussing Yes/No/Cancel: [koppor#149](https://github.com/koppor/jabref/issues/149).

Check failure on line 21 in docs/code-howtos/ui-recommendations.md

View workflow job for this annotation

GitHub Actions / Markdown

Unordered list style

docs/code-howtos/ui-recommendations.md:21:1 MD004/ul-style Unordered list style [Expected: asterisk; Actual: dash] https://github.com/DavidAnson/markdownlint/blob/v0.35.0/doc/md004.md

### Name your buttons for the actions
`req~ui.dialogs.confirmation.naming~1`

## Form validation

* Only validate input after leaving the field (or after the user stopped typing for some time)
* The user shouldn't be able to submit the form if there are errors
* However, disabling the submit button in case there are errors is also not optimal. Instead, clicking the submit button should highlight the errors.
* Empty required files shouldn't be marked as invalid until the user a) tries to submit the form or b) focused the field, deleted it contents and then left the field (see [Example](https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_required)
* Ideally, the error message should be shown below the text field and not as a tooltip (so that users quickly understand what's the problem). For example as here [in Boostrap](https://mdbootstrap.com/docs/jquery/forms/validation/?#custom-styles)
* Empty required files shouldn't be marked as invalid until the user a) tries to submit the form or b) focused the field, deleted it contents and then left the field (see [Example](https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_required)()
* Ideally, the error message should be shown below the text field and not as a tooltip (so that users quickly understand what's the problem). For example as [in Boostrap](https://mdbootstrap.com/docs/jquery/forms/validation/?#custom-styles).

<!-- markdownlint-disable-file MD022 -->

0 comments on commit 098ae44

Please sign in to comment.