"Edit" icon is difficult to recognize

Bug #287154 reported by Matthew Paul Thomas on 2008-10-21
This bug affects 16 people
Affects Status Importance Assigned to Milestone
Launchpad itself

Bug Description

Caroline Ford, Dara Adib, and Ursula Junque all reported not recognizing the pencil in the Edit icons.

The icon may need redrawing to be more recognizable.

Martin Pool (mbp) wrote :

Me too.

Martin Pool (mbp) wrote :

It can also look like a (/) strikeout symbol.

The other thing that is confusing here is that the binding of the icon to the thing it changes is not clearly established.

In some cases, such as "update description/tags" the icon is to the left and the text is blue and hover:underlined. In other cases such as the title the icon is to the right and the text is neither blue nor a link. For the description the icon is below and in a different paragraph. In the case of tags the field is not shown at all until a value is assigned. In another case, "affectsme", the icon is not used at all, but just the text "change". (I actually think this is easiest to understand at present, and would be an improvement.)

In one case the text describes the current state "this report is public" and in another case it describes the action "update description/tags", and in another case the text just _is_ the current value.

Andrew Bennetts (spiv) wrote :

Me too — in fact I already reported this as bug #252480. I've marked that bug as a dupe of this one.

Martin Pool (mbp) wrote :

I would also draw your attention to eg <https://edge.launchpad.net/~bzr/+archive> where the icon is used next to "copy packages" and "delete packages" links that are not "edit this" in any regard. I think similar things occur in the branch or review ui.

Stefan Lesicnik (stefanlsd) wrote :

I also did not realise this was an edit until told.

Changed in launchpad:
status: New → Confirmed

Changing back to New until the bug gets triaged. Please don't use the Confirmed status. Instead, to indicate that the bug affects you mark it as such using the link under the title.

Changed in launchpad:
status: Confirmed → New
Martin Albisetti (beuno) wrote :

I agree it can be clearer.
How about a wrench?
I'm not sure where it should be assigned to since it affects all of Launchpad. Maybe foundations?

Changed in launchpad:
status: New → Triaged
HughBranes (hughbranes) wrote :

I'd like to back up what Martin seems to be getting at. What is the theme going on with the icons? It might be obvious when you explain it, but it should ideally gel almost straight away. Is there a legend somewhere?

The (apparent) pencil icon seems to be representing things we can update. That's OK, but I think some of the link text it's adjacent to doesn't help reinforce that association (e.g. "This report is public"). I'm afraid that unless you have a super-obvious icon, which is difficult to do unobtrusively, you might need clunky text like "[change this]" nearby.

The bug heading itself is presented differently to the other "edit" items. It uses a hyperlinked <img/> with title attribute, whereas the others use a background image and the text is a hyperlink (which presumably initiates the edit action). I think this inconsistent application can be a problem for familiarising users. It probably plays pretty poorly with assistive or non-standard devices, too.

If you decide that you want to provide text more descriptive of the action being offered (like "edit this" as in what I talked about the paragraph before last), I favour using an <img/> like the bug's title has, because it allows you to present the action description in the alt and/or title attribute, while retaining readability in the status description (e.g. "This report is public"). Did that make sense? Let's just say the bug's heading does it best.

The other prominent icon, the green "+", is applied to a variety of actions. I can see that they are kind of all adding information, but it's a mental stretch and ideally it wouldn't be. Maybe you need more groupings with icons, I don't know the answer. So we have "also affects …", "link …", "subscribe…", and "Offer mentorship", but not "Add a comment/attachment" or "Report another bug". It seems ad hoc.

I hope that all helps. I do like where this is trying to go, however.

Matthew Paul Thomas (mpt) wrote :

Changing the icon to be self-evident would be more effective than adding a legend.

The use of background image for links that contain text, and <img /> for links that don't, is quite deliberate. Compared with always using <img />, Launchpad's approach makes no difference with most devices but works much better in Lynx. Any necessary title= attribute should be applied to the link as a whole, not to the image inside it.

HughBranes (hughbranes) wrote :

I agree about legends. They are, however, useful fallbacks, just as search is a useful fallback for bad navigation. Even the best practice doesn't work for every user, so backups are generally worthwhile.

I don't completely follow your distinction, but I'm happy to take it on trust since you seem to have thought it through. I think you're right that @title is not ideal with an image that's simply adjacent (unless, I guess, there's a very unambiguous association in markup between the text and icon, which probably isn't the case). Thanks for your response.

Andrew Bennetts (spiv) wrote :

Just spotted on #launchpad:

< mae^> thumper: how do I do that?
< mae^> aha! click on the ! icon

Even after figuring out that the icon does what they need, mae^ still didn't realise that it's meant to depict a pencil.

Andrew Bennetts (spiv) wrote :

(I've taken the liberty of removing "apparently" from the bug title. I think we have plenty of evidence showing that it *is* difficult to recognise.)

Not understanding what the icon does seems pretty hard, but I can see where the icon could be improved. It's location, color, title, and alt couldn't be better written though. I couldn't imagine a more obvious way to handle it.

After talking with Andrew some, a wrench icon seems to make sense. Only because the ! is supposed to represent a pencil, which it does so poorly.

The wrench wouldn't be hard to make... http://fc46.deviantart.com/fs26/f/2008/155/3/d/wrench___vector_icon_example_by_bearfriend.jpg

Michael Terry (mterry) wrote :

I'd point out that GTK+ already has a nice little icon for the concept of editing: http://library.gnome.org/devel/gtk/unstable/gtk-Stock-Items.html#GTK-STOCK-EDIT--CAPS

It's basically a pencil on top of a piece of paper. I suspect the paper can be dropped for LP's case and that leaves the pencil. So you already have a good metaphor, but the pencil in the GTK+ icon is clearly a pencil. LP's is not.

Looking at the two, I would suggest:

1) Don't have a visual break between the point and the body of the pencil. This is what makes it look like an exclamation point.

2) Make it bigger

3) Make the pencil yellow, the circle black. Everyone also knows that yellow circles mean warning. A yellow circle + black exclamation point suggests 'don't click here'. Plus, pencils are yellow, not black!

4) Arguably drop the circle altogether.

5) Add an eraser

Martin Albisetti (beuno) wrote :

Will get this done soon-ish. I'll attach the proposal(s) to this bug for feedback.

Changed in launchpad-foundations:
assignee: nobody → beuno
status: Triaged → In Progress

On Mon, Mar 16, 2009 at 4:26 PM, Michael Terry
<email address hidden> wrote:
> I'd point out that GTK+ already has a nice little icon for the concept
> of editing: http://library.gnome.org/devel/gtk/unstable/gtk-Stock-
> It's basically a pencil on top of a piece of paper.  I suspect the paper
> can be dropped for LP's case and that leaves the pencil.  So you already
> have a good metaphor, but the pencil in the GTK+ icon is clearly a
> pencil.  LP's is not.

I *really* don't like that icon, and it confuses me all the time on gnome.

I'll try a stab at the wrench, and we'll see how it goes from there :)


Steve Alexander (stevea) wrote :

Pencils are yellow?

I think that's an artifact of your culture. In my British-school-educated mind, the classical pencil is red. I don't think I've ever seen a yellow pencil.

My overall point is, don't depend on the colour of the pencil having a particular meaning, or helping identify it as a pencil rather than a pointer or other stick-shaped thing.

Michael Terry (mterry) wrote :

Well, fair point. Cultures have all sorts of different color-norms, and my statements about yellow=warning do not apply everywhere either. But black is a particularly bad choice for the pencil because it is the same color as the text, helping the 'exclamation point' interpretation. And red or yellow pencil icon can be shown based on whether your locale is _GB or not. :)

I guess a wrench is pretty universal, in both shape and color (please tell me nobody has bent purple wrenches). +1 for wrench because it doesn't need localization. :)

Martin Albisetti (beuno) wrote :

We are currently doing user testing around this, more news in a few weeks.

Martin Albisetti (beuno) on 2009-10-02
Changed in launchpad-foundations:
importance: Undecided → Low
Martin Albisetti (beuno) on 2009-12-21
Changed in launchpad-foundations:
assignee: Martin Albisetti (beuno) → Charline Poirier (charlinepoirier)
Curtis Hovey (sinzui) on 2010-06-02
affects: launchpad-foundations → launchpad-web
Changed in launchpad-web:
status: In Progress → Triaged
Zearin (zearin) wrote :

Me too. I was actually surprised when I made the discovery what the button actually was.

Curtis Hovey (sinzui) wrote :

I think we can refine the edit icon. It is well known know and I do not think a dramatic change will help users.

I have a general concern about how we present sprites. I would like to seem them highlighted when the mouse over them. I want to tooltip to explain what is being edited. Highligting requires an investment in new images and an update to css rules. Tooltips are supported, but many links are missing their tooltip data, or the link was crafted by an engineer instead of used the well tested fmt:icon and fmt:link formatters.

Erik B. Andersen (azendale) wrote :

The icon always looked like a footprint to me. It took me a long time to find out it was actually "Edit". I think the icon is mainly yellow to fit in with the add and remove icons, which are green and red (like the colors on a stop light).

I think that if you made a wrench icon with a yellow background and put it in the same spot, the current users would get it fairly quickly. New users would probably get it faster, which would be good.

My vote is for replacing the image with text in small font saying '[EDIT]'. Instantly recognizable function, easy to localize, most reliable interoperability with browsers and accessibility tools.

The edit icon was included in a survey of Launchpad icons. We had over 100 participants. The analysis of the data was as follows:

 High level of understanding that it means "edit", at the same time, a strong association with "attention", "warning", and "danger". Might be worth modifying colour or shape to distance the icon from that interpretation.

Martin Pool (mbp) wrote :

I wonder how much Launchpad actually needs an edit icon at this point. Many occurrences of it are next to text like eg "Change branch details" or "Edit your subscription" that are perfectly clear without an icon. In other cases it initiates in-place editing that could perhaps just be better done by simply clicking the text.

There are some cases where clicking the text follows a link and clicking the icon edits the link but I'm not sure that's really good ui.

Martin Pool (mbp) wrote :


> No - I hadn't made the bug public. I have now, now that I've realised it's something I can do. (I thought those little round yellow exclamation marks, http://bit.ly/uMk6XQ, were warning symbols!)

I hear the pencil is going to be removed in a future theme update

William Grant (wgrant) on 2013-05-13
Changed in launchpad:
assignee: Charline Poirier (charlinepoirier) → nobody
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Duplicates of this bug

Other bug subscribers