La phase de Création Graphique est l’une des phases les plus difficiles et les plus déterminantes pour un projet Ecommerce. Beaucoup de critères sont à prendre en compte : marketing, technique, efficacité de la transformation, esthétique (et donc complètement subjectif), ergonomique, « user-friendlique ;-) », etc… Le montage graphique des pages, assuré par le Directeur Artistique de Bysoft, peut ainsi prendre beaucoup de temps pour arriver au bon compromis. Mais on ne met pas à jour une Créa en deux coups de cuillère à pot, à la demande. Cela demande de nombreuses retouches et ajustements pour arriver au bon résultat. Nous avons donc décidé, au sein du Pôle E-Commerce de Bysoft, de préparer au mieux le terrain en limitant au maximum la phase Créative à son rôle premier : la Création.

Le Chef de projet travaille donc en amont avec l’E-commerçant, sur un Storyboard le plus précis possible, qui détermine les blocs présents sur les pages, et permet de discuter, tourner et retourner les blocs simplement, et décider ensemble de leur positionnement. Tout ceci dans le respect des priorités du Marchand, des volontés Marketing, des contraintes techniques de la plateforme Ecommerce, et des préconisations ergonomique et de navigabilité.

Une fois le prototype défini, la « couche de peinture » peut alors être appliquée, et le Directeur Artistique peut se focaliser sur son art, en « oubliant » les longs débats sur l’ergonomie et les nombreuses modifications et « essais » qu’il devait auparavant essuyer. Bien entendu, au fur et à mesure de la phase Créative, des revirements apparaissent forcément, mais la plupart des questions auront déjà été posées en amont et les réponses correspondantes auront déjà été apportées.

Axure permet également de donner un rendu de l’enchainement des pages entre elles, ce qui est important pour le client comme pour l’intégrateur.

Axure

Dessins en « fils de fer »

Dans les premières phases du projet, Axure permet facilement et simplement de créer des pages en « fil de fer » pour définir et valider le « Zoning » du site.

Il s’agit de positionner les blocs au sein des pages et de prioriser leur affichage :

Voici un exemple de page d’accueil :

Un prototype réalisé avec Axure

Masters

Une fois toutes les pages déclinées, le Marchand voudra peut-être modifier quelque chose dans le Haut de page, qui se répète de page en page. Pas de panique, vous n’aurez pas à refaire toutes les pages, Axure intégrant un système de « Masters », c’est-à-dire de blocs pouvant être repris de page en page. En le modifiant une fois, les changements apportés à ce bloc y seront répercutés sur toutes les pages dans lesquelles il apparaît. Plutôt très pratique pour tout ce qui peut se retrouver sur plusieurs pages distinctes (Haut de page, Bas de page, Blocs HTML libres, Listes de produits, etc…).

Animation du prototype : Storyboarding

Axure ne se contente pas de pages statiques. Il est aussi possible d’animer les pages pour créer un prototype complet, simulant la navigation du client. Vous pouvez ainsi créer des liens d’une page à une autre au clic de souris, déclencher des évènements au passage de la souris, animer des menus horizontaux ou verticaux, définir des états pour des panneaux dynamiques, variables en fonction d’évènements prédéfinis, etc… Cela permet de se rapprocher au maximum de la navigation qui sera mise en place sur le site web, et donc d’en donner au marchand la vision la plus fidèle possible, pour éviter les surprises.

Arborescence des pages

Les pages que vous créez via Axure peuvent être classées dans une arborescence à niveaux, pour mieux comprendre le plan du site.

Arborescence des pages

Les pages peuvent être indentées entre elles, et déployées/réduites.

Prototype au format HTML

Un prototype, c’est bien, mais encore faut-il qu’il soit accessible rapidement et simplement par les différents interlocuteurs travaillant sur le projet. Axure permet ainsi de générer automatiquement un prototype au format HTML. Nous mettons alors ce prototype à disposition sur un espace Web pour que le marchand puisse le consulter à tout moment.

Un prototype

Le prototype présente une frame sur la gauche, listant l’arborescence des pages du site et permettant d’y accéder directement. Les éventuels commentaires sur la page apparaissent dans une autre frame, en bas.

Impression PDF des pages du site

Grâce à des utilitaires d’impression PDF, les pages peuvent être imprimées sur Papier pour permettre au Marchand de travailler dessus plus facilement. Le travail collaboratif peut également être partagé sur Axure, pour permettre à plusieurs personnes de modifier le storyboard en même temps, sans conflit.

Illustration avec la Créa

Une fois le prototype terminé, la phase de Création Graphique peut prendre le relais. Une fois les créas validées, nous mettons à jour le storyboard en supprimant les fils de fer et en replaçant sur le storyboard les pages de la créa, tout en conservant la navigation. Cela permet au client de vérifier le fonctionnement en « situation réelle », et surtout à l’équipe d’intégration de bien comprendre la navigation du site pour mettre en place le design sur le moteur de la plateforme.

Ce complément aux spécifications peut s’avérer précieux dans la mise en place du projet, notamment pour détecter les incohérences d’ergonomie et de navigation sur le site.

Spécifications

Axure permet d’ajouter, tout au long du storyboard, des indications, des annotations, des clarifications sur tous les éléments qui le composent. Tous ces éléments, que le Chef de projet aura pris du temps à apporter au storyboard, ne doivent pas être ressaisis dans les documents de spécification. Axure propose un moteur de génération automatique de spécifications. Un clic lance la création d’un document Word comportant toutes les pages, les descriptifs et les interactions mises en place (« au clic sur tel lien, on est envoyé vers telle page », etc…).

Ces spécifications peuvent servir de base pour la rédaction des spécifications complètes du projet, et notamment pour la description complète des pages du site.

Schémas, Workflows et Process

Un bon schéma est bien plus compréhensible et bien plus impactant que des pages de spécifications textuelles. Un diagramme de séquences, des cas d’utilisation, un workflow… Tous ces schémas ou diagrammes permettent de synthétiser l’information et de la rendre claire, accessible et compréhensible dans un minimum de temps, aussi bien pour nos Clients que pour nos équipes de développement, avides de schémas permettant d’identifier tous les cas d’utilisation pouvant se présenter dans la vie du projet.

Axure permet de créer des diagrammes de flux , en choisissant les widgets « Flow » :

Accès au menu Flows

Et en choisissant le type de diagramme « Flow » pour une page donnée :

Choisir son type de diagramme

Les diagrammes se construisent alors très simplement :

Exemple de diagramme réalisé avec Axure

Après validation par les différents organismes d’Etat :

• Juriste de la Chambre de Commerce et d’Industrie
• Direction Générale de la Concurrence et de la Répression des Fraudes

Pour un administrateur de site qui possède une sarl et qui propose ses services à des particuliers et à des professionnels, le fonctionnement sera le suivant :
1) Particuliers:
=> Note obligatoire à faire figurer au dessus de 15€ : arrêté du 3 octobre 1933 N°83-50/A

2) Professionnels
=> Facturation obligatoire

Les Articles (ou extraits d’articles) à mentionner :

- Article L 441 -3
la sanction qui correspond à l’article si non mentionné L 441-4
- Article L441-6
- Article 289 grand II du code général des impôts
- Annexe de l’article 242 nonies Annexe grand II du code général des impôts

Voici ce que les différents articles traitent :
L’article L.441-3 du code de commerce pose en effet le principe que “tout achat de produits ou toute prestation de service pour une activité professionnelle doivent faire l’objet d’une facturation. Le vendeur est tenu de délivrer la facture dès la réalisation de la vente ou la prestation du service. L’acheteur doit la réclamer. La facture doit être rédigée en double exemplaire. Le vendeur et l’acheteur doivent en conserver chacun un exemplaire.”

S’agissant des mentions à faire figurer obligatoirement sur ces factures, ce même article précise que “la facture doit mentionner le nom des parties ainsi que leur adresse, la date de la vente ou de la prestation de service, la quantité, la dénomination précise, et le prix unitaire hors TVA des produits vendus et des services rendus ainsi que toute réduction de prix acquise à la date de la vente ou de la prestation de services et directement liée à cette opération de vente ou de prestation de services, à l’exclusion des escomptes non prévus sur la facture.
La facture mentionne également la date à laquelle le règlement doit intervenir. Elle précise les conditions d’escompte applicables en cas de paiement à une date antérieure à celle résultant de l’application des conditions générales de vente ainsi que le taux des pénalités exigibles le jour suivant la date de règlement inscrite sur la facture…”

Telles sont les seules mentions, au sens du droit de la concurrence, à faire figurer sur vos documents.

L’article L.441-4 du même code dispose quant à lui que “toute infraction aux dispositions de l’article L.441-3 est punie d’une amende de 75.000 €. L’amende peut être portée à 50 % de la somme facturée ou de celle qui aurait dû être facturée.”

Ces dispositions relatives à la facturation sont complétées par celles figurant à l’article L.441-6 relatives aux modalités d’établissement et de communication des conditions générales de vente qui comprennent notamment les conditions de règlement.

Ce qui sur une facture peut se présenter de la façon suivante :

Magento fait le ménage et impose un workflow logique et cohérent en fonction des actions faites sur les commandes. Qui dit workflow cohérent ne dit pas forcément bridage complet et coups de fouet pour rester dans le droit chemin. Des ajouts de statuts dits « équivalents » permettent de customiser le workflow de commande en y injectant des étapes pour des besoins spécifiques.

Succession des statuts de commandes « standards » sur Magento :

Création de nouveaux statuts « équivalents » dans Magento :
Interférer dans ce workflow nécessite une modification profonde de celui-ci et des règles complètes du process de commande. Cela nécessite du temps de développement, beaucoup de temps de test et complexifie grandement toute mise à jour ultérieure du cœur de Magento. Cela est possible mais n’est donc pas recommandé. D’autant plus que ce process a été pensé pour être utilisable par le plus grand nombre de sociétés et qu’en sortir n’est peut-être pas très bon signe pour plus tard (dans l’optique d’intégration avec des ERP par exemple).

Si l’on ne préfère donc pas toucher au cœur du workflow, il est néanmoins possible de toucher directement aux blocs de statuts en rajoutant des « sous-statuts » à des statuts existants (aussi appelés « états »). Cela permet ainsi de proposer au client des étapes supplémentaires liées à des règles ou des processus métiers, spécifiques à l’entreprise.

Process standard                                    Process avec ajout d’équivalents

Prenons pour exemple l’une des branches du schéma ci-dessus : le passage du statut « En attente » au statut « En cours de traitement » puis « Terminée ».
Le premier schéma ci-dessous montre le process standard, avec un unique statut « En cours de traitement ». Le second schéma montre l’ajout d’équivalents au niveau du statut « En cours de traitement ». Une fois la commande dans le statut « En cours de traitement », l’administrateur du site pourra passer d’un statut équivalent à un autre sans impact sur le workflow.

En effet, pour Magento, que la commande soit « En cours de traitement », « En cours de préparation » ou « Prêt pour expédition », pour lui la commande sera « En cours de traitement » (statut « maître »).
Au niveau paramétrage de Magento, on définit simplement dans un fichier XML de configuration (/app/etc/config.xml), les éléments suivants pour le nouvel « équivalent » :
-    Un libellé
-    Le statut « maître » (état) auquel il est rattaché
Concrètement, pour créer un nouveau statut équivalent, ajoutez le code suivant à l’intérieur du fichier config.xml :

<config>
…

<global>
…

<sales>

<order>

<!– Déclarer le nouveau statut –>
<statuses>

<mon_nouveau_statut translate=”label”>

<label>Mon nouveau statut</label>

</mon_nouveau_statut>

</statuses>
<!– Lier les statuts –>
<states>

<processing>

<statuses>

<mon_nouveau_statut/>

</statuses>

</processing>

</states>

</order>

</sales>

</global>

…
</config>

Dans le fichier XML ci-dessus, le mot-clé « processing » est à remplacer par le mot-clé du statut « maître » que l’on souhaite associer. Les différentes valeurs possibles sont les suivantes :

Nom	Mot-Clé
New	new
Pending Payment	pending_payment
Processing	processing
Complete	complete
Canceled	canceled
On Hold	holded
Closed	closed

Magento est donc rigide sur le Workflow des commandes et suit une droite ligne de conduite lorsqu’il est utile de cadrer les choses, mais permet tout de même une certaine souplesse pour les ecommerçants qui ont des toujours des besoins spécifiques de traitement interne.

Voici donc une liste à jour des URL de tracking des principaux transporteurs. La chaîne “123456789″ est à remplacer par le numéro de colis à tracer:

• Chronopost :

http://www.fr.chronopost.com/web/fr/tracking/suivi_inter.jsp?listeNumeros=123456789

• Coliposte Particulier (Colissimo, Colissimo International) :

http://www.coliposte.fr/particulier/suivi_particulier.jsp?colispart=123456789

• Coliposte Pro :

https://www.coliposte.net/pro/services/main.jsp?m=12003010&colispro=123456789

• E-COMO :

http://www.coliposte.net/ec/suivi_ec.jsp?colispart=123456789

• Courrier Suivi, Lettre Max, Lettre Suivie, Lettre Recommandée :

http://www.csuivi.courrier.laposte.fr/default.asp?EZ_ACTION=rechercheRapide&tousObj=&numObjet=123456789

• GLS :

http://www.gls-group.eu/276-I-PORTAL-WEB/content/GLS/FR01/FR/5004.htm?txtAction=71010&un=2501859001&pw=grandvision&rf=123456789&crf=null&lc=FR&no=2440501

• TNT :

http://www.tnt.com/webtracker/tracker.do?cons=123456789&trackType=CON&saveCons=N

• UPS :

http://wwwapps.ups.com/etracking/tracking.cgi?InquiryNumber1=123456789&loc=fr_FR&TypeOfInquiryNumber=T

• DHL USA :

http://track.dhl-usa.com/TrackByNbr.asp?nav=Tracknbr&ShipmentNumber=123456789

• DHL France :

http://www.dhl.fr/publish/fr/fr/eshipping/track.high.html?pageToInclude=RESULTS&type=trackindex&brand=I&AWB=123456789

• FEDEX :

http://fedex.com/Tracking?ascend_header=1&clienttype=dotcomreg&cntry_code=fr&language=french&tracknumbers=123456789

• EXAPAQ :

http://e-trace.ils-consult.fr/exa-webtrace/webclients.aspx?sdg_landnr=250&sdg_mandnr=756&sdg_lfdnr=12345678&cmd=SDG_SEARCH

• CIBLEX :

http://www.ciblex.fr/extranet/client/corps.php?module=colis&colis=123456789

• SCHENKER :

http://was.schenker.nu/ctts-a/com.dcs.servicebroker.http.HttpXSLTServlet?request.service=CTTSTYPEA&request.method=search&clientid=&language=fr&country=FR&reference_type=*PKG&reference_number=123456789

Dans le cas de Magento, il est possible de paramétrer certains modes de livraison (dont le très bon “Owebia Shipping“) pour y intégrer le lien de tracking. Le paramètre “$1″ doit être intégré dans l’URL de tracking en lieu et place du numéro de colis. Ce paramètre sera remplacé automatiquement par le numéro de colis lors des expéditions via le BackOffice ou via l’API.
Pour saisir cette URL, choisissez en BackOffice le menu “Système” –> “Configuration” –> “Modes de livraison” puis par exemple votre module Owebia Colissimo. Saisissez l’URL dans le champ “URL de suivi”:

Pour Prestashop, il suffit de se rendre dans “Transport” –> “Transporteurs, éditez un transporteur et saisissez l’URL dans le champ du même nom. Le numéro de colis doit ici être remplacé par “@”:

Parmi les actions effectuées pour ce site :

• Intégration du design fourni par le client
• Gestion d’un stock réel et d’un stock virtuel en parallèle (le stock réel est décrémenté seulement à l’expédition du produit)
• Impression par lots d’étiquettes d’expédition depuis le BackOffice pour les commandes
• Affichage dynamique d’informations « Ajoutez X euros à votre panier pour obtenir la livraison gratuite » sur le panier
• Affichage d’une « div » en surimpression (« Continuer mes achats » / « Terminer ma commande ») lors de l’ajout au panier
• Extension « QuickView » permettant d’afficher un aperçu des produits depuis la page de listing
• Migration des clients depuis OsCommerce
• Réintégration complète de GoogleAnalytics et des préconisations du référenceur
• Création d’un moteur de recherche rapide sur couleur/forme/taille
• Slideshow flash personnalisé
• Optimisation des performances Magento
• Hébergement sur serveur dédié

Un client content avec un taux de transformation qui augmente de jour en jour