index.md 12KB
title: Projectors don’t lie.
url: https://medium.com/salesforce-ux/projectors-dont-lie-b85ef628b04
hash_url: ffe10a872d
If you’re a designer at a tech company, you’re probably equipped with state-of-the-art pixel-pushing technology. I’m typing this now on a MacBook Pro with Retina display, where I use Sketch and Adobe Creative Suite (I’m still clinging to Fireworks like a life preserver) for all my design tasks. Our team’s mockups look beautiful and crisp on my Retina screen’s vast landscape of perfect pixels. That is, of course, until we congregate in a meeting room, plug a VGA adapter into my laptop, and see these designs projected onto a fuzzy, washed-out, low-resolution screen. The worst!
How many times have you been in a meeting where a design looked strange but was waved away with “Oh, that’s just the projector”? I personally have lost count. Just yesterday, sitting eight feet away from a fairly high-quality projector screen, I felt like I was at the optometrist’s office getting my annual eye exam. Surely, it’s the projector’s fault, right? Yes and no.
In my experience, projectors don’t lie. They just exaggerate a little. Their screen resolutions, color matching, and general quality vary wildly, but so do those of the devices with which people view your website. Projectors’ tiny exaggerations can help you identify potential issues with your designs before users encounter them. When projecting a user interface onto a big screen, you probably run into the same two problems over and over again. Don’t dismiss them! For each of these problems, there’s a solution that can improve the legibility and usability of your UI.
Problem 1: All the colors are washed out and it’s difficult to see some stuff!
What you might say: Don’t worry, it’s pretty clear on my laptop.
What’s actually going on: You’re right, the contrast is higher on your Mac! But if you’re having trouble differentiating elements on the projector screen, chances are many of your users with vision impairments or lower quality monitors will also struggle with this. They don’t have all the context you do, so they won’t know how to fill in the gaps when they can’t see everything on the screen.
What to do next: Ask yourself, are the main calls to action still prominent on the projector screen? Can you read all the text on the page, even the text that you consider less important? If your answer is “sort of,” amp up your color contrast. Try going for extreme clarity and then slowly dialing it back to a solution that has great contrast and also meets your aesthetic goals. Run your foreground and background colors through WebAIM’s Color Contrast Checker and ensure that they meet WCAG 2.0 AA standards (WCAG = Web Content Accessibility Guidelines). The contrast ratio between text and background should be at least 4.5:1 for normal-sized text and 3:1 for large text. If you want to be extra sure everything reads well, test your design out in grayscale and with color blindness emulators. Photoshop has color blindness filters built into its “View > Proof Setup” menu.
Problem 2: The functional prototype looks bloated! Everything is enormous and smushed together!
What you might say: Oh, this screen resolution is really low. Let me just press Command-Minus to make this look the way it should.
What’s actually going on: Your website isn’t responsive enough and you should consider a wider variety of viewport sizes. Many of your users will be looking at it with a lower screen resolution. Multi-taskers with larger monitors may have several windows open on their screen at once and will squeeze your site as small as they can in order to interact with your content while doing a bunch of other things. For example, I frequently send my laptop into fan overdrive mode by watching Hulu while editing large PNGs. It’s a minor inconvenience to have to switch to Hulu’s “pop-out” player in order to scale the video down to be 1/3rd the width of my laptop screen. I’d love to see the regular video pages scale down gracefully instead of introducing a horizontal scroll bar. But I digress!
What to do next: Go on site visits, set up website analytics, and/or send out user surveys to learn more about your user bases’ most common screen resolutions. If you can’t get information about your users specifically, read more general studies like “Best Screen Resolution to Design Websites.” You can try these out by adjusting your computer’s display settings or using Device Mode in Google Chrome’s Developer Tools to emulate specific dimensions, pixel ratios, etc.
Once you have a better idea of the variety of screen sizes at play, adjust your designs accordingly. You might want to try a responsive layout, which takes advantage of relative measurements as much as possible. Consider giving the user more control and allowing secondary panels to be collapsible. In a more structured layout, you can shave off pixels by adjusting padding and reevaluating the sizes you’ve chosen for fixed-width elements. For example, one of my latest projects, the Lightning App Builder, is a WYSIWYG editor with fixed left and right sidebars. Looking at it on a projector screen helped my team realize that the sidebars were a lot wider than they needed to be. We trimmed them down by 80 pixels to make more room for the canvas in the middle. We also made several color adjustments based on projector testing alone.
The Projector Test is my favorite “gut check” manual UI test, and I encourage you to use it early, often, and especially when ironing out final visual specs. It doesn’t substitute for testing out a functional version of your site in a variety of environments — browsers, form factors, screen resolutions, operating systems, screen orientations, screen readers, etc. — but it’s a good place to start. Embrace your conference room’s projector and challenge yourself to make your designs look stellar on even the fuzziest, most washed-out of screens.