Designing icons

I read nemo’s mini rant with interest, and I believe it merits more discussion than lurking on a cloud platform.

I do feel quite strongly […] that icons should be graphical, not pictorial.

I completely agree – an icon is… there’s a clue in the name, it is supposed to be “iconic”, as in a metaphor for the thing it represents. An example would be an ink quill for a DTP package, a sort-of-plug-thing for power management. Everybody on the planet knows the blue ‘e’ with a yellow tilted halo around it. These are not pictures or photos, they are a type of logo that is a representation of the product in question.

Think about it – Shell (as in petrol). Yellow and red shell. McDonald’s, the golden arches. Apple-with-the-bite-out-of-it. Toyota’s hoops thing. There are many companies known by name where the logo IS the name (Facebook, Google, SanDisk, MaXtor, etc) but for some as mentioned, the name can be dropped and the iconic drawing stands alone to represent the company.

An icon for a computer program is no different. Humans tend to be better at pattern recognition than sifting piles of words. If you give me an insanely large display with a couple of hundred icons, I don’t learn names, I learn the icons themselves. Just like with Android’s cluttered apps list.

However, icons shouldn’t have TLAs in them as standard.

In the past I would have agreed, for surely there is a way to demonstrate something is an executable file rather than having it say “Abs.” or suchlike?
The problem is… new people. As you say, we do not use standard file extensions so there needs to be a very clear way of marking the sorts of files a person might want access to.

Take a look at BASIC:

On the face of it, it is clearly BASIC. But it is clearly BASIC to those of us who grew up with RISC OS when it has always looked like that (white words in a blue background). Maybe, now that RISC OS is looking for some new users, a little hand-holding is no bad thing?

In addition, words in icons may be useful for a generic class of icon. For example, a generic “system resource” icon that uses words to tell Module from Utility from Obey or a generic “this is a picture” icon where we use words to tell JPEG from PNG from Sprite.

We don’t currently do stuff like that, but maybe it is an idea to ponder for the different non-OS file icons as there is not a lot of similarity. For example, JPEG is a stylised grey camera overlaid onto a sort-of-film-roll and bright text saying “JPEG”. A sprite, on the other hand, is a bunch of coloured squares and a paintbrush. While sprites are much more versatile than JPEG, there’s nothing you can do in a JPEG that you can’t do with a sprite. And both are bitmapped images. Not that you’d easily guess a relationship from the icons.

And why are the folders skewed?

Good question. Undoubtably, somebody is copying an old Mac. It is worth pointing out that OS X now uses better looking face-on folders.
Looking at the example below, it is also worth noting that !Boot is a cream folder. I understand why, you understand why, but how do we explain this sort of thing to a new user?

For RISC OS, face on please. Shaded, 3D, cool, but face on.
Oh, and blue. But that’s a ROL problem. ;-)

And don’t get me started on ‘foldy corners’… what’s a foldy corner got to do with an MP3 for example? I may be on my own here.

I think it is a “generic this is a file” metaphor. Windows has foldy upper right corners, RISC OS has foldy lower right corners. The earliest reference I can find is the GEM/1 desktop. See linked picture…
Oddly enough, Apple Lisa didn’t do this.

The thing is – RISC OS has had a fairly clear directive. Application icons should be something obvious, distinctive, and representative of the purpose of the application itself¹; while icons were related to the main application icon, only in a rectangle [does this still hold valid with the influx of non-native files?]
Looking at RPCEmu, this largely appears to be the case, so I’m not sure exactly why the tipped-up corner is there as well. Perhaps to ram the point home?

Either way, the folded corner doesn’t irk me half as much as the slanty directories…

¹ But be careful of stuff that might be list in translation. Fresco’s “Chili pepper” button for the hotlist (chili → hot → hotlist) would be an example!

Richard Hallas was commissioned by Castle to design the RO5 icons. He put a lot of thought and experience into it. There was an article by him in Foundation Risc User, sorry I cannot put my finger on the date right now, in which he explains his thinking for the compromises and design decisions he came up with. Some of them were pretty obvious, e.g. do not include vertical text, but others, like colour coding, were not. Whether or not you like the RO5 iconset it was an interesting read.

The thing about the foldy corner is this: RISC OS already had a definitive “this is a file” indicator – the square black border used throughout RO2 and RO3.

Then RO4 suddenly decided to be different – different colour folders and a different ‘file’ idiom. I always though that was a stupid idea, and have consistently used RO3-style icons ever since. The ability to continue to do so is what led to the definition of the Theme Protocol, in fact.

Apart from anything else, the foldy corner uses up valuable pixels and obscures others. There are 1156 pixels in a 34×34 icon, but the RO5 style leaves only 726 of them to depict the contents symbolically, having used 134 of them to tell us it’s a file, and the remaining 296 to write down the type.

On closer inspection I can see there is some colour consistency, so I take that back. I couldn’t see why Perl had the same colour as XML or that PDF had the same colour as GIF but different to Postscript however.

On the face of it, it is clearly BASIC. But it is clearly BASIC to those of us who grew up with RISC OS when it has always looked like that (white words in a blue background). Maybe, now that RISC OS is looking for some new users, a little hand-holding is no bad thing?

The history has become obscure – it’s been a while since Ian McNaught-Davis and Chris Searle were writing BASIC programs in white text on a blue background in the BBC’s The Computer Programme! Considering the default, one might expect white on black, but that’s probably the etymology of that visual idiom. At least one used to be able to read the “10 REM”!

For example, JPEG is a stylised grey camera overlaid onto a sort-of-film-roll and bright text saying “JPEG”. A sprite, on the other hand, is a bunch of coloured squares and a paintbrush.

Images do try to have a common idiom, but unfortunately it’s not a good one – it’s the white grid on the right. It used to be the paintbrush in some form, or the iconic house and landscape, both of which are much more recognisable.

But be careful of stuff that might be list in translation.

Which of course the RO5 icons also fall foul of – the Absolute FF8 “App” icon features a running man. Now while we “run” a program, the French “lancer” (launch) or possibly “exécuter” (execute) it. Should we have an icon of a rocket or a guillotine in French locales?! In German ‘führen’ is not quite the same as ‘laufen’. In Russian ‘работать’ primarily means ‘operate’, as opposed to ‘бежать’ meaning ‘give it legs’ as we say round here.

I find these kind of anglocentric visual idioms embarrassingly ‘Little Englander’. Not that Johnny Foreigner has any right to complain, what?!

That is very interesting. The trouble with a rebus is that it usually only works in one language. Airlines and international tourist agencies have presumably put some work into producing graphics comprehensible to all. The trouble with metaphors is that people do not necessarily use the same ones. Larry Trask’s “Introduction to Linguistics” asserts that ancient Greeks thought of the future behind them – invisible and about to overtake – whereas for us the convention is that we face the future, leaving the past behind. I do not know what his evidence was – maybe on words like ‘ante’ being originally derived from a word meaning ‘forehead’.

The thing about the foldy corner is this: RISC OS already had a definitive “this is a file” indicator – the square black border used throughout RO2 and RO3.

Exactly. When/why was this changed? Because everybody else does it?

the Absolute FF8 “App” icon features a running man.

Oh, that’s what it means. I wondered why it featured a man legging it for the fire exit.

Seriously, compare:

Extra bonus – look at the filename of the above image. Of course I’m taking this seriously!!! ;-)

possibly “exécuter” (execute) it. Should we have an icon of a rocket or a guillotine in French locales?!

I can’t draw worth a damn, but here’s my crappy attempt anyway.

The icon uses a custom green palette and I was too lazy to alter it all. If it used the regular 256 colour palette, I’d have had more fun with the gore, brains spilling out, that sort of thing. As it stands, it is an appallingly bad picture of a guilotine slicing the head off of a Jet Set Willy clone, using Tarantino-style blood pressure.

The three letters “App” at the bottom are essential to give you any idea of what the hell this is supposed to represent…

Gavin sagely suggested

The trouble with a rebus is that it usually only works in one language. Airlines and international tourist agencies have presumably put some work into producing graphics comprehensible to all.

Indeed. And the graphical ubiquity of the web and various smartphone OSes (and, yes, even desktop OSes) has helped to build a universal symbolic language. Though even here there can be difficulties, take Playstation’s O and X for example, which mean the exact opposite in Japan than they do in every other territory.

Rick added

The three letters “App” at the bottom are essential to give you any idea of what the hell this is supposed to represent…

Twas always thus. As it happens, I think Acorn invented “App” in that respect (though it was only ever in the icon).

In terms of themes and consistency, I’ve put together some RO2/RO3 style icons to illustrate my points:

The images all manage to look like bitimages because they are thematically linked. The filetype is probably not terribly important, and if it is, you’ll already know (or can find out with the Filer’s menu).

Most people won’t have as many types of font as me, but you can tell they are fonts. Yes I did put some text in, but they aren’t (necessarily) filetypes and the difference can be massively important in my industry. Having said that, Windows users could find the TTF and OTF fonts even without the text.

The internet and video sections show how repeated elements have always been used to link similar types.

The ‘others’ section shows that (hopefully) you don’t need text even for unfamiliar icons – CSV and XML are obvious, Excel will be if you’ve ever used it. The ICC colour profile and XPS document would need familiarity with their logos.

And finally yes, sometimes you have to put a file extension in… but not for types that are useful on the platform – a platform that doesn’t use file extensions.

Rick gets the prize for best leafname. Anyway, I’m away till next week. :-)

Unfortunately I get a 403 from Google when trying to look at http://lh4.googleusercontent.com/o9RZ6bq15LTcsgdeTQK4ZDTZ9ma84f3CLGPaijP0AO3aMXW7xEHOCfJyXJ9k2XECcA=w1600

Which was what?

I think it was…

In terms of themes and consistency, I’ve put together some RO2/RO3 style icons to illustrate my points

…but all of the `img’ elements seem to have disappeared from the thread.

The vagaries of GoogleDrive hosting continue to evade me. The image ought to be here and if GoogleDrive hosting were like anything else, the image would be below:

But it isn’t, is it.