Share
Nous avons récemment publié un article sur l'évolution actuelle de l'impact de la navigation sur les tablettes sur la conception Web. Il s’agit d’un changement majeur pour l’industrie des technologies, mais également pour les concepteurs de sites Web, qui sont maintenant encouragés à envisager la compatibilité de la plate-forme pour tablette. Cependant, dans le même temps, il y a un autre changement en cours: une transition des interfaces centrées sur la souris vers celles orientées vers les applications..
Une application Web est, pour le dire simplement, une application qui s'appuie sur une connexion Internet pour fonctionner. Rien n'est stocké localement et tout est dans le cloud. Cela présente un certain nombre d'avantages: tout est accessible partout, les performances sont peu préoccupantes, une panne de disque dur ne signifie pas une perte de travail et la plupart sont multi-plateformes. Par conséquent, pour les développeurs d'applications, il s'agit d'une proposition attrayante qui pourrait signifier que les applications sont disponibles pour un plus large segment de leur public potentiel..
Il y a une différence distincte entre un web app et une toilesite. Cependant, ce débat n'est pas le sujet de l'article. Au lieu de cela, nous envisagerons un autre changement dans la conception Web, car la conception multiplateforme centrée sur les applications devient beaucoup plus populaire et tout, de la navigation aux formulaires, est affecté..
C’est peut-être la plus grande importance de ce changement. Le cas de toute application est qu'il doit être aussi simple que possible pour ne pas frustrer un utilisateur. Cependant, chaque application a un but et un objectif à atteindre à la suite de l'interaction d'un utilisateur. Par conséquent, les applications Web doivent se concentrer davantage sur les fonctions clés qu'un site Web classique..
L'écran d'accueil de Facebook une fois déconnecté. Cet accent est évident non seulement dans les applications Web elles-mêmes, mais aussi dans leurs pages de garde avant la connexion. Si nous prenons Facebook comme exemple, la plus grande section de la page est le formulaire d’inscription, car c’est ce que la page principale est censée faire: gagner plus d’utilisateurs.
Il y a aussi un spin secondaire, orienté utilisateur, sur cette théorie. Par exemple, si quelqu'un remplit un formulaire sur la page Web, il est peu probable qu'il veuille réinitialiser ce formulaire. Les chances qu’ils épellent bien leur nom du premier coup sont plus grandes et, par conséquent, il faudrait mettre davantage l’accent sur le bouton de soumission..
Le formulaire de connexion de ThemeForest comporte un gros bouton de soumission, car il s'agit de l'action que la plupart des utilisateurs voudront entreprendre. Cependant, il existe également les liens "Mot de passe / nom d'utilisateur oublié" pour ceux qui en ont besoin, mais ils sont plus petits.
Cette idée est une contrainte de la hiérarchie visuelle en ce que l'objectif principal d'une page Web spécifique est l'élément le plus important et le plus remarquable de cette page..
Une autre conséquence est la montée d'un style de conception particulier des applications Web elles-mêmes. Avez-vous déjà rencontré un site Web qui semble appartenir à votre dock (ou au menu Démarrer si vous êtes sous Windows)? Eh bien, il existe de nombreux exemples qui donnent à une application Web une apparence élégante entre différentes plates-formes, grâce à l'utilisation d'une variété de dégradés et d'ombres agréables..
Cela est évident non seulement dans les applications Web destinées à l’utilisation des ordinateurs de bureau, mais également dans les applications mobiles. Un grand nombre de petits développeurs choisissent de créer des applications Web mobiles plutôt que des applications natives pour économiser sur les coûts et les courbes d'apprentissage. Non seulement cette méthode fonctionne-t-elle avec la création d'applications Web originales, mais elle permet également de thématiser des applications populaires telles que WordPress (comme le décrit cette session MobileTuts +).
Montrer à l'utilisateur ce dont il a besoin, pas tout ce dont il n'a pas besoin.
Auparavant, si vous vouliez effectuer une action dans une application Web complexe, vous deviez faire défiler et parcourir plusieurs "niveaux" avant de réaliser une telle chose. Cependant, avec la navigation contextuelle, ce processus est beaucoup plus simple. La théorie générale derrière cela est qu'un utilisateur n'a pas besoin d'accéder à toutes les options à tout moment et que seules celles qui correspondent à sa situation actuelle doivent être affichées..
Ce type de navigation spécifique à un scénario est généralement obtenu grâce à l'utilisation d'une navigation de second niveau. L'analogie non Web la plus proche que je puisse trouver est celle de Microsoft Office et de la manière dont il utilise une disposition de ruban pour plus de facilité d'utilisation. Les sections clés sont intitulées et sur un simple clic de souris, toutes les options pertinentes apparaissent.
Un moyen simple de résumer ceci est de montrer à l'utilisateur ce dont il a besoin, pas tout ce dont il n'a pas besoin. Et cette même théorie basée sur le contexte peut être appliquée à d'autres éléments tels que les boîtes modales contextuelles qui affichent des éléments requis uniquement si l'utilisateur le souhaite..
Microsoft Office est un exemple d'utilisation généralisée d'un menu contextuel. Cela semble résulter en partie des sujets abordés précédemment, mais ces trois éléments peuvent avoir un impact considérable sur la conception de sites Web. L'ajout d'ombres à un bouton, par exemple, le fait apparaître et presque comme un design qui n'est plus plat.
Pensez ensuite à ajouter des ombres à une fenêtre modale et à voir comment elle crée un sens de définition entre le contenu d'origine et le nouveau cadre. Juste cela peut rendre un site Web plus interactif car il devient multi-couche comme une application native. Ensuite, considérez les effets lorsque le contenu change d'opacité dans différentes circonstances pour créer une nouvelle dimension globale au contenu lui-même..
L'option des dégradés peut également avoir un impact durable sur la conception finale. Au fur et à mesure que les dégradés s'accumulent, le design "saute" davantage et semble en 3D lorsqu'il est utilisé à l'unisson avec l'ombrage intérieur.
Remarquez à quoi l'image de droite a l'air d'avoir deux calques, alors que celle de gauche ne l'est pas. Dans la mesure où une application Web est conçue pour fonctionner comme un logiciel s'exécutant localement, il est primordial de penser que tout fonctionne ensemble. Et le principal moyen par lequel les développeurs peuvent communiquer ce sens est la conception. Je vous mets au défi de me trouver une application Web dont l'interface utilisateur complète est construite avec des éléments HTML purs et ordinaires, sans style personnalisé..
Vous ne pouvez pas Pas de surprise là-bas! Le fait est que les conceptions Web sont conçues pour avoir un style cohérent dans l'ensemble et dans les applications Web, l'utilisation de contrôles et de zones de saisie est un élément important à prendre en compte. Quelque chose d'aussi simple que d'ajouter une couleur d'arrière-plan personnalisée et d'écraser la bordure d'un bouton de soumission peut avoir un impact considérable sur l'unité de votre conception..
Notez dans la capture d'écran de GMail que le style des menus déroulants et des boutons de touches "s'intègre parfaitement" à la conception générale. Oh et oui, je reçois une commande du magasin Angry Birds! ; P
Restyler les éléments de stock est une chose, mais en créer de nouveaux est encore meilleur. Prenons l'exemple de MyBankTracker qui utilise un curseur personnalisé qui correspond toujours à son design blanc et bleu..
Tout en recherchant une autre perspective sur la conception d'applications Web, j'ai trouvé une citation intéressante de Chris Capossela, ancien responsable du marketing chez Microsoft Office, dans laquelle il a dit quelque chose comme: sur dix, ils ont nommé quelque chose déjà dans le produit, ils ne pouvaient tout simplement pas le trouver ". Ce type de lien renvoie à l’idée de navigation optimisée selon la situation.
Lorsque nous avons demandé [quelles fonctionnalités les utilisateurs recherchaient dans] Office, neuf fois sur dix, ils ont nommé un élément déjà présent dans le produit; ils ne pouvaient tout simplement pas le trouver.
Le fait est que si vous essayez de regrouper de nombreuses fonctionnalités dans un espace restreint, chacune d’elles perd de son importance. Et l'utilisateur passera beaucoup plus de temps à chercher la fonctionnalité qu'il souhaite. Et l'utilisateur va être frustré. Et l'utilisateur va partir. Tu ne veux pas de ça. Pour mettre cela plus en perspective, essayez de réduire la résolution de votre écran au plus petit possible et lancez l'application la plus intensive en interface utilisateur que vous avez installée. Essayez de l'utiliser et vous allez attraper ma dérive par la suite.
Une autre suggestion consiste à écouter vos utilisateurs, mais pas trop. À mesure que les utilisateurs demandent de plus en plus de fonctionnalités, vous pouvez être enclin à lancer de nouvelles options ici et là..
En vous éloignant de ce que vous devriez / pouvez utiliser, passons à trois choses importantes que vous ne devrait pas faire lorsque vous travaillez sur une interface utilisateur centrée sur l'application.
Imaginez rencontrer quelqu'un dans la rue. Vous leur demandez où se trouve le Starbucks le plus proche et ils répondent dans une langue différente. Vous semblez reprendre un mot que vous jugez apparenté, mais il s'avère que c'est faux et que le sens est complètement déformé. Cela semble un peu long pour une anologie, mais le point sur lequel j'essaie de souligner est que vous pourriez percer quelque chose à cause de votre langue naturelle mais que le concepteur pourrait viser quelque chose de complètement différent. Par exemple, si vous générez vos titres sous la forme de boutons, l'utilisateur peut essayer de cliquer dessus, pensant que cela fait partie de l'application Web et continuer à être frustré par son manque de fonctionnalité et son expérience déroutante.
Mon premier article ici à WebDesignTuts + a discuté de la validation des formulaires et de son importance pour les utilisateurs. En tant qu'utilisateur, j'aimerais savoir ce que je fais de mal si je ne peux pas utiliser votre application et il est toujours conseillé de créer un espace pour les commentaires dès le début..
L’incohérence dans la conception est une expérience frustrante car, tout comme un utilisateur s’habitue à une façon de faire, il est confronté à une autre. Un exemple très simple est sur Expedia où les calendriers de départ et de retour changent de mois lorsque vous sélectionnez une date..
Voici une liste succincte de six sites Web et applications Web qui illustrent clairement certains des principes de conception décrits dans cet article, allant de la conception d'applications natives à l'accent principal..
Pour résumer cet article, les applications natives traditionnelles ont clairement une influence sur le Web. Cependant, chaque décision de conception impliquant des applications Web repose sur la facilité d'utilisation. Les applications doivent être simples et mettre l'accent sur les fonctions clés afin qu'un utilisateur puisse facilement naviguer sur le site..
.
Accentsconagua