E-commerce

Lexique du
design


Livre blanc
Les termes essentiels
du design.
Ah le design ! A en croire les graphistes gram sont des exemples de succès story
et designers autour de vous il s’agirait de qui ne manqueront pas...
l’aspect le plus important pour vendre
sur votre boutique en ligne mais il n'en Chez Trusted Shops on s’est dit que ces
est pas moins que vous, les icônes incompréhensions entre e-commerçants
hamburgers et l’adaptatif, ça vous passe et designers ne pouvaient plus durer,
au-dessus dela tête ! c’est pourquoi nous vous proposons
une liste des termes les plus utilisés en
Pourtant ils n’ont pas tout à fait tort, le graphisme et webdesign.
design n’est pas seulement une affaire
d’esthétique mais surtout une question Stefan Pannes
commerciale : le design fait augmenter Après plusieurs expériences professionnelles en tant que directeur
artistique dans différentes agences de Cologne en Allemagne, ce
les ventes en ligne. Et pour enfoncer le spécialiste des applications mobiles est designer UI/UX dans les
clou, Airbnb, Amazon ou encore Insta­ équipes produits de Trusted Shops depuis août 2014.

2
Menu hamburger
Créée en 1981, cette icône doit son
nom à ses trois barres superposées qui
rappellent un hamburger stylisé. Compte
tenu du trafic mobile en augmentation
constante et de la taille limitée des écrans
de smartphones, l'icône hamburger est
une solution pratique pour intégrer
plusieurs éléments de navigation en les
affichant seulement en cas de besoin.
Les icônes hamburger sont simples,
minimalistes ce qui permet de les
intégrer facilement dans la majorité des
boutiques en ligne. L’espace ainsi
économisé peut être utilisé pour mettre
en avant vos produits.

3
Images haute résolution
Les écrans à forte densité de pixels les écrans à haute résolution. Partout
comme les écrans Retina d'Apple où cela est possible (boutons, icônes...),
équipent aujourd'hui quasiment tous il convient donc d'opter pour un
les smartphones et tablettes. Ils sont graphique CSS. Cela permet de faire
capables d‘afficher beaucoup plus de d'une pierre deux coups, car non
pixels sur une même surface. Les seulement l'apparence de vos visuels
graphiques 72 ppi « normaux » sont graphiques est meilleure, mais aussi les
affichés de manière pixélisée et rabotée performances générales du site web
sur ce type d'écran, ce qui ne fait pas sont améliorées.
bonne impression auprès de vos clients.

Toutefois, ce problème ne concerne que

les graphiques à pixels. Si vous utilisez
des graphiques sur base de vecteurs
(graphiques CSS, .svgs, etc.), ces derniers
seront affichés de façon nette même sur
4
Charte graphique
La charte graphique est synonyme de Lorsque les clients sont confrontés à
cohérence et de cohésion. Une identifica- une image compliquée car incohérente,
tion de marque clairement reconnais- ils s‘en détournent presque systémati-
sable à travers tous les appareils et quement.
médias est indispensable pour les
e-commerçants. Les couleurs, formes, les Par ailleurs, il est indispensable de
textes, éléments de commande et les rattacher l’apparence de chaque
éventuels éléments décoratifs doivent élément avec sa fonction principale
être les mêmes sur tous les appareils. afin de créer un lien entre l’utilisation
L’élément clé de la charte graphique ne et le design.
repose pourtant pas que sur des pixels
mais plutôt sur l’application d’un style en
particulier. Sans charte graphique, le
cerveau humain est incapable de recon-
naître et mémoriser une cohésion et ainsi
et créer un lien entre différents éléments.
5
Normes graphiques
Lorsqu‘on demande aux utilisateurs où ils
s'attendent à voir certains éléments sur
une boutique en ligne, les réponses sont
sans appel : les clients ont une idée bien
précise de l'emplacement idéal des
éléments principaux tels que le logo, le
menu de navigation, la recherche et
le panier. La Construction et les fonction-
nalités de nombreux sites web, comme le
passage en caisse semble aujourd'hui
être très clair dans la tête des clients. Les
conclusions sont les suivantes : Utilisez
des schémas clairs, réutilisez ce qui a fait
ses preuves, respectez les normes.

6
Contraste
Tâchez d’éviter les ressemblances sur convient pas d‘associer des polices de la
votre boutique en ligne. Pour y parvenir, même famille, par exemple deux polices
le contraste joue un rôle très important. sans sérif telles qu'Arial et Tahoma.
Les éléments graphiques ne doivent pas
seulement se différencier par leur couleur La consistance visuelle peut être facile-
et leur taille mais aussi dans leur style. ment contrôlée à l'aide d'un guide de
En utilisant deux polices de caractères style et d‘une grille. Les informations
différentes par exemple, vous montrez sont ainsi sauvegardées pour les
distinctement que deux éléments sont projets à venir et disponibles
dissociables. Les éléments de texte en permanence.
devraient donc afficher au moins deux
PX (pixels) de différence avec la police
la plus proche en termes de taille.

En ce qui concerne le mélange de

polices d’écriture sur le web, il ne
7
Responsive design
Peu importe l'appareil (tablette, smart- souhaite reconnaître clairement vos
phone ou PC de bureau) : l'apparence produits et doit être poussé rapidement
de la boutique doit être uniforme et à l'achat.
correctement affichée sur chaque type
d'écran. Cela nécessite un effort de
programmation dans ce domaine.

L'avantage : L'espace ainsi économisé

peut être utilisé pour mettre en avant vos
produits. Il faut aussi prendre en compte
les temps de chargement – la boutique
et ses produits doivent toujours être
visibles au bout du même laps de temps
sur tous les écrans. Ce n'est pas le design
de la boutique qui doit être mis en avant,
mais les produits vendus, car le client
8
Bouton fantôme
Les boutons fantômes sont des
éléments invisibles qui deviennent
visibles lorsqu’on les survole avec le
curseur de la souris. Ce concept de
Mon nom est fantôme,
design vise à réduire les boutons au
minimum pour un effet plus épuré
et minimaliste.
bouton fantôme !

Ces boutons sont dépourvus de tout

effet visuel, n'ont pas de couleur de fond
et n’ont généralement qu’une bordure
très fine. En fonction de leur emplace- Survol !
ment, ils peuvent efficacement mettre en
valeur la boutique en combinaison avec
les couleurs, le fond d'écran et les autres
designs.

9
Identité visuelle

L’identité visuelle désigne l’identité Pour tirer parti de son identité, D’une autre manière, l’identité visuelle
graphique propre à une entreprise ou l’entreprise doit se démarquer de doit permettre aux salariés de l’entreprise
une marque. Celle-ci permet d’apporter ses concurrents et faire preuve de d’augmenter leur implication dans
une cohésion dans les éléments créativité. Par exemple, l’entreprise de leur travail et ainsi augmenter leur
graphiques publiés par l’entreprise pour télécommunication Orange dispose productivité.
qu’ils soient facilement reconnaissables d’une identité visuelle forte avec son
par les clients. L’identité visuelle se logo carré de couleur orange gravé
manifeste en termes de couleur, du nom de l’entreprise ou encore
de forme, de taille ou de formulation l’entreprise de cosmétique L’Oréal
de mot ou de phrase. avec son fameux slogan « parce que
je le vaux bien » .
10
Card Design
Avec le Card Design, les contenus et permet de mieux reconnaître les utilisateurs cliquent intuitivement sur la
informations sont proposés sous principales informations sur le produit grande surface rectangulaire pur obtenir
forme de cartes visuelles rectangulaires représenté. Tout le site est plus claire- plus d'informations sur le produit. Les
constituées d'une image de haute qualité ment structuré grâce aux cartes faisant webdesigners utilisent le Card Design
et d'une description brève. office de séparations. pour la conception d'une interface claire
et intuitive. L'avantage : on obtient une
La structure du site web en plusieurs Le Card Design peut être aisément surface uniforme quel que soit l'appareil.
surfaces rectangulaires est particulière- adapté à l’affichage sur mobiles grâce à De plus, ce design est facile d'utilisation.
ment agréable pour l'utilisateur. Cela lui un système de tailles relatives. Les

11
L’expérience utilisateur – UX
Que ce soit sur une application, un utiliser intuitivement et qui leur facilitent
navigateur, un bureau ou un appareil leur vie quotidienne.
mobile – les utilisateurs doivent retrouver
le même environnement et s'y sentir à Alors qu’auparavant, les services et
l'aise immédiatement. C'est-à-dire qu'ils fonctionnalités primaient, c’est
doivent vivre la même expérience, se désormais l’expérience
sentir « chez eux » et ainsi être rapide- utilisateur qui compte.
ment poussés à prendre leur décision
d'achat.

La transformation numérique modifie

aussi le monde commercial – et avec
elle les attentes des utilisateurs face
aux logiciels. Ils sont de plus en plus
nombreux à exiger des interfaces
adaptées à leurs besoins, qu'ils puissent
12
Trusted Shops est la marque de confiance
n°1 du e-commerce en Europe
Trusted Shops est depuis plus de 20 ans la Avec à cette protection, ils sont couverts
marque de confiance la plus connue des financièrement en cas de non-livraison ou de
e-commerçants et acheteurs en ligne. La marque non-remboursement après retour de leur
de confiance est fortement recommandée par les marchandise et ce, quel que soit le mode de
associations de consommateurs et les autorités paiement. Trusted Shops protège plus de 2 millions
gouvernementales lorsqu’il est question d’acheter de transactions chaque année. Depuis la création
en ligne en toute sécurité. Avec sa marque de
confiance, son système d’avis clients et son
de la société, la valeur totale des transactions
protégées s’élève à plus de 3 milliards d’euros.
Garantie
activité de conseil juridique, Trusted Shops offre
Les 500 employés de Trusted Shops veillent à comprise
aux e-commerçants un package « totalement
ce que les achats sur Internet soient sécurisés –
sécurisé » .
partout en Europe. Environ 20 000 boutiques
Nos services assurent la sécurité juridique, en ligne en Europe et au Royaume-Uni affichent
améliorent la confiance des consommateurs
envers votre boutique en ligne tout en augmentant
déjà la marque de confiance sur leur site. Très bien
votre chiffre d’affaires. Grâce à la certification
des boutiques en ligne, vos clients bénéficient de
[email protected] 4.78 /5.00
la « garantie de remboursement ».  +33 1 70 70 70 50 business.trustedshops.fr/blog

© TRUSTED SHOPS France SARL à associé unique • 104 rue Nationale • 59 000 Lille, France
FR.WaAM • Tous droits réservés • Image(s) utilisée(s) sous licence de Shutterstock.com