12

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:

  • Contrast
  • Color palette
  • Dark background with white text (or the other way around)
  • Minimum font size
  • Typography characteristics (Serif, sans serif, font weight, etc)
  • Spacing between items
  • Minimum item sizes
  • 1
    Good question. And I suspect having a non-shiny screen surface is a good idea. In car screens may have already had to deal with this question. – PhillipW Aug 7 '20 at 21:19
  • 1
    The E-Ink display in E-readers does this quite well. Unfortunately, the performance is quite low. – Nash Aug 11 '20 at 6:08
  • I think OP's question is more targeted towards design possibilities on normal smartphone screens, rather than asking what hardware requirements are needed. – Big_Chair Aug 11 '20 at 7:11
  • Before give my answer, I have some questions hope to get answers for: 1-What is the age range of people using this system? 2-Is this application is running on touch screen? and what is the size of this screen? 3- The user is entering lots of data or the entered data is limited? 4- Is this system has lots of things to do or it's only for some specific tasks? Thanks! – Khalil Hanna Aug 12 '20 at 19:59
  • 1. Adults, 18-65. 2. Yes Regular 5-6 inch smartphone 3. Filling about 5-8 fields. It will have only one task: to create a record of an event – IAmJulianAcosta Aug 12 '20 at 23:19
11
+200

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.

Light

Image source

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:

broken blacks

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:

luminosity

4 - Avoid pure tints or colors

In optics, pure inks absorb part of the light components but reflect 100% of its color:

colors1

Personally I would replace them with colors that don't contain 100% purity or saturation.

colors

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.

buttons

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.

noise

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:

  • Minimum font size
  • Spacing between items
  • Minimum item sizes

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:

  1. Container frame
  2. Spaces and margins
  3. Structural diagramming lines

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:

space


Well, sure there are so many more points to consider, but those are the ones that come to mind in a first instance analysis

5

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:

  • Eyesight worse than normal through squinting
    • Affecting things like general visibility/legibility
  • Screen held at an unusual angle to avoid glare
    • Affecting things like the ability to accurately press a target

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.

  • em is a relative unit so not the most illustrative in this example for describing an absolute size. If I was to be super accurate I would have said effective pixels to accommodate pixel density but felt it was sufficient considering I was giving broad examples – dougajmcdonald Aug 14 '20 at 11:34
-1

Use e-ink device and keep the whole thing monochrome. This will bring the best results.

  • 1
    This is not an useful answer, as the question asks about design, not device selection – IAmJulianAcosta Aug 12 '20 at 0:05
  • @IamJiluanAcosta design is derived from requirements. The requirements for using a device in full sunlight is the ability to read the display and that’s done via e-ink. Therefore, it is a relevant answer. I have successfully built outdoor scanning software for a major ski resort and this was a major insight. I am merely providing an answer which I deem valuable. If the question is rephrased as: we are stuck with using iPhones outside for the interface, then this would be a different matter. – U0001 Aug 13 '20 at 1:18
  • 1
    @U0001 I agree that this can be a valid answer. But it's not a very convincing one in the current form. Notice that your comment above already contains more information than your answer. And there is probably more to share that goes beyond an opinion. – jazZRo Aug 13 '20 at 7:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.