jenkins-ui.md

Goal

Bring Jenkins UI into the current decade

What are the problems?

From a design standpoint:

• Text is too small. A build server is frustrating enough without having to squint at the screen to read.

• Fonts are outdated. Verdana + Courier New have fallen out of style. Jenkins must run with system defaults, but there are some excellent new choices that are available on most machines - Arial for variable width text and Consolas, Monaco or Andale Mono for fixed width fonts.

• Buttons are too small. Per Fitts Law, small buttons are difficult to locate and click on. The current gray buttons also don't stand out too much from the background.

• Images are outdated. The floating balls, weather icons, and build icons all could use a refresh to bring them into the current day.

From a UI standpoint:

• It takes too long to do the things you'd like to do.

  • Generally, to figure out why the build is failing, you would like to view the console output of the latest build. From the job homepage, this takes at least two clicks, and then scrolling.

  • Once you have figured out why the build is failing, you want to kick off a new build. From the console output, it takes at least two clicks to get back to the job homepage to trigger a new build.

• The Configuration page is an accumulation of many different settings over time, without thought to the overall picture. It could benefit from an examination of the information hierarchy, and a survey of what people most frequently configure on that page. More relevant options could be brought to the forefront, and less relevant options could be removed.

Steps

From a general style/CSS perspective:

• Boost the default font size from 11px to 13px.

• Change the default font from Verdana to Arial. Change button font from Lucida Grande to Arial.

• Where possible, use color and spacing to indicate headings and table borders. Decrease the thickness, color of existing lines, if it's not possible to remove them.

• Change the default fixed width font from Courier New to Consolas, Menlo, monospace.

• Change the console output color to look more like a terminal. Consider other colors besides white on black, but default to those.

• Give Jenkins buttons a default color. Increase the font size and the padding.

• Replace orbs with CSS, ProgressCircle colors.

• Consider removing or renewing Jenkins' icons. If a free set is available in a good theme, use that; otherwise, it may be worth asking a contractor for a new set of icons.

Specific to the UI:

• Link to the most recent console output from a job's homepage.

• Add "Build Now" buttons on every page. When clicked, the build button will give you a link to the new build, in a butter bar.

More involved steps:

• Move the console output onto the build homepage.

• Figure out a way to annotate console builds, so you can colorize the output, and collapse/expand sections as you see fit.

• Contract with a designer to get a modern set of icons.

Plan of attack

The good news is that the steps involved here can be broken into distinct sub-parts. To make code review easier, and to make the pills involved easier to swallow, I propose breaking the changes into a series of smaller changes.

1. Change the orbs to be generated entirely by CSS. Use the ProgressCircle plugin to render in progress builds.

2. Update styling on the console output page.

3. Update the styling in the sidebar. Add spacing, horizontal striping, and remove some of the excess icon clutter.

4. Update form elements to use rounded corners, incorporate padding to make the form's click target bigger, increase the form font size

5. Update global stylesheet to make 13 point font the default, add padding in global UI elements like the headings, change Verdana to Arial

6. Include the console output by default on the job homepage.

7. Link to the latest output from the job homepage.

8. Add "Build now" buttons to every page of a job, with the appropriate action.

Further along the line

1. Give Jenkins its own set of button styles

2. Figure out a way to add colors/accordion metadata to the console output

3. Fix information hierarchy on the Configuration page

4. Conduct user tests to understand the workflows that users have.

👍