REDESIGNED LAYERS TAB

[Luca Ippoliti]

 

 

Edited June 19 by Luca Ippoliti
Updated with suggestions

[walt.farrell]

Your redesign seems to have dropped the nesting-depth indicators along the left edge of the panel (which are hard to see in your original screenshot; Light UI might show them bettter), which (if not present) will eliminate the possibility of some expand/collapse actions.

[Bryan Rieger]

Those 'nesting indicators' have always been difficult to see, and aren't exactly intuitive as an expand/collapse trigger - especially as once you trigger one (collapse), you then have to go and find the parent anyway in order to expand it again.

[walt.farrell]

Good point, Bryan, but any redesign should provide them (or equivalent) so we don't lose the functionality they do provide.

[Frozen Death Knight]

I like the pure white icons and text compared to the current UI. The text font is more readable as well, but it still has the issue of the GUI lacking a scaling feature. On anything above 1080p the UI becomes incredibly tiny with limited ways of adjusting it for the screen resolution and size. 

I don't particularly care for that redesign of the visibility buttons being moved and replacing the position of the parent-child arrows. The re-arrangement doesn't improve anything functional beyond just making it look exactly like Photoshop. Other software such as Blender and even OS file systems use the current method of putting an arrow for opened and closed parent layers/folders on the left side. There's nothing inherently wrong with the current button placement.

The improved contrast is the main thing I like about this redesign, like having a lighter grey for the layers to contrast the dark panel borders. There is overall a lack of contrast that's been a big issue since V2 when a much darker UI option was added. Replacing the dot with an eye is a good change as well, but a lot of the iconography just looks like a desire to make Affinity an exact clone of Photoshop.

[loukash]

1 hour ago, Luca Ippoliti said:

REDESIGNED LAYERS TAB

No offense, but as an "ex-Photoshop user" of over 20 years, I definitely wouldn't ever want to go back to that horrible UI again…  

7 minutes ago, Frozen Death Knight said:

a lot of the iconography just look it's trying to make Affinity look like a clone of Photoshop.

Yep…

 

[Luca Ippoliti]

52 minutes ago, walt.farrell said:

Your redesign seems to have dropped the nesting-depth indicators along the left edge of the panel (which are hard to see in your original screenshot; Light UI might show them bettter), which (if not present) will eliminate the possibility of some expand/collapse actions.

I'll definitely take a look! Thanks for pointing that out!

 

18 minutes ago, Frozen Death Knight said:

I like the pure white icons and text compared to the current UI. The text font is more readable as well, but it still has the issue of GUI lacking a scaling feature. On anything above 1080p the UI becomes incredibly tiny with limited ways of adjusting to the screen resolution and size. 

I don't particularly care for that redesign of the visibility buttons being moved and replacing the position of the parent-child arrows. The re-arrangement doesn't improve anything functional beyond just making it look exactly like Photoshop. Other software such as Blender and even OS file systems use the current method of putting an arrow for opened and closed parent layers/folders on the left side. There's nothing inherently wrong with the current button placement.

The improved contrast is the main thing I like about this redesign, like having a lighter grey for the layers to contrast the dark panel borders. There is overall a lack of contrast that's been a big issue since V2 when a much darker UI option was added. Replacing the dot with an eye is a good change as well, but a lot of the iconography just look it's trying to make Affinity look like an exact clone of Photoshop.

I have used Photoshop as a reference, and I'm aware probably unconsciously have it as a "bias" in my head, but I designed this mostly on personal taste and visual clarity. 

Per my workflow, being able to very quickly recognize shown and hidden layers at a glance is very important to me. By puttig the icon at the left most side, it emphasizes the importance of that command. ( Let's call it an ON/OFF switch of what is shown" )

If Photoshop personally appeals to my sense of clarity more, that's probably why it looks like that. I don't have any wish to "make it look like Photoshop" I can assure you.

 

I just want to have it look good, that's my only priority. The iconography is one of the "least important" points in my mockup - aside from the eye - I agree that it works pretty well as it is. Personally, I think around 80% of Photoshop looks very dated, but not the Layers Panel.

Edited June 18 by Luca Ippoliti

[Frozen Death Knight]

20 hours ago, loukash said:

No offense, but as an "ex-Photoshop user" of over 20 years, I definitely wouldn't ever want to go back to that horrible UI again…  

I don't hate the Photoshop UI. Besides Adobe being attached to it I actually like Photoshop, or at least old Photoshop until it became way too bloated. I just don't think Affinity needs to look exactly like Photoshop to be good as well. The current UI has issues for sure, but it doesn't need the kind of overhaul to make it look and behave exactly like Photoshop. For instance, Photoshop Adjustment Layers don't have built in masks into their thumbnails like Affinity does. You can't have both icons and mask thumbnails as icons at the same time, so Affinity needs to be different to accommodate for features such as that. 

[Frozen Death Knight]

7 minutes ago, Luca Ippoliti said:

I'll definitely take a look! Thanks for pointing that out!

A tip. Holding down alt while pressing the arrow allows you to open the entire hierarchy or close the entire hiearchy if the parent layer is opened or closed. There is also a shortcut for jumping straight to your selection in the Layers panel, which you can find here (I put it on ctrl+F for muscle memory).

[Bryan Rieger]

20 hours ago, Luca Ippoliti said:

The iconography is one of the "least important" points in my mockup - aside from the eye…

Unfortunately Serif has been hellbent on NOT using the eye for general layer visibility despite using it for layer visibility in the Export persona (Designer and Photo) as well as one or two other places if I recall correctly. While the eye icon is a very well known UI convention for toggling visibility, using a dot (that essentially becomes invisible when hidden) is a hill that Serif seems intent to die on.

[Frozen Death Knight]

11 minutes ago, Luca Ippoliti said:

I just want to have it look good, that's my only priority. The iconography is one of the "least important" points in my mockup - aside from the eye - I agree that it works pretty well as it is. Personally, I think around 80% of Photoshop looks very dated, but not the Layers Panel.

Yeah, agreed. I came back to Photoshop years after I stopped using it and noticed how much the software is starting to show its age. Lots of old limitations that just simply don't exist in more modern programs like Affinity, even if it is more polished in other areas. A typical antiquated tool is building curves in Photoshop that has multiple tools instead of the more streamlined Pen Tool and Node Tool in Affinity that has more contextual shortcuts and baked in options in the top toolbar rather than having multiple tools to do things such as add or remove nodes like in Photoshop and also Illustrator.

Both could learn from the other if you ask me. ^^

[Frozen Death Knight]

6 minutes ago, Bryan Rieger said:

Unfortunately Serif has been hellbent on NOT using the eye for layer general visibility despite using it for layer visibility in the Export persona (Designer and Photo) as well as one or two other places if I recall correctly. While the eye icon is a very well known UI convention for toggling visibility, using a dot (that essentially becomes invisible when hidden) is a hill that Serif seems intent to die on.

Let's see what the new UI developer will decide once that position is filled. My bet is a lot will change UI wise in the coming years (like adding in that eye! :P).

[Luca Ippoliti]

15 hours ago, walt.farrell said:

Good point, Bryan, but any redesign should provide them (or equivalent) so we don't lose the functionality they do provide.

 

I can see this being very useful for very large folders, the user doesn't have to scroll up all the way just to close it now.

Great suggestion 😉

[fde101]

This is a duplicate, created by the same person who created a very similar thread a few days ago and evidently decided to post his updated suggestion in a new thread rather than updating the old one:

 

Many of the comments I made there apply here as well.  Color too prominent along the side of the panel typically facing the document, etc.

Instead of having too large of an indent as in the previous iteration, this new design seems to eliminate the indent completely and tries to use shading to indicate folder depth - the problem here is that the depth may be arbitrary, as groups may be nested within groups and the like, and there is a limit to how many shades can be reasonably supported after which it may become necessary to "cycle" the shades, which would make things more confusing, not less.

[fde101]

Consider how much effort some people go to in order to minimize the impact of color on their perception of the image they are working with:

https://www.churchfilmschool.com/blog/how-to-set-up-your-office-for-color-grading

 

Some places which do color grading for film go so far as to paint the walls with paints that cost over $30/gallon to make sure that any light reflected off the walls has as little impact as possible on the image they are looking at.

Many of us will definitely not appreciate, when using a tool where color of the image is judged directly by eye while manipulating it, having a rainbow of colors as part of the user interface, almost right up against the document.

 

I am all for making improvements to the user interface and to making things more clear, so long as they actually are improvements, but those improvements need to be balanced against the need to maintain as neutral a surround as possible for the image being worked on and against other practical concerns; given the nature of the tool, moving those colors to the side which most commonly faces the image could force the panel to be moved to the other side of the interface (against the toolbar), which would simply be trading a smaller existing workflow impact for a potentially much bigger one being introduced.

[Luca Ippoliti]

56 minutes ago, fde101 said:

This is a duplicate, created by the same person who created a very similar thread a few days ago and evidently decided to post his updated suggestion in a new thread rather than updating the old one:

 

Many of the comments I made there apply here as well.  Color too prominent along the side of the panel typically facing the document, etc.

Instead of having too large of an indent as in the previous iteration, this new design seems to eliminate the indent completely and tries to use shading to indicate folder depth - the problem here is that the depth may be arbitrary, as groups may be nested within groups and the like, and there is a limit to how many shades can be reasonably supported after which it may become necessary to "cycle" the shades, which would make things more confusing, not less.

• I couldn't find a way to delete the thread, I'm new here. I changed so much about my original design that I think it deserved a new thread.

 

• As for your concern for folder depth legibility, I think it's a fair one, I have addressed it here and I think this is a reasonable solution. I think good design should not shirk the "average" user experience just to accomodate the "power" user's needs. Both are important, I think this is a good compromise.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

• As for your point about the LAYER colors, I think that's also a valid point. Just having an option to choose which side they appear on should be enough. Additionally, an option for less saturated colors could also work well.
• After some experimentation, I concluded that having the color and the Visibility toggle be one and the same feel pretty crucial to my sense of clarity, so to me this design feels like the perfect one. I guess giving the user an option to separate them could also be a solution.

 

Edited June 19 by Luca Ippoliti
formatting

[Bryan Rieger]

Personally, I find this design very difficult to scan, illegible (the contrast is worse than it already is in the apps), and ultimately confusing. Not sure what you're doing with folders, arrows and contrast/depth, but honestly, I can't make heads or tails of it.

I'm hoping that with the new UX designer at Serif/Affinity things will start to improve based on the use of common patterns, accepted standards, adherence to OS guidelines, and formal user testing and research. Not design by committee, individual ego, or what someone thinks is 'cool'.

[Alfred]

3 minutes ago, Luca Ippoliti said:

I couldn't find a way to delete the thread, I'm new here.

You can hide a thread if there are no replies, but you can’t delete it unless you’re a member of Serif staff (the only members who have moderation rights here).

7 minutes ago, Luca Ippoliti said:

I changed so much about my original design that I think it deserved a new thread.

I disagree, because creating a separate thread fragments the discussion, but you could at least have provided a link (as @fde101 has now done).

[Luca Ippoliti]

10 minutes ago, Bryan Rieger said:

Personally, I find this design very difficult to scan, illegible (the contrast is worse than it already is in the apps), and ultimately confusing. Not sure what you're doing with folders, arrows and contrast/depth, but honestly, I can't make heads or tails of it.

I'm hoping that with the new UX designer at Serif/Affinity things will start to improve based on the use of common patterns, accepted standards, adherence to OS guidelines, and formal user testing and research. Not design by committee, individual ego, or what someone thinks is 'cool'.

I understand this design is a pretty radical change from the status quo.

There is a difficult task here, to balance customs of long-time users, but also to make the program more accessible and understandable to newbies who haven't interfaced with it before.

The most radical change is the folder depth view, the main goal of this change is allowing users to understand the folder "depth" at a glance and across different UI scaling, mainly through the different

1. background brightness
2. subtle use of drop shadows.

Both of these are useful and widely used UI conventions.

 

 

Not sure why you're pointing to my "ego" and what I think "looks cool".

My design is not above criticisms, I'm open to feedback and in-depth discussions, not personal attacks.

I'm not here to rustle anyone's jimmies, and I'm not sure what I may have said to suggest that.

 

 

If you don't think it's an improvement, I'd genuinely want to understand why that is, good UI is accessible to everyone, though it may not please everyone. I'll take a look at what improvements I can make on contrast, although it seems fine to me, and seems to be better to other users such as Frozen Death Knight.

Quote

The improved contrast is the main thing I like about this redesign, like having a lighter grey for the layers to contrast the dark panel borders. 

 

[Luca Ippoliti]

30 minutes ago, Alfred said:

You can hide a thread if there are no replies, but you can’t delete it unless you’re a member of Serif staff (the only members who have moderation rights here).

I disagree, because creating a separate thread fragments the discussion, but you could at least have provided a link (as @fde101 has now done).

I understand, thanks for the explanation. 👍

I'll look out for that in the future.

[Bryan Rieger]

30 minutes ago, Luca Ippoliti said:

I understand this design is a pretty radical change from the status quo.

There is a difficult task here, to balance customs of long-time users, but also to make the program more accessible and understandable to newbies who haven't interfaced with it before.

The most radical change is the folder depth view, the main goal of this change is allowing users to understand the folder "depth" at a glance and across different UI scaling, mainly through the different

1. background brightness
2. subtle use of drop shadows.

Both of these are useful and widely used UI conventions.

Not sure why you're pointing to my "ego" and what I think "looks cool".

My design is not above criticisms, I'm open to feedback and in-depth discussions, not personal attacks.

I'm not here to rustle anyone's jimmies, and I'm not sure what I may have said to suggest that.

If you don't think it's an improvement, I'd genuinely want to understand why that is, good UI is accessible to everyone, though it may not please everyone. I'll take a look at what improvements I can make on contrast, although it seems fine to me, and seems to be better to other users such as Frozen Death Knight.

Hi @Luca Ippoliti I'm not pointing to your (or anyone's) ego or aesthetic choices. I'm referring to things that I've seen influence UI/UX design in my 25+ year career as a software and product designer. Please don't feel attacked, as that was not my intention. This is feedback based on my own extensive experience.

Yes, drop-shadows and tonal/brightness changes can infer a sense of depth, but your mock-up creates problems with regards to legibility and are also very difficult to quickly scan in order to orient yourself within the layers stack.

Radical change is rarely useful in UI/UX design. An intentioned and measured approach that improves the overall experience gradually allows the team to learn what works (and what doesn't) as they progress, whereas a radical change introduces too many variables to adequately measure impact, often resulting in poor subsequent decisions being made on incomplete or incorrect knowledge. It's often useful when you're creating something that's completely new (at least in the initial stages), but not terribly helpful when a more considered and iterative approach is necessary.

Please feel free to post ideas, but also realize that you're not the first to do so in these forums. We tend to get a fairly regular influx of radical ideas here. 

[Luca Ippoliti]

2 hours ago, Bryan Rieger said:

Hi @Luca Ippoliti I'm not pointing to your (or anyone's) ego or aesthetic choices. I'm referring to things that I've seen influence UI/UX design in my 25+ year career as a software and product designer. Please don't feel attacked, as that was not my intention. This is feedback based on my own extensive experience.

Yes, drop-shadows and tonal/brightness changes can infer a sense of depth, but your mock-up creates problems with regards to legibility and are also very difficult to quickly scan in order to orient yourself within the layers stack.

Radical change is rarely useful in UI/UX design. An intentioned and measured approach that improves the overall experience gradually allows the team to learn what works (and what doesn't) as they progress, whereas a radical change introduces too many variables to adequately measure impact, often resulting in poor subsequent decisions being made on incomplete or incorrect knowledge. It's often useful when you're creating something that's completely new (at least in the initial stages), but not terribly helpful when a more considered and iterative approach is necessary.

Please feel free to post ideas, but also realize that you're not the first to do so in these forums. We tend to get a fairly regular influx of radical ideas here. 

 

I tried to go closer to the current design, I'd love to know what you think about this.

My main issue with the current design is that, it's possible, but not easy or intuitive, to have a quick understanding of the folder hierarchy. Too many unnecessary lines, and not enough distinction between elements.

To me it definitely works better than before, strikes a good balance between familiar, respecting the current indentation design, and modern/more readable design cues.

By adding brightness, contrast and opacity based-depth to icons and folders, I think it greatly improves the user's immediate understanding of the Active/ Unactive parts of the program, without adding unnecessary visual complexity.

[Bryan Rieger]

Same problem. Everything in the group is essentially illegible (too little contrast). I would suggest that you don’t change the brightness/contrast, opacity, or size of the layers. Also keep in mind users can change the brightness/contrast of the UI in the app preferences. By further modifying it in this way you are assuring that it will be completely illegible for a significant number of users.

[Luca Ippoliti]

1 hour ago, Bryan Rieger said:

Same problem. Everything in the group is essentially illegible (too little contrast). I would suggest that you don’t change the brightness, contrast, opacity, or size of the layers. Also keep in mind users can change the brightness/contrast of the UI in the app preferences. By further modifying it in this way you are assuring that it will be completely illegible for a significant number of users.

I understand what you mean, and I agree that Contrast for Hidden layer Names was still too low, I changed it now.

 

However, I disagree on not changing any other element: As far as the Overall contrast relationships are respected, a good user interface should prioritize giving as much useful information as possible at a glance.

Anyway, with an elevated Contrast, these two interfaces are (now) virtually identical, so by simply changing the sliders in the UI settings, that issue is resolved, and the choice of having more/less information based on Brightness and such is left up to the user.

 

 

 

Edited June 19 by Luca Ippoliti
wrong image

[fde101]

How do you anticipate those corner arrows fitting in the row when they are collapsed?  They are all expanded in your example and are in a spot that would basically disappear if they were collapsed...

You also seem to have lost the layer type and FX indicator icons?