UI: Label design pattern causes confusion #95604

New Issue

Reiner Prokein · 2022-02-08T11:23:27+01:00

Reiner Prokein commented

2022-02-08 11:23:27 +01:00

In the alembic export settings, for example, an option appears to be labeled with the text in reverse order compared to its name in the tooltips.

This pattern is meant to reduce clutter by not repeating identical parts of adjacent labels and relying on the user to infer the meaning. Perhaps there is a better way to communicate this without repeating the text.

See the example below:

"Transform Samples" appears to be called "Samples Transform".
"Geometry Samples" appears to be called "Geometry"
However, the UI is meant to be interpreted as follows...

Samples: Transform
         Geometry

The same pattern is used for Frame start/end (also displayed in the image above.) In this case, the intent is more clear in part due to the connected button sliders, and also, start frame and end frame are familiar concepts that any user would expect to find next to each other.
Transform samples and geometry samples are more abstract concepts by comparison.

To reproduce

Call Export to Alembic in the File > Export menu
Hover over the sliders, watch the names in the tooltip, and compare it with the name in front of the slider.

In the alembic export settings, for example, an option appears to be labeled with the text in reverse order compared to its name in the tooltips. This pattern is meant to reduce clutter by not repeating identical parts of adjacent labels and relying on the user to infer the meaning. Perhaps there is a better way to communicate this without repeating the text. See the example below: ![nameinconsistency.jpg](https://archive.blender.org/developer/F12854962/nameinconsistency.jpg) "Transform Samples" appears to be called "Samples Transform". "Geometry Samples" appears to be called "Geometry" However, the UI is meant to be interpreted as follows... ``` Samples: Transform Geometry ``` The same pattern is used for Frame start/end (also displayed in the image above.) In this case, the intent is more clear in part due to the connected button sliders, and also, start frame and end frame are familiar concepts that any user would expect to find next to each other. Transform samples and geometry samples are more abstract concepts by comparison. **To reproduce** - Call Export to Alembic in the File > Export menu - Hover over the sliders, watch the names in the tooltip, and compare it with the name in front of the slider.

Reiner Prokein commented

2022-02-08 11:23:27 +01:00

Added subscriber: @tiles

Pratik Borhade commented

2022-02-08 12:00:34 +01:00

Added subscriber: @PratikPB2123

Pratik Borhade commented

2022-02-08 12:00:34 +01:00

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

Pratik Borhade commented

2022-02-08 12:00:34 +01:00

Thanks for the report. Can be improved to maintain consistency.

Reiner Prokein commented

2022-02-12 08:01:12 +01:00

Related https://developer.blender.org/T91541

Ujwal Kundur self-assigned this 2022-03-27 14:51:54 +02:00

Ujwal Kundur commented

2022-03-27 21:14:00 +02:00

@PratikPB2123 I have uploaded a diff here D14469: Fix #95604: Naming inconsistencies in alembic exporter options, please review.

@PratikPB2123 I have uploaded a diff here [D14469: Fix #95604: Naming inconsistencies in alembic exporter options](https://archive.blender.org/developer/D14469), please review.

Ethan-Hall commented

2022-04-24 18:38:08 +02:00

Added subscribers: @HooglyBoogly, @Ujwal-Kundur, @Ethan-Hall

Ujwal Kundur was unassigned by Ethan-Hall

2022-04-24 18:38:08 +02:00

Ethan-Hall commented

2022-04-24 18:38:08 +02:00

In D14469 #387387, @HooglyBoogly wrote:
The way this is done might not be obvious, but the order and lack of repetition of words is on purpose and it's commonly done this way in Blender's UI. Putting the most important word first and omitting it in subsequent "aligned" buttons makes scanning the text easier, and makes it easier to find common elements.

You'll see the "Frame Start" -> "End" or "Value Min" -> "Max" in a lot of places.

Perhaps a design tweak could be discussed to help prevent confusion. However, I am removing this from #good_first_issue.

> In [D14469](https://archive.blender.org/developer/D14469)#387387, @HooglyBoogly wrote: >The way this is done might not be obvious, but the order and lack of repetition of words is on purpose and it's commonly done this way in Blender's UI. Putting the most important word first and omitting it in subsequent "aligned" buttons makes scanning the text easier, and makes it easier to find common elements. > >You'll see the "Frame Start" -> "End" or "Value Min" -> "Max" in a lot of places. Perhaps a design tweak could be discussed to help prevent confusion. However, I am removing this from #good_first_issue.

Ethan-Hall changed title from ~~Alembic exporter - name inconsistencies in the options~~ to UI: Label design pattern causes confusion

2022-04-24 19:12:01 +02:00

Hans Goudey commented

2022-04-24 19:59:01 +02:00

In this this case the two "samples" buttons should be aligned so it's clear that they should be interpreted as a group.

Ethan-Hall commented

2022-04-24 20:58:32 +02:00

@HooglyBoogly I still wish it looked a bit more elegant. How do you feel about something like this?

Split Label Proposal

{F13022822 size=full}

This design allows for splitting a label with a visual indicator to help clarify that the leading part of the label applies to both items (even if the buttons are not (or cannot be) aligned/connected)

@HooglyBoogly I still wish it looked a bit more elegant. How do you feel about something like this? **Split Label Proposal** {[F13022822](https://archive.blender.org/developer/F13022822/Split_Label.png) size=full} This design allows for splitting a label with a visual indicator to help clarify that the leading part of the label applies to both items (even if the buttons are not (or cannot be) aligned/connected)

Ujwal Kundur commented

2022-04-25 06:32:54 +02:00

@Ethan-Hall Looks great! How about a drop-down for the buttons which are context dependent? It would reduce visibility for a few of the options, but allows grouping attribute related buttons together.

Hans Goudey commented

2022-04-25 06:54:52 +02:00

It's an interesting idea, but personally I would rather not increase the complexity in this area, both visually and in the code. I think it looks a bit busy honestly, the alignment is a fair amount more arbitrary after with that line IMO.

I think using alignment to signify this connection more consistently would be helpful though.

It's an interesting idea, but personally I would rather not increase the complexity in this area, both visually and in the code. I think it looks a bit busy honestly, the alignment is a fair amount more arbitrary after with that line IMO. I think using alignment to signify this connection more consistently would be helpful though.

Philipp Oeser removed the

Download

What's New

Blender Studio

Manual

Developers Blog

Documentation

Benchmark

Blender Conference

Development Fund

One-time Donations

UI: Label design pattern causes confusion #95604