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.

+1

I am using the Simple Theme plugin because I have gripes with the current UI. The default style in this plugin addresses the first 4 points made. I am managing two Jenkins instances, one having the Simple Theme plugin, and one without. Readability on the original is definitely worse, and the icons less helpful.
[Update] After a minute or so, I realized that the author of this is indeed the same who made the Simple Theme plugin's doony theme that I'm using.

Is this a good place to ask for a ban of all animated (blinking, ...) icons?

• They are a major waste of energy (high cpu use on vms, notebooks; seriously check that it's insane actually) for zero benefit, a static icon per state would do.
• They often are not updated upon job completion and thus don't communicate current state but annoy because of the animation.

Another major point of pain for me is the dropdown with forced insane slow scrolling that adds a build step / post build step, PLEASE replace it with something sane, something that does not waste my time waiting for it to scroll down to the damn part that I need now...

Nice analysis!
I can second almost every pain point, my usage patterns seem to be largerly similar.

After managing few Jenkins instances for a long time (even though using the Material theme) I cannot look at them anymore. Nothing has really improved over the years and the blue ocean UI turned out to be a disappointment for me and is still light years from feature parity and completness. I am working on my own theme which shall be released soon in an mvp state. I have focused on CSS now to improve what I can but the goal is to dynamically enhance the page with JS and use micro react apps (interacting with backend via the REST API) to add or replace certain functionality.

The theme shall be customizable as much as possible with the base feature to be able to brand it using couple lines of code. CSS/JS feature flippers should be introduced too because opinionated UI ideas should not be forced on everybody.

Thanks for the interesting read!

👍