I'm designing an application that will be mostly used under direct sunlight, and I would like to know if there are some recommendations or best practices to improve usability under that conditions.
Probably things like:
Without having previous experience in this regard, if this were a personal project I would consider some logical aspects in terms of graphic elements. Regarding colors it's obvious there must be a maximum contrast, so I only refer to the type of colors to choose.
1 - Avoid large white or light surfaces
It's widely known that in optics a white surface reflects all the components of light while the black one absorbs. A wide white surface on the screen would be a total light reflection.
2 - Avoid 100% pure black
Especially on large surfaces.
By absorbing the 100% of the light, the black color can be transformed into a mirror. Although the reflection of an object (or the user) cannot be avoided, what can be done is to hide or disguise this reflection by the chosen color of the screen. For example using very low value colors, close to black, normally called off-black colors (Wikipedia). In the color scheme of this answer, it would be any center color on the left columns:
3 - Avoid 100% pure white
Any option that prevents a 100% reflection of the light is valid, for example a high value gray, close to white or any color in the second or third right column of the broken color scheme mentioned above, also called off-white colors (Wikipedia).
One of the laws of the theory of color perception says that any color will appear lighter on a darker background. It's not necessary to use white to show luminosity:
4 - Avoid pure tints or colors
In optics, pure inks absorb part of the light components but reflect 100% of its color:
Personally I would replace them with colors that don't contain 100% purity or saturation.
5 - Reduce graphic details
If possible, specially in all interactive elements. If the user see the interface on a screen under direct light, they will never see the small details of an object to be used, so they are totally unnecessary, they only cause noise.
6 - Avoid noise in general
The previous point also affects the rest of the interface components. The user will search for the information and interactivity elements, so any object or detail outside of these two functionalities is noise and can affect the immediate perception under the light.
7 - Prioritize Display Fonts
Regarding typography, I would not include so strict rules such as serif or sans serif. If the company commissioning the work uses serif fonts in all of its applications, the designer should abstain from this guideline. But I would give priority to Display fonts.
Within the types of font families, there is a classification regarding thickness based on size, these are the Display Fonts, whose highly exaggerated components allow an immediate visual perception.
This is the Display Fonts link from myfonts.com.
In case of not being able to choose any typeface family outside of the corporate one, I would opt for variables of large size or pronounced thickness: minimum regular or semi-bold.
8 - Reduce visible length of information text
Interactivity offers very useful tools to avoid large information text in small size. A window with a clearly visible scrollbar and medium/big font size is preferable to not being able to read a whole very small text.
9 - Use area zooms
Personally, when using screen applications, I feel frustrated when I have to bring my head closer to see the content of certain elements in detail. I would not hesitate to use area zooms to highlight important elements such as text info or images, as happens in e-commerce with product's cards.
10 - Optimize spacing
The question mentions three related elements:
There is a common generic denominator in these three points: optimizing space. In graphic design there are virtual components that are also part of the composition set:
Knowing how to use them is related to the good disposition of all the other components (typography, text, images, animations, illustrations, etc). I don't think there's an immediate answer about an optimal use of these three components, they are influenced by the type of object to be made, the content and the receiver.
In this particular case, I would give priority to the interaction elements (buttons, scrollbars, zooms), avoid noise (described in previous points), try to group elements with similar functionalities, minimize information elements with possible zoom access.
In these two example images, the area for the buttons is the same height:
Well, sure there are so many more points to consider, but those are the ones that come to mind in a first instance analysis
I think you could consider this question from a perspective of accessibility.
What traits do you consider to be prevalent for a user when using an app in direct sunlight? Maybe things like:
These are all things which someone with a visual and motor skills impairment would experience without sunlight.
As a result, all of the design aspects you mention could be relevant and if you were designing for inclusivity where they would all be considered by default.
You could look at the best practice recommendations under WCAG for most of these aspects and then aim to exceed them. If a 4.5:1 recommendation for 'normal' text is fine for WCAG 2.1 AA you may seek to use large text and hit the AAA contrast ratio for your colours for example.
Most recommendations for touch targets suggest 40-48px but you may exceed that making things at least 64px for example.
As a rule, I would look for generic best practices around accessibility, particularly those which you think are relevant to direct sunlight conditions and then aim to exceed those.
As always you should probably be trying to do this anyway! and there will be no substitute for testing, but hopefully that generic approach would get things rolling.
Use e-ink device and keep the whole thing monochrome. This will bring the best results.
