9 Dec 2009

Améliorer le SEO de vos sites flash avec SWFAddress

Swfaddress

Contexte

Ça fait un bout de temps que je veux parler de cette librairie Javascript mais j'oubliais toujours. C'est en tombant sur la nouvelle création Flash d'une agence interactive de Québec que l'idée m'est revenue. Au départ je ne suis pas un grand fan de Flash et de l'anti-accessibilité en général. L'une des raison pourquoi je n'aime pas les sites 100% Flash est parce que notre site n'a alors qu'un seul URL (la racine du domaine).

La solution

La librairie SWFAddress de la compagnie Asual permet de palier à ce problème. En effet en liant cette librairie à notre site, Flash peut communiquer au navigateur un changement de page et l'adresse de la page est rafraîchie automatiquement.

Exemple

   

(download)

Conclusion

La prochaine fois que vous faites un site 100% flash ou en Heavy Ajax, pensez-y! Aller au site de SWFAddress

19 Sep 2009

L'étape des tests utilisateurs

Voici deux articles sur les tests utilisateurs (eye-tracking, validations, Tests A/B, etc.) qui ont retenu mon attention dèrnièrement:

The Best of Eyetrack III: What We Saw When We Looked Through Their Eyes Eyetrack III

Inline Validation in Web Forms A List Appart

 

Bonne lecture!

16 Sep 2009

Le méga menu, une nouvelle tendance?

Un méga menu?

Dropdown

Lorsque vient le temps de faire la navigation d'un site contenant beaucoup d'information hiérarchisée, on se tourne généralement vers les menus déroulants à multiples niveaux (Drop-down menus). Cependant, ces menus sont parfois difficile d'accès, spécialement lorsque le nombre de niveau est supérieur à 2. Dans ce cas on a alors à descendre, puis glisser latéralement sur une étroite bande et si par malheur notre curseur glisse dans le vide ou sur une autre section, il faut recommencer... Pas génial.

Or, depuis un certain temps, on voit apparaitre des menus riches et facilement navigables. Ils semblent avoir été baptisés les Mégas menus. Le concept est apparu au grand public avec la sortie de Microsoft Office 2007 qui réinventait la façon de construire son menu principal. Au lieu de présenter le contenu sous la forme expliquée plus haut, le Méga menu offre à la base une liste horizontale claire présentant les principales catégories, et au survol une palette d'options riche et détaillée.

En quoi est-ce mieux?

  1. Les zones interactives sont beaucoup plus larges et donnent une plus grande marge d'erreur à l'usager. Il peut voir plus d'options à la fois et choisir sans avoir à se soucier de ne pas dépasser de la zone sensible avec son curseur.
  2. Plus le temps passera, plus vos usagers seront à l'aise avec ce concept. Je m'explique. Microsoft Office est LA suite bureautique la plus utilisée dans le monde et les gens vont s'habituer à ce genre de navigation. Donc de l'offrir sur votre site web ne devrait pas créer de confusion chez les usagers. Ce qui est difficile dans le domaine de l'utilisabilité, c'est de réinventer la roue. Les usagers sont habitués de travailler d'une façon qu'ils connaissent. Changer le fonctionnement d'un élément aussi central que la navigation principale est assez case-cou. Or, quand on s'appelle Apple, c'est plus facile parce qu'on a une réputation assez enviable qui nous précède. Quand on est Microsoft, on a un certain monopole qui nous permet d'exiger une adaptation aux usagers parce qu'ils n'ont pas vraiment le choix. Donc, plus le temps va passer, plus le taux d'adoption de Office 2007 sera élevé, plus ce modèle de menu sera utilisé sur le web et plus les usagers seront à l'aise avec ce concept.
  3. Jakob Nielsen, l'expert de l'utilisabilité, a approuvé ce genre de menu. En effet, on peut lire sur le site de Jakob Nielsen les raisons menant à son approbation et les conditions à respecter pour réellement créer un menu accessible. Je vous invite à lire ses conseils. Enfin, j'ai collecté pour vous différents modèles de Mega menu pour vous aider à saisir ce que c'est exactement.

(download)

Autre excellente ressource concernant les mega menus

Mega Drop Down Menus w/ CSS & jQuery

25 Mega Menus for Your Design Inspiration

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu

26 Aug 2009

Les bons outils pour bien démarrer un projet web

DB Designer 4

Le premier outil, DB Designer 4, est un logiciel open source de fabFORCE qui intègre le design, le modelage et la création de la base de données dans un environnement unique. Bref, pour ceux qui travaillent avec Phpmyadmin, c'est bien pratique pour pouvoir y voir plus clair et travailler avec des collègues à la création de la BD. Avant, j'utilisais Access pour avoir une représentation graphique mais ce logiciel est plus léger et est compatible avec plusieurs types de BD (MySQL, SQLite, ORACLE, MSSQL). 

(download)

Plus de captures sur le site de fabFORCE

Balsamiq Mockups

Avant j'utilisais Photoshop pour faire mes sketchs mais je trouvais que ça demandait pas mal de temps et que pour les retouches ça devenait un peu lourd. J'ai alors découvert Balsamiq Mockups qui permet de créer rapidement des maquettes de type brouillon grâce à son interface simple, ses objets pré-existants (Objets de formulaires, menus, etc.) et sa légèreté (quoi que PS pas dur à battre). Seul bémol à propos de ce logiciel serait que parfois je ne trouve pas l'objet exact que je cherche, donc je crée un objet à peu près similaire avec des objets simples et ça fait le travail.

(download)

Plus d'exemples sur le site de Balsimiq Mockups

Avec un bon schéma de BD et des pages-écrans claires, il devient plus facile de créer des maquettes qui répondent précisément aux besoins du client.

17 Apr 2009

jquery pour les nuls: un webcast à voir

Problème :

Vous avez vu tous ces sites web kick-ass visuellement parlant et tellement intuitifs et fluides sur la navigation et vous voulez en faire autant. Vous rêvez de faire des effets avec vos paragraphes, des slide-shows, des validations de formulaires stylisées. Sauf que vous ne voulez pas de flash et faire ça en javascript vous prendrait toute la vie!

Solution :

 

Apprenez jquery! Et je viens tout juste de tomber sur une série webcast offerte sur le site In the woods conçue pour les zéros du jquery. C'est selon moi une excellente façon de vous y mettre pour ensuite naviguer vers d'autres ressources comme http://net.tutsplus.com/ par exemple. Vous m'en redonnerez des nouvelles! Bon week-end à tous!

30 Mar 2009

Trouvez un expert en ligne

Alors que je cherchais un tutoriel pour quelque chose que j'avais à faire ce week-end, je suis tombé sur Expert village, un site qui répertorie des centaines de courts vidéos explicatifs sur une foule de sujets. Je sais que Youtube renferme plusieurs tutoriels divers mais les vidéos relatifs sont parfois aucunement reliés et on se trouve à se promener beaucoup pour trouver ce qu'on cherche. Dans le cas de Expert village, les vidéos sont présentés dans l'ordre et on présente l'expert en question via sa fiche personnelle. La qualité des cours est quant à elle irréprochable contrairement aux sites vidéos généralistes qui offrent souvent du contenu amateur. Je vous invite donc à y jeter un coup d'oeil dans le but de débuter un nouveau passe-temps, de perfectionner une technique sur Photoshop ou encore cuisiner un plat quelconque (quoi que pour ce dernier point, rien ne peut déloger l'excellent Bob le chef sur 33Mag qui vulgarise la cuisine comme un chef!)

16 Feb 2009

Nouvelle chronique Web Tendances sur CHYZ 94,3

Logo_chyzweb

J'ai le plaisir de vous annoncer qu'à compter de ce mercredi 18 février, je serai sur les ondes de CHYZ 94,3 FM à Québec dans l'émission du matin La descente du lit, pour donner mon point de vue sur les tendances du web, parler de ce qui a retenu mon attention au cours des derniers jours ainsi que mes prédictions pour les tendances à venir. Les lecteurs de ce blogue ne seront pas dépaysés par les propos tenus dans ces interventions mais j'y vois une opportunité d'aller chercher un auditoire différent. Prenez note de l'heure: 8h20. Sur ce, bonne semaine!

14 Feb 2009

Picturesurf et... coloc recherché :-)

Un site sur lequel je suis tombé qui s'appelle Picturesurf.org. La solution la plus simple pour fabriquer des slideshows que j'ai jamais vu. Tout est online et hébergé. La seule chose que je ne sais pas serait jusqu'à quel point les photos sont privées...

Bon week-end!

11 Feb 2009

13 trucs pour améliorer la communication sur votre site web

Umbrella

Quand vient le moment de faire le design de votre site web, le critère numéro 1 à considérer est d'être capable de bien communiquer ce qu'on veut dire à notre auditoire. Peu importe le but du site, la communication est l'élément clé d'un bon design. Ceci étant dit, comment améliorer la communication sur notre site web? Voici en 13 points, des astuces pour s'assurer que nos visiteurs seront confortables et sauront trouver l'information qu'ils recherchent.

1. Savoir synthétiser pour ne pas surcharger les pages

En tentant de tout mettre sur le site, on ralentit la compréhension du message principal pour l'usager qui a alors plus de chance de reculer que de poursuivre. Le message primaire est obstrué et dilué par la quantité de texte sur la page.

2. Être clair sur ce que le site fait et ce qu'on peut y trouver

Parce qu'il y a des milliers de sites web et parce que l'internaute n'a pas beaucoup de temps à vous consacrer, il est obligatoire d'afficher sur la première page du site le but du site. Un bon truc pour y parvenir est d'inclure une Johnson Box dans la partie immédiatement visible de votre site (sans avoir à descendre).

3. Savoir captiver son auditoire

En lien avec le point précédent, il faut que l'accueil que vous réservez à votre auditoire soit captivant pour qu'il ait envie de rester et d'aller plus loin. Une bonne façon d'y parvenir est de débuter par une question. Pour un article comme celui-ci, j'aurais pu commencer avec un "Avez vous l'impression que vos visiteurs quittent votre site trop rapidement?".

4. Avoir de la personnalité

Bien qu'il y ait quantité de sites similaire au vôtre, vous pouvez vous démarquer par le design, le ton abordé, ou l'entête de votre page d'accueil. Soyez créatif!

5. Offrir un design qui n'entrave pas le message

Le design est là pour faciliter la navigation, la rendre plus agréable et rendre l'expérience de l'usager sur votre site mémorable. Ne soyez pas aveuglé par des gadgets Rich media au point d'en oublier le plus important: votre message.

6. Gagner la confiance de l'auditoire

Pour les sites de vente, il peut parfois être difficile de gagner la confiance de vos visiteurs. Faites vous rassurant. N'hésitez pas à parler de vos clients actuels, de garantir vos produits ou services et d'afficher clairement ces garanties. Utilisez des témoignages, des statistiques. Vous avez gagné un prix? Parlez en!

7. En quoi votre service ou produit rend la vie des gens meilleure?

Mettez votre offre à l'avant plan et les bénéfices que celle-ci procure à vos clients. Si les visiteurs ne savent pas ce qu'ils manquent, ils n'auront pas envie de l'acheter.

8. Montrer de façon évidente quelles actions on peut poser sur le site web?

Si on peut acheter sur votre site web, eh bien faites vos boutons acheter bien visible. Si on doit s'abonner à quelque chose, faites en sorte que ce soit clair, rapide et facile.

9. Prioriser son contenu

Bien que tout ce que vous voulez afficher sur votre site web soit important à vos yeux, prenez du temps pour hiérarchiser votre contenu et priorisez le plus important. Utilisez les titres, sous-titres, listes, tableaux comparatifs, supports visuels.

10. Ajuster le message et le ton selon le public-cible

Renseignez vous sur votre public cible et parlez leur avec les mots qu'ils utilisent. Mettez vous à leur place. S'ils sentent que vous êtes dans la même situation qu'eux, vous aurez plus de crédibilité que si vous vous placez à un niveau supérieur.

11. Utiliser les styles de texte pour donner de l'emphase aux passages importants

Parfois, pas besoin d'aller bien loin pour attirer l'attention. Simplement de faire ressortir un mot ou une idée d'un bloc de texte. Que ce soit par la couleur, la taille ou les attributs de texte, une idée peut être mise de l'avant simplement et efficacement.

12. Fragmenter vos textes en paragraphes et utiliser les titres et sous-titres

Que font la plupart des gens lorsqu'ils lisent un journal ou un magazine? Ils balaient du regard les titres, sous-titres et images et après coup, décident si cet article vaut la peine d'être lu ou non. C'est la même chose pour vos textes. Chaque image, chaque sous-titre est une raison de plus pour l'internaute de considérer ce que vous avez à dire. Faites en bon usage!

13. Si ce n'est pas important, on s'en débarrasse!

Ne gardez pas inutilement du contenu sur votre site. Le temps des internautes sur votre site est compté et chaque élément non pertinent est une raison de plus de quitter. Ne leur donnez pas de raison de partir avant d'avoir eu l'occasion de leur dire ce que vous vouliez dire. Cette synthèse est un condensé et une interprétation de l'article Clear And Effective Communication In Web Design paru sur smashingmagazine.com

3 Feb 2009

L'évolution de la pub en cartoons :-)

http://vimeo.com/moogaloop.swf?clip_id=2897291

Vous vous souvenez peut-être avoir vu (et j'avais fait un billet à ce sujet) un vidéo intitulé "Did you know?" qui nous lançait tout plein d'information en vrac sur l'évolution du monde en chiffres et en faits. Un billet de Julie Lemonde sur le blogue de l'AMM-PCM nous amène vers une présentation assez similaire mettant cette fois de l'avant l'évolution de la publicité sous forme de petit dessin animé en flash. C'est sympathique, c'est bien fait, ça vaut le coup (durée de 3:30).

Google AdWords Qualified Individual