Les tendances de conception d'interface utilisateur peuvent aller et venir sur le Web, mais plusieurs modèles d'interface utilisateur ont résisté à l'épreuve du temps. Qu'est-ce qui rend un modèle d'interface utilisateur intemporel? Adhésion aux meilleures pratiques de mise en page Web qui se traduisent par une combinaison de convivialité et d'adaptabilité aux tendances et aux technologies changeantes.

Il existe quelques critères qui font perdurer les modèles d'interface utilisateur. La convivialité en fait partie. Un modèle d'interface utilisateur qui 'semble incroyable' mais qui ne facilite pas une grande convivialité n'est pas celui qui durera longtemps .

Les modèles d'interface utilisateur les plus utiles sont également adaptables aux tendances changeantes. Des mises en page de type carte et basées sur une grille, par exemple, peuvent être implémentées en Concepteurs d'interface utilisateur de différentes manières. L'adaptabilité leur permet de continuer à paraître modernes et à la mode, même s'ils existent depuis des années. La même chose est vraie pour les autres modèles d'interface utilisateur inclus ici.

Modèles de mise en page Web de type carte

Les mises en page de type carte ont été popularisées par des sites comme Pinterest, Facebook et Twitter. Ils sont devenus la norme sur les sites d'actualités et les blogs, car ils sont bien adaptés pour placer beaucoup de contenu sur une page tout en gardant chaque élément distinct.

Comme leur nom l'indique, ces mises en page utilisent des blocs de contenu qui ressemblent à des cartes physiques de différentes formes et tailles. Il existe deux formats de mise en page principaux. Une mise en page organise les cartes de dimensions égales sur une grille (comme indiqué sur le Page d'accueil du blog de conception ApeeScape ), tandis que l'autre utilise une mise en page fluide avec des cartes de différentes tailles disposées en colonnes ordonnées mais sans lignes distinctes (comme Pinterest Mise en page de).

Les mises en page de type carte fonctionnent bien car elles permettent d'organiser différents contenus de manière ordonnée tout en gardant toutes les pièces séparées. Les cartes sont également familières aux gens car elles reconnaissent les objets en forme de carte du monde réel. Ils ont un sens psychologique et sont faciles à utiliser pour les internautes, même s’ils sont nouveaux sur un site Web.

Dispositions en écran partagé

Techniquement, les dispositions en écran partagé remontent à 1903 , au film La vie d'un pompier américain par Edwin S. Porter. Mais dans la conception de l'interface utilisateur Web, les mises en page en écran partagé ont commencé à gagner en popularité en 2013 et à prendre de l'ampleur en 2016.

Les mises en page en écran partagé sont un choix de conception populaire lorsque deux éléments doivent avoir le même poids sur une page et sont souvent utilisés dans les conceptions où le texte et une image doivent tous deux être mis en évidence. Les placer côte à côte au lieu de verticalement ou avec un texte superposant l'image est un choix de conception conscient qui peut donner une qualité sophistiquée et minimaliste. Deux images placées côte à côte sont également couramment vues, parfois avec des superpositions de texte.

La plupart des conceptions d'écran partagé sont divisées assez uniformément, bien que certaines soient divisées à des rapports différents. (33:66 ou 40:60 semblent être les ratios les plus populaires; quand un écran est divisé en une taille plus petite que ⅓, cela ressemble plus à une barre latérale qu'à un véritable design d'écran partagé.)

Les conceptions en écran partagé sont particulièrement bien adaptées aux pages produits sur les sites de commerce électronique. Les images des produits doivent figurer en bonne place sur ces pages, tout comme les informations essentielles telles que le prix, les spécifications, les boutons d'ajout au panier et les options de produit.

Grande typographie

La grande typographie existe depuis l'avènement du Web, mais elle a gagné en popularité lorsque le design mobile est devenu courant.

Grand type est particulièrement populaire dans les en-têtes et les titres, mais il est également visible dans le corps du texte sur certains sites. Lorsque la bonne police est choisie, un texte plus grand est plus lisible et améliore l'expérience utilisateur. De plus, il fait une déclaration visuelle puissante. Il est particulièrement populaire dans le design minimaliste, où les autres éléments visuels sont pour la plupart absents.

Personnalisation

Personnalisation Les algorithmes existent depuis des années, adaptant les expériences numériques aux préférences de chacun. L'IA a rendu ces algorithmes encore plus utiles, avec des fonctionnalités telles que des algorithmes de suggestion qui peuvent désormais prédire avec précision ce qu'une personne voudra regarder, lire, apprendre ou acheter ensuite.

Avec les sites d'adhésion, les gens veulent voir du contenu qui répond à leurs désirs et besoins. Sur la base des choix précédents des abonnés, Netflix dispose d'algorithmes prédictifs supérieurs qui proposent les films et les émissions qu'ils sont les plus susceptibles de regarder. Des sites comme Moyen montrer aux internautes des articles qu'ils apprécieront probablement lorsqu'ils se connecteront, en fonction à la fois de ce qu'ils ont lu et apprécié précédemment.

Mais la personnalisation peut aller trop loin. Les algorithmes des réseaux publicitaires sont devenus si avancés qu'ils peuvent parfois prédire ce que les gens pourraient être intéressés à acheter, même s'ils n'ont pas recherché un produit en ligne ou l'ont mentionné d'une autre manière. Ce niveau de prédiction peut parfois donner l'impression aux gens d'être espionnés. Pour cette raison, il est sage de Concepteurs d'interface utilisateur utiliser la personnalisation avec précaution.

Grilles

Les grilles font depuis longtemps partie de la conception de l'interface utilisateur, à commencer par les mises en page basées sur des tableaux à la fin des années 1990 (bien qu'elles aient été utilisées dans la mise en page imprimée pour des choses comme des livres et des journaux bien avant cela). Lorsque CSS a gagné en popularité pour la création de mises en page, des systèmes de grille plus élégants ont été développés, le premier exemple notable étant le Grille 960.gs .

Les grilles fournissent un équilibre visuel et un ordre à une conception, ce qui facilite la consommation du contenu pour les gens. Dans le même temps, les grilles peuvent offrir une grande flexibilité dans une mise en page Web. La majorité des systèmes de grille utilisent 12 ou 16 colonnes avec des gouttières entre les deux. Certains sites Web qui utilisent des mises en page basées sur des grilles font des grilles une caractéristique importante de la conception. En revanche, d'autres sont plus subtiles, la grille ne devenant apparente qu'après une inspection minutieuse (et parfois uniquement lorsqu'une grille réelle est superposée sur le dessin).

En plus des grilles de mise en page basées sur des colonnes, grilles de ligne de base sont couramment utilisés dans la conception Web pour espacer les éléments horizontalement de manière logique. C'est plus évident dans la typographie lors de l'examen de l'espacement entre les lignes du corps du texte et les titres, par exemple. L'espacement horizontal de la grille de base est étroitement lié à l'espacement vertical de la grille utilisé dans la conception Web.

Mises en page Web de style magazine

Les industries des nouvelles et des périodiques ont fortement influencé les présentations de style magazine sur le Web. Au début, ils étaient principalement vus sur les sites Web d'information et les magazines en ligne. Avec le temps, leur popularité a augmenté dans d'autres secteurs et ils sont maintenant vus sur différents types de sites, y compris les sites de commerce électronique et les blogs.

Les mises en page de style magazine incluent un article en vedette (ou parfois plusieurs articles en vedette dans un carrousel ou un format similaire), ainsi que des articles secondaires et tertiaires sur la page d'accueil. Ils ont également tendance à avoir plusieurs colonnes pour le contenu, parfois divisées en sections. Ces mises en page Web fonctionnent bien pour les sites avec beaucoup de contenu, en particulier ceux avec du contenu frais ajouté quotidiennement.

Mises en page sur une seule page

Les mises en page d'une seule page placent tout le contenu principal d'un site sur une seule page Web. La navigation se fait par défilement, souvent avec des raccourcis pour accéder à des sections particulières et parfois avec des effets de défilement de parallaxe. Parfois, ils peuvent utiliser des pages secondaires pour les conditions générales, les politiques de confidentialité ou d'autres informations qui ne font pas partie du contenu principal, mais cela ne devrait pas empêcher la mise en page d'être considérée comme une seule page.

Une seule page les mises en page de sites Web sont une excellente solution pour les sites avec un contenu clairsemé. Ils constituent également un choix idéal pour les contenus narratifs, tels que les livres interactifs pour enfants.

Modèles F et Z

Les motifs F et Z font référence à la façon dont l'œil d'une personne se déplace sur la page, à la manière dont les gens analysent le contenu. Une Motif F présente un contenu proéminent en haut de la page, avec du contenu supplémentaire aligné en dessous le long du côté gauche de la page (en gros en forme de «F»). UNE Motif en Z a un contenu proéminent en haut, avec un contenu supplémentaire précieux plus bas. L'œil est dessiné en diagonale du coin supérieur droit vers le coin inférieur gauche de la page (en gros en forme de «Z»).

Les modèles F sont adaptés aux pages avec plus de contenu que les modèles Z, où il existe une hiérarchie visuelle très définie. Les modèles en Z sont plus utiles lorsqu'il y a deux éléments de contenu également pertinent (ou presque également) que le visiteur devrait voir.

Asymétrie

Dans les termes les plus simples, l'asymétrie est l'absence de symétrie. Dans la conception, asymétrie crée un impact visuel plus dynamique et organique. Dans la plupart des cas, l'asymétrie est créée à l'aide d'images et de texte qui ne s'équilibrent pas parfaitement. L'asymétrie peut également être créée ou renforcée via des éléments d'arrière-plan, comme l'utilisation d'un motif différent entre différentes sections de page.

Étant donné que l'asymétrie crée une impression visuelle dynamique et énergique, elle est utile pour les marques qui souhaitent communiquer ce type d'image. L'asymétrie peut également être inattendue, ce qui rend les conceptions plus mémorables et a des utilisations pratiques lorsque le contenu inclus ne fonctionnerait pas bien dans une mise en page symétrique.

Mises en page Web propres et simples

Les mises en page propres et simples sont passées et démodées dans la conception d'interface utilisateur depuis des décennies, bien qu'elles le soient le plus souvent. La beauté de ces mises en page est qu'elles se concentrer carrément sur le contenu, sans encombrement visuel .

Des mises en page propres et simples conviennent à pratiquement tous les types de sites Web. La plupart des autres modèles d'interface utilisateur ici fonctionnent bien avec des dispositions propres. Il existe des versions épurées de grilles, de mises en page de style magazine, de conceptions asymétriques et de dispositions en écran partagé. La plupart des sites Web les plus élégants peuvent être considérés comme «propres», quelles que soient les autres caractéristiques de conception qu'ils peuvent intégrer.

Onglets de navigation

Les onglets de navigation étaient à l'origine un pilier de la conception skeuomorphique, ressemblant à des onglets sur des dossiers de fichiers ou des séparateurs de classeurs. Cependant, au fur et à mesure de sa maturation, la navigation par onglets ne ressemble pas toujours à un onglet réaliste. Au lieu de cela, une caractéristique des onglets de navigation est que chaque élément d'un menu a une séparation visuelle des autres éléments de menu. Parfois, c'est subtil, et parfois, cela n'apparaît que lorsqu'un élément de menu est sélectionné ou survolé.

Les onglets de navigation sont mieux adaptés aux menus plus petits avec seulement une poignée d'éléments. Sinon, ils peuvent paraître encombrés. Cependant, ils peuvent être combinés avec des listes déroulantes pour les sous-menus à ajouter à leurs fonctionnalités. Ils sont également généralement vus dans la navigation horizontale, bien qu'il existe des exemples verticaux.

Carrousels

Les carrousels de contenu se trouvent généralement dans la section d'en-tête ou de héros d'un site Web. Ils contiennent souvent des images en conjonction avec du texte, même si certains ne peuvent inclure que l'un ou l'autre. Ils sont utilisés pour afficher plusieurs éléments de contenu dans une seule section d'un site Web lorsque l'espace est limité.

Les carrousels fonctionnent très bien pour quelques utilisations. Le contenu présenté sur un blog ou un site d'actualités est bien adapté aux carrousels. Les produits, les promotions et les ventes sont également couramment présentés dans les carrousels des sites de commerce électronique. Bien que les carrousels apparaissent généralement en haut d'une page Web, ils peuvent également être utilisés dans les sous-sections pour mettre en évidence le contenu associé. Ils constituent un choix populaire pour le contenu de la page d'accueil et des pages individuelles pour des catégories spécifiques de contenu ou de produits.

Meilleures pratiques de mise en page Web intemporelle

La conception intemporelle de l'interface utilisateur est adaptable et conviviale. Il fonctionne pour divers cas d'utilisation et est aussi beau aujourd'hui qu'il y a 10 ans (et sera tout aussi beau dans 10 ans) avec seulement des modifications mineures.

Le respect des meilleures pratiques de mise en page Web tout en incorporant des éléments de conception d'interface utilisateur intemporels produira un site Web qui n'a pas l'air ou ressentir daté dans un court laps de temps. Il permet Concepteurs d'interface utilisateur pour créer des expériences numériques qui ravissent les utilisateurs et atteignent les objectifs de la marque.

---

Dites-nous ce que vous en pensez! Veuillez laisser vos pensées, commentaires et commentaires ci-dessous.

• • •

Lectures complémentaires sur le blog ApeeScape Design:

• Ne vous appelez jamais un concepteur d'interface utilisateur: l'interface utilisateur est UX
• UI vs UX - Le guide essentiel de la conception d'interface utilisateur
• Le monde est notre interface - L'évolution de la conception de l'interface utilisateur
• Conception de l'interface utilisateur future sans boutons
• Meilleures pratiques de conception d'interface utilisateur et erreurs courantes

Comprendre les bases

Quelle est la meilleure mise en page de site Web?

La meilleure présentation du site Web dépend de la finalité du site Web et de son contenu. Ce qui peut être «meilleur» pour un site peut être complètement faux pour un autre. Le respect des meilleures pratiques de mise en page Web permet une flexibilité dans la conception exacte de chaque site Web afin de l'adapter au mieux aux utilisateurs.

Qu'est-ce qui fait une bonne mise en page de site Web?

Les bonnes mises en page de site Web sont adaptées au contenu qu'elles présentent, donnent la priorité à l'expérience utilisateur en plus (ou au-dessus) de l'esthétique, et peuvent supporter l'évolution des technologies et des tendances de conception. En suivant les meilleures pratiques de mise en page Web et les modèles de conception d'interface utilisateur intemporels, vous obtenez de bons sites Web.

fuite de numéros de carte de crédit avec de l'argent

Que faut-il garder à l'esprit lors de la conception d'un site Web?

La chose la plus importante à garder à l'esprit lors de la conception d'un site Web est de savoir comment les décisions de conception affecteront les personnes qui utiliseront le site Web. Le respect des meilleures pratiques et des normes de mise en page Web et la réalisation de recherches suffisantes sur les utilisateurs contribuent à garantir une expérience utilisateur positive qui atteint également les objectifs de la marque.

Pourquoi la mise en page d'un site Web est-elle importante?

La mise en page d'un site Web détermine en grande partie la façon dont les visiteurs de ce site Web consommeront et interagiront avec le contenu présenté sur le site. Une excellente conception de la mise en page Web renforcera le contenu du site tout en le rendant plus facile à consommer et en offrant une expérience positive aux visiteurs.

Quelles sont les tendances de conception Web?

Les tendances de conception Web incluent des modèles et des pratiques de conception qui sont actuellement populaires. Dans certains cas, ce qui commence comme une tendance améliore l'expérience utilisateur au point qu'elle devient une norme ou une meilleure pratique. Les modèles tels que les mises en page basées sur des cartes, la conception de la grille et l'asymétrie entrent tous dans cette catégorie.