Un écran divisé en deux.

La technique de l’écran partagé est connue depuis longtemps dans l’industrie cinématographique, avec les premiers exemples remontant aux journées du cinéma muet du début du XXe siècle, et elle demeure un appareil populaire au cinéma et à la télévision.

001

Une disposition en écran partagé est utilisée lorsque les éléments en plein écran sont divisés en deux parties verticales ou plus. Une scène du film "Scott Pilgrim vs the World"

Cependant, il s'agit d'une technique relativement nouvelle pour l'industrie du design web. Les écrans partagés ne sont devenus populaires que vers la mi-2016 et nous avons maintenant de plus en plus de sites Web qui utilisent ce modèle de conception. Il y a quelques raisons pour lesquelles ce modèle de conception est devenu si populaire:

  • Il a une belle qualité esthétique. Lorsqu'il est exécuté correctement, il peut offrir aux utilisateurs une expérience de visionnage exceptionnelle.
  • C'est un bon choix pour les cadres réactifs. La conception à écran partagé peut être adaptée à une variété d'écrans, même les plus petits. En ce qui concerne les écrans plus petits, tels que les écrans mobiles, les panneaux peuvent être empilés.
  • Il aide à guider la navigation. En utilisant des techniques de conception simples, vous pouvez attirer l'attention de l'utilisateur sur une partie spécifique de l'écran ou les encourager à cliquer.

Lorsque l'écran partagé fonctionne le mieux

L'écran partagé est particulièrement utile lorsque vous avez deux choses à promouvoir. Par exemple, lorsqu'un site offre deux variantes totalement opposées. Cette approche permet aux concepteurs de mettre en évidence les deux choses et de permettre à l’utilisateur de les sélectionner rapidement.

002

Un écran, deux messages dans les guides Dropbox

Lorsque vous devriez éviter l'écran partagé

Les conceptions sur écran partagé ne s’étendent pas bien au fur et à mesure que le contenu se développe, il n’est donc pas recommandé de les appliquer à des mises en page de contenu lourd. Il est important de garder les écrans simples car les écrans fractionnés complexes donnent l'impression que l'interface utilisateur est surchargée d'informations. C'est la raison pour laquelle la disposition sur écran partagé serait parfaite pour les conceptions de sites Web minimalistes.

Comment décider si l'écran partagé est bon pour vous

Si vous envisagez une technique d'écran partagé pour votre site Web, je vous conseille de vous poser quelques questions:

  • Est-ce adapté à votre contenu?
  • Y aura-t-il suffisamment d'espace négatif pour que la mise en page fonctionne?
  • Vos utilisateurs apprécieront-ils la mise en page ou les confondreont-ils?
  • Sera-t-il possible de diviser en deux l'attention de vos utilisateurs?

La chose la plus importante à garder à l'esprit est que le contenu est roi et que l'écran partagé devrait être un moyen simple de transmettre votre message aux gens.

Techniques de conception pour les écrans divisés

1. Paire de couleurs vibrantes et typographie dramatique

Grâce à Flat and Material Design, les couleurs vives et la typographie dramatique sont désormais des tendances majeures. Les couleurs vibrantes sont visuellement stimulantes et la typographie dramatique améliore le contenu du texte. Combinez simplement les deux et vous créerez un design visuellement intéressant. Baesman l'a fait magistralement. Ils accordaient une importance égale aux deux éléments tout en permettant à l’utilisateur de choisir entre eux rapidement.

003

Des couleurs vives et des paires de typographies intéressantes peuvent ajouter de l'intérêt

2. Attirer l'attention de l'utilisateur sur le bouton CTA

Bien plus qu'une simple tendance graphique, diviser l'écran en deux parties distinctes offre un moyen original de guider l'utilisateur sur votre site. C'est une excellente option lorsque vous souhaitez créer un plus grand point focal pour les appels à l'action. Dans l'exemple ci-dessous, vous pouvez voir comment l'espace négatif crée une division verticale pour donner une pondération égale à deux options différentes.

004

La division verticale permet de mettre l'accent sur deux CTA différents sans privilégier non plus

3. Créer un flux visuel entre "écrans"

Lorsque l'écran partagé représente un objet unique, il est important d'établir une connexion entre les conteneurs de contenu. Une façon possible de le faire est d'utiliser une couleur. Il suffit de dupliquer une couleur distincte pour établir un flux visuel entre deux écrans. Cela fonctionne particulièrement bien avec une couleur de marque ou une teinte très contrastée. En utilisant la couleur, il est possible de communiquer une connexion plus forte entre deux éléments de contenu.

Une autre façon possible de créer une connexion forte consiste à superposer un seul élément, tel que la copie de texte, sur plusieurs écrans:

005

Texte superposé connecte deux écrans

Last but not least, vous pouvez utiliser une superposition colorée à cette fin:

006

Considérez la partie gauche de l'écran

4. Utiliser l'animation pour encourager les utilisateurs à agir

Une animation fine et des effets interactifs encouragent les utilisateurs à cliquer. Regardez le design utilisé pour le " Chekhov est vivant "Site ci-dessous. Le design vous demande de cliquer pour trouver votre personnage.

007

Conclusion

Il faut environ trois secondes à un visiteur pour prendre une décision concernant votre site Web. Par conséquent, vos mises en page doivent toujours être adaptées aux visiteurs si vous souhaitez réduire les taux de rebond. La technique de l'écran partagé peut vous aider. Les modèles à écran partagé sont un moyen amusant, fonctionnel et réactif de créer un design engageant.