Easy on The Eyes: UX Design in Extreme Environments
If the design of a user interface is executed poorly, it will obviously lead to frustrated users. In some situations, consequences can be more dire, like the false missile warning on Hawaii in 2018. In this blog post, you’ll find out why UX design for extreme environments is important and learn some tips and tricks for your next project.
A while ago, I got involved as a designer at a company that puts oil pipes on the bottom of the ocean. The weak point of these oil pipes is where two pipes are welded together. These seams are welded several times aboard a ship, and are then scanned with ultrasonic sound. These scans are rendered in an user interface. An expert is checking these raw readouts, looking for air bubbles and other faults. Doing so in long shifts, on a ship at sea.
Obviously, I wanted to be sure that the interface was a fit for this high demanding environment. Besides making sure the experts make the right call each time, other challenges like eye strain and fatigue also need to be overcome. So, how do you limit eye strain and fatigue in task-focussed, high-stakes GUIs?
Preventing eye strain
Activities that require you to look at various details for a longer time will tire your eyes and its muscles. The result is eye strain: you have trouble to focus your vision, you feel pain in your eyes or get a headache. Unpleasant for sure, but if those details in the interface are critical and reading them correctly matters a lot, like UX design in extreme environments, it becomes problematic.
To relieve eye strain, you can do several things:
-
Use legible fonts in a larger size
Larger font sizes can be read better, even from a distance. It then also takes less effort for your eyes to follow and read lines in a paragraph. Choose a typeface that has a good legibility, like the Atkinson Hyperlegible font, which has a good readability by starkly differentiating similar letterforms. Larger font sizes could mean less content fits on a screen, especially on mobile devices, but that’s not necessarily a problem:
-
Prevent reading the whole screen
Primary details and components that help the person perform a task and make decisions should not be spread throughout the whole screen. Otherwise, this would mean eyes have to jump around the screen and refocus on each element to ‘read’ the screen. Decide what is important in each moment of the flow of your application, and put those items together.
-
Enough contrast
Make sure there is enough contrast between text and icons, and their background (but do not overdo it). If contrast is bad (grey text on lighter grey background for example), it’s hard to read and it makes the user squint and refocus, leading to eye strain. Putting the contrast on par with W3C’s AA-level standards even helps users with colorblindness, since good contrast is colorblind itself. So, take it up as a challenge: create more contrast while your inner graphic designer still loves the end result. There are several tools available for this, like LearnUI and Get Stark.
-
Away from the screen
Eye strain can also be prevented with how the application is used. Perhaps you do have some control over this. In that case, make sure there are frequent breaks from looking at any screen. Other options are preventing screen glare by reducing overhead lighting, and making sure there’s enough distance between the user and the screen for the correct viewing distance.
-
Dark mode:
Turning on dark mode could reduce the brightness of a screen while contrast can still be on W3C’s AA-level. So when using a screen for long hours it can definitely be more comfortable to switch to a darker interface, and it will reduce eye strain. Readability or reading errors are pretty similar for both light and dark mode as well. (It’s good to know that dark mode is not more beneficial than light mode during the night, when considering sleep health.)
Reducing cognitive load
Everything you see, hear, feel and think about while using a product will use some brain power to make sense of it, and to decide what to do next to finish the task. This is called the cognitive load. The higher the load, the more tiresome the task.
So, limiting this cognitive load can be beneficial for the application’s usability: a person can work longer with it, stay focused for longer, and make less mistakes.
Be aware that context has a big impact as well. Consider an application that will be used on a factory floor. The noise and distractions of the environment are adding to the cognitive load, before we even consider the use of the application. You have to design with that context in mind and do user tests in those conditions to verify of your solution is usable on that factory floor.
There are several ways to reduce cognitive load:
-
Familiar and intuitive interactions
Create a solution with predictable interactions and layouts. Many typical UI challenges have evolved into design patterns throughout the years. These familiar design patterns make an application obvious and intuitive in use, so less brain power wasted. Be aware that the domain you’re working in can have it own unique design patterns.
-
Reduce visual noise
Consider each screen a person will see and use to perform a task. Some items are crucial for completing that task while others are supportive or only for edge cases.
Create a hierarchy to show that difference (by using visual design principles for example). Take a step further by removing everything that is not important, or by moving it to another screen or slide-in. -
Simplify and remove ambiguity
Like reducing visual noise, you can reduce interactive noise as well. Show less information, reduce interactions and limit navigation steps. Hick’s Law states that the time it takes for a person to make a decision will increase with more (equally probable) options. So, limit those options.
And make sure the navigation is easy and requires little contemplation. Navigation is not where you want to do new and unexpected things in critical environments.
Simplifying does not have a minimal design. It is about taking away ambiguity. Use shorter and more to the point texts, and use everyday words that fit the domain you’re working in. Sometimes, an illustration or additional information is very helpful.
Icons can be hard to understand, so add labels. And make them more readable by adding meaning and contrast, so each is recognizable in a glance. A good example provided by MegDraws:
-
Offloading tasks:
Offloading tasks is taking it one step further. Let the application understand or remember details, or make a decision. Not asking for an input will limit the cognitive load of the person.
Design against fatigue
Eye strain and limited cognitive load are specific symptoms of fatigue. A person is tired, cannot concentrate, and starts making mistakes. The right UX design in extreme environments can make huge differences. The suggestions mentioned above will help you to reduce symptoms like fatigue and eye strain. As a result, the user is less likely to make mistakes that are related to the user-experience of applications.
If fatigue really is an obstacle, consider solutions that go beyond what’s on the screen. Create more variation in tasks or work, as monotonous work will lead to less focus. Let the person have short breaks so they can go on a walk. Even drinking water and having bright lights helps.
When you work on a project that is more task-focused, in a high-stakes context, consider the suggestions above. Go a bit further, add wiggle room and don’t go for “just enough”. And while designing and developing this user interface, test it, and test it again, as realistically as possible. Make sure your end-result won’t lead to the project’s equivalent of a false inbound missile alarm.
