Quelles sont les meilleures pratiques pour concevoir des interfaces utilisateur qui vont être utilisées sous la lumière directe du soleil?
Je concevons une demande qui sera principalement utilisée sous la lumière directe du soleil, et j'aimerais savoir s'il y a des recommandations ou des meilleures pratiques pour améliorer la convivialité dans ces conditions.
Probablement des choses comme:
- Contraste
- Palette de couleurs
- Fond noir avec du texte blanc (ou l'inverse)
- Taille de la police minimale
- Caractéristiques de la typographie (SERIF, SANS SERIF, Poids de la police, etc.)
- Espacement entre les articles
- Tailles d'articles minimum
Sans avoir une expérience antérieure à cet égard, s'il s'agissait d'un projet personnel, je considérerais des aspects logiques en termes d'éléments graphiques. En ce qui concerne les couleurs, il est évident qu'il doit y avoir un contraste maximal, je ne fais que référence au type de couleurs à choisir.
1 - Évitez les grandes surfaces blanches ou légères
Il est largement connu que dans l'optique une surface blanche reflète tous les composants de la lumière tandis que le noir absorbe. Une large surface blanche sur l'écran serait une réflexion de la lumière totale.
2 - Évitez le noir pur 100%
Surtout sur de grandes surfaces.
En absorbant les 100% de la lumière, la couleur noire peut être transformée en miroir. Bien que le reflet d'un objet (ou de l'utilisateur) ne puisse pas être évité, ce qui peut être fait, c'est de masquer ou de dissimuler cette réflexion par la couleur choisie de l'écran. Par exemple, en utilisant des couleurs de très faible valeur, près du noir, normalement appelée couleurs hors noirs (Wikipedia). Dans la palette de couleurs de cette réponse , il s'agirait d'une couleur centrale sur les colonnes de gauche:
- Évitez 100% blanc pur
Toute option empêchant une réflexion de 100% de la lumière est valide, par exemple une valeur de grande valeur, proche de blanc ou de toute couleur dans la deuxième ou une troisième colonne de la colonne de couleur cassée mentionnée ci-dessus, également appelée - Couleurs hors blancs (Wikipedia).
L'une des lois de la théorie de la perception des couleurs dit que toute couleur apparaîtra plus légère sur un fond plus sombre. Il n'est pas nécessaire d'utiliser de blanc pour montrer de la luminosité:
4 - Évitez les teintes ou les couleurs pure
Dans l'optique, des encres pures absorbent une partie des composants de la lumière mais reflètent 100% de sa couleur:
Personnellement, je les remplacerais avec des couleurs qui ne contiennent pas 100% de pureté ou de saturation.
5 - Réduire les détails graphiques
Si possible, spécialement dans tous les éléments interactifs. Si l'utilisateur voit l'interface sur un écran sous la lumière directe, ils ne verront jamais les petits détails d'un objet à utiliser, de sorte qu'ils sont totalement inutiles, ils ne causent que du bruit.
6 - Évitez le bruit en général
Le point précédent affecte également le reste des composants d'interface. L'utilisateur recherchera les éléments d'information et d'interactivité, de sorte que tout objet ou détail en dehors de ces deux fonctionnalités est le bruit et peut affecter la perception immédiate sous la lumière.
7 - Prioriser les polices d'affichage
En ce qui concerne la typographie, je n'inclurais pas de règles strictes telles que Serif ou Sans Serif. Si la société chargée des travaux utilise des polices SERIF dans toutes ses applications, le concepteur devrait s'abstenir de cette directive. Mais je donnerais la priorité à Polices d'affichage.
Dans les types de familles de polices, il existe une classification concernant l'épaisseur basée sur la taille, ce sont les Polices d'affichage, dont les composants hautement exagérés permettent une perception visuelle immédiate.
Ceci est le Lien d'affichage des polices de myfontS.com.
En cas de ne pas pouvoir choisir une famille de caractères de caractères en dehors de l'entreprise, je choisirais des variables de grande taille ou d'épaisseur prononcée: minimum régulier ou semi-gras.
8 - Réduire la longueur visible du texte de l'information
L'interactivité offre des outils très utiles pour éviter tout texte d'information important en petite taille. Une fenêtre avec une barre de défilement clairement visible et une taille de police moyenne/grande taille est préférable à ne pas pouvoir lire un très petit texte.
9 - Utilisez ZOOMS ZOMES
Personnellement, lorsque vous utilisez des applications d'écran, je me sens frustré lorsque je dois rapprocher ma tête de voir le contenu de certains éléments en détail. Je n'hésiterais pas à utiliser Zoom de zone Pour mettre en évidence des éléments importants tels que des informations texte ou des images, comme se produit dans le commerce électronique avec les cartes du produit.
10 - Optimiser l'espacement
La question mentionne trois éléments connexes:
- Taille de la police minimale
- Espacement entre les articles
- Tailles d'articles minimum
Il existe un dénominateur générique commun dans ces trois points :Optimiser l'espace. Dans la conception graphique, il existe des composants virtuels qui font également partie du jeu de composition:
- Cadre de conteneur
- Espaces et marges
- Lignes de diagrammes structurelles
Savoir comment les utiliser est lié à la bonne disposition de tous les autres composants (typographie, texte, images, animations, illustrations, etc.). Je ne pense pas qu'il y ait une réponse immédiate sur une utilisation optimale de ces trois composants, elles sont influencées par le type d'objet à apporter, le contenu et le récepteur.
Dans ce cas particulier, je donnerais la priorité aux éléments d'interaction (boutons, barres de défilement, zooms), évitez le bruit (décrit dans les points précédents), essayez de regrouper des éléments présentant des fonctionnalités similaires, minimisez les éléments d'information avec un accès de zoom possible.
Dans ces deux exemples d'images, la zone des boutons est la même hauteur:
Eh bien, bien qu'il y a tellement de points à prendre en compte, mais ce sont ceux qui nous viennent à l'esprit dans une analyse de première instance
Je pense que vous pourriez envisager cette question d'une perspective de l'accessibilité.
Quels traits considérez-vous que vous envisagez de prévaloir pour un utilisateur lors de l'utilisation d'une application à la lumière directe du soleil? Peut-être des choses comme:
- La vue pire que la normale à travers la plumineuse
- Affectant des choses comme la visibilité générale/la lisibilité
- Écran tenu à un angle inhabituel pour éviter l'éblouissement
- Affectant des choses comme la capacité à appuyer avec précision une cible
Ce sont toutes des choses que quelqu'un avec une déficience des compétences visuelles et motrices vivrait sans la lumière du soleil.
En conséquence, tous les aspects de conception que vous mentionnez pourraient être pertinents et si vous conçus pour inclusivité où ils seraient tous pris en compte par défaut.
Vous pouvez examiner les meilleures recommandations de pratique sous WCAG pour la plupart de ces aspects, puis viser à les dépasser. Si une recommandation 4.5: 1 pour le texte "normal" est une amende pour WCAG 2.1 AA, vous pouvez chercher à utiliser un texte important et appuyez sur le ratio de contraste AAA pour vos couleurs par exemple.
La plupart des recommandations pour les cibles tactiles suggèrent 40-48px, mais vous pouvez dépasser les choses au moins 64px par exemple.
En règle générale, je chercherais les meilleures pratiques génériques autour de l'accessibilité, en particulier celles que vous pensez être pertinentes pour diriger les conditions de la lumière du soleil, puis viser à dépasser celles-ci.
Comme toujours, vous devriez probablement essayer de le faire quand même! Et il n'y aura aucun substitut aux tests, mais j'espère que cette approche générique aurait des choses rouler.