Date de création :
Lun. 01 janvier 2007
Dernière mise à jour :
Ven. 23 juillet 2010
Statistiques :
473 articles
1701 commentaires
Les sites marchands sont à l’honneur depuis plusieurs années, ils se multiplient sur la toile de jours en jours. Le premier facteur, arrivé sur le site, est le graphisme, c’est ce qui va donner envi (ou pas) de se balader parmi les nombreuses catégories du site et, pourquoi pas, de commander. C’est donc un facteur important de réussite : il faut être clair, faciliter la navigation et savoir mettre les articles en avant. Voici donc une liste de petits conseils pour l’amélioration de vos sites :
1. La navigation
C’est la partie importante. Le visiteur doit être capable de se diriger rapidement et facilement d’une page à l’autre, d’une catégorie à une autre. Oubliez les menus à droite, c’est original, mais pas pratique, optez plutôt pour une navigation en 2 ou 3 menus distincts : un menu principal en haut (dans le bandeau) avec les éléments essentiels comme le retour à la page d’accueil, les actualités, le formulaire de contact, les informations de livraison, ce genre de choses, dîtes pratiques. Ensuite, il faudrait un menu (à gauche de préférence donc) qui reprends les grandes catégories de produits. N’oubliez pas de rappeler en bas de ce menu la page contact ou informations pratiques. Et ensuite, en bas de la page, les mentions légales, conditions générales de ventes et les informations sur le payement en ligne, la sécurité du site ou toute autre information relativement importante. Regardez les grands sites comme cdiscount ou la fnac. Pensez que vos visiteurs connaissent sûrement ce genre de gros sites, inspirer-vous en, et faite en sorte que la navigation soit la plus simple possible.
Pensez également à rajouter un fil d’Ariane, qui permet rapidement de savoir où l’on est : cela permettra au visiteur d’identifier tout de suite dans quelle rubrique et sous-rubrique il est, et de pouvoir naviguer dans celles-ci. N’oubliez pas que les visiteurs n’arriveront pas tous sur la page d’accueil en premier, mais peut-être sur une catégorie ou un produit particulier. Il faut qu’il puisse identifier sa position sur le site rapidement. Sans ça, il se dira que ce site est trop compliqué et il préfèrera aller voir le concurrent direct.
2. Laissez la place aux produits
En général, on cherche (en tant que propriétaire de sites marchands) à avoir un graphisme très évoluer, avec plein de couleurs, plein de fioritures de partout pour bien montrer que l’on a un site tout jolie et tout. Mais le graphisme apporté gène-t-il le rendu des produits ? Lorsqu’un visiteur arrive sur le site, il doit tout de suite identifier les produits à vendre, et pouvoir cliquer dessus sans se poser de question. Il faut donc avoir un style plutôt sobre (l’exemple d’Apple en est un bon exemple) qui met en avant les produits plutôt qu’un site trop flashy, qui risquerait d’être perturbant pour le visiteur.
N’oubliez pas aussi que le graphisme doit correspondre aux produits, aussi bien sur la forme, la couleur et la disposition des éléments graphiques. Un site pour enfant devra avoir des couleurs vives et pastels, pourquoi pas en dessins, alors qu’un site de vente en ligne de produits cosmétiques pour homme devra être classe et design, dans des tons argent et or, et être très sobre (pour les grandes lignes bien sur...) !
3. Les photos
Facteur de qualité, les photos font donner toute l’importance que demandent vos produits. Proposez de belles photos. Si vous êtes revendeurs de produits, votre fournisseur possède sûrement les photos des produits. Sinon faîtes-les faire par un professionnel de l’image. Cela vous coûtera un peu d’argent, mais considérez que c’est un bon investissement par la qualité du rendu que cela va procurer auprès de vos chers visiteurs !
Proposez aussi plusieurs photos, entre 3 et 5 : montrez votre produit de face, de profil et de dos, ainsi que pourquoi pas une photo en situation et/ou un zoom sur une partie importante. Prenons l’exemple d’une pomme de douche, il serait agréable pour le visiteur de pouvoir observer ce produit sous toute les coutures, ainsi qu’installer sur un mur de douche (pour par exemple se rendre compte de la taille du produit) ou encore un zoom sur la sortie d’eau (les modes et pressions différentes, les réglages, ou encore un exemple d’eau qui coule par la pomme de douche). Donnez envi !
4. Le panier et la commande
Il faut savoir une chose, c’est que sur Internet l’achat est beaucoup plus impulsif que dans un commerce : l’achat est facile, peut se faire de jour comme de nuit, etc. L4ajout au panier est donc, dans la plupart des cas, générer subitement chez le visiteur. Par contre la prise de décision d’achat se fait plus réfléchit : il est donc important d’avoir un panier qui se veut le plus clair possible. En tant que créateurs de sites, on a souvent tendance à oublier que l’on est qu’une petite poignée à être à surfer et étudier les sites en 24/24. La majorité des visiteurs ne sont pas des as du web (regardez les statistiques de vos sites et comparer IE aux autres, ils sont encore légions à ne pas chercher un navigateur Internet plus adapté). Je prends souvent l’exemple de mes parents (si vous avez suivi l’une de mes conférences ou formations vous savez de quoi je parle), qui surfent en moyenne 5 heures dans la semaine, et environ 2h pour de la simple consultation d’e-mails. Il faut donc faciliter l’affichage du panier et accélérer la prise de commande par un gros bouton pour valider la commande.
5. Et après
Un visiteur peut se transformer en client, mais il faut aussi, et c’est là l’enjeu de notre mission, que le client se transforme en client récurrent. Pensez alors à avoir des mails de confirmations de commande, ou une newsletter, qui rappelle au client qu’il est le bienvenue sur le site et que ce site est sérieux. Le suivi par e-mail se doit d’être professionnel et graphique, dans la même lignée que votre graphisme, pour promouvoir de nouveaux produits ou les produits phares.
J’espère que ces quelques conseils vous aideront dans l’étude et la création de votre future boutique en ligne. Si vous avez des questions, n’hésitez pas à les laisser en commentaire de cet article.
Bonjour tout le monde, j'ai un client en formation dreamweaver et il m'a posé une colle : j'ai cherché sur Internet mais auncune réponse interessante.
Le client a une maquette sur laquelle il a un menu qui possède un element en couleur (celui où l'on est) et le reste en grisé (il a préparé ces images en on et off). Quand je passe le mulot sur un item gris, il passe en rollover de couleur, avec la gestion de comportements de chez dream. En plus de cet effet de rollOver créé, il aimerai que, quand on survole un item gris, celui qui est en couleur se grise (donc affecter un 2eme comportement à son image) : techniquement cela fonctionne quand le mulot arrive sur mon image : il passe en couleur et remplace sa voisine par la version off - sauf que au moment où je quitte l'image, il me restaure qu'une seule
En regardant le code, on se rend compte que la fonction restoreImage() de dreamweaver ne comporte pas de parametres.
Comme c'est une formation dreamweaver, il serait interessant de trouver une solution à l'aide de menus, mais là je sèche complètement. Quelqu'un aurait une solution ?
Dans le cadre d’une formation que je dispensais aujourd’hui même, j’ai eut l’occasion d’utiliser Vista pour la première fois dans le cadre d’un travail. Je l’avais utilisé il y a quelques jours sur le portable d’un membre de ma famille, mais pour une utilisation plutôt loisir.
Vista est comment dire... Un peu... ou plutôt... Ah voilà... Vista n’est pas un OS, c’est un virus ! Non je plaisante, mais Vista est quand même orienté newbies. Pour en avoir fait un peu le tour, il se veut aussi ergono-pratique que léopard, avec ses mini-apercus de la barre d’outils, un alt-tab plutôt évolué, une transparence dans les cadres autours des applications, laissant entrevoir un flou important pour les applications secondaires. Graphiquement il tient debout il n’y a pas à dire, on dirai l’une de ces vielles consoles de jeux où l’on gonflait volontairement le graphisme, comme pour compenser le vide intersidérale que génère l’idée de comparer vista à un OS. Imaginez une seconde, passer d’XP, qui était intéressant sur le plan de libération des ressources, à Vista, qui est un gros programme hyper graphique et surtout hyper vide ! Ca rame de partout, c’est mochou à souhait, et qui plus est c’est anti-travailleurs forcenés ! Travailler une journée dessus m’a largement suffit pour dire que Vista n’a rien d’un OS pour le travail, mais certes est très pratique pour du loisir : échange de photos, regarder des divX, piraté à mort et faire de Universale une société en faillite et tout et tout...
Mais pour le boulot, Jamais !! Tu entends bill ? Jamais tu ne me mettra un vista sur ma machine de boulot !
Et toc !
J’avais commandé pour Noël un clavier performant pour mes longues journées devant le clavier, à user la barre espace et les CTRL+SHIFT+ALT+CLICK sous photoshop et illustrator. Je regarde donc du coté des claviers destinés au jeu. Surprise de taille avec l’utilisation de mon clavier G15 de chez Logitech.
Une fois branché, il est reconnu comme un clavier standard, mais il est nécessaire d’installer les pilotes pour pouvoir tout avoir : Ce clavier dispose de 18 raccourcis sur le coté gauche, avec 3 modes de personnalisation, un véritable régal pour l’optimisation.
Le clavier
Le clavier possède un confort grâce à une tablette devant les touches pour reposer le poignet, ni trop dure, ni trop molle. Elle épouse bien évidemment parfaitement le clavier (il est donné avec, ce n’est pas une option – mais il est amovible). Les touches sont silencieuses et le touché des touches est très agréable. On sent aussi dès le premier touché qu’on est dans une catégorie de clavier pour le jeux, mais que c’est solide et fiable sur du long terme. Cet aspect gris et noir est très agréable également.
Les raccourcis
Rapidement, on découvre avec joie tous les raccourcis personnalisables sur la gauche (18 quand même) nommés de G1 à G18. Pratique sur photoshop par exemple pour passer d’un outil à l’autre : G1 pinceau, G2 gomme permet de facilement changer d’outils dans à avoir à switcher entre B et E. On y gagne un temps fou une fois que l’on a configuré tout ça !
USB
Le clavier dispose de 2 ports USB 2.0 situés derrière lui. Pour y avoir branché ma clef USB qui date un peu, je remarque que ces ports sont fiables et solides. Note mais le clavier se branche lui-même en USB.
Les petits boutons
En plus des raccourcis, on distingue 3 boutons M qui sont des préréglages (macros) pour les boutons de raccourcis. Le clavier G15 de Logitech possède aussi d’un retro-éclairage sur 3 niveaux d’intensité lumineuse pour les soirées boulots.
L’écran
Le G15 possède un écran, petit, qui permet d’avoir des infos pratiques de tout genre : l’affichage de la date et de l’heure, le suivi des performances système, un chronomètre, l’affichage d’un titre de musique lu, et plein d’autres choses aussi... Il est possible de le couplé avec Itunes aussi en affichant la musique actuelle, et les infos comme le temps écoulé, le temps restant, etc. Avec un plugin on peut également naviguer dans ces dossiers Itunes sans l’ouvrir. Sous l’écran (qui peut se baisser) on y retrouve les touches multimédia play/pause, stop, suivant, précédent, avec une molette de contrôle du volume ainsi que 5 boutons pour la navigation dans l’écran LCD. Optimisation donc puisque comme je ne peux pas travailler sans musique, cela m’évite de changer de musique en ouvrant à chaque fois Itunes, en choisissant l’album ou le podcast à écouter. Une rapidité et une grande simplicité d’utilisation donc !
Conclusion
Pour avoir plusieurs postes à la maison, donc plusieurs claviers, je constate que c’est vraiment, et de loin, le meilleur clavier que j’ai testé jusqu’à lors. Il prends de la place certes (56cm de large sur 26cm de profondeur) mais c’est un must pour le travail, même s’il a été conçu à la base pour du jeu. Le coté multimédia est très présent, et grâce à tous ces raccourcis, l’utilisation des logiciels graphiques se fait avec un réel plaisir. J’en suis franchement ravi et je le recommande pour ceux qui ont un peu de place à perdre sur le bureau.
Dell, qui est la marque forte dans le secteur professionnel et universitaire, est connu dans le monde de Windows grâce à la facilité de création d’un ordinateur presque sur-mesure. Si on se pointe sur le site de Dell, il est possible, pour toutes les machines (du portable au serveur) de choisir sa propre configuration : choix du processeur, choix de la mémoire, etc. Il y en a pour tous les goûts, mais aussi pour toutes les bourses, car même si Dell se place dans les entreprises (stabilité du système, et avec la TVA récupérée c’est génial), il reste un produit cher pour un particulier. Surtout face à Acer, ou encore HP qui proposent des PC portables à moins de 700 euros, et OS livré avec s’il vous plait !
Changement de communication donc pour la marque pour sensibilisé un nouveau panel grâce à une nouveauté, prévu dans 2 mois (après les fêtes ? étrange...) ! Accrochez-vous bien : Dell va proposer en 2008 la possibilité de personnaliser l’extérieur d’une machine. Fini l’époque des stickers donc : on aura sûrement le choix de la couleur de l’habillage (un blanc mac sera-t-il proposé ?), et quelques autres options à mon avis, mais lesquels ? je ne sais pas.
Dell ne nous en dira pas plus, mais déjà le process est en route. Vivement de voir comment ces produits seront proposés, ça donne l’eau à la bouche tout ça !
Ca y est, Le dernier OS de chez Apple voit le jour sous le nom de Léopard, ou plutôt Mac OS X Leopard. Au début, n’étant pas encore un geekmac (avec une grande frite et un coca svp), je me disais que c’était une petite évolution, comme un SP1 ou un SP2 sur PC. Et bah non, surtout quand j’ai regardé avec un grand intérêt la vidéo de présentation de Mac OS X Leopard sur le site d’apple. Magnifique ! Tout simplement Beau. C’est énorme, bien pensé, avec des évolutions qui manquent cruellement sur un poste informatique (notamment Windows qui se prend encore une claque et perd des points)
Au programme, un Finder plus pratique, avec un affichage de preview comme sur Itune où les images ou documents viennent de gauche à droite dans un magnifique effet 3D. Il est possible de voir maintenant ces documents PDF sans ouvrir de logiciels, ou encore les tableurs ou les présentations… En plus de cette révolution en soit, d’autres petites astuces viennent se greffer à ce nouvel OS : la prise de notes liés aux mails, Ichat revisité, Le Idock repensé avec des possibilités de menus (ou menu de raccourcis). Bref on est vraiment dans une révolution interessante, tant dis que Windows régresse en proposant de revenir sous XP.
En général, les clients veulent un site qui prennent tout l’écran, c’est vrai, après tout, ils payent une page Web, et non 60% de l’espace utilisable centré ^^
Quels sont les différences principales ? Techniquement d’une part, au lieu de faire un design calé avec des dimensions en pixels, il est possible de le faire en pourcentage. Une fenêtre représente 100% de largeur, donc au lieu de placer le logo à 20px du bord, il sera affiché à 5% ! Ce qui donne une remise en cause de toute la création graphique : un bandeau doit se prolonger tout le long de la fenêtre !
Il est possible, pour presque tout les cas, de transformer un site centré en site dit étirable, c’est à dire qu’il prenne toute la largeur de l’écran. Mais il y a un gros problème d’ergonomie ! En effet, d’un coté les pixels sont une unité je dirais d’universelle (un pixel chez l’un est le même pixel chez l’autre) alors que de l’autre nous avons une largeur de fenêtre qui est très relative : quel résolution est utilisée, la fenêtre est-elle ouverte en grand, existe-t-il la fenêtre d’historique ou de favoris sur les cotés du navigateur, et est-ce que l’écran est en 16/9 ou non... Plein de questions qui répondent sous forme de problématique : il est donc impossible de sortir un site fiable à 100% en terme de design et d’ergonomie.
Autre problème aussi, la lisibilité du site : il est souvent plus judicieux de lire un texte sur plusieurs lignes courtes qu’une seule longue ligne. La lecture est rythmée par la largeur d’une colonne de texte, donnant ainsi une rapidité et une importance au texte, qui devient un volume sur la page, alors que sur une seule et même ligne, celle-ci devient une suite de mot sans rythme, sans force, et difficile à lire sur un écran. C’est pourquoi un autre média (le journal) a opté pour ce format de colonnes avant l’apparition même d’Internet !
Dans les sites étirables, le texte n’est donc pas gérable par un rythme puisque sa largeur est inconnue. La proportion entre une zone de texte et une image n’a donc rien de fiable, donc, par conséquent, le graphisme totale du site ne contribue donc plus une aide à la lecture ou à une quelconque arme de séduction du visiteur.
C’est pourquoi, dans 99% des cas, nous conseillons un site centré, possédant une largeur fixe (ex avec 1000pixels de largeur) qui ne se différenciera pas sur un grand écran récent et un vieux 17 pouces cathodique...
Après une année difficile pour le groupe, les actionnaires ont finalement opté pour une nouvelle mise en page, plus jeune et plus aérée pour séduire plus de lecteurs.
Nouvelle typo pour les titres, nouvelle grille typographique mais la politique reste la même, tout comme le logo qui ne change pas ou encore la ligne éditoriale.
Libération se donne 1 an pour tester et analyser cette nouvelle formule !
Cette nouvelle formule est "plus exigeante, vraiment orientée vers le lecteur", a estimé M. Pourquery.
Une journal 2.0 ?!
© MISTERDANILO.COM - Blog d'un Graphiste Frelance | Tous droits réservés| Mentions Légales
Blog de MissDanilo | Graphiste freelance | Le Webdesigner | Graphiste freelance
2 Square de Mazarine | 56000 VANNES | 06 21 69 62 50 | Contactez-moi
