Création de sites internet à Lyon
Le vrai enjeu d’un site e-commerce : la recherche
17/10/08
Avec Internet, nous ne classons plus, nous cherchons. Les annuaires (sites classés en rubriques et sous-rubriques par des humains) ont été dans les faits abandonnés au profit des moteurs de recherche. Google nous a appris à trouver, à trouver vite, à trouver sans logique de classement prédéfinie.
Sur un site e-commerce, il faut offrir plusieurs modes d’accès à l’information :
- La recherche multi-critères est fondamentale. Plus les produits sont homogènes, plus ce mode de recherche devient important. Un bon exemple est le site e-commerce papierspeintsdirect.com dans lequel la navigation se fait presque exclusivement avec un moteur de recherche multi-critères (pièce, style, motif, coloris). Nous avons maintenu un plan de site et une liste des rubriques en pied de page, principalement pour faciliter le référencement, et cette arborescence qui a l’air classique, est en fait créée dynamiquement à partir des combinaisons de critères.
- La recherche simple et puissante par mot-clef est très intuitive et toujours très utilisée sur un site e-commerce. Il faut adopter une stratégie à la Google : un champ neutre qui permet de rechercher dans les références, les types de produit, leur description et leur désignation. Le logiciel e-commerce doit permettre d’ajouter des mots clefs dans la fiche produit : il faut pouvoir par exemple ajouter « frigidaire » en mot clef pour les réfrigérateurs, ce qui permet de retrouver ces derniers à partir d’une recherche sur ce mot, sans pour autant le faire apparaitre dans les descriptifs (marque déposée). Dans la mesure du possible, il faut éviter de compliquer cette recherche en ajoutant une liste déroulante pour limiter la recherche à certains types de produits par exemple (c’est pourtant une pratique courante) : l’internaute ne doit pas avoir à se poser de question avant de chercher, il faut le laisser affiner sa recherche seulement a posteriori, si les résultats sont trop nombreux (le réflexe sera d’ailleurs d’ajouter un autre mot clef).
- La logique de recherche par classement ne doit pas pour autant
être abandonnée, car par nature, un catalogue produit a ses catégories,
ses gammes, ses types de produits ; la navigation dans un menu
classique (arborescence de rubriques et de sous-rubriques pour parvenir
à des listes de produits) a donc toujours lieu d’être.
Un bon exemple de site utilisant conjointement ces trois techniques est le site Hardmenager.com (Electromenager MDA) : moteur de recherche textuel (un champ texte neutre qui permet de chercher dans toute la base produits), un moteur de recherche par critères (marque, etc.), et un menu (rubriques/sous-rubriques) par type de produits.
Une autre technique souvent oubliée ou mal présentée pour aider l’internaute : les en-têtes de colonnes des listes de produits : ils permettent de trier facilement les produits selon un critère immédiatement visible (le prix en particulier), en ordre croissant ou décroissant. L’ergonomie de ces en-têtes n’est pas toujours très bien pensée sur les sites e-commerce, l’internaute ne comprenant pas qu’il peut cliquer pour trier : il faut laisser le texte souligné (lien) en titre de colonne, pour qu’il soit identifié immédiatement comme un élément de contrôle.
Pour compléter : «Le succès du e-commerce se résume à trouver et acheter le bon produit » par Pascal Podvin
web et internet
16/10/08
Juste un peu de sémantique parce qu’on confond trop souvent les deux :
- Internet c’est le réseau informatique mondial qui permet de connecter entre eux les ordinateurs de la planète (en communiquant avec le protocole IP). Il sert de support à de très nombreux services comme le mail, la messagerie instantanée (messenger, jabber), etc. Le web est un de ces services. On peut le faire remonter à son ancêtre l’ARPAnet en 1967.
- Le web est un des services de ce réseau, qui permet de naviguer sur des pages via des liens hyper-textes. Tim Berners-Lee, inventeur du web, a développé les trois principales technologies du web (adresses web, protocole HTTP et langage HTML) à partir de 1990.
Ce n’est donc pas qu’une question de mots (comme souvent) : réduire Internet au Web, c’est oublier toutes les possibilités supplémentaires qu’il offre. Un exemple discret : l’horloge de votre ordinateur reste à l’heure grâce à un service Internet (si tout est bien réglé !).
Google docs : une interface _réactionnaire_ pour le tableur
9/10/08
Un moment j’ai cru que je m’étais trompé et que j’avais ouvert Excel (Microsoft vous vous rappelez ?). Non, j’étais sur Google docs : l’ergonomie de google spreadsheet a changé. Plus de « insert Row above » dans un onglet spécifique, les tris et les filtres sous forme de lien type web. Google a décidé de revenir quelques mois en arrière, avant même office 2007, avec un menu unique, sur une seule ligne, les sous items étant accessibles sous formes de menus déroulants. Une banale application microsoft/windows/office en somme.
Déstabilisant pour quelqu’un qui croit au web 2.0 et aux interfaces simplifiées, misant sur les liens les plus utilisés !
Si Google a raison, il faut revenir à des interfaces qui font confiance à l’utilisateur et à sa capacité à trouver de manière logique, et non seulement intuitive les fonctionnalités dont il a besoin.
Après la révolution, la réaction ? Google réactionnaire… hum !
Getting to know Google Docs : Welcome to the new spreadsheets editor! – Google Docs Help Center
Getting to know Google Docs: Welcome to the new spreadsheets editor!
PrintEverything you know and love about spreadsheets is still available – just better organized. See some highlights below:
1. Menus neatly provide access to all commands and functions.
2. The updated toolbar gives shortcuts to the most commonly-used commands, including one-click access to currency, percent, and other cell formats.
3. Hover over the sort bar to expose sorting tools. Drag it by the handle on the left to freeze header rows so they are visible while you scroll.
4. Formulas are now accessible from the toolbar (or, as always, by typing them directly into the cell).
5. In the Share menu you can invite people, see who has access, publish to the web, and find other advanced sharing features.
6. Chat with people who are editing at the same time, or just see who’s there.
7. Your edits are always automatically saved.
duplicate content
3/10/08
Applications php de gestion de fichiers
12/09/08
Les applications Php de gestion de fichiers – Hyla project, mon appréciation toute subjective sur les projets listés :
- eXtplorer, utilisant le framework Javascript/Ajax Ext, semble une idée intéressante (drag’n drop, tris etc.) pour ce type d’application, mais pas de démo en ligne, il faudra donc l’installer pour tester. Contrainte de licence lié à celle de Ext (GPL3) en cas de redistribution. Le commentaire de l’auteur de l’article sur le blog d’Hyla : « Application très bien finie, propre, fonctionnelle, mais il manque tout de même des fonctions comme une gestion un peu plus poussée des droits, une vue en miniatures et pourquoi pas un support UTF8 du système de fichiers… »
- Hyla (auteur du billet) me semble assez déroutant au premier abord (je ne suis pas allé plus loin).
- Kfm : peut être installé en tant que plugin d’un éditeur de texte en ligne wysiwyg comme notre préféré TinyMCE (utilisé dans le back office de notre application de gestion de site). Démo. L’interface n’est vraiment pas sexy, mais l’application semble vraiment efficace (recherche, un vrai menu contextuel sur le clic droit, veritable gestion, édition des fichiers type texte…)
- PHPfileNavigator (démo): design très pro, moins de gadgets type desktop que Kfm en revanche, mais l’essentiel y est, dans une interface facile à prendre en main. Des fonctionnalités pratiques sont présentes (envoi par mail, téléchargement d’une archive compressée…). Un inconvénient : on doit choisir entre la vue de l’arborescence, et la vue en liste dossier par dossier, pas toujours pratique. Intéressant : la possibilité de configurer plusieurs « racines », nous nous sommes rendus compte en implémentant notre propre ged pour nos clients que c’était un besoin fréquent (une gestion des fichiers avec un point de départ, une racine différente pour les commerciaux, les dirigeants…). Gestion des droits type Unix a priori.
Reste à voir le code, la modularité, et la facilité d’intégration dans notre logiciel de gestion de site, ou plutôt ce que nous allons pouvoir copier/améliorer/intégrer 
.
Clients FTP en mode Web
Vraiment intéressant pour faciliter l’accès au serveur FTP pour les clients d’une agence web, en général débutants qui sont rebutés par Filezilla.
Net2FTP : l’application a bien évolué en terme de fonctionnalités, mais une interface pas très simple et qui a pris un coup de vieux.
phpWebFTP. Un client FTP Web (comme Net2FTP). Interface très pro, beaucoup plus simple et adaptées aux débutants que net2FTP (mais moins de fonctionnalité), très bonne qualité.
La bibliothèque de toulouse sur Flickr
23/07/08
Bibliothèque de Toulouse : « La Bibliothèque de Toulouse se lance dans un tout nouveau projet numérique en s’associant au site Internet Flickr, référence en matière de partage de photographies sur le Web. Depuis le 26 juin, sont accessibles 300 images provenant du fonds patrimonial « Trutat » : photographies anciennes des Pyrénées, datant des années 1880 à 1920. Les Internautes pourront, par ce biais, partager leurs connaissances et enrichir les légendes de ces photos par des commentaires utiles. »
Voir la bibliothèque sur Flickr
Un roi du spam condamné, un autre en cavale
23/07/08
Beaucoup de remue-ménage dans les familles royales du spam (pourriel) en ce moment : un spammeur de Seattle surnommé « spam king » (le roi du spam) vient d’être condamné à Seattle ; un autre avec le même surnom vient de s’échapper d’une prison du Colorado.
- Eddie Davidson alias « Spam king » (le roi du spam) avait amassé environ 3,5 millions de dollars entre 2003 et 2006 avec sa fausse société Power Promoters. Il a été condamné en avril à 21 mois d’emprisonnement (et 3 ans de liberté surveillée) pour spam (pourriel),
et s’est enfui du camp où il était enfermé au Colorado. Il est en cavale
avec le FBI, les marshalls et l’IRS (détectives des impôts) à ses trousses. - Robert Soloway alias « Spam King » (lui aussi) a été condamné le 22 juillet à 3 ans et 11 mois de prison par la cour de Seattle (il risquait jusqu’à 26 ans de prison). Il a été reconnu coupable d’avoir envoyé des millions de spams depuis 2003. Il avait déjà été condamné à une amende de 7 millions de dollars (sur plainte de Microsoft) en 2003, et à une autre de 10 millions de dollars en 2005 (sur plainte d’un fournisseur d’accès de l’Oklahoma).
Deux chiffres: plus de 70 milliards (estimation 2006 !) de pourriel par 24 heures, plus de 95% des messages sont des spams.
Chez AppliBox, nous avons installé le système de Greylisting, qui a permis du jour au lendemain de réduire de 75% le nombre de spam sans risque de faux positifs.
Sources :
Wireframes et prototypes : ébauche visuelle d’une application web
21/07/08
Wireframes : les wireframes sont des schémas utilisés en web design qui permettent de suggérer sommairement les éléments principaux d’une interface web (application, site…). Pour être utilses, ils doivent être mis en place avant toute création artistique.
En début de projet, ils permettent de valider les éléments principaux de l’ergonomie et de présenter une maquette fonctionnelle suffisamment évocatrice pour un client non technicien. En cours de projet, ils peuvent servir de référence pour tous les acteurs (client, développeurs, web designer…).
Quelques synonymes : Zonings (franco-français ?), Page Architecture, Low Fidelity Mock-Up, Page Schematic, Rough Draft.
Outils logiciels :
Powerpoint
Le seul avantage est que c’est un outil que tout le monde connait, et que presque tout le monde possède (au moins en version Open Office). Ainsi, même le client est en mesurer de faire une proposition. Mais l’outil n’est pas utilisable de manière professionnelle : pas de composants prêts à l’emploi pour créer des éléments HTML classiques comme un menu déroulant, un bouton. De plus le format paysage n’est pas très adapté.
Visio (Microsoft)
Il n’existe pas d’outils par défaut dans les outils web, il faut donc installer des outils spécifiques (le « Web Prototyping Tool » (ZIP) et/ou « Wireframe Stencil 2003″ (ZIP – 1.3 Mo)) . Je vous renvoie à une très bonne analyse de l’outil avec les liens vers ces composants. En résumé : un outil puissant une fois les composants installés, à mon avis un peu surdimensionné si c’est uniquement pour faire des wireframes.
Les plus :
- simplicité d’utilisation,
- Tous les composants web sont présents et paramétrables (taille…),
- Possibilité de mettre en place des scénarios (erreur utilisateur…),
- Export HTML
- Visionneuse pour ceux qui n’ont pas Visio
Les moins :
- Pas d’intéraction avec les éléments de formulaire
- Pas de scroll dans les exports HTML
- Pas de « coller en place »
- Gestion des tableaux : télécharger ceci.
- CompatibilitéMac
Axure
Un outil spécifique qui va jusqu’au prototype et aux spécifications. En anglais et payant (600 $ env.)
Denim
Un outil informel pour le design d’interface ou les ébauches de sites web.
Design Stencil Kit par Yahoo!
Non testé : des éléments tout prêt (mais ala Yahoo! je suppose) pour OmniGraffle ou illustrator/photoshop ou Visio par Yahoo.
Tout simplement : le HTML (avec Dreamweaver)
Julie Stanford sur BoxesAndArrows explique très bien dans ce post (en anglais) les avantages d’un wireframe ou de prototypes en HTML. Je suis quasiment convaincu. Un seul inconvénient, convaincre les non-techniciens de l’équipe de l’utiliser, mais Dreamweaver reste un outil très simple en mode wysiwyg, pas plus compliqué qu’un outil comme Visio en tout cas.
Elle donne d’ailleurs quelques conseils pratiques pour simplifier l’utilisation : Dreamweaver primer.
Un autre article donne les avantages et les inconvénients comparés du HTML par rapport à Visio : Practical Applications: Visio or HTML for Wireframes
Encore un article : Prototyping with XHTML
Un autre outil en ligne (edit 12 janvier 2010)
- http://gomockingbird.com/ (démo gratuite mais pas trouvé l’info sur le pricing). Fait penser à
D’autres outils (mise à jour 5/11/2008) :
- http://www.balsamiq.com/products/mockup Une application Adobe Air très intelligente et pratique (on dessine mais c’est numérique), 80 dollars
- http://jungleg.com/2008/09/wireframe-wonder-to-speed-up-web-development/
- http://code.new-bamboo.co.uk/polypage/ (jquery)
- http://www.protonotes.com/Notes ajoutées au prototype html (par inclusion d’un javascript)
Quelques liens :
- Un nouvel article sur Ajaxian, sous forme d’appel à commentaires sur les pratiques des web developpers
- WireFrame à toutes les sauces (blog LeGizz)
- Un exemple réel réalisé avec visio : http://www.lavieenrosedejulio.com/pro/images/easyProject.pdf
- Un autre (de test) : http://superfiction.net/telecharger/visio/test-visio.htm
Commentaires récents