Il est temps de parler de la conception du premier écran. Le premier écran est le premier aperçu qu'un utilisateur accède à votre site Web. Tout ce qui est au-dessus du parchemin, que l'utilisateur accède à un site Web à partir d'un ordinateur de bureau, d'une tablette ou d'un appareil mobile.
Les informations que vous incluez sur ce? Premier écran? est la clé du succès du site Web. La conception peut séduire et laisser les utilisateurs cliquer, ou les forcer à quitter la page. Que doit-on afficher à l'écran avant que les utilisateurs ne commencent à faire défiler? Nous allons jeter un coup d'oeil.
1. Créer un premier écran distinct
Cela commence par une première impression. Votre site Web devrait en créer un avec un impact.
Visez gros avec un visuel - photo, vidéo ou illustration - pour conquérir le public tout de suite. L'image doit être quelque chose que les gens ne peuvent pas arrêter de regarder. Et il devrait être totalement à vous et ne ressemble à aucun autre site Web.
Associez cette image à quelques mots clés pour dire aux utilisateurs pourquoi ils sont là et ce que votre site a à offrir. (C’est votre meilleure chance de vendre l’avantage de cliquer sur votre site.)
Voici la chose qui rassemble tous les éléments: le premier écran doit correspondre exactement à ce premier écran. Le contenu doit être mis à l'échelle en fonction du périphérique afin que toute l'image et toute la copie associée soient clairement visibles sans un seul défilement.
2. La navigation devrait être intuitive
Fini le temps où la navigation devait parcourir la hauteur de la page dans une barre latérale ou en haut de l'écran. Les styles de navigation masqués et surgissants sont devenus si populaires (en partie grâce au mobile) qu’ils sont acceptables pour toutes les conceptions de sites Web.
Mais ne cachez pas la navigation et ne la rendez pas difficile à utiliser. Qu'on le veuille ou non, le menu de navigation de style hamburger est devenu l'utilisation principale de la navigation cachée. Les utilisateurs ont appris à l'utiliser et peuvent facilement trouver des informations sur les pages.
Assurez-vous de placer votre icône empilée dans un emplacement facile à localiser - vous pouvez la rendre plus grande qu'une icône typique - et assurez-vous que la navigation est entièrement fonctionnelle avec ce clic. Uve, ci-dessus, fait un excellent travail avec une icône de menu hamburger bien visible qui s’étend à une liste d’options en plein écran. Et le meilleur de tous, les utilisateurs n'ont pas à deviner comment l'utiliser.
3. Créer un point focal
Lorsque vous travaillez sur une seule toile, telle que le premier écran, il est important de créer un seul focus ou un seul message. Les utilisateurs se sont rendus sur votre site, intentionnellement ou par hasard, et ont besoin de savoir de quoi il s'agit.
Un seul concept visuel peut aider les utilisateurs à créer cette idée de qui et de qui vous êtes. Cela peut être accompli avec des images ou du texte de différentes manières.
Bien que les styles complexes puissent fonctionner, commencez par penser simplement. Le minimalisme est à la fois une mode et un moyen efficace de transmettre des informations.
4. Écrire une copie avec un but
Considérez le premier écran comme une couverture de livre et non comme la première page d'un roman.
Il devrait inclure juste assez de copie pour aider les utilisateurs à s'engager. Un simple titre et un petit bloc de copie suffisent généralement à le faire. Bien que les mots soient peu nombreux, cela peut être un processus qui demande beaucoup de travail. Rédaction concise, copie claire peut être difficile.
Pensez aux objectifs de votre site comme référence. Pourquoi les utilisateurs sont ici? Que voulez-vous qu'ils fassent? Utilisez la copie pour créer cette connexion et commencez à raconter votre histoire. N'oubliez pas de vendre les avantages de votre site à l'utilisateur.
5. Donne aux utilisateurs quelque chose à faire
Les sites Web offrent des expériences visuelles distinctes, mais ils doivent également fournir aux utilisateurs une raison de rester. Votre premier écran doit donner aux utilisateurs quelque chose à faire.
Les actions peuvent inclure:
- Remplir un formulaire, par exemple fournir une adresse électronique
- Jouer à un jeu
- Partage sur les réseaux sociaux
- Parcourir les articles d'auge à vendre
- Commenter ou interagir avec le contenu
- Regarder un film ou un diaporama
Non seulement votre premier écran devrait inclure l'une de ces actions, mais il devrait être parfaitement clair en quoi consiste l'action et ce que l'utilisateur doit faire. La conception doit les attirer suffisamment pour qu’ils se sentent obligés de le faire.
Le site Web du film The Big Short, ci-dessus, offre aux utilisateurs de nombreuses activités. Les clips vidéo suffisent à vous intéresser au film, et un bouton vous permet de regarder la bande-annonce. Intéressé par cette histoire vraie? Il y a un bouton pour rencontrer les experts. Avez-vous déjà vu et voulez partager vos pensées? Il y a des boutons de médias sociaux. Il existe de nombreuses façons d'interagir avec le site dès le début.
6. Faire de la place pour la marque
Un site Web ne fera pas beaucoup de bien si vous ne savez pas à qui il appartient. Le premier écran devrait inclure au minimum un logo ou une connexion à la marque derrière le site.
Une marque ou un nom d'entreprise crée la légitimité et la crédibilité. Cela rend le site plus "réel". (Ceci est particulièrement important pour les sites qui incluent tout type de transactions financières ou personnelles, afin que les utilisateurs sachent qui obtient leurs informations.)
Les grandes marques peuvent s’en sortir avec des marques plus petites sur leurs premiers écrans car il est probable que beaucoup de gens les connaissent déjà. (Qui connaissez-vous qui ne reconnaîtrait pas les arches dorées qui sont devenues le symbole de McDonald's?) Pour les petites marques, il est important de clairement afficher un logo et un style pour créer une identité à laquelle les utilisateurs peuvent s'associer.
7. Minimiser les distractions
Ne donnez pas trop aux utilisateurs à regarder ou à traiter sur ce premier écran. Il devrait être simple, rationalisé et ciblé.
Si vous avez beaucoup de contenu, placez-le sur plusieurs écrans. (Cela peut favoriser l'engagement et empêcher une structure de site encombrée ou désorganisée.)
Melanie DaVeid fait un excellent travail avec une esthétique simple qui vous intéresse à son autre travail. Avec de simples touches d'animation, de couleur et de superbes lettres, le premier écran crée une sensation, une concentration et un plan d'action distincts pour les utilisateurs.
Conclusion
Alors que le parchemin revient à la mode, la façon dont nous concevons a changé. Les meilleures conceptions de site utilisent des fonctions de conception réactive et de défilement (telles que la parallaxe) pour créer une expérience d'écran pour les utilisateurs.
Et le premier écran est le plus important. Assurez-vous de créer un visuel intéressant, lisible et distinct pour amener les utilisateurs sur votre site.