Jeto Ideas

User Story
As a : marketer
I need to: Navigate through the form in an intuitive way, including using tab key, enter key and arrows when applicable.
So that I can : avoid errors or unexpected actions when providing requested information.

Overview:
Multiple reports from clients as well as best UI/UX best practices are regrouped here. Here are the acceptance criteria to align the behaviour of Jeto form in regards to shortkeys and form navigation.

Acceptance Criteria

1) Hitting enter key
Hitting enter when editing a field must NOT submit the form immediately, but according to each field types, it should:

• For the following field types: “confirm” change of he value (as is) and remove field selection (same as click outside the field).

  • Time

    • Picker:

    • Data entry

  • for single line text

  • number

  • email

  • zip

  • Date

• For single select and Multi-select:

  • If a selection is active (user navigated to item with arrows or hover)

    • sect “active” item, and remain on field edit without any selection active

  • If NO selection is active, : “confirm” change of he value (as is) and remove field selection (same as click outside the field).

• For rich text fields: add a new <div> (no change here, as this is what we have today)

• Hitting enter while NO field is being edited (on the form itself) should

  • On first hit: bring the focus on the for actions buttons:

    • For Draft, focus on “Save draft”

    • For Campaigns, focus on “Submit”

  • Once focus is set, on second hit, if the button is active, hitting enter “clicks” the action button (saves draft or submits)

2) Auto focus and Tab key navigation

• On load of the campaign edit page, auto-focus on the first field in the form.

• Hitting Tab Inside a specific component should:

  • For the following field types: confirm partial field data input, and immediately move to next field component (just like a tab action), in “sequence” (shown as “Action 1 => Action 2…”).

    • Time

      • Data entry & visual picker : HH => MM => AM/PM

    • Date: YYYY => MM => DD => Next field

    • Single select: Move to next option

    • Multi-select: Move to next option

• Hitting Tab Outside of specific field components Should help user navigate each element of the page, including, and in this specific order:

  • each form fields, from top down

  • each form action button (save draft, submmit) , left to right

  • each top navigation (dark grey) menu left to right (ex: help, API)

  • each of the sub navigation menu items (blue menu), left to right

  • it should skip the logo link (back to home)

• The “focused” elements will be highlighted with a thick border for the user to identify (DESIGN TO BE COMPLETED)

• The focus elements will be “sequential” and will bring the user to the “next” item. i.e. if a user navigates directly the middle of a form, edit a at that level and hit tab, the field immediately below will then have the focus

3) Hitting Arrow key

• On following field types, arrow keys should allow to navigate as follow (other fields already have the proper UX):

  • Multi select field: should allow to navigate up and down between values (same as current single select)