Comment la révolution de l'écran tactile impacte UX
L’introduction de Windows 8 a entraîné une refonte massive de l’interface utilisateur Windows en fonction de l’interface Windows Phone afin d’être plus intuitive pour les utilisateurs d’écran tactile, et Apple a subtilement adapté OSX au fil du temps, rationalisant ainsi sur leurs systèmes d'exploitation mobiles et de bureau. Bien que nous n'ayons pas encore vu de Mac à écran tactile, il est évident que la révolution de l'écran tactile se profile à nous, les utilisateurs passant de plus en plus de temps sur leurs appareils mobiles que les PC à la maison.
Dans cette optique et dans une proportion de plus en plus grande de la navigation sur les smartphones et les tablettes, les sites Web doivent décider de la manière dont ils s’adapteront aux personnes qui accèdent à leur contenu sans souris ni clavier. Alors que la réponse par défaut à cela a souvent été «créer une interface mobile séparée!», Une solution qui a bien fonctionné par le passé sur des appareils mobiles plus petits tels que les téléphones, il y a très peu affichages de tablette.
Cet article examinera un certain nombre de sites qui ont été conçus de manière non conventionnelle et standard pour devenir plus conviviaux.
Sites Web ciblés et sites Web réactifs
De nombreux sites Web ont créé des sites subsidiaires ou des applications spécialement conçus pour les utilisateurs d’écrans tactiles, afin de leur permettre de se concentrer sur un type d’utilisateur à la fois. L'un des problèmes est que les sites Web étant séparés, ils reposent sur la redirection d'URL, ce qui peut souvent entraîner des problèmes tels que l'envoi de liens vers d'autres sites ou la redirection vers des pages formatées pour les utilisateurs mobiles.
Le plus gros problème avec des sites Web distincts pour les utilisateurs mobiles est que la version mobile manque souvent de fonctionnalités ou d'informations reçues par un utilisateur de bureau. fonctionnalités et interfaces souvent simplifiées, boutons agrandis et options réduites. Cela peut être résolu en utilisant une conception «réactive». Un site Web réactif est conçu pour être facilement visualisé sur les deux plates-formes sans perte de qualité. Cela présente également l'avantage qu'un seul site Web doit être conçu, plutôt que deux, mais cela entraîne souvent des compromis pour les deux plates-formes.
Différences de conception de base
Il existe des différences évidentes entre un écran tactile et un bureau auquel vous devez penser lors de la création de votre site Web. Sur un écran tactile, glissez la page vers le bas pour la faire défiler, mais sur un bureau, vous déplacez la molette vers le bas. Apple a tenté de corriger cette situation en regroupant ses technologies d’interface tactile dans des trackpads sur ses ordinateurs portables et de bureau, mais les utilisateurs de PC ou même les utilisateurs de Mac utilisant des molettes de défilement ou des curseurs classiques pour parcourir les pages Web.
Les boutons doivent être beaucoup plus gros sur les appareils mobiles, car le tapotement est loin d'être aussi précis que de cliquer avec une souris, rien de plus exaspérant que de cliquer sur un lien pour la page suivante et renvoyer accidentellement une page ou une annonce. L'absence de curseur signifie également que vous ne pouvez pas avoir d'états de vol stationnaire pour expliquer où se trouve un lien, ce qu'un mot signifie ou même ce qui est cliquable.
Il existe également une différence entre la précision des entrées mobiles car les écrans tactiles peuvent avoir des entrées résistives ou capacitives qui présentent des sensibilités variables et, par conséquent, la précision peut être perdue sur les écrans tactiles résistifs. Au-delà, les conceptions doivent incorporer deux résolutions extrêmement différentes pour les appareils mobiles qui ont deux orientations.
Orientation de l'écran et rapport d'aspect
Avec des résolutions multiples allant au-delà des tailles de moniteur standard, vous ne pouvez plus penser en termes de résolutions d'écran standardisées et de mouvement vertical. Les changements rapides survenus sur le marché de la technologie ont produit des tailles d’écran différentes de celles du modèle et du fabricant et, avec toutes les rumeurs concernant les montres intelligentes, nous pouvons commencer à voir des écrans qui ne sont plus limités à quatre frontières. Les écrans mobiles ajoutent à la complexité du fait qu'ils peuvent être visualisés en mode portrait et paysage par rotation.
Les solutions sont des mises en page liquides qui s'adaptent automatiquement à toutes les résolutions et peuvent s’adapter à la fois au portrait et au paysage. Certains sites Web utilisent une disposition liquide qui modifie radicalement l'apparence du site Web afin d'optimiser la facilité de contrôle et d'exploiter pleinement le potentiel de l'écran en fonction de son orientation.
Alors que les souris ont été spécifiquement conçues avec des molettes de défilement pour un défilement vertical facile, de nombreux utilisateurs migrent vers les pavés tactiles et les écrans tactiles, et Apple a adopté la forme plus innovante du défilement tactile le défilement horizontal peut ne pas être hors de question. La plupart des applications utilisent le défilement horizontal comme outil et le plus grand succès du défilement horizontal est de loin le plus important, alors pourquoi ne pas l'implémenter dans votre interface Web? De nombreux sites à page unique ont un axe uniquement horizontal, mais ils doivent souvent utiliser des boutons pour lancer le défilement, car les utilisateurs peuvent ne pas comprendre le format non standard.
Le défilement horizontal peut être similaire au défilement vertical en termes de conception, mais l'utilisation des deux peut permettre un défilement à deux axes, qui peut ne pas fonctionner dans le navigateur. De nombreux utilisateurs aiment être ancrés sur un axe, il s’agit bien évidemment de l’axe des x, qui est statique, donc si les utilisateurs se perdent sur la page, ils peuvent simplement faire défiler la page vers le haut. Sur les sites à deux axes, cela peut ne pas être aussi simple, de sorte que la navigation peut être difficile, en utilisant une barre de style HUD.
Quelle interface utilisateur votre site Web devrait-il utiliser?
Évidemment, toutes les interfaces utilisateur ne conviennent pas à tous les types de sites Web, alors posez-vous quelques questions de base: qui est votre public cible? Qu'est-ce que vous essayez de "vendre"? Quelle impression voulez-vous donner? Les personnes plus jeunes sont plus susceptibles d'utiliser des écrans tactiles qu'un groupe de personnes plus âgées qui utiliseront probablement un ordinateur de bureau, mais qui auront peut-être besoin de boutons plus gros et d'une interface utilisateur plus claire. Il ne sert à rien de créer l'interface utilisateur la plus innovante que l'on puisse imaginer si personne ne comprend comment l'utiliser, alors n'oubliez pas de créer une interface utilisateur qu'un utilisateur peut consulter et savoir utiliser instantanément.
Menu radial
Un menu radial, également appelé menu circulaire, est un menu contextuel circulaire qui utilise le contexte multidirectionnel plutôt que la hauteur ou la largeur comme outil de sélection.
Ceci est une excellente forme de conception intuitive qui empêche les utilisateurs de se perdre dans des dizaines de sous-menus. Un autre avantage est que l’utilisateur d’un écran tactile contrôle mieux les listes déroulantes normales, car le contrôle directionnel est plus précis que le tapotement. L'utilisation de menus radiaux dans les formulaires et les sites Web pourrait considérablement améliorer l'expérience des utilisateurs sur le site Web, et s'étend aux clés telles que celles utilisées sur les consoles de jeux, car des menus radiaux sont souvent utilisés. En tant que tels, les utilisateurs de bureau ne perdent pas non plus, car il reste que les menus radiaux peuvent simplifier les longues listes en catégories simples, ce qui augmente la facilité d'utilisation ou la productivité sur un site Web.
Les menus radiaux sont un excellent moyen de montrer des informations contextuelles, par exemple en cliquant sur une image d'un plat sur un site de restauration et en ayant la possibilité de retweeter, le lien de recette, la liste d'ingrédients ou d'enregistrer la photo. Cependant, vous devez faire attention à ce que votre menu reste accessible et simple, sinon vous pouvez facilement submerger l'utilisateur, en particulier lorsque vous combinez des symboles et des mots dans le même menu radial. Les menus radiaux sont beaucoup plus faciles à utiliser quand ils sont statiques plutôt que dynamiques, car cela peut entraîner des difficultés dans la sélection d'objets, comme sur des sites comme Phong , dans ce cas en particulier lorsque vous utilisez une souris, le suivi du curseur le rend particulièrement peu intuitif.
Skeuomorphisme
Le design Skeuomorphic imite l'apparence et les fonctionnalités d'un objet quotidien afin de créer une interface utilisateur intuitive, quelque chose qui a récemment perdu sa popularité, en particulier depuis que Scott Forstall a démissionné d'Apple et que le design plat de Sir Jony Ive avenir. Skeuomorphism avait été une grande partie de la pression d'Apple vers la conception plus intuitive, récemment avec Contacts sur Mac étant conçu comme un carnet d'adresses réel, ou Newsstand et iBooks sur iOS étant des étagères réelles. Cette conception profite plus évidemment aux utilisateurs de l’interface tactile, car nous n’interagissons pas avec le monde qui nous entoure avec un curseur.
La familiarité ajoute à l'intuitivité lors de l'utilisation de toute interface utilisateur, ceci étant le point de vue du skeuomorphisme, pour apporter une dimension supplémentaire de familiarité en joignant des forces à des objets réels afin que l'utilisateur sache instantanément comment interagir avec lui. Une conception skeuomorphique réussie signifie que, en jetant un coup d’œil à la page Web, vous saurez à quoi sert le sujet / la page, ce qui rend obsolètes les infobulles de survol de la souris et les liens.
Dial UI
Ceci est une combinaison des deux ci-dessus où l'interface utilisateur complète forme un simple cadran; la conception ressemble à un menu radial, mais au lieu de pivoter au centre, en sélectionnant à partir de là, le cadran pivote en un seul point de sélection. Ceci est très efficace dans des cas tels que la musique où les cadrans sont souvent utilisés pour mixer une piste et contrôler le volume. Dans le cas de l'étiquette du filet SHSK'H ils utilisent un type modifié d’interface utilisateur pour sélectionner la piste que vous souhaitez lire.
Le mouvement minimaliste
Le minimalisme est l'endroit où un site Web est ramené à ses éléments essentiels nus. Ceci est idéal pour les utilisateurs mobiles car il réduit les temps de chargement et l'utilisation des données tout en permettant à l'utilisateur d'accéder à toutes les informations nécessaires dans une interface claire et plus facile à utiliser pour des résolutions plus petites. Le minimalisme actuel a dépassé le strict minimum des sites de dépouillement et a formé un nouveau style appelé design plat. Cela repose sur la conviction que l’intuition n’est plus nécessaire dans la conception car les interfaces et leur utilisation sont devenues une partie tellement importante de la vie que la conception peut aller au-delà de la tâche des utilisateurs. un mentor. Le design plat a longtemps été caractérisé par l'utilisation de blocs de couleurs vives, mais avec l'introduction d'iOS7, les dégradés ont pris leur place dans le monde du design plat sans frontières, en extrayant l'élégance du criard.
Enfin, je terminerai cet article avec un site qui fait les choses un peu différemment. Thibaud est un développeur créatif qui a conçu un constructeur de sites Web de portefeuille appelé Pikibox. Le site Web est extrêmement convivial, mais sans entraver son accessibilité pour les utilisateurs de bureau, sur des appareils à écran tactile plus petits, mais l'utilisateur est envoyé vers une redirection ciblée avec une interface mobile.
Le design simple fonctionne à merveille pour présenter de manière professionnelle tout son portfolio tout en conservant un nouveau look amusant et intuitif. Bien entendu, une grande partie de la conception est entre les mains de l'utilisateur, la possibilité de modifier l'emplacement de la navigation et d'ajuster son utilisation spatiale, ce qui, selon certains, ne constitue pas exactement un choix de conception. La version pour ordinateur de bureau est disponible en quatre styles différents, et je vous invite à jouer avec eux et à tirer vos propres conclusions quant à savoir si cela est tout simplement indécis ou extrêmement créatif.
Quels compromis avez-vous faits à la suite d’écrans tactiles? Est-ce que le vol stationnaire est une chose du passé? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image tactile via Shutterstock.