Secrets de l'efficacité de la conception de cartes - SkillsUp - un catalogue pratique de cours de conception, d'infographie, de cours Photoshop, de cours Photoshop. Écran haute résolution. Limiter les éléments de l'interface utilisateur

Vous souhaitez développer une interface tendance de type carte ? Ce n'est probablement pas une mauvaise idée. Les cartes sont populaires et conviviales, adaptées à tous les types de conceptions numériques et de tailles d’écran. La clé d’une conception de style carte réussie est de créer quelque chose sur lequel les utilisateurs souhaitent cliquer. La carte doit servir de conteneur pour le contenu spécifique (lien, formulaire de connexion, lecteur vidéo, etc.) avec lequel l'utilisateur souhaite interagir. Voici comment créer ce design.

Commencez par des contours en noir et blanc

Cela semble très simple : commencez par une maquette en noir et blanc de votre conception. Pensez au but des cartes et aux parties d’elles qui seront cliquables. (La carte entière peut servir de lien.)

Planifiez les éléments : espaces blancs, images et typographie afin que vous puissiez voir la carte sans couleur ni design. Considérez-le comme l’étape de conception des cartes de jeu. Tous les éléments de la carte sont en place. La mise en page est-elle facile à comprendre ?

Réfléchissez à la manière dont vous utiliserez les cartes à ce stade. Où cliquez-vous pour effectuer telle ou telle action ? La structure et le résultat sont-ils clairs ? Comment allez-vous revenir en arrière, ou vice versa, faire un pas en avant ? Les réponses à ces questions doivent être claires, sans invites telles que des panneaux rouges « Cliquez ici ».

Comme pour d’autres projets, si un design ne fonctionne pas en noir et blanc, la version finale entièrement conçue ne fonctionnera pas non plus.

Utiliser beaucoup d'espace libre

La chose la plus difficile dans la conception de styles de cartes est de ne pas leur donner un aspect encombré et surpeuplé. C'est là que l'espace joue un grand rôle. Et vous souhaiterez utiliser l’espace libre dans une mesure beaucoup plus grande que ce qui semble confortable.

L'abondance de « l'air » donnera de l'espace aux éléments de conception, rendra toutes les cartes visuellement plus spacieuses et augmentera la lisibilité.

Vous souhaiterez probablement commencer avec deux fois l'espace habituel entre les éléments. Les distances entre les cartes doivent être grandes et vous pouvez également augmenter l'espace libre en utilisant l'espacement des lignes. Une très grande quantité d’air vous aidera à créer un design ouvert et à organiser votre contenu de la manière la plus évidente. La carte est de taille limitée et doit tenir sur l'écran d'un smartphone, ainsi que changer logiquement et proportionnellement la taille des écrans de tablette et de moniteur. Sur les grands écrans, les cartes peuvent également détourner l'attention de l'utilisateur les unes des autres. L'ajout de « air » rendra la conception globale plus ouverte et plus facile à approfondir.

Ajoutez des couleurs et des nuances naturelles

Vous êtes maintenant prêt à réfléchir aux couleurs et aux nuances de votre design. Essayez de lui donner un aspect naturel et apportez un aspect réaliste aux cartes en utilisant des ombres et des styles.

Il ne s’agit pas de scéomorphisme, mais de création de couleurs avec des contours et des ombres naturels. Pensez à quoi ressemblerait une vraie carte. L'utilisateur doit avoir l'impression de tenir la carte dans sa main.

Utilisez quelques règles physiques qui s’appliquent lorsque vous tenez la carte entre vos mains :

• L'éclairage projettera des ombres sous et en bas de la carte.
• La partie la plus sombre du dessin se trouve en bas du dessin car normalement lorsque vous tenez la carte dans vos mains, la lumière vient du haut.
• Évitez de publier du contenu dans des endroits où vous tiendriez la carte entre vos mains.
• Les points de contact (appels à l'action, etc.) doivent être au centre des préoccupations et les interactions doivent être simples et claires. (Tout comme les cartes à jouer, l’élément principal est au centre du design.)
• Une carte - une unité d'information.

Restez simple

Maintenant, en gardant les propriétés physiques à l’esprit, passez à l’étape suivante : créer un style de carte commun pour l’ensemble de l’interface. Vous ne savez pas par où commencer ? Un bon point de départ serait Guide de conception matérielle de Google.

« Dans le Material Design, les propriétés physiques du papier sont transférées à l’écran. L’arrière-plan de l’application est la texture plate et uniforme d’une feuille de papier.

Les éléments de l'application se comportent comme du papier - ils changent également de taille, défilent et sont rassemblés dans une pile. Les éléments extérieurs à l'application, comme la barre d'état, se comportent différemment. Ils sont distincts du contenu de l'application et n'héritent pas des propriétés physiques du papier.

Gardez ces directives à l’esprit et essayez de créer un objet numérique qui ressemble à un objet physique. Si les utilisateurs souhaitent le toucher, ils cliqueront dessus. Le concept est simple.

Choisissez des polices simples

En matière de typographie, les polices simples sans empattement sont souvent la meilleure solution. Évitez les polices trop fines ou trop étroites, car elles peuvent être dures à regarder.

La plupart des cartes fonctionneront bien avec deux polices (même si elles appartiennent à la même famille) : une pour le texte global et une pour le titre ou l'appel à l'action. Une autre chose importante à retenir lorsque l’on travaille avec la typographie est le contraste, qui rendra le texte plus facile à lire. Assurez-vous de prendre en compte les contrastes entre les polices et entre l'arrière-plan et le texte de chaque carte.

Limiter les éléments de l'interface utilisateur

N'oubliez pas : une carte équivaut à une action.

Cela signifie que vous n’avez pas besoin de disperser de nombreux éléments d’interface dans la conception, tels que des boutons. Vous n’en aurez peut-être pas du tout besoin. Mais si vous pensez toujours que l’utilisateur a besoin d’un repère visuel, un seul bouton suffit.

Gardez les formes et le design simples (encore une fois, Material Design est une excellente option) et essayez de ne pas créer plus d'un bouton.

Les boutons sont probablement le seul élément d’interface utilisateur dont vous aurez besoin. Efforcez-vous d’y parvenir.

Conclusion

Il n'existe pas de recette magique pour créer un design de carte parfait, mais il existe des techniques spécifiques qui inciteront les utilisateurs à cliquer là où vous le souhaitez. Efforcez-vous d'être plus proche de la réalité, choisissez le minimalisme avec beaucoup d'air et de contraste, privilégiez une typographie simple et indiquez une action pour chaque carte.

Traduction – Salle de garde

26.12.2016

Les cartes sont de jolis petits conteneurs d’informations.. Les cartes sont devenues presque un élément incontournable lorsqu’il s’agit d’équilibrer l’esthétique et la simplicité d’utilisation. La conception de cartes a été introduite à l’origine par des services tels que Pinterest et Facebook, et aujourd’hui son influence s’est étendue à de nombreux secteurs.

Une conception de carte bien exécutée peut améliorer l’UX (User Experience) de votre application. Dans cet article, je décrirai 5 techniques utiles pour mettre en œuvre la conception de cartes et donnerai quelques exemples intéressants.

• Lire aussi :

1. Suivez la règle « Une carte - un concept »

2. Toute la surface de la carte doit être cliquable

Suivre Loi de Fitts et permettre aux utilisateurs de cliquer/appuyer sur n'importe quelle partie de la carte, pas seulement sur des liens texte ou des images. Une grande zone de contact améliore considérablement la convivialité sur les écrans tactiles et les appareils utilisant une souris.

Conseil: c'est bien quand les cartes projettent une ombre, montrant de la profondeur - c'est confirme visuellement la cliquabilité de la carte.

3. Rendre les cartes attrayantes

La conception de cartes fonctionne grâce à une bonne conception et une excellente convivialité. En ajoutant de l'esthétique aux cartes, vous les rendez reconnaissables et créatives.

Lorsqu'il s'agit de conception de cartes, vous devez vous concentrer sur les points suivants :

Images

L’accent mis sur les images est la force de la conception des cartes. Recherche confirmer que les images « élèvent » le design. Ainsi, se concentrer sur l’utilisation des images rend la conception de l’interface de la carte plus attrayante pour les utilisateurs.

Ombres et dégradés

Les ombres et les dégradés ont parcouru un long chemin pour être ressentis et associés à leurs homologues physiques. Mais réfléchissez bien à la façon dont vous utilisez les ombres et les dégradés : si les ombres sont projetées sous tous les angles et sur tous les côtés, l'illusion que la carte est un objet physique sera ruinée.

Typographie

Vous pouvez également attirer l'attention de l'utilisateur à l'aide de texte. Tout dans la conception de la carte doit être facile à lire et à comprendre :

• Utiliser polices simples et palettes de couleurs (le texte est plus lisible sur un fond contrasté).
• Essayez d'utiliser un nombre minimum de polices. Pour la conception de cartes, une seule police suffit amplement.

Conseil: La police sans empattement standard est idéale pour les cartes.

• Lire aussi :

4. Limiter le contenu de la carte

Les cartes sont généralement concises et contiennent un lien pour accéder à des informations plus détaillées. Lorsque vous essayez de regrouper trop de contenu dans une carte en la rendant trop large ou trop longue, elle perd son message d'origine car elle ne ressemble plus à une carte.

Vous trouverez ci-dessous un exemple d'interface de carte. Remarquez la carte au milieu. Le problème est qu’elle contient beaucoup d’informations, ce qui rend la carte difficile à comprendre.

5. Profitez de l'animation et du mouvement

Les animations peuvent avoir un impact positif sur l'UX si elles sont utilisées correctement. Ils aident les utilisateurs à mieux naviguer dans l'interface de la carte et à établir des liens visuels entre les différents états de chaque carte.

Indices visuels

Les repères visuels aident les utilisateurs à comprendre la meilleure façon d'interagir avec l'interface utilisateur. Ce type d'animation est utilisé lorsque vous devez démontrer le fonctionnement de certaines fonctionnalités de conception.

Retour visuel

Le retour visuel est très important dans la conception d’interface. Cela fonctionne parce qu'il satisfait le désir naturel de l'utilisateur de confirmation. Dans la vraie vie, les objets réagissent à l’interaction, et c’est ce que les gens attendent des objets. Pour les applications de bureau ou les sites Web, vous pouvez utiliser l’effet de survol pour montrer que les objets peuvent interagir avec eux. L'animation au survol augmente le niveau de compréhension et rend en même temps l'expérience utilisateur plus divertissante.

En utilisant l'effet de survol, vous pouvez également ouvrir des options. Dans l'exemple ci-dessous, l'effet de survol permet aux utilisateurs de changer les couleurs, de répondre aux messages, de les envoyer ou de les supprimer.

Ainsi, dans cet article, je vais vous expliquer ce qu’est la « conception de cartes » et comment elle affecte la conception Web en général.

La croissance des technologies mobiles a progressivement conduit à une évolution de l’architecture des sites Web vers la réactivité et l’adaptabilité. Ces deux paramètres sont devenus obligatoires. Ces événements ont contribué au grand succès des « maps » - l'une des principales tendances du web design en 2015.

Cependant, nous pouvons affirmer avec certitude que les cartes ne sont pas seulement une mode en matière de conception, elles représentent l'avenir du développement Web, car elles constituent le meilleur moyen d'organiser et d'afficher le contenu de manière cohérente. Ainsi, dans cet article, je vais vous expliquer ce qu’est la « conception de cartes » et comment elle affecte la conception Web en général. Allons-y!

La conception de cartes à travers les âges

Même si les cartes ne sont devenues extrêmement populaires que récemment dans la conception de sites Web, elles constituent déjà un moyen de communication visuelle efficace depuis au moins mille ans. Introduites pour la première fois comme jeu dans la Chine impériale au IXe siècle, les cartes sont ensuite devenues utiles dans le monde des affaires.

En effet, au XVIIe siècle, les « cartes à collectionner » sont apparues pour la première fois à Londres, avec leur aide les gens trouvaient du travail : ce fut le premier exemple de « cartes de visite » modernes.

De nos jours, la carte est généralement une forme de coupon acheté dans un magasin ou un supermarché, les gens les récupèrent pour bénéficier de réductions spéciales.

La plupart d'entre nous n'ont qu'à regarder dans notre portefeuille pour voir des cartes de crédit, des cartes de fidélité, des cartes de magasin et même un permis de conduire ordinaire. Toutes ces cartes ont leurs propres normes.

Quoi qu'il en soit, il existe un lien étroit entre l'utilisation traditionnelle des cartes et leur utilisation dans la conception de sites Web : les cartes classiques contiennent des informations des deux côtés, tandis que les cartes Web redirigent les utilisateurs vers d'autres contenus.

Que sont les cartes sur Internet ?

Du point de vue d'Internet, nous pouvons définir une « carte » comme un petit rectangle associé à une pensée spécifique. Les cartes regorgent d'éléments interactifs tels que du texte, des liens ou des images. Mais ils ont tous le même objectif : vous diriger vers d’autres contenus lorsque vous cliquez dessus.

L’objectif principal des cartes est de fournir un aperçu rapide d’un sujet spécifique dans un espace confiné. Et si le lecteur est intéressé par l'actualité, il peut accéder en un clic à une nouvelle page avec le texte intégral. Les sites Facebook ou Twitter profitent de ces avantages et ont intégré un modèle de carte dans leur conception, affichant de grandes quantités de contenu tout en économisant un espace précieux.

Ainsi, la caractéristique la plus importante des cartes est l’idée d’interactivité. Lors du développement, les concepteurs doivent considérer que les cartes servent non seulement à afficher les actualités, mais qu'elles doivent également attirer l'attention du lecteur. C'est pourquoi les cartes affichent des likes, des republications ou des liens vers le texte intégral de l'article.

En plus de leur utilité, les cartes constituent un choix de conception courant en raison de leur compatibilité avec les frameworks réactifs. Le framework Chunked vous permet de créer des interfaces attrayantes et est idéal pour le développement mobile. La forme de la carte est extrêmement similaire à celle d’un smartphone moderne.
On parle souvent de mises en page « fluides ». Les cartes nous fournissent de petits éléments de contenu qui peuvent être utilisés pour « remplir » une page afin de l'adapter à différentes tailles et formes d'écran.

Pourquoi devriez-vous utiliser des cartes ?

Les cartes étant devenues universelles, elles peuvent être utilisées de différentes manières selon les fonctions recherchées. Voici quelques raisons pour lesquelles utiliser des cartes :

Il s’agit d’une tendance : les tendances sont de nature temporaire, mais en utilisant des cartes, vous pouvez efficacement rendre votre site célèbre.

Les cartes introduisent l'ordre : les cartes introduisent des couches d'organisation pour le contenu.

Les cartes sont idéales pour une conception réactive : elles s'intègrent facilement aux sites Web et aux applications mobiles. Plus important encore, sur les smartphones, les cartes peuvent facilement être empilées verticalement pour créer un fil d'actualité.

Les cartes encouragent l’économie de pensée : en raison de leur taille, les cartes ne pourront jamais stocker de grandes quantités d’informations. À première vue, cela peut sembler un inconvénient, mais je pense que c'est une bonne chose ! La carte doit afficher un court texte de l'article complet, encourageant les lecteurs intéressés à suivre le lien.

Elles sont sociales : les cartes sont parfaites pour les réseaux sociaux, non seulement en raison de leur utilisation, mais aussi parce que les cartes permettent aux utilisateurs de partager facilement des informations sur différentes plateformes sociales et par courrier électronique.

Tendances et approches modernes du développement Web

Apprenez l'algorithme pour une croissance rapide à partir de zéro dans la création de sites Web

L'importance du contenu est nivelée : les cartes vous aident à décider quel article il est préférable de placer en haut de la page. Lors de l’utilisation de cartes, des blocs de contenu d’égale importance peuvent facilement coexister sur une même page sans qu’il soit nécessaire de les classer. L'utilisateur décide de ce qui est important pour lui et de ce qu'il souhaite lire.

Qui utilise les cartes ?

Dribbler

La mise en page du site est basée sur des fiches contenant une image et quelques informations sur chaque design. Ce que j'aime dans Dribbble, c'est que vous pouvez cliquer sur une carte et voir tous les détails concernant le design, et vous pouvez également simplement survoler la carte et voir une petite description.

Pinterest

Lorsqu'on parle de conception de cartes, on ne peut s'empêcher de mentionner Pinterest. En fait, beaucoup de gens pensent que Pinterest a été le pionnier de la conception de cartes. Pinterest démontre clairement « l'importance de tout contenu » ; aucune carte sur le site ne se démarque visuellement de quelque manière que ce soit.

Twitter, utilisant une limite de 144 caractères par publication, est né avec une « mise en page de carte intégrée ». L'année dernière, le réseau social a lancé son propre produit appelé Twitter Cards, une application conçue pour vous aider à cartographier votre contenu lorsque vous le publiez sur le système. Les développeurs décrivent leur application comme étant capable de :

« Joignez de nombreuses photos, vidéos et autres contenus multimédias à vos tweets, ce qui générera du trafic vers votre site Web »

En conséquence, la page d'accueil de Twitter regorge désormais de cartes tweet. Lorsque vous cliquez sur l'un d'eux, le tweet se développe pour afficher du contenu ou des options supplémentaires.

Le gardien

Le célèbre journal britannique The Guardian a appliqué un design de carte à son site Web afin de « penser différemment et améliorer la découverte et la promotion du contenu ».

Ils ont pu créer une mise en page modulaire composée de différentes fiches : chacune liée à un titre et, lorsqu'on clique dessus, redirigée vers le texte intégral de l'article. Le site évoque un sentiment d'élégance et de propreté.

Conclusion

Les cartes sont une méthode utile pour créer des sites Web attrayants, et elles sont également extrêmement flexibles, vous permettant de mettre en œuvre une variété de mises en page. Tout cela a pour but de garantir que l'utilisateur est satisfait du site. La part de marché sans cesse croissante des tablettes et des smartphones consolidera également pour longtemps la conception de cartes au sommet du design Web.

Grâce à leur attrait visuel, les interfaces de cartes sont plus qu’une simple tendance.

En 2014, Internet sur les appareils mobiles a commencé à être utilisé plus souvent que sur les ordinateurs. C’est pourquoi le web design d’aujourd’hui privilégie les petits écrans et le responsive design devient incontournable. Que dire de 2018, où, selon les statistiques de l'agence de presse RNS, déjà 54 % des Russes utilisent l'Internet mobile. En conséquence, les styles d'interface simples tels que le nouveau design plat, le minimalisme et surtout les cartes sont désormais plus populaires que jamais.

L’adéquation du modèle d’interface utilisateur de la carte ne se résume pas à des temps de chargement rapides et à une adaptabilité à différentes tailles d’écran. Un contenu limité correspond à la durée d’attention de la plupart des utilisateurs Web (en particulier sur les appareils mobiles). Nourri par Pinterest puis popularisé par les réseaux sociaux comme Facebook et Twitter, le modèle de carte est désormais présent sur les sites Internet de tous les secteurs.

Dans cet article, nous explorerons l'essor du modèle d'interface utilisateur de carte : pourquoi il est pratique, comment il est compatible avec la conception réactive et matérielle, et à quoi s'attendre de lui à l'avenir.

Qu’est-ce que la conception Web de conteneurs ?

Pour comprendre ce modèle, vous devez d’abord comprendre ce que sont les cartes elles-mêmes. Les cartes sont généralement de petits conteneurs d'informations. Chaque carte a son propre thème. La fiche peut contenir n’importe quel contenu – visuel, texte, liens, etc. – mais toutes les informations sont dédiées à un seul sujet.

Remplir l’écran avec ces conteneurs d’informations indépendants est ce que The Guardian a appelé le « modèle de conteneur ». Il offre une interface claire et claire, idéale pour une navigation rapide, afin que l'utilisateur puisse trouver facilement ce qu'il cherche. (De plus, cette méthode est idéale pour les commandes tactiles, dont nous parlerons ci-dessous).

Pratique et attractif : les avantages du modèle d'interface utilisateur de la carte en quelques mots.

Trello permet aux utilisateurs de créer n'importe quelle carte de leur choix. N'importe qui peut créer des fiches de tâches et les classer selon ses besoins. Cela démontre non seulement la flexibilité du modèle de carte, mais également son pouvoir d’organisation. Trello prospère parce que son format de carte semble plus simple que la liste de tâches d'un planificateur traditionnel.

Êtes-vous intéressé? Lisez le dernier article avec une sélection des tendances TOP 18 de 2018.

Modèle d'interface utilisateur de carte sur un appareil mobile et conception réactive.

Comme indiqué précédemment, les cartes sont incroyablement compatibles avec le design réactif, ce qui en fait, selon les mots de Des Traynor d'Intercom, « l'avenir du Web ». Le modèle s'adapte bien aux appareils mobiles pour un certain nombre de raisons, que nous décrirons ci-dessous.

Premièrement, dans les cadres qui s'étendent et se contractent, la grille de cartes peut se restructurer pour s'adapter à n'importe quelle position ou taille d'écran. Les concepteurs peuvent modifier la taille des cartes à leur guise (et également les ajuster les unes aux autres). Par exemple, vous pouvez définir une largeur fixe et une hauteur variable avec un espacement constant entre les cartes. Nous l'utilisons tout le temps lors de la création de sites Web réactifs.

Comparez la capture d'écran du site Web de The Verge ci-dessus avec sa version mobile ci-dessous :

Remarquez comment le texte, les images et le motif de couleur restent les mêmes. Lors du développement d’une conception Web adaptative, les cartes vous permettent d’obtenir une conception cohérente sur différents appareils. Cet avantage peut être constaté dans le laboratoire de conception UXPin gratuit. Remarquez à quel point la mise en page passe de la version mobile au mode d'affichage plein écran.

Zone de visualisation de la version mobile :

Zone d'affichage plein écran :

Un autre avantage réside dans la compatibilité tactile de la conception basée sur la carte. Sur les écrans tactiles, les cartes font office de boutons. L'idée est simple : cliquez sur une carte pour accéder au contenu. Comme le montre la loi de Fitts appliquée à la conception Web, plus le bouton sur lequel cliquer est grand, plus il est facile à utiliser. À quelle fréquence devons-nous nous battre avec de minuscules boutons sur les appareils mobiles ?

Conception de cartes et de matériel

La conception matérielle, idéale pour , s'appuie fortement sur les cartes, et leur analyse technique détaillée nécessitera beaucoup d'espace. Donc, si vous souhaitez une explication complète, cela vaut la peine de lire les descriptions des cartes dans le guide de conception matérielle.

Développement de sites internet. L'avenir de la conception de cartes.

Étant donné que le modèle d’interface utilisateur de la carte change constamment de forme pour répondre aux nouvelles exigences, il aura probablement le plus grand impact sur la conception réactive et des applications. Ce changement repose en partie sur l’impact page par page de la conception matérielle sur les applications Android.

1. Technologie

Les cartes peuvent ne pas rester statiques longtemps. À mesure que les implémentations Web s'améliorent, leur capacité à prendre en charge davantage de contenu multimédia augmentera également. Nous verrons probablement des éléments beaucoup plus granulaires, tels que le contenu à actualisation automatique, qui ne ralentiront pas l'expérience globale.

De plus en plus, les vidéos remplaceront les images (une idée avec laquelle certains designers jouent depuis des années). Utilisez votre interface (ci-dessus) utilise des cartes GIF animées qui remplissent la page d'accueil de tonnes d'informations.

2. Approfondissement des interactions

Dans un avenir proche, la créativité dans l’utilisation des cartes pourrait également augmenter, et celles-ci ne seront plus de simples liens. Comme nous le voyons avec la conception matérielle, les cartes varient selon le niveau d'interaction entre elles et l'environnement, comme le tri automatique et les mises à jour en temps réel (par exemple, les prévisions météorologiques).

Windows Phone a déjà introduit le tri automatique des cartes, mais cette approche pourrait potentiellement être appliquée aux utilisateurs d'autres appareils mobiles.

3. Taille

Conformément à la tendance des personnages de bandes dessinées, les cartes appliquent également une politique « plus c'est gros, mieux c'est ».
Les cartes plus grandes permettent plus de détails et une typographie complexe, ce qui signifie plus de possibilités pour un design visuel époustouflant. Utilisées en alternance avec des cartes plus petites, les grandes cartes offrent une plus grande liberté visuelle.

COMMENT Arkitekter (ci-dessus) mélange les cartes de grande et moyenne taille dans la navigation. Certaines cartes sont des liens, tandis que d'autres présentent simplement des informations statiques. De larges espaces séparent les cartes, donnant au design une sensation aérée.

4. Appareils portables

Grâce aux Google Glass, les cartes sont désormais devenues un élément central de la conception de l'interface utilisateur des appareils portables.

Même si les critiques peuvent considérer les Google Glass comme un échec commercial, certains pensent qu'elles ont une chance sur le marché. Quoi qu’il en soit, les appareils portables doivent utiliser efficacement l’espace. Et dans ce cas, les cartes seront le choix le plus pratique.

Développement du site Internet 2016-2018. Conclusion

Les conceptions de cartes deviennent la base de l’organisation et des fonctionnalités dans tous les environnements et appareils. Leur forme actuelle peut changer à mesure qu’ils évoluent avec la technologie, mais leur présence est garantie. Après tout, les zones numérisées sur les écrans ne constituent pas la principale forme de carte. N'oubliez pas que jusqu'à récemment, une carte n'était qu'un morceau de papier contenant un ensemble d'informations sur un sujet précis.

Lisez l'article sur un autre - bichromie ou duplex.

Aussi fonctionnelles que belles, les interfaces de cartes ne sont pas qu’une tendance. Depuis que le trafic Web mobile a dépassé celui des ordinateurs de bureau en 2014, le design réactif est devenu la norme du secteur et les concepteurs Web concentrent leurs efforts sur les petits écrans. En conséquence, les styles simples tels que le plat, le minimalisme et surtout les cartes gagnent en popularité sans précédent.

Le modèle de carte est pratique non seulement parce qu'il réduit le temps de chargement des pages et simplifie la mise à l'échelle des interfaces pour différents écrans. De petits éléments de contenu correspondent à la capacité d'attention des internautes (en particulier ceux qui utilisent des appareils mobiles). Inspiré de Pinterest et popularisé par les réseaux sociaux comme Facebook Et Gazouillement, les interfaces de cartes peuvent aujourd'hui être vues sur des sites Web sur n'importe quel sujet. Dans cet article, nous examinerons le modèle d'interface utilisateur de la carte dans son intégralité : ce qu'il a de bien, comment il s'intègre dans les concepts de conception adaptative et matérielle, et à quoi s'attendre de lui à l'avenir.

Source : officiellement oui

Qu’est-ce que la conception basée sur des conteneurs ?

Pour comprendre le modèle, vous devez d'abord comprendre l'idée de la carte elle-même.

Essentiellement, les cartes sont de petits conteneurs d’informations, et chaque carte véhicule une pensée indépendante. Il peut contenir tout type de contenu : image, texte, liens, etc. - toutes les cartes sont unies par un thème commun.

Les utilisateurs de Trello peuvent créer toutes les cartes de leur choix. N'importe qui peut créer des cartes avec des listes de tâches et les trier comme il le souhaite.
Cet exemple montre à quel point les cartes peuvent être flexibles et démontre également leur capacité à organiser les informations. Trello doit sa popularité au fait que les cartes semblent plus simples aux utilisateurs que les listes de tâches habituelles utilisées par d'autres gestionnaires de tâches.

Cartes dans les interfaces des sites mobiles et responsives

Comme je l'ai déjà écrit, les interfaces de cartes se marient bien avec les frameworks réactifs, c'est pourquoi Des Traynor d'Intercom lui-même les a appelés l'avenir du Web. Ce modèle d'interface utilisateur s'applique bien aux appareils mobiles pour de nombreuses raisons - nous en parlerons maintenant.

Source : Le bord

Premièrement, dans les cadres évolutifs, les structures de cartes peuvent être reconstruites pour s'adapter à n'importe quel point d'arrêt ou taille d'écran. Les concepteurs ont la possibilité de jouer avec le rapport entre la largeur et la hauteur des cartes et avec la manière dont les groupes de cartes sont liés les uns aux autres. Par exemple, les cartes peuvent avoir une largeur fixe et des hauteurs différentes avec un espacement spécifié entre elles.

Comparez les fenêtres de bureau (ci-dessus) et mobiles (ci-dessous) de The Verge :

Source : The Verge (site mobile)

Faites attention aux textes, images, dégradés – ils sont les mêmes dans les deux versions. Les cartes vous permettent de créer une expérience utilisateur unifiée et de la diffuser sur tous les appareils.

Vous pouvez voir ce principe en action en visitant la page Bibliothèque gratuite pour les concepteurs sur le site Web UXPin. Remarquez avec quelle fluidité la mise en page passe de la fenêtre d'affichage mobile à la fenêtre plein écran.

Fenêtre mobile :

Source : UXPin

Écran haute résolution :

Source : UXPin

Un autre avantage des cartes est qu’elles fonctionnent très bien comme commandes gestuelles. Sur les écrans tactiles, les cartes se transforment en boutons sans aucun effort supplémentaire. L'idée est simple : appuyez sur la carte pour commencer à interagir avec le contenu.

L'avenir des cartes

Le modèle d'interface utilisateur basé sur les cartes évolue constamment pour relever de nouveaux défis, la plupart en matière de conception réactive et d'applications. Comme nous l’avons évoqué dans Web Design Trends 2015 & 2016, ces changements sont en partie dus à l’impact du Material Design sur les applications Android.

1. Technologie
Bientôt, les cartes pourront devenir dynamiques. À mesure que les sites deviennent plus productifs, ils peuvent prendre en charge des ressources multimédias plus complexes. Nous pouvons voir des éléments avec plus de détails, tels que du contenu auto-rafraîchissant, sans ralentir l'expérience utilisateur.