Firefox UX
Categories: Boot to Gecko Firefox OS Usability Testing User Research Visual Design

Case Study: The Edit Icon on Firefox OS

15 responses

When Designer Experience is Trumped by

In Market User Validation Testing.

With our extremely short time frame on design for v.1.0, we had a good idea what metaphors needed to be covered in the action icons. Beyond the visual design (post coming soon), our focus was to simple, have a few contextual metaphors rather than very specific metaphors (icons) for each action. The reason for this was to reduce the learning curve and minimize the amount of metaphors we needed to create. We opted not use text labels under icons due to the lower resolution shipping screen which would render these unreadable.

We felt strongly that the metaphor to create or add new content should be a “+” and to edit content should a pencil accompanied by an object, like a document. For a North American audience this would make sense… after all, search for “edit icon” in a search engine.

edit_icon_search

However a couple months back our User Research team conducted a few user tests in our Latin America launch markets, and the users had trouble with differentiating between the edit and compose iconography. Part was an interaction issue (location and actions had to be adjusted), but we needed to add variety and modify some of our metaphors. Leaving us a couple weeks before our gold build to make these changes, we had to scramble. We decided to change the edit icons to text strings for many reasons, most importantly, for clarity however to due to technical constraints this was not possible. We proceeded by modifying the metaphors instead, the pencil became the universal“edit” metaphor and we needed to add a few more support metaphors like “picture” and “contact”. And special cases like entering the email’s list multi-edit mode does not contain a pencil at all, since we didn’t want the user to confuse this with an email compose action.

edit_icons_fixed

The Future.

There will be more tweaks to the iconography as we roll out updates. But this made me also want to rethink the problem. We still want to reduce the amount for unique visual metaphors for clarity and scale considerations but still the flexibility for a wide variety of icons. After having a few chats with different designers this concept has a lot of potential and should be executable (on a bigger than 3.5” screen) on future devices.

The icon is the noun and the label is the verb. Thoughts?

edit_icon_beforeafter

15 comments on “Case Study: The Edit Icon on Firefox OS”

  1. Mook wrote on

    Unfortunately, having text in icons can have annoying issues (which I’m sure you know all about). For example, the Traditional Chinese 編輯 will just look like two black blobs at that size/resolution; the German bearbeiten probably isn’t going to fit at all.

    Amused to see that there are three Komodo Edit icons in your image search ;)

    1. Patryk Adamczyk wrote on

      All good points. Its something we’re thinking about. All popular mobile OS’ today have been designed in North American (mainly California) primarily with the (multi culture) North American sensibilities in mind. You rarely see UI catered to different age and culture groups unless its been customized by an OEM. Maybe that’s okay. But there is a strong shift to maintain a stock experience. Ideally if someone buys a Firefox OS device they should have access to a very similar experience as their neighbour but (as far as I am concerned) should be able to customize that experience to suit their needs (low vision, loud sounds, information density). In this case the pencil to us meant “edit” but clearly in one of our launch markets it did not. The mini tape metaphor means voice mail to many who were around in the 90s, CD means music. But in 5 years, will these metaphors make sense? So perhaps in some instances text is that way to go, but it has be more region conscience.

      1. PastorGL wrote on

        If pencil doesn’t work, just try to use other metaphor. For example, the shape of mouse cursor in editing areas (aka «beam»), which is almost universally recognisable and associated with editing.

        1. Patryk Adamczyk wrote on

          There is a high chance users in our target markets have never used a computer, so a mouse cursor would be a completely unknown metaphor to them.

  2. flod wrote on

    Good for English with its short verbs and nouns (add, edit, delete), awful for other languages (maybe the majority).

    For example how could you fit “MODIFICA” (“EDIT” in Italian) in that tiny space? Abbreviations?

  3. Axel Hecht wrote on

    I’d try to avoid composed images and text like the plague, sorry.

    They commonly work very well in English, with it’s short text, but in any other language, you’ll end up with either prose beneath your image, like in German or Italian. Or you end up with a glyph or two in Chinese.

    You can play around a bit with different verbs you’re expecting with http://transvision.mozfr.org/?sourcelocale=en-US&locale=de&repo=aurora&whole_word=whole_word&recherche=edit, and mxr queries like http://mxr.mozilla.org/l10n-mozilla-aurora/search?string=editMenu.label&find=browser.dtd

  4. Robert Kaiser wrote on

    The problem with using the verb is that in some languages this can be a quite long string. In German, it’s “Bearbeiten”, I guess there might be even longer strings out there for other locales (though this one’s already pretty bad length-wise).

    1. Alexander Ploner wrote on

      I fully agree with Robert Kaiser. The corresponding word in German is “Bearbeiten” and there is no good abbreviation for it.

      The symbol describes the function in a very good way, there is no need for a translation, it looks nice (not overcrowded) and finally I think a symbol can be recognized faster than a text label.

  5. shaovunet wrote on

    Yeah I like it, but as said before, it cannot be used with every language.

    Even though the pencil metaphor is common, when I use an app for the first time i do not always notice the possibility of edition quickly (I am speaking in terms of seconds, but I guess that less experienced users will need more time).
    Icons are great, but too much of them can confuse a user.

  6. Matt Cheale wrote on

    If you keep the pencil consistent across all the edit calls to action and just change the background then you can still have two consistent metaphors. One representing the noun and one representing the verb, a pencil + contact = edit contact etc.

  7. fvsch wrote on

    I concur with Robert. Words in tight spaces is a localization nightmare.

  8. Caspy7 wrote on

    Thanks for sharing these this.
    Yes, (like the others) I was going to mention something about the problematic-ness of using words in the UI in this manner because of all the languages. Also, is combining text and imagery like this a good idea? I don’t know. Perhaps there are studies/research. I guess I had the thinking that it was less than preferable.

    One other thought to share, and this is of course my opinion, is the Edit Photo icon does not communicate to me that idea. The pencil I get, but the rectangle with the dot…well, doesn’t make me think of a picture/photo. The other icons I “get”. At a glance I know what they mean. But not that one.

  9. Dave wrote on

    If using a label just use a text button without an icon. Remember mobile devices tend to be highly discoverable.

  10. andrew wrote on

    patryck a question…how customizable will be the OS…can I customize all the look n feel only using html5 + javascript??…

    1. Patryk Adamczyk wrote on

      Yes, once v1.0 is released you will be able to download a “white label” version, and customize it to your desires.