John Smith's Blog

Ramblings (mostly) about technical stuff

Iconography

Posted by John Smith on

Carphone Warehouse had a brochure in their stores just before Christmas extolling the virtues of Android and the handsets they were selling. Just flicking through it yesterday, I noticed something amiss on the third page...

Low-resolution scan of pages 2 and 3 of the Android promo brochure distributed in Carphone Warehouse branches in late 2010

Specifically the right hand side...

Close up of an icon shown on page 3 of the brochure

Thing is, neither of the Android devices I have use that icon, instead they use this:

Actual icon for Google Maps used on Android

However, the icon in the brochure shows up twice in the top 5 Google image search results on 'google maps icon', I wonder where it might come from, maybe the actual location depicted on the icon itself?

Grab from Google Maps browser application, showing Apple's Cupertino HQ, which is the location in the icon used in the CPW Android brochure

Mind you, the copy in the brochure isn't much better. Given the recent uproar about Experia X10s not getting Android 2.2 I wonder what the likes of Trading Standards would make of this:

Clipping from page 2 that talks about free updates and constant improvements that are downloaded straight to your phone

The de-facto standard icon for "microphone" is rubbish

Posted by John Smith on

I've been mucking around a bit with the speech recognition stuff that's been added to the <input> element in Chrome 8, and I have to wonder how discoverable this functionality is going to be for the average user.

If you add speech x-webkit-speech to your <input> tag, the resultant form looks something like this: Screen grab from Chrome 8 showing an input field with a speech icon Clicking on the icon opens up a small popup prompting the user to say something, the popup also has the same icon.

Now, when I see that icon, I don't personally immediately think, "Aha, a microphone". Assuming I'm not completely abnormal, how many users are going to click on an icon they don't recognize, without some sort of external prompting text telling them what it is? (NB: this isn't a design decision specific to Chrome; my Dell netbooks also have a similar icon on their microphone jack inputs.)

As a sanity check, I've done some brief checks on Google and Bing's image searches for "microphone", and fail to find anything that looks like this icon - the top results are a mix of "bisected globe" microphones (which is what I'd consider to be the most widely known variant), and "rounded cuboid" ones, which are closer to the icon Chrome uses, but not a close resemblance in my opinion. Google image search top results for the term 'microphone'

Now rather than merely whinge as usual I've tried to be constructive for once, so here's my crude attempt at an icon that looks more like what I'd expect. As I'm not a graphic designer or UI expert, I'm sure something much better could be done - it doesn't scale down to 16x16 very well for starters - but hopefully it's better than nothing. The first file below is the original SVG, so anyone could tweak it in InkScape or similar apps; licence is WTFPL.

Original SVG file for microphone icon 64x64 PNG version of microphone icon, converted by rsvg-convert 32x32 PNG version of microphone icon, converted by rsvg-convert 16x16 PNG version of microphone icon, converted by rsvg-convert

UPDATE: I've just found that there's a Unicode microphone glyph, which looks to use the "bisected globe" type. However, I haven't found a machine/font yet which contains this glyph, and the sample image contains musical notes, which are a bit out-of-context for speech recognition text inputs.

About this blog

This blog (mostly) covers technology and software development.

Note: I've recently ported the content from my old blog hosted on Google App Engine using some custom code I wrote, to a static site built using Pelican. I've put in place various URL manipulation rules in the webserver config to try to support the old URLs, but it's likely that I've missed some (probably meta ones related to pagination or tagging), so apologies for any 404 errors that you get served.

RSS icon, courtesy of www.feedicons.com RSS feed for this blog

About the author

I'm a software developer who's worked with a variety of platforms and technologies over the past couple of decades, but for the past 7 or so years I've focussed on web development. Whilst I've always nominally been a "full-stack" developer, I feel more attachment to the back-end side of things.

I'm a web developer for a London-based equities exchange. I've worked at organizations such as News Corporation and Google and BATS Global Markets. Projects I've been involved in have been covered in outlets such as The Guardian, The Telegraph, the Financial Times, The Register and TechCrunch.

Twitter | LinkedIn | GitHub | My CV | Mail

Popular tags

Other sites I've built or been involved with

Work

Most of these have changed quite a bit since my involvement in them...

Personal/fun/experimentation