Jargon de conception expliqué: modèles de conception Web
Dans cet article, Chris Bank of UXPin - L'application de conception UX détaille ce que sont les modèles de conception Web et comment y penser lors de la conception de votre site Web ou de votre application Web, et aborde l'importance du design réactif et des écrans tactiles.
Ils sont couverts plus en détail avec des exemples de plus de 50 sites Web et applications Web chauds dans le livre électronique gratuit d'UXPin, Modèles de conception de l'interface utilisateur Web 2014 .
Quels sont les modèles de conception Web?
De manière générale, un modèle de conception Web, également appelé modèle de conception d'interface utilisateur, est une solution réutilisable à un problème courant que vous pourriez rencontrer chaque jour.
Ce n'est pas une fonctionnalité qui peut être connectée à la conception de votre produit et ce n'est pas une conception finie qui peut simplement être codée. Il s'agit plutôt d'une meilleure pratique formalisée, d'un guide ou d'un modèle que les concepteurs, les développeurs et les chefs de produit (et toute autre personne qui touche au produit) peuvent utiliser pour résoudre des problèmes courants lors de la conception d'une application ou d'un système Web.
Il est généralement indépendant du langage, du périphérique et de la plate-forme - bien qu'il puisse y avoir des limitations technologiques en fonction de la façon dont les conceptions sont finalement mises en œuvre. (Et, bien sûr, s'ils sont mis en œuvre dans le mauvais contexte, ils font plus de mal que de bien, mais nous nous concentrerons sur les aspects positifs pour le moment.)
Principes de base
Les modèles de conception d'interface utilisateur peuvent être des concepts difficiles à comprendre et à exploiter. Ceci est en partie dû au manque de littérature sur le sujet par rapport aux archives massives de modèles de conception technique.
C'est aussi dû, en partie, au fait que c'est la nature humaine d'utiliser des motifs de la même manière que les pochoirs - traçant les contours sans en comprendre les bords; chaque courbe, ligne, torsion et tour dans les formes dessinées.
Dans la pratique, les modèles sont souvent utilisés de manière interchangeable avec des fonctionnalités spécifiques, copiés tels quels à partir de l'une des bibliothèques de modèles de conception et de wireframe populaires - voir la liste complète dans UXPin's Guide du Wireframing .
La compréhension des modèles est fondamentale pour une bonne conception et un bon développement de produits. Nous examinerons un exemple dans un instant, et j'ai détaillé des modèles de Pinterest, OKCupid, Spotify, Amazon, AirBnB, Dropbox, Quora, Eventbrite, Asana, RelateIQ, Flipboard et bien d'autres dans l'e-book gratuit d'UXPin, Modèles de conception de l'interface utilisateur Web 2014 .
Je suggère également de regarder des modèles et des éléments de conception d'interface utilisateur supplémentaires dans UXPin gratuit Modèles de conception de l'interface utilisateur mobile , Tendances de conception Web , Tendances de conception mobile , et Le guide du wireframing livres électroniques.
Un exemple rapide
Ci-dessous, j'ai déconstruit les contrôles de survol de Pinterest et Facebook pour vous donner un exemple concret de la façon de penser quotidiennement aux modèles de conception mobile.
- Le problème : L'utilisateur souhaite avoir accès aux contrôles sans encombrer l'affichage du contenu.
- La solution : Masquez les actions et les boutons de contrôle jusqu'à ce qu'un utilisateur survole l'élément auquel ils se rapportent.
Il est toujours bon de donner à l'utilisateur un contrôle total sur le contenu, mais lorsqu'une interface a beaucoup de choses sur lesquelles il est possible d'agir, chaque bouton vole l'attention du contenu.
Ce modèle d'interface utilisateur masque ces contrôles contextuels jusqu'à ce que l'utilisateur survole le contenu avec sa souris, les gardant à l'écart jusqu'à ce que cela soit nécessaire. Pinterest met tout l'accent sur les photos, de sorte que les boutons 'cœur', 'envoyer' et 'épingler' sont invisibles jusqu'à ce que vous survoliez la photo.
Étant donné que les boutons apparaissent sur l'image elle-même, il n'y a aucune confusion sur l'élément sur lequel ils agiront.
À considérer
Il est surprenant de voir autant de belles bibliothèques de modèles de conception qui traitent les modèles comme des maquettes; fichiers plats essayant en vain de transmettre des concepts de conception de produits plus profonds.
Ils n'offrent aucune explication sur les problèmes que ces modèles résolvent et sur la manière dont les décisions ont été prises lors de la mise en œuvre des exemples de modèles. Une image peut valoir mille mots, mais elle est probablement sans valeur si l'image est entièrement mal comprise.
Voici ce à quoi vous devez penser lors de l'évaluation d'un modèle de conception et de son adaptation à vos propres besoins:
- Résumé du problème: Quel problème d'utilisateur résolvez-vous? Restez concentré et exprimez-le comme une user story - en une seule phrase.
- Solution: Comment les autres ont-ils résolu ce problème? Entre autres, quelques éléments à détailler incluent la navigation de l'utilisateur (y compris les raccourcis), l'obtention des entrées de l'utilisateur, le traitement des données et des intégrations avec d'autres services ou applications, et l'affichage des informations et du contenu (y compris les valeurs par défaut).
- Exemple: Super, pouvez-vous me montrer? Parfois, une capture d'écran ou une maquette suffit; d'autres fois, un utilisateur coule et / ou des notes supplémentaires sont nécessaires pour communiquer clairement le motif.
- Utilisation: Quand ce modèle doit-il être utilisé? Entre autres, quelques éléments à détailler incluent l'architecture du produit, la disposition de l'interface, le (s) périphérique (s), le langage de programmation, l'absence ou l'existence d'autres modèles de conception, le type d'utilisateur et les principaux cas d'utilisation.
Il faut de la pratique et de la discipline pour penser aux modèles de cette manière si vous ne l'avez pas encore fait. Prenez le temps de répondre à ces questions lors de la conception de votre produit, car cela pourrait vous aider à gagner beaucoup de temps en refactorisant plus tard lorsque vos utilisateurs et votre équipe vous demanderont des détails similaires.
Convergence
Au cœur de bon nombre de ces nouveaux modèles de conception d'interface utilisateur se trouve l'émergence d'une conception réactive et l'incorporation d'écrans tactiles sur les ordinateurs de bureau et portables traditionnels.
Dans le Modèles de conception de l'interface utilisateur mobile ebook, je parle en détail des animations et des gestes ayant un impact important sur les modèles de conception d'interface utilisateur mobile, ce qui devient de plus en plus pertinent pour la conception Web à mesure que le mobile et le Web poursuivent leur convergence. Mais je veux aussi l'aborder brièvement ici en raison de sa signification.
Conception réactive
Aujourd'hui, presque toutes les entreprises souhaitent une version mobile de leur site Web - et vice versa. Et bien que de nombreux concepteurs et développeurs citent le «design réactif» comme un synonyme sophistiqué de «redimensionnable sur différents appareils», c'est loin d'être aussi simple. Beaucoup ont essayé cette approche et ont échoué. Magazine écrasant résume une définition commune de Site Web adaptatif :
«Le Responsive Web Design est l'approche qui suggère que la conception et le développement doivent répondre au comportement et à l'environnement de l'utilisateur en fonction de la taille de l'écran, de la plate-forme et de l'orientation…»
Mais il ne s'agit pas seulement de résolutions d'écran réglables et d'images redimensionnables automatiquement. En pratique, un produit différent doit être conçu du début à la fin pour chaque appareil (pas seulement copié-collé): un design pour le BlackBerry, un autre pour l'iPhone, l'iPad, Android, le Kindle, etc.
Écrans tactiles
Bien que l'iPad - à certains égards, un iPhone surdimensionné - soit reconnu pour avoir popularisé les grands écrans tactiles, ce n'était que le début.
Non seulement cela a déclenché le développement de nombreux autres grands appareils à écran tactile, mais également des hybrides, ce qui a finalement augmenté la complexité de la conception et du développement des produits. Et si les appareils à écran tactile (mobiles) grands et petits sont similaires en termes de matériel et de système d'exploitation, la diversité des produits dans chaque classe de produits témoigne des différences dans les cas d'utilisation pour lesquels ils sont conçus.
Certes, il existe de nombreuses applications iPhone qui fonctionnent de manière transparente sur l'iPad. Mais cela ne change pas la façon dont les produits sont conçus de la même manière que le redimensionnement et la réorganisation des applications entre le Web et le mobile ne sont pas vraiment du «Responsive Design».
Mendier, emprunter et voler - le cas échéant
Prenez ces modèles de conception et ces éléments du livre électronique gratuit d'UXPin, Modèles de conception de l'interface utilisateur Web 2014 et personnalisez-les pour résoudre vos propres problèmes et, surtout, ceux de vos utilisateurs.
Les concepteurs, les développeurs et les chefs de produit du monde entier contribuent collectivement à résoudre les problèmes que vous essayez probablement de résoudre aujourd'hui. Pourquoi réinventer la roue? Apprenez de leurs connaissances et même de solutions explicites pour progresser plus rapidement et plus intelligemment.
N'oubliez pas qu'il n'y a pas de solution unique en matière de conception de l'expérience utilisateur. De nombreux modèles que nous avons abordés ici fonctionnent extrêmement bien lorsqu'ils sont mélangés et assortis les uns avec les autres. Et ils doivent être adaptés à votre produit unique, à vos utilisateurs et à votre équipe pour des résultats optimaux.
Mots: Chris Bank
Chris Bank est le fil conducteur de la croissance UXPin , une application de conception UX qui crée des wireframes et des prototypes interactifs réactifs.
