Squares are good: Icon design standards for interoperability

The Android UI Icon Design Guidelines are worth studying as a model for accessible web design in general, not just mobile phone development. Many details of the icon development process have been thought through from the point of the Supporting Multiple Screens portion of the Android standards, which helps ensure interoperability across multiple devices.

Before reading further, repeat the mantra that “Squares are good” several times. That idea boils down the screen design method used for displaying a set of tappable icons that can be interchanged easily. Despite all of its other issues, Microsoft’s Windows Phone UI has gotten generally good reviews for design largely based on its matrix approach to the interface. Some of the ideas behind matrix interfaces can be used more generally to achieve minimalist web designs that are highly robust and, as a side effect, easier to make compliant with some aspects of Section 508. If your page is essentially a matrix, tab control is easy to adjust so that readers who rely on screen readers and text to speech assistive devices can have a rapid scan of your content.

Lets consider something as basic as icon size. For minimalist site design intended for viewing on a regular computer monitor or laptop system you could consider adopting the Android HDPI (High Dots Per Inch, a measure of screen density) size standards.

Icon Type Standard Asset Sizes (in Pixels), for
Generalized Screen Densities
Low density screen (ldpi) Medium density screen (mdpi) High density screen (hdpi)
Launcher 36 x 36 px 48 x 48 px 72 x 72 px
Menu 36 x 36 px 48 x 48 px 72 x 72 px
Status Bar (Android 2.3 and later) 12w x 19h px

(preferred, width may vary)
16w x 25h px

(preferred, width may vary)
24w x 38h px

(preferred, width may vary)
Status Bar (Android 2.2 and below) 19 x 19 px 25 x 25 px 38 x 38 px
Tab 24 x 24 px 32 x 32 px 48 x 48 px
Dialog 24 x 24 px 32 x 32 px 48 x 48 px
List View 24 x 24 px 32 x 32 px 48 x 48 px

Don’t forget that the Android Market also requires a 512×512 version of your icon if it is intended as the primary application descriptor. That might be a good size for something critical to your main website, such as a logo. Since all the icons may need to scale to all three of the basic interface sizes, you will need to create multiple icon sets. This puts a premium on designs that scale downward gracefully.

Print Friendly

Leave a Reply

Your email address will not be published. Required fields are marked *