Outils et techniques innovantes pour un design de qualité de vos

plateformes web

www.lotincorp.biz

Bonsoir et bienvenue à tous !

ww

w.lotincorp

.biz

Je suis Henri Lotin, graphiste multimédia diplômé de la Graphic Design School d’Australie.

Je vis à Douala, au Cameroun, et je suis le directeur de création et le co-fondateur de Lotin Corp.

Depuis Octobre 2014, je suis le fondateur de Lotin Corp. Academy, où j’enseigne l’introduction à la communication visuelle, le design web et interactif et les logiciels de PAO.

ww

w.lotincorp

.biz

ww

w.lotincorp

.biz

Outils et techniques innovantes pour un

design de qualité de vos plateformes web

ww

w.lotincorp

.biz

1. Qui est le web designer ?

ww

w.lotincorp

.biz

Le web designer (ou designer d’interfaces web) est chargé de concevoir et de réaliser le design d’une interface web : son métier ne se résume pas à la conception graphique seule car il s’attache avant tout à la formalisation des interactions des pages du site web.

Il faut savoir avant tout qu’un designer web moderne doit être à même d’avoir des talents en graphisme et être capable d’intégrer une interface en HTML5 et CSS3.

ww

w.lotincorp

.biz

La conception d’un design web tient compte des contraintes spécifiques du web en termes d’utilisabilité et d’accessibilité.

À partir de la demande du client, il fait une traduction artistique globale, en rapport avec le contenu du site.

Les priorités du webdesigner sont : le respect du cahier des charges du client et la séduction des futurs utilisateurs du site web.

ww

w.lotincorp

.biz

Les grands concepts

ww

w.lotincorp

.biz

Utilisabilité web

ww

w.lotincorp

.biz

L’utilisabilité, usabilité ou encore aptitude à l’utilisation est définie par la norme ISO 9241-11 comme :

« le degré selon lequel un produit peut être utilisé, par des utilisateurs identifiés, pour atteindre des buts définis avec efficacité, efficience et satisfaction, dans un contexte d’utilisation spécifié »

C’est une notion proche de celle d’affordance, ou même d’ergonomie qui est cependant plus large.

ww

w.lotincorp

.biz

Les critères de l’utilisabilité sont :

• l’efficacité : le produit permet à ses utilisateurs d’atteindre le résultat prévu.

• l’efficience : atteint le résultat avec un effort moindre ou requiert un temps minimal.

• lasatisfaction : confort et évaluation subjective de l’interaction pour l’utilisateur.

ww

w.lotincorp

.biz

Accessibilité web

ww

w.lotincorp

.biz

L’accessibilité du web est la problématique de l’accès aux services et contenus en ligne non seulement pour les handicapés et les seniors, mais aussi de manière plus générale pour tous les utilisateurs qui ne disposent pas du confort offert par un ordinateur de bureau situé dans une pièce tranquille.

ww

w.lotincorp

.biz

En effet son application concerne également les utilisateurs « normaux » placés dans des situations moins confortables comme avec un téléphone mobile, une tablette… ou placés en situation particulière de bruit, de dimension d’affichage, etc.

ww

w.lotincorp

.biz

2. L’interface graphique

ww

w.lotincorp

.biz

2.1. Qu’est-ce qu’une interface ?

ww

w.lotincorp

.biz

Une page web est une interface. Toutes les formes de media interactifs reposent sur une IUG (Interface Utilisateur Graphique) pour permettre à l’utilisateur d’interagir avec le système.

ww

w.lotincorp

.biz

Une IUG est comme un appareil de traduction (interprétation) qui nous permet de parler et d’interagir avec des machines ou des systèmes. La conception d’IUG qui atteint ce but avec succès repose sur les principes de la conception axée sur l’utilisateur (user-centred design) :

ww

w.lotincorp

.biz

• Intuitiveetfacileàutiliser

• Logiqueavecdesoptionsévidentespourlanavigation et les opérations

• Pourvued’unehiérarchievisuelleclairequifournitune plateforme contextuelle pour le contenu

• Faitusaged’indicateursvisuelsetdesconventionsweb standards

• Esthétiquementplaisanteetsignifiante

ww

w.lotincorp

.biz

2.2. Les buts de l’interface utilisateur

ww

w.lotincorp

.biz

L’objectif principal de l’IUG est de fournir des outils conviviaux (user-friendly) qui permettent aux utilisateurs :

d’accéder facilement au système d’information,

et de fournir un retour d’information (feed-back) utile aux utilisateurs tout au long du processus,(comme indiquer à quel endroit dans le système ils se trouvent et où aller par la suite pour plus d’informations ou de produits dans le site).

ww

w.lotincorp

.biz

Pours’assurerquel’IUGestconviviale,lesélémentssuivant doivent faire l’objet d’une conception minutieuse et d’une attention particulière :

ww

w.lotincorp

.biz

La navigationLes outils dont se serviront les utilisateurs pour se déplacer et localiser les pages, l’information ou les produits dans le site. La navigation doit être cohérente à travers tout le site.

ww

w.lotincorp

.biz

L’étiquetageLes mots utilisés pour les éléments de navigation comme les boutons. Un bon étiquetage crée une navigation claire, intuitive et fournit une expérience utilisateur positive.

ww

w.lotincorp

.biz

L’orientationLes outils et les indicateurs qui aident les utilisateurs à s’orienter à l’intérieur du site et trouver aisément leur chemin, comme le fil d’ariane (breadcrumbs).

ww

w.lotincorp

.biz

Le contrôleLes utilisateurs aiment le contrôle. Les sites web réussis fournissent autant de contrôle que possible, au lieu de s’en emparer ou essayer de forcer les utilisateurs de réaliser une opération d’une manière unique.

ww

w.lotincorp

.biz

2.3. Don’t Make Me Think!

ww

w.lotincorp

.biz

Je ne veux pas réfléchir ! La chose la plus surprenante pour les designers est de savoir que les utilisateurs n’aiment pas réfléchir.

Ce dont nous avons besoin de nous rappeler est que les designers ne sont pas des utilisateurs typiques.

Les utilisateurs aiment le choix stupide ; plus simple et plus facile c’est d’exécuter des actions sur un site web ou de trouver ce qu’ils cherchent, plus positive est leur expérience, et plus ils sont enclins à « aimer » le site web.

ww

w.lotincorp

.biz

Avec autant d’options disponibles sur le web, la chose fondamentale pour les concepteurs web est de garder les utilisateurs contents.

Les utilisateurs mécontents ne resteront pas sur un site web, et ne seront pas enclins à y retourner.

Les sites web ne sont pas comme des films ; un site web ne peut se reposer uniquement sur les effets spéciaux !

Il devrait y avoir du sens et de la pertinence sans trop de distraction ou d’irritation pour le rendre utile.

ww

w.lotincorp

.biz

L’un des meilleurs livre et le plus facile à lire sur la conception d’IUG axée sur l’utilisateur (user-centred GUI design) est :

Don’t Make Me Think de l’expert en utilisabilité Steve Krug.

Ce livre est une lecture essentielle pour tous les concepteurs web.

ww

w.lotincorp

.biz

3. Les solutions e-commerce

ww

w.lotincorp

.biz

3.1. Magento

ww

w.lotincorp

.biz

3.2. Woocommerce

ww

w.lotincorp

.biz

3.3. Demandware

ww

w.lotincorp

.biz

3.4. Wix.com

ww

w.lotincorp

.biz

Merci !