Créer un projet Web nécessite de passer un certain nombre d’étapes. Les voici :
1. Les Intervenants
En considérant que chaque projet est différent, prenons en compte les principaux intervenants affectés au projet :
Le client (maître d’ouvrage), il représente l’aspect principal du business ;
Le chef de projet ;
Le rédacteur de contenu, Webmarketeur ;
Le designer graphique (graphisme, illustration, web design) ;
Le photographe ;
L’intégrateur Web (HTML, CSS, Javascript, Flash) ;
Le développeur (Web/CMS, PHP, Action Script).
Une personne peut multiplier les casquettes, le nombre de collaborateurs ne reflète en aucun cas la qualité du travail.
2. Le contenu
Il est très important de définir chaque type de contenu. Certains contenus seront faciles à définir. Sur une page de contact, par exemple. Il est entendu que nous devons y trouver le contact de l’entreprise, son emplacement, ses coordonnées, ses horaires, et souvent, un simple formulaire de contact.
Les autres types de contenu sont plus à considérer. Par exemple, nous pouvons inclure au site, une galerie photo.
Articles ;
Blog ;
Bannière de publicité ;
Forum de discussion ;
Documents ;
E-commerce ;
Formulaires de contact, demande de devis ou d’autres fins ;
Produits de physique (combien ?) ;
Contenus numériques (quel type et combien ?) ;
Email Newsletter ;
Calendrier des événements ;
Événement d’enregistrement ;
Galerie photos ;
Lien de gestion (des dizaines ou des centaines de liens, classés par catégorie) ;
Flux RSS, sortant (le contenu du site, syndiqué à d’autres sites) ;
Recherche ;
Liens sociaux partage de médias, à savoir : Tweet, post sur Facebook, etc. ;
Répertoire du personnel.
3. La hierarchie
L’architecture de l’information est un domaine trop souvent négligé dans la conception de sites web.
Sans une nette compréhension de l’architecture de l’information, nous pouvons finir par créer des sites qui sont plus confus que l’on pourrait croire, rende le contenu complètement inaccessible. C’est en considérant pourtant l’architecture de l’information comme la base de la conception que l’on obtient un site Web de qualité.
Nous allons regarder dans les modèles de conception populaires, les meilleures pratiques, les techniques de conception, et des exemples de cas.
Modèles de conception d’architecture de l’information
Il y a un certain nombre de modèles de conception pour une organisation efficace du contenu du site. La compréhension de ces modèles va vous aider à choisir le point de départ le plus approprié pour la structure de l’information d’un site. Nous parlons de cinq des modèles les plus courants de l’architecture de l’information de site.
Une seule page
Le premier modèle est le modèle de page unique, une simple page, le mieux adapté aux projets qui ont un accent très précis et une quantité limitée d’informations. Il peut s’agir d’un site de produit unique comme une application pour iPhone, ou un simple site personnel avec des coordonnées.
La structure horizontale
Cette structure d’information met toutes les pages sur le même niveau. Chaque page est tout aussi importante que toutes les autres.
La Page d’index
Une page principale avec des sous-pages, c’est le modèle le plus fréquemment observé dans l’architecture de l’information. Cette structure repose sur une page principale communément appelée “page d’accueil”, qui sert de point d’ancrage pour toutes les autres pages. Les sous-pages ont une toute la même importance dans la hiérarchie.
La hiérarchie stricte
Certains sites Web utilisent une stricte hiérarchie de pages pour la modélisation de l’information. Sur ces sites, il y aura une page d’index qui pointe vers les sous-pages. Chaque sous-page (pages parents) a ses propres sous-pages (pages enfants). Dans ce schéma, les pages enfants sont liées à leur page parent.
La co-existence hiérarchique
C’est une alternative à la hiérarchie stricte, il y a en plus la relation de coexistence. La relation parents-enfants est toujours existante, les pages enfants peuvent être accessibles à partir des multiples pages parents. Cette structure est adéquate lorsqu’il y a beaucoup d’informations qui se chevauchent sur le site.
Il y a un certain nombre de choses que vous devez retenir lors de la conception de l’architecture de l’information de votre site. Vous devez surtout garder en tête l’expérience de l’utilisateur au moment de vos choix sur la meilleure façon de présenter et d’organiser le contenu sur votre site. Ne vous basez pas sur vos préférences. Vous n’êtes pas votre utilisateur. En tant que designer, vous devez vous rappeler que les visiteurs du site n’auront pas les mêmes habitudes que vous. Pensez vraiment à ce que la personne est venue chercher sur le site et dont il a besoin.
La recherche des besoins utilisateurs est l’une des étapes la plus importante pour créer une architecture d’information efficace. Il y a un certain nombre de façons de s’y prendre pour la recherche des besoins des utilisateurs. Vous pourriez obtenir le feedback au moyen d’entrevues ou de tests d’expérimentation A / B (bénéfices utilisateurs) et d’autres méthodes de tests d’utilisateurs avant le lancement du projet pour voir si les utilisateurs sont en mesure de naviguer dans votre site de manière efficace.
Créer des testeurs, une liste de différents types de visiteurs de votre site qui entrent dans chacune des catégories, c’est un autre moyen de trouver la meilleure façon de structurer le contenu du site. Puis tout au long du processus de conception, l’utilisation des personnes que vous avez profilées en tant que votre base pour la conception et les tests IA du site.
Il est important que vous gardiez les objectifs du site à l’esprit alors que vous travaillez sur la hiérarchisation du contenu. Choisissez le bon modèle de structure d’information pour ces objectifs, utilisez-les pour justifier la structure que vous avez conçue.
Restez dans tous les cas cohérents, la cohérence est le centre de l’architecture d’information type. Les utilisateurs sont aussi soucieux de la cohérence. Choisissez un modèle et sachez vous en tenir. Si vous choisissez un modèle, assurez-vous que vous avez une très bonne raison de le faire. Les incohérences ont tendance à induire les visiteurs en erreur.
Une fois que vous savez ce dont vos utilisateurs ont réellement besoin, vous serez en mesure d’adapter votre architecture pour mieux répondre à ces besoins. Chaque site doit avoir un objectif clair, que ce soit pour vendre un produit, informer les gens sur un sujet, divertir, etc. Sans un objectif clair, il est pratiquement impossible de créer tout une architecture d’information efficace.
La façon dont l’information sur un site est organisée devrait être directement corrélée à l’objectif du site. Sur un site où l’objectif final est d’amener les visiteurs à acheter quelque chose, le contenu doit être mis en place de telle sorte qu’il tourne les visiteurs vers cet objectif. Sur un site qui vise à informer, l’architecture devrait conduire vers le contenu d’une manière à appuyer sur cette page.
Les Méthodes et techniques pour la conception d’architecture de l’information
Il y a quelques approches différentes utilisées pour la conception de l’architecture de l’information.
Les cartes
Le tri de cartes est une méthode à faible coût, simple moyen de trouver la meilleure façon de grouper et d’organiser votre contenu en fonction des commentaires des utilisateurs, en écrivant chaque ensemble de contenu ou de page sur une fiche, puis de laisser les utilisateurs les classer en groupes basés sur leur façon de penser le contenu par des catégorises.
La méthode de base commence avec les cartes dans un ordre aléatoire et c’est aux utilisateurs de les trier dans la façon dont ils pensent qu’ils doivent les regrouper. Le tri inverse, les cartes sont pré-triées en groupes, et les utilisateurs doivent les réorganiser comme bon leur semble.
Le tri des cartes ouvert permet aux utilisateurs d’ouvrir le nom des groupes qu’ils ont créés, tandis que le tri de cartes fermées aura des noms de groupes dans lesquels les participants mettent les cartes.
Plan du site
L’architecture commence avec une large vue d’ensemble, la compréhension de la stratégie du site et des objectifs, et crée une structure de base d’abord. De là, les relations de contenu sont raffinées que l’architecture du site s’approfondit, mais c’est tout vu de l’ensemble de haut niveau quant à la finalité du site.
Le modèle de bas en haut ressemble à la relation entre le contenu détaillé d’abord. Avec ce type d’architecture, vous pourriez commencer avec des utilisateurs testeurs, et comment ces utilisateurs circulent dans le site.
4. Le design
Zooning
Une fois la structure de votre contenu déterminée, on peut passer à la l’étape de la conception. Wireframes bâtiment est le plus souvent sur l’aspect mise en page du web design, parce que les wireframes sont faits en niveaux de gris et ne sont pas conçus pour être jolis, mais plutôt de montrer, en gros, la mise en page des pages du site.
En règle générale, un fil de fer devrait être fait pour chaque mise en page unique dans le site. Si vous avez des téléchargements, des galeries de photos, il est également utile à la maquette de ces autres.
Trois techniques pour une meilleure approche du processus de conception. Il s’agit d’intégrer les images dans un peu d’HTML afin que le squelette puisse être affiché dans le navigateur web, amenant une certaine interactivité.
Le clic sur n’importe quelle partie de la maquette fait défiler à l’étape suivante.
Faire un croquis
Commencer à dessiner avec un crayon et du papier pour un test de cohérence rapide. Cela devrait prendre environ 30 secondes et ouvre la possibilité d’obtenir des réactions précoces. Cette technique permet de gagner beaucoup de temps. Vous passerez un peu plus de 30 secondes sur les croquis si c’est pour les tests utilisateurs.
Focus sur la communication
Le point clé du zoning est de communiquer. Utilisez la documentation appropriée. Chaque zoning devrait comporter de la documentation, à savoir la date de création, de mis à jour, l’auteur, le titre de page, des notes d’interactivité, etc.
Exporter les fichiers PNG puis les intégrer au format HTML. De cette façon, ils sont faciles à partager et à mettre à jour.
Ne pas oublier les objectifs de la Page
Gardez les objectifs de la page à l’esprit lorsque vous concevez un squelette. Organisez l’information dans une hiérarchie qui sert l’objectif de la page.
Tenir compte du contenu
Si vos squelettes ne sont pas des esquisses, il faut qu’il puisse être réaliste quant à la quantité de contenu qui sera ajoutée à la page. Cela vaut également pour le nombre (et la longueur) des liens dans la navigation. Si possible, utilisez des polices de taille précise, des images et considérez ce qui se passera s’il y a plus de texte que prévu. Rien sur le Web ne devrait être gravé dans la pierre, donc se demander si la conception de site est requise.
Obtenir la rétroaction
N’ayez pas peur de tester vos squelettes avec des utilisateurs informels. Prenez vos collègues de bureau et demandez-leur de trouver les informations clé, d’expliquer ce qu’ils pensent de la pertinence de certains éléments.
Le poids d’un bon design
Une fois la structure attribuée, il faut l’habiller avec un design qui la mette en valeur.
Apple a connu un franc succès avec la vente de son produit phare « l’iPod » au design sobre et raffiné, à la fois esthétique et ergonomique ; UI (User Interface). Remarquons que l’iPod ne dispose pas de fonctionnalités particulières que ses concurrents n’ont pas. En fait, selon certaines mesures, il est même moins complet que les autres lecteurs. Il n’a par exemple pas d’enregistreur audio. Il faut y ajouter un kit supplémentaire qui puisse le faire. Néanmoins, le design exceptionnel du produit, combiné à une interface très intuitive (et son puissant marketing) font de l’iPod un produit beaucoup plus convoité que ceux des concurrents.
Un site web, avec le logo, les cartes de visite, la signalétique, l’entête de lettre, les autres éléments visuels de la marque, sont essentiels pour la manière dont les clients percevront l’entreprise.
L’expérience des utilisateurs d’un site web fait partie de cette impression. Quand un site est harmonieux, agréable à l’œil et facile à naviguer, il laisse une impression positive sur les visiteurs. Inversement, quand un site web est juste passable, cela peut agacer les clients, il laisse une mauvaise impression et coupe l’envie de revenir.
La création de la maquette
Avant de démarrer le processus de design, il est impératif de prendre en considération le but et les objectifs du client. Comprendre pour quelles raisons le site doit être créé et à qui il doit être adressé. Pour ce faire, nous avons besoin d’établir une hiérarchie.
Pour la conception de site web, il existe deux types de hiérarchie qui sont essentiels et toujours présents : la hiérarchie des objectifs et / ou informations et la hiérarchie visuelle. Il ne faut pas perdre de vue le fait que le visiteur est venu chercher quelque chose sur le site, le design doit le guider dans sa visite, à localiser l’élément ou les éléments spécifiques.
Commencer avec un guide aux pixels (système de grille 960). Faire une zone de travail plus large de telle sorte qu’il soit possible d’ajouter des notes sur un côté.
Ajouter la palette de couleurs et les éléments de la charte de base (couleurs, polices) dans les marges de la maquette afin de les conserver comme référence lors de la visualisation sur écran ou sur papier.
Organiser tous les éléments de conception avec une logique de dossier / sous-dossier structure, et étiqueter chaque élément clairement. “Header-Footer” c’est clair, “Calque 14” non.
Utiliser le contenu réaliste, pas du “lorem ipsum”.
5. L’intégration HTML/CSS
L’interactivité
Les éléments interactifs peuvent être aussi simples que d’un menu déroulant, ou aussi élaborés que le créateur basé sur Flash diagramme circulaire. Ces éléments sont généralement élaborés soit avec JavaScript, souvent en utilisant une bibliothèque de scripts tels que jQuery, ou avec Adobe Flash. Au niveau le plus général, cela consiste à assembler (et écrire) un ensemble d’instructions qui interagissent avec des pages sur votre site web.
6. Le développement / Back Office
Après une longue attente, votre design brillant a été converti en code, et est prêt à être intégré dans un système de gestion de contenu (CMS). L’individu ou l’équipe chargée de faire cela va vous fournir une connexion pour le CMS qui vous permet de saisir le contenu, y compris les textes, photos, vidéos et documents. La plupart des auteurs préfèrent couper et coller à partir de Microsoft Word. Selon les spécificités de CMS sélectionnées, vous pouvez être capable de faire cela sans problème, tout en conservant le formatage simple comme gras, italique, et les listes. Toutefois, le CMS peut strip ce formatage lorsque vous coupez et collez, vous obligeant à le rétablir. Alors parfois fastidieux, cela assure que votre contenu reste propre et ordonné, ce qui le rend plus facilement indexé par les moteurs de recherche, plus facilement imprimé, cité et converti en d’autres formats.
Uniformiser le tout
Après les étapes précédentes, vous devriez être assis sur un site web solide joli. Peu importe la taille de votre projet, c’est maintenant un bon moment pour :
Passer en revue votre contenu une fois encore, le vérifier contre les points énumérés sous “écriture pour le web” ci-dessus.
Demander à un tiers de relire tous vos contenus. Ce n’est pas la tâche du concepteur ou de l’écrivain d’origine. Il est préférable d’amener quelqu’un avec une nouvelle perspective. Ne pas corriger votre propre travail.
Lancement ou Mise en production
Une fois que vous avez soigneusement testé en version bêta sur le site, il est temps de le lancer.
Tests utilisateurs (Panel d’internautes pour tester le projet)
Technique utilisée pour évaluer un produit en le testant sur les utilisateurs. Dans notre cas, c’est la capacité à répondre à aux objectifs du site.
L’usabilité est un élément souvent discuté dans la conception, le concept semble être très mal compris car mal utilisé dans le flux de production ; les agences ne savent pas comment commencer les tests, ne parviennent pas à tirer les avantages que cette technique offre.
Avant, les tests utilisateurs étaient associés à d’énormes laboratoires, d’énormes budgets, de très longs délais. L’évolution d’Internet a engendré la croissance d’un certain nombre de tests utilisateurs. Des outils répondant à une grande variété de besoins et un large éventail de budgets qui ont rendu ces tests beaucoup plus accessibles aujourd’hui où même les plus petits studios de conception peuvent se permettre de faire des tests.
Vos clients obtiennent de meilleurs résultats, les concepteurs et les développeurs ont des normes de plus grandes qualités, les utilisateurs continueront de chercher jusqu’à ce qu’ils trouvent un design qui fonctionne. Vous avez besoin d’observer l’ascension d’Apple, l’iPod, iPhone et iPad pour comprendre de quoi il s’agit.
Nous allons nous focaliser sur des outils automatisés, en pleine croissante : les tests A / B.
Qu’est-ce que le test A / B?
C’est un modèle qui fonctionne comme pour un tournoi, les meilleurs joueurs s’affrontent en final, le design pour vos objectifs devrait se retrouver sur la marche finale, que vous compariez deux design ou dix, vous devriez obtenir des informations utiles qui vous montrent ce qui fonctionne le mieux.
Jusqu’à présent, la plupart des tests A / B ont été réalisés sur les sites de vivre, et surtout pour les conversions de tests, mais des tests A / B pour la convivialité sont également une tendance émergente qui peut faire des merveilles pour vous et vos conceptions.
De la première phase de conception, des esquisses, du zoning au processus de développement, les tests A / B sont utiles pour la démonstration du retour utilisateur.
Les Tests vous aident à savoir où les gens ont cliqué, et combien de temps il leur a fallu pour remplir une tâche. Cela fonctionne très bien quand vous avez une base de référence et que vous savez ce que vous attendez comme résultat. Vous avez juste à modifier les choses à améliorer dans la conception actuelle.
Avec les tests A / B pour les tests utilisateurs, la vérification est beaucoup plus facile. Créez deux versions d’un site que vous désirez tester, dirigez le trafic de manière aléatoire à chaque version que vous testez. Environ 50% du trafic devrait finir par chaque version, et vous vous retrouvez avec des données assez convaincantes pour comparer les deux.
Mettez le concept en action avec une refonte de site, faites un test A / B rapide de l’ancien design par rapport à la nouvelle version, vous verrez.
===
1. Premier contact
Cette étape consiste à rencontrer le client et à recueillir des informations. Il est extrêmement crucial car il nécessite que le concepteur comprenne les exigences, l’entreprise, les objectifs et le public cible du client.
Les concepteurs doivent poser des questions et comprendre parfaitement ce que veut le client. Cela vous aidera à gagner beaucoup de temps et de travail pendant le processus de conception du site Web.
Les concepteurs peuvent également demander au client de remplir une enquête rapide afin que vous puissiez recueillir plus de détails sur sa vision.
2. Planification
L’étape de planification est une autre étape importante sur l’échelle, car ce qui est décidé et cartographié ici définit les jalons et le calendrier de l’ensemble du projet de conception Web. C’est également l’étape qui nécessite une interaction avec le client et l’attention portée aux détails qui l’accompagnent.
Dans cette phase, les concepteurs créent le plan du site et s’assurent que le client l’a examiné et approuvé. Dès que le site-map du nouveau site est finalisé, les concepteurs peuvent décider des technologies à utiliser et ensuite concevoir des wireframes.
3. Contenu
Au cœur de chaque site Web se trouve son contenu. C’est ce qui accroche vos utilisateurs et les incite à revenir pour plus.
Un bon plan de contenu augmentera la présence et la convivialité de votre site Web et accélérera le développement Web. C’est une bonne idée de décider du contenu avant de passer au cycle de conception visuelle.
Garder votre contenu ciblé, intéressant, informatif et utile ajoutera à son attrait.
Le calendrier de cette phase varie considérablement en fonction du nombre de pages et si le client est prompt à fournir au concepteur Web tout le contenu du site. Si le client n’est pas prompt à fournir tout le contenu des pages, cela ralentira l’ensemble du processus de conception du site Web.
Ici l’agence digitale bleech_ a préparé un guide étape par étape qui vous aidera, vous et vos pairs, à préparer le contenu de votre nouveau site Web.
4. Conception
Lorsque le cycle de conception visuelle démarre, le concepteur utilise le contenu et les structures filaires pour concevoir des maquettes parfaites au pixel près pour le client.
Les concepteurs Web développent une page de destination pour le site Web, ainsi qu’une page Web interne pour démontrer une couleur, des tailles de police et un placement précis de tous les éléments de navigation et de contenu. Il existe de nombreux outils de conception Web pour vous faciliter la tâche.
Une fois que le client a eu l’occasion d’examiner les conceptions initiales, il a la possibilité de fournir des commentaires ou de demander des modifications. Ensuite, le concepteur poursuit le processus de mise au point de la conception jusqu’à ce qu’il ait l’approbation du client.
5. Développement
Avec des conceptions approuvées par le client, il est temps d’étoffer le design des pages, de développer de nouveaux contenus et d’affiner les anciens contenus, de créer des vidéos, des diaporamas et d’autres médias qui apparaîtront sur le site Web.
Cela implique également le codage, la validation, les tests multiplateformes et de navigateur.
Au cours de cette phase, les concepteurs doivent créer une installation de démonstration, afin que le client puisse visualiser et interagir avec les pages Web au fur et à mesure de leur développement.
6. Lancement
Voici venu le grand jour !
Dans cette phase, les concepteurs doivent effectuer une dernière série de tests pour s’assurer que tout est fonctionnel. Dès que le site a été testé, revu et approuvé par toutes les personnes impliquées dans le projet, il est temps de lancer le site Web pour le public.
Une fois que vous lancez le site, surveillez-le pour les commentaires des utilisateurs et faites les ajustements en conséquence.
Rappelez-vous toujours qu’un site Web est un média fluide qui change tout le temps. Il est extrêmement important de le maintenir à jour et entretenu.
Si vous cherchez de l’inspiration pour dynamiser votre prochain projet de conception de sites Web, vous trouverez ici 15 remarquables conceptions de sites Web d’agences numériques du monde entier.
