The incredible shrinking screen

How do you fit the same UI architecture into the largest full-screen displays and the smallest quarter-panels? Xerox needed a common user experience to enable transfer of learning while maintaining a usable touch-target size and readable font.

10-inch screen, 4:3 aspect ratio

Through years of research, our design team learned which 20 percent of the features are used 80 percent of the time. We exposed those 20 percent on the first tab. Although the layout is ideal when using the largest displays, this always wasn't possible.

7-inch, 16:9 aspect ratio

Many of the office multi-function machines used a panel half that size. We found through testing that maintaining the width of buttons was more important than the height.

Some features (such as Reduce/Enlarge) were collapsed into a secondary screen but still gave feedback on current settings.

8-inch screen, 4:3 aspect ratio

A higher resolution and lower cost led to the 7-inch full panel. The button target sizes needed adjustment to appear the same to end users.

Lower cost 4:3 panel

More of the features are now collapsed into secondary buttons.

Quarter panel

Lowest cost desktop machines also needed to support multiple features. All the features are now collapsed to secondary screens but they maintain the same UI architecture.