Le piège Pinterest
Tout d'abord un peu de contexte:
Je suis de plus en plus victime de "Pinterestization" ou du "Pinterest Trap" dans ma conception. J'ai l'impression que je ne suis pas le seul. Voir cet extrait de Hana Schank dans X Mag 2013 Year in Review article :
"Cette année, nous avons vu une tendance qui a commencé à se confirmer à la fin de 2012 avec la montée de la spirale Pinterest hors de contrôle - à savoir qu'une bonne partie du Web a commencé à ressembler à Pinterest, avec des images en blocs remplaçant le contenu et la navigation shuntés vers le côté […] Mon intuition est que nous allons regarder en arrière dans quelques années et nous demander pourquoi tant d'interfaces étaient un groupe d'images dans des boîtes. Nous espérons que cette tendance est en train de disparaître. "
Je suis d'accord avec elle. La même chose pourrait être dite pour les mises en page omniprésentes "Metro".
Mais quelles sont les alternatives?
Je vais aller droit au but: je travaille sur un site de portfolio pour une grande organisation et il finira probablement par ressembler à ceci:
Voici le problème que je continue à rencontrer sur ce projet et sur d'autres:
Ce traitement fonctionne très bien pour le contenu visuel, en particulier avec les hoverstates bien faits. L'œil peut l'analyser rapidement. C'est joli. Il met beaucoup de contenu génial dans un espace restreint. Cela fonctionne bien pour RWD. Mais plus que tout, les utilisateurs semblent vouloir interagir avec des sites comme celui-ci. Ils demandent à être cliqués.
Mais le contenu de la page en question est à parts égales visuel et non visuel. Qu'en est-il de représenter le travail de stratégie? Exemples audio? Des travaux sans livrables visuels évidents?
Une option consiste à ajouter des images boursières ringardes pour donner un contenu visuel non visuel. Mais cela ressemble à une sortie et ne fonctionnerait que si le contenu était majoritairement basé sur des images. Mais comme je l'ai dit, c'est 50/50. C'est beaucoup de photos minables…
Pouvons-nous penser à des alternatives à l'utilisation de photos minables ici? Quels types d'interactions peuvent traiter le travail visuel et non visuel tout aussi bien tout en restant hautement analysable et attrayant?
N'utilisez pas d'imagerie vide de sens uniquement à des fins décoratives. Ils seront ignorés , c'est de l'encombrement, il doit être téléchargé par l'utilisateur final, ce qui signifie que le site sera plus lent à charger ... Il y a de nombreuses raisons de ne pas utiliser de telles images quand elles ne le font pas. 'ai aucun but.
Cependant, je pense que vous négligez une option: la typographie. Une bonne typographie peut être belle et est au cœur d'un bon design. Donc, pour le contenu qui ne peut pas être représenté avec des images, utilisez plutôt une typographie Nice. Vous pouvez présenter des tweets, des témoignages, des citations, des titres ... si c'est en typographie (et non du texte enregistré en tant qu'image mais du texte réel ) alors il peut être consultable et lu par les personnes ayant des technologies d'assistance également.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Une autre option consiste à utiliser un calque semi-transparent au-dessus des images pour le texte qui vous permet de contrôler la couleur et la teinte de toutes les images afin d'avoir un portfolio plus cohérent (si vous le souhaitez).
The Verge utilise beaucoup de dégradés de couleurs qui peuvent ne pas être à votre goût, mais cela peut être un moyen efficace de combiner les deux textes tout en étant capable de contrôler l'interface utilisateur plutôt qu'un simple assortiment d'images disparates.
Pour trouver une alternative qui résout les problèmes avec la mise en page Pinterest, la première étape consiste à identifier le problème spécifique de la mise en page Pinterest est.
Le grand compromis de conception avec la mise en page pinterest et votre exemple est ** manque de ** hiérarchie **** - reposant entièrement sur l'imagerie dans des éléments de pondération égale pour attirer l'attention. Cela sous-tend votre problème de perte d'éléments non visuels, ainsi que des problèmes plus larges avec ces mises en page se sentant comme un vidage de contenu.
C'est bien pour un site comme Pinterest qui consiste à parcourir de gros volumes de contenu géré par l'utilisateur de qualité variable, mais pour un portefeuille d'entreprise, vous voulez probablement quelque chose qui guide les gens à travers une sorte d'histoire, un message ou un aperçu de ce qu'est l'entreprise.
Vous pourriez ajouter une typographie de fantaisie ou icônes de style de projet substantif pour les éléments non visuels, ce qui leur donnerait au moins certains présence - mais cela ne résoudrait pas le problème plus profond du manque de hiérarchie donnant un tas de choses concurrentes plutôt qu'un message ou un flux clair.
La proéminence relative , en utilisant le dimensionnement, le positionnement et les espaces blancs , est une meilleure façon d'attirer l'attention sur le contenu que d'essayer de rendre tout aussi accrocheur. Quand tout parle au même volume, rien ne ressort.
Donc la deuxième étape consiste à comprendre que le "message à emporter" et/ou la (les) réponse (s) attendue (s) du public, que la mise en page sera conçue pour obtenir à travers. Ce que cela dépendra entièrement de votre client.
La troisième étape devient structuration le contenu autour ce message ou ce flux. À ce stade, pensez abstrait: ne vous laissez pas prendre dans les moindres détails. Post-it sur papier, pas sur maquette dans Photoshop.
Un outil qui vous aidera à traduire ce message dans une mise en page est l'idée qu'il existe essentiellement cinq façons de regrouper les informations, parfois appelées " cinq casquettes" :
- Emplacement/géographie : Development Seed la page d'accueil est un exemple astucieux de présentation d'une entreprise en organisant les informations géographiquement (légèrement contre- intuitif cependant - il serait préférable que le défilement vous conduise à l'étape suivante de l'animation)
- Ordre alphabétique (ou autres conventions arbitraires connues): bon pour les recherches de référence comme les index
- Temps : bon là où la récence compte, ou pour une narration engageante appropriée qui a un début, un milieu et une fin - risquée pour autre chose.
- Catégorie : Extrêmement flexible - il y a toujours plusieurs façons de regrouper les choses.
- Continuum /hiérarchie/échelle: (par exemple, du meilleur au pire, du plus grand au plus petit) Également très flexible.
C'est un exercice utile de parcourir des listes comme celle-ci en pensant comment chacune à son tour (et les combinaisons) pourrait fonctionner pour le client - puis choisissez la meilleure combinaison.
Ensuite la quatrième étape est le défi de conception ouvert de trouver comment transformer cela en une mise en page.
Cela pourrait être aussi simple qu'une mise en page de style Pinterest divisée en sections, chaque section ayant un message textuel introduisant un thème et une sous-hiérarchie dans le contenu allant du meilleur exemple le plus clair et/ou le plus à gauche au plus obscur./exemples de niche les plus petits et en bas à droite.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
L'essentiel est de poser ces questions dans cet ordre:
- (premier) Quel est le problème que vous essayez de résoudre?
- Quel est le message à communiquer?
- Quelle structure d'information communique le mieux ce message?
- (dernier) Comment transformer cette structure en une mise en page?
Une autre alternative serait de conserver la même taille d'image/de contenu, d'ajouter un remplissage et d'ajouter des détails en dessous au lieu de survoler. Cela fonctionnerait toujours bien pour RWD et les utilisateurs pourraient choisir de numériser toutes les images ou le texte s'ils ne sont pas sûrs de ce que les images représentent.
comme mentionné ci-dessus, il peut y avoir un bon nombre d'idées pour trouver une solution à cela. Comme il s'agit d'un site de type folio de Porto, je préfère opter pour une approche basée sur "ROW" plutôt que sur des boîtes.
Microsoft.com est un bon exemple pour le même - http://www.Microsoft.com/en-in/default.aspx
Portefeuille de certains modèles - http://www.ajazkhan.com/