Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-62437

Change Jenkins configuration UI from tables to divs

    • Accessibility-Config-UI-tables-to-div

      We would like to make Jenkins usable by as many people as possible. It includes multiple groups of users: people with disabilities, ones using mobile devices, or those with slow network connections. In general, all Jenkins users would benefit from better navigation and layouts. Currently the Jenkins's UI includes a lot of tables on configuration pages. These tables are very mobile hostile. The UI is also not in line with modern UIs.

      Testing

      Examples

      Here's one example from Windows 10's settings:

      Note that the label for a field is above the field – not to the left of the field.

      Here's a much older UI from Windows:

      Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything). Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10):

       

          [JENKINS-62437] Change Jenkins configuration UI from tables to divs

          Oleg Nenashev created issue -
          Oleg Nenashev made changes -
          Link New: This issue relates to JENKINS-55787 [ JENKINS-55787 ]
          Oleg Nenashev made changes -
          Assignee Original: Josh Soref [ jsoref ]
          Oleg Nenashev made changes -
          Summary Original: CLONE - Change Jenkins configuration UI from tables to divs New: Change Jenkins configuration UI from tables to divs
          Oleg Nenashev made changes -
          Labels Original: accessibility ux ux-sig New: accessibility roadmap ux ux-sig
          Oleg Nenashev made changes -
          Issue Type Original: Story [ 10002 ] New: Epic [ 10001 ]
          Oleg Nenashev made changes -
          Epic Name New: Accessibility-Config-UI-tables-to-div
          Oleg Nenashev made changes -
          Description Original: Currently jenkins's jelly framework generates lots of tables. These tables are very mobile hostile. The ui it generates is also not in line with modern UIs.

           

          Here's one example from Windows 10's settings:

          !image-2019-02-12-15-44-44-739.png!

          Note that the label for a field is above the field – not to the left of the field.

          Here's a much older UI from Windows:

          !image-2019-02-12-15-45-51-351.png!

          Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything).

           

          Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10):

          !image-2019-02-12-15-46-51-006.png!

           

          I can provide examples from macOS, Maemo/MeeGo, and pretty much every system (including Chrome/Firefox/Android). I happen to be using a Windows 10 laptop today (snow day), but normally I use macOS / Android.
          New: We would like to make Jenkins usable by as many people as possible. It includes multiple groups of users: people with disabilities, ones using mobile devices, or those with slow network connections. In general, all Jenkins users would benefit from better navigation and layouts.

          Currently jenkins's jelly framework generates lots of tables. These tables are very mobile hostile. The ui it generates is also not in line with modern UIs.

          Here's one example from Windows 10's settings:

          !image-2019-02-12-15-44-44-739.png!

          Note that the label for a field is above the field – not to the left of the field.

          Here's a much older UI from Windows:

          !image-2019-02-12-15-45-51-351.png!

          Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything).

           

          Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10):

          !image-2019-02-12-15-46-51-006.png!

           

          I can provide examples from macOS, Maemo/MeeGo, and pretty much every system (including Chrome/Firefox/Android). I happen to be using a Windows 10 laptop today (snow day), but normally I use macOS / Android.
          Oleg Nenashev made changes -
          Epic Child New: JENKINS-56109 [ 197541 ]
          Félix Queiruga Balado made changes -
          Epic Child New: JENKINS-62464 [ 206465 ]

            Unassigned Unassigned
            oleg_nenashev Oleg Nenashev
            Votes:
            3 Vote for this issue
            Watchers:
            5 Start watching this issue

              Created:
              Updated: