outils et techniques innovantes pour un design de qualité de vos plateformes web
DESCRIPTION
Les enjeux d'un design de qualité pour une plateforme e-commerce. Les principes de base sur l'utilisabilité et l'accessibilité, ainsi que les caractéristiques d'une bonne interface web sont abordés dans cette présentation à l'Afrikebiz 2015 !TRANSCRIPT
![Page 1: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/1.jpg)
Outils et techniques innovantes pour un design de qualité de vos
plateformes web
www.lotincorp.biz
![Page 2: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/2.jpg)
Bonsoir et bienvenue à tous !
ww
w.lotincorp
.biz
![Page 3: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/3.jpg)
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
![Page 4: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/4.jpg)
ww
w.lotincorp
.biz
Outils et techniques innovantes pour un
design de qualité de vos plateformes web
![Page 5: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/5.jpg)
ww
w.lotincorp
.biz
1. Qui est le web designer ?
![Page 6: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/6.jpg)
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.
![Page 7: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/7.jpg)
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.
![Page 8: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/8.jpg)
ww
w.lotincorp
.biz
Les grands concepts
![Page 9: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/9.jpg)
ww
w.lotincorp
.biz
Utilisabilité web
![Page 10: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/10.jpg)
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.
![Page 11: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/11.jpg)
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.
![Page 12: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/12.jpg)
ww
w.lotincorp
.biz
Accessibilité web
![Page 13: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/13.jpg)
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.
![Page 14: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/14.jpg)
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.
![Page 15: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/15.jpg)
ww
w.lotincorp
.biz
2. L’interface graphique
![Page 16: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/16.jpg)
ww
w.lotincorp
.biz
2.1. Qu’est-ce qu’une interface ?
![Page 17: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/17.jpg)
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.
![Page 18: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/18.jpg)
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) :
![Page 19: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/19.jpg)
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
![Page 20: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/20.jpg)
ww
w.lotincorp
.biz
2.2. Les buts de l’interface utilisateur
![Page 21: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/21.jpg)
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).
![Page 22: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/22.jpg)
ww
w.lotincorp
.biz
Pours’assurerquel’IUGestconviviale,lesélémentssuivant doivent faire l’objet d’une conception minutieuse et d’une attention particulière :
![Page 23: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/23.jpg)
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.
![Page 24: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/24.jpg)
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.
![Page 25: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/25.jpg)
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).
![Page 26: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/26.jpg)
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.
![Page 27: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/27.jpg)
ww
w.lotincorp
.biz
2.3. Don’t Make Me Think!
![Page 28: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/28.jpg)
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.
![Page 29: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/29.jpg)
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.
![Page 30: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/30.jpg)
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.
![Page 31: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/31.jpg)
ww
w.lotincorp
.biz
3. Les solutions e-commerce
![Page 32: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/32.jpg)
![Page 33: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/33.jpg)
ww
w.lotincorp
.biz
3.1. Magento
![Page 34: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/34.jpg)
![Page 35: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/35.jpg)
ww
w.lotincorp
.biz
3.2. Woocommerce
![Page 36: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/36.jpg)
![Page 37: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/37.jpg)
ww
w.lotincorp
.biz
3.3. Demandware
![Page 38: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/38.jpg)
![Page 39: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/39.jpg)
ww
w.lotincorp
.biz
3.4. Wix.com
![Page 40: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/40.jpg)
![Page 41: Outils et techniques innovantes pour un design de qualité de vos plateformes web](https://reader031.vdocuments.site/reader031/viewer/2022020223/579077941a28ab6874be6968/html5/thumbnails/41.jpg)
ww
w.lotincorp
.biz
Merci !