davidbgk
/
larlet-fr-david-cache

title: Projectors don’t lie.
url: https://medium.com/salesforce-ux/projectors-dont-lie-b85ef628b04
hash_url: ffe10a872d4fd33d7fc24b4cb38528db

<div class="section-inner sectionLayout--insetColumn"><p name="c5f2" id="c5f2" class="graf graf--p graf-after--h2">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. <strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">The worst!</em></strong></p><figure name="7810" id="7810" class="graf graf--figure graf--layoutInsetLeft graf-after--p"><figcaption class="imageCaption">My team spending the first half of a meeting adjusting the projector settings</figcaption></figure><p name="9665" id="9665" class="graf graf--p graf-after--figure">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.</p><p name="4174" id="4174" class="graf graf--p graf-after--p">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.</p><h3 name="3d30" id="3d30" class="graf graf--h3 graf-after--p"><strong class="markup--strong markup--h3-strong">Problem 1:</strong> All the colors are washed out and it’s difficult to see some stuff!</h3><p name="e199" id="e199" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">What you might say:</strong> Don’t worry, it’s pretty clear on my laptop.</p><p name="2687" id="2687" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">What’s actually going on:</strong> 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.</p><p name="1651" id="1651" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">What to do next: </strong>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 <a href="http://webaim.org/resources/contrastchecker/" data-href="http://webaim.org/resources/contrastchecker/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">WebAIM’s Color Contrast Checker</a> and ensure that they meet <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" data-href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">WCAG 2.0 AA standards</a> (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 &gt; Proof Setup” menu.</p><figure name="edae" id="edae" class="graf graf--figure graf-after--p graf--trailing"><figcaption class="imageCaption">Some examples of large text and normal-sized text at different shades of grey on a white background. Alas, depending on how you’re viewing this, the large text examples may not be large at all!</figcaption></figure></div>

<div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="402d" id="402d" class="graf graf--h3 graf--leading"><strong class="markup--strong markup--h3-strong">Problem 2:</strong> The functional prototype looks bloated! Everything is <em class="markup--em markup--h3-em">enormous and smushed together!</em></h3><p name="2f48" id="2f48" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">What you might say:</strong> Oh, this screen resolution is really low. Let me just press Command-Minus to make this look the way it should.</p><p name="df9c" id="df9c" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">What’s actually going on:</strong> 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!</p><p name="52ab" id="52ab" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">What to do next:</strong> 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 “<a href="http://www.hobo-web.co.uk/best-screen-size/" data-href="http://www.hobo-web.co.uk/best-screen-size/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Best Screen Resolution to Design Websites</a>.” You can try these out by adjusting your computer’s display settings or using <a href="https://developer.chrome.com/devtools/docs/device-mode" data-href="https://developer.chrome.com/devtools/docs/device-mode" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Device Mode</a> in Google Chrome’s Developer Tools to emulate specific dimensions, pixel ratios, etc.</p><figure name="eb80" id="eb80" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 544px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 77.7%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*jlRVYg4U_WpMZ8BlUtcSfQ.png" data-width="1304" data-height="1013" data-action="zoom" data-action-value="1*jlRVYg4U_WpMZ8BlUtcSfQ.png"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*jlRVYg4U_WpMZ8BlUtcSfQ.png?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1600/1*jlRVYg4U_WpMZ8BlUtcSfQ.png"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1600/1*jlRVYg4U_WpMZ8BlUtcSfQ.png"></noscript></div></div><figcaption class="imageCaption">In Google Chrome Developer Tools, you can easily type in pixel dimensions with which to view your website. In this example, I’m viewing our <a href="http://sfdc-styleguide.herokuapp.com" data-href="http://sfdc-styleguide.herokuapp.com" class="markup--anchor markup--figure-anchor" rel="nofollow noopener" target="_blank">Style Guide</a> at 800 x 600.</figcaption></figure><p name="fa58" id="fa58" class="graf graf--p graf-after--figure">Once you have a better idea of the variety of screen sizes at play, adjust your designs accordingly. You might want to try a <a href="https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/" data-href="https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">responsive layout</a>, 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 <a href="https://www.youtube.com/watch?v=8WsU0_ghZ_Q" data-href="https://www.youtube.com/watch?v=8WsU0_ghZ_Q" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Lightning App Builder</a>, 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.</p><figure name="1ec1" id="1ec1" class="graf graf--figure graf-after--p graf--trailing"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 430px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 61.4%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*AW9JScNbHQf5jSKXONN9gw.png" data-width="1304" data-height="801" data-action="zoom" data-action-value="1*AW9JScNbHQf5jSKXONN9gw.png"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*AW9JScNbHQf5jSKXONN9gw.png?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1600/1*AW9JScNbHQf5jSKXONN9gw.png"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1600/1*AW9JScNbHQf5jSKXONN9gw.png"></noscript></div></div><figcaption class="imageCaption">We reduced the Lightning App Builder’s total sidebar width by 80 pixels after seeing how much space the sidebars took up on a smaller projector screen. Users can toggle between “100% View” and “Fit to View” to adjust how large the canvas appears in the builder’s interface.</figcaption></figure></div></div>
<div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="e7bb" id="e7bb" class="graf graf--p graf--leading graf--trailing">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.</p></div></div>