"Edit" icon is difficult to recognize

Me too.

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.

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

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.

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

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.

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?

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.

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.

@Matthew
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.

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.

(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

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

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

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-
> 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.

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 :)

--
Martin

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.

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. :)

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

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

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.

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.

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.

https://bugs.launchpad.net/ubuntu/+source/qbzr/+bug/894368/comments/7

> 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