Hexagonal button grids

Spy shots have been floating around the web of a new honeycomb-style launch screen in Windows Mobile 6.5 (Engadget, PocketNow).

I haven't read anything official about why they chose this design, but I think it's a neat idea. Packing touch regions together in a hexagonal grid is more efficient (space-wise) than a rectangular grid, and it also makes the cells closer to circles, which means they're a better fit for our (roughly circular) fingers. Some of the descriptions I've seen call the honeycomb "finger-friendly," apparently for this reason.

Whether this benefit is provable, I don't know, but it would be interesting to test it experimentally. It probably doesn't make much difference when the regions are large like on this launch screen.

It might make a difference on a soft keyboard -- if you offset the rows you could expand the touch targets to hexagons and thus they'd be a better fit for fingers (to clarify a bit more technically: the Voronoi regions formed by a diamond grid like this are hexagons, ignoring the sides).

The iPhone keyboard offsets the rows (at least the first two), but the BlackBerry Storm doesn't.

Keyboards may be a bad example, though, because they have so many other constraints and features. And both Apple and RIM have more sophisticated algorithms going on behind the scenes for prediction, etc. (Apple has said that they actively change the size of the touch targets as you type -- see this video. The targets are shown as rectangles in this video, but that may or may not be how the software works.)

In general, though, if you ever have to pack a big array of touchscreen buttons together then the best pattern might be a hexagonal grid.

p.s. Here is an image of what I mean by a keyboard with hexagonal touch targets (created with this nifty graph paper generator and Skitch).

Comments

[Dan Wiersema]

Great article. I particularly like your honeycomb keyboard. Good stuff. :)

[Jackson]

The honeycomb grid looks really interesting from an interface standpoint; for example the blackberry keeps a very rigid grid system that forces your mind to read in rows and columns. Using a hexagonal design however breaks this and allows the user to see new groupings and patterns in diagonals. It would be very interesting to see how navigation might be improved by going with more organic patterns. It's kind of interesting looking back at old typewriters and seeing how many of them incorporated circular keys which, as you noted, fit the finger better ( http://site.xavier.edu/polt/typewriters/underwood5small.jpg ). I wonder why keys have progressed to be square from then? Hexagonal seems the logical move from circles because they pack tighter into a grid while still remaining roughly circular.