Industrial UX: Sunlight Susceptible Screens

Created by Callum Coe - Published August 21, 2017


 callum-coe @ivolvecallum

blog 22

How do engineers ensure interface usability in harshly illuminated natural environments? Explore one of the challenges faced by the industry.

Experience

I want you to imagine a phenomenal new piece of software, running on a purpose built ruggedised touchscreen platform. Both software and hardware have been carefully designed and developed with months of client and user consultation. The complete product has been prototyped and tested in a variety of simulated and real-world scenarios. Excitement and anticipation are high as the solution is deployed to a fleet of heavy machinery!

Now imagine a beautiful Australian sunset (above) piercing the rear window of the cab of one of these machines, and bathing the screen in searing orange light. The operator in that machine, well, they cannot see a god damn thing!

'Only experience can prepare you for the harshness of real-world environments in industry.'

Hardware

Forgive me for this brief tangent away from UX, but I need to provide you with additional context to our problem.

Outside of industrial environments, sunlight readability it not so pervasive a problem. This is not due to reduced rates of exposure, but rather the relative ease at which any problem may be solved at the user level.
If, for example, you were to experience a sunlight problem on your mobile device, you could physically move yourself or your device to alleviate it.
Similarly, if a desktop based user experienced a problem with sunlight they could simply adjust their screen position or lower a blind.

Unfortunately this is not the case for many industrial users, where devices are typically installed adhering to stringent operational and safety guidelines. In particular, on board heavy machinery, there is very limited space to install a screen where it will not interfere with visibility out of the cabin. This inflexibility in relative positioning of user and device, and inability to otherwise improve the environment proves a unique challenge for UX in industry.

Additionally, if outdoor use is considered by developers, the usual solution is to point to a device with high brightness LCD or OLED panel.
Again unfortunately, in comparison to the consumer market, when it comes to proven industrial grade devices there are far fewer options available. There are in fact many unique requirements for industrial environments that preclude the use of otherwise outstanding commercial devices. But I have digressed, and we may discuss these at a later time. The point is that rarely are we able to solve sunlight issues with hardware alone.

Brightness versus Luminance

The first thing we need to understand is the difference between brightness and luminance. Brightness is our personal qualitative perception of the strength of a light source. Whereas luminance is an actual quantitative description of how much light a surface emits or reflects. It is measured by the SI unit of candela per square metre (cd/m2). NB: 1 nit is equivalent to 1 cd/m2.

For some context, an iPhone 7 has a luminance of up to 700 cd/m2, while those huge LED billboards used for roadside advertising can hit up to 10,000 cd/m2!
I’m hoping that from your own experience with the above two examples, it is apparent that a display of higher luminance is easier to read in direct sunlight. Therefore the solution to our sun susceptibility problem seems simple; just install a screen with higher luminance! Right?
Sadly we must face the fact that this isn’t often feasible for industrial environments. The amazing panels used in phones are not nearly as prolific in larger sizes, nor do they meet our other industrial requirements. Additionaly, the higher we push luminance, the higher we push power consumption, and thermal output.

'We‘ll run out of power, or burn our user, long before we win a war with the sun!'

Jokes aside, the idea itself is not wrong. All we are actually trying to achieve is a noticeable difference in luminance between our interface and that of the sun, reflected on the screen.

Contrast and Reflections

Sunlight readability is governed by two things; reflections and glare. Mirror-like reflections (patterned) are awful to deal with, because the sun can be directly reflected into a users eyes.
Fortunately modern day matte panels use a combination of materials, manufacturing techniques and coatings to effectively reduce reflectivity.
However, despite combatting patterned reflections, they are certainly not immune to diffuse reflection. Any interface will fade into nothingness behind a sunlight bathed layer of dust and grime on the surface of the screen.

screen

Diffuse reflections on an industrial device (note: off-axis angle).

'Large diffuse reflections on a panel disable users by reducing the contrast and colour of the interface.'

The most effective way of providing a sun tolerant UX is to markedly increase the relative contrast of interface objects with respect to their backgrounds. The below steps detail how we can improve legibility in sunlight:

  1. Prioritise. Pick the most important elements in your interface and give them focus, sacrifice whatever remains to the sun gods.
  2. Increase Luminance. Once you’ve chosen the most important elements in the UI, increase their luminance. When you’re done, decrease the luminance of their backgrounds.
    NB: It is physiologically more effective to use a bright object on a dark background, than a dark object on a bright background.
  3. Refine Colours. White has the highest luminance (surprise!), black has the lowest (another surprise!). If you want to use colour — yellow, green, and cyan have highest luminance on most LCDs. Green is great as our eyes are more sensitive to it than any other colours. Avoid blues. In particular do not use blues on a black background. Look, just don’t use blue.
    Also be wary that placing opponent colours next to or on top of each other will cause an unpleasant distraction.
  4. Embrace Edges. Perceived contrast is highest when there is a distinct change across boundaries. So get rid of shadows, fades, and all your gradients!
  5. Size Matters. The bigger and bolder, the better. Make important things larger, and give them more space.
  6. Test! Get the hardware and software into the world early and often. Iterate quickly to improve where you can. Be smart, find what works best for majority of cases
  7. Accept your fate. You’ll never solve the problem entirely.
With appropriate attention given to the above points, engineers are positioned to deliver a far more robust UX than without consideration. Investing additional time will allow you to better balance form vs function, with support for seperate modes to manage normal daytime glare versus more acute sun times. These modes might be user selectable, but could also be auto-enabled based on available sensor data.

Glare

We’ve covered a lot, and it’s all good stuff, but before I can let you go we need to discuss one last thing.

'It’s not the fall that kills you — it’s the glare.'

Glare is caused by an distinct unbalanced ratio between the luminance of the task at hand (your interface) and another source (the environment). All of us have differing tolerances for glare, and a threshold at which we experience sufficient discomfort to distract or disable us from using a screen. The reason I’ve avoided discussing this is that there isn’t a great deal we can do to combat glare.

Industrial environments add glare on top of what is typically experienced outside. We might have large bodies of water or metal which act as strong reflectors, as well as high energy spotlights and LED lamps. Higher background luminance is also common in construction and mining simply due to the ambient reflectance of the terrain.

During the day, we expect users to be wearing safety glasses with a darkening and/or reflective coating. These features will mitigate the majority of diffuse glare but also reduce the perceived contrast of our interface on screen. Luckily we’ve already addressed contrast above!

At night, a new problem emerges. Our high contrast and ultra-bright daytime interface might now itself become a spot source of glare. This is a safety concern, as it can distract or disable operators from seeing other interfaces in-cab, as well as from being able to see the world outside of the cab. We must manage this by reducing the panel luminance, and importantly adjusting individual colour hues and saturations in the UI to maintain relative contrast.

Final Thoughts

Did you read your way down here, or skip for the highlights? It doesn’t matter, here are the key points to take away!

  • Buy the brightest, highest contrast, matte-est panel you can find!
  • Hardware alone is not sufficient... and do not expect to be able to control the environment.
  • Design your UI with high luminance contrast.
  • Build in user selectable modes for regular and extreme sun.
  • Test your UI in real-world environments, early and often.

If you’re new to UX or industry, I hope that this article provided you with an insight into one of our daily challenges. I’d love to hear your thoughts and experiences!

Follow Callum on twitter here

Follow iVolve on LinkedIn here

Follow iVolve on twitter here