List of style update issues

[guerler]

Follow-ups for #6422.

from @jxtx:

• System fonts
• Eliminate "lavender"
• Improve default colors
• Fewer borders
• More flex (resizeable) components
• Better / more consistent use of whitespace (far from complete)

from @mvdbeek:

Alright, so these things I have found:

• [x] in multi-select mode the checkboxes are slightly cut off:

• [x] The done button for history and HDA annotations is too big:

• [x] The placement of the integer box here seems off (and the tool header space could be used better)

• [x] Tool form preview in the workflow editor still uses the old style

• [x] View workflow also still uses the old style

• [x] Share workflow uses old style:

• [x] Visualizations partly use old style

• [x] Importing workflow uses old style:

Various forms in the admin interface use the old style

• [x] Data tables

• [x] Job interface

• [x] Tool shed selection

• [x] Resetting metadata

• [x] The Execute button mixes with the help text

[martenson]

edit: solved with https://github.com/galaxyproject/galaxy/pull/6870

centered form field

edit: I see this had been reported and 'checked off', but I still see it on latest dev

[hexylena]

This is less of an "issue" and more of an opinion: I love all of the changes to make things cleaner, but in the toolbox, masthead, history I have the feeling that there is just too much wasted space. EU's toolpanel will seem even more overcrowded and unreadable than it does already due to the larger font and extra padding. The masthead I can probably get used to. Maybe this is just me being new to the redesign, but, my 2¢.

[martenson]

@erasche I think padding is something we still want to change a lot. Vertical alignments are often off, and some space does seem wasted, as you pointed out. We could consider including a 'compact' style switch.

[hexylena]

@martenson hey that's great to hear! I'd love a compact style switch (or a style switch between different 'themes'.) It's a totally silly request but users love that sort of thing.

[jxtx]

Thank you for the feedback!

I've been asking people for a few years, and especially at this last GCC, when they tell me Galaxy looks "out of date" / "old", what would make it more modern?

The only consistent answer has been bigger fonts and more whitespace.

But maybe we aren't putting it in the right places...

Helena Rasche notifications@github.com writes:

This is less of an "issue" and more of an opinion: I love all of the changes to make things cleaner, but in the toolbox, masthead, history I have the feeling that there is just too much wasted space. EU's toolpanel will seem even more overcrowded and unreadable than it does already due to the larger font and extra padding. The masthead I can probably get used to. Maybe this is just me being new to the redesign, but, my 2¢.

-- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/galaxyproject/galaxy/issues/6706#issuecomment-426947009

-- James Taylor Ralph S. O'Connor Professor of Biology and Computer Science Johns Hopkins University

[hexylena]

It definitely makes it more modern! Especially in context of the trends from all of the google interfaces. I can see where that feedback comes from. And if this was a product like mail / calendar / some other google product, I'd say yeah it makes sense. And whitespace in header, yeah, this makes sense. Those click targets are way easier to hit and for often used actions, definitely.

For the toolbox specifically, in this case, I have the impression that our audience is more technical and better equipped to deal with more information density, if it helps them do their job a bit more easily/efficiently.

My impressions of the latest trends in UI designs from large (albeit non-technical projects) is that they're all removing as much information from the screen as possible, decreasing the possible actions that can be executed. I don't have the feeling that this is something galaxy is desiring? But I guess there is some balance to be had between making the UI less confusing for new users and retaining the UI abilities for (non-api-using) power users.

Thanks for being open to feedback!

[jxtx]

Sounds good. There's a lot more we'd like to do with the toolbox anyway. And I really haven't done anything with the styling of the history items, which need to be balanced with the toolbox.

I agree we don't want to reduce the possible actions. Galaxy is complicated. "There is no such thing (yet) as an automated gearshift in short read mapping. It is all like stick-shift driving in San Francisco."

It would be interesting to identify other web applications that do this well and see if there is anything we can ~steal~ use as inspiration.

[guerler]

Yeah there is definitely still work to be done. Thanks for all the feedback. After fixing some of the obvious glitches mentioned above, I plan to resolve the history panel styling.

[hexylena]

Hmm. I'd started a comment but looks like it's gone because I got too distracted.

The short version is the only things that come to my mind that reach similar levels of complexity is the AWS management console. And I don't think anyone will point this out as a paragon of UX design.

I struggle to think of any other service that needs to deal with what is essentially live construction of a workflow, with different 'threads' of data that you're working on, and doing any of some 2k different operations with that data at any time. AWS certainly doesn't handle this, they say "here's the API".

But that takes the discussion more in terms of new UIs/UI overhauls, and that's not quite the limited scope of things we can tweak within the CSS to make it more usable.

Edit

Oh, it was just in another browser session:

google's api explorer which let's you execute functions, see results, and see history of execution? But the interface is very clunky and definitely not in the same vein

[martenson]

I checked off the ' The Execute button mixes with the help text' since all of the bedtools seem to render fine on dev for me. @mvdbeek did you report this? any special state?

[mvdbeek]

Yes, bedtools shuffle, other than serving via planemo no. So I guess it's resolved.

[hexylena]

I just wanted to say it's growing on me :)

Thoughts on removing whitespace around the header?

vs

[hexylena]

The options for a text param is improperly styled / unreadable

[scholtalbers]

At least for the .donemessagelarge the text color should be black (or similar) for readability, looks fuzzy otherwise (on dev):

Similar the contrast on the errrored history datasets is somewhat low:

[mvdbeek]

I think this is done, if there is stuff that isn't we're probably not going to target 19.01. So I'm closing this, feel free to open a new issue with missing things. Thanks a lot to everyone that worked on updating the style and testing them!