Alert Dialog Icons #73415

New Issue

Harley Acheson · 2020-01-26T20:05:06+01:00

Harley Acheson commented

2020-01-26 20:05:06 +01:00

One day it would be nice to investigate some changes to popup warning and alert dialogs, including the thought of using some larger and colorful icons. I find the current icons used there are just too small and plain. They lack the impact needed to bring your attention to something important.

I have a set of larger icons on a sheet that could used for this purpose. Sample below:

Icons derived from @jendrzych's versions. Blender logo from blender.org. Colors taken from a pallet used for highway signage.

The following zip contains the Inkscape original svg file, exported png, and py file to create such an export. Basically the three files that need to be added to the ...release\datafiles\ folder.

datafiles.zip

One day it would be nice to investigate some changes to popup warning and alert dialogs, including the thought of using some larger and colorful icons. I find the current icons used there are just too small and plain. They lack the impact needed to bring your attention to something important. I have a set of larger icons on a sheet that could used for this purpose. Sample below: ![sample.jpg](https://archive.blender.org/developer/F8303457/sample.jpg) Icons derived from @jendrzych's versions. Blender logo from blender.org. Colors taken from a pallet used for highway signage. The following zip contains the Inkscape original svg file, exported png, and py file to create such an export. Basically the three files that need to be added to the ...release\datafiles\ folder. [datafiles.zip](https://archive.blender.org/developer/F8303480/datafiles.zip)

William Reynish was assigned by Harley Acheson

2020-01-26 20:05:06 +01:00

Harley Acheson commented

2020-01-26 20:05:06 +01:00

Added subscribers: @jendrzych, @Harley, @Enoch11223, @xdanic, @jc4d, @CandleComet, @RosarioRosato, @semaphore, @mendio, @0o00o0oo, @T.R.O.Nunes, @Ehab, @BartekMoniewski, @DuarteRamos, @MaciejJutrzenka, @Znio.G, @brecht, @Sergey, @dfelinto, @mont29, @ideasman42

Campbell Barton commented

2020-02-12 08:11:19 +01:00

Changed status from 'Needs Triage' to: 'Confirmed'

Francesco Siddi commented

2020-04-11 17:15:55 +02:00

Added subscribers: @pablovazquez, @fsiddi

Francesco Siddi commented

2020-04-11 17:15:55 +02:00

I would like to raise a concern. It looks like this already partially implemented by @ideasman42, but there was no feedback from him or William on this thread.

Here is some feedback after experiencing the new dialogues:

The overall layout of the dialogue could be improved, currently the elements do not follow a grid
Using a road signs palette feels overkill. The color is very saturated and does not match the existing Blender icons palette.
The size of the icons is inconsistent with other icons in Blender
The icon itself does not add much information to the dialogue. The important information is in the text, which could be worded more clearly depending on the context

Finally, I think this should be considered a high-profile functionality of the software. These dialogues will be displayed countless times to millions of users, so it is more important than ever to spend time polishing the design, the language and the overall UX.

When implementing such changes to the UI it would be great to see some mockup before they are implemented and iterated over. This usually saves time and delivers higher quality results more quickly.

Here are 5 minutes mockups for example:

If @WilliamReynish or @pablovazquez do not have time for this, I’m available to create a separate task where this can be discussed more broadly. I’d like their green light first though.

I would like to raise a concern. It looks like this already partially implemented by @ideasman42, but there was no feedback from him or William on this thread. Here is some feedback after experiencing the new dialogues: ![Screenshot 2020-04-10 at 14.21.06.png](https://archive.blender.org/developer/F8464808/Screenshot_2020-04-10_at_14.21.06.png) * The overall layout of the dialogue could be improved, currently the elements do not follow a grid * Using a road signs palette feels overkill. The color is very saturated and does not match the existing Blender icons palette. * The size of the icons is inconsistent with other icons in Blender * The icon itself does not add much information to the dialogue. The important information is in the text, which could be worded more clearly depending on the context Finally, I think this should be considered a high-profile functionality of the software. These dialogues will be displayed countless times to millions of users, so it is more important than ever to spend time polishing the design, the language and the overall UX. When implementing such changes to the UI it would be great to see some mockup before they are implemented and iterated over. This usually saves time and delivers higher quality results more quickly. Here are 5 minutes mockups for example: ![file_save_01.jpg](https://archive.blender.org/developer/F8464813/file_save_01.jpg) ![file_save_03.jpg](https://archive.blender.org/developer/F8464815/file_save_03.jpg) ![file_save_02.jpg](https://archive.blender.org/developer/F8464814/file_save_02.jpg) If @WilliamReynish or @pablovazquez do not have time for this, I’m available to create a separate task where this can be discussed more broadly. I’d like their green light first though.

Harley Acheson commented

2020-04-11 17:30:12 +02:00

there was no feedback from him or William on this thread.

This page was a fairly early design document. The actual implementation was here: https:*developer.blender.org/D6859

The color is very saturated and does not match the existing Blender icons palette

The colors of the icons on the sheet are actually white but recolored at time of output using theme colors, so can be any color at all. There is some discussions of defaults though, so would love your comments here: https://developer.blender.org/D7203

it would be great to see some mockup before they are implemented and iterated over

There were piles of discussion, mockups, and iteration over a month on that implementation thread .

Its never too late to improve any and everything in an open source project though and I look forward to any ideas you have.

> there was no feedback from him or William on this thread. This page was a fairly early design document. The actual implementation was here: [https:*developer.blender.org/D6859](https:*developer.blender.org/D6859) > The color is very saturated and does not match the existing Blender icons palette The colors of the icons on the sheet are actually white but recolored at time of output using theme colors, so can be any color at all. There is some discussions of defaults though, so would love your comments here: https://developer.blender.org/D7203 > it would be great to see some mockup before they are implemented and iterated over There were piles of discussion, mockups, and iteration over a month on that [implementation thread ](https://developer.blender.org/D6859). Its never too late to improve any and everything in an open source project though and I look forward to any ideas you have.

William Reynish commented

2020-04-11 17:37:16 +02:00

@fsiddi Absolute agreed that this is an important UI element, but I don't agree with those different wordings. Many users don't tend not to read text in dialog boxes, so the goal is to be as direct, terse and clear as possible.

"Would you like to save this file?" IMO is not as good as "Save changes before closing?"

The second sentence is clearer and reads better, because the first word is 'Save'. Users can just read that single first word and already they know what the question is about. 'Would you like to' is a superfluous beginning of the sentence - the goal of text in UI's is not to be polite, but to make it so users can scan the text, almost without reading it, and then press the right button.

Your sentence would be better if it were just*"Save this file?"* But then we are still missing the part about "before closing". And really it's important to know that we are talking about the changes, since this dialog only opens when the file is already saved.

This quickly leads back to the current "Save changes before closing?"

As for the misalignment on the left here:

That's annoying, but not due to any lack of creating enough mockups. Blender's UI layout code can sometimes fight this kind of nice alignment. It's something to look at, to find away, technically, to get these elements aligned.

@fsiddi Absolute agreed that this is an important UI element, but I don't agree with those different wordings. Many users don't tend not to read text in dialog boxes, so the goal is to be as direct, terse and clear as possible. *"Would you like to save this file?"* IMO is not as good as *"Save changes before closing?"* The second sentence is clearer and reads better, because the first word is *'Save'*. Users can just read that single first word and already they know what the question is about. *'Would you like to'* is a superfluous beginning of the sentence - the goal of text in UI's is not to be polite, but to make it so users can scan the text, almost without reading it, and then press the right button. Your sentence would be better if it were just*"Save this file?"* But then we are still missing the part about *"before closing"*. And really it's important to know that we are talking about the *changes*, since this dialog only opens when the file is already saved. This quickly leads back to the current *"Save changes before closing?"* As for the misalignment on the left here: ![Screenshot 2020-04-11 at 17.49.42.png](https://archive.blender.org/developer/F8464867/Screenshot_2020-04-11_at_17.49.42.png) That's annoying, but not due to any lack of creating enough mockups. Blender's UI layout code can sometimes fight this kind of nice alignment. It's something to look at, to find away, technically, to get these elements aligned.

Francesco Siddi commented

2020-04-11 17:58:19 +02:00

Clearly a lot of time went into this, but I think there are some fundamental issues. I understand that the intention here is to simply "update the icons", but when introducing such cosmetic changes, some deeper questions should be asked:

Where are the other icons used an how?
Where is the overall UI/UX document that defines the behavior and design of the dialogues?

It looks like part of the answers were found during the implementation, which is how Blender development often goes, but I've also seen you propose more elaborate docs and mockups before starting implementation.

I am aware that I'm only an occasional contributor here, and after having a look at the implementation thread I'm not sure on how to continue this conversation. I suggest that you at least update the description of the task to point to the D6859 as it would have impacted this conversation.

Clearly a lot of time went into this, but I think there are some fundamental issues. I understand that the intention here is to simply "update the icons", but when introducing such cosmetic changes, some deeper questions should be asked: * Where are the other icons used an how? * Where is the overall UI/UX document that defines the behavior and design of the dialogues? It looks like part of the answers were found during the implementation, which is how Blender development often goes, but I've also seen you propose more elaborate docs and mockups before starting implementation. I am aware that I'm only an occasional contributor here, and after having a look at the implementation thread I'm not sure on how to continue this conversation. I suggest that you at least update the description of the task to point to the [D6859](https://archive.blender.org/developer/D6859) as it would have impacted this conversation.

William Reynish commented

2020-04-11 18:55:03 +02:00

Added subscriber: @jenkm

William Reynish commented

2020-04-11 18:55:03 +02:00

@fsiddi There were lots of designs produced, both for those icons, different types of sentences, and people like @jenkm and @Harley have in tandem helped to improve the padding and layout.

Here are some images that shows the process over time. The first version was coded to look like this:

This was before we had the ability to highlight which button gets activated when you press Return.

An early mockup looked like this:

Slow progress was made. @ideasman42 added the ability to highlight the button that is activated with Return for any dialog:

Different ways to show the highlight was then explored:

Either @jenkm og @Harley (can't remember) found a way to add more padding around the buttons and text:

@Harley proposed the idea to add bigger icons as seen in this task.

I then revised the design to fit better with the 2.8 icons:

@jendrzych Then re-designed all the icons so they consistently reflect their smaller, simpler counterparts, until we ended up with this:

The color you see here isn't actually part of the icon resource, but is set inside the theme, so the theme can alter the colors of these icons on the fly.

The biggest issue I see with the current implementation, is the fact that it works poorly with multiple overlapping windows. There are cases where this dialog will appear in underlying windows (say if you have the Preferences open), which means it will not be visible. The best way to solve that would probably be to try to use the OS-supplied APIs to show a real system dialog, with the same options. This is a little tricky since it needs to be done for each OS, but it could be done.

@fsiddi There were lots of designs produced, both for those icons, different types of sentences, and people like @jenkm and @Harley have in tandem helped to improve the padding and layout. Here are some images that shows the process over time. The first version was coded to look like this: ![Screenshot 2020-04-11 at 18.39.22.png](https://archive.blender.org/developer/F8464918/Screenshot_2020-04-11_at_18.39.22.png) This was before we had the ability to highlight which button gets activated when you press Return. An early mockup looked like this: ![Screenshot 2020-04-11 at 18.39.54.png](https://archive.blender.org/developer/F8464920/Screenshot_2020-04-11_at_18.39.54.png) Slow progress was made. @ideasman42 added the ability to highlight the button that is activated with Return for any dialog: ![Screenshot 2020-04-11 at 18.40.51.png](https://archive.blender.org/developer/F8464924/Screenshot_2020-04-11_at_18.40.51.png) Different ways to show the highlight was then explored: ![Screenshot 2020-04-11 at 18.43.04.png](https://archive.blender.org/developer/F8464929/Screenshot_2020-04-11_at_18.43.04.png) ![Screenshot 2020-04-11 at 18.43.40.png](https://archive.blender.org/developer/F8464938/Screenshot_2020-04-11_at_18.43.40.png) Either @jenkm og @Harley (can't remember) found a way to add more padding around the buttons and text: ![Screenshot 2020-04-11 at 18.45.04.png](https://archive.blender.org/developer/F8464947/Screenshot_2020-04-11_at_18.45.04.png) ![Screenshot 2020-04-11 at 18.44.11.png](https://archive.blender.org/developer/F8464944/Screenshot_2020-04-11_at_18.44.11.png) @Harley proposed the idea to add bigger icons as seen in this task. I then revised the design to fit better with the 2.8 icons: ![Screenshot 2020-04-11 at 18.46.39.png](https://archive.blender.org/developer/F8464964/Screenshot_2020-04-11_at_18.46.39.png) @jendrzych Then re-designed all the icons so they consistently reflect their smaller, simpler counterparts, until we ended up with this: ![Screenshot 2020-04-11 at 18.48.16.png](https://archive.blender.org/developer/F8464976/Screenshot_2020-04-11_at_18.48.16.png) The color you see here isn't actually part of the icon resource, but is set inside the theme, so the theme can alter the colors of these icons on the fly. The biggest issue I see with the current implementation, is the fact that it works poorly with multiple overlapping windows. There are cases where this dialog will appear in underlying windows (say if you have the Preferences open), which means it will not be visible. The best way to solve that would probably be to try to use the OS-supplied APIs to show a real system dialog, with the same options. This is a little tricky since it needs to be done for each OS, but it could be done.

Francesco Siddi commented

2020-04-12 16:51:06 +02:00

Thanks for taking the time to make this recap. Can someone with edit rights mention D6859 in the task description? Also, should the status of the task be updated to reflect the status of the patch?

Meanwhile, I'd like to continue the conversation about text in the modals, so I'll create a doc, share it with you and hopefully it will turn into another task.

Thanks for taking the time to make this recap. Can someone with edit rights mention [D6859](https://archive.blender.org/developer/D6859) in the task description? Also, should the status of the task be updated to reflect the status of the patch? Meanwhile, I'd like to continue the conversation about text in the modals, so I'll create a doc, share it with you and hopefully it will turn into another task.

Yevgeny Makarov commented

2020-10-07 14:54:17 +02:00

@fsiddi there is some patches D9062 D8394 D6938 to polish dialog.

The final result is below, you may want to comment on something.

@Harley I think, WARNING, QUESTION, INFO icons should have one color.
One separate theme option, "Alert Icons Color", yellow by default.

The ERROR icon color can be generated in the same way as redalert color.
This is a rare case (error) so it's not worth a separate theme option.

I just remember there were problems with reusing colors from Info Editor.

@fsiddi there is some patches [D9062](https://archive.blender.org/developer/D9062) [D8394](https://archive.blender.org/developer/D8394) [D6938](https://archive.blender.org/developer/D6938) to polish dialog. The final result is below, you may want to comment on something. ![dialog-box-layout-fix-question.png](https://archive.blender.org/developer/F8941733/dialog-box-layout-fix-question.png) *** @Harley I think, `WARNING`, `QUESTION`, `INFO` icons should have one color. One separate theme option, "Alert Icons Color", yellow by default. The `ERROR` icon color can be generated in the same way as `redalert` color. This is a rare case (error) so it's not worth a separate theme option. I just remember there were problems with reusing colors from Info Editor.

Francesco Siddi commented

2020-10-08 18:55:05 +02:00

Thanks for the mention @jenkm - I think this is a very good improvement, especially in terms of layout. The "question mark" symbol is also more fitting.

I recommend to color the icon with a monochromatic shade of grey (like the original warning sign). The icon is already eye-catching enough in my opinion.

Thanks for the mention @jenkm - I think this is a very good improvement, especially in terms of layout. The "question mark" symbol is also more fitting. I recommend to color the icon with a monochromatic shade of grey (like the original warning sign). The icon is already eye-catching enough in my opinion.

blender-admin commented

2020-10-13 00:51:00 +02:00

This issue was referenced by dc71ad0624

This issue was referenced by dc71ad062408b138cc174f348d833b244d098a8f

blender-admin commented

2020-10-13 18:35:46 +02:00

This issue was referenced by 9fe5817588

This issue was referenced by 9fe581758851c98a8e43f0e8a02d70551352682d

Francesco Siddi commented

2020-10-24 16:39:24 +02:00

Hi @jenkm @Harley - I noticed that the implementation of the icon did not follow the suggested color.
Right now there is too much contrast, especially in relation to the size of the icon. Can you please tweak the icon color so that the contrast ratio matches the suggested image? The shade used in the "untitled.blend" text.

Hi @jenkm @Harley - I noticed that the implementation of the icon did not follow the suggested color. Right now there is too much contrast, especially in relation to the size of the icon. Can you please tweak the icon color so that the contrast ratio matches the suggested image? The shade used in the "untitled.blend" text. ![alert_unsaved.jpg](https://archive.blender.org/developer/F9070283/alert_unsaved.jpg)

Yevgeny Makarov commented

2020-10-24 17:03:14 +02:00

It's actually the same color used, but it looks different because of size.

But personally I like the way it is now. If we make the icon darker, it will look like an empty space on the left. It's more balanced now.

It's actually the same color used, but it looks different because of size. ![#73415-color.png](https://archive.blender.org/developer/F9070581/T73415-color.png) But personally I like the way it is now. If we make the icon darker, it will look like an empty space on the left. It's more balanced now.

Francesco Siddi commented

2020-10-24 17:10:19 +02:00

Can you then dim it so it has the same perceived shade?

Yevgeny Makarov commented

2020-10-24 17:19:57 +02:00

Then it is better to add a new theme option for the color of these icons. So to please everyone for sure.

Harley Acheson commented

2020-10-24 17:25:18 +02:00

Dim in what way?

We could decrease the opacity and then in general they would look less strong and have the same impact as the text. But then we would also get complaints that theme designers could never get a true white if they wanted it, or an exact shade of color..

Dim in what way? We could decrease the opacity and then in general they would look less strong and have the same impact as the text. But then we would also get complaints that theme designers could never get a true white if they wanted it, or an exact shade of color..

Yevgeny Makarov commented

2020-10-24 17:40:07 +02:00

We can use opacity or blend colors (background and text), but I'm against it.
The "icon color" theme option will be better.

Maybe someone would like a colored icon.

We can use opacity or blend colors (background and text), but I'm against it. The "icon color" theme option will be better. Maybe someone would like a colored icon.

Harley Acheson commented

2020-10-24 17:42:02 +02:00

In #73415#1040859, @jenkm wrote:
Then it is better to add a new theme option for the color of these icons. So to please everyone for sure.

We might have less pushback about adding new theme options if we just did theming better. When you look in there it is filled with groups of identical structures so we could easily add things to simplify like inheritance flags. Something like that would be minimal change, be backwardly compatible but still let a smaller number of settings flow through to larger changes.

> In #73415#1040859, @jenkm wrote: > Then it is better to add a new theme option for the color of these icons. So to please everyone for sure. We might have less pushback about adding new theme options if we just did theming better. When you look in there it is filled with groups of identical structures so we could easily add things to simplify like inheritance flags. Something like that would be minimal change, be backwardly compatible but still let a smaller number of settings flow through to larger changes.

xan2622 commented

2020-11-04 17:07:38 +01:00

Added subscriber: @xan2622

xan2622 commented

2020-11-04 17:07:38 +01:00

Hi.

I would like to express my mixed feelings about choosing the grey color for the warning icon (and for other icons, if you plan to make them all grey).
I understand that some of you would like icons' colors to match the Blender theme but be careful there.

Warning signs are usually yellow to attract user's attention. Grey icons attract less attention.
There's a reason these icons (inspired by road signs) are colorful. Grey icons bring the risk to make these dialog boxes get closed quicker by the user.

Has there been a study of different warning icons (and colors) in other applications ?
👉 http://babich.biz/red-and-green/

Hi. I would like to express my mixed feelings about choosing the grey color for the warning icon (and for other icons, if you plan to make them all grey). I understand that some of you would like icons' colors to match the Blender theme but be careful there. Warning signs are usually yellow to attract user's attention. Grey icons attract less attention. There's a reason these icons (inspired by road signs) are colorful. Grey icons bring the risk to make these dialog boxes get closed quicker by the user. Has there been a study of different warning icons (and colors) in other applications ? 👉 http://babich.biz/red-and-green/

Harley Acheson commented

2020-11-19 15:43:36 +01:00

Changed status from 'Confirmed' to: 'Resolved'

Harley Acheson closed this issue

2020-11-19 15:43:36 +01:00

Sign in to join this conversation.

No Label

Download

What's New

Blender Studio

Manual

Developers Blog

Documentation

Benchmark

Blender Conference

Development Fund

One-time Donations

Alert Dialog Icons #73415