I’ve recently been involved with an iPhone project where we are doing a few custom UI controls, and it’s definitely proved a learning experience about the difference between designing for a computer screen and designing for the iPhone screen (either the current one or the upcoming iPhone 4 Retina Display screen).

One thing I’ve learned has to do with the characteristics of the iPhone screen, and how that influences User Interface Design choices. Over the years, I’ve become used to the what it takes to show a change on a computer monitor, which is to say, the degree to much you need to change the colour, shape, or scale so that it’s obvious, even if the user looks away for a second before the change occurs and then looks back.  This might apply to an object in its selected and unselected states, or the addition of something new on the screen, or perhaps the enabling or disabling of a button or other element.  At first, I thought this was due to the dots (or in this case, pixels) per inch of the iPhone versus computer monitors. Monitors are usually somewhere between 72 PPI (Pixels Per Inch) and perhaps 200 PPI on the best equipment. The IBM T220/T221 LCD monitors marketed from 2001–2005 were 204 PPI, and they probably set the standard for a while. These days, a 20-inch (50.8 cm) screen with a 1680×1050 resolution has a 99.06 PPI, and a garden variety Macbook (not the higher end Macbook Pros) has 113 PPI (Wikipedia has an article on how this is calculated).

However, the iPhone PPI is listed at 163 PPI, which although it’s on the high side, is certainly not significantly higher than a typical computer these days. The difference, then, must be the size of the screen. In the case of any iPhone screen 2G, 3G, 3Gs and 4G, it’s a 3.5 inch screen (compare that to the aforementioned 20-inch, and now we’re talking different.)

It might be obvious, but what I’ve noticed is that the amount of change you have to make in order to be noticeable is far more on the iPhone’s screen. The contrast must be greater, scaling or moving an object between one state and another has to be larger (or farther), and as a corollary to this rule of thumb,  it’s easy to miss subtle changes.  Several times during development of the app we’re working on, I had to report to the graphic designer that I was working with, that a selection style wasn’t distinct enough, or that a small detail of a button, such as a downward pointing arrow, had to be rendered with higher contrast (the UI had a lot of grey objects, and some of them had white or darker grey overlays).

I think the easy way to think about this is the analogy of greasepaint. What’s greasepaint? It’s the traditional makeup that actors wore (and has now been superseded by more modern stage makeup) that helps to compensate for both the washing out of facial features by the bright theatre lights, as well as help audience members to make out their faces, even though the actors were farther away (and hence, smaller in the eyes of theatregoers – perhaps the equivalent of being 4 or 5 centimeters tall depending on how far away from the stage they were sitting). I remember going backstage to a dressing room after the Play or Opera was over, and was always struck by how odd the performers looked before removing all of that extreme makeup, which brought out cheekbones or encircled their eyes (like a Raccoon, I though!).

So User Interface Designers working on iPhone apps, remember, the computer screen is the dressing room, and the iPhone screen is the stage. Don’t forget the greasepaint!

Though the drawing doesn’t show it, Englebart’s mouse, which was one small part of Engelbart’s a larger project, aimed at ‘augmenting human intellect’ had 1 button. The drawing mainly shows how the block uses multiple rollers, which sense which way the mouse is being moved in terms of X and Y coordinates.

When Apple shipped the first Lisa computer (and of course, the first Mac) , the commandment that ‘Thy mouse shall have but  1 button’ was spoken to the masses. On the other side, the X-Window System, and the IBM PC mouse had multiple buttons (2 or 3). The two to three camps dug in for years, each claiming the ergonomic, moral or practical high ground over the others. The antipathy between the 1 or many buttons groups continues to to this day, even if this division is no longer the case. Many people believe that Apple has stayed true to their gospel and only makes or supports a 1 button mouse, but the unforutnately named ‘Mighty Mouse’, which shipped in 2005, supports multiple buttons virtually rather than physically (you click on one side or other other to simulate one or the other button), and also has a roller ball and 2 physical side buttons, providing no fewer than 5 buttons. The proliferation of mouse buttons, sometimes 2, sometimes 3, sometimes 5 or more, depends on the system and software one encounters. Some trackball devices have had 5 buttons that effectively provide even more control messages by allowing a different kind of click from different combinations of those buttons. Apple’s latest mouse (the even more unfortunately named ‘Magic Mouse’ – what group is coming up with these names?) even goes farther, making the entire mouse surface another control surface in and of itself, like the trackpad on a laptop. This, to me, is akin to attaching a steering wheel to the top of a gearshift, or some other bizarre composite, but I’ll have to withhold judgement until I try one, even though it sounds like the Industrial Design equivalent of a Turducken.

The point is, complex gestural movements, involving more than a simple click (or double click) on a pointing device have pretty much been adopted by all computer makers, with at least an accepted level of complexity, although for the most part, a user can work up to that complexity, by moving from simple gestures to more complex ones over time, hence the idea of a short cut to a function instead of making  that function only executable from a complex gesture.

As a friend of my parents puts it, ‘Anything worth doing is worth overdoing’. I shouldn’t be surprised by what I thought was certainly a post on The Onion, but no, it was serious, and it was the Open Office Consortium who was proposing this mouse:

Holy Roller, Batman! This thing is certainly the other end of the spectrum from the mice we’ve seen up until this point, at least for the general public. (More complicated mice like this one have shown up on engineering stations, imaging systems, and countless other vertical application machinery).

If you look carefully (click on the photo to see it a bit larger), you’ll see that it has no fewer than 16 buttons and a roller that are visible. The description actually boasts that it has “18 programmable mouse buttons with double-click functionality” and “Three different button modes: Key, Keypress, and Macro”.  They even show a comparison chart comparing it to other mice on the market.

While I won’t comment on the oddness of an open software consortium designing hardware (or rather, having a designer design some for them), I have to admit that this initial paragraph, on the page ‘About the OpenOfficeMouse, caught my attention:

The OpenOfficeMouse was designed with the goal of being the best and most useful mouse the digital world has seen to date. Initially inspired by the keyboards on the Treo smartphones, it was designed by a game designer who was annoyed with the paltry number of buttons available on high-end gaming mice. Because gaming mice have historically been designed primarily for FPS¹ games, not MMO² and RTS³ games, they do not possess sufficient buttons for the dozens of commands, actions and spells that are required in games that make heavy use of icon bars and pull-down menus. After discovering that the available World of Warcraft mice were nothing more than regular two-button mice decorated with orcs, dwarves, and Night elves, the idea of the WarMouse was born. After much experimentation, it was determined that 16 buttons divided into two 8-button halves were the maximum number of buttons that could be efficiently used by feel alone. However, in the process of design and development, it quickly became apparent that many non-gaming applications would also benefit from having dozens of commands accessible directly from the mouse, especially applications with nested pull-down menus and hotkey combinations. OpenOffice.org was selected as the ideal application suite around which to design this application mouse because the usage tracking feature of OpenOffice.org 3.1 permitted the assignment of application commands to mouse buttons based on the data gathered from more than 600 million actual mouse and keystroke commands enacted by users. The OpenOfficeMouse team are advocates of Free and Open Source Software, which is why we are members of the OpenOffice.org community and have created custom profiles for other OSS applications such as Mozilla Firefox, Mozilla Thunderbird, The Battle for Wesnoth, D-Fend Reloaded, and The Gnu Image Manipulation Program.

So what we have here is a design for a gaming mouse, now re-purposed for general purpose applications (like browsing the web, email, and the Open/MS Office suite of word processing, spreadsheets and presentations).

Maybe it’s because I don’t do much gaming (and by ‘don’t do much’,  I mean hardly at all),  maybe it’s because I come from the ‘make it for a klutz’ school of UI design because I’m not very coordinated, but I think that this approach to User Interface or Industrial Design will never have much of a following. It wasn’t lost on me that I had to look up some of those acronyms to provide the footnotes here. Sure, there will always be some small group of people who want more and more direct power over their work from their hardware, and they often buy the most baroque control devices. For me, however, the whole idea of taking a piece of gaming hardware and repurposing it to work on everyday tasks is about as appealing as using a flight simulator to do your banking. Sure, you might get more fine maneuverability during a funds transfer (if you could master the controls), but it hardly seems worth the effort. Maybe that’s the key here: Having a competitive advantage from  your hardware and your skill with it during a game is far more important and more likely to have you make that effort than being a whiz at moving from cell to cell in your spreadsheet or even triggering one of the 100 or so macros you’ve created for your word processing tasks.

So to the OpenOfficeMouse folks, I say, good luck, but forget about selling one of those mice to me. Now, we start seeing the ‘direct to brain’ controllers, where I don’t have involve my arms and fingers at all with typing and gesturing on the screen but just think where I want to the cursor to go, I’ll be more interested. That would be the 0 button mouse, which I think I’m going to have to address in some future post.

I particularly liked the monstrously bad user interface and industrial design, and how it mimics old ‘rotary’ phones.

Eventually, the UK did standardize on a plug, but it ended up being the largest and bulkiest plug you’ve ever seen, including a fuse inside the plug itself. It was almost as if the Brits only begrudgingly accepted this newfangled invention of electricity, and decided that they were going to only allow you to use it if you had the proper muscle power to hold and manage these huge electrical plugs. The notion that you’d carry around an electrical device that needed to be plugged in hadn’t even been entered into the equation.

When people started carrying around laptops, the large size of UK plugs became even more troublesome. In the case of a Macbook Air, the UK plug was several times thicker than the laptop itself. Enter a clever designer and an ingenious design to the rescue. This video shows how a folding approach not only allows one to carry around a slim plug and unfold it when needed, but actually creates a new, secondary standard, where all of the prongs are still accessible but in a folded state, so a whole bunch of these folded plugs can be plugged into an adapter, which is plugged into the wall in its unfolded state (or perhaps, a new sort of power strip, built for the folded prong arrangement). To see what I mean, have a look at the video. It shows that sometimes good industrial design can almost work miracles. Lets hope this idea catches on:

I’m glad that great minds like Fabricant’s are working on solving Society’s ills.

Rather than try to write something profound (at least on the surface), I thought I’d start writing in this blog again with an observation about today’s date, at least in terms of the History of Computer Science:

On today’s date, HAL, the computer from 2001: A Space Odyssey turns 17 year’s old, as the movie says:

I am a HAL 9000 computer, Production Number 3. I became operational at the HAL Plant in Urbana, Illinois, on January 12, 1992. My instructor was Mr. Langley, and he taught me to sing a song. If you’d like to hear it I can sing it for you. It’s called ‘Daisy’

I always thought that the production number being 3 was intriguing. It couldn’t be a nod to Windows 3.1, the first successful version of that software because the book was written decades before that appeared on the scene.  What happened to production numbers 1 and 2? (It was mentioned, I seem to remember, that HAL 1000-8000 series had problems of some sort and were “not entirely successful”).

The idea of a mutinous, murderous central computer is a theme that is still alive and well in movies today: the movie WALL-E has one of these, the Autopilot computer that looks a bit like HAL’s red eye inserted into an old fashioned ship’s wheel (and the voice actor who gets to do it, in the credits is, wait for it… Macintalk, the speech synthesis software on the Macintosh (!))

Needless to say, in this year, 2009, there is no HAL 9000, no similar level of Artificial Intelligence, no ships to Jupiter, and no permanent base on the moon. We do have a space station, but Pan Am airlines never survived to create that beautiful space liner, and although there is talk of private citizens doing flights, it is Virgin Airlines that is going to be doing that.

I’ve been a little better about my personal blog, Loud Murmurs, but now that my contract at IBM is over, I have a little spare time. That means not only redesigning this web site (yes, look for exciting new changes in the coming days and weeks) but also starting to write in this blog once again. I will make another effort at getting my presentation of roughly a year ago up online (and fortunately, or unfortunately, depending on your point of view, it’s still just as valid today as it was then).

What you can’t see is that I have a new admin interface which I really, really like. It’s the Fluency Admin by Dean J, Robinson.Tell you what, I’ll put in a screenshot of the screen I’m writing this on:

A recent paper by Michael Schmitz, a student at Saarland University (a fascinating institution near the borders of Germany, France, Luxembourg and Belgium), surveys several different user interfaces from science fiction movies throughout film history. Human Computer Interaction in Science Fiction Movies cites several films, including Metropolis, Johnny Mnemonic, The Matrix, Logan’s Run, Forbidden Planet, Gattaca, Minority Report, Total Recall, Star Trek: The Next Generation (one of the movies, I assume), X-Men, 2001: A Space Odyssey, Dark Star, the 2002 remake of The Time Machine, and even Galaxy Quest.

It is intriguing the way Schmitz has organized the UIs he is taking note of:

The movie clips in the main section of his survey are categorized according to their area of real-life applications and research:
Neuro Technology: Technologies that connect to brains are introduced here.
Identification: Electronical identification of individuals
Displays: Various kinds of displays as an output medium
Speech: Including speech synthesis and recognition as well as intelligent assistants/avatars as special subgroup.
Other I/O technologies: All technologies that are more specialised and that were difficult to categorize according to the fields above, for example gesture recognition or tangible user interfaces

I think these categories arose because of the scenes that he chose to include. There are perhaps some other movies that were not chosen that may have brought in other areas of classification (for instance, Tron, Blade Runner, Serenity, any of the Star Wars films, The Fifth Element, Ghost in the Shell, any of the James Bond films, 12 Monkeys or Contact).

The fact is, the UIs that we often see in the movies are not always accurate because they aren’t necessarily built for good usability, but instead for good dramatic effect. Sure, Tom Cruise could have done some of his research in Minority Report using a mouse and an LCD screen, but it was so much more dramatic for him to don VR gloves, and perform the exhausting 3D manipulation in virtual space in front of him. Even everyday, mundane events like receiving an email get full-screen 3D animations in the movie Disclosure with Michael Douglas and Demi Moore in 1994.

Nevertheless, movies do have a way of placing imagery and expectations in the mind of many movie viewers. In fact, because a surprisingly large number of people can’t tell the difference between movies and reality, some of these UI inventions may be adopted sooner after they are developed for real, everyday use. What James Bond sees on his computer screen may very well be built by some small startup determined to bring just such a tool to market, at whatever price the public wants to pay. They know they want it, though, because they saw it work just fine at the theatre.

Set for English: (lower case)

Those same keys set for Photoshop:

Wait, what it if was set for the game Quake?

On top of this extraordinary keyboard, there is also a brilliant, if less ergonomically spot-on mouse:

In addition to these bits of Industrial design (and geek fancy-tickling), Mr. Lebedev, who along with his studio, is in Moscow, also writes a sort of blog, although it is not an RSS feed (but I wish he would make it so) called Mandership. According to Mr. Lebedev, it’s been a project since 1997 (which would account for it’s pre-RSS structure). I also notice that the most recent entry is in 2006. I hope he does another few this year. Nearly all of the posts I read were gems of clear thinking about design, the way the world works, and the way people think. No wonder he and his compatriots at his studio keep coming up with such brilliant products, even if some of them are harder to bring out of the concept stage.

I thought that 9 by 9 might be the limit for icon size, and that this was so small that one colour (or black and white) might also be a rule. Although they are slightly larger at 16 by 16, the free set of icons from FamFamFam called “Silk Icons” are actually in colour. There are 700 of them and many of them are quite good. Let’s hope that a lot of people use them, as they provide some good examples of good icons on the net. I’m particularly impressed with and .

Nevertheless, I believe that when you get below 16 by 16, an interface element probably is for display only. The only exception might be the arrows you see on heirarchical menus, and even then it’s connected to a much larger item (the menu).

Update: My friend Jan has noted that these icons show up as not much more than ‘dots’ on his high-resolution laptop screen. I forgot to take into account that as screen resoloutions go up (and more devices are miniaturized), one has to take this into account. So, I’m thinking that these days the smallest one can get in a UI element is probably closer to the teens or near 20 pixels for any sort of meaningful information. Unless you consider a dot meaningful, which it is at the ending of a sentence, like this one.