Hey Tom, So for the most part, my screens are still in a pre style refinement stage and are just meant to convey particular layout concepts and not any particular art.
...that having been said... You are catching me starting to try to sneak some possible icon and typographic changes into my concepts. The font I am showing is called Railway which most importantly has good screen readability without being a particularly wide font, but also has a little bit of an Art Deco sort of flair that is subtle but akin to the idea of boom-times and buttler. For the icons, as I am suggesting we use more of them, we would need a means of loading them into the browser efficiently and creating a library of them easily. Simple wire-n-knockout style icons are relatively easy to create (compared to full color/faux 3D), are lighter to load in the browser, and can be converted into a font (which super greatly reduces the server load while upping their use flexibility). ...so my real answer is that I am just starting with the art bits so it may well change significantly, but feedback is always helpful. On Mon, Apr 20, 2015 at 11:43 PM, Tom Fennelly <[email protected]> wrote: > Hey Gus, these look really great and would be a huge step forward imo. I > can see new users having a much easier/happier time with this ux. > > In terms of styling (colour, icons etc), what you have here is very > different to what's in Jenkins atm. What's the plan there? > > On 20 April 2015 at 22:41, Gus Reiber <[email protected]> wrote: > >> Hey all, >> So I have let this thread go idle for over a month now, but over the >> course of the last few weeks I have had some pretty interesting discussions >> with both KK and Tom here inside CloudBees and now have some wireframes >> that examine the item creation and configuration GUI in jenkins and looks >> at ways to make the GUI a little more approachable for new users, while not >> losing or significantly changing the existing screens' general approach to >> collecting and displaying the configuration settings. >> >> I am going to post them here in the hopes that all of you interested in >> the Jenkins GUI will toss in your comments and feedback. So, here we go.... >> >> Item type selection >> >> >> <https://lh3.googleusercontent.com/--FrUyHyAuo8/VTVqGkV0tpI/AAAAAAAAAvI/gpPyoMSI7ro/s1600/create-item.png> >> As it stands today, most folks first interaction with Jenkins is a fairly >> dry list of radio buttons, asking him/her to select which type of item to >> create. Not only is the radio list fairly dry in appearance, as users add >> plugins it does little help the user scan the page to find the particular >> item type he/she is looking for. As users add additional functionality to >> Jenkins, the page scanning challenge grows. This new take on that first >> page in the creation process seeks to address that by adding the concept of >> categories to Jenkins items. This would allow them to be grouped and >> displayed in a bit more artful an arrangement. >> >> >> Freestyle first steps >> >> >> <https://lh3.googleusercontent.com/-Ej7dyww55TI/VTVrmRDLEfI/AAAAAAAAAvU/81X7qBSWrh8/s1600/freestyle_1.png> >> Similarly, the freestyle configuration page is not only difficult to scan >> but is particularly vulnerable to 'plugin pollution', as it too has only >> minimal visual category indications. The good news however, is that for the >> most part, the form actually is divided up into helpful categories, but the >> visual divisions between those categories is pretty minimal and sometimes >> the logical divisions determining what goes in what categories is a bit >> muddled. This wireframe adds the concept of collapsible region categories, >> and in this "Overview" step, weeds out some of the non universal input >> settings that are currently in the first segment of the item >> creation/editing. >> >> >> <https://lh3.googleusercontent.com/-Rxi-d6-CutU/VTVtHDMv4II/AAAAAAAAAvg/4ShgHbfmhEU/s1600/freestyle_2.png> >> To make sure those settings are not lost, this wireframe shows a new >> category, "General Process Rules" which would include the settings that are >> currently oddly appended to an "Advanced" button in the first >> input category. Not shown here, these checkboxes would behave roughly as >> they do today, showing additional setting only when selected, but in this >> wireframe, I have been careful to make sure additional input settings are >> not mixed in direction to the checkbox item selection, so as to give some >> degree of uniformity to the options in the list. >> >> >> <https://lh3.googleusercontent.com/-VQTnSplC6g0/VTVuEFAfhiI/AAAAAAAAAvs/rEGmmI4VP2w/s1600/freestyle_3.png> >> Similarly for radio buttons. Here with the "Source Code Management", all >> is the same as it ever was... >> >> >> <https://lh3.googleusercontent.com/-E6SAg2emUX4/VTVuXinr85I/AAAAAAAAAv0/p267LN3ePro/s1600/freestyle_4.png> >> ...Yawn, and "Build Triggers".... just being complete... >> >> Freestyle critical steps >> >> >> <https://lh3.googleusercontent.com/-79DlKNvDDGk/VTVuxbx-JJI/AAAAAAAAAv8/2GEn0gan4Js/s1600/freestyle_5.png> >> ...not all steps in a freestyle build however are just basic item >> selections. Some are iterative step configurations that are particularly >> defining of what the build process is going to do. (arguably, "Build >> Triggers" is a similarly fundamental input category, so please argue >> away.... ). Because of this importance, and iterative sub-process nature, I >> am pulling the list of step operations out of its current pull-down list >> and giving each a bit of visual meat. Beyond being decorative, this is >> meant to help the user scan quickly for the process step he/she wants and >> in a sense, wake the user up with a little reminder that this is likely to >> be where the important choices need to be made. >> >> >> <https://lh3.googleusercontent.com/-Rbbgi2_94Ww/VTVwOiRCNVI/AAAAAAAAAwI/WMlqbIX2sDY/s1600/freestyle_6.png> >> Once selected, the inputs for that new build step should be similarly >> framed for emphasis and simplicity. The nesting of the layout should be >> clearly communicating the subroutine nature of creating steps. >> >> >> <https://lh3.googleusercontent.com/--CdfQbVIfYU/VTVwwQJM0OI/AAAAAAAAAwQ/4wTYXNw60Es/s1600/freestyle_7.png> >> Once created, the step, along with the existing steps is collapsed back >> to its minimized form, helping to keep the workspace clean and to allow >> more efficient dragging and reordering of step items (notice now the >> collapsed panel, "Step: Execute shell script" above the newly re-opened add >> step control). >> >> >> <https://lh3.googleusercontent.com/-9Tz4ic1EEIc/VTVxlAh6zII/AAAAAAAAAwY/9NnZLAhIYnM/s1600/freestyle_8.png> >> After the steps are created, the "Post-Build Actions" employs the same, >> "look at me" style GUI. I felt this guy should get extra weight as well, as >> this is likely where your deployment action would happen. Does that really >> make it more important than the trigger? Maybe. >> >> "Notifications" would be another boring control set, so I am not going to >> bother showing it, but hopefully you get the idea. >> >> As always, feedback is something I love. >> >> -- >> You received this message because you are subscribed to a topic in the >> Google Groups "Jenkins Developers" group. >> To unsubscribe from this topic, visit >> https://groups.google.com/d/topic/jenkinsci-dev/6BdWZt35dTQ/unsubscribe. >> To unsubscribe from this group and all its topics, send an email to >> [email protected]. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/jenkinsci-dev/605ccf63-4909-4e35-a1f0-022de72e9617%40googlegroups.com >> <https://groups.google.com/d/msgid/jenkinsci-dev/605ccf63-4909-4e35-a1f0-022de72e9617%40googlegroups.com?utm_medium=email&utm_source=footer> >> . >> >> For more options, visit https://groups.google.com/d/optout. >> > > -- > You received this message because you are subscribed to a topic in the > Google Groups "Jenkins Developers" group. > To unsubscribe from this topic, visit > https://groups.google.com/d/topic/jenkinsci-dev/6BdWZt35dTQ/unsubscribe. > To unsubscribe from this group and all its topics, send an email to > [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/jenkinsci-dev/CA%2BbPaoL_kX2mN5haGL8BBTL_v3mhq3Wq9UmHCuwe6ShX7v%3DWNA%40mail.gmail.com > <https://groups.google.com/d/msgid/jenkinsci-dev/CA%2BbPaoL_kX2mN5haGL8BBTL_v3mhq3Wq9UmHCuwe6ShX7v%3DWNA%40mail.gmail.com?utm_medium=email&utm_source=footer> > . > > For more options, visit https://groups.google.com/d/optout. > -- You received this message because you are subscribed to the Google Groups "Jenkins Developers" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/jenkinsci-dev/CAOcHHXz0re3OkDKFHr3FaW38kjajsJ-OOC7xLPWcqBVitnNs3Q%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
