Typetester, pour tester les polices de caractères

typetester, tester ses polices de caractère

Service à mettre dans la trousse à outils du développeur web, Typetester est un site qui aurait d’ailleurs pu être blogué par mon pote Tim. Une manière subtile pour moi de vous présenter son tout jeune blog (dont l’auteur n’en est pas à ses début en matière de web), l’endroit pour faire le plein d’astuces et de bons plan pour le développement web.

Mais revenons à nos mouton, Typetester. Il s’agit d’un service pour tester le rendu de différentes police de caractères. La police de caractère que l’on définie dans une css doit être installée sur le système d’exploitation de l’internaute pour que celui-ci puisse voir le résultat souhaité.

Typetester propose donc une liste de polices installée sur les systèmes windows, Mac OS et celles présentent sur la plupart des systèmes et à utiliser pour obtenir un résultat convenable au plus grand nombre.

Plusieurs réglages permettent d’affiner le résultat (couleurs, taille, espacement des caractères…), celui-ci est affiché sur 3 colonnes ce qui est pratique pour comparer plusieurs configuration.

Cerise sur le gâteau, Typetester vous permet de télécharger le code css correspondant lorsque le rendu est satisfaisant.

Merci à Fab pour l’info.

Leçon d’ergonomie ou le bouton à 300 Millions de Dollars

J’ai entendu parlé récemment de l’histoire d’un e-commerçant qui a augmenter considérablement son revenu annuel en opérant une simple modification sur le processus d’achat de son site web.

Auparavant, l’internaute devait créer un compte ou se connecter avec ses identifiants au début du processus. La page proposait un formulaire avec les champs « email » et « mot de passe » ainsi que deux boutons « Se connecter » et « S’inscrire ». Beaucoup d’internautes étaient découragés en voyant qu’ils devaient renseigner le formulaire pour créer un compte ou se loguer obligatoirement avant de réaliser leur achat.

Un grand nombre de commandes n’étaient donc pas finalisées et les clients potentiels abandonnaient à cette étape du processus.

Après quelques études et tests, les designers ont trouvé une solution simple au problème, remplacer le bouton « S’inscrire » par un bouton « Continuer » avec le message d’explication suivant:

Vous n’avez pas besoin de créer un compte pour poursuivre vos achats, veuillez simplement cliquer sur le bouton « Continuer » pour procéder à votre paiement. Pour accélérer vos achats futurs vous pourrez créer un compte pendant le processus de paiement

Le taux de transformation du site s’est alors envolé et les achats ont augmenté de 45%.

Cette anecdote nous montre bien l’importance de l’ergonomie et de l’utilisabilité d’un site web, et tout particulièrement dans le cas d’un site e-commerce. Il faut veiller à détecter le moindre frein à l’achat et pratiquer des tests d’utilisabilité qui permettront de pencher sur les points à améliorer pour optimiser au mieux le site.

Lire l’artice « The $300 Million Button« 

MacAstuces.com des astuces Mac en vidéo

MacAstuce

Le site MacAstuce.com propose une série de screencasts pour utilisateurs Mac avec des astuces simples mais utiles.

J’ai découvert par exemple que spotlight, le module de recherche sous Mac OS, permet aussi de faire des calculs rapidement. Ou encore qu’on pouvait faire des modifications simples sur une image (modifier la taille, les couleurs…) directement depuis l’application Aperçu!

De quoi faciliter la vie du Mac user.

Vu sur le spécialiste du screencast 😉

Quels outils pour réaliser une maquette web?

iPlotz pour créer des maquettes web

La réalisation d’un projet web implique quelques prérequis indispensables souvent estampillé sous l’appellation « cahier des charges » ou « spécifications » qui permettent de formaliser les besoins et les expliquer aux différents acteurs concernés .

La maquette du site (on pourra aussi appeler ça mock-up, story board ou prototype) est alors un élément important qui permet une représentation ergonomique du futur produit et de ses spécifications fonctionnelles. On utilise généralement des outils assez généralistes comme Powerpoint, Adobe Photoshop ou Illustrator, Visio pour réaliser cela.

J’ai découvert et testé rapidement cette semaine un outil qui pourra faciliter le travail du chef de projet. Il s’agit de iplotz.com. Un service en ligne qui propose de gérer et réaliser les prototypes de sites web grace à une palette de composants adaptés. iplotz propose une offre gratuite limitée à un seul projet, une version premium permet un nombre de projets et stockage de vos maquettes illimité.

Après une petite recherche j’ai également trouvé d’autres solutions semblables mais qui restent payantes:

  • Axure, il s’agit d’un logiciel payant (licence de 589$/an) téléchargeable pour les plateforme Windows uniquement.

Axure permet la réalisation et la gestion de mockups mais aussi de diagrammes de flux, de prototypes et des spécifications au niveau du contenu.

  • Protoshare est une application qui coute 26$/mois (pour la version personnelle limitée), qui permet en plus de collaborer en ligne sur un même projet avec par exemple des designers ou développeurs…

Un peu d’innovation dans l’affichage des commentaires

Améliorer l'ergonomie d'un blog et l'affichage de ses commentaires

On retrouve systématiquement l’affichage des commentaires en-dessous du billet (ou de l’article) d’une page web et il y a peu d’innovation sur cet aspect de tout site laissant la possibilité de commenter le contenu.

Je découvre aujourd’hui via un billet de Frederic Cavazza le blog de Sam Rayner qui propose une manière originale et encore peu rencontrée d’afficher ses commentaires. Ils sont présentés à droite du contenu, ce qui je trouve, donne une manière esthétique et équilibrée de présenter ce qui fait un point essentiel du blog.

Peut-être une piste à explorer en matière d’ergonomie pour les blogs fournis en commentaires et souhaitant leur donner un peu plus d’importance.

CV

Chef de Projet Internet / e-Marketing en recherche d’emploi

Vous pouvez télécharger mon cv au format pdf.

Expériences professionnelles

  • Avril-Septembre 2009 (Stage 6 mois) Responsable  Marketing Internet – Simple Group Riga (LV) et Londres (UK)

    Mission: Optimiser et coordonner la stratégie e-marketing à l’échelle du groupe.
    – Chargé de l’acquisition de trafic sur l’ensemble des domaines de la société (Référencement naturel, mise en place de newsletter, campagne de Netlinking)
    – Définir et gérer les développements afin d’améliorer les objectifs de conversion

  • Mars-Juillet 2008 (Stage 5 mois) Chef de projet Marketing InternetWikio

    – Participation à la stratégie de fidélisation des utilisateurs
    – Définition d’une politique cohérente de distribution des contenus Wikio (Widgets)
    – Trouver des sous traitants et suivre les développements

  • Sept. 06 – Sept. 07 (Alternance 1 an) Chargé de projet, développeur webYahoo!/Kelkoo GRENOBLE (38)

    Réalisation d’outils intranet pour les équipes commerciales. – Étude des besoins, rédaction du cahier des charges
    – Développement et déploiement de l’application

  • Mai 05 – Juin 05 (Stage 2 mois) Développeur webEDF – GAP (05)

    – Réalisation d’une application intranet.

Formation

  • 2009 Master Professionnel en Sciences de l’Information et de la Communication – École de Journalisme et de Communication de Marseille Spécialité Internet et Information Stratégique – Mention AB
  • 2007 Certificat Supérieur d’Informatique Appliquée – Sciences-U LYON Titre homologué de niveau 2 – Mention AB
  • 2006 Brevet de Technicien Supérieur en Informatique de Gestion – Lycée Aristide Bergès SEYSSINET-PARISET
  • 2004 Baccalauréat Sciences des Technologies Tertiaires – Lycée Aristide Briand GAP
    Spécialité Informatique et Gestion