Besoin d'un nom de domaine ? Le géant Google vous accompagne maintenant dès les prémices de la création de votre site web en proposant son propre service d'enregistrement de noms de domaine : Google Domains.
Alors que l'on bénéficiait déjà de services en ligne tels que Google Sites pour la création de son site web, Google Analytics pour suivre son audience, Adwords pour la monétisation, et bien d'autres encore, le moteur de recherche enfonce le clou avec Google Domains, son nouveau service de réservation de noms de domaine.
Un marché attractif dont le Géant de la recherche aurait tort de se priver puisque l'on comptait déjà un total de plus de 250 millions de noms de domaines enregistrés à travers le monde, fin 2012 (source).
Une croissance exponentielle qui n'a pas tarit et dont Google souhaite bien profiter avec son nouveau service qui vient d'être en lancé, en bêta. Les plus curieux pourront donc s'inscrire pour espérer recevoir une invitation à découvrir le service en avant-première.
Même si aucun prix ni données concernant les extensions ou le système de réservation ne sont pour l'instant connus, Google communique déjà sur quelques points prévus dans son offre tels que :
l'utilisation de 100 adresses mails gratuites avec votre nom de domaine
la possibilité de créer jusqu'à 100 sous-domaines
Pas de coût additionnel pour un enregistrement "privé"
A ces premiers éléments, Google promet bien sur une infrastructure sécurisée et un service simple d'utilisation pour le plus grand nombre.
Un nouveau service à suivre de très près donc, et pour les plus impatients, l'inscription à la bêta se fait par ici !
Aujourd'hui le Collectif Digitives vous présente ses deux derniers projets : la refonte du portfolio du designer graphique Brokism, et la communication de l'agence immobilière Imvest Conseil.
Brokism
Dernière réalisation en date, la refonte du site du designer graphique Brokism qui intervient dans les domaines de la direction artistique, la photographie ou encore la typographie, ce portfolio à l'habillage épuré et au design responsif, optimisé pour toutes les tailles d'écrans, reflète l’aspect pluridisciplinaire de son activité.
Imvest Conseil
L'agence immobilière Imvest Conseil a fait appel au Collectif Digitives et à Laurence Bentz pour mettre au point une opération de communication globale à travers la refonte de son logo, la création de cartes de visite et d’un flyer destinés à mettre en avant son expertise dans le domaine de l’immobilier, ainsi que d’un site internet. Ce dernier est destiné à diffuser les annonces des biens proposés par l'agence, ainsi que de relayer les dernières informations de ce secteur dans son espace actualité.
Le Collectif Digitives est fier de vous annoncer le lancement de la nouvelle version du site Zut ! pour accompagner le développement du magazine en Lorraine et dans le Haut-Rhin.
Les lecteurs des différentes régions auront désormais une section dédiée avec des contenus originaux plus ciblés (séries mode, urban styles et Vu par). La liste des différents points de distribution de chacun des numéros est également disponible, afin de vous aider à trouver plus facilement votre city-magazine préféré. La lecture en ligne du magazine se fait désormais en musique grâce à la mixtape élaborée par l’équipe de rédaction et désormais directement accessible depuis la page d'accueil du site.
Cette V2 comprend également la création d’une boutique en ligne multilingue qui vous permettra de commander hors-séries et abonnements partout dans le monde. A terme, le shop sera enrichi par l'arrivée de nouveaux produits, dont des livres et des t-shirts 100% Zut !
Autre nouveauté, le site comme la boutique sont à présent responsifs, et accessibles sur smartphones et tablettes, pour une expérience de navigation encore plus ergonomique.
Avec cette myriade de nouveautés, une chose est sûre, le magazine Zut ! n’a pas fini de vous étonner !
Le collectif Digitives est fier de vous annoncer le lancement du site officiel de l'illustratrice strasbourgeoise Laurence Bentz. Un univers aux couleurs de l'artiste où vous pourrez retrouver l'ensemble de ses travaux de graphisme et d'illustration.
Deux mondes que l'on pourrait penser presque opposés, ceux des musées et de l'Internet, ont aujourd'hui tendance à se croiser et à créer des passerelles pour prolonger expérience et découverte culturelles. De l'événement collaboratif destiné à remixer le musée initié par Museomix au hacking (gentil, on vous rassure) du design des sites de musées pour les rendre plus accessibles sur terminaux mobiles lors de la Responsive Museum Week, en passant par la découverte de Pictify, le nouveau réseau social destiné aux galeries d'arts et aux musées, nous avons passé en revue 3 voies possibles pour réunir web et musées.
Museomix - du 19 au 21 octobre 2012
“Remixer le musée ensemble” tel est le crédo de cet événement participatif destiné au monde des musées. L’objectif de Museomix : questionner la place du visiteur face au savoir. Ce challenge est relevé par une communauté de “museomixeurs” issus de tous horizons (conservateurs, médiateurs culturels, designers, codeurs...) qui se mobilisent pour créer de nouvelles interactions en plein coeur d’un musée. Sur place comme en ligne, ces derniers ont trois jours pour mettre au point des prototypes, fruits de la rencontre entre le monde culturel et le numérique, qui pourront être testés en temps réel par le public.
Lors de la première édition organisée en 2011, 11 dispositifs ont été mis en place comme Kaleïdomix, une application qui, en prenant en photo une oeuvre, permet d’obtenir plus d’informations, de la partager sur les réseaux sociaux et même de la “remixer” ! L’aspect participatif n’est pas en reste puisque l’application permet de comparer les oeuvres créées et de repartir avec grâce à l’utilisation d’une imprimante 3D mise à disposition.
Cette année, Museomix revient du 19 au 21 octobre au musée gallo-romain de Lyon-Fourvière avec 9 équipes plus que motivées pour repenser notre approche du musée !
Pictify
L'avenir des musées passera-t-il par les réseaux sociaux ? S'ils sont nombreux à avoir investi les plateformes sociales "classiques" comme facebook ou twitter, c'est pourtant bien sur des réseaux émergents et plus "picturaux" qu'ils pourraient bien trouver une place de choix. On pense bien sûr à Pinterest, qui accueille déjà le Louvres ou encore le musée des Beaux Arts de Lyon, mais ils peuvent désormais également se tourner vers un petit nouveau intitulé Pictify, spécialement destiné au partage d’œuvres d'art, et principalement pensé pour les musées et les galeries d'art. Plusieurs d'entre eux ont déjà franchi le pas, comme le Musée d'Orsay et le Musée d'Art Moderne de la Ville de Paris. Moins encombré que Pinterest (pour le moment du moins), plus "ciblé" et plus transparent sur ses conditions d'utilisation et sa politique concernant les droits d'auteur, Pictify pourrait donc gagner rapidement l'avantage sur son principal concurrent. Les institutions peuvent également y mentionner des informations complémentaires comme leurs horaires d'ouverture, leurs tarifs, etc.
L'utilité d'une telle présence en ligne n'est plus à démontrer. D'un point de vue artistique comme pédagogique, elle peut permettre à de nombreuses personnes d'effectuer des recherches, de préparer un cours, une visite avec des élèves, etc. Cela pourrait également permettre à de plus petits musées de se faire connaître du public. Pourtant, les participations des musées restent très inégales. Si la collection de visuels sur Pinterest du Museum de Toulouse est relativement riche et bien organisée, d'autres se contentent d'une simple "occupation de l'espace", en n'affichant même dans certains cas aucun visuels. Très globalement, le potentiel de ce type de réseaux est encore très largement sous-estimé par les institutions muséales, mais la tendance pourrait bien s'inverser au cours des prochaines années.
Responsive Museum Week - du 15 au 24 septembre 2012
Initiée par Geoffrey Dorne (que nous avons déjà eu l'occasion de présenter lors de la sortie de son application neen) et Julien Dorra, la Responsive Museum Week est née d'un constat : la plupart des sites des musées français sont difficilement, voir pas du tout lisibles sur terminaux mobiles. Pas très pratique lorsque l'on se promène et que l'on souhaite consulter les horaires d'ouverture d'un musée, ou, en pleine visite, si l'on cherche à savoir dans quelle partie du musée se situe une oeuvre, par exemple.
A l'heure où l'accès à internet se fait de plus en plus via mobile et où les normes du design responsif (design adaptable à toute taille d'écran) prennent de plus en plus de place, ces deux professionnels du web et du design se sont donc étonnés de constater que certains sites de musées récents ne s'adaptent pas à la navigation sur smartphone. Ils ont donc décidé de proposer à la communauté de repenser les sites de ces musées en s'appuyant sur les dernières technologies du web pour les rendre plus lisibles et plus agréables à consulter.
L'idée : choisissez un musée, "hackez" sa feuille de style (la partie du code qui permet de définir le rendu graphique d'un site, ses couleurs, son format, etc.) à l'aide d'un outil de type firebug ou stylish et modernisez-le pour le rendre accessible sur smartphone. Enfin, partagez le fruit de votre travail en postant des captures d'écran sur le tumblr de la Responsive Museum Week. Les résultats ne se sont pas fait attendre, plusieurs propositions ont déjà été postées, pour le Centre Pompidou ou le site des musées de la ville de Strasbourg par exemple.
Geoffrey Dorne s'exprime sur ses motivations au micro de Gayané Adourian (du projet museomix) :
De bien prometteuses initiatives, qui augurent une belle réconciliation entre Internet et l'institution muséale, qui pourrait occuper dans le futur une place de choix sur la toile.
En tant que professionnelles du référencement, nous recevons régulièrement des demandes de la part de particuliers, d'entreprises ou de lecteurs de notre blog sur le sujet. La plupart du temps, ceux-ci ne comprennent pas pourquoi leur site ou leur blog n'arrive pas dans les premiers résultats de Google sur certaines requêtes généralistes et souvent très concurrentielles. Si le référencement est un domaine relativement complexe et qui requiert un travail de longue haleine, il existe cependant des actions de base qui peuvent facilement être mises en place. Ce sont les pierres angulaires d'un bon référencement, qui ne saurait être efficace sans ces bases. Il nous a semblé bon de les rappeler afin d'aider les éditeurs de site internet à poser des bases solides pour leur référencement.
1. Appelez un chat un chat
La première règle, c'est que vous devez parler de vous. Si le concept et l'image que vous souhaitez transmettre par le biais de votre blog ou de votre site vous paraissent clairs, dites-vous que ce n'est pas forcément le cas pour votre lecteur, et encore moins pour les robots des moteurs de recherche. Pensez donc bien à vous présenter : ajouter une page de description à votre site, truffer la présentation de votre blog de termes explicatifs, placer une phrase mentionnant l'objet de votre site en bas de page, etc. Si votre site utilise un système de gestion de contenu(comme Wordpress ou Joomla), il est également fort à parier que celui-ci propose un champ de description destiné aux moteurs de recherche, ne négligez surtout pas de le remplir. De la même façon, soignez les titres de vos pages ou de vos articles afin que l'information la plus importante apparaisse immédiatement aux internautes et aux moteurs.
2. Restez modeste
Listez quelques mots ou expressions clés qui décrivent pertinemment votre site ou votre blog. Ils correspondront aux requêtes principales sur lesquelles vous souhaitez vous placer. Essayez de faire simple, de vous mettre à la place de l'internaute (des outils comme Google Tendances des recherches peuvent vous aider) mais gardez à l'esprit que vous aurez beaucoup de mal à vous placer sur des termes de recherche extrêmement demandés. Ces derniers sont bien souvent occupés par des sites à forte notoriété, installés depuis longtemps. Plutôt que d'atteindre péniblement la page 15 de Google sur une requête utra-concurrentielle, mieux vaut donc apparaître en première page pour une requête plus ciblée sur votre site.
3. Ne placez jamais une information importante dans une image
L'une des plus grandes erreurs serait de placer une information capitale pour votre positionnement dans une image. Le nom de votre entreprise par exemple, notamment dans une image qui s'appelerait logo.jpg. On trouve encore des sites dont les titres ou les pages sont entièrement composées de textes transformés en images. Si la lisibilité est souvent discutable pour un oeil humain (sans parler de l'accessibilité et d'un éventuel affichage sur terminaux mobile), il est absolument impossible qu'un moteur de recherche indexe le texte. Du point de vue du référencement, autant ne rien mettre. Même chose pour les sites en full flash qui sont difficiles à référencer. Pensez donc impérativement à convertir les images en texte, et, dans la mesure du possible, à nommer vos images (ainsi que vos PDFs et vos vidéos) de façon pertinente afin de faciliter la tache des robots indexeurs.
4. Définissez pertinemment vos mots-clés et vos libellés
Inutile d'en mettre beaucoup, on perd tout l'intérêt du mot-clé et ça ne plaît pas à Google qui risque d'y voir une tentative de keyword stuffing. Encore une fois, il s'agit donc d'être pertinent, et de choisir des mots qui définissent et qui décrivent votre contenu. Il n'est pas forcément nécessaire de reprendre des mots contenus dans le texte, mais de définir des grandes lignes dans lesquelles s'inscrivent votre article par exemple.
5. Choisissez votre nom de domaine avec soin
Depuis la fin du mois de septembre, une modification de l'algorithme de Google tend à pénaliser les noms de domaine contenant une grande proportion de mots-clés. Pas d'inquiétude si votre nom de domaine contient un ou deux mots-clés descriptifs de votre activité, mais évitez les noms de domaines qui ne comportent que des mots-clés, de nombreux tirets et qui répondent exactement à une requête. Évitez également les noms de domaines trop longs ou comportant trop de mots, ils risquent d'être moins facilement retenus par les internautes.
6. Optimisez les balises méta de votre site, des images et des liens
Ce n'est pas forcément très "technique", surtout grâce aux systèmes de gestion de contenu qui permettent souvent d'avoir accès très facilement aux méta-données : balise title du site, attributs alt et title et longdesc pour les images et les liens. Ils permettent aux moteurs de recherche d'analyser plus facilement le contenu de vos images, par exemple, et donc de mieux les placer lors d'une requête. Pas la peine encore une fois de surcharger les balises, 3 ou 4 mots-clés suffisent.
7. Incitez les internautes à recevoir et à partager vos contenus
Ajoutez un flux RSS, un champ d'abonnement à votre newsletter, ou encore des boutons de partage sur les réseaux sociaux. Cela aidera vos visiteurs à obtenir automatiquement votre contenu, et les incitera à les repartager sur les réseaux sociaux et donc à augmenter leur portée, ce qui est un levier très important du référencement.
Enfin, pensez à suivre régulièrement votre référencement, mais sans en faire non plus une obsession. Le positionnement d'un site ou d'un blog prend du temps, et mieux vaut ne pas se précipiter (ça fait généralement peur à Google). N'oubliez pas de vous déconnecter de votre compte Google et de passer en navigation privée pour ne pas être "pollué" par vos propres résultats de recherche. Et si vous avant encore des questions sur la façon d'améliorer le référencement de votre site, vous savez où nous trouver !
En juillet dernier, Google publiait une étude révélant l'engouement de plus en plus croissant des internautes pour la version mobile de leurs sites web favoris. Ils étaient ainsi 75% à privilégier cette version en situation de mobilité. Une demande difficile à satisfaire quand plus de 96% déploraient l'absence d'optimisation pour ce genre de navigation... Le collectif Digitives a recueilli pour vous 5 conseils clés pour vous aider à passer au tout mobile.
1. "Less is more"
Ecrire pour le web requiert, par définition, un travail de synthèse afin d'offrir aux lecteurs des contenus digestes et suffisamment attractifs pour capter leur attention. Cet effort est d'autant plus grand lorsqu'il s'agit de proposer une version mobile d'un site internet, entraînant la plupart du temps, une véritable réorganisation des textes en ligne.
Dans le cas d'une boutique en ligne, la présence d'une arborescence ne comportant que les principales rubriques ainsi qu'une sélection de produits exhaustive en page d'accueil sont autant d'aménagements qui compteront dans l'expérience de navigation des mobinautes. Le taux de conversion peut être également amélioré en repensant, par exemple, le tunnel d'achat. La commande d'un article peut-elle être simplifiée pour le mobinaute ? Des étapes, comme la création obligatoire d'un compte pour consulter le coût total d'un produit, peuvent-elles être supprimées pour cette cible ?
67% des mobinautes sont plus susceptibles d'acheter sur un site optimisé | 61% abandonnent leur navigation s'ils ne trouvent pas facilement ce qu'ils veulent pour un autre site mobile (source : googlemobileads)
Dans le cas d'un blog, proposer une version mobile peut se traduire par l'accès en priorité aux derniers billets publiés. Le mobinaute peut donc, en l'espace de quelques secondes, accéder à l'article le plus récent et le consulter sans avoir besoin de scroller ou cliquer sur un lien intermédiaire.
2. Voir en grand
Qu'il s'agisse d'un smartphone ou d'une tablette, la résolution de ces écrans et leur mode d'utilisation changent radicalement la façon de naviguer sur un site web. Aussi, textes, visuels, liens ou encore boutons doivent être repensés pour une accessibilité optimale sur ce type d'appareils :
agrandir la taille de la police pour un meilleur confort de lecture,
optimiser l'affichage des visuels et limiter leur nombre pour améliorer le temps de chargement de la page et réduire le scroll,
améliorer la visibilité des affordances (boutons plus grands et espacés, pas d'effet de survol pour le menu, agrandissement des zones de clics etc.)
faciliter la présence de liens de navigation (liens "précedent", "retour à l'accueil" etc.)
3. Jouer la montre
Un site lent au chargement est une des principales causes rédhibitoires pour les internautes dont la patience se voit réduite quasiment à néant s'ils le consultent depuis un terminal mobile. Pressés par le temps et en pleine mobilité, ces derniers souhaitent accéder aux contenus et fonctionnalités dont ils ont besoin en un éclair de seconde et cela facilement. A proscrire donc, les pages interminables et les médias susceptibles d'allonger la durée du chargement.
4. Penser utile
En situation de mobilité, de quelles informations les internautes ont-ils le plus besoin sur un site internet ? Une question primordiale dont les éléments de réponses varient en fonction du domaine concerné. Dans le cas du site internet d'un garage auto, les informations à privilégier en priorité seront potentiellement :
les coordonnées (plan et itinéraire conseillé)
les horaires d'ouvertures
les moyens de contact (clic to call, formulaire de contact au nombre de champs réduits etc.)
la prise de rendez-vous en ligne
Autant de fonctionnalités qui doivent être davantage mises en avant dans un contexte de mobilité.
5. Rester cohérent
Malgré la multitude d'aménagements que peut entraîner la création d'une version mobile, la cohérence est de mise quelque soit le type de terminal utilisé. L'internaute ne doit donc pas se sentir lésé en optant pour une des deux versions, et doit, si possible, avoir le choix entre la version "optimisée" ou classique du site web. Son expérience de navigation doit être complémentaire en passant de l'ordinateur au mobile. Lors d'une création de site web, ex-nihilo, il peut être intéressant de débuter par le développement de la version mobile qui servira de base pour une version plus complète destinée aux PC.
Nous vous proposons de découvrir aujourd'hui notre dernière réalisation : Autoperso.fr, un site internet spécialisé dans la recherche personnalisée de véhicules d'occasion premium. Depuis votre ordinateur, vous fixez le cahier des charges de la voiture que vous recherchez : la marque, le modèle et tous les critères que vous souhaitez lui associer, l'équipe d’Autoperso.fr se charge du reste.
En collaboration avec Mots & Sons et ENC, nous avons réalisé pour notre client, ce site internet complet, support commercial indispensable de l'activité de la société.
Si vous souhaitez vous aussi une communication digitale à votre image, contactez-nous !
Illustrer son site internet ou son blog à l'aide d'images est aujourd'hui presque indispensable. Pourtant, cela peut vite se retourner contre vous si les images que vous uploadez sur votre site ne sont pas ou mal optimisées pour le web.
Les risques :
surcharger votre espace de stockage
dégrader le temps de chargement de vos pages
ne pas profiter du trafic que peut vous apporter la recherche d'images
limiter ou empêcher l'affichage de votre site sur terminaux mobiles
Voici donc quelques conseils à mettre en œuvre pour optimiser l'utilisation de vos images à chaque étape.
Utiliser un format compatible avec le web
Certains formats sont plus lourds que d'autres, et moins adaptés au web. Veillez donc à employer uniquement ces extensions compatibles avec le web : jpeg, png ou gif dans le cas d'illustrations contenant un nombre limité de couleurs (un logo par exemple). Pour en savoir plus sur les formats d'images, consultez cet article consacré à l'optimisation des images pour le web.
Optimiser la taille des images
Pour éviter de ralentir inutilement le chargement de vos pages, pensez à retailler au préalable vos illustrations aux dimensions nécessaires, et à supprimer l'excès d'espace blanc (à remplacer par des marges en CSS). Cette action préalable aura le double avantage d'épargner de l'espace de stockage et de préserver la qualité de l'image. En effet, les images redimensionnées par le navigateur seront de moins bonnes qualités que si elles ont été retaillées par un logiciel de retouche.
Définissez également la hauteur et la largeur de cette image dans le code source dans le but de permettre au navigateur de commencer à afficher le contenu avant même que les visuels ne soient complètement chargés. Le fait d'indiquer ces dimensions permet donc d’accélérer le temps de chargement de la page. Un bon point pour vos visiteurs et pour Google !
Préserver leur qualité
Rien de plus frustrant que de retrouver une image floue ou pixelisée sur un site internet. Cela peut nuire grandement au professionnalisme de vos articles, même si ces derniers sont bien rédigés. Tout est question de compromis entre la lourdeur de l'image et son rendu et il n'est pas conseillé de privilégier l'un au détriment de l'autre. De plus, lors d'une recherche sur Google Images, l'internaute aura plus tendance à cliquer sur une belle image, vous fournissant ainsi un point d'entrée supplémentaire sur votre site.
Ne pas intégrer pas de texte dans les images
Il est aujourd'hui impensable d'utiliser une image à la place d'un texte, notamment lorsqu'il s'agit de titres. Vous y perdriez énormément en termes de visibilité et de référencement. Si vous souhaitez afficher du texte dans une police particulière, c'est aujourd'hui possible grâce aux nouvelles propriétés de CSS et aux Google fonts par exemple, plus besoin donc de recourir à ce type de procédés.
Contextualiser les visuels
Afin de garder une certaine cohérence entre les contenus textuel et visuels de votre page, utilisez des photos ou des illustrations en rapport avec votre texte. Hors de question d'employer une image sans aucun rapport avec l'article qu'il accompagne, vous transmettriez ainsi un signal confus, à la fois pour vos visiteurs et pour les moteurs de recherche.
Donner un nom pertinent à l'image
Cette action possède un double avantage : celui de vous permettre de vous y retrouver plus facilement dans votre bibliothèque de médias (surtout si celle-ci a préalablement été structurée à l'aide de sous-dossiers), mais surtout de renseigner les moteurs de recherche sur le contenu de cette image. Dans l'idéal, utilisez des mots clés descriptifs, séparés à l'aide de traits d'union (-) de préférence, ou d'underscores (_). Ne collez pas les mots les uns aux autres, les moteurs de recherches ont plus de mal à les déchiffrer. Enfin, si le moteur de recherche ne trouve aucun texte descriptif associé à l'image, c'est bien le nom de fichier qui sera utilisé en tant qu'aperçu pour les internautes.
Renseigner les attributs alt, title et longdesc pour le référencement et l'accessibilité
Cet attribut est particulièrement utilisé pour le référencement, puisque c'est lui qui va fournir à Google les informations nécessaires pour qu'il détermine quelles sont les images pertinentes à afficher lors d'une requête. Renseignez donc votre attribut alt à l'aide de 3 ou 4 mot-clés importants, ainsi que Google le préconise. Inutile de multipliez les mots-clés (plus d'une dizaine), votre site pourrait être considéré comme du spam.
Gardez aussi à l'esprit que les personnes souffrant d'un handicap visuel et utilisant un lecteur d'écran n'auront à leur disposition que l'information contenue dans cet attribut. Optimisez-le afin de leur permettre de comprendre le contenu de l'image.
Pour optimiser vos attributs alt, consultez cette vidéo de Matt Cutts :
Dans le cas où l'image que vous présentez sur votre site est significative et contient des informations primordiales, et dont la description sera supérieure à 10 mots, il peut être utile d'avoir recours à l'attribut longdesc. Cet attribut permet de créer un lien vers cette description, afin d'indiquer, aux lecteurs d'écran par exemple, où la récupérer.
Enfin, l'attribut Title permet quant à lui d'apporter une information supplémentaire à l'internaute : c'est ce message qui apparaît dans l'infobulle, lorsqu'il positionne son curseur sur la photo, ou qui sera lu par le logiciel d'un utilisateur malvoyant.
Utiliser les sitemaps pour images
Les sitemaps pour images permettent de fournir au moteur de recherche des informations supplémentaires concernant les images proposées sur votre site ou votre blog. Cela vous permettra d'indiquer à Google quelles sont les images les plus importantes, pour qu'il les mette en avant, ou encore celles qu'il n'est pas nécessaire d'indexer (des images génériques, souvent répétées, qui n'apportent aucune information essentielle par rapport au contenu de votre site). Il suffit dans ce cas de ne pas répertorier ces images dans votre sitemap. Grâce à elle, vous pourrez répertorier jusqu'à 1000 images par page, en indiquant pour chacune d'entre elles, à l'aide de balises, des informations supplémentaires telles que la légende de l'image ou son emplacement géographique. Une donnée fort utile quand on sait que les résultats de recherche sont toujours plus localisés.
Adapter automatiquement leur taille au format de l'écran de l'internaute
Le design responsif est en passe de devenir un véritable standard. Idéal pour rendre votre site consultable et ergonomique sur n'importe quel terminal, il implique non seulement d'adapter le design, mais aussi les tailles des images, à n'importe quel format d'écran. Il s'agit toujours d'un point technique délicat, dont nous vous parlerons plus en détail dans un prochain article.
Ne pas abuser des images
Enfin, s'il est indispensable d'illustrer son site internet ou son blog pour le rendre plus attractif, évitez cependant de multiplier à outrance leur utilisation. Cela alourdit les pages, ralentit votre site et énerve l'internaute qui aura l'impression que l'information est délayée de manière artificielle. De même, si vous souhaitez réutiliser une image, ne la ré-uploadez pas sur votre site, mais réutilisez-la depuis votre bibliothèque de médias.
Le Collectif Digitives est fier de vous annoncer le lancement de son site internet. Conçu pour s'inscrire dans la ligne graphique épurée initiée avec le blog, notre site est destiné à regrouper et à mettre en avant l’ensemble de nos activités et de nos réalisations, web comme print.
Nous vous y présentons les membres fondateurs du collectif, ainsi que notre philosophie de travail dont les maîtres mots sont la créativité, l’accompagnement, la formation et l’autonomie.
Ce site nous permettra également d'annoncer le lancement de nos tous derniers projets ainsi que de faire connaître les événements qui nous tiennent à coeur.
Et puisqu’un site web vaut mieux qu’un long discours, nous vous souhaitons une bonne navigation !
Il n'est pas toujours facile quand on débute dans la création de sites internet de trouver les outils et les services qui nous permettent de gagner du temps et de travailler plus efficacement. Nous avons sélectionné 20 utilitaires pour aider les jeunes professionnels du web.
Poser les bases de son projet :
Choisir son CMS :
Il est aujourd'hui de plus en plus fréquent d'avoir recours à un CMS pour créer son site internet. Plus pratique et mieux conçu, c'est souvent une solution de premier plan pour créer un site solide et esthétique. Il existe une multitude de CMS, le choix du logiciel idéal pour votre projet n'est donc pas des plus aisé. Pour vous venir en aide, vous pouvez notamment vous référer à cette infographie sur les trois principaux CMS opensource ou consulter le livre blanc des 200 questions pour choisir un CMS.
Créer sa charte graphique :
Nous vous avons déjà présenté l'outil Kuler, proposé par Adobe. C'est l'un des meilleurs utilitaires pour vous aider dans la création de la charte graphique de votre site. Grâce à lui vous pourrez créer des harmonies graphiques élégantes à partir de votre logo ou d'une photo, ou bien puiser l'inspiration auprès des membres de la communauté.
Créer une maquette :
Composer une grille :
Un site donne toujours une impression plus professionnelle quand son design est structuré sous forme de grille. Pour vous aider à créer la grille qui correspond le mieux aux besoins de votre site, Modular Grid est l'outil qu'il vous faut. Il vous suffit d'indiquer quelques paramètres de votre grille (largeur du site, nombre de colonnes, largeur de la gouttière, etc.) pour que ce site génère pour vous un modèle correspondant parfaitement à vos attentes. Il ne vous reste plus qu'à le télécharger dans le format de votre choix. Une extension est également disponible pour créer votre grille directement dans Photoshop.
Prévoir ses espaces publicitaires
Quand on souhaite monnayer son site internet, il est primordial de prendre en compte la taille et l'emplacement des encarts publicitaires dès les premières étapes de la conception de son site, afin de s'éviter toute mauvaise surprise. En effet, les publicités sur le web répondent à des normes strictes. Pour connaître les formats standards des encarts, vous pouvez consulter l'aide de Google pour les formats de publicités Adsense, ou encore les recommandations de l'IAB sur les formats publicitaires classiques.
Choisir ses icônes
Si vous n'êtes pas un pro du webdesign, la création d'icônes personnalisées pour votre site risque de poser problème. Heureusement, il existe de nombreux sites qui proposent des packs d’icônes gratuits, tels que la PNG Factory, ou encore le site Icon Finder, une véritable mine d'or. Attention cependant à bien choisir le type de licence correspondant à votre projet.
Trouver la police qui correspond à votre projet :
La recherche de la typographie idéale est une quête de longue haleine. Pour vous aider dans vos recherches, il existe de nombreux sites proposant des polices gratuites. Parmi ceux-ci, Dafont et son catalogue de plus de 12 000 typos s'impose comme l'une des références en la matière. Vérifiez bien là aussi quelles sont les conditions d'utilisation de votre police.
Développer son site :
Coder :
Plus convivial que le simple bloc-note, l'utilitaire Notepad ++, grâce à ses nombreuses options de coloration syntaxique, d'indentation ou de recherche vous permettra de créer ou de modifier votre code plus facilement.
Créer ses feuilles de style :
Primer CSS se charge de générer automatiquement votre css à partir du code HTML que vous lui avez indiqué. Vous récupérez ainsi un squelette vide avec vos classes et vos attributs, et il ne vous restera plus qu'à les décrire.
Débuter en HTML5 :
Grâce à cet aide-mémoire des tags HTML5, le nouveau et très prometteur standard du web n'aura plus de secrets pour vous. L'infographie propose également un très utile récapitulatif de l'état de compatibilité des navigateurs avec le HTML 5.
Innover grâce à la CSS3 :
Envie d'ajouter un dégradé, des bordures arrondies ou encore cette jolie police que vous avez trouvé sur Dafont à votre site ? Exit les images, grâce à la CSS 3 vous gagnez en accessibilité et en référencement et le CSS3 Generator vous permettra de créer le code correspondant à vos envies.
Préparer ses emplacements textuels :
Pour ne pas perdre de temps dans le développement de votre site en attendant d'avoir les textes définitifs de vos pages, vous pouvez utiliser du texte de remplissage tel que le fameux lorem ispum ou, pour une utilisation plus avancée, le html ipsum qui vous fournira tout le code nécessaire au type de texte qu'il vous faut.
Utiliser des images de remplissages :
Si vos photos ou vos illustrations ne sont pas encore prêtes mais que vous souhaitez tout de même préparer vos pages, pourquoi ne pas faire appel au service Placehold.it ? Il vous suffit de choisir la taille de votre image, sa couleur ou encore un texte d'accompagnement, et de récupérer le code généré pour le placer sur votre site.
Générer ses mentions légales :
Étape peu attrayante mais pourtant indispensable dans la création d'un site internet, vos mentions légales peuvent être facilement générées grâce aux modèles fournis par le site de la CNIL. Juste quelques cases à cocher et il ne vous restera plus qu'à les personnaliser.
Tester et débugger :
Tester la compatibilité sur les navigateurs...
Le service Adobe Browser Lab vous aidera à tester la compatibilité de votre site avec tout type de navigateurs, des plus anciens aux plus récents. Le meilleur moyen de vérifier comment votre site sera perçu par les internautes. Attention, ce service deviendra payant à compter du mois d'avril 2012.
… et sur les terminaux mobiles :
De plus en plus d'internautes consultent aujourd'hui le web depuis leur téléphone portable, leur tablette et bientôt par le biais de leur télévision connectée. Pour leur éviter une expérience désagréable en arrivant sur le vôtre, et risquer de perdre des visiteurs définitivement, testez le rendu de votre site sur les différents types de terminaux mobiles grâce aux services emulateur mobile pour les smartphones, ou screenfly pour tous les types de terminaux mobiles.
Tester l'accessibilité :
Il est primordial de vérifier si votre site sera bien accessible à tous types de visiteurs. Heureusement, il existe un outil très efficace et simple d'utilisation : la plateforme Wave. Grâce à elle, vous pourrez tester et facilement visualiser les éléments de votre site qui n'auraient pas été optimisés pour l'accessibilité web. Il ne vous restera plus qu'à apporter les correctifs nécessaires pour faire de votre site un modèle d'accessibilité.
Valider son site :
Pour garantir la qualité et l'accessibilité de votre site, il est nécessaire de vérifier qu'il est bien en adéquation avec les spécifications des standards du web édictés par le W3C. Le W3C Markup Validation Service vous permettra de valider à la fois votre code HTML, mais aussi vos feuilles de style grâce au W3C CSS Validation Service.
Débugger en ligne :
Une fois votre site en ligne, le plus simple pour traquer les bugs ou essayer quelques modifications est de recourir à l'extension Firebug pour Firefox. Grâce à ses fonctionnalités avancées, vous pourrez facilement faire vos tests avant de les appliquer à votre site.
Tester le temps de chargement des pages :
La vitesse de chargement d'un site tient une place des plus importantes dans son référencement par les moteurs de recherche. Un site trop lent pourra être pénalisé, même si son code et son contenu ont été optimisés pour le référencement. Pour vous éviter ce genre d'impair, tester le temps de chargement de vos pages grâce à des outils en ligne tels que Yottaa. Cet utilitaire aux fonctionnalités avancées calculera le score de votre site et vous permettra même de simuler son temps de chargement pour plusieurs zones géographiques.
Votre site internet et Google :
Pour voir votre site comme Google le voit, vous assurer qu'il ne présente aucun obstacle majeur pour être correctement référencé et tester votre sitemap avant de la soumettre aux moteurs de recherche, vous pouvez utiliser les Google Webmaster Tools qui vous aideront à en savoir plus sur l'indexation de votre site.
Vous voilà désormais armés pour développer votre premier site internet. Et pour les créateurs les plus aguerris, n'hésitez pas à partager vos astuces dans les commentaires. Stéphanie M.
Avant de vous lancer dans la création de votre site internet, de votre blog ou de votre portfolio en ligne, il est important de mettre à plat plusieurs composantes qui vont vous permettre de construire une identité forte auprès des internautes, et de marquer votre singularité par rapport à vos concurrents. Une arborescence ergonomique, une ligne éditoriale forte, une stratégie de référencement pensée en amont ou encore une charte graphique reflétant votre personnalité sont autant d'atouts qui peuvent faire toute la différence. Véritable vitrine de votre activité, l'harmonie de couleurs qui habillera votre interface en ligne va immédiatement déterminer votre image auprès des internautes. Facteur essentiel de l'ergonomie de votre site, sa colorimétrie peut inciter vos visiteurs à y rester pour poursuivre sa navigation, ou au contraire le repousser instantanément. Il est donc indispensable de mener une réflexion en profondeur avant de choisir les teintes qui composeront votre thème. Heureusement, il existe des outils en ligne pour vous aider à concevoir une parfaite harmonie de couleur. Le collectif Digitives a testé pour vous un service hors pair : la plateforme Kuler, proposée par Adobe.
Quels éléments vont définir la charte graphique de votre site ?
Le premier paramètre à prendre en compte est bien sûr votre logo. En effet, c'est lui qui va conditionner le choix des couleurs principales de votre site, afin de créer une cohérence d'ensemble. L'objectif est de créer un lien entre votre logo et le design de votre site afin de "fixer" votre identité graphique, et d'éviter que votre logo semble avoir été "plaqué" sur le site.
Vient ensuite la question de l'atmosphère que vous souhaiter créer par le biais de votre site. Les couleurs ont une portée symbolique qui doit être prise en compte pour transmettre au mieux le message que vous souhaitez faire passer auprès des internautes. A cela s'ajoute bien sûr la prise en compte de votre activité. Votre site présente votre restaurant ? Vous souhaitez lancer un blog spécialisé dans les énergies renouvelables ou dans l'automobile ? Votre charte graphique ne sera définitivement pas la même que celle du site d'un club de sport. Traditionnellement, les activités techniques et industrielles vous conduiront par exemple à privilégier les nuances froides et métalliques, alors que le domaine des rencontres en ligne vous fera préférer des teintes plus feutrées et plus chaleureuses.La portée géographique de votre activité est également un facteur important dans la définition de vos couleurs. Le symbolisme des couleurs peut varier fortement selon les cultures, et selon l'implantation de votre activité, il sera primordial de prendre en compte ces différences afin de ne pas fausser l'image de votre entreprise auprès de clients étrangers.
Cependant, il peut aussi être intéressant de chercher à "rompre" avec des codes établis dans votre domaine pour chercher à vous démarquer le plus possible de vos concurrents. Veillez pourtant à ne pas pousser trop loin cette singularité, afin de ne pas "perdre" l'internaute qui pourrait être dérouté par un langage visuel trop éloigné de ses habitudes. Dans ce cas, l'idéal serait bien sûr de faire appel à professionnel du graphisme qui saura vous guider.
Comment utiliser Kuler pour créer votre charte graphique ?
Disponible gratuitement en ligne depuis 2008 ou en version mobile payante (7,99 €) sur votre tablette android depuis quelques mois, Adobe Kuler vous permet de créer, rechercher, modifier ou partager des thème chromatiques très simplement à partir d'une couleur ou même d'une image.
Découvrez le fonctionnement de l'application Kuler en vidéo :
Sur le site en ligne comme au sein de l'application, les harmonies de couleurs sont très simple à créer grâce aux outils proposés. L'extraction automatique d'un thème à partir d'une image - votre logo par exemple - est particulièrement ergonomique et vous permet de créer et de modifier facilement votre charte graphique.
La création de thèmes depuis la roue chromatique vous permet quant à elle de tester plusieurs types d'harmonies grâce aux règles de couleurs (monochrome, complémentaire, dégradé, etc.) ou de créer votre propre nuancier.
Une fois votre thème créé, il vous est facile de l'importer dans les logiciels de la Creative Suite, en passant par le Creative Cloud. A noter, le panneau Kuler est également disponible dans la version anglaise de la CS5 pour les logiciels Illustrator, Flash, InDesign, Fireworks et Photoshop.
La dimension "sociale" de Kuler est un plus non négligeable puisqu'elle vous permet de puiser l'inspiration auprès d'autres utilisateurs mais également de partager vos créations chromatiques auprès d'une communauté active. Et si vous souhaitez donner libre court à vos envies ou à votre humeur du moment, n'hésitez pas à utiliser la fonction de recherche par mot-clé pour trouver les nuanciers correspondants.
Quant à l'application mobile, elle vous permettra de créer vos nuanciers en ligne ou hors ligne, et de travailler directement à partir de photographies ou de vidéos enregistrées à partir de votre tablette. Un avantage certains pour les designers nomades souhaitant interagir avec leur environnement immédiat :
On peut dire que le monde de la politique aura mis du temps avant de s'intéresser au domaine du web et à prendre la mesure de son intérêt dans les campagnes électorales. C'est aujourd'hui chose faite, et l'élection présidentielle de 2012 devrait occuper une place particulièrement importante sur internet. Les candidats sont désormais prêts à investir du temps et de l'argent (selon une estimation d'Europe 1, les budgets web du PS et de l'UMP devraient tout de même avoisiner les 2 millions d'euros, contre 200 000 € pour EELV). Leur modèle ? La campagne 2008 de Barack Obama qui avait su mettre le web à profit pour mobiliser les militants. Sites internet de "mobilisation", réseaux sociaux ou encore applications, les candidats (enfin surtout leurs communiquants) rivalisent d'inventivité pour lancer des projets qui sauront séduire les internautes afin de les mobiliser pour la campagne.
Mais tout comme la campagne "classique", la campagne web pour l'élection présidentielle 2012 est placée sous le signe de l'hostilité. Le cybersquattage (occupation frauduleuse d'un nom de domaine) est en première ligne, et les exemples de noms de domaine à connotation politique déjà été détournés sont nombreux (Hollande2012.fr, http://unionpourunmouvementpopulaire.fr/ ou encore http://www.lechangementcestmaintenant.fr/).
Capture d'écran du site www.lechangementcestmaintenant.fr
Autre constante, le recours au crowdsourcing et aux e-militants pour animer la campagne en ligne, recruter des électeurs et produire du contenu. Une stratégie qui repose sur la mise en réseau des bonnes volontés militantes pour faire avancer la cause politique. Premier exemple, l'application mobile Placeopeuple du Front de Gauche qui a pour vocation d'informer les sympathisants des avancées de la campagne de Jean-Luc Mélenchon et de fédérer un réseau de "Révolunautes" prêts à s'impliquer dans cette même campagne en relevant des défis collectifs proposés par le biais de l'application. A noter, le site de campagne du Front de gauche propose également une websérie autour des coulisses de la campagne présidentielle.
QR Code de l'application PlaceOPeuple
Les réseaux sociaux auront bien sûr un pouvoir prépondérant dans la campagne. Malgré une tentative en demi-teinte de création de réseaux sociaux "politiques" (Le site des Créateurs de Possibles de l'UMP a connu un flop retentissant et le réseau social du PS, la Coopol, reste relativement confidentiel), c'est donc par les désormais très classiques Facebook et Twitter que devrait se faire la diffusion d'information et de la mobilisation politique.
Mais il n'y a pas que les politiciens qui font preuve d'initiative pour mettre en avant l'élection présidentielle sur le web. En décembre dernier, Google a dévoilé les grands gagnants de son concours de développement web organisé en vue des présidentielles 2012. Version contractée du terme Data Visualization, Dataviz a pour objectif d’offrir un autre regard sur la campagne en mariant de manière harmonieuse données et visuels. Le développement d’applications web innovante a été retenu comme interface de choix pour visualiser ce type de contenu. Au final, 6 applications ont été désignées finalistes par Google avec comme grand vainqueur MediArena qui propose une Dataviz du traitement des différentes campagnes et candidats aux prochaines élections par la presse.
Mediarena propose ainsi une vision globale du poids médiatique d’un candidat en récupérant les données à partir de flux rss et de tweets. Très intuitive, l’application permet de confronter la visibilité de deux candidats, notamment sur des thématiques précises, afin de pouvoir juger au mieux de leur importance au sein de leur discours livré aux médias.
Parmi les 5 autres finalistes, on trouve également RetwHit, une application qui passe au crible l’activité des candidats sur Twitter.
Quel candidat twitte le mieux ? Retwhit vous aidera sans nul doute à vous faire une idée de la Twittosphère par période et couleur politique à travers une Dataviz simple d’utilisation.
Autant d’applications qui joueront incontestablement leur rôle à jouer dans le déroulement de ces élections. Google leur consacre d’ailleurs une place de choix sur sa chaîne Youtube dans l’onglet “Tendances”.
Et pour finir, nous tenions à saluer une initiative amusante proposée par le magazine en ligne Slate : le générateur de slogan. Basé sur le constat que les slogans politiques manquent tous cruellement d'originalité, le sloganiseur vous propose de créer votre propre slogan électoral, en vous économisant les services d'une agence de com.
Une note d'humour appréciable dans une campagne dans une campagne qui s'annonce particulièrement tendue.
Quand on aime faire de la photographie, il arrive qu'on veuille retoucher une image pour améliorer un cadre ou éclaircir un plan. Et quand on écrit pour le web, il est fréquent d'avoir besoin de publier une image dans des conditions matérielles spartiates. Des interventions pas toujours évidentes quand on n'a pas photoshop, un ordinateur pas suffisamment puissant pour faire tourner certains logiciels ou encore quand on utilise le pc de quelqu'un d'autre. Nous avons testé les services de trois sites de retouche de photos en ligne, des solutions pratiques et efficaces pour faire de la retouche de photo basique quelque soit son niveau de compétence.
Picnik est un service de retouche disponible en ligne ainsi que dans l'interface de Picasa Web, la plateforme d'images en ligne de Google. Dans cette interface minimaliste, une large fenêtre est consacrée à la photo uploadée. La limite de taille d'image est visiblement peu contraignante puisque le test effectué avec une image de 10 MO s'est avéré concluant. Les outils sont présentés sous forme de boutons très visibles (et en français), l'ensemble est très ergonomique et tout à fait adapté à une prise en mail par un public novice en matière de retouche photographique. Ses avantages : la possibilité de redimensionner une image librement, et sa galerie d'effets, parmi lesquels on compte les looks Lomo et Holga, très réussis. Ses points faibles : plusieurs commandes ne sont accessibles qu'en prenant la version premium et les publicités pour cette dernière sont assez envahissantes.
Comme son nom l'indique, photoshop.com est la version online du célèbre logiciel graphique. Loin d'être une simple copie, il s'agit d'une adaptation allégée et destinée à un public plus novice. Son interface épurée et ses outils aux noms évocateurs permettent de trouver facilement les actions désirées : correction des yeux rouges, de la saturation, recadrage... Le site propose également un certain nombre d'interventions graphiques sur l'image : ajout de texte, d'un cadre, pixellisation... Ses plus grands avantages résident dans sa rapidité d'exécution, la possibilité de re-visualiser à tout moment l'original grâce au bouton "View original" et dans l'outil de redimensionement pré-réglé pour s'adapter aux dimensions d'une photo de profil, d'une utilisation sur smartphone, d'un envoi par e-mail ou encore d'une utilisation sur un site internet. Ses points faibles : la nécessité de créer un compte pour utiliser le service, la limitation de la taille d'upload de photo qui n'est pas suffisante pour un reflex par exemple et les outils somme toute relativement basiques. Il ne vous sera pas possible de recadrer une image selon un ratio précis ou de redimensionner l'image sans respecter ses proportions.
Avec son design jumeau de la version logicielle de photoshop, Pixlr est de loin l'outil de retouche photographique le plus avancé et le plus efficace de ce test. L'éditeur est réactif et propose un grand nombre de fonctionnalités (en français) telles que le redimensionement avec choix du ratio, la baguette magique qui permet de sélectionner des plages de couleur, et même un filtre "lueur glamour" des plus réussis. La possibilité d'uploader des images lourdes fait également partie des avantages les plus utiles de cette plateforme. Autre avantage, il n'est pas nécessaire de s'identifier ou de posséder un compte sur le site pour l'utiliser. Les habitués de photoshop ne seront pas dépaysés, mais les plus novices risquent d'avoir besoin d'un temps d'adaptation avant de tirer profit pleinement de toutes les possibilités qu'offre Pixlr.
Au cours de cette étape décisive qu'est l'optimisation d'un site internet, les ergonomes ont souvent recours a un outil extrêmement utile et performant : le test utilisateur, également appelé test d'utilisabilité. En effet, confronter un site internet à une utilisation "réelle", réalisée par des personnes extérieures au projet, peut être une étape décisive dans l'étude de l'ergonomie et de l'utilisabilité de ce site. Elle peut soit confirmer, soit infirmer les décisions prises au sujet de l'arborescence, du contenu ou du design.
Qu'est-ce qu'un test utilisateur ?
Un test utilisateur consiste à mettre en scène de la manière la plus réaliste possible l'utilisation d'un site internet par un groupe de personnes choisies pour leur ressemblance avec vos "internautes-types". La mise en oeuvre d'un test utilisateur requiert un logiciel d'enregistrement de l'écran afin de pouvoir revenir sur les actions des testeurs, et, en fonction du besoin, de matériel d'enregistrement (caméra, micros...) ou d'un logiciel d'eye-tracking pour étudier le comportement visuel d'un utilisateur sur la page.
Pourquoi mettre en place un test utilisateur ?
Le test utilisateur permet d'identifier les éventuels problèmes de votre site avant son lancement : c'est un gain de temps et d'argent. Dans le cas d'un site pré-existant, il peut vous permettre d'améliorer votre taux de transformation.
Faire appel à un public externe est essentiel à un certain stade du projet, car l'équipe qui travaille sur le site est bien trop impliquée pour avoir un avis objectif et se défaire des habitudes déjà acquises sur ce futur site.
Comment procéder ?
Avant le test :
Identifiez votre cible pour constituer un échantillonnage efficace de participants. Selon Jakob Nielsen, le grand spécialiste mondial de l'ergonomie, 5 utilisateurs suffisent à soulever 80% des problèmes d'un site internet. D'autres spécialistes s'accordent à dire qu'il est préférable d'avoir recours à un groupe de 8 à 10 personnes. Ce critère est laissé libre à l'appréciation de chacun, pour des raisons évidentes de budget. Cependant, il semble préférable de morceler le test en réalisant plusieurs tests espacés, à différentes étapes de la conception du site, et en procédant à des corrections entre chaque test. Dans le cas d'une refonte, il est intéressant d'inclure au panel de testeurs des utilisateurs familiers du précédent site afin d'étudier leur capacité d'adaptation à la nouvelle interface.
Établissez ensuite un plan de test "standard", en fonction des objectifs de votre site : trouver facilement et rapidement le formulaire de demande de devis, trouver le prix d'un article sans avoir à l'ajouter au panier... Ce plan de test comporte une liste de tâches à effectuer, des point-clés, des scénarios d'utilisation, des questions... Attention cependant à ne pas fixer un cadre de test trop strict. Chaque utilisateur a ses habitudes, et ce n'est pas parce qu'il ne passera pas par l'endroit exact où vous souhaitez qu'il passe que le test en sera raté.
Il est très important de mettre les utilisateurs en confiance dès le début du test, en leur expliquant que ce ne sont pas eux qui sont testés, mais bien le site internet. Au contraire, signifiez-leur que leurs erreurs, loin d'être gênantes, sont très utiles car révélatrices des erreurs de conception du site (et pas de l'utilisateur). Présentez-leur le site et laissez-leur quelques instants afin qu'ils puissent se familiariser avec l'outil (sauf si cela devait entrer en conflit avec le protocole de test). Veillez à commencer le test avec des tâches faciles à réaliser, cela permettra aux utilisateurs de découvrir le site et de se détendre.
Au cours du test :
L'observateur prend note des erreurs, des hésitations, des incompréhensions et de toutes les difficultés que les utilisateurs rencontrent, du nombre de clics nécessaires à la réalisation d'une tâche ainsi que de la rapiditité avec laquelle ils effectuent les tâches requises. Il est également essentiel de recueillir leurs impressions au cours du test, et notamment leur degré de satisfaction, un critère signifiant de l'utilisabilité d'un site. Incitez-les à verbaliser leurs actions. En cas de problème, n'hésitez pas à lui demander son avis sur les améliorations possibles, cela peut s'avérer extrêmement instructif. Évitez cependant de leur venir en aide au cours du test, car leur comportement doit être le plus proche possible d'un comportement typique. La phase de test ne doit pas être trop longue, afin que la concentration du panel d'utilisateurs ne se relâche pas. Il est préférable d'introduire des instants de pauses si le test devait durer plus d'une heure.
Après le test :
Toutes les données recueillies vont ensuite être confrontées à des objectifs d'utilisabilité (quel pourcentage d'erreur est acceptable ? Les tâches sont-elles effectuées plus vite ou moins vite que sur l'ancien site...) et analysées. La satisfaction des utilisateurs sera également étudiée et prise en compte dans le processus décisionnel. En fonction de la marge d'erreur acceptable, des recommandations seront émises par l'ergonome afin de procéder à des aménagements, ou, dans le pire des cas, à une refonte complète.
Le test utilisateur représente un engagement certain en termes de temps et d'argent, mais c'est un élément fondamental dans la conduite d'un projet. Si vous n'avez pas les moyens de faire appel à un professionnel, il vous est tout de même possible de réfléchir vous-même à un protocole de test simplifié, que vous pourrez soumettre à un groupe de collègues ou d'amis extérieur au projet.
Aujourd'hui le collectif Digitives vous propose sa sélection des 10 sites internet les plus beaux, les plus originaux, ou, en tout cas, ceux qui nous ont le plus tapé dans l'œil ! Ce classement est bien sûr hautement suggestif, alors n'hésitez pas à nous suggérer vos sites internet préférés dans les commentaires.
1. Le plus rock & roll
Interactif et amusant, le site du groupe The Strokes se démarque par sa présentation sobre, masculine et inventive. Une bonne publicité à l'occasion de la sortie de leur nouvel album.
2. Le plus géométrique
Des couleurs poudrées qui viennent adoucir le rigorisme des formes géométriques, des visuels nombreux et élégants, le site de l'Opéra National du Rhin est une merveille.
3. Le plus ludique
Le site dontclick.it propose une expérience de navigation toute particulière, puisque le clic est interdit ! On apprend à sélectionner les éléments de manière différente, en effectuant des gestes précis ou en respectant un timer.
4. Le plus élégant
Le portfolio de l'artiste Nora Rose Travis est un modèle de raffinement et d'élégance. Un parfait exemple de site internet à page unique. Dans la même veine, le site de la graphiste Lucia Soto.
5. Le plus professionnel
Le site de l'agence de design britannique Seymourpowell est à son image : élégant, racé, professionnel. Le découpage de la page en trois bandes verticales est particulièrement intéressant.
6. Le plus expérimental
magneticNorth, autre agence de design, propose elle aussi une navigation originale. Il s'agit ici de dessiner des formes avec sa souris pour faire apparaître un projet, une news ou une recherche.
7. Le plus photogénique
Le ton est donné, et l'accent mis très clairement sur les œuvres de la photographe américaine Valerie Phillips. Un parti pris intéressant pour ce type de portfolio. Dans le même esprit, on retrouve du très inclassable groupe Die Antwoord, ou encore le site de vente en ligne Blixt & Dunder.
8. Le plus graphique
Les pages du site de l'agence digitale creativespark fourmillent de petites illustrations toutes plus magnifiques les unes que les autres. Les amateurs d'illustrations animalières peuvent également aller faire un tour sur Beavory, site de l'artiste et native digitale Keren Mack.
9. Le plus bluffant
Une navigation originale mais rendue assez difficile par l'abondance de contenus. Cependant le site de Kenjiro Harigai est un véritable bijou.
10. Le plus illustré
Et pour finir, notre coup de cœur. Le site de l'illustratrice Lotie est beau et élégant, et l'expérience de navigation tient de la promenade onirique. On pourrait simplement lui reprocher un léger manque d'ergonomie. Dans le même esprit, on retrouve les très jolis sites de Mademoiselle Dimanche ou de La Lutine.
Et en bonus, parce qu'on a reçu une très très lourde pression de leur part mais aussi parce qu'on les aime bien, on vous rappelle que le site d'AtypicStore n'est pas mal non plus :
