Low vision with the old and new iOS icons

Last week, Apple announced the largest user interface overhaul to iOS since the iPhone was first introduced (gallery and basic description of iOS 7 features). A number of posts and articles have been written recently comparing the new look versus the old and that of competitors.

In this post, I am going to take a different approach. I will not talk about the aesthetics, but instead about the accessibility to people with vision impairments. The flickr user nielsboey posted an excellent image comparing the icons for native applications in iOS 6 and iOS 7. With his permission, I have copied it here and made a blurred version to “simulate” low vision. Click on the links for a larger version.

Comparison of iOS 6 and 7 native application icons.
Regular icons.
Blurred comparison of iOS 6 and 7 native application icons.
Blurred icons.


To see some of the usability barriers one might have with low vision, blurring the display is a good test. Note that blurring is not a simulation of low vision. What a person with low vision might see varies depending upon the cause of their impairment.

There are other visual tests one can try. I used a Colour Blindness Simulator to look for egregious problems for people with color blindness. There was nothing particularly problematic with either the old or new icons.

Some improved icons

Blurred Camera icons.

Blurred Safari browser icons.

Blurred Contacts icons.

Several of the new icons (on the right) have improved for people with low or blurred vision.

For example:

  • The camera app icon now takes the shape of a traditional camera rather than just being an image of the circular lens on iOS devices. The camera shape can be made out more easily as a camera than a dark circle.
  • The Contacts app icon has been improved in iOS 7 because the silhouette of man on is much larger even though the contrast is somewhat decreased from that of the previous version.
  • The new Safari mobile browser icon is a little easier to find simply because it is a blue circle that looks like a compass rather that just a rounded rectangular blue field with small points or arrows.

Some old icons were better

Blurred compass icons.Blurred calendar icons.There are also examples of the new icons (right) being worse for people with low vision.

  • The Compass app icon used to be a light-colored compass face on a darker background. The new version is a line drawing of a compass on a dark background. The lines on the icon are so thin that they are difficult to see when blurred. The icon looks like a black square with rounded corners.
  • The new calendar icon uses a font with a much thinner weight or stroke width. While one can perhaps make it out while blurred, the old calendar icon, with a much heavier font, is much easier to read.

There is a current design trend towards fonts with very light weights and thin strokes. This is also apparent in icons that are simple line drawings with very thin lines. This trend has become possible now because screens on mobile devices are being made with very high resolutions. Thin lines and very light fonts are much easier to display at high resolutions. At lower resolutions, such thin lines would become larger and more block-like. The thin strokes of current design trends are more difficult to see and read with low vision.

Tactus tactile touchscreen prototype

Touchscreens can be particularly challenging to use for people who cannot see. All they feel is a featureless surface. Accessibility can be provided through speech using a number of different strategies, but finding onscreen buttons through audio is slower than finding tactile buttons.

Photograph of tactile bumps.

An edge view of a tactile layer that could be used as part of a touchscreen. (From Tactus Technologies.)

Tactus Technologies has been developing a touchscreen with areas that can raise and lower from the surface. Sumi Das for CNET posted a video and hands-on impressions a couple days ago. The technology uses microfluidics. For the buttons to raise up, liquid in the system is put under pressure–the higher the pressure, the taller and firmer the keys. The current version only offers one arrangement of buttons.

Currently, the technology is limited in that it’s a fixed single array. You wouldn’t be able to use the Tactus keyboard in both portrait and landscape mode, for example. But the goal is to make the third generation of the product dynamic. “The vision that we had was not just to have a keyboard or a button technology, but really to make a fully dynamic surface,” says cofounder Micah Yairi, “So you can envision the entire surface being able to raise and lower depending on what the application is that’s driving it.”


The current generation only offers a single array of raised buttons that would work in only one orientation. This would be helpful for allowing users to find the keyboard tactilely, for example, but this would offer no support for other applications. The user cannot tactilely find buttons or other controls for other applications on a smartphone or tablet.

Future versions may fix this limitation. Ideally, the microfluidic tactile “pixels” will be small enough so that various tactile shapes can be made. To make seamless shapes, the tactile pixels should not have significant gaps between them, but this may be technically difficult to do. With gaps in between the tactile pixels, the device could still be useful to tactile exploration, but the layout would likely be constrained to a grid of bumps. An onscreen button might have a single bump associated with it (multiple separate bumps should not be used to designate a single large key because it would feel like several separate controls). The bumps would allow people to locate controls, but without different shapes, it would be more difficult to identify the controls from touch alone.

From the video, it also looks that the current technology is not well suited to braille. Spots small enough for braille would not be sharp or tall enough for effective reading. (For more information, Tiresias.org has a table of braille dimensions under different standards).