Geolocation Icons

Most of my design time has been focused on the visual design of the interface for Firefox 4. Now that the new theme process is well underway I was able to devote some time to designing larger geolocation icons for the notification panels that recently landed.

The final icons turned out like this:

Geolocation Icons
Left to Right: Windows, Mac, Linux

This is based on an idea from Alex Faaborg. Instead of just using a plain globe there are red orbital rings(LASERS!) locking onto your position. The red is in contrast to the blue of the globe. Relaying some level of warning that a website is requesting your location.

I also sketched and rendered a few other ideas that didn’t make the cut:

Geolocation Icons - Alternatives Sketches

Geolocation Icons - Alternatives

The final result looks like this on geolocation pages:

Geolocation Icons - Panels Screenshot

Once the panel styling is updated it should look more like this:

Geolocation Icons - Updated Panels

More notification icons to come in the future!

Tags:

This entry was posted on Thursday, July 1st, 2010 at 11:38 am and is filed under Firefox. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

24 Responses to “Geolocation Icons”

|
  1. Pino says:

    Looks pretty good, but combined with the text “randomevilsite.com wants to know your location, it is pretty scary. I think the dialog could do with more explanation. For example; does sharing my location mean they know my country/my city/my house/or even the room I am sitting in?

    Also the lasers look more like weird rubber bands in the smaller view. It doesn’t very much look like pinpointing a location to me.

  2. AaronMT says:

    Icon looks good, the strings in the dialog need more relevant information as the commenter above mentions.

  3. Taimar says:

    Yup, using orbital rings is a great idea! They might look even better if they were more orange-ish. Orange is the opposite color of blue, and orange is the main color of Firefox itself.

    On thing I’m not sure about is Windows icon – blue and green together is so XP. I think it should look more ‘current’. I must say I like Linux icon the most: it’s the clearest of them and ‘clarity’ is what icons are about.

    Cheers.

  4. Tiago Sá says:

    Yeah, the icons look a bit weird… I like them, and I’m fine with them, but I think we could use a bit more emphasis on the location rather than on the laser beams… Or whatever they’re called.

    The notification text could also use some word smithing, but I think it’s perfectly fine as it is. It’s scary enough that people who didn’t request the site to sync with their location will get scared, and it’s informative enough that people who did will know what’s going on.

  5. Stan says:

    Are the current icons in use in the Minefield nightly builds the final versions that will ship? The back, forward, refresh icons etc don’t seem as smooth as they do it the mockups.

  6. Mic says:

    What if you change the sketch and the rendering to have a large crosshair (on or close to the surface) over a point off the center? Like you have with the target of the ‘lasers’ (they look strange and it would take a blackhole to bend the beams so much by the way;)

  7. Colby Russell says:

    I’m curious if you did a few personal concept renderings that used a square or rectangular locator, instead of a circular/elliptical one? In many movies, the cinematic scenes involving satellite or other means of positioning use a square or rectangular locator, rather than a circle. I do wonder if potential confusion with gun sights is part of the motivation behind those decisions, in order to prevent miscommunicating to the audience what’s happening in those scenes, even however brief that impression would be.

  8. mistertwol says:

    The last two icons would really fit vista/7 better than the green and blue one.

  9. Stephen says:

    @mistertwol: Actually I was informed by the Windows 7 globe found in various places. Networking, Language/Region, etc. http://i.msdn.microsoft.com/dynimg/IC37812.png

  10. mistertwol says:

    @Stephen,
    bah. Personal preference I guess. Just thought it’d match the minimalistic UI direction.

  11. Mardeg says:

    Agree with Pino on the rubber band look in the smaller view. This is because the lines actually cross in the smaller view. Make them not cross like shown in the bigger view and that will improve it.

  12. Ken Saunders says:

    Awesome work! No complaints (for a change).

    Is it my imagination, or does Mac just have the best looking UI and elements?
    Does everything look better on a Mac?
    How about Blue? Is it better on a Mac?
    Porn? :)

    I’m moving towards Linux (Fedora) but I’d love to be able to afford a Mac.
    I’m ok with Windows, it’s kind of cartoon-ish, but I despise Microsoft.

  13. skierpage says:

    The icon is fine.

    @Pino points out a huge problem with geolocation: you don’t know what it’s going to provide the web site! The only way to find out is open a new tab, visit a site you trust with geolocation, and see what it does.

    So I think the geolocation prompt should include a link. Hovering over it will show your latitude/longitude and accuracy. That won’t mean much to non-cartographers, but it’ll reassure you what’s happening. Clicking it will take you to more info. That could be just the http://www.mozilla.com/en-US/firefox/geolocation/ page, or better still it could be a local Location panel. That would always show your current coordinates, could let you set a preferred map to show your location (either a web service or a local app), and could allow you to lie about your location, either “I’m at the police station 6 blocks away” or “I want shops near where I’m going to be after my journey”. (This fancier stuff could be done through extensions.) This “location panel” could go in preferences, but feels like a relevant part of the Firefox 4 home page. It’s something very personal your browser knows about you.

  14. Well done! The only critique I have is that the globe looks a bit inverted. The orbital rings make it look a bit more spherical but still there is something about the edges that make it look concave rather than convex.
    Still looks great though!

  15. Nidonocu says:

    Wow, those icons look great. Can I ask, how did you make the coastline of the land in the globe? Did you just hand draw it, sample the shape from somewhere or use some sort of generator?

  16. Stephen says:

    @Nidonocu: Thanks! The coastline is hand drawn.

  17. Stephen says:

    It might be because I didn’t completely wrap the continents around the globe. I might tweak that. Thanks!

  18. insanelyapple says:

    it still looks like north america. why almost all software using globe as icon or resource is pointing to the NA?

  19. skierpage says:

    I agree with @insanelyapple, the continents looks North America-centric.

    Instead, you should reuse the continent outline from the Firefox 3,5 icon (which you worked on, kudos) for subtle brand reinforcement. You can rotate the globe location and there’s millions of square miles covered up by the firefox where you can be inventive. The “Planet Mozilla” could be an actual 3D asset, http://planet.mozilla.org/ could use it too ;-)

  20. insanelyapple says:

    yeah, thats what i meant – there should be consistency, and you should use Planet Mozilla as globe.

  21. Aethec says:

    The globe looks awesome, but I have to agree with Pino and Mardeg, those lasers don’t look like lasers at all in the small icon, but rather like rubber bands. I like the second mockup (with the thing with a red ball – don’t what its name is in English, sorry) more.

  22. Good stuff. I hope you don’t get too many “but that’s not my location” bugs for that icon ;)

  23. Brandon says:

    How are these icons licensed? I might like to use the globe/pin icon in an iphone application. Would that be possible?

    Thanks

  24. Stephen says:

    @Brandon: I am trying to work that out and will update when I have more information.

|