"+" and "pencil" button placement is inconsistent in main SMS and Email screens

RESOLVED FIXED in B2G C4 (2jan on)


6 years ago
6 years ago


(Reporter: mtrombley, Assigned: kgrandon)


B2G C4 (2jan on)

Firefox Tracking Flags



(Whiteboard: [UR])


(4 attachments, 2 obsolete attachments)



6 years ago
Created attachment 668616 [details]
switched + and pencil buttons

STR: Open main email screen and main SMS screen

Expected: Buttons should be placed consistently across apps

Actual: "+" and "pencil" button placement is inconsistent in main SMS and email screens. Their positions are switched. (See attachment)

Build: 2012-09-18 10:21:32


6 years ago
Whiteboard: [UR]
This screenshot is all white for me, but we moved the pencil icon down to the bottom of the e-mail app screen because people seemed to think it was the compose button.

I'm not sure if this moots the issue or just changes the complaint, but Casey is the person for any such debates for the e-mail app at least.  It's worth noting that e-mail has a special search mode where having the pencil on the bottom is helpful for consistency since the position at the top of the bar is not free in that scenario.

Comment 2

6 years ago
Besides what Andrew has already stated.  We also need to maximize the available header space for longer folder names.

Though Mary is correct in that there is a need to be consistency in button placement where possible.  This is an issue that we will be addressing with the various app UX owners.
Component: Gaia → Gaia::SMS


6 years ago
Priority: -- → P5
Duplicate of this bug: 813648
Duplicate of this bug: 808186

Comment 5

6 years ago
This is a blocker IMO given users do not know how to compose an SMS without this fix.  

It's clear in our user research that users were very confused by the pencil icon.  

As a separate note, does the '+' add any functional value here once we change the behavior of the pencil icon?
blocking-basecamp: --- → ?

Comment 6

6 years ago
Moving priority to at least a P2 (maybe should be a P1).
Priority: P5 → P2
Triage: BB+ for consistency and agree with comment 5
blocking-basecamp: ? → +
Assignee: nobody → schung
What's the action we're actually taking here?  Is the SMS app going to change to be consistent with the e-mail app in terms of icon usage, or vice versa?
Target Milestone: --- → B2G C4 (2jan on)

Comment 9

6 years ago
I don't think anything needs to happen for this bug.

820145 - Covers changing the pencil icon to text. (Pull request pending review)
820147 - Covers changing the '+' icon to the pencil + paper to mean 'compose'.

Once the above two bugs are fixed, I think this one will be as well.

I would say that this should either be a meta or duplicate - probably don't need to block here.

Steve feel free to assign to me if you'd like.
Hi Andrew,
Based on comment #5, I'll replace the edit button image in SMS with the icon used in email.

Hi Kevin,
I saw your patch and you replaced the icon with text. We already have a nicer icon in email. Since this issue is raised for style inconsistency, I'll sync the icon in SMS to email first. Thanks for your reply.
Created attachment 697783 [details]
Patch for replacing the edit icon

Hi Borja, I overwrite the edit icon style and sync the icon to email app. I also removed the unused icon images in this patch.
Attachment #697783 - Flags: review?(fbsc)

Comment 12

6 years ago
*** NOTE ***

UX is currently discussing this, along with Bug 820147 and Bug 820145, and will be posting a revised solution.  We need to rework the solution to take into account the effect on Contacts and Call Log, which also have edit icons.

PLEASE HOLD OFF ON ANY WORK until Josh has posted a revised solution with wireframe illustration of all screens impacted by these issues.  To summarize, the group of related issues are:

Created attachment 698446 [details]
Screenshot of final implementation, Jan 6

Attached is a screen shot depicting the final implementation for this cluster of related issues. Please let me know if there are any questions.

Comment 14

6 years ago
Created attachment 698465 [details]
New Edit Contact Icon

ATTN: Vivien

This is the new Edit Contact icon specially for the Contacts app header.

Comment 15

6 years ago
Lots of bugs to track the icon issue - if you don't mind I'll consolidate them under the same owner as the fix should be pretty simple. WIP: https://github.com/KevinGrandon/gaia/compare/bug_820145_new_icons
Assignee: schung → kgrandon
Er... I'm fine with that since you already changed the style in building-block. But please also modify the icon in email. Thanks.

Comment 18

6 years ago
Created attachment 698854 [details]
New Edit Contact Icon (slight tweak to pencil spacing)

Use this as the final edit contact icon.
Attachment #698465 - Attachment is obsolete: true

Comment 19

6 years ago
Created attachment 698857 [details]
Screenshot for final implementation, Jan 7

Updated to include Gallery and Settings -> Display.  A scrub of the UI shows no more instances of offending 'Edit' icons.
Attachment #698446 - Attachment is obsolete: true
Attachment #697783 - Flags: review?(fbsc)
You need to log in before you can comment on or make changes to this bug.