Some Improvements to Brush Editor UX/UI
ClosedPublic

Authored by scottpetrovic on Oct 16 2017, 7:20 PM.

Details

Reviewers
rempt
Group Reviewers
Krita
Summary

This is kind of a follow-up after adding the live preview area. This is mostly a UI/UX update to the brush editor to use the space better.

Reference: https://phabricator.kde.org/T7059

These are the changes I have done:

  1. Re-arrange the editor in general to have the presets and scratchpad areas to the left and right. When they are expanded, they have a label by them to better explain what those areas are called.
  2. Condensed and moved all the saving and renaming functionality to the top area
  3. Converted the Texture option (pixel brush) to a UI file
  4. Changed the Texture option UI to use tabs to avoid running out of space
  5. Reduced the entire height of the brush editor by about 20-30 pixels
  6. Updated text brush tip area to be more compact
  7. Removed a couple functions (hideScratchpad() and showScratchpad()) in favor of the new show/hide logic
  8. Moved the "load default engine preset" to the presets area. Loading it now also loads the thumbnail and name in the top area

I think that is it. All these changes are in my "petrovic/brush-editor-ux" branch. Checking that out will also get you this code.There is a new UI file, so you might need to rebuild to get that to load correctly.

Test Plan

I tested the loading/saving of the texture area since that had the most "coding" work with hooking things up.

Diff Detail

Repository
R37 Krita
Lint
Lint Skipped
Unit
Unit Tests Skipped
scottpetrovic created this revision.Oct 16 2017, 7:20 PM

Hi, @scottpetrovic!

I have tested your patch and here are a few notes:

  1. Re-arrange the editor in general to have the presets and scratchpad areas to the left and right. When they are expanded, they have a label by them to better explain what those areas are called.

I do really like the idea of collapsing the presets and scratchpad areas. Although right now they occupy too much space in collapsed mode :( Can you use something like we use in Onion Skins docker? Or some QSplitter?

  1. Condensed and moved all the saving and renaming functionality to the top area

Looks good, but some tool tips are missing:

And, speaking truly, I don't understand what the top "zoom" button does. I would expect it to toggle the preview zoom to/from current zoom <--> 100% zoom, but it toggles the zoom only once, and that zoom gets reset on any brush change. I feel it should switch the modes and keep the mode remembered on settings updates.

  1. Converted the Texture option (pixel brush) to a UI file
  2. Changed the Texture option UI to use tabs to avoid running out of space

Looks very nice! :)

  1. Moved the "load default engine preset" to the presets area. Loading it now also loads the thumbnail and name in the top area

Works correctly

scottpetrovic updated this revision to Diff 21316.EditedOct 25 2017, 3:06 PM

I have done the following since the first patch

  1. I removed the scale and move buttons for the live preview. This is overcomplicating how this works. It is just a preview. I also could remove all the complex logic with the scaling that was going on before.
  1. I condensed the brush editor space a bit. I removed an extra border around the settings area and condensed the curve widget which was pushing the width out for the editor.
  1. After conversation, the current expand/collapse method for the presets and scratchpad is ok for now.

You can apply the patch.. or just check out my branch that has everything..

petrovic/brush-editor-ux

Some thoughts about editor (+picture):

There is kinda wasted space, especially in the lower part. This space used only in predefined brush tip\texture\blending mode options because they have big scrolling area. So it might be used more efficiently.
Curve presets can be moved to free vertical space on the right of curve widget, there is enough space for much more buttons for future.
"Enable pen settings" can be moved to the right to save some space for sensor list. For options with additional checkbox\slider (like spacing) curve and sensors list will be a bit smaller but it shouldn't be a problem.
All of this can save about 150px of vertical size and there is still borders that can be smaller.

Another stuff:
Texture strength can be moved to another tab in texture option.
Airbrush and Rate options can be "merged" to one, rate control how much is airbrush... rate.
Get rid of Color and Texture groups maybe? I mean only groups, not options inside.
Make order of options more logical (why airbrush is in color for example?)
Create new option for "some random stuff" like Overlay mode (Smudge), Painting mode (Wash\Build up), Source (maybe), Eraser switch size\opacity, Instant preview, Temporally save tweaks (or better move it somewhere to settings and enable it by default)

@radianart I moved your comments to the brush design direction https://phabricator.kde.org/T4536

That was the place I was talking about in our conversation yesterday

Hi, @scottpetrovic!

The patch works fine now, but the buttons on the sides (and especially on the left) look ugly :(

Can you make it look something like that? The frame with button+widget can be replaced with the a single button that shows a separate widget when clicked.

There is a logical problem with the edit button and warning icons. The button should show up next to the preset name, not next to the brush engine name:

I think the two points above are really blocking issues.

When doing the screenshots I also got an idea about relayouting the preview to reduce the hight of the brush editor widget. The screen shot below is just an idea, I don't insist on this layout:

I can move the edit icon by the name.

I am not sure about the arrows with the expand/collapse in the middle. I was originally going to do something like that, but after playing around with it, it ends up just taking up more space visually. With putting it in the middle, the arrows need to stay in the middle...so they will make the whole editor area wider when the arrows need to show the collapse icon. This is the main reason I moved it to the top. Maybe a good solution would be to replace the icons I am using (for the presets and stracthpad) with arrows instead. The arrows can stay on top.

You have an interesting idea about condensing the height with moving it in the settings area. We will need some more conversation with that. With the couple people that have used this patch...they have expressed interest in making the brush preview much larger than it is currently. One direction for the editor settings is to organize the different setting areas differently. For now, the way it is currently organized is ok.

Does that sound alright?

  1. move edit icon by preset name
  2. turn presets and scratchpad icons to arrows

I can move the edit icon by the name.

Ok

I am not sure about the arrows with the expand/collapse in the middle. I was originally going to do something like that, but after playing around with it, it ends up just taking up more space visually. With putting it in the middle, the arrows need to stay in the middle...

Not necessarily. After the widget is expanded you can show the normal button like you do at the moment and hide this vertical one. It will look as if the button has been "morphed" into the standard button.

Here is what I mean by "morphing a button":

dkazakov added a comment.EditedOct 30 2017, 2:33 PM

One more solution:

Here is the latest variant:

scottpetrovic updated this revision to Diff 21661.EditedOct 31 2017, 5:27 PM

@dkazakov - thanks for the review

I made the following updates.

  1. Turned the icons into arrows for the presets and scratchpad areas
  2. Made the arrow icons change depending on whether the area is expanded or collapsed
  3. fixed the extra spacing on the presets area
  4. Moved the edit icon by the brush name

I tried playing around with the "morphing" idea for the preset and scratchpad area. The code was starting to get a bit messy with hiding spacers and changing sizePolicies on objects...so I left that alone for now. There is probably a better way to do it...but we can always revisit that specific point at a later time if we get a stroke of genius on other ideas. With this patch...the editor is both less wide and less tall, so it shouldn't run off the screen for anyone.

You can apply the diff...or probably just switch to my branch that has the changes.
petrovic/brush-editor-ux

rempt accepted this revision.Nov 2 2017, 8:16 AM
rempt added a subscriber: rempt.

I think it should be fine to merge this into master now; more fine-tuning is always possible.

This revision is now accepted and ready to land.Nov 2 2017, 8:16 AM
scottpetrovic closed this revision.Nov 2 2017, 11:11 PM

pushed out