GUI Improvement Proposals

Hier diskutieren die Betatester von PhotoLine untereinander und mit den Entwicklern
User avatar
Herbert123
Mitglied
Posts: 1918
Joined: Sat 12 May 2012 21:38

GUI Improvement Proposals

Post by Herbert123 » Fri 28 Feb 2020 00:58

I am putting some of my thought regarding GUI improvements in PhotoLine into small mockups.

The current Windows version uses quite ugly looking thick borders (almost bars!) at the right and bottom of each free floating panel.
These bars also cause the spacing/padding on the right of the toolbar icons to be too tight, and the icons are visually unbalanced and positioned too much towards the right.

The top title bars have an odd cut-off on the left, which looks like a visual error.

The colour scheme used here is not important - focus is on the GUI elements to create a cleaner look. Dropshadow improves floating impression.

Here a quick redesign. What do you think?
new panels v2.png
You do not have the required permissions to view the files attached to this post.
/*---------------------------------------------*/
System: Win10 64bit - i7 920@3.6Ghz, p6t Deluxe v1, 48gb (6x8gb RipjawsX), Nvidia GTX1080 8GB, Revodrive X2 240gb, e-mu 1820, 2XSamsung SA850 (2560*1440) and 1XHP2408H 1920*1200 portrait

User avatar
ono
Mitglied
Posts: 148
Joined: Wed 21 Jul 2010 23:50
Location: Baden, Switzerland

Re: GUI Improvement Proposals

Post by ono » Mon 02 Mar 2020 23:12

Well I find your left images showing current design bit odd, uglier than in reality. What are these white extra lines. I don't see that on my Win computer. Do you use by chance use some custom Windows theme?

This is how it looks on my 4K Win10 with both Bright and Dark themes.
PL2200_Win10_UI_Bars_Dark.png
PL2200_Win10_UI_Bars_Bright.png
Nevertheless I find the dragging margin (extra padding) on Windows little bit too wide. Maybe it is also coupled with DPI settings and on 100% looks right, but I use 150% and 200% 4K and it is just bit too much.
You do not have the required permissions to view the files attached to this post.
Adam Strzelecki | nanoant.com | CBCT/PET tomography engineer

User avatar
Herbert123
Mitglied
Posts: 1918
Joined: Sat 12 May 2012 21:38

Re: GUI Improvement Proposals

Post by Herbert123 » Tue 03 Mar 2020 21:27

Here is my current setup:
screen.jpg
Full res PNG version here:
https://srv-file12.gofile.io/download/mfSFPQ/screen.png

As you can tell, I adjusted my PhotoLine GUI to accommodate and mirror (mostly) what is known as "industry standard", and this is what most design software looks like when first started. PhotoLine's default interface setup is cluttered and goes against that standard. It is one of the reasons why many users, after seeing PhotoLine, will declare it to be "ugly".

I dislike the too dark default version. Here is a dark version that I like better which still demonstrates the same issue:
screen2.png
There are other issues here, but the white lines now become black borders, which looks even worse than my neutral grey version.

Other issues are:
* the too bright white lettering,
* the unclear highlighted tab (the non-active tab texts should be less bright than the active selected tabs),
* the awkward general white space between elements (or lack thereof)...
* the inverted brush previews in this brightness setup.

Aside from this, just one slider to control the overall brightness of the entire interface is just too limited. At the very least three sliders should be offered: one for the highlight accents, one for the overall brightness, and one for the darkest/black values.

And one setting to control the overall setting for text brightness, and one for the icons.
You do not have the required permissions to view the files attached to this post.
Last edited by Herbert123 on Tue 03 Mar 2020 21:34, edited 1 time in total.
/*---------------------------------------------*/
System: Win10 64bit - i7 920@3.6Ghz, p6t Deluxe v1, 48gb (6x8gb RipjawsX), Nvidia GTX1080 8GB, Revodrive X2 240gb, e-mu 1820, 2XSamsung SA850 (2560*1440) and 1XHP2408H 1920*1200 portrait

User avatar
Herbert123
Mitglied
Posts: 1918
Joined: Sat 12 May 2012 21:38

Re: GUI Improvement Proposals

Post by Herbert123 » Tue 03 Mar 2020 21:30

ono wrote:
Mon 02 Mar 2020 23:12
Nevertheless I find the dragging margin (extra padding) on Windows little bit too wide. Maybe it is also coupled with DPI settings and on 100% looks right, but I use 150% and 200% 4K and it is just bit too much.
Correct, it is unnecessary. I would prefer a small corner grabber anyway, and, as you say, get rid of the visual grab margin, and instead make it invisible. That's what other apps do as well.

PhotoLine breaks common expected GUI rules. Now, it would not be an issue if the current approach would work better, but it really does not.
/*---------------------------------------------*/
System: Win10 64bit - i7 920@3.6Ghz, p6t Deluxe v1, 48gb (6x8gb RipjawsX), Nvidia GTX1080 8GB, Revodrive X2 240gb, e-mu 1820, 2XSamsung SA850 (2560*1440) and 1XHP2408H 1920*1200 portrait

User avatar
shijan
Mitglied
Posts: 352
Joined: Mon 23 Dec 2019 15:21

Re: GUI Improvement Proposals

Post by shijan » Wed 04 Mar 2020 00:09

As it was discussed earlier, Photoline UI problem is way deeper than just fixing some border frame thickness. It just needs to be globally redesigned from scratch to be OS UI independent. Take a look on this article https://www.gimp.org/release-notes/gimp-2.10.html Maybe first version of new GIMP is not the prettiest UI ever made, but GIMP UI designers follow right concepts and logic. Once UI customization is coded it it possible to improve look from version to version. Photoshop went the same way from native OS UI to to final nice looking UI elements and icons in last versions.

Probably developers can even follow Reaper customization concept and provide option to apply custom made themes. Original Reaper UI also was based on and native OS UI theme and original theme provided by developer is not too pretty, but there is a large community and endless themming options and resources. There are even some commercial/donationware very well made themes https://forum.cockos.com/forumdisplay.php?f=26
PhotoLine UI Icons Customization Project: https://www.pl32.com/forum3/viewtopic.php?f=3&t=6302

User avatar
Herbert123
Mitglied
Posts: 1918
Joined: Sat 12 May 2012 21:38

Re: GUI Improvement Proposals

Post by Herbert123 » Sat 14 Mar 2020 02:47

Couple more suggestions:
148462474febb9e42e9b5a1fb4eb5ba89f79a723.jpeg
The adjustment panel still includes this weird looking chrome. Also, these title bars have buttons which are very different compared to any other panel. Their placement is kinda strange too.

And the slider controls are in need of an update. How about this look (Darktable)? It also immediately indicates the visual amount. The triangles look quite refined, instead of those clunky rectangles.
fc2f07ce5a01dc52d7271694cbf941f005836eed.png
You do not have the required permissions to view the files attached to this post.
/*---------------------------------------------*/
System: Win10 64bit - i7 920@3.6Ghz, p6t Deluxe v1, 48gb (6x8gb RipjawsX), Nvidia GTX1080 8GB, Revodrive X2 240gb, e-mu 1820, 2XSamsung SA850 (2560*1440) and 1XHP2408H 1920*1200 portrait

Juan
Mitglied
Posts: 596
Joined: Thu 06 Oct 2011 08:08

Re: GUI Improvement Proposals

Post by Juan » Sat 14 Mar 2020 10:17

As far as I know, I was told that those sliders are drawn by the OS, and that's why they won't change.
I hope this can be bypass in the future and being redesigned. I would maybe prefer a circle instead of a triangle, but let's see.

User avatar
shijan
Mitglied
Posts: 352
Joined: Mon 23 Dec 2019 15:21

Re: GUI Improvement Proposals

Post by shijan » Sun 15 Mar 2020 09:23

It feels like useless talk till program relies on OS theme and no any hint from developers.
It was a story with Vegas Pro app. For a long long time starting from 1999 it was nice and simple video editing app 100% based on native Windows theme. Starting somewhere from version 10 it was sold to Sony and developers start to add theme engine to it. It became look very ugly, buggy and slow. No taste no style. Some parts became themmed some not. It was really bad example of themming engine. Even now after endless changes it still feels very strange and not too professional compare to native look.
But i really hope that somehow PhotoLine UI may look like Resolve or new Blender or something similar. I think it is 90% not about design but about proper UI coding.

Image
PhotoLine UI Icons Customization Project: https://www.pl32.com/forum3/viewtopic.php?f=3&t=6302

PhilM
Mitglied
Posts: 114
Joined: Thu 28 May 2015 18:00
Location: Belgium

Re: GUI Improvement Proposals

Post by PhilM » Sat 21 Mar 2020 16:36

I do not care too much about aesthetic tastes around border thickness, frames and such.

I have a dard time to see at first glance what panel has focus, what layer is active, what switch is on/off ...

What I like in the latest proposal from Sijan, is the red coloring of the active tab ... because of its visibility

I don't like the idea that you have to look inside a panel (or a tab) to find out if it as the focus (or active)
QUOTE : "the non-active tab texts should be less bright than the active selected tabs"

Why can't we go back at the time where the active window had a colored title bar ?
The panel that has focus would be highlighted by a red (or any user selected color) title bar.
Only one panel would have a red title bar at the time (instead of shades of gray).
The active tab inside each panel would stay highlighted weather the panel has focus or not.
The active layer would stay highlighted while painting the document.
The switches that are on would be highlighted also (mask switches ...)
Cursors would be highlighted as soon as they are not at default value.

The main idea is to keep the highlighted objects when the panel looses focus.
And indicate the panel focus by its title bar.

Best regards

Philippe

User avatar
shijan
Mitglied
Posts: 352
Joined: Mon 23 Dec 2019 15:21

Re: GUI Improvement Proposals

Post by shijan » Sun 22 Mar 2020 23:33

I also can suggest one more time take attention to Reaper.app themming. Reaper is for audio, but it always feels very similar to PhotoLine - very powerful, flexible, lightweight and technically probably outperforms any other audio editor. It developed by small company and may be not so polished as apps developed by other large corporations. From early versions Reaper provided flexible option for themming. Here is example of quality theme, inspired by Apple Logic UI and 100% made by forum user supported by community feedback and donations https://forum.cockos.com/showthread.php?t=214879 As you can see quality theme development it is rather hard work and may take months and even years.
I really wish something similar for PhotoLine. I guess theme for graphic editor consists less elements than theme for audio editor and should be simpler to made.

Another global UI request is to unify things between Windows and macOS and add support for single window layout instead of multiple floating panels on macOS.
PhotoLine UI Icons Customization Project: https://www.pl32.com/forum3/viewtopic.php?f=3&t=6302

User avatar
ono
Mitglied
Posts: 148
Joined: Wed 21 Jul 2010 23:50
Location: Baden, Switzerland

Re: GUI Improvement Proposals

Post by ono » Mon 23 Mar 2020 18:53

shijan wrote:
Wed 04 Mar 2020 00:09
As it was discussed earlier, Photoline UI problem is way deeper than just fixing some border frame thickness. It just needs to be globally redesigned from scratch to be OS UI independent.
With all respect, you (and others here) need to provide more concrete propositions to Gerhard and Martin that can be implemented in iterative fashion. Example - we asked for reduction of the excessive margins around panels we got them - almost instantly. Complaining about how much UI needs the redesign to small 2 person team won't get you anywhere.

Nevertheless, I beg to differ with you. I like the PhotoLine's UI. I like its neutral (agnostic) approach that still tries to play well with OS UI and does NOT try to look special like the apps you mention.

Such approach may look "dated" because nowadays nobody cares about following any specific standards and every app tries to look "better", especially on Windows, but on Apple platforms HIG (aka Human Interface Guidelines) still exist (and despite IMHO Apple is not really following them strictly), kudos to PhotoLine authors for making multi-platform app that look almost like native on Mac.

Therefore I am against the revolution but I am in favor of doing small but useful refinements.

What is certainly missing on Mac is ability to work in Windowed mode. Floating panels used to be standard on Mac and many apps (including PS) had them, now most apps use single windows and tabs. I learned to live with that, but I would prefer to have windowed mode that would make many things easier. So I wait for the moment single window tabbed mode will arrive to PhotoLine on Mac too.
PhilM wrote:
Sat 21 Mar 2020 16:36
I have a dard time to see at first glance what panel has focus, what layer is active, what switch is on/off ...
This is because panel has no focus and there is no active panel concept (yet?), it is the layer list control that has focus as gets blue highlight when active vs gray when inactive, same for other controls. Panel is just a container for some controls that can be active or not, clicking on the panel itself does not activate anything, you need to click on the control to get focus.
Herbert123 wrote:
Sat 14 Mar 2020 02:47
(...) The adjustment panel still includes this weird looking chrome. (...)
I agree this looks like something that has been overlooked by devs.
Adam Strzelecki | nanoant.com | CBCT/PET tomography engineer

PhilM
Mitglied
Posts: 114
Joined: Thu 28 May 2015 18:00
Location: Belgium

Re: GUI Improvement Proposals

Post by PhilM » Tue 24 Mar 2020 08:22

ono wrote:
Mon 23 Mar 2020 18:53
PhilM wrote:
Sat 21 Mar 2020 16:36
I have a dard time to see at first glance what panel has focus, what layer is active, what switch is on/off ...
This is because panel has no focus and there is no active panel concept (yet?), it is the layer list control that has focus as gets blue highlight when active vs gray when inactive, same for other controls. Panel is just a container for some controls that can be active or not, clicking on the panel itself does not activate anything, you need to click on the control to get focus.
Thanks for your clarification.
OK I got your point.
The panel is a "control container".

But then each of the controls has a "title bar" that could be used to indicate which control has focus/ is active ...

Regards.

Philippe

Juan
Mitglied
Posts: 596
Joined: Thu 06 Oct 2011 08:08

Re: GUI Improvement Proposals

Post by Juan » Sat 28 Mar 2020 19:37

Hi all,

One common thing that I have seen from diverse forums from new users is the default startup UI of PL. I have to agree with them, the default workspace is not the best for couple of reasons because the amount of panels open at once, it is very confusing and no focus in anywhere.
I understand that the developers wants to display at once all PL capabilities, but this comes with a very high price to pay... chaos (sorry for the harsh word here) but is what the default workspace transmit.

I have been trying for long time a way on how we could reduce the amount of open panels and make the default workspace more "industry standard". I have installed Affinity, Gimp and Krita. What they come with a more clean default interface.

So here is my proposal in low res here because the attachment limitation:

On the left side is where the tools are, on the top the Document list in tab mode.

On the right side the most "critical" panels are enable and docked in small groups to not compromise readability of the tabs with a maximum of 4 tabs per group.
HIRES: https://1drv.ms/u/s!AoMv8bCdXlOdsmR4gwb ... -?e=wAnHnE
NEW default LOW_RES.jpg

As you noticed, the default startup workspace is much more clear and clean. But... I found that the Tools Settings panel is not fitting in this layout basically because it can not become a tab to group it with any other panel. Additionally, this panel is so limited (in shape) that cannot be aligned horizontally, so I came out with this proposal where the Tools Settings panel is redesigned following the "industry standard" layouts out there.

While doing this mock-up, I noticed two big advantages of it, first is ergonomics. By having the Tool Settings panel close to the Tools make the mouse travel distance way shorter which makes it easier to access to the Settings.
Second advantage is this Tool Settings is the heart of PL, where all the tools are controlled and having them separated from the other panels remarks the importance of it, while keeping the left side of the workspace only for actions that are for navigation and creation only.

Here is my draft of the new Tool Settings panel, I haven't aligned any button or clean up the panels, just divided in a way that everything is in a horizontal distribution and to proof that everything fits on this proposal.
HIRES: https://1drv.ms/u/s!AoMv8bCdXlOdsmWDKv5 ... L?e=KCtuE2
Tools Settings LOW_RES.jpg
Here is a compilation of how the Tool Settings panel will look depending of the selected tool:
You can get my original PL file where you can hide/unhide the groups to see how they look in a higher resolution https://1drv.ms/u/s!AoMv8bCdXlOdsmfAfuT ... Y?e=vIAwdq
COMPILATION.jpg

Hope you like it, and please share your thoughts :D
Cheers,
Juan
You do not have the required permissions to view the files attached to this post.

User avatar
shijan
Mitglied
Posts: 352
Joined: Mon 23 Dec 2019 15:21

Re: GUI Improvement Proposals

Post by shijan » Sat 28 Mar 2020 20:09

Yes, default startup UI was confused me as well. Looks like just all panels randomly placed. It needs some work to arrange things.
Also we can see another odd difference between Windows and Mac. Windows allow to stack all panels into single window, but mac don't. It is near impossible to use top horizontal toolbar on Mac in same way as on Windows. Same time Mac UI elements looks way more cleaner and better to eye.
I place Toolbox panel near Tool Settings and must say things are way faster now. I don't need anymore to move mouse trough all screen to the left and back. That Photoshop-like Tools panel on the far left is rather inefficcient and legacy location. It was designed in past for small CRT screens, but everyone blindly follow it just because it looks familiar.
If it helps here is example of my layout with customized icons set: https://i.imgur.com/NOMQLkW.jpg
PhotoLine UI Icons Customization Project: https://www.pl32.com/forum3/viewtopic.php?f=3&t=6302

User avatar
shijan
Mitglied
Posts: 352
Joined: Mon 23 Dec 2019 15:21

Re: GUI Improvement Proposals

Post by shijan » Sat 28 Mar 2020 20:35

ono wrote:
Mon 23 Mar 2020 18:53
With all respect, you (and others here) need to provide more concrete propositions to Gerhard and Martin that can be implemented in iterative fashion. Example - we asked for reduction of the excessive margins around panels we got them - almost instantly. Complaining about how much UI needs the redesign to small 2 person team won't get you anywhere.
Here is idea in details without sketch (i described same things before in other threads):

1. Use native Mac UI elements and window layouts (text fields, buttons, sliders, scrollbars, window frames and so on...) as a reference layout.
2. Change some corner raduses or some sizes relations to few pixels or so, to avoid direct 1:1 copy and potential copyright problems.
3. Desaturate and adjust UI colors to match dark, dark-grey, light-grey and light color schemes.
4. Add seamless panels stacking/snapping option similar to Windows version.
5. In future versions add redesigned and proper aligned/centered to button frames dark and light Icons/cursors set. I had quick attempts to make icon set better here https://www.pl32.com/forum3/viewtopic.php?f=3&t=6302 but it is only for light UI and not for Hi dpi display. It is just an example that same UI may looks very different with cleaner and better aligned/centered icons.
Current "Auto invert" of icons technically may looks interesting but practically is a bad way to go. It produce bad looking results. I 100% sure there are thousands of beautiful ready made commercial SVG icon sets for graphic editor apps UI that available around $20-$50 at icon stock marketplaces. I also sure that author of selected icon set will be happy do add additional specific icons for request made with same style.
PhotoLine UI Icons Customization Project: https://www.pl32.com/forum3/viewtopic.php?f=3&t=6302