Scribus UI/UX improvements

Previous topic - Next topic

cloudbusting

Just put some thoughts together. Perhaps this has already been discussed. Please ignore me if it has!  ;D
I guess the main idea is condensing the interface a bit and re-evaluating the existing divisions in properties. Currently settings for various typography features are spread amongst too many tabs as an example. I think this is hindering the full potential of Martin's awesome scrolling feature. There are secondary sections within the "text" section for example that need to be navigated through for some opentype stuff, etc.

I haven't been able to test the integrated indigo app version as I'm on windows so I may have missed stuff.


[attachment deleted by admin]

CGood

It might be interesting to look at the interface from a photo editing program called Darktable.  It has potentially valuable ideas.

There are none of the usual drop down menus. Instead almost all actions are driven from panels on one side of the screen. See PanelClosed.jpg

The panels each drive a single kind of action. The panels expand fully so that the controls for a given action are completely available. See PanelOpen.jpg

The selection of what panels one wants to be visible and available can be customized with a couple of clicks. One can "put away" unwanted panels or re-introduce them, to allow fast and least cluttered access to the ones one wants. And that is the notion I hope I am explaining here,  that the ability to quickly adjust one's interface gives a fluid and uncluttered workplace.

[attachment deleted by admin]

cloudbusting

Btw I see the Scribus bug tracker roadmap for 1.5.3 is at 95% currently, which is exciting :) 

@Martin,
Are there any issues/ideas in particular you'd like to discuss for clarity/community feedback?
Are the existing panel sections in the non-indigo Scribus app set in stone, or can you recategorize
settings as you see fit?


tim_occ

#168
Yep,

I want to show something. Based on the last propsals and posts I reworked the Property Panel.

My proposal below show only the "frame" panel. The image section as well table section will be located in "content" panel together with text settings. Only group settings still missing in my propsal. It needs more brain, because most of the group settings are copies of shape and transparency section.

The idea behind such UI is to have minimal basic settings of most often used settings. Every setting, e.g. color represent only an "access point" which you can edit in a separat dialog / popover. That save a lot of space if we put the setting details in a second level. Furthermore we can reuse all level two dialogs / popovers on different places.

I think at this point we can discuss which features / settings have to be in level one and level two.

BTW: the power on/off icon will expand or collapse the section body + enable or disable the settings for the selected object.

Let me know if you have questions or feedback.
regards,

Martin



[attachment deleted by admin]

tim_occ

Hi together,

I think a simple post is not enough to show all details. If you want to see more details take a look to my presentation. There you can make comments to specific elements too.
https://docs.google.com/presentation/d/1JRs-9VUaZGjG3Dvyci2DCpwIpYQLR8IZv485hjujdEk/edit#slide=id.p

Have in mind that the layout is not written in stone. It is just a proposal and can be refine, change or rework in any direction. It should keep a community project. ;)

Step by step I will extend these presentation with more UI propsals for other panels, dialoges and other places. I hope I will find a good way to merge all of your ideas into one useful concept.

regards,
Martin

CGood

Is it fair to toss out a group of ideas and responses? A couple of responses - positive - as I look at your beautiful work: I immediately like the idea of putting level in the shapes panel. Knowing a level numerically would assist navigation.

I really like your emphasis on a compact presentation of the components of each panel. Since I am often working on a laptop, not an ideal tool for DTP, well fitted information and data input will make life easier. I suspect that the original format was developed with desktop size monitors in mind, an entirely reasonable assumption, and the increasing usage of smaller devices is an unforeseen limitation on viewing space. Your design seems to present excellent visibility without losing clarity.

I also appreciate the inclusion of shape, borders, and drop shadow into the frames panel - less jumping around to access related activities.

I may be missing something right in front of me but I'm not seeing a text properties panel or dialog in your presentation. Do you see that as a panel? I suspect so. And do you see it remaining much the same or changing significantly? Might a button connect text properties dialog or panel to opening the style manager?

Also, what do you have in mind for text and paragraph styles?

Usually I argue for very compact dialogs for space economy, but whatever happens with the dialog to create new colors - Edit>Colors and Fills> Add  - color creation dialog might want to be a bit more generous in size. It can be fussy to do precise color picking in the existing dialog. The little window that shows the whole spectrum and gradations of saturation is quite small. There appears to be opportunity to rearrange as well as enlarge the whole thing were it to me.

The old vs new windows should be larger and touch seamlessly. Fine gradations of color are more difficult to see when separated by any visual barrier. The resulting interface would be less visually appealing but better for actual color work.

I have mocked up a rough sketch of a color picker dialog with more area given to the color picker window, and adjacent before and after color windows.

A question for everyone. How much do you use "Align and Distribute"? Does it make any sense to incorporate a button to invoke  "Align and Distribute" from frames / shapes panels? I don't know for myself. I can see either answer.

Layers - Do Layers deserve a place in panels? I'm not sure if this is part of your "panels philosophy". The availability of a shortcut (F6) makes it a less urgent question, but it still pops into my head that the panels and properties may be a logical launching point for things like this - just a button or a panel?

Once again thank you for putting this together!

[attachment deleted by admin]

tim_occ

Hi CGood,

thanks for your quick feedback. You are right, the text properties are not in my presentation. I will do some stuff later on it. ;) I'm not sure if you know it already, the developers have extracted the text properties from common property panel. There is a floating idea which split all properties into 2 diffent panels. One panel hold all "frame" properties the other one all "content" properties. So, frame size, drop shadow, border and fill color will be "frame" related. Text, image and table are content related and will be in the second panel.

My proposal show only the "frame" panel. Later I will take a look to the "content" panel, because the restructure of the text section will be a bigger effort for me.

For the Text properties I can image to do it the same way as I show in my proposal. You have some combo boxes to choose your paragraph or character style and your can open the edit dialog on text property section. But lets see.

If I'm thinking about the color sets and color mixer it is a lot of work to unify and simplify that colossus.
Personally I never used much different color sets. It is enough for me to have a local one which I fill easily step by step with colors while I'm working and not in the beginning before I make anything on the document. I can imagine to have one common dialog on all necessary places to edit the local color set. If a user click on a color field it opens the common dialog where the user can edit the palette, select a pre-defined color from color set or mix a new color. I think can be simple and clean without much clutter. See attachement.

For layouts I use really often "Align and Distribute" functions, but I think a good auto snaping feature can reduce such usage. (But only if the snaping tool show distances between objects).
I think for scribus it can be in a separate panel, because there are a lot of options and possibilies to use it. Some other layout applications have only few buttons which they can group with other features.

About the layers, I think it should be a separate panel. It is your only possibility to sort objects in Z-level on one place. For complexer layouts it is essentiell. Why not keep it in it's own panel?

The attachement show different color picker from other applications, but in general I think to merge the scribus "Manage Color and Fills" dialoge and the "edit color" dialog into one for all places.

regards,
Martin



[attachment deleted by admin]

cloudbusting

Hi Martin,

Are the mockup graphics you're using available for download by any chance? Would be nice to play around with ideas if I can find some time  :)

My thoughts:
I would prefer if layers was left as a panel; I think it's essential for complex layered typography+illustration projects. Judging by the animation gif on page 9 of this thread though, it looks like you can close the panel if you wish to save space @CGood? Maybe I'm wrong on this (?)

Do you think Align and distribute buttons could fit into the XYZ panel beside the flip buttons in your mockup @Martin? Not sure how everyone else feels about this though... I tend to be distrustful of snapping but perhaps others feel differently :P I do think displayed distances would be needed, as you say, in the absence of these buttons.












tim_occ

Yes, you can have the mockup file. https://mega.nz/#!XN0iwSiL!Y6gJa9Kh3196PkdGNU85eGscP0FoaQ4odWMNPEXNhp8 (443KB)

But you will need Gravit.io to edit this file. http://designer.io/ (it's free)
You can use it in your browser or as desktop application. But it is a bit slow. At this point if someone knows a better tool let me know. Unfortunately Inkscape is not much better.

Yes, you are right, as long we will have the layers in a separate panel you can close it to save space... but I know someone will need layers, he/she can show the panel. If we would merge such features into the property panel you can't hide the section easily. The same for alignment and distribution panel.

I think for alignment and distribution it makes no sense to have it in property panel because it is not a property function. And for the alignment-snapping tool... yeah it is another topic which we can discuss later. :D

regards,

Martin

CGood

A few quick comments.

Martin: I'm not sure if you know it already, the developers have extracted the text properties from common property panel.

That sounds like an excellent jumping off point.

Martin: split all properties into 2 diffent panels. One panel hold all "frame" properties the other one all "content" properties. So, frame size, drop shadow, border and fill color will be "frame" related.

I like that, gathering connected tools closely!

Martin: Text, image and table are content related and will be in the second panel.

I like that too. I suspect that with a lot of topics to control from the Content Panel, there might be pop ups or flyouts to drill down to the many moving parts?

Martin: My proposal show only the "frame" panel. Later I will take a look to the "content" panel.

I really like the thinking on everything so far.

Martin: If I'm thinking about the color sets and color mixer it is a lot of work to unify and simplify that colossus.
Personally I never used much different color sets. It is enough for me to have a local one which I fill easily step by step with colors while I'm working and not in the beginning before I make anything on the document. I can imagine to have one common dialog on all necessary places to edit the local color set. If a user click on a color field it opens the common dialog where the user can edit the palette, select a pre-defined color from color set or mix a new color. I think can be simple and clean without much clutter. See attachement.


I like the idea of gathering related functions together so that one's instinct is to more naturally go to the right place. Use of the current interface involves remembering the different places various functions can be accessed and some hopping back and forth.

The GIMP and Indesign images you attached show the before and after color patches touching - one thing that greatly helps with more precise color thinking.

Martin: For layouts I use really often "Align and Distribute" functions, but I think a good auto snaping feature can reduce such usage. (But only if the snaping tool show distances between objects). I think for scribus it can be in a separate panel, because there are a lot of options and possibilies to use it. Some other layout applications have only few buttons which they can group with other features.

I'm not sure I understand "But only if the snaping tool show distances between objects". Do you mean that the snapping radius might be a visible line around an object?

I don't tend to use snapping much. I might use it more if there was a handy way to turn it on and off quickly, but that is very low in my shopping list.

Martin: The attachement show different color picker from other applications, but in general I think to merge the scribus "Manage Color and Fills" dialoge and the "edit color" dialog into one for all places.

I notice that an eyedropper color selecting tool is in the other program's dialogs - I think that is appropriate in a color picker panel or dialog.

Cloudbusting: Do you think Align and distribute buttons could fit into the XYZ panel beside the flip buttons in your mockup

If it is feasible, that sounds like another instance of putting related things together and making overall navagation and productivity faster and easier.

Martin: as long we will have the layers in a separate panel you can close it to save space... but I know someone will need layers, he/she can show the panel. If we would merge such features into the property panel you can't hide the section easily. The same for alignment and distribution panel.

I think for alignment and distribution it makes no sense to have it in property panel because it is not a property function. And for the alignment-snapping tool.
>>

I'm unsure what you mean in "property panel" and "not a property function".  By "property panel", do you mean the XYZ panel?

Are you thinking Layers  and A&D should each have their own separate panels?  I am not objecting, but merely trying to understand your thoughts.

Again - wonderful work!

a.l.e

QuoteAt this point if someone knows a better tool let me know.

personally, i prefer the use of the beta vesion (3.0) of pencil:

http://pencil.evolus.vn/

... it helps me focus on the concepts and avoid losing time on details that belong on another level...

GarryP

<rant>
There is a lot of great work and discussion going on here so I won't try and get in the way, but I think I need to add my two-penneth about colour editing (as it has already been brought up).

I've said this elsewhere but, for my purposes at least, the current tools for colour editing/maintenance are archaic and require way too much work to use easily. Having to go into a modal dialog and then into another, then change the values, then OK out of the two dialogs just to change a colour is, to me, a very long-winded and, frankly, silly process.

Adjusting a colour until it's right can be a very long process consisting of many dialog-openings and button-clicks that really shouldn't be necessary, especially not in 2017. Colour manipulation is a core DTP function so why does Scribus make it so damn awkward to do?

If any changes are to be made about how Scribus lets users use colours then I think the whole area needs to be looked at from a root level to make it as easy as possible.

It would be a great pity for the UI to have all of these really nice improvements while also keeping such an old-fashioned and long-winded process in place. A little bit like giving a house a complete make-over with new doors, windows and furniture, but leaving the stained and tattered old carpets in place. It just doesn't make sense to me.
</rant>

P.S. The "Before and After" colour swatches in any colour editing dialog/window/area need to be abutted against each other. Having a gap - as is currently - makes the whole thing pointless when you're making subtle changes as your eye "recalibrates" on the colour in between. (In other words, in the time your eye has moved from one to the other it's already seen a different colour so you can't see the difference properly.)

tim_occ

#177
Quote from: CGood on March 06, 2017, 01:24:27 AM
I'm not sure I understand "But only if the snaping tool show distances between objects". Do you mean that the snapping radius might be a visible line around an object?
Yes, I mean it should show the radius. Maybe snapping is the wrong description for that. I have something in mind like Google Slides do it (see attachment).

@a.l.e.: In that past I tried out Pencil 3 but it doesn't allow custom shapes and also it is hard to import custom icons. But all over it is a nice tool, yes.

I thought about the color picker. And now I have an all-in-one thing. :D It can be used on all places where colors, gradients or patterns can be set.
I'm not sure if it is to complex at the moment. But you can manage your color palettes, gradient sets and patterns.

@Garry: unfortunately it is not a root level element yet. But if you will click on such small "color preview" in property panel it will open this new dialog. Important is that all changes which you make in the color picker should instantly apply to the object in the document. Otherwise is it a guess how does it look at the end. That is why there is no apply button.

regards,

Martin

PS: the empty buttons in left down corner of the color picker can be uses to import colors/gradients from other sets or to filter the list or to save/load the set.

[attachment deleted by admin]

CGood

A few responses.

Making the actual HSV "rainbow" color picking window larger would mean that manual dexterity is less taxed to get any desired degree of precision of color selection. This may not the place to be saving interface real estate. The current size feels too small to me. Any given movement of the mouse makes too big a change in color. I cannot make movements fine enough to make subtle changes. I am a painter and color relationships matter to me. I feel like I am unable to control color. I feel like I make big sloppy changes even when I put 100% concentration into controlling my movements.

Another possibility - would arrow keyboard input be usable to nudge the control point within the rainbow? I see that I can influence the sliders below, but would it make sense to retain the focus on the rainbow window, and allow very fine movements via arrow keys? Just an idea. If any good, I imagine this could get added now or later.

GarryP, as usual, cuts directly to the heart of the problem in the color dialogs. At an absolute minumum, it takes eight clicks to set a new color. I am sure that could be reduced.

There are other places where intermediary dialogs have to get clicked through with no benefit. Adding glyphs off the keyboard is the same. First it takes two clicks to get to something called the "Character Palette". Then, since that is just a conduit to Glyphs, another click, and then I have arrived at the "Enhanced Character Palette". And then, rather than using the logical process where a single click would only highlight a glyph, and a double click would enter it in text, a doubleclick merely puts that glyph in an intermediate state. Then it takes yet another click to enter the glyph into one's text. Then I need two more clicks to back out of two dialogs. In sum, it takes eight clicks or more to invoke the dialogs, insert a glyph, and back out of the dialogs.

I see no benefit from those intermediary dialogs. I would be very pleased if the number of functions that tale one through useless screens were reduced.

Beyond that, enabling a different and more emphatic action from a double click than from a single click makes for efficiencies with little downside. I don't know if there are other places differentiating between single click and double click actions could be useful?

<rant>I feel the same about the text editor. I do remember reading somewhere that it does have some value, but for the life of me, it feels like one more wall, one more set of avoidable clicks, one more interference, between me and doing design. Why should I work in an interface where imoprtant modifications are invisible when I can just work inside my document where I can see what I am doing?</rant>

There are two things I want to speak to here. One is that the list of wanted features may at some point be just too much for Martin. For me, if we can make real progress, even if not perfect, I am in favor. Perfection may not be a valid goal. Martin please speak up if you reach a limit?

The other is that the scope of things that are being talked about might veer into layers of software I suspect no longer are "interface" features. I suspect that both the color dialog and the glyphs could each be unified much as a matter of a new interface and reconnecting interface controls to existing underlying functionality. But, I want to encourage Martin and the devs to speak up if my or anyone's requests start heading into the under-the-hood code. I don't see that here, but please feel free to direct me to the new features wanted list if I'm off topic on any commennts here. I'm not a developer so my view of what connects to what and how is just guesswork.

CGood

Martin - while I was scribbling you have posted a reply that may answer a couple of my notions but I need to reply later. I am out of time.