LogoLogo
Homepage
  • Documentations for PrestaShop 1.4
  • English documentation 1.4
    • Getting Started
    • Updating PrestaShop
    • User Guide
      • Training
      • Customizing your shop
      • Browsing the front-office
      • Connecting to the PrestaShop back-office
      • Adding Products and Product Categories
      • A Look inside the Catalog
      • Managing Customers
      • Managing Orders
      • Managing Payment Methods
      • Managing Shipping
      • Understanding Statistics
      • Managing Modules
      • Managing Employees
      • Understanding the Preferences
      • Exploring PrestaShop's Tools
      • PrestaShop Support
    • System Administrator Guide
    • Developer Guide
      • Developer tutorials
        • Using the REST webservice
          • Chapter 1 - Creating Access to Back Office
          • Chapter 2 - Discovery - Testing access to the web service with the browser
          • Chapter 3 - First steps - Access the Web service and list client
            • 3.1 - Access the web service
            • 3.2 - Handling errors
            • 3.3 - List clients
          • Chapter 4 - Retrieve Data - Retrieving a Client
          • Chapter 5 - Modification - Update client
          • Chapter 6 - Creation - Remote Online Form
          • Chapter 7 - Removal - Remove customer accounts from the database
          • Chapter 8 - Advanced Use
          • Cheat-sheet - Concepts outlined in this tutorial
        • Understanding and using hooks
        • Synchronization via Hooks
        • Modules, Classes and Controller Override
        • Modules, Override, Web Service
        • Db class good practices for Prestashop 1.4
        • Carrier modules - functions, creation and configuration
        • Creating your own payment module
        • Accelerated Security Course - Episode 1 - Never Trust Foreign Data
        • Accelerated Security Course - Episode 2 - SQL Injections
        • Accelerated Security Course - Episode 3 - XSS
        • Accelerated Security Course - Episode 4 - CSRF
      • Fundamentals
      • Creating a PrestaShop module
      • Development standard
      • Public and overloadable methods
      • Web-service reference
      • How to use the forge to contribute to PrestaShop
      • Rocky's guides
        • PrestaShop 1.4.3 Development Guide
          • Architecture
          • Overriding Files
          • Creating Modules
          • Cookie Structure
          • Database Structure
        • PrestaShop 1.4.3 Performance Guide
    • Designer Guide
      • Coding a theme
      • Design tips
      • Implementing layered navigation in a theme
    • Troubleshooting
    • FAQ
    • User contributions
    • Documentation PDFs
  • Documentation française 1.4
    • Guide de démarrage
    • Mettre à jour PrestaShop
    • Guide de l'utilisateur
      • Formation
      • Personnaliser votre boutique
      • Se connecter au back-office de Prestashop
      • Ajouter des produits et des catégories de produits
      • Un aperçu du catalogue
      • Gérer les clients
      • Gérer les commandes
      • Gérer les méthodes de paiement
      • Gérer le transport
      • Comprendre les statistiques
      • Gérer les modules
      • Gérer les employés
      • Comprendre les préférences
      • Explorer les outils de PrestaShop
      • Obtenir de l'aide
    • Guide de l'administrateur système
    • Guide du développeur
      • Fondamentaux
      • Créer un module PrestaShop
      • Tutoriels pour développeurs
        • Tutoriel Webservice REST
          • Chapitre 1 - Mise en place - Création des accès dans le Back Office
          • Chapitre 2 - Découverte - Tester l'accès au service web avec le navigateur
          • Chapitre 3 - Premiers pas - Accéder au service web et lister les clients
            • 3.1 Accéder au service web
            • 3.2 Gestion des erreurs
            • 3.3 Lister les clients
          • Chapitre 4 - Récuperer des données : Récupérer un client
          • Chapitre 5 - Modification : Mettre à jour un client
          • Chapitre 6 - Création : Formulaire d'ajout à distance
          • Chapitre 7 - Suppression : Retirer des comptes client de la base
          • Chapitre 8 – Utilisation avancée
          • Chapitre 9 - Gestion des images
          • Chapitre 10 - Gestion des prix
          • Mémento : Notions énoncées dans ce tutoriel
        • Mieux comprendre et utiliser les hooks
        • La synchronisation via les Hooks
        • Surcharge et override
        • Modules, surcharge, web service
        • Les bonnes pratiques de la classe Db sur Prestashop 1.4
        • Les modules transporteurs - fonctionnement, création, configuration
        • Cours de sécurité accéléré no. 1 - Never trust foreign data
        • Cours de sécurité accéléré no. 2 - Injections SQL
        • Cours de sécurité accéléré no. 3 - XSS
        • Cours de Sécurité accéléré no. 4 - CSRF
    • Guide du designer
      • Conseils en design
      • Créer un thème
    • Guide du Vendeur
    • Import Wiki FR
      • Dépannage
        • Changer la taille maximum de téléchargement de fichiers
        • Comment ajouter une page à PrestaShop
        • Générer le fichier .htaccess par Prestashop pour avoir des URLs simplifiées
        • Générer un nouveau mot de passe manuellement
        • Import CSV
        • Personnalisation des mails clients
        • Problème d'allocation mémoire chez 1&1
        • Problème pour se connecter après avoir effacé une langue
        • Votre site ne répond plus, une page blanche s’affiche
      • Fidéliser les Clients
      • Gestion des Taxes
      • Installer Un Module
      • Sauvegarder votre Base de Données
    • PDF de la documentation
    • Contributions des utilisateurs
    • Questions fréquentes
  • Documentación española 1.4
    • Introducción
    • Actualización de PrestaShop
    • Guía de Usuario
      • Entrenamiento
      • Personalización de su tienda
      • Exploración del front-office
      • Conexión al back-office PrestaShop
      • Añadir Productos y Categorías de Productos
      • Una Mirada Dentro del Catálogo
      • Gestión de Clientes
      • Gestión de Pedidos
      • Gestión de Métodos de Pago
      • Gestión de Envío
      • Comprensión de las Estadísticas
      • Gestión de Módulos
      • Gestión de Empleados
      • Comprensión de Preferencias
      • Exploración de las herramientas de PrestaShop
      • Soporte PrestaShop
    • Guía del Administrador del Sistema
    • Guía del Desarrollador
      • Aspectos Fundamentales
      • Creación de un módulo de PrestaShop
      • Estándares de desarrollo
      • Manuales de desarrollador
        • Utilización del servicio web REST
          • Capítulo 1 - Creación de Acceso al Back Office
          • Capítulo 2 - Descubrimiento - Pruebas de acceso al servicio web con el navegador
          • Capítulo 3 - Primeros pasos - Acceso al servicio Web y lista de clientes
            • 3.1 - Acceso al servicio web
            • 3.2 - Manejo de errores
            • 3.3 - Enumeración de clientes
          • Capítulo 4 - Recuperación de datos - Recuperación de un cliente
          • Capítulo 5 - Modificación - Actualización de cliente
          • Capítulo 6 - Creación - Formulario En Línea Remoto
          • Capítulo 7 - Eliminación - Eliminar cuentas de clientes de la base de datos
          • Capítulo 8 - Uso avanzado
        • Comprensión y uso de hooks
        • Sincronización a través de Hooks
        • Módulos, Reemplazo, Servicio Web
        • Módulos, Clases y Reemplazo del Controlador
        • Buenas prácticas de Clase DB para Prestashop 1.4
        • Módulos de transportistas - funciones, creación y configuración
        • Curso Acelerado de Seguridad - Episodio 1 - Nunca Confíe en Datos Exteriores
        • Curso Acelerado de Seguridad - Episodio 2 - Inyecciones SQL
        • Curso Acelerado de Seguridad - Episodio 3 - XSS
        • Curso Acelerado de Seguridad - Episodio 4 - CSRF
      • Referencia del servicio web
    • Guía de Diseñador
      • Codificación de un tema
      • Consejos de Diseño
    • Solución de problemas
    • Preguntas Frecuentes
Powered by GitBook
On this page
  • Conseils de design
  • Penser en amont
  • Recommandations techniques
  • Ergonomie

Was this helpful?

  1. Documentation française 1.4
  2. Guide du designer

Conseils en design

PreviousGuide du designerNextCréer un thème

Last updated 4 years ago

Was this helpful?

Table des matières

/*<![CDATA[*/ div.rbtoc1597395627253 {padding: 0px;} div.rbtoc1597395627253 ul {list-style: disc;margin-left: 0px;} div.rbtoc1597395627253 li {margin-left: 0px;padding-left: 0px;} /*]]>*/

Conseils de design

Parce que le succès d'une boutique en ligne passe aussi par un design impeccable, voici quelques astuces techniques pour y parvenir.

Penser en amont

Avant même d'ouvrir Photoshop, GIMP ou tout autre éditeur graphique, vous devriez simplement vous assoir avec une feuille et un crayon, et réfléchir à l'arborescence de votre boutique, afin de la rendre aussi flexible que possible. Par exemple, toutes les boutiques n'ont pas le même nombre de catégories, ou de produits par catégorie.

Un thème complète de PrestaShop requiert au moins 30 pages ou sections de page :

  • Accueil

  • Page de catégorie

  • Page de produit

  • Page de comparaison de produit

  • Page de résultat de recherche

  • Page "Mon compte" et toutes ses sous-pages :

    • Mes réductions

    • Mon historique de commandes

    • Mes informations personnelles

    • Mon panier

  • Page de connexion

  • Page de création de compte

  • Page de commande :

    • Liste d'adresses

    • Coût d'expédition

    • Choix du paiement (chèque, transfert...)

    • Page unique de commande

  • Création d'adresse

  • Page de livraison

  • Page de maintenance

  • Liste des fabricants et page de fabricant

  • Liste des fournisseurs et page de fournisseur

  • Page d'erreur 404 (page introuvable)

  • Page "Meilleures ventes"

  • Page "Nouveaux produits"

  • Page "Promotions actuelles"

  • Page "Mot de passe oublié"

  • Informations légales

  • Carte du site

  • Page des magasins

  • Formulaire de contact

Faites bien en sorte de prendre toutes ces pages en compte, afin de n'en oublier aucune, dans le cas contraire, vous pourriez obtenir un thème incomplet, et donc une mauvaise expérience utilisateur. Pour avoir une meilleure idée des pages à prendre en compte, plongez-vous dans le thème par défaut, afin d'en disséquer le code.

Une fois que vous maîtrisez votre arborescence, faites quelques croquis pour l’interface, afin d'avoir une première idée de la position des divers éléments : nouveaux produits, promotions, images, texte, etc.). Par ailleurs, incluez les détails importants, tels que les diverses mentions sur la page du produit : en solde, promotion, nouveau produit, prix barré...).

Bien entendu, ce ne sont là que des conseils d'ordre général ; certains professionnels préfèreront travailler directement dans Photoshop, puis passer au code PHP, HTML et CSS.

Recommandations techniques

Afin de vous assurer que vous pourrez facilement partager votre création avec d'autres (designer, intégrateurs, clients), nous vous conseillons d'enregistrer votre fichier sous forme de fichier Photoshop (RGB, 72 dpi, non aplati).

Vous devriez travailler au format 980px de large.

Agencement des calques

Vous pouvez utiliser plusieurs méthodes, selon vos préférences :

  • un dossier pour tous les calques de textes, afin que les intégrateurs puissent facilement accéder au design lui-même ;

  • un dossier pour chaque bloc de design (nouveaux produits, meilleures ventes, etc.)

Couleurs

N'utilisez pas le réglage CMYK, qui n'est adapté qu'à l'imprimerie. Utilisez toujours le réglage RGB.

Polices

N'utilisez pas de police atypique ! Faites en sorte que tout reste bien lisible !

Le texte standard (titre, sous-titre, texte normal) devrait être limité aux polices suivantes, afin de vous assurer que les visiteurs voient tous la même chose :

  • Arial

  • Verdana

  • Helvetica

  • Georgia

  • Tahoma

  • Times News Roman

Utilisez le strict minimum de police : trop de polices différentes ne peuvent que rendre votre design plus confus.

Unités

Quand vous créez pour le Web, l'unité de base est le pixel. Ne faites pas vos mesures en picas, points ou centimètres.

Taille de texte

Gardez toujours en tête que l'utilisateur choisit la taille finale du texte, étant donné que les navigateurs modernes peuvent l'augmenter ou la réduire au besoin. En fait, vous devriez tester votre site avec différentes variations dans les réglages de votre navigateur, afin de voir si votre design est solide... et donc de voir ce qu'il vous faut retravailler pour éviter qu'il soit facilement cassé.

Cela étant, vous pouvez prendre ces mesures comme base :

  • 10 à 12px pour le texte normal

  • 14px pour les sous-titres

  • 18px pour les titres.

Transparence

Les images transparentes ne fonctionnent pas bien sur les anciens navigateurs, en particulier Internet Explorer, donc évitez les images PNG en 24 bits. Pour ce qui est des images GIF avec transparence, utilisez-les par-dessus un fond uni pour vous assurer que l'effet fonctionne. De plus, évitez les pixels semi-transparents en définissant une couleur de cache (la même que celle du fond).

Enfin...

  • Pensez à activer toutes les options afin de voir le rendu avec le thème standard.

  • Modifiez une fiche produit pour voir quelles sont les options possibles (promotion, nouveautés, etc. …) et leurs impacts sur l’affichage en front-office.

  • Le style graphique de votre boutique doit être homogène.

Ergonomie

Sans plonger dans les théories complexes sur les interactions homme-machine, nous allons ici tenter de faire en sorte que votre boutique accessible au plus grand nombre de clients possible. Votre but final devrait être que vos visiteurs aient suffisamment confiance en votre boutique pour acheter.

A chaque problème d’utilisation, vous perdez la confiance des visiteurs. Si elle arrive en dessous d’un certain niveau, la frustration s’installe et l’internaute quitte le site. D’où l’importance de l’ergonomie dans un site e-commerce.

N’oubliez pas que votre but (en plus de vendre, bien sûr) est de montrer aux visiteurs que derrière le site e-commerce que vous faites, il se cache des personnes sérieuses et compétentes.

La page d'accueil

Cette page est la plus importante de votre site e-commerce, car c'est ici que tout se joue. C'est ici que le visiteur va se faire une opinion de votre boutique et qu'il va décider s'il peut faire confiance à votre site et vous donner son numéro de carte bleue.

Vous devez faire en sorte d'avoir un style général distinct, facilement reconnaissable et d'avoir votre catalogue visible dès la première page.

L'en-tête du site vous permet de placer les éléments les plus représentatifs : logo, nom, image de fond unique... Il doit faire au maximum 250 pixels de hauteur, afin que les visiteurs puissent au moins jeter un coup d’œil à votre catalogue sans avoir à scroller. En d'autres termes, l'utilisateur ne devrait jamais avoir à scroller pour voir vos premiers produits.

L’aspect visuel est très important, d’où la phase de réflexion en amont. Vous devez trouver un moyen élégant de mettre en avant vos produits sans pour autant surcharger votre page. De plus vous devez utiliser des couleurs et un graphisme homogènes entre les pages. Par exemple, si vous utilisez un effet sur les boutons d'une page, pensez à réutiliser les mêmes effets sur toutes les pages de votre site.

Le moteur de recherche doit être facile à trouver. En tant que visiteur, il arrive souvent que l’on sache ce qu’on vient chercher, aussi est-il important que l’on distingue du premier coup d’œil cet outil.

Lors de la création de votre site, pensez également à la navigation dans les catégories : elle doit être simple et intuitive.

Afin de renforcer la confiance des visiteurs pensez à mettre en avant vos partenaires (banques, transporteurs) et votre classement FIA-NET. Ce sont des éléments de réassurance.

Si vous avez un contact téléphonique ou un tchat en ligne, n’hésitez pas à le mettre en avant. Cela montrera votre proximité avec le client et c’est ce qui fera la différence. Bien entendu, n'utilisez pas votre numéro de téléphone personnel : les clients doivent sentir qu'ils contactent une équipe de support, pas qu'ils vous dérangent tandis que vous cuisinez !

Enfin, affichez clairement les conditions de livraison, de retour de la marchandise, les C.G.V, et autres textes de loi.

La page produit

Si votre visiteur est sur cette page c’est qu’il est intéressé par votre produit et qu’il souhaite des détails. Il vous faut donc lui en fournir un maximum.

Mettez en avant le bouton ajouter au panier. Il doit être bien visible et se distinguer du reste de la page de par sa couleur ou sa taille – mais tout en restant homogène avec le reste du design : si le bouton se détache trop, le visiteur pourrait ne pas le voir, de la même manière que de nombreuses personnes ont appris à ne pas voir les publicités sur Internet.

Mettez en avant aussi les “étiquettes” reliées à ces produits (nouveautés, promotions, coupon de réduction, etc. …) et affichez clairement les délais de livraison !

Le tunnel de conversion (Mon compte et ses pages intérieures)

Création de compte / "Mon compte"

Le thème par défaut de PrestaShop dispose d'un formulaire apportant un très bon taux de transformation. Mais suivant votre site, il ne sera pas forcément adapté à vos besoins. Voici donc quelques conseils à suivre si le formulaire de base ne vous convient pas :

  • Ne laissez que l’essentiel. Le visiteur doit se concentrer sur la création de son compte et l’acte d’achat. Inspirez-vous des formulaires d'Amazon et de la Fnac.

  • Réduisez au maximum le nombre d'étapes. Le visiteur doit savoir combien d'étapes il lui reste a parcourir avant la finalisation de son achat.

  • Affichez clairement toutes les erreurs que l'utilisateur fait, juste à côté du champ du formulaire. Les erreurs devraient être affichées avec une couleur distincte (le rouge a fait ses preuves), et les champs requis doivent être clairement indiqués (avec un astérisque *, par exemple).

Dernière chose : le bouton validation se situe toujours à la droite du bouton annuler.

Le paiement

Le visiteur a créé son compte client, félicitations ! Mais tout n'est pas gagné, il doit encore passer l'étape de l'acte d'achat.

Là encore, même chose que le formulaire de création de compte :

  • Réduisez au maximum le nombre d‘étapes: adresse de livraison, paiement.

  • Affichez clairement les erreurs et indiquez les champs obligatoires.

  • Page de paiement :

    • Pour un paiement par CB, avertir le visiteur qu'il passe sur le site sécurisé de votre banque. Par exemple, utilisez une icône "cadenas" avec un petit texte explicatif.

    • Si le paiement est par chèque (ou autre que paiement en ligne), indiquez clairement la marche à suivre (adresse, montant, ...)

Après cette étape cruciale votre visiteur est à présent un de vos clients. Bravo !

Ces conseils en ergonomie pour votre site e-commerce ne sont pas exhaustifs, mais constituent une base de travail pour améliorer l’utilisation de votre site e-commerce.

Le "tunnel de transformation" (en anglais, "", c'est à dire "entonnoir de conversion", ce qui est plus proche de la réalité) correspond aux pages où vous transformerez vos visiteurs en clients (d’où le terme "transformation" ou "conversion"). Si ces pages sont mal structurées, cela peut vous faire perdre plusieurs clients potentiels et donc les commandes qu'ils auraient pu passer.

conversion funnel
Conseils de design
Penser en amont
Recommandations techniques
Ergonomie