How to design a list
UX design is nothing but two-dimensional display of text and graphics design which evolves over over time. Which means UX designer who can’t do graphic design is about as useful as a one-legged man at a mule kicking contest.*
The effective use of typography, layout, color, and graphics (i.e. “graphic design”) creates a hierarchy which guides a reader through a book or magazine. The basic principles of graphic design have evolved over millennia, having first been used on cave walls, then marble monuments, papyrus, parchment, and eventually paper.
KINDLE eREADER HOME SCREEN
My work‡ on the Kindle eReader home screen is a good example of how applying some basic typographic design principles can improve the visual appearance and usability of a feature and, if you’re lucky, actually make development easier.
The design of the original Kindle Touch home screen had a lot of issues:
Book titles were limited to approximately 45 characters. Research showed that 57% of all book titles were truncated due to character limits.
Author names, which were set on the same row as book titles, could be as short as 16 characters.
Labels identified different content types such as magazines, PDFs, newspapers, and the like. Labels were set on the same row as book titles and author names and were limited to approximately six characters.
Rows weren’t very tall. This made it difficult to tap a specific item on the newly-introduced touch interface.
When I redesigned the Home screen I placed labels, titles, author names, and amount-read indicators on separate lines. Though the new Home screen displayed seven items rather than eight, it had the following benefits:
The number of truncated book titles dropped to 32%. Author names and labels were no longer truncated.
Placing each item on its own row made it much easier to differentiate between label, title, and author.
Tap targets were larger, increasing selection accuracy.
The design could easily support future localization requirements for Kindles sold outside English-speaking markets.
The new design wasn’t perfect, of course. The amount-read indicators and title dividers created some busy sets of parallel lines. Kindle eReaders at the time had low-resolution (160 pixels/inch), and 2-bit grayscale displays which also limited design options.
But applying basic graphic design principles to the Home screen increased legibility, usability, and simplified development. Not bad for some centuries-old print techniques.
Footnotes to this section
* I’ve always wanted to use that simile.
‡ I actually led a large team of talented designers while at Amazon. Multiple people contributed to the development of the Kindle eReader touch UX. But, for this post, I’m going to claim the work as mine, all mine!