L'entre-espace

ENTRE WEB & DESIGN

Comprendre le e-commerce : définition du web design

Cet article suit Comprendre le e-commerce : les notions et obtenir de nouveaux clients et les fidéliser. Cette série d’article est destinée à tous ceux qui travaillent/travailleront dans ce domaine et tous ceux qui veulent en savoir plus sans trop entrer dans les détails.

Maintenant que nous avons fait un survol du contexte dans lequel évolue le e-commerce, je vous propose nous intéresser à un type de design particulier : le web design.

Le web design est parfois confondu avec le graphisme marketing qui consiste à mettre en avant des opérations, produits, … sur un site.
En France le web designer joint ses compétences en marketing et UI design pour réaliser l’interface d’un site, la refondre et/ou l’optimiser mais aussi la faire correspondre à la marque et au client en prenant en compte la concurrence.

Nous allons dans cet article nous intéresser au design d’interface, UI design (user interface design) avec :

  • un rapide rappel de ce qu’est un site e-commerce (contenu et fonctionnalités)
  • son rendu en maquettes
  • sa modulation optimisée grâce à la grille et la planche de comportement

 

QU’EST-CE QU’UN SITE E-COMMERCE ?

  • des produits à vendre (séparés en catégories et critères tels que le genre, la couleur, le prix, …)
  • une navigation généralement construite sur une séparation par catégorie ou genre (prêt-à-porter).
  • une aide à la recherche : moteur de recherche par recherche de nom et/ou par des filtres qui correspondent aux critères de la base de données (ex : je veux un T-shirt qui soit rouge en XL de la marque Coreygraphe)
  • un panier et un tunnel d’achat
  • des services : de rassurance (pour rassurer le client : date de livraison, satisfait ou remboursé, paiement sécurisé, existence d’un SAV, …) gratuits et/ou payants (avantage « premium », crédit à la consommation, offres partenaires, …)
  • de la publicité (cela dépend du type de site)
  • de la communication immersive (blog, aide au choix et à l’entretien, articles tendances, lookbook, …)

Le cahier des charges donne au web toutes ces informations pour créer l’interface. Le cahier des charges doit absolument comprendre un benchmark. Le designer peut alors partir sur la création de maquettes (prototypes) en s’intéressant à ce que veut mettre en avant l’annonceur (à qui appartient le site) et ce que verra/comprendra le client. Bref c’est un véritable travail intellectuel.

Ce que verra/comprendra le client : Où ai-je atterri ? Ou se trouve ce que je recherche ? Est-ce suffisamment clair et rassurant pour que je continue ? Est-ce que ce sera mieux pour moi d’acheter ici qu’ailleurs ?

Pour mieux le comprendre : capitaine-commerce.com a une très bonne analyse des sites e-commerce dits niches de marché.

 

LES PREMIÈRES MAQUETTES

Wireframes & mock-up

Les maquettes sont présentées selon défilement des pages principales (Wireframes, accueil > catégorie > produit > paiement…) et/ou en mettant l’accent sur l’interactivité (mock-up).

Il faut, dans tous les cas, réfléchir à l’emplacement des différents éléments (zoning) et aux fonctions qui permettent de naviguer entre les pages pour au final acheter (ce point doit être essentiel à chaque étape et est bizarrement parfois oublié).
Bien entendu cette réflexion doit comprendre la réflexion d’efficience (usabilité) et comportement utilisateur (ergonomie).

wireframe2 Comprendre le e commerce : définition du web design

 

 

GRILLE ET PLANCHE DE COMPORTEMENT

La grille

La grille web se base sur la réflexion print de structure de page (on divise la largeur de la page en colonnes). Mathieu Delestre l’explique très bien sur ldbglobe.

Un site e-commerce évolue (nombre de produits, types de produits, fonctionnalités, mode de paiements, pays, …) et si son architecture de site (voir l’article du journal du net) se doit modulaire le site se doit modulable. Pour cela l’utilisation d’une grille est obligatoire lors de la création/refonte de ce type de site.

La grille permet :

  • des modifications rapides du site (changer l’emplacement de certains éléments, test A/B, …)
  • des modulations (proposer des grilles produits avec un choix du nombre de colonnes)
  • une communication correcte entre développeurs, intégrateurs, chefs de projets et web designers
  • la création de pages gabarisées
  • la mise en place d’une planche de comportement qui devient une sorte de bible CSS

Attention : la grille a un but et n’est pas un but en soi, il est important de garder cela en tête.

La planche de comportement

Ici je lie les comportements actifs (visualisation sur actions, les roll-overs, les sliding-doors,  …) et les comportements inactifs  (la planche d’éléments, définition des tailles de textes,  des couleurs, des graphismes des différentes boxes, arrondis, …).

kit elements graphiqies Comprendre le e commerce : définition du web design
CONCLUSION :

Le web designer lorsqu’il crée un site ou l’optimise fait donc, entre autre, un travail ergonomique. Il a besoin de bien comprendre l’utilisateur du site mais aussi l’environnement de celui-ci. Il ne faut pas confondre règles ergonomiques et habitudes. Lorsque le web designer d’Agnes b. décide d’ancrer à droite son site il ne fait que bousculer des habitudes et donner l’avantage au côté décalé de la marque. Est-ce une mauvaise chose ? En tout cas, c’est une bonne question icon confused Comprendre le e commerce : définition du web design

La suite : prochaine épisode = 100 % design.
Avant d’attaquer cela je vous conseille de lire Je veux un joli design !, excellent article de Jérôme sur mindeez.com car, même si je partage son analyse, je répondrais dans mon prochain article différemment à sa question finale : J’y comprends plus rien, ça sert à rien d’être beau ?

agnes b Comprendre le e commerce : définition du web design
Pour en savoir plus:
CG : Ergonomie, usabilité, interactivité : kesako ?
mindeez.com: ergonomie, design, marketing, sociologie, tout ça est lié et il le prouve sur mindeez.com !
CSS4design.com : pour mieux comprendre tout ce qui maquette et architecture de site je vous conseille d’aller faire un tour du côté de css4design.com qui a regard très pédagogique et large avec une base de réflexion intégration.
webdesign — L’essence précède l’existence (Wireframe, Mockup et Mood Board)
Quelques notes sur les éléments graphiques du webdesign
choisir un frameworks css
40 Brilliant Examples of Sketched UI Wireframes and Mock-Ups

Wireframe : wireframes.linowski.ca
Grille : design et typo : Grilles de Mise en Page | typographie web et print
Planche de comportements: kits à télécharger ici et
Taxonomie : http://enricopanai.com/blog/taxonomie/




2 commentaires

  1. En effet, je voulais savoir c’est que exactement le e-commerce et surtout comment pourrai-je admnistrer un site web e-commerce (le pré-requis) car j’ai vive soucis de l’intrduire dans mon pays la RDC(République Démocratique du Congo) en Afrique Centrale.


  2. il s’agit là d’un sujet très large:
    - gestion des stocks et de l »envoi
    - gestion comptable
    - methode de paiement sécurisé
    - utilisation d’un CMS type WordPress ou mieux Joomla…

    Je te conseille de contacter une agence spécialisée en e-commerce Vente a distance



Laisser un commentaire:

;) :roll: :evil: :cry: :angel: :D :) 8O 8)