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.

Accessibility

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.

“Invisible” buttons as patented by Apple

Patently Apple reported yesterday on a recently granted patent for invisible backside buttons and slider controls. The patent’s (8,436,816) abstract:

An input device includes a deflection based capacitive sensing input. Deflection of a metal frame of the input device causes a change in capacitance that is used to control a function of an electrical device. The input appears selectively visible because it is made of the same material as the housing it is contained in and because it is selectively backlit through tiny holes.

Patent figure.
A figure from the patent showing example media controls in the palm-rest area of a laptop computer. (Credit Apple & U.S. Patent & Trademark Office)

Apple has been using indicator lights shining through small micro-perforations in several devices, including their Bluetooth keyboard. The result is a very elegant design unmarred by apparent through-holes for LEDs. This patent represents a way to also allow for user input through touch controls that are selectively illuminated.

Figure showing the keyboard's micro-perforation power indicator light.
Apple Bluetooth keyboard with indicator light off and on. (Credit: Flickr user DeclanTM; CC BY 2.0)

Accessibility

The buttons are certainly inaccessible to everyone when they are in their invisible state—that is the point—that the buttons will disappear into the case of the device when they are not needed.

When active or lit up however, the buttons remain “invisible” or imperceptible to those who cannot see or who find themselves in circumstances where they cannot look at the device (say while driving). This would make a non-personal device with such technology inaccessible to these users. On a personal device, the buttons may still be usable if the user can find them using other landmarks, such as the distance from a corner, edge or other feature of the device.

As another example of tactilely imperceptible controls, I have a laptop with a capacitive, light-up touch area with non-tactile media and volume controls. When they aren’t lit up, I cannot very easily find the control I want. I often end up touching several of them trying to find the mute button for example. Having some texture would make it much easier to find the control I need.