Jenkins GUI

[Tom Bevers]

Hi all,

I really like Jenkins and use it daily, but one thing annoys me and that's the GUI. It's not that user friendly and doesn't look good.

I hoped that would have been changed after the logo design contest as www.jenkins-ci.org has gotten a new design aswel as the bug tracker.

I want to contribute so we can make the GUI better and faster, and I have some proposal:

• Use Twitter Bootstrap and change the colors a bit to match the Jenkins colors
• Clean up current HTML
• Remove all inline styling (Include CSS in the head)
• Remove all inline javascript (Include at the bottom)
• Create sprite images wich results in less http calls

I already tried to use the twitter bootstrap wich results directly in a better looking Jenkins GUI (see the attachment).

[domi]

Hi Tom,

did you have a look at this: http://jenkins-ci.org/content/jenkins-survey-result-and-what-ui-improvement-would-you 

There are constant changes we discuss to make the UI more usable (like the context menu just added by Kohsuke) and your input is very much appreciated!

As from what I can see from your screenshot, this looks really nice and I would love to have the UI change in to this direction!

+1 from my site, but you have to be aware that backward compatibility is very important (if not for the look and feel, then at least for the functionality!)

domi/imod

<Screen Shot 2012-03-18 at 11.54.16.png>

[Norman Baumann]

Looks great. But just as Domi said, backwards compatibility is just as important as the shining new design.

Norman

[Kohsuke Kawaguchi]

On 03/18/2012 03:55 AM, Tom Bevers wrote:
> Hi all,
>
> I really like Jenkins and use it daily, but one thing annoys me and that's
> the GUI. It's not that user friendly and doesn't look good.
> I hoped that would have been changed after the logo design contest as
> www.jenkins-ci.org has gotten a new design aswel as the bug tracker.
>
> I want to contribute so we can make the GUI better and faster, and I have
> some proposal:
>

> - Use Twitter Bootstrap<http://twitter.github.com/bootstrap/index.html> and

> change the colors a bit to match the Jenkins colors

> - Clean up current HTML
> - Remove all inline styling (Include CSS in the head)
> - Remove all inline javascript (Include at the bottom)
> - Create sprite images wich results in less http calls

>
> I already tried to use the twitter bootstrap wich results directly in a
> better looking Jenkins GUI (see the attachment).

Thanks. Would you be interested in creating a branch and doing the work
there? It's great that you are interested in working on it, and I think
there are things I can help in ensuring backward compatibility, etc.

I'm also trying to decompose monolithic style.css and
hudson-behaviour.js and co-locate them via tag files so that we can see
related code more quickly, which I think is relevant to this effort as well.

On top of that, there are other committors like Ohtake-san and Domi, who
I suspect have some opinions about these things!

Let me know your GitHub ID so that we can set things up.

--
Kohsuke Kawaguchi | CloudBees, Inc. | http://cloudbees.com/
Try Nectar, our professional version of Jenkins

[Tom Bevers]

I already have forked jenkins and done some work in branch here: https://github.com/tombevers/jenkins

My github Id: https://github.com/tombevers

What's the best communication channel to communicate over the work and backward compatibility?

[FredG]

Hi,

First of all +1 for the nice design and layout in your attached screenshot.
I really like having the most important actions in the header bar.

If it's OK for you, I'll add a link back to this thread from
https://wiki.jenkins-ci.org/display/JENKINS/UI+Enhancements
which already lists a lot of ideas how the UI can be improved.

Communication-wise, the best channel would be the #jenkins channel
on the Freenode IRC network.

Regards,

Fred

[Kohsuke Kawaguchi]

Great!

I wonder if you can take a look at [1], in particular the CLA section
[2] and start that paperwork going. I understand that it can take some
time, and for now we just need you to be aware and OK with the notion
that this needs to be in place before we can merge your changes.

In the mean time, I've gone ahead and imported your ui-changes branch
into the Jenkins repository, and set you up with the push access. (But
for the abovementioned reasons, please refrain from pushing to other
branches for the time being.)

I've built it and run it locally to play with it a bit. IIUC, it
definitely proves that the idea is feasible, but it also needs more work
before we can consider merging it to the master.

What I suggest is for us to use the office hours [3] time slot next week
(3/28) to discuss this. I also wonder if we can sign up more folks (like
FredG or imod) to get this effort going faster.

[1] https://wiki.jenkins-ci.org/display/JENKINS/Governance+Document
[2]
https://wiki.jenkins-ci.org/display/JENKINS/Governance+Document#GovernanceDocument-ContributorLicenseAgreement%28CLA%29
[3] https://wiki.jenkins-ci.org/display/JENKINS/Office+Hours

On 03/20/2012 01:25 AM, Tom Bevers wrote:
> I already have forked jenkins and done some work in branch here:
> https://github.com/tombevers/jenkins

> My github Id: https://github.com/tombevers<https://github.com/tombevers/jenkins>

[Kohsuke Kawaguchi]

On 03/20/2012 04:11 AM, FredG wrote:
> Hi,
>
> First of all +1 for the nice design and layout in your attached screenshot.
> I really like having the most important actions in the header bar.
>
> If it's OK for you, I'll add a link back to this thread from
> https://wiki.jenkins-ci.org/display/JENKINS/UI+Enhancements
> which already lists a lot of ideas how the UI can be improved.
>
> Communication-wise, the best channel would be the #jenkins channel
> on the Freenode IRC network.

That and this mailing list.

And random comments after playing with the current prototype. The usual
caveat apply that I'm not a UX person:

- The menu of the top banner doesn't seem very useful to me. Right now
it always shows the same 4 things from the action menu of the top
page, which is probably not what you intended. But even if it changes
per page, I think it'd end up just repeating what's on the left.

- I liked our recent breadcrumb that sticks to the top of the page.

- I'd love to merge this with domi's color palette change to kill
two birds in one stone.

- I'd be interested in seeing some YUI buttons replaced by their
counterparts in Bootstrap to see how they'd look.

- Ditto for warning messages.

- Because it uses fluid layout, when my screen width is small (say less
than 1000px, so it's not *that* small), the main portion drops below the
left bar. I'm not too keen on that.

Bugs (I'm on Chrome/Linux):

- configuration page layout is quite broken

- search box didn't work.

>
> Regards,
>
> Fred
>
>
> On Tuesday, March 20, 2012 9:25:23 AM UTC+1, Tom Bevers wrote:
>>
>> I already have forked jenkins and done some work in branch here:
>> https://github.com/tombevers/jenkins

>> My github Id: https://github.com/tombevers<https://github.com/tombevers/jenkins>

[domi]

that sounds good to me, and I'm in for the OfficeHours next week!
Domi