Page MenuHome

UI: Use the Question icon in the close file dialog box
ClosedPublic

Authored by Harley Acheson (harley) on Sep 30 2020, 11:02 PM.

Details

Summary

Use the Question icon in the close file dialog box.

After the discussion, the icons were further redesigned,
the style proposed by @Francesco Siddi (fsiddi)


Initial proposal to change the icon by @Yevgeny Makarov (jenkm)

In most cases, the appearance of a file saving warning/question is expected by the user,
so it is more of a confirmation question than a warning about something unexpected.

The "Warning" icon is more suitable for cases such as a Python scripts security alert
when opening a file. Which is unexpected and requires special attention.

Overuse of the caution symbol in an alert diminishes its significance.

The Caution symbol is often used when errors occur (such as something not loaded
or lost connection), but saving a file is not the case.

The explanatory text also does not contain any warning, here is just a question.

Suggestion:

Current:

Example of a suitable use of a warning sign:

Diff Detail

Repository
rB Blender

Event Timeline

Yevgeny Makarov (jenkm) requested review of this revision.Sep 30 2020, 11:02 PM
Yevgeny Makarov (jenkm) created this revision.

Isn't this properly a "Warning" and not a "Question" though...

If you were to initiate a specific action, a dialog might pop up asking you to clarify how exactly to proceed if there are options. That should have a "?" Icon. For example you select "Discombobulate" and then you might get a dialog (with a "?" icon) that asks if you want to do so for the active item, all selected, or for all items. The system needs to ask you questions to continue with an action you have explicitly started.

But this dialog comes unsolicited, as a warning, when you try to exit the program when you have unsaved changes. It's main purpose is to warn you because you are potentially doing something destructive accidentally.

And yes, and no. This depends on the frequency of use and what the user expects.

For example, Apple's Human Interface Guidelines directly say:

Use the caution symbol sparingly.
Overuse of the caution symbol in an alert diminishes its significance. Use the symbol only when extra attention is truly required,
such as to confirm an action that might result in inadvertent or unexpected loss of data.
Don’t use the icon for tasks whose only purpose is to overwrite or remove data, such as a save or empty trash.

In this case, there is nothing unexpected, unlike for example Python script security alert when opening file.

@Yevgeny Makarov (jenkm) - For example, Apple's Human Interface Guidelines directly say:
Use the caution symbol sparingly.
Overuse of the caution symbol in an alert diminishes its significance. Use the symbol only when extra attention is truly required,
such as to confirm an action that might result in inadvertent or unexpected loss of data.
Don’t use the icon for tasks whose only purpose is to overwrite or remove data, such as a save or empty trash.

First I should say that I don't feel that strongly about this, so don't feel like I am being overly negative. I'd really be fine with using the question mark here. In fact the original idea with this dialog was that we would follow OS conventions and use the Caution symbol for Windows, but Blender logo on Mac.

But I still feel that the Caution is marginally better here. And fits with the Apple HIG. It is saying that you don't want to use in cases of overwriting or removing data. So don't show it when selecting "Save as" and overwriting an existing file for the first case. Don't show it on an "Are you sure?" when deleting a file (since this after an explicit instruction to delete). And don't show it when emptying the trash. Basically all the cases that I mentioned in my earlier post where the dialog is a result of an explicit instruction to do something. The user has started a specific process so no need to be overly dramatic.

But this case is exactly the first part where the HIG says "an action that might result in inadvertent or unexpected loss of data". This is a warning to the user about them attempting to exit the program when they have unsaved changes. Because doing so could cause inadvertent and unexpected loss of data. This is exactly the case when the Apple HIG says to use the Caution symbol.

Yes, the Caution symbol is used on Windows. But it seems smaller and not so contrasting.
It doesn't look as important (scary) as the icon in Blender. So the design/style is also impacts here.

It also doesn't say: "You may lose data!", the tone here is calm: "Save changes?".
There is no warning in the text.

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.

I wouldn't mind monochrome icons, especially it is good for a light theme.
Just use the text color for the icon, and the redalert for error icon.

Yevgeny Makarov (jenkm) edited the summary of this revision. (Show Details)Oct 9 2020, 4:05 PM

Here is an alternative and more "light" version of the icon. Talked about this with @Pablo Vazquez (pablovazquez) yesterday and he is on board as well.

Here is an alternative and more "light" version of the icon. Talked about this with @Pablo Vazquez (pablovazquez) yesterday and he is on board as well.

This looks much better!

! In D9062#226346, @Pablo Vazquez (pablovazquez) wrote:

This looks much better!

I LOVE this too. But with a couple caveats...

  1. We could only do this if our intent is to keep these particular large icons monochrome. So, as shown light grey on dark, or dark grey on light backgrounds. This looks awesome like this, but would look terrible is someone later decides it should be yellow. And this design on a light background would not work with something yellow. And obviously hard to construct a dark yellow.
  1. That all four of these similar-use icons match. It looks like the Caution, Question, and Stop could be reworked easily to match the "Info" would require more work:

Following is the SVG file, editable in Inkscape, but note that everything is quite deliberately aligned (I think to 16 units) if I remember right:

Beautiful. I prefer this look.

The only danger I see is if we have all of these in place it might be possible to not notice a difference in importance. So if you get one warning one and then an error one would you notice that it changed? If that becomes an issue then there is pressure to color them and then we are using a design that doesn't color as well (because of a lack of background field). Maybe if that ever happens we can just color a rectangular area behind it instead of the icon. Or color the entire dialog red for real errors. Or find some similar solution.

But... I still prefer this monochrome look of @Yevgeny Makarov (jenkm)'s and think we should make this a target for 2.92

So if you get one warning one and then an error one would you notice that it changed?

As I understand it, the idea is that the text is more important. That is, the user must (must be forced to) read the text, not navigate by icons.

It is also difficult to judge what does not yet exist. Most likely, all dialogs will have different widths and different amounts of text, so will look different.

Thank you @Yevgeny Makarov (jenkm) for updating the source files. Please keep all alert icons greyscale, there is no need to color them.

In T73415 I was asking for a list of all alerts in Blender, but got no response about it. Having such list would help to further evaluate the tone and presentation of this messages and icons. This is perhaps something worth pursuing in a separate task.

One more note: make sure that when using the Blender logo in color you have a white ring (see example).

make sure that when using the Blender logo in color you have a white ring

Fixed.

@Francesco Siddi (fsiddi) - In T73415 I was asking for a list of all alerts in Blender, but got no response about it. Having such list would help to further evaluate the tone and presentation of this messages and icons...

The task you reference was just about initially adding these larger icons (made by our icon designer) to the project so that they could possibly used in later work (like this one, where the QuitConfirm is changed). If your approval of that task required that you have "a list of all the alerts in blender" there was never any reason (and there still isn't) why you couldn't get such a list yourself.

@Harley Acheson (harley) Can you commandeer this revision?

And update it to use these new icons, and use text color for icons.


I changed SVG to 64px, so it is more correct to fit into pixels. I think the update script should work without changes but check it out.

@Yevgeny Makarov (jenkm) - Harley, can you commandeer this revision?

For sure. I can get this all in and commit it with you as author. We're mostly just waiting for Pablo and others to wade it about it. As mentioned, I really like this. But I also prefer the entire interface monochrome, including all the other icons. So that bias might play a part here in that there could be some people who don't like the look at all.

Definitely an improvement. Not only looks better and more refined, but it also follows the rest of Blender.

Thanks to everyone involved!

This revision is now accepted and ready to land.Oct 12 2020, 12:02 PM

Just updating this diff so it matches what will be committed.

Yevgeny Makarov (jenkm) edited the summary of this revision. (Show Details)Oct 13 2020, 9:58 AM
Yevgeny Makarov (jenkm) awarded a token.
Yevgeny Makarov (jenkm) edited the summary of this revision. (Show Details)Oct 18 2020, 5:23 PM