Comment l'utilisation en plein soleil affecte-t-elle la conception d'un site Web?
Nous construisons un site Web mobile qui sera principalement utilisé à l'extérieur en plein soleil. Quels facteurs de conception dois-je considérer?
Certaines des choses les plus importantes vont être un contraste élevé, un gros texte et un design sombre sur clair .
Quelques bons exemples de designs à contraste élevé sont ici sur Web Design Guru Blog . Ils ont quelques exemples de couleurs sympas mais n'oubliez pas de le garder minimaliste.
Gardez votre texte volumineux pour qu'il reste lisible et forcez-vous à découper autant de texte que possible. Gardez les zones d'interaction (boutons/liens) grandes pour permettre aux gens de les appuyer facilement, gardez les limites de ces éléments très claires pour qu'ils soient visibles.
Un texte sombre sur fond clair sera important; la luminosité est la clé pour dépasser le soleil sur la plupart des modèles de smartphones.
Plus important encore: testez votre conception sur plusieurs modèles de smartphones de premier plan . Pour avoir une idée rapide de certaines différences, voir cette vidéo montrant comparaisons d'écran de smartphone en plein soleil .
Ne vous contentez pas de tester l'iPhone 4S, le Galaxy Nexus et de l'appeler quitte. Testez les modèles les plus populaires (et non les plus high-tech) d'une variété d'appareils pour voir dans quelle mesure vous pouvez voir l'écran en plein soleil.
Demandez à de vrais utilisateurs de tester le site par une journée ensoleillée en plein soleil; ils pourront vous dire si votre site est raisonnablement lisible. Essayez aussi quelques modèles de téléphone différents si possible. Vous ou votre équipe de conception saurez ce qu'ils recherchent sur le site et serez en mesure d'analyser les choses qu'un nouvel utilisateur pourrait ne pas. Un regard neuf est important.
Cet effet particulier qui apparaît avec la lumière directe du soleil est solarisation . C'est aussi ce qui arrive aux "vieux" téléviseurs plasma si vous les voyez sous un angle.
Solarized , une palette de seize couleurs, a été conçue et testée scientifiquement "dans une variété de conditions d'éclairage" pour atteindre, parmi autres propriétés, contraste sélectif:
Solarized réduit le contraste de luminosité mais, contrairement à de nombreux modèles de couleurs à faible contraste, conserve les teintes contrastées (basées sur les relations de la roue chromatique) pour la syntaxe mettant en évidence la lisibilité.
Cela peut ajouter de la couleur aux polices lisibles déjà mentionnées à contraste élevé et grandes recommandations.
Ceux-ci sont valables pour tout site Web, en particulier sur les appareils mobiles et encore plus à l'extérieur:
- contraste élevé
- texte sombre sur fond clair
- taille de police suffisamment GRANDE pour le contenu réel
- n'ayez pas peur de l'espace négatif. donnez de la place à votre contenu.
- préfère la lisibilité aux jolis looks
- faire vite ou du moins pas inutilement lent
- pensez à la position des doigts lorsque vous tenez un appareil mobile lorsque vous placez un bouton, des liens et autres
Concernant les couleurs et le contraste ...
L'équation de contraste est: contraste = (L1 + 0,05)/(L2 + 0,05) où L1 est le plus brillant des deux intensités et L1 et L2 sont normalisé à la plage de [0,1].
En général:
- Le blanc sur noir par rapport au noir sur blanc donne le même contraste.
- Blanc sur gris vs gris sur blanc donnent le même contraste.
- Le gris sur noir donne un contraste mieux que le gris sur blanc.
Sous la lumière du soleil:
- Le noir sur blanc apparaîtra gris foncé sur blanc (contraste élevé).
- Le gris foncé sur le blanc apparaîtra gris clair sur le blanc (faible contraste).
- Le blanc sur noir apparaîtra blanc sur gris foncé (contraste élevé).
- Le gris clair sur le noir apparaîtra blanc sur le gris foncé (contraste élevé).
Sous un soleil encore plus lumineux:
- Le noir sur blanc apparaîtra gris clair sur blanc (faible contraste).
- Le gris foncé sur le blanc apparaîtra blanc sur blanc (pas de contraste).
- Le blanc sur noir apparaîtra blanc sur gris clair (faible contraste).
- Le gris clair sur le noir apparaîtra blanc sur le gris clair (faible contraste).
Vous pouvez voir aux points 1 & 2 vs 3 & 4, "sous la lumière du soleil", la différence entre les nuances de texte lumineux est plus difficile, donc, si vous avez plusieurs couleurs de texte et il est important de pouvoir les différencier, puis un texte sombre sur fond clair est préférable.
Vous pouvez voir aux points 1 et 2 contre 3 et 4 de "sous un soleil encore plus brillant", qu'il n'est plus possible de différer entre les nuances et qu'un texte clair sur fond sombre est préférable (le gris foncé sur blanc apparaît blanc sur blanc et donc n'est plus lisible).