Closed Bug 1772244 Opened 1 year ago Closed 1 year ago

Explore making the `⊕ Add property` elements in contact editing UI less salient

Categories

(Thunderbird :: Address Book, defect)

Product:
Thunderbird
Component:
Address Book
Version:
Thunderbird 102
Type:
defect

Tracking

(thunderbird_esr91 unaffected, thunderbird102? fixed, thunderbird103 affected)

Status:
RESOLVED FIXED
Milestone:
103 Branch
Tracking Flags:
Tracking Status
thunderbird_esr91 --- unaffected
thunderbird102 ? fixed
thunderbird103 --- affected

People

(Reporter: thomas8, Assigned: Paenglab)

References

(Blocks 1 open bug)

Details

Attachments

(4 files)

Screenshot 1: Explore ways of reducing the salience of `⊕ Add property` elements
97.51 KB, image/png
Details
Screenshot 2: Keep blue color, but reduce font-size of `⊕ Add property` elements
50.25 KB, image/png
Details
Screen Shot 2022-06-02 at 4.40.55 AM.png
67.24 KB, image/png
Details
Bug 1772244 - Edit Contact: set the button font size to the <body> font size. r=aleca
48 bytes, text/x-phabricator-request
wsmwk
: approval-comm-beta+
Details | Review

The new Edit contact form is great and extremely powerful. The design has been carefully crafted. It's great that users can add all sorts of fields to the contact.

However, in the current iteration, imo the ⊕ Add property elements appear a bit over-emphasized, because they have two salience factors:

  • strong blue color (same as focus/default button color)
  • large font (larger than the field titles and field text, which imo looks disproportionate)

All those big blue elements in the UI are "screaming" at the user pretty loud and dominating the whole page.

  • That same blue is also reserved as a focus color, and having dozens of blue elements on the screen makes the focused element disappear in the crowd.
  • Blue is also used for hyperlinks - but we're not linking to other places here, and we're not a web page nor a web mailer.
  • It's bad enough that FF has decided to make checked checkboxes or radioboxes have blue background, but at least those are somehow activated, whereas our ⊕ Add field elements are not - they just have the role of a regular input element to be clicked on.

Maybe we could try making them less salient.

Ideas to reduce the salience of ⊕ Add property elements (see mockup screenshot)

  • Perhaps we should not use blue color all over the place. Should be used for checked or focused elements only, to allow the focused element to stand out.
  • Don't use large font for repeated input elements which are subsidiary to the respective field they belong to.

This mockup reduces the font-size without changing the color.

I'm pretty sure the larger font size isn't intentional, it's much smaller on Linux.

large font (larger than the field titles and field text, which imo looks disproportionate)

On Mac it looks just slightly larger - barely noticible but pretty sure it is there.

I'm changing this to defect based on comment 2.

Severity: -- → S4
Type: enhancement → defect

Oh wow, those "add buttons" are extremely large compared to anything I've seen.
Do you have any font variation applied to Thunderbird or Windows?

Richard, can you reproduce this?

I'd recommend to leave the primary blue color for visual consistency with clickable items and easier discoverability.
Removing it makes those items blend too much with adjacent elements and reduces the visual separation between sections.

Flags: needinfo?(richard.marti)

Yes, the same here. The page (body) uses font-size: 1rem; which is 12px and the buttons use font: -moz-button; which ends in 14.33px. Adding to.addr-book-edit-fieldset-button a font-size: 1rem; would set is to 12px too.

Flags: needinfo?(richard.marti)

Yeah, let's do that.
Would you be able to kindly take care of that, Richard?

I can try. ;-)

Assignee: nobody → richard.marti

On Mac, I do set non-default display size in Mac System Preferences

Pushed by geoff@darktrojan.net:
https://hg.mozilla.org/comm-central/rev/0ba86e1cfef2
Edit Contact: set the button font size to the <body> font size. r=aleca

Status: NEW → RESOLVED
Closed: 1 year ago
Keywords: checkin-needed-tb
Resolution: --- → FIXED

Comment on attachment 9279432 [details]
Bug 1772244 - Edit Contact: set the button font size to the <body> font size. r=aleca

[Approval Request Comment]
User impact if declined: inconsistent font sizes
Testing completed (on c-c, etc.): on c-c
Risk to taking this patch (and alternatives if risky): low

Attachment #9279432 - Flags: approval-comm-beta?
Blocks: tb102found

Comment on attachment 9279432 [details]
Bug 1772244 - Edit Contact: set the button font size to the <body> font size. r=aleca

[Triage Comment]
Approved for beta

Attachment #9279432 - Flags: approval-comm-beta? → approval-comm-beta+
You need to log in before you can comment on or make changes to this bug.