Share
Concevoir pour le «fold» est depuis longtemps une priorité pour de nombreux concepteurs Web, mais avec autant d'appareils capables d'afficher votre site Web, comment savez-vous où il se trouve? Devrions-nous être inquiets? Cet article demande quelle est l'importance du "fold", des variables en jeu, du changement des habitudes de navigation et de ce que vous pouvez faire à ce sujet.. La mort du pli est sur nous, enfin!
La navigation sur le World Wide Web n’est plus une tâche réservée aux ordinateurs de bureau. La navigation mobile semble augmenter de jour en jour et de nombreux autres appareils, tels que les téléviseurs prêts pour Internet, sont de plus en plus disponibles. Brandon l’a mentionné pour la première fois dans son article Webtrends annuel, L’état des tendances en matière de conception de sites Web: édition annuelle 2011? "La mort du pli" comme il l'appelait, est enfin sur nous.
Mais qu'est-ce que cela signifie réellement?
Parce que le traditionnel? Écran? que les gens voient le Web à travers a connu une explosion de variété? nous ne pouvons plus nous attendre à ce que les internautes surfent sur un moniteur proche de 19 "avec une résolution comprise entre 1024? 768 et 1280? 700. Les écrans sont actuellement de toutes formes et tailles, allant des iPhones (et des téléphones plus petits) à 60". Téléviseurs haute définition. Cependant, la résolution peut varier énormément. le rapport d'aspect même d'un écran (même sur le même appareil que l'iPhone) peut changer en un tour de main. Bien sûr, il sera toujours conseillé aux concepteurs Web de conserver les messages les plus importants d'un site près du sommet, mais avec tant de nouvelles façons pour les internautes de visualiser le Web, il n'y a plus de hauteur définie pour le contenu au-dessus..
Avant de nous devancer, commençons cet article par un retour à la vieille école.?
"La zone idéale pour placer des introductions audacieuses, des informations essentielles, des images attrayantes et des éléments d’appel à l’action est au-dessus du repli?"
Si vous avez eu une formation en graphisme, vous serez probablement familier avec le terme 'au dessus du pli'. Si non, prenons un bref moment pour expliquer.
Le terme a été utilisé pour la première fois en référence aux médias traditionnels, les journaux pour être précis. L'idée est que les journaux sont souvent livrés ou affichés pliés et que la zone «au-dessus du pli» sera la première à être vue par le lecteur. Il s'agit donc d'un endroit bien en vue et important. Des titres accrocheurs et des images saisissantes sont souvent affichés pour attirer l'attention du lecteur.
La phrase a naturellement été transférée au domaine de la conception Web quand elle est devenue populaire dans les 90 dernières années. C’est plus ou moins le même concept, à l’exception de la au dessus du pli est plutôt la zone que l'utilisateur peut voir immédiatement sans défilement (pas aussi accrocheur, non?). Cette zone est la zone idéale pour placer des introductions audacieuses, des informations essentielles, des images attrayantes et des éléments d’appel à l’action. C'est également l'espace privilégié pour toute publicité.
La zone située au-dessus du pli est la partie supérieure d'une conception Web que l'utilisateur peut voir immédiatement sans faire défiler l'écran..
L'importance de la zone au-dessus du repli semble être confortée par la "règle des cinq secondes" qui est couramment citée dans Web Design; qui indique que les utilisateurs portent un jugement sur un site dans les cinq premières secondes de leur visite. Jakob Nielsen, expert en ergonomie, a également suggéré aux utilisateurs de passer jusqu'à 80% de leur temps à afficher des informations au-dessus du pli..
L’importance du «repli» au cours de la dernière décennie ne peut-elle pas être trop soulignée dans son contexte historique? De nombreux studios de design et agences de marketing ont tenu des débats très controversés sur le lieu, précisément le lieu. De grosses sommes d’argent ont été dépensées dans les données du marché pour prédire le placement optimal des annonces, et des conceptions entières ont été jetées par la fenêtre, car elles ne maximisaient pas l’utilisation de l’espace "au-dessus du pli". Le pli tout-puissant, à la hauteur de son importance, a été défini comme l'une des trois lignes horizontales à 570, 590 et 600 pixels.
Tout ce qui se trouvait en dessous de 600 pixels n'était pas pertinent, contenu de second niveau? ne vaut pas la peine pour un concepteur web digne de se préoccuper de.
Maintenant, à ce stade, certains d'entre vous pensent peut-être, ou même crient (vu l'ampleur du débat que ce sujet semble causer) que le "repli" n'est pas pertinent et que toute discussion à ce sujet devrait se limiter aux livres d'histoire. L'idée qu'un concepteur de sites Web se limite à une petite partie dans la partie supérieure de l'écran est absurde. Nous aimerions croire que tous les internautes défilent et que nous avons la liberté de nous exprimer et de créer un design dans le même espace. Certains ont même fait preuve de beaucoup de créativité en démontrant que les gens sont prêts à faire défiler.
Il ne fait aucun doute que les concepteurs de sites Web et leur client se sont beaucoup disputés sur l’importance du «repli», ce qui a peut-être contribué à sa réputation quelque peu mauvaise. Un client, surestimant l’importance du pli, peut tout demander et que l’évier de la cuisine soit serré et entassé dans cet espace relativement petit et le concepteur Web sera frustré de ne pouvoir démontrer son talent pour la position, l’alignement et l’utilisation subtile du blanc espace.
La solution à ce problème, comme pour de nombreux autres aspects de la conception, est de parvenir à un équilibre. Évidemment, vous limiter à une petite partie de l'écran limiterait votre créativité et vos options de conception. D’autre part, ne pas tenir compte de la notion de «pli» serait une erreur et vous perdriez une technique de conception potentiellement puissante, comme nous le verrons plus loin..
Le site Web de l'application Kaleidoscope, magnifiquement conçu, est un excellent exemple de conception avec le «pli» à l'esprit. Le grand titre, un paragraphe d'introduction, une image accrocheuse et des éléments d'appel à l'action sont tous instantanément visibles et disponibles pour l'utilisateur. Remarquez comment des informations supplémentaires sous la rubrique "En savoir plus" se situent sous le point limite. Le «pli» a clairement été pris en compte dans la conception de ce site Web, mais un défilement vers le bas révélera une grande quantité d'informations et de nombreux éléments de conception plus détaillés. Il est évident que les concepteurs du site Web attendent toujours des utilisateurs qu'ils fassent défiler.
Vous trouverez des modèles de conception similaires mis en œuvre sur de nombreux grands sites Web. L'importance de cette première impression est reconnue, mais un espace beaucoup plus vaste est pleinement utilisé pour raconter une histoire et communiquer les informations dont il a besoin. La zone "au-dessus du pli" est souvent utilisée pour guider l'utilisateur vers le bas de la page et vers les zones que le concepteur souhaite que l'utilisateur voie. Avoir la capacité d'attirer l'attention d'un utilisateur tout en le maintenant suffisamment intrigué pour rester sur le site et rechercher de nouvelles informations et de nouveaux contenus est en effet une compétence importante..
Ce sera toujours une seconde nature d'inclure les messages clés et le matériel d'appel à l'action près du sommet de la conception d'un site? mais essayer dogmatiquement de faire passer le contenu au-dessus du pli n'est plus une stratégie qui devrait enchaîner vos créations.
Si vous visitez le site Web de Kaleidoscope par vous-même, vous aurez probablement une vue quelque peu différente. Vous pourrez peut-être voir plus ou moins le site Web - et voici le problème auquel est confronté chaque concepteur de sites Web. Comment pouvez-vous concevoir pour le pli si vous ne savez pas où il se trouve pour un visiteur particulier? Plusieurs facteurs différents se combinent pour déterminer la taille physique de la zone "au-dessus du pli"..
Les concepteurs de sites Web sont bien habitués à concevoir avec des navigateurs en constante considération. Les nombreuses bizarreries et incohérences nous frustrent depuis des années et jouent également un rôle dans cette énigme. Chaque navigateur individuel occupera une proportion différente de l'écran en fonction de la taille de l'interface utilisateur du navigateur et de toute barre d'outils supplémentaire. La tendance avec les navigateurs modernes semble toutefois positive, car ils semblent occuper moins d’espace que précédemment. Les développeurs de Google Chrome, Safari et Internet Explorer 9 ont compris qu'il existait une meilleure expérience de navigation lorsqu'il était difficile de détourner les utilisateurs du site Web..
Aujourd'hui, il existe également une telle multitude de combinaisons de taille d'écran et de résolution d'écran qu'il est presque impossible de concevoir un site Web à taille unique. Il y a de nombreuses années, il était établi que la résolution d'écran la plus répandue était la résolution 1024x768, ce qui semble être ce que la plupart des concepteurs conçoivent encore. Les statistiques de résolution de WebDesigntuts démontrent l’ampleur du problème pour les concepteurs..
Jetons un coup d'œil aux statistiques de résolution du navigateur du site Webdesigntuts + pour une étude de cas rapide:
"Vous ne pouvez pas garantir qu'ils utilisent un écran de moniteur traditionnel."
Le graphique montre qu’une grande variété de résolutions est actuellement utilisée, la majorité des utilisations étant réparties sur six tailles différentes. Comme vous pouvez le constater, la résolution d'écran 1024x768 ne compte plus maintenant que pour un faible pourcentage, même si cette dernière a peut-être augmenté récemment en raison de la décision de l'iPad d'utiliser cette résolution..
S'il ne suffisait pas de ne pas vraiment savoir quelle taille avait le moniteur qu'un internaute avait, vous ne pouvez désormais plus garantir qu'il utilise un écran de moniteur traditionnel. L'ère de la navigation mobile est bel et bien à nos portes et de nombreux appareils différents sont actuellement utilisés. Revisitons les statistiques analytiques pour Webdesigntuts:
Comme vous pouvez le constater, de nombreux systèmes d'exploitation sont utilisés et des plates-formes telles qu'Android peuvent être intégrées à divers appareils. La navigation sur tablette, qui a explosé avec la sortie de l'iPad, ne deviendra plus populaire qu'avec la sortie de nombreuses tablettes de différentes tailles. Les appareils mobiles de toutes sortes représentent également un défi unique pour les concepteurs Web, car ils peuvent être utilisés en mode paysage ou portrait - une décision qui changerait considérablement la position de la ligne de "repliement". De nombreux sites Web s'efforcent maintenant d'être «optimisés» pour des appareils tels que l'Ipad..
Alors, avec toutes ces variables, comment est-il possible de savoir où se trouve le "pli"??
La vérité est que vous ne pouvez pas. Avec autant de variables en jeu, il est presque impossible de savoir exactement où se trouve la ligne de pliage. Effectuez une avance rapide d'un an ou deux et nous verrons probablement encore plus de changements dans l'environnement de l'écran. Tout cela signifie simplement que les conseils précédents de conception dans les premières 600 pixels ne sont plus fiables. Il semblerait que la recherche de la perfection en pixels ne vous laissera frustré.
Une approche plus judicieuse consisterait à concevoir des plis généraux fondés sur des ratios tenant compte de la navigation orientée paysage ou portrait.?
Cela impliquerait de concevoir non seulement le pli traditionnel, mais aussi un deuxième pli plus bas sur la page. Un tel pli n'enlèverait rien à un design conventionnel, mais aurait un avantage supplémentaire pour ceux qui utilisent des appareils mobiles et des tablettes. En utilisant un rapport approximatif plutôt que de compter sur des mesures de pixels fixes, bien que ce soit certainement moins précis, vous devriez quand même être relativement sûr.
Nous pensons que la clé ici est de ne pas trop se focaliser sur le "repli", mais plutôt de garder votre message essentiel dans une "zone de sécurité" tout en conservant une conception globale de qualité. Idéalement, vous devriez tester les conceptions sur des appareils mobiles, mais de nombreux simulateurs sont disponibles si cela n’est pas toujours possible..
Les meilleures stratégies de conception possibles qui s’adaptent à un large éventail d’écrans sont celles qui ont un sens établi de la hiérarchie dans l’ensemble de la conception. Cela signifie que le message central d'un site doit être apparent à partir de n'importe quelle "mise à l'échelle" de ce site - et que des informations et un contenu plus détaillés doivent être lisibles par ordre d'importance sur la page..
D'autres principes de conception, tels que la typographie, la théorie des couleurs, la mise en page et la Gestalt, jouent tous un rôle important à cet égard. Les concepteurs de sites Web auraient donc intérêt à peaufiner ces pratiques établies. En effet, l’une des nouvelles grandes opportunités offertes aux concepteurs par "la mort du pli traditionnel" est le retour aux principes de conception fondamentaux. laissant derrière elle des notions de mise en page rigides, dogmatiques et absurdes au profit de théories séculaires du design.
"? Dans l'étude, ils ont constaté que 76% des utilisateurs avaient défilé et qu'une bonne partie d'entre eux avaient défilé jusqu'en bas, malgré la hauteur de l'écran."
Les statistiques pour le seul site Webdesigntuts sont utiles (principalement parce que nous avons des données détaillées à ce sujet), mais elles ne représentent certainement pas tout l'internet, n'est-ce pas? Même lorsque nous regardons les statistiques d'affichage du navigateur officiel sur le site officiel des écoles W3, une tendance similaire commence à émerger.
Certes, les données de ces deux sites ne représentent pas l’ensemble du public qui navigue sur Internet. mais en regardant l'écriture sur le mur, il est facile de déterminer qu'il ne s'agit pas simplement d'un événement marginal, mais d'un nouveau modèle qui émerge. Combinez cela avec les ventes de nouveaux appareils et la croissance de l'industrie des moniteurs, et des munitions d'une solidité à toute épreuve pour ceux qui cherchent à dissiper le mythe du repli traditionnel..
En outre, de nombreuses études ont été menées qui minimisent l’importance du repli, même à l’époque où il existait déjà. Les conclusions: même lorsque vous utilisez une taille d'écran fixe (c'est-à-dire: 1024 x 768), les internautes surfent-ils sur le Web? ils y passent souvent le plus clair de leur temps!
Nous avons beaucoup discuté dans cet article, alors laissez-nous rassembler quelques points clés.
Le concept traditionnel de conception pour le «pli» semble être quelque peu dépassé en ce qui concerne la conception Web moderne. Nous avons vu qu’une combinaison de variables et un changement des méthodes de navigation de nombreuses personnes signifient qu’une position fixe de la ligne de «repli» ne peut pas être établie en toute sécurité. Les internautes sont également très préparés au défilement. en particulier avec les appareils multi-touch tels que l'IPad qui rendent la tâche très intuitive.
Cependant, cela ne signifie pas que le "pli" doit être totalement ignoré. Le "pli" peut toujours être un élément efficace dans n'importe quelle conception. Il ne fait aucun doute que les premières impressions comptent vraiment dans la conception Web et que cet espace peut être utilisé non seulement pour capturer votre public, mais également pour l'attirer plus loin dans la page. Réservez cette zone pour vos informations essentielles tout en rassurant vos clients que les visiteurs verront toujours ce paragraphe dans leur historique plus bas dans la page.
En l'absence de signes de ralentissement de la navigation mobile, un argument peut également être avancé pour la conception d'une deuxième ligne de «repliement» pour les personnes utilisant un appareil à portrait. Il ne devrait en aucun cas nuire à votre conception et ne fera que donner un avantage supplémentaire à ceux qui utilisent de tels dispositifs..
Qu'en pensez-vous? Essayez-vous toujours de concevoir pour le pli? Est-ce un cas où les concepteurs sont déjà au courant de ces changements et est-ce que ce sont les clients que nous devons éduquer??
Accentsconagua