rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur...

54

Upload: camille-perazzi

Post on 22-Jan-2017

170 views

Category:

Design


3 download

TRANSCRIPT

Page 1: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

 

Page 2: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  2  

       

Master  1ère  année  Mention  Information  Communication    

   

   

Penser l’ergonomie et l’expérience utilisateur d’un site internet :

l’art du web designer    

L’apport et le rôle du métier de web designer au sein d’une agence de communication/web

           

Stage  réalisé  au  Luxembourg,    

Sous  la  tutelle  de  Rudolphe  Aben,  directeur  d’agence  &  commercial      

Par  Camille PERAZZI

 Dates  du  stage  

04.04.2016  –  01.06.2016        

Tuteur  universitaire  :    Sébastien  Albert  

Année universitaire 2015-2016

Page 3: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  3  

Sommaire  INTRODUCTION  DU  PROPOS  ……………………………..…….……………………..  4-­‐8    INTRODUCTION  …………….…………………………………………………………………….……….…………..  4  PROJET  PROFESSIONNEL  &  OBJECTIFS  ……………………………….……………………….....……..  5-­‐6  PLAN  DU  RAPPORT  DE  STAGE  PROBLÉMATISÉ  ………………….……………………..…………...  6-­‐8    PRÉSENTATION  DU  CADRE  DU  STAGE  ………………………………………….  8-­‐12    PRÉSENTATION  DE  L’ENTREPRISE  D’ACCUEIL  &  SES  OBJECTIFS  ……………….…………..  8-­‐9  LISTE  DES  MISSIONS  ………………………………………………………………………….………………..  9-­‐11  LE  CADRE  DE  LA  PROBLÉMATIQUE  …………………………….………….…………...……………..  11-­‐12    PRÉSENTATION  DE  LA  PROBLÉMATIQUE  ….………………..……………..  12-­‐16    ENONCIATION  DE  LA  RÉFLEXION  PROBLÉMATISÉE  …………….…..…….…………………..  12-­‐14  LES  CRITÈRES  &  FINALITÉS  QUI  FONDENT  LA  PERTINENCE  DE  LA  RÉFLEXION  PROBLÉMATISÉE  ……………………………………………………………………….………………………14-­‐16    TRAITEMENT  DE  LA  PROBLÉMATIQUE  ………………..….……….………..  16-­‐33    INTRODUCTION  ………………………………………………………..………………..………….…………..  16-­‐18  PENSER  L’EXPÉRIENCE  UTILISATEUR  :  UNE  ÉTAPE  PRIMORDIALE  DANS  LA  RÉALISATION  D’UN  SITE  WEB    ……………………………………………………..….…………….…..  19-­‐26       ERGONOMIE  &  UTILISABILITÉ  …………………………………………………………………...…………………….  19-­‐21     WEB  DESIGNER  :  LE  TRAVAIL  EN  AMONT  POUR  PENSER  L’INTERFACE    

HOMME-­‐MACHINE  (IHM)  ………………………………………………………………………………..……………….  21-­‐23     LE  DESIGN  PERSUASIF,  UNE  CLEF  POUR  SÉDUIRE  &  SATISFAIRE  ?  …………………………..……….  23-­‐26    LES  ATOUTS  &  LES  LIMITES  DE  L’USAGE  DES  TEMPLATES    ………..………………..……..  25-­‐32       DE  LA  FICHE  DE  STYLE  À  WIX  EN  PASSANT  PAR  WORDPRESS,  QUEL  SENS  ?  …………………….  26-­‐28     VERS  UNE  STANDARDISATION  DES  SITES  ?  …………………………………………………………..………….  28-­‐31     AVANT  TOUT  UNE  ENVIE  DES  CLIENTS  :  UNE  LOGIQUE  D’ADAPTATION……………..…………….  31-­‐32    CONCLUSION  ………………………………………………………………………………..……….…………..  33-­‐35    RÉFÉRENCES  ……………………………………………………………………...……..……..  36    REMERCIEMENTS  ……………………………………………………………..……………..  37    ANNEXES  ……………………………………………………………………..……………..  38-­‐49    ÉVALUATION  DU  STAGE  ………………………………………………………...………..  51      

Page 4: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  4  

I. Introduction du propos.

1. Introduction.

Relativement différent du programme de licence 3 en terme d’approfondissement des

notions et de pratique, le master 1 en information et communication parcours création de

projets numériques offre davantage de matières et d’outils afin de nous professionnaliser et de

concrétiser notre projet futur. Durant cette année nous avons ainsi manipuler davantage

certaines notions notamment l’HTML/CSS mais nous avons également fait du benchmarking,

du web design etc. Tous ces éléments qui, rassemblés, nous plongent dans le monde du

travail. De plus, nous avons vu en profondeur ce qu’était le métier de chef de projet lors du

lancement et de la création du projet fil rouge, une réelle mise en situation de ce qui nous

attend dans le monde professionnel : travail en équipe, collaboration, contact avec le client,

respect du cahier des charges, les délais etc. Le stage est venu compléter et concrétiser cela en

mettant directement en application nos connaissances et acquis universtaire. Celui-ci sert ainsi

à lier nos facultés et à les mettre en oeuvre au service de l’entreprise qui nous accueille. En

retour, celle-ci doit également nous apporter son savoir, savoir-faire et façon de travailler afin

que nous ayons une approche plus précise du métier convoité et d’enrichir nos connaissances

dans la communication numérique. Chaque entreprise est différente, qu’elle soit agence de

communication, agence web ou plus grande société, leur approche, leur façon de

communiquer et de répondre aux besoins des clients restent différentes.

En tant que stagiaire dans une structure, il est important de développer et montrer nos

acquis, qu’ils soient universitaire ou non, en tant que plus-value à apporter à l’agence qui

nous accueille. Il sert également à nous projeter dans un métier proche ou égal à celui que

nous convoitons et les tâches confiées seront des expériences qui viendront, ou non, confirmer

nos choix. Cette mise en situation est bénéfique afin de voir le déroulement total ou partiel

d’un projet, de voir la communication de l’entreprise et également comment elle se

positionne. Cette immersion professionnelle est également un excellent moyen de se

perfectionner puisqu’en étant directement en situation dans un contexte donné, il est plus

facile d’appréhender et d’apprivoiser la tâche confiée. En outre, il est judicieux d’être stratège

et tacticien dans la recherche du stage ainsi que dans la structure suivant les missions à

effectuer pour, au mieux, avoir une vision positive qui pourrait nous conforter dans notre idée

de départ en terme professionnel.

Page 5: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  5  

2. Projet professionnel et objectifs.

Du point de vue personnel, j’ai suivi le parcours “logique” puisque j’ai validé ma

licence en information et communication l’année dernière et que mon objectif était, et est

toujours, de mener à bien ce même master. Grâce à ce parcours, je bénéficie déjà d’une

expérience professionnelle issue du même domaine à l’aide du stage réalisé en lience 3 dans

une agence de communication chez Mescudi1. Ce stage, qui avait pour mission principale

d’être infographiste, m’avait également montré le métier de chef de projet tout en restant

actrice de celui-ci puisque ce n’était pas ma tâche principale. Suite à ce stage je possède déjà

des notions concernant la gestion de projet (les budgets, les tâches, les délais, les relations

avec les clients etc.) tout en restant extérieure à ce métier. En somme, ma mission principale

consistait à créer des logos, des cartes de visite, des visuels, des flyers en dehors des tâches

secondaires pour suppléer les employés dans leurs réalisations. Ce stage était enrichissant

puisqu’il vient parfaitement compléter mon projet futur qui consiste à devenir chef de projet

spécialisé web designer. En tant que web designer il est important de maitriser, au minimum,

les bases des outils de la suite adobe tels que Photoshop et Illustrator et c’est justement mon

précédent stage qui m’a permis d’acquérir ces compétences très utiles pour le futur. Par

conséquent, mon stage réalisé en licence 3 était une parfaite mise en situation dans laquelle

j’ai pu être spectatrice du métier que je convoite en tant que chef de projet, et les cours de

master 1 sont venus intensifier cela avec davantage d’exemples et de notions comme la

création des devis et le travail en équipe, par exemple.

Mon souhait est de travailler dans une agence de communication web, une structure où

la polyvalence serait maitre. Je convoite une agence réunissant une petite équipe où l’entraide,

l’écoute et la communication seraient primordiales. Au sein de l’équipe je n’hésiterai donc

pas à être polyvalente : être chef de projet, être web designer ainsi que conseiller et écouter

mes collègues.

Au sein du stage de master 1 c’est principalement la polyvalence qui est ressortie,

puisque, nous le verrons par la suite, j’ai assisté mon maitre de stage et j’ai également mener à

bien diverses tâches réalisables au sein d’une agence web (community management, web

développeur, graphiste, photographe etc).

En débutant en tant que chef de projet junior et d’après mon expérience je pense être en

mesure de gérer l’ensemble d’un projet et de répondre aux besoins exprimés des clients suite

                                                                                                               1 Agence de communication - Thionville

Page 6: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  6  

au cahier des charges. Mon sens de l’observation, ma curiosité, mon sens relationnel et mon

sérieux sont des qualités importantes qui respecterons la qualité du travail effectué mais aussi

les délais et le budget suivant les projets. Concernant la spécialité du métier de web designer

cela serait une réelle passion de mettre en oeuvre mes connaissances et expériences avec

internet pour répondre à la demande du client à l’aide d’un dispositif créatif, original,

moderne et innovant, en veillant bien évidemment à respecter le cahier des charges défini

auparavant. Concevoir un site internet en pensant sa structure, son design et les interactions

qui vont découler tout en étant à la fois chef de projet serait tout à fait crédible et possible

dans une agence de communication/web d’une petite structure.

Ce sont mes deux expériences précédentes, mon savoir, mes acquis universitaires et

ma façon d’être qui me confortent dans l’idée de métier que je souhaite exercer l’année

prochaine : chef de projet spécialisé web designer.

3. Plan du rapport de stage problématisé.

Nous l’aborderons plus en détail dans la partie suivante qui présentera l’entreprise,

l’agence qui m’a accueillie est constituée de deux associés qui ont pour mission principale de

créer des sites internet. Leurs valeurs sont les suivantes : répondre au plus vite à la demande

des clients en les satisfaisant à l’aide d’un site sobre, simple et un devis proportionnel. De ce

fait, cette dernière juge qu’un web designer n’est pas primordial pour la réalisation d’un site

web du fait qu’avec ce métier on ne peut donc pas lier rapidité et simplicité dans la

conception d’un site internet.

Web designer étant le métier que je souhaite intégrer dans mon futur métier, j’ai donc

jugé important de traiter le rôle de celui-ci au sein de la problématisation de mon stage. Grâce

aux cours reçus en licence 1 et principalement grâce à Olivier Beining2 qui nous a offert ses

connaissances et fait découvrrir son métier, je juge cette fonction comme était indispensable à

la réalisation d’un site internet qui réponde au mieux à la demande des clients mais, avant

tout, des internautes qui vont naviguer sur le site.

                                                                                                               2 Professeur du cours de Web Design – Semestre 1 Master 1

Page 7: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  7  

Du point de vue de l’entreprise d’accueil, Business Casanova, la réalisation de leurs

sites internet se fait via le CMS3 Wordpress et, le plus souvent, avec l’aide du thème Divi qui

permet des possibilités multiples et reste assez souple dans son utilisation. Il va de soit

qu’avoir un web designer au sein de son équipe permet de développer la créativité et

l’orignalité d’un site internet en le démarquant ainsi des autres. En utilisant des templates4

présents sur Wordpress et en prônant la rapidité et la simplicité nous verrons que cela peut

être un frein à la démarcation et l’innovation au sein du web. Cependant, nous sommes

conscients que l’écoute du client est nécessaire et qu’il faut ainsi tenir compte avant tout de

ses besoins auxquels répond positivement l’agence Business Casanova en satisfaisant les

demandes.

Nous aborderons donc au fil de la rédaction du mémoire de stage quels sont les

avantages et les inconvénients d’avoir recours à des layouts en pensant le métier de web

designer comme étant utile en terme d’inventivité mais aussi en ce qui concerne l’expérience

utilisateur. Il faut penser l’apport du métier de web designer comme efficace pour aborder

l’ergonomie et l’utilisabilité d’un dispositif, en l’occurrence d’un site internet. A travers ce

mémoire de stage, il sera intéressant de définir les tâches du métier de web designer et ce qu’il

englobe pour penser l’interaction homme-machine. Pour illustrer cela nous pourrons évoquer

cette relation internaute-site internet à l’aide du design persuasif relevant ainsi du métier de

web designer comme étant positif pour cette interaction.

Dans un second temps nous traiterons des limites de l’usage des gabarits ainsi que leurs atouts

en retrançant l’évolution de l’élaboration des sites internet en partant de la fiche de style en

passant par Wordpress et Wix. Dans cette approche il sera approprié de s’orienter vers la

question suivante : sommes-nous en train de tomber dans une standardisation des sites via ces

usages ? Mais avant tout, les métiers de la communication doivent répondre à la demande des

clients qui est l’acteur décisif du projet, notamment pour le délai, les étapes de validation, le

budget et pour la notoriété de l’agence de communication/web en elle-même.

                                                                                                               3 Un CMS – ou SGC – (système de gestion de contenu) : “programme informatique utilisant une base de données et permettant de gérer de A à Z l’apparence et le contenu d’un site web.” – www.cms.fr 4 Synonymes récurrents au sein de ce rapport : layout, gabarit, modèle de page. Ce sont de modèles préconçus sur lequel les web développeurs se basent pour confectionner les sites.

Page 8: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  8  

C’est donc autour de cette problématique que sera rédigé mon rapport de stage en tentant de

convaincre que la présence et le travail d’un web designer est bénéfique pour une agence de

communication.

II. Présentation du cadre du stage.

1. Présentation de l’entreprise d’accueil et ses objectifs.

L’entreprise Business Casanova est une agence web située au Luxembourg. Présente

sur le marché depuis 1 an et demi, cette dernière a déjà à son actif des références

conséquentes pour parfaire son image et sa réputation.

Constituée de deux principaux acteurs que sont Rudolphe ABEN et Emilien JOURDAN, ces

derniers ont développé l’agence en vue de créer une communication web efficace pour leur

clientèle.

Leur façon de travailler est peu commune dans le monde de la communication

puisqu’ils privilégient le travail à distance, soit le télétravail. Dans cet environnement de

travail chacun a une tâche bien définie :

-­‐ Rudolphe : le commercial chargé de trouver les clients et leur vendre le produit. Il

assure également la partie administrative, notamment la confection des devis et la

gestion du produit en se rendant directement chez le client lui présenter leurs

créations.

-­‐ Emilien : le web développeur chargé de répondre à la demande des clients en leur

créant le site internet souhaité.

L’agence en elle-même a donc pour finalité de concevoir des sites internet en

répondant à la demande des clients. Il peut s’agir de site vitrine ou d’e-commerce, selon la

visée souhaitée. Pour ce faire, l’entreprise est friande du CMS Wordpress qui est leur outil de

développement qu’ils jugent souple, maniable et simple d’utilisation pour eux et leurs clients.

Pour accompagner le site web, ils proposent également la confection des réseaux sociaux

utiles au bon développement de l’entreprise de leur clientèle ainsi que pour avoir une

communication plus efficace. Elle propose également de référencer au mieux leurs

productions afin de générer du trafic et positionner le site sur la toile, toujours suivant la

volonté du client. Pour compléter cela, Business Casanova propose de faire des campagnes e-

Page 9: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  9  

mailing dans le but de fidéliser les clients et/ou d’attirer des prospects à l’aide de ces

campagnes modernes et intelligentes.

Un point propre à l’agence est à noter, cette dernière démarche les clients par téléphone

afin de leur proposer leurs services et convenir d’un rendez-vous pour présenter le devis.

Autrement dit, les clients ne viennent pas directement à l’agence puisque Business Casanova

ne possède qu’un bureau pour y travailler lorsqu’ils ne privilégient pas le télétravail. C’est

cette partie que Rudolphe prend en main afin de gagner des clients.

2. Liste des missions.

Mission Client Détails de la mission

Gestion des réseaux

sociaux – Community

Management

-­‐ Textinova

-­‐ The Best Key

-­‐ Yves Braun

-­‐ Hortos Fleurs

Intégration de contenus (textes et

images), création de concours,

interaction avec les clients.

Création d’infographies

-­‐ Business Casanova

-­‐ Yves Braun

-­‐ The Best Key

-­‐ Textinova

Réalisation d’un diaporama

présentant l’entreprise (valeurs,

travail, référence).

Modernisation de logos et création

pour des réseaux sociaux.

Audit

-­‐ Textinova

Comprendre et analyser le client

ainsi que son site existant. Proposer

des améliorations pour vendre et

mieux référencer le site. Trouver

des markets place pour mettre les

articles.

Traduction -­‐ Textinova Traduction du site entier en italien.

Photographies

-­‐ Tommys Box

-­‐ Hortos Fleurs

-­‐ Tapis d’Orient

-­‐ Frising Decoration

-­‐ Yves Braun

Photographies réalisées à l’aide de

mon reflex pour mettre à jour le

contenu image des sites des clients.

-­‐ Tommys Box : plats

japonais.

Page 10: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  10  

-­‐ Hortos Fleurs : compositons

florales et bijoux.

-­‐ Tapis d’Orient : tapis;

-­‐ Frising Decoration :

devanture de la boutique.

-­‐ Yves Braun : ses nouveauté.

Intégration de contenus

-­‐ Tommys Box

-­‐ Hortos Fleurs

Intégration des photographies prises

pour innover, moderniser le site et

pour proposer des contenus non

existants pour un site en création.

Découverte e-

commerce

-­‐ Textinova

Création de codes promotionnels

pour qu’ils soient applicables lors

des concours annoncés sur

Facebook.

Création de

Newsletters

-­‐ Tous les clients de

l’agence

Pour Textinova : création et envoi

de la première newsletter pour la

cliente. Création du visuel, du texte,

du code promotionnel et de l’envoi

grâce au dispositif MailChimp.

Pour les autres clients : création du

design des newsletter de

présentation de leur entreprise.

Création de site

-­‐ The Dog Company Refonte totale d’un site existant à

l’aide de Wordpress et du thème

Divi. Création des pages, du texte et

de la navigation complète.

Récupération du contenu déjà

existant (texte et image).

Création du logo et de la charte

graphique.

Finalité : créer un site moderne, à

l’image de l’entreprise et

responsive.

Page 11: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  11  

Formations

-­‐ Gisèle (seconde

stagiaire de

l’agence)

-­‐ Wordpress (présentation du

tableau de bord, création de

pages, présentation de thème

divi + installation d'autres

thèmes, création d'un menu,

intégration de contenus)

-­‐ Réseaux sociaux (création

de Facebook, Instagram,

Twitter)

-­‐ Mailchimp (Création de

compte + création templates

+ créer une liste)

-­‐ Trello (présentation de

l'outil)

-­‐ Formation à distance à

l’aide d’une vidéo.

3. Le cadre de la problématisation.

Rappelons le, Business Casanova ne souhaite pas intégrer de web designer au sein de son

agence. Etant donné que je souhaite mettre en avant mes compétences et savoirs acquis lors

de mes années universitaires, je suis en mesure de juger la présence d’un web designer

comme étant primordiale au bon déroulement du processus de création d’un site web.

Business Casanova est une petite structure composée de deux membres, la polyvalence est

ainsi maîtresse. Après de longues discussions avec mon maitre de stage, Rudolphe Aben, je

suis parvenue à mieux cerner leur façon de travailler : travailler vite et le moins cher possible

pour répondre à la demande du client. Ce faisant, l’agence ne juge pas important d’avoir un

web designer dans la conception puisqu’il s’agirait d’une perte de temps et d’argent. Penser

l’expérience utilisateur avant le lancement du site est mineur pour eux puisqu’ils fonctionnent

de la sorte : c’est eux qui proposent un site au client, ce n’est pas le client qui vient à eux pour

qu’ils réalisent sa demande. En se rendant ainsi chez le client pour le démarcher, Rudolphe

Page 12: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  12  

prend des notes sur son carnet et transmet cela oralement à son associé Emilien qui réalise le

site internet. Les étapes en amont de la création d’un site web ne sont donc pas nécessaires et

importantes pour concevoir un site internet selon Business Casanova.

Le cadre de mon mémoire de stage consiste donc à démontrer que pour rendre

l’expérience utilisateur la plus positive possible lors de la mise en ligne du site, il y a des

étapes à prendre en compte afin de penser cette expérience avant le produit mais également

que le rôle du web designer est utile d’un point de vue timing. A travers des exemples

concrets dont j’ai été témoin pendant mon stage nous verrons qu’il accélère le productivité et

donc le gain de temps. Outre la créativité, l’innovation et l’originalité que pourrait apporter un

web designer grâce à ses compétences, il faut mettre en avant que son rôle consiste à anticiper

l’usage du site en répondant aux attentes des internautes. Pour accentuer cela, nous pouvons

également évoquer les tâches du web designer UX qui va encore plus loin en ayant recours à

diverses méthodes (brainstorming, cartes d’idéation, expérience maps etc.) concernant cette

expérience homme-machine. Ce travail aurait été important d’approfondir mais je pense

sincèrement que cela résulte d’un travail de mémoire de recherche et non de mémoire de

stage. C’est pourquoi je vais me concentrer sur le métier de web designer qui réalise les

étapes en amont de la conception en recourant à la méthode dite “maquettage”.

III. Présentation de la problématique.

1. Enonciation de la réflexion problématisée.

Du fait que l’entreprise Business Casanova n’utilise que le CMS Wordpress et

principalement le thème Divi et, plus ancien, Modern Interior pour satisfaire les demandes des

clients, nous pouvons remarquer au fil de leurs réalisations une certaine “standardisation” et

redondance des sites. Pour cette agence, l’utilisation de templates vient accentuer l’idée que le

web designer n’est pas nécessaire pour penser l’interface, l’ergonomie ainsi que le design du

futur site. C’est de ce point de vue que sera donc orienté mon mémoire de stage où le recours

à des layouts permet à une agence de se passer d’un web designer.

Suite à cela, nous pouvons poser la problématique suivante :

Quelles sont les limites de l’usage des templates et quels sont les apports spécifiques du web designer dans la conception web ?

Page 13: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  13  

Pour concevoir un site internet, il est primordial de penser l’interaction des futurs

usagers avec le site en question. L’ergonomie est donc un point à prendre en compte de la part

d’un web designer, il doit en effet adapter le site afin qu’il soit fonctionnel, simple

d’utilisation, qu’il réponde tout simplement aux besoins des usagers suivant la finalité du site

(site vitrine ou e-commerce par exemple). Pour faire cela au mieux il existe diverses

méthodes que ce métier doit prendre en compte pour la conception. Nous le disions

précédemment, la méthode de maquettage est une réponse à cela, autrement dit les étapes de

conception de l’arborescence, des zonings, des wireframes et les maquettes graphiques. Pour

aller plus loin, il existe également le métier de web designer UX qui conçoit et évalue

d’autant plus les sytèmes interactifs tels qu’un site internet mais, comme dit précédemment,

cela relèverait d’un travail de mémoire plutôt que d’un rapport de stage problématisé.

Cependant, le web designer peut tout aussi bien s’inspirer des méthodes utilisées par le web

designer UX si l’entreprise l’autorise puisque les méthodes pratiquées demande du temps.

L’ouvrage principal qui constitue certaines notions et outils utiles pour ce mémoire de

stage est, sous les conseils de Luc Massou, Méthodes de design UX – 30 méthodes

fondamentales pour concevoir et évaluer les systèmes interactifs de C.Lallemand et

G.Gronier. De façon générale, ce livre donne des définitions de termes clefs bénéfiques à la

rédaction de ce mémoire de stage mais également des règles et méthodes propices au bon

développement d’un système interactif, dans notre cas, d’un site web. Comme le mentionne le

titre du livre, il s’agit d’approches du web designer UX, il est donc judicieux de trier les dires

afin de nous occuper uniquement des parties qui se rapprochent du métier de web designer, au

risque d’aller trop loin.

Nous le savons, un site internet contemporain doit se détâcher des autres afin de se distinguer

de la concurrence. Par conséquent, le web designer doit rendre le dispositif attirant, agréable,

prenant et ce livre guide le web designer à l’aide de méthodes pour penser et développer ce

système interactif. Ce sont des pratiques à assimiler et intégrer dans les étapes de conception

afin de satisfaire le client dans ses souhaits mais, surtout, pour faire en sorte que le site lui soit

bénéfique et réponde à la demande des internautes dans leur navigation et recherche(s).

En outre, cet ouvrage est une piste intéressante pour nourrir ma rédaction puisque

centré directement sur le métier au cœur de mon rapport et également sur le métier dont fait

l’impasse l’entreprise Business Casanova. Il s’agira donc pour moi, à travers mon expérience

personnelle, mes acquis universitaires et mon observation tout au long de mon stage de master

1 d’argumenter l’idée principale qui constitue ce rapport de stage problématisé.

Page 14: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  14  

Au vue de mes constatations de ce stage chez Business Casanova, les savoirs offerts par mes

professeurs d’information et communication ainsi que la vision personnelle que j’ai du

fonctionnement d’une agence de communication je pense sincèrement que nous ne pouvons

pas concilier la conception d’un site web sans un web designer, en tout cas, pas dans un esprit

original, innovant et créatif. Les templates Wordpress utilisés par l’entreprise d’accueil

permettent de multiples possibilités mais nous nous aperçevons rapidemment que les sites

fournis aux clients présentent tous des similitudes au niveau du design, de l’ergonomie et de

l’interaction (structuration des pages, les menus, les photos, les icônes etc). Cette même

identité visuelle permet de répondre à l’idée suivante : créer un site rapide et pas cher. C’est

donc de ce point de vue que se basera ma réflexion, sur le fait que l’usage de layout pour

confectionner des sites participe à la standardisation de ces derniers et, ce faisant, le web

designer n’est pas déterminant dans la production de site.

2. Les critères et finalités qui fondent la pertinence de la réflexion problématisée.

Le métier de web designer est la spécialité que je souhaite intégrer dans mon futur

métier en tant que chef de projet spécialisé web designer. Mon expérience avec internet n’est

pas à négliger, que ce soit pour mon projet futur ou, à plus petite échelle, ce rapport de stage

problématisé. Ce constat s’est présenté à moi il y a quelques mois lors de la venue d’Olivier

Beining passioné de son métier qui nous a également fait découvrir une de ces facettes. C’est

à travers ce cours que j’ai pris conscience que pour devenir web designer il faut avoir déjà

acquéri une expérience conséquente en terme de navigation sur le web afin d’assimiler

certaines notions et structures. C’est à force de persuasion et découverte que nous arrivons à

intégrer certaines normes propres au site internet, ces règles ergonomiques qui facilitent le

parcours de l’internaute pour arriver à ses fins (notamment la règle des 3 clics5, une

structuration logique, une cohérence etc.), et cette faculté se présente à moi en tant

qu’internaute quotidienne (autrement dit, ma navigation sur divers sites à fréquence

rapprochée fait que j’acquiers une expérience conséquente pour visualiser et naviguer dans un

site en toute sérénité).

De plus, en terme de comparaison, nous pouvons assimiler le métier de web designer à celui

d’architecte. Logiquement, il est impensable de construire sa maison sans des plans

                                                                                                               5  Règle ergonomique selon laquelle l’usager doit pouvoir accéder à l’information recherchée par 3 clics ou moins.    

Page 15: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  15  

préalablement élaborés et pensés par un professionnel. Il en va de même pour produire un site

internet qui répondra aux besoins exprimés et recherchés des internautes : le web designer, en

tant que professionnel, concevra et organisera le site de sorte à ce que l’internaute navigue sur

le site et accède à l’information qu’il est venu chercher. Certes nous sommes conscients que

les gabarits proposés par les divers systèmes de gestion de contenu, tels que Wordpress par

exemple, répondent à ce besoin ergonomique en structurant et en proposant des mises en page

préfaites qui répondent à ce besoin d’utilisabilité. Néanmoins, actuellement, pour se

démarquer de la concurrence il est important de se distinguer, d’avoir sa propre mise en forme

et c’est également une tâche à réaliser de la part d’un web designer. Il s’agit alors d’une phase

essentielle dans la création d’un site en terme d’ergonomie, d’utilisabilité et d’accessibilité en

cernant les internautes (la cible du client) et le client. En construisant l’identité visuelle et la

charte graphique du client il doit également tenir compte des spécificités techniques du web,

comme nous le disions précédemment, les règles ergonomiques par exemple.

Cette approche est conforme à la spécialité “création numérique” puisque Web Design fut

même un cours que nous avons suivi au cours du premier semestre de master 1.

Directement lié au stage, lors de l’envoi de mon curriculum vitae et de ma lettre de

motivation en octobre 2015 le titre de mes courriers évoquaient bien l’envie d’exercer le rôle

de web designer dans leur structure, en plus de proposer mon aide et donc d’être polyvalente

chez eux. Cependant, lors de mon arrivée je me suis rendue compte que le métier de web

designer ne faisait pas partie de leur habitude de travail, c’est pourquoi j’ai rapidemment

abordé ce point avec mon maitre de stage puisqu’il devait s’agir de ma mission principale. Il y

a eu effectivement un malentendu sur ce point puisque, pour lui, le métier de web designer est

le même qu’un infographiste. Et en approfondissant ce métier, en lui expliquant les tâches,

missions et intérêts d’un web designer il s’est avéré que ce métier “n’est plus d’actualité dans

le monde travail d’aujourd’hui, qu’il s’agit d’une perte de temps et d’argent”. Je me suis donc

fié à ces règles en tentant justement de comprendre leur mode de travail ainsi que de voir les

lacunes et difficultés que l’agence pouvait jsutement rencontrer en omettant d’avoir un web

designer dans son équipe. C’est pourquoi, très rapidemment, j’ai eu envie de mettre à l’écrit

dans ce mémoire de stage cette problématique rencontrée.

Du côté universitaire et concordance avec mes études en information et communication

parcours création de projets numériques, la problématique de mon mémoire de stage est

clairement une question intéressante à aborder. En se référant au mode de travail utilisé par

l’agence de communcation Business Casanova nous pouvons ainsi réellement de poser la

question suivante : le web designer est-il fondamental pour concevoir un site internet ? C’est

Page 16: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  16  

justement là que réside toute ma réflexion qui va suivre. Dans l’ère de l’immédiateté, les

clients souhaite avoir leur produit fini livré le plus rapidemment et le moins cher possible :

c’est à cette demande que répond Business Casanova. Cependant, cette façon de travailler

remet totalement en cause le métier du web designer qui ne serait alors plus bénéfique et

nécessaire pour penser et concevoir un site internet. Mon point de vue s’oppose à cela

puisqu’en tant qu’étudiante à l’université de Lorraine en créations numériques, nous sommes

conscients qu’il faut aller au delà de la simple utilisation de gabarits de page préfaits par les

systèmes de gestion de contenu. En ce sens, il y a des stratégies à aborder pour justement

positionner le client sur le marché afin que son site internet lui apporte quelque chose. Une

simple présence sur internet ne suffit plus, il faut aller au delà et donc se pencher directement

sur côté utilisateur, ce à quoi doit veiller un concepteur de site internet : un web designer. La

plus-value de cet acteur est notable dans la confection de portails d’informations, de sites

d’entreprises, de sites commerciaux etc.

C’est justement à travers ce mémoire de stage que sera abordée cette problématique liée à

l’usage constant des layouts et en quoi cela participe à la standardisation des sites internet de

sorte à ce que le client ne puisse pas réussir à se démarquer sur la toile de ses concurrents et

donc d’attirer les clients.

IV. Traitement de la problématique.

Introduction.

La naissance du World Wild Web est la conséquence de ce que nous pouvons

aujourd’hui visionner et créer sur la toile. La volonté du créateur Tim Berners-Lee de pouvoir

naviguer d’un réseau à un autre en reliant des ordinateurs les uns avec les autres a constitué le

web d’aujourd’hui. Cette idée, datant de 27 années, est un mode d’organisation réticulaire de

l’information qui renvoyait à une forme d’utopie que représente cette technologie numérique

actuellement. Cette notion de partage et de stockage d’information reste le pillier de l’histoire

du numérique qui a donné naissance au monde de la société de l’information. Les bases du

web constituent une interface hypertextuelle permettant l’accès à l’information, c’est cette

même philosophie que nous retrouvons encore aujourd’hui grâce au deploiement des sites

internet. Au sein du Web 2.0 actuel, le web a cessé d’être un objet informatique pour devenir

un objet info-communicationnel où la démocratisation de l’écriture, le web participatif et le

web social sont maîtres. C’est autour de ces notions que se concentrent les agences de

Page 17: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  17  

communication pour parfaire leur mission : répondre aux demandes et besoins de leurs

clients. Autrement dit, le web étant en perpétuelle expansion a permis aux développeurs de le

rendre plus utile et captivant. Certains changements ont vu le jour au sein de cette évolution

constante : l’html, le css, les divers navigateurs et le responsive web design6 qui sont

également des conséquences directes sur les métiers que nous retrouvons dans une agence de

communication/web. Qu’ils soient infographistes, web développeurs ou bien encore chefs de

projet numérique, ces acteurs se doivent d’être à jour au niveaux des logiciels mais également

des pratiques qui émergent. Ces règles influent directement sur l’ergonomie d’un site internet

ou bien encore sur l’utilisabilité et son affordance qui sont des points à ne pas négliger pour

rendre un site innovant et moderne. L’usage quotidien que nous avons de ces dispositifs est

rendu possible grâce à cette évolution constante du web où l’idée de rendre la vie meilleure

prend tout son sens en s’adaptant aux besoins et envies des internautes. Le fait que le web soit

mouvant a notamment fait naitre de nouveaux métiers qui sont propres au numérique et requis

pour concrétiser un projet : le community manager en est un exemple, mais également le web

designer.

Au départ déstiné aux militaires et donc à un usage privé, le web est, à l’époque actuelle,

devenu indispensable et ancré dans nos habitudes. L’envouement de celui-ci ne s’est

évidemment pas fait sans conséquences pour les entreprises qui ont tiré profit de cette

stratégie de visibilté offerte par l’univers d’internet. Cette technologie mouvante a profité au

développement des agences de communication/web pour développer leur métier et faire

profiter de leurs compétences à leurs clients. Dans cette ère contemporaine il est primordial de

posséder un site internet pour une société : que ce soit, à petite échelle, pour entrer en contact

avec celle-ci ou, à plus grande échelle, acquérir de nouveaux clients ou bien encore pour

augmenter les ventes d’une certaine marque. D’un simple site vitrine, aux e-commerces les

plus développés, il est important d’être visible et surtout accessible sur le web. Nous sommes

dans une période où l’immédiateté règne, l’individu veut avoir accès à ce qu’il souhaite le

plus rapidemment possible et avoir un site internet est un remède à cela. Cependant, nous

sommes conscients que la facilité de bénéficier d’un site web est actuellement en expansion et

qu’il est de plus en plus rare qu’une entreprise ne possède pas, au minimum, un simple site

pour entrer en communication avec ses clients. Là est la subtilité pour une agence de

communication d’innover et de démarquer le site internet de son client afin de maîtriser la

concurrence et lui offrir la meilleure visibilité possible. Au risque de basculer vers une

                                                                                                               6 Adaptation du site sur les versions mobiles et tablettes.

Page 18: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  18  

standardisation des sites, il faut être créatif et innovateur tout en respectant les standards du

web imposées. Ces normes évoluent également, en même temps que le web lui-même. Les

sites internet qui constituent ce web sont en constante mutation et le design d’une page est

“victime” de cela. Loin sont les blocs gris, les logos simples et les navigations basiques, place

au dynamisme, aux graphismes les plus proches de la réalité possible et aux parcours les plus

fous. Malgré ces nombreuses possibilités offertes parle web aujourd’hui, il faut néanmoins

rester lucide vis à vis des normes du web en terme d’ergonomie, d’utilisabilité, d’accessibilité,

de graphisme et d’écriture. Pour justement penser cette interface homme-machine ces

éléments sont à prendre en considération pour réaliser un site afin de répondre aux besoins

exprimés par les internautes mais également pour les fidéliser avec la marque et/ou le site

dont il est question. Ainsi, à l’heure où avoir un site internet est possible pour toute entreprise

et où le nombre de sites ne cesse de s’accroitre il est important de bénéficier d’un web

designer au sein de son équipe pour concevoir et penser un site internet au risque que le site

créé ne se perde parmi les concurrents. L’importance de cet acteur est donc importante dans la

création d’un site puisque le web designer va construire “le plan” du futur site en tenant

compte des envies du client, en ajoutant ses connaissances et sa touche créative en prenant

soin de faire valider certaines étapes nécessaire à l’avancement du projet. Utiles, ses tâches

viendront positionner la clientèle sur le web à l’aide d’un site répondant à la demande du dit

client et des internautes mais également à l’aide d’un design innovant et d’une ergonomie

notable en veillant au cahier des charges établi. A l’inverse, et toujours selon les valeurs

prônées par l’agence, l’absence d’un web designer et donc l’utilisation constante d’un CMS et

d’un thème en particulier va créer une certaine redondance des sites internet. L’utilisation

récurrente d’un même thème vient accentuer cette idée où, à quelques couleurs et

organisations près, la structuration des sites seront extrêmement similaires, proches de la

standardisation.

C’est pourquoi nous pouvons nous demander quelles sont les limites de l’usage des

templates et quels sont les apports spécifiques du web designer dans la conception web ?

Nous aborderons dans un premier temps l’expérience utilisateur comme étant une

étape primordiale dans la réalisation d’un site web puis, dans un second temps, nous verrons

les atouts et les limites de l’usage des templates.

Page 19: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  19  

1. Penser l’expérience utilisateur : une étape primordiale dans la réalisation d’un site

web.

A. Ergonomie et utilisabilité.

A l’ère de l’immédiateté, il est important qu’un site web soit construit dans le cadre de

facilité d’usage sans négliger la construction esthétique. En effet, “penser l’usabilité et la

lisibilité d’une page, cela relève de l’ergonomie” 7 où l'usabilité, qui est une norme ISO,

consiste à définir une page avec efficacité, efficience et satisfaction. En compensation, le

terme “lisibilité” parle de lui-même puisqu’il s’agit alors de rendre la page web lisible et

compréhensible dans sa construction et organisation générale. Avant d’évoquer une

quelconque grille d’analyse et méthodes pour évaluer l’ergonomie et l’utilisabilité d’un

dispositif il est important de définir ces termes dans notre contexte. Pour penser un système

interactif tel qu’un site internet dans notre cas, l’ergonomie repose sur la relation avec

l’usager en terme d’interactivité et la facilité d’utilisation. En outre, il s’agit de rechercher une

meilleure adaptation entre une fonction (d’achat par exemple), un matériel (ici, le site

internet) et son utilisateur. Il faut, en ce sens, que l’usager fasse ce que nous attendons de lui,

et c’est là le rôle du web designer en tant que penseur de la structure, de l’organisation et de la

navigation du site. Il est clairement identifiable que le seul maître d’une bonne fonction mise

en place sur un site reste l’internaute. C’est la cible qu’il faut donc séduire et attirer en rendant

le site fonctionnel. C’est là que réside la problématique de l’ergonomie où il faut adapter le

dispositif à l’invidu qui va l’adopter. De la sorte, cette approche fonctionnaliste se base sur les

besoins de l’individu selon les informations qu’il est venu chercher. Certains ergonomes ont

pour cela conçu et pensé certaines méthodes et parmis ces derniers, nous retrouvons J.M.C.

Bastien et D. Scapin qui évoquent ces moyens mis en oeuvre pour conseiller, orienter,

informer et conduire l’usager lors de ses interactions avec l’outil. Leurs idées constituent des

bases de recommandations d’évaluation des interfaces, notamment le guidage (degré de prise

en charge de l’usager), l’incitation (les éléments mise en oeuvre pour faire appel, attirer,

susciter l’action), la lisibilité (concerne la compréhension de la mise en forme des éléments et

l’adaptation de ceux-ci) etc.

Un exemple concret vient illustrer cela, le fait qu’aujourd’hui, sur internet, il existe certains

modèles mentaux assimilés par les internautes. Cela concerne certaines conventions de                                                                                                                7 Penser le webdesign, modèle sémiotiques pour les projets multimédias, N.Pignier – B.Drouillat

Page 20: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  20  

conception qui sont directement liées à l’interprétation. Le cas précis pour démontrer cela

s’est présenté à mon stage pour le client The Best Key8 où le web développeur a utilisé une

icône à mauvais escient : le “burger” menu. De façon conventionnelle, cette icône traduit le

menu de navigation que nous retrouvons sur les sites version desktop9 vers les versions dites

responsives10. Principalement utilisé pour simplifier le contenu et offrir une bonne visilité aux

mobinautes, ce menu hamburger est parlant pour l’individu qui l’a intégré suivant son

expérience avec ce dernier. Il se l’est donc représenté mentalement et est donc assimilé, sur

les versions mobiles, au menu que nous retrouvons sur un site. Dans notre exemple, nous

voyons que ce menu hamburger est utilisé sur la version desktop, et non pas pour le menu,

mais pour l’identification11 . Lorsque nous basculons vers les interfaces mobiles, nous

retrouvons ce menu hamburger mais, l’identification est quant-à elle représentée par trois

écrous (non représentatifs également, pour se faire il aurait fallu représenter cela via l’icône

représentant une personne par exemple). Cela pose des problèmes d’interprétation et de

désorientation du modèle mental que se font les usagers de certaines pratiques propres au

web. Ce faisant, cela perturbe la lecture et la navigation sur le site victime de cela.

Evoquée précédemment, l’utilisabilité consiste à simplifier, faciliter l’usage d’un site

internet afin de le rendre accessible au plus grand nombre (c’est, d’ailleurs, souvent un point

auquel il faut répondre pour le client afin que son site est l’impacts souhaité). Selon la norme

ISO, l’utilisabilité est “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 donné”. Il convient ainsi de penser “l’expérience utilisateur”12 et le

msodèle de Mahlke intègre ces différents aspects qui découlent de cette relation. Ce modèle,

de 2008, inclue trois facteurs qui composent cette interaction homme-machine et “influencent

la façon dont les utilisateurs perçoivent les produits interactifs”13 :

-­‐ les propriétés du système : fonctionnalités, propriétés de l’interface et/ou les

dialogues.

                                                                                                               8 Portail immobilier en ligne, constructions & programmes neufs. 9 Ecran de l’ordinateur. 10 Smartphone et tablette. 11 Annexe 1 & 1 bis. 12 Expression utilisée pour la première fois par Norman dans les années 1990. 13 Méthodes de design UX, 30 méthodes fondamentales pour concevoir et évaluer les systèmes interactifs, C.Lallemand – G.Gronier

Page 21: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  21  

-­‐ les caractéristiques de l’utilisateur : attentes, besoins, motivations, valeurs,

connaissances de la cible.

-­‐ les paramètres du contexte : la situation dans laquelle le système est manipulé.

Cette approche inclue donc l’usager dans cette IHM qui reste l’acteur décisif à prendre en

compte afin de rendre son expérience agréable et, surtout, pour le faire adhérer au site, à la

marque et aux valeurs qui en émanent. Autrement dit, “écrire des contenus pour le web, c’est

d’abord penser aux conditions de leur réception par un destinataire”.

Penser ce travail ergonomique et l’usabilité relève d’une certaine logique de conception que

devra relever le web designer pour imaginer l’organisation du site internet futur. Pour

intégrer ces différentes étapes, certaines réunions de validation seront à établir entre

l’agence et le client afin que ce dernier confirme ou non cela. Pour ce faire, différentes

maquettes seront créées par le web designer pour aider le client à se projetter.

B. Web designer : le travail en amont pour penser l’interface homme-machine (IHM).

Souvent inconnu ou jugé non nécessaire au sein d’une agence, le métier de web designer

reste pourtant efficace et majeur dans la conception d’un site web. Il est aujourd’hui

primordial qu’un site internet réponde au besoin urgent de communication. Pour parfaire cela

il existe des méthodes propres au web 2.0 que les agences de communication/web se doivent

de maitriser à l’aide du respect des normes web, des meilleures pratiques mais également en

terme d’attractivité pour positionner et démarquer le site web. C’est principalement dès les

années 90 et, plus tard, au sein du web 2.0, que débuta l’ère de la facilité d’utilisation. C’est

de cette phase que sont nées les expressions “interface homme-machine” (IHM) ou “interface

personne-système” (IPS) qui ont apporté des considérations pour la conception de sites

internet. Et c’est principalement le rôle même du web designer de penser ce lien qui découlera

du dispositif conçu avec et pour l’internaute. Pour penser cela, sa responsabilité réside dans le

fait de penser l’interface, de l’imaginer et de la concevoir en répondant aux besoins et attentes

du client mais surtout, lors de la mise en ligne du site, des internautes qui seront la cible. En

ce sens, il s’agit d’orienter une des problématiques qui se pose au web designer de la sorte :

“quelle place on va attribuer à l’internaute dans le site, quelles expériences on va lui offrir, ce

Page 22: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  22  

que l’on va lui proposer comme promesse de navigation, comme possibilités d’actions, de

réalisations”14.

Dans le cadre de mon mémoire de stage, le plus important à évoquer reste les étapes de

maquettages (croquis et maquettes) qui précèdent la conception en elle-même du site internet.

Ce sont ces étapes que nous avons d’ailleurs abordé lors du semestre 1 permettant de rendre

compte, à travers des schémas plus ou moins élaborés, du souhait du client. A travers mon

stage une tâche m’a été confiée : la refonte totale du site www.thedogcampany.lu15. Cela

comprennait la création du logo, de la charte graphique et du site (adapté sur mobiles et

tablettes). Pour mener à bien et au mieux cette tâche j’ai donc conçu les étapes précédemment

citées jusqu’à ce que mon maitre de stage me demande d’arrêter mes productions, jugeant

cela inutile, trop long et trop coûteux pour eux (c’est pour cela que je n’ai pas conçu les

maquettes responsives et que seule la maquette graphique de la page d’accueil desktop est

visible). A savoir, le projet m’a été confié sans que mon maître de stage ne prévienne la

gérante du site en question, le but étant de le faire et de le lui vendre une fois terminé, j’avais

ainsi une liberté totale. Abordées par Olivier Beining lors de son cours Web Design, les

étapes judicieuses à concevoir sont :

-­‐ La conception de l’arborescence16 : élaboration du menu principalement et donc du

choix de navigation proposé à l’internaute. Il doit tenir compte de la règle des trois

clics et également d’avoir, au maximum, trois niveaux de menu afin de respecter

l’ergonomie minimale.

-­‐ Les zonings17 : qui représenteront les zones de l’interface en reflétant de façon

schématique les grandes zones qui vont accueillir le contenu.

-­‐ Les wireframes18 : cette étape s’élabore au vrai format, la taille des éléments seront

représentées telles quelles à l’écran. Il n’y a aucun élément graphique, ce sont

uniquement des carrés, des rectangles et du texte.

-­‐ Les maquettes graphiques19 : visuels de ce que sera le site d’accueil avec les couleurs,

les polices et les images.

                                                                                                               14 Penser le webdesign, modèle sémiotiques pour les projets multimédias, N.Pignier – B.Drouillat 15 Toiletteur pour chats et chiens au Luxembourg 16 Annexe 2 17 Annexe 3 18 Annexe 4 19 Annexe 5  

Page 23: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  23  

Ces échelons sont à expliquer et à montrer au client afin de les faire valider ou non. Dans mon

cas précis je n’avais pas cela à faire puisque la refonte du site était à faire sans “l’accord” du

prospect. Cela l’aurait pourtant aidé à visualiser ce que serait son site. De façon plus générale,

comme ces schémas sont représentés à l’aide de logiciels (principalement Illustrator et

Photoshop) “il est bien plus facile et économique de corriger et modifier une maquette que de

corriger les lignes de code d’un système fonctionnel”20. A cela, les auteurs rajouent que “plus

une erreur est détectée et corrigée tôt dans le processus et moins cela coûte cher”. Le rôle du

web designer permet ainsi de gagner du temps, de limiter les risques d’echec et

d’accompagner le client tout au long de son projet. En ce sens, c’est le web designer qui

imagine et “dessine” le site, son originalité et sa créativité sont primordiales pour le site en

lui-même.

Toutes ces étapes de conception ne sont donc pas réalisables dans l’agence Business

Casanova soutenant que cela n’est pas nécessaire pour réaliser un site et que c’est une perte de

temps et donc d’argent. Cependant, un contre-exemple est venu prouver que ces étapes de

maquettage sont importantes : le web developpeur a malencontreusement supprimé le site

internet The Dog Company alors que ce dernier était terminé. Il était impossible pour lui

récupérer la dernière version du site, seul le menu était encore accessible. Résultat, il a fallu

tout refaire et sans l’aide des maquettes précédemment construites cela aurait donc doublé,

voire triplé le temps de travail de la refonte du site. A nouveau, ils jugeaient que cela n’était

pas un argument suffisant et valable pour les convaincre que le métier de web développeur est

bénéfique.

La satisfaction du client est primordiale tout au long du processus mais il faut avant tout

séduire le futur internaute qui devra accéder le plus rapidemment possible à sa recherche

tout en le captivant à travers le design. En somme, il faut l’inciter, l’entraîner et l’inclure

dans son parcours.

C. Le design persuasif, une clef pour séduire et satisfaire ?

Une des tâches du web designer consigne à intégrer l’usager futur au site internet qui

sera créé. Pour considérer cet internaute, le persuasive design consiste à influencer son

                                                                                                               20  Penser le webdesign, modèle sémiotiques pour les projets multimédias, N.Pignier – B.Drouillat  

Page 24: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  24  

comportement de sorte à ce qu’il adopte la position attendue et qui ressort du dispositif.

Nous le disions précédemment, il faut mettre l’accent sur la rapidité et la simplicité mais

en plus de cela il faut miser sur l’intégration de l’usager actif. Loin d’être passif, ce

dernier doit être acteur de ses décisions et pour parfaire cela, il faut que le web designer

réussisse à susciter l’émotion à travers sa conception. Le mot clef de cette partie est donc

“incitation”, il faut réussir à engager l’usager et faire qu’en un seul clic il s’inscrive à la

newsletter par exemple, qu’il remplisse un questionnaire de satisfaction etc. Evidemment,

il faut que cet acte d’engagement lui soit bénéfique et sur un site de vente cela peut passer

par un code promotionnel à l’aide d’une pop-up21. Le simple fait que l’internaute

s’inscrive à la newsletter pour recevoir une réduction sur sa commande l’engage et le

conforte dans son acte d’achat. Cet effet de persuasion passe avant tout par la

personnalisation de l’interface afin que cette dernière soit attractive mais surtout crédible

pour rendre compte des valeurs du client et de la marque. Au même titre que des

techniques marketing, comme l’amorçage ou le pied-dans-la-porte22 par exemple, pour

faire adhérer le client au concept, un site internet se doit d’être, dans sa conception,

persuasif.

Fogg, en 2003, définissait le persuasive design comme étant “une métode de

conception des systèmes interactifs qui a pour objectif de mettre en oeuvre, au sein d’une

interface, des éléments qui incitent les utilisateurs à changer leurs attitudes ou leurs

comportements”. En outre, il faut qu’il ait le sentiment d’être actif, que son acte lui

apportera quelque chose mais, à l’inverse, que cela ait aussi un feedback positif pour le

site et le client. Pour aller plus loin dans cette approche, Nemery, Brangier et Kopp, en

2010, ont élaboré huit critères de persuasion qu’un web designer peut considérer pour

l’interface :

-­‐ Crédibilité : l’interface se doit de rassurer l’internaute et de réfléter une certaine

confiance. Comme exemple, les auteurs citent “Présenter des informations mises à

jour régulièrement”.

-­‐ Privacité : veiller au respect des données personnelles en termes de confidentialité.

Nous pouvons illustrer cela avec le code 3D secure par exemple.

                                                                                                               21 Annexe 6 (provenant du site Sarenza.com) 22 Psychologie du consommateur – pour mieux comprendre comment on vous influence, N.Guégen.  

Page 25: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  25  

-­‐ Personnalisation : phase qui consiste à séduire l’internaute en l’intégrant dans le

message. Le simple fait, lors de la connexion de l’internaute à son compte client, de

dire “bonjour X” le conforte dans cet effet de personnalisation.

-­‐ Attractivité : l’interface doit capter et attirer l’attention de l’usager. Les pop-up

illustrent parfaitement cela.

-­‐ Sollicitation : pour cela il faut intégrer le lecteur au contenu du dispositif, Amazon est

un des pionnier en suggérant et en recommandant des articles suivant les précédentes

recherches et goûts de l’internaute (en référence aux cookies principalement qui sont

fortement utilisés aujourd’hui pour recueillir des données de façon légale des

internautes afin de faire du ciblage).

-­‐ Accompagnement : il faut guider l’usager, lui donner des codes qu’il assimilera.

-­‐ Engagement : le web designer se doit, dans la conception, d’impliquer l’utilisateur en

décidant de partager le contenu sur les réseaux sociaux par exemple.

-­‐ Empire : il faut, en plus de capter l’attention de l’usager, l’influencer en insérant par

exemple un temps limite des articles gardés dans le panier. Sachant qu’il y aura un

délai, l’internaute sera plus à même de passer sa commande.

Ces huit mots-clefs sont déterminants pour rendre le dispositif le plus persuasif possible et

afin que le but premier du site soit réalisé (qu’il s’agit de la vente ou de la simple recherche

d’information). Le fait que l’internaute participe au contenu le sent “privilégier” et, dans un

sens, flaté. L’agence de communication Business Casanova, utilise cela pour montrer la

satisfaction de leurs clients envers les prospects23 qui, de ce fait, seront rassurés par ces

précédents avis. Cela est intéressant pour l’agence en elle-même puisqu’elle revendique sa

qualité et sa bonne image, mais c’est également enrichissant pour le prospect qui aura acquis

une certaine confiance envers eux. Cet exemple de design persuasive a donc pour

conséquence d’influencer les comportements des utilisateurs. Ce système de “récompense”

est réciproque puisque cela profite à la fois à la marque, à l’entreprise et au client, voire au

prospect.

Veiller à la confiance et l’intégration de l’internaute à travers du contenu dynamique et des

incitations forte à la participation sont des mesures qu’il faut penser avant la construction du

site internet afin de cerner les besoins des clients selon la visée du site internet. Ce sont des

                                                                                                               23 Annexe 7

Page 26: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  26  

options qui ne sont pas proposées directement par les templates, le web développeur devra

donc avoir recours à des extensions pour personnaliser cette interface.

2. Les atouts et les limites de l’usage des templates.

A. De la fiche de style à Wix en passant par Wordpress, quel sens ?

Du web 1.0 au web 2.0 il y a eu énormément d’évolution qui ont touché la construction

des sites pour répondre aux besoins des clients. Entre 1991 et 1999 les sites web se

focalisaient sur les sites “vitrine” en présentant les produits, en donnant des informations. Ces

versions étaient uniquement dédiées aux écrans des ordinateurs et les contenus publiés étaient

uniquement réalisables par des professionnels ayant les compétences nécessaire en HTML,

XML Java et Javascript pour, au mieux, créer des liens hypertextes et des contenus

multimédias en ligne. Du côté de l’internaute, ce dernier était passif à ce moment, il n’avait

aucun pouvoir sur le contenu. C’est après les années 2000, et principalement dès 2005, que

l’usager a été pris en considération au sein du web participatif. Ce faisant, la liberté

d’expression s’est développée notamment grâce aux blogs, aux forums et aux réseaux

sociaux. La notion de “partage” est donc primordiale et cela a été pris en compte dans la

construction des nouveaux sites internet qui, comme nous le disions dans la précédente partie,

intègrent l’usager aux contenus avec du dynamisme, du modernisme et du partage.

L’internaute devient alors consommacteur : il communique, partage, transforme et il est ainsi

déterminant pour l’avenir des entreprises qui choisissent d’avoir un site internet en guise de

communication. Le web 1.0, et plus précisemment en 1996, a fait naitre les fameuses feuilles

de style dans les documents HTML, appelées CSS, permettant ainsi de donner une mise en

forme au contenu en le rendant plus personnalisable et donc plus attractif. Lié au langage

HTML qui se compose uniquement de texte, de balises mais aussi d’attributs afin de donner

des instructions au navigateur, le CSS vient apporter des fonctionnalités de personnalisation

au texte auquel il est lié. Le langage HTML et le CSS ont évolué des dernières années en

allant de la simple page blanche composée de carrés gris à des contenus dynamiques les plus

orginaux. Cependant, pour réaliser un site en HTML et CSS il est important d’avoir des

qualifications puisque cela nécessite des compétences en terme d’adaptation (pour les version

mobiles, tablettes mais aussi pour que le site soit visualisable sur tous les moteurs de

recherche), mais également en terme de création et réalisation. Autrement dit, une personne

lambda n’ayant qu’une simple connaissance et expérience avec le web ne sera pas à même de

Page 27: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  27  

construire son propre site web avec toutes les normes qui sont liées, un professionnel en

communication web, tel qu’un web développeur avec l’aide d’un web designer, aura les

compétences pour développer cela, de même pour la maintenance de ce dernier. Ce n’est

pourtant parce que ce mode de création est le pionnier pour les sites internet qu’il est délaissé

pour autant dans notre ère contemporaine. Au contraire, cette façon de réaliser une page web

reste toujours d’actualité puisque ce langage favorise l’originalité et la liberté de création.

Face à cela nous retrouvons les CMS - ou SGC - qui constituent des logiciels et plateformes

destinés à la création de pages web tout en ne nécessitant pas autant de compétences

techniques en terme de développement pour créer son site web. Autrement dit, ils permettent

de créer facilement et rapidement du contenu à l’aide d’une interface déjà conçue, ainsi, le

back office et le front office sont faciles d’accès et les mises à jour ne nécessitent pas autant

de compétences que le langage HTML-CSS. La différence se joue au niveau de la publication

des contenus, via un CMS la mise en jour des contenus (images, textes, vidéos) se fait

indépendamment de la structure. Concernant cette dernière, elle facilite également le travail

du web développeur puisqu’il existe des thèmes prédéfinis et donc près à l’emploi dès le

téléchargement effectué. Le plus célèbre et le plus utilisé aujourd’hui est Wordpress, c’est

celui-ci qu’à choisi Business Casanova pour confectionner leurs sites internet des clients. Que

ce soit pour un site vitrine24 ou pour un e-commerce25 (avec l’extension Woo commerce),

l’agence n’a recours qu’au CMS Wordpress pour réaliser un site “rapidemment, efficacement

et à moindre coût”. Pour ces sites, ils utilisent les thèmes Divi et Modern Interior auxquels ils

rajoutent les plug-in nécessaires au bon fonctionnement des sites internet. Utiliser Wordpress

est un réel avantage pour eux en terme de rapidité et de coût. L’installation du thème nécessite

que quelques secondes et il en va de même pour les extensions suivant la visée du site. Quant

aux contenus, ils ne mettent en ligne que le minimum demandé par le client. C’est ce dernier

qui devra mettre en ligne son propre contenu avec une rapide formation du wordpress (back

office) : ajout de texte, d’une image, d’un article, d’un code promotionnel etc. L’usage

principal du thème Divi est, pour eux, le meilleur thème Wordpress puisqu’il est simple

d’utilisation, pour eux et leurs clients. Sa construction et organisation ne nécessitent donc pas

le besoin d’avoir un web designer puisque la structure est extrêmement maniable. Prônant

ainsi la rapidité, nous remarquons une certaine standardisation de leurs créations, chaque site

est construit de la même façon avec un design très similaire. Là serait donc tout l’avantage

                                                                                                               24 Annexe 8 : exemple d’une référence Business Casanova, site vitrine www.rmavocats.lu 25 Annexe 9 : exemple d’une référence Business Casanova, e-commerce www.textinova.com  

Page 28: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  28  

d’avoir un web designer pour ajouter de l’originalité, de l’innovation et de la créativité à la

structure.

Au delà du langage HTML-CSS et les CMS, il existe Wix qui est une plateforme en

ligne sous la forme “WYSIWYG” – What You See Is What You Get -. Cette technologie a

fortement évolué depuis ses derniers mois grâce à son fonctionnement intuitif, sa facilité de

création et ses nombreuses possibilités de personnalisation. Plus simple que Wordpress, Wix

ne nécessite aucune connaissance en programmation. Des modèles de page préfaits existent et

sont mis à la disposition des utilisateurs mais Wix propose également la fonction “page

blanche” où l’usager laisse libre cours à son imagination et, ce faisant, se crée un site sur

mesure. Malgré tout, cet usage reste critiqué et néfaste pour les professionnels de la

communication dans la mesure où cette revendication de la facilité d’utilisation et de création

d’un site internet via la plateforme Wix remet en cause le métier du web développeur et d’une

agence de communication/web. En suivant cette logique, un internaute lambda serait à même

de créer son propre site web sans avoir recours à une agence de communication mais il en est

tout autre. Il y a certaines normes web que cet usager ne maitrisera pas. De la sorte, son site

internet n’aura pas l’impact escompté et les professionnels, tels que les web designers dans ce

cas, seront aptes à parfaire cela : penser la navigation, la structure, le design et l’ergonomie

qu’un simple internaute ne maitrisera pas. De plus, posséder un site internet ne suffit pas

comme simple présence numérique, autour de cela gravitent les réseaux sociaux, la

communication non numérique (les flyers, les cartes de visites etc.), le référencement que

seuls les professionnels de la communication maitrisent pour que l’impact soit au plus proche

des espérances souhaitées.

L’évolution, l’expansion et la facilité de création d’un site internet sont aujourd’hui

remarquables. Les compétences techniques ne sont visiblement plus primordiales pour créer

un site internet où les templates sont maitres. Mais cet usage redondant des thèmes wordpress

et donc des layouts prédéfinis ne conduisent-ils par vers une standardisation des sites internet

?

B. Vers une standardisation des sites ?

Par “standardisation” nous entendrons un site internet dont la structure, la

construction, la navigation et le design ne diffèrent que de très peu. En outre, ce seront des

sites web courants, habituels, avec une originalité peu développée et ayant des similitudes

Page 29: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  29  

fortes. Il ne faut donc pas faire l’amalgame dans le sens où la standardisation consiste

simplement à respecter les normes prévues pour créer les sites.

D’après l’expérience que nous avons avec internet nous remarquons que ceux-ci

possèdent de nombreuses ressemblances et points communs notamment au niveau de

l’organisation de la page d’accueil contemporaine (des images en plein écran, des diaporamas,

la bannière etc.), des typographies similaires, la disposition du panier pour un e-commerce,

l’onglet recherche etc. Cette structuration repose sur un fait simple : ne pas perturber la

lecture, la navigation de l’internaute et donc l’envie de ne pas perturber ses représentations

mentales comme nous l’avions vu précédemment. Cependant, cette standardisation se reflète

également au niveau du design qui ne renvoie que très peu d’originalité. Nous sommes

conscients que le nombre de sites internet a explosé et que beaucoup d’entreprises possèdent

leur propre site internet mais au sein de la concurrence il faut savoir se démarquer et donc ne

pas miser sur cet effet de standardisation. Cette homogénéisation des pages web est la

probable conséquence de l’usage des templates qui facilitent le travail des agences de

communication au niveau de la rapidité et de la simplicité. Avoir recours aux mêmes modèles

de page pour des sites à même visée – entendons ici les sites vitrines par exemple – renforce

cette uniformité où l’aspect ne diffère que très peu : la police d’écriture et les couleurs

principalement. L’agence Business Casanova qui n’emploie que le CMS Wordpress et le

thème Divi (et plus ancien Modern Interior) pour satisfaire leurs clients prône cette similarité

entre toutes leurs créations mais se justifie sur le fait que c’est uniquement pour répondre aux

besoins exprimés par leurs clients. L’agence évoque également que cette rapidité et

immédiateté d’avoir ce produit ne peut que se traduire par un site simple et sans originalité ou

innovation apparentes. Pour illustrer cela nous pouvons simplement comparer deux sites

conçus par cette agence : www.frisingdecoration.com26 et www.hortos.lu27. Les similitudes

sont frappantes : les couleurs diffèrent que de très peu (tons beiges) il en va de même avec

l’organisation des pages (principalement de la page d’accueil : le logo à gauche, le menu à

droite, l’image de présentation et le footer avec les réseaux sociaux et coordonnées de

Business Casanova) et la composition du menu où nous retrouvons des synonymes. L’agence

revendique ce rythme de création et se justifie par le fait que le temps est important pour

satisfaire le client, à nouveau, la rapidité rime avec produit standardisé. Cette façon de faire

serait donc en totale cohésion avec “l’impatience” qu’exprimeraient leurs clients. Ainsi, en

                                                                                                               26  Annexe  10  27  Annexe  11  

Page 30: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  30  

réalisant un site internet en trois jours (comprennant le 1er contact avec le client, la création

des contenus et la mise en ligne du site) l’agence répond à la demande exaucée par le client

qui souhaite avoir son produit opérationnel rapidement.

Un autre point propre aux valeurs de cette agence est notable, lors du premier rendez-

vous avec le client il lui ait demandé quelles sont ses attentes et s’il a déjà des idées en terme

de design et d’organisation du site. Le commercial propose alors d’analyser ce qui existe déjà

sur le marché de son client et réalise ainsi une étude benchmarking rapide. En visualisant les

leaders, le client choisit le site internet qu’il juge être le mieux et celui sur lequel il souhaite

que le web développeur se base pour le design et l’organisation. Chez Business Casanova, le

benchmarking consite alors à s’inspirer, à imiter le concurrent. Lors de mon stage j’ai constaté

cela avec le client www.tommysbox.lu pour lequel j’ai réalisé les photographies qui seront

présentes sur le site. Le principe est simple : imiter les contenus du site

www.pandaexpress.com qui est leur principal concurrent et leader. À la demande de mon

maitre de stage et de la cliente j’ai donc tenté de repoduire au mieux le style de photographies

des concurrents. Cela va au delà de la simple image de présentation, les codes graphiques sont

très similaires et l’appellation du menu ne diffère que très peu (des mises à jour ont cependant

été faites depuis, le site n’est à ce jour pas encore terminé).

Ce besoin de répondre au client en réalisant un site internet dans un temps retreint ne

peut pas rimer avec exclusivité : le web développeur grâce à son expérience avec le thème

utilisé sur le CMS va réaliser une certaine redondance dans la construction. Cette répétition

pourrait être évitée grâce au travail fournit par le web designer qui est pourvu d’originalité

pour justement concevoir cette différence entre les sites internet. Cependant, le travail du web

designer exige quelques heures de travail qui varient selon le projet et certaines agences, telle

que Business Casanova, estiment que c’est du temps perdu et que le web développeur peut

englober cette tâche dans son travail. Or, web designer et web développeur sont des métiers

qui se complètent parfaitement : le web développeur applique le travail de son collègue du

côté technique et c’est du temps gagné dans sa propre tâche puisque cela demanderait moins

de réfléxion comme le travail en amont (les étapes de maquettages) aurait été effectué par le

web designer. Ces étapes de création ne sont donc pas néfastes pour une agence, bien au

contraire, le web designer grâce à ses compétences et son inventivité redorerait l’image de

celle-ci grâce à des sites uniques et créatifs. C’est donc son travail qui participe à ne pas

standardiser les sites internet : une navigation et un concept original. Du côté du

benchmarking, cela reste une étape fondamentale dans la conception d’un site internet

puisqu’il s’agit d’analyser le marché, de cerner les erreurs des concurrents afin de ne pas les

Page 31: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  31  

reproduire par exemple. Cependant, trop se rapprocher du modèle de celui-ci peut s’avérer

être “déloyal” et, à nouveau, le travail du web designer consiste à innover, à se rapprocher de

la demande en apportant sa touche personnelle et sans s’inspirer profondément des contenus

déjà existants.

S’inspirer des adversaires et avoir recours à des gabarits de page renforce cette

standardisation des internet. La créativité et l’innovation ne sont donc pas privilégié pour

répondre à ce besoin de rapide de mise en fonction du site internet. Parfois, c’est ce manque

de temps qui réduit l’agence à proposer des sites internet minimalistes et très similaires aux

concurrents pour répondre tout simplement à l’envie des clients.

C. Avant tout une envie des clients : une logique d’adaptation.

Nous l’évoquions succinctement précédemment, le client est un acteur décisif au sein du

projet. De fait, c’est premièrement celui qui apporte le projet à l’agence et qui paiera celle-ci.

Dans un second temps, c’est celui qui sera le juge du travail fait : respect du cahier des

charges, des délais, des envies etc. C’est le décisionnaire et celui qu’il faudra convaincre tout

au long de la conception : du premier rendez-vous qui conclut l’achat jusqu’à la mise en ligne

sur le serveur du site opérationnel. C’est seul ou avec l’aide du chef de projet que sera établi

le cahier des charges utile pour l’ensemble de l’équipe d’une agence : les délais, le budget, les

envies exprimées etc. Des étapes de validation sont mises au point afin que le client confirme

ou non le travail déjà opéré, auquel cas les métiers engagés pourront apporter des

modifications si besoin est. Dans l’élaboration d’un site internet, le client pourra donc prendre

soin de valider, ou non, les différentes étapes de maquettage (en partant de l’arborescence

jusqu’à la maquette graphique) et cela s’avèrera être un gain de temps pour l’entreprise. Il est

bien plus simple de modifier un document Illustrator ou Photoshop qu’une feuille de style ou

la structure d’un template. Ces étapes servent également de support de visualisation où le

client pourra donner son avis et discuter de certains points avec les professionnels. Disposer

de tels visuels le met en situation et l’aide à se projetter sans pour autant que les modifications

apportées ait un quelconque impact sur la réalité. L’ensemble de l’équipe doit alors prendre

en considération le cahier des charges et effectuer des réunions dites de validation pour que le

travail gravit des échelons. Chez Business Casanova le cahier des charges n’est constitué et

restitué aux équipiers qu’oralement sans qu’il y ait des étapes de validation déterminées. Ce

n’est qu’une fois le produit terminé que le client aura une idée du projet puisqu’il sera achevé.

Page 32: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  32  

Dans cette façon de faire il y aura quasiment toujours des modifications à établir sur le projet,

ici un site internet, et donc du temps de perdu. Le but de toute conception est donc de séduire

le client afin qu’il valide cela, ainsi, il ne faut pas le négliger.

Cependant, dans la plupart des cas, le client est novice dans le domaine du numérique

et plus particulièrement des sites internet puisqu’il ne dispose que d’une expérience et

approche partielle avec ce monde. Parfois exigeant, parfois compréhensif, il faut tout de

même répondre à sa demande tout en étant raisonnable et en proposant des choses cohérentes

et faisables avec le web en veillant au respect du budget et du délai.

Cette relation client est également importante sur le long terme pour une agence de

communication puisque chaque projet réalisé constituera des bases solides pour compléter les

références de l’agence. De ce fait, le client contribue au développement de l’entreprise en

terme d’image, d’éfficacité et de confiance. Pour contribuer à cette image valorisante les

agences de communication telle que Business Casanova proposent d’assurer un suivi lorsque

le produit est terminé, cela comprend la création des réseaux sociaux (et des contenus publiés

sur ceux-ci), des campagnes e-mailing, des mises à jour au niveau des photographies, Google

Adsense28 et Google Adwords29. Apporter ce suivi en guise de “service après vente” maintient

ce contact avec le client qui, rappelons le, est, dans la plupart des cas, novice et ne maitrise

pas ces outils. Proposant également des formations pour que le client puisse mettre le

minimum de contenu à jour sur sa page, cela contribue à renforcer l’image de l’entreprise et à

maintenir le contact avec les clients. Etant toujours à disposition des clients si un éventuel

problème venait à arriver, Business Casanova rempli donc son contrat : être présent en cas de

problème.

Le maintien de ce lien et de cette confiance avec les clients est primordial pour une agence de

communication/web. Cela fonctionne évidemment dans les deux sens : pour le client qui est

conforté dans son choix de l’agence pour créer sa communication numérique et pour l’agence

en elle-même en terme de notoriété principalement mais aussi concernant le chiffre d’affaire

et les relations.

                                                                                                               28 Google Adsense : “programme de monétisation proposé par Google aux éditeurs de sites web pour générer des revenus publicitaires à la performance.” – www.definitions-marketing.com 29 Google Adwords : “propose aux annonceurs la diffusion d’annonces liées aux mots clés utilisés dans les requêtes.” – www.definitions-marketing.com  

Page 33: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  33  

Conclusion.

Notre époque contemporaine met à disposition de nombreux outils pour faciliter le

travail et réaliser les souhaits exprimés pour les agences de communication/web, pour les

clients et également pour les internautes lambda. Cette diversité d’outils permet de développer

un site internet rapidemment et accessible techniquement par tous. Malgré tout, certaines

normes sont à respecter pour veiller au mieux à la navigation des internautes et c’est ce à quoi

doit veiller un web designer. Cette multitude de sites internet risque de créer un flux

incalculable de contenus accessibles par tous, c’est là toute la problématique du numérique

aujourd’hui. Il faut satisfaire le client et le positionner au mieux sur le marché du web afin

qu’il se démarque de ses concurrents et que son site internet soit bénéfique pour sa marque.

Innover est un mot clef dont doit tenir compte le web designer lors de la conception des

graphiques du site internet, l’originalité et la créativité sont également maître pour créer un

impact sur la toile et satisfaire le client, mais avant tout, les internautes en quête

d’informations. Ce risque de tomber dans la banalisation des contenus et du design est néfaste

pour les clients mais aussi pour les agences en terme de notoriété et d’image. La finalité du

site internet pour un client est de lui apporter une visibilité et susciter des ventes, si ce n’est

pas le cas, la conception n’aura pas l’effet escompté et l’agence de communication n’aura pas

totalement rempli sa mission. Un point essentiel pour éviter cette redondance consiste en

l’originalité incluant une navigation, un design et une organisation qui sortent de l’ordinaire

tout en restant simple afin de ne pas perturber l’internaute.

De façon plus précise et personnelle, ce stage a débuté sur un mal entendu. Mon

maitre de stage ne connaissait pas directement le métier et donc les tâches du web designer,

pourtant cela était clairement noté sur le titre de mon curriculum vitae. Pour l’agence

Business Casanova, le web design était synonyme de graphisme. Bien évidemment le web

design englobe quelques notions de graphisme mais cela ne doit pas être sa mission

principale. Je me suis vue refuser certaines tâches jugeant que cela n’était pas néccesaire (cf :

la conception du site www.thedogcompany.lu pour lequel je n’ai pas pu terminer toutes les

maquettes notamment versions mobiles et tablettes et quelques pages pour la version

desktop). Comme il s’agissait d’une petite structure, la polyvalence était donc à prévoir et

c’est pourquoi j’ai donc pu bénéficier de l’apprentissage d’autres notions qui n’étaient pas

convenues lors de mon entretien : community management, photographie, newsletters etc.

Page 34: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  34  

Cela était un réel point positif puisque j’ai acquéri une expérience et pu développer des

compétences à ces différents niveaux.

Pour rappel, l’entreprise d’accueil prône la rapidité et les sites internet simples pour satisfaire

leurs clients. L’étape de web design n’est donc, selon eux, pas nécessaire pour concevoir un

site internet selon les souhaits du client. Grâce à mon expérience, mes envies de créativité et

d’originalité dans la communication en générale ainsi que les cours reçus tout au long de ma

scolarité à la faculté j’étais donc en mesure de traiter le sujet de mon mémoire de stage

“Penser l’ergonomie et l’expérience utilisateur d’un site internet : l’art du web designer”.

Mon point de vue sur la communication vient également approfondir cela puisque je suis

convaincue que pour se démarquer aujourd’hui il faut faire preuve d’originalité qu’il s’agisse

d’une simple présence sur le web pour présenter son entreprise ou bien encore pour vendre

des produits sur un e-commerce. Mon travail de mémoire portera justement sur ce point

qu’est l’originalité à travers la communication avec la définition de l’originalité en elle-

même, certaines pratiques utilisées par des agences créatives puis les impacts que ces

campagnes ont sur le comportement des individus. Ce projet a été accentué lors de mon

précédent stage en licence 3 chez Mescudi dont les valeurs sont les suivantes : créativité,

originalité et innovation. Les idées les plus folles sont tentées par cette agence dynamique qui

part du principe qu’il faut oser pour se démarquer aujourd’hui dans la communication et la

publicité de façon générale.

Concernant les compétences développées au sein de mes deux stages, je dirai que celles-ci ont

été complémentaires du point de vue du métier envisagé après mon master. Comme

mentionné dans la première partie de ce rapport, je souhaite devenir chef de projet spécialisé

web designer et, à ce jour, je n’ai encore pas eu de réelle expérience et acquis en tant que chef

de projet junior par exemple. Je n’ai été qu’actrice lors de mon stage chez Mescudi en

assistant aux réunions avec les clients et en observant le rôle de mon maître de stage qui était

chef de projet et à la fois graphiste et web développeur selon les projets proposés. A nouveau,

la polyvalence régnait et au sein d’une petite structure je suis persuadée que l’entraide et

l’écoute peuvent mener à bien un projet où chacun fait part de son avis pour agrémenter le

produit final (que ce soit un flyer ou un site internet par exemple). Ma mission principale chez

Mescudi consistait à être graphiste (création de l’identité de l’entreprise principalement),

quant à chez Business Casanova j’ai été d’autant plus polyvalente puisque community

manager, photographe et web développeur. Ce sont ses divers acquis et notions maitrisées qui

renforce mon envie de devenir chef de projet spécialisé web designer au sein d’une petite

structure où le travail fournit par chacun participera à la satisfaction du client.

Page 35: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  35  

En master 2, ma recherche de stage sera donc plus orientée vers des agences de

communication/web créative qui nécessitent et prendront en compte le travail d’un web

designer dans lesquelles je serai susceptible d’envisager mon avenir professionnel. Malgré

tout, je suis ouverte et être polyvalente sera un avantage au sein du travail en équipe et je serai

donc ouverte à toute proposition concernant un rôle dans une agence de communication/web.

Page 36: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  36  

Références.

Ouvrages

Guégen N., 2011, Psychologie du consommateur pour mieux comprendre comment on vous

influence, Paris, Éd. Dunod.

Lallemand C., Gronier G., 2015, Méthodes de design UX. 30 méthodes fondamentales pour

concevoir et évaluer les systèmes interactifs, Paris, Éd. Eyrolles.

Pignier N., Drouillat B., 2004, Penser le web design. Modèles sémiotiques pour les projets

multimédias, Paris, Éd. L’Harmattan.

Articles scientifiques

Chevalier A., et al, 2009, « Entre contraintes ergonomiques, créativité et esthétique : rôle d’un

système à la base de connaissances sur l’activité des concepteurs web », Le travail humain,

72.

Peraya D., 2012, « Quel impact les technologies ont-elles sur la production et la diffusion des

connaissances ? », Question de communication, 21, pp. 89-106.

Mémoire de recherche

Bourazza M., 2015, L’influence du minimalisme graphique dans le webdesign sur

l’expérience utilisateur, Mémoire en information et communication, Université de Lorraine.

Page 37: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  37  

Remerciements.

Premièrement je tiens à remercier l’agence Business Casanova pour m’avoir accueillie

pendant deux mois et qui a dû faire face à certains aménagements pour moi. Plus

particulièrement je remercie Rudolphe Aben et Emilien Jourdan pour le temps qu’ils m’ont

consacré et les missions qu’ils m’ont confié en toute confiance.

Je remercie notamment les clients de Business Casanova pour leur gentilesse, leurs

compliments, leurs projets et leur confiance envers moi. En particulier je remercie Neves

Barros (du site www.textinova.com) pour sa patience et les différentes missions qu’elle m’a

confié pour que je mêne à bien mon stage et développe certaines compétences : graphisme,

réseaux sociaux et newsletter.

J’adresse mes remerciements à monsieur Luc Massou et Pierre Morelli pour leur aide

et le temps qu’ils m’ont consacré avant et pendant le stage pour parfaire ce mémoire de stage

notamment des pistes de lecture, des validations et reformulations des certains contenus. Je

remercie aussi Sébastien Albert pour sa patience concernant la validation et la recherche de

stage mais aussi pour le temps consacré à joindre mon maitre de stage pour éclaircir certains

points.

De façon plus générale je remercie l’ensemble de mes professeurs et intervenants qui

m’ont transmis leurs savoirs pendant ces trois années de lience et cette première année de

master. Je remercie Olivier Beining, du cour de Web Design, pour son apport et sa découverte

du métier de web designer, sans lui je ne pense pas que j’aurais orienté ce rapport de stage

problématisé sur ce sujet.

Pour résumer et terminer ces quatre années d’études, j’espère vivement intégrer la

dernière année de master et être diplomée de l’Université de Lorraine en vu de poursuivre

mon projet en tant que future chef de projet spécialisé web designer.

Page 38: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  38  

Annexes.

Annexe 1 : site version desktop www.thebestkey.com

Annexe 1 bis: site version mobile www.thebestkey.com

Page 39: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  39  

Annexe 2 : arborescence www.thedogcompany.lu

Annexe 3 : Zonings www.thedogcompany.lu

Zoning  1  page  d'accueil Zoning  2  page  "toilettage  &  tarifs"

Page 40: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  40  

Zoning  4  page  "les  promenades" Zoning  3  page  "boutique"

Zoning  5  page  "contact"

Page 41: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  41  

Annexe 4 : Wireframes www.thedogcompany.lu

 Wireframe  1  page  d'accueil  

Page 42: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  42  

 Wireframe  2  page  "toilettage  &  tarifs"

Page 43: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  43  

 Wireframe  3  page  "les  promenades"

Page 44: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  44  

 

Wireframe  4  page  "boutique"

Page 45: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  45  

 Wireframe  5  page  "contact"

Page 46: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  46  

Annexe 4 : Maquette graphique www.thedogcompany.lu

 Maquette  graphique  1  page  d'accueil

Page 47: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  47  

Annexe 6 : Pop-up site www.sarenza.com

Annexe 7 : Testimonials du site www.business-casanova.com

Page 48: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  48  

Annexe 8 : site vitrine www.rmavocats.lu

Annexe 9 : e-commerce www.textinova.lu

Page 49: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  49  

Annexe 10 : www.frisingdecoration.com

Annexe 11: www.hortos.lu

Page 50: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  50  

Nom de l’étudiant : Camille  Perazzi  [email protected]    Titre  du  rapport  :  Penser l’ergonomie & l’expérience utilisateur d’un site internet : l’art du web designer.  Coordonnées  complètes  de  l’entreprise  :  Business  Casanova  17,  rue  de  Mondorf  L-­‐2159  Bonnevoie  LUXEMBOURG  tél.  00352  27  86  04  07  fax  00352  24  61  12  78  www.business-­‐casanova.com    Secteur  d’activité  de  l’entreprise  :  Communication  numérique    Nom,  fonction  et  coordonnées  du  tuteur  professionnel  :  Rudolphe  Aben,  directeur  d’agence  et  commercial  Tél.  00352  69  12  00  452  rudolphe@business-­‐casanova.com    Tuteur  universitaire  :  Nom  :  Sébasten  Albert  Mail  :  sebastien.albert@univ-­‐lorraine.fr      Type  de  fonction  exercée  dans  l’entreprise  :  Photographe,  community  manager,  web  développeur.    Activité  principale  réalisée    durant  le  stage  :  (10  lignes  maxi)  Réalisation  de  photographies  destinées  à  enrichir  les  sites  internet.  Créations  et  refonte  d’un  site  internet  pour  un  toiletteur  Luxembourgeois.  Animation  des  réseaux  sociaux  des  clients  de  l’agence  +  créations  de  visuels  pour  des  concours.    Métier  visé  :  Chef  de  projet  spécialisé  web  designer.    Durée  du  stage  :  2  mois    Date  de  stage  :  du  04.04.2016      au  01.06.2016    Note  obtenue  :  /      

Page 51: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  51  

Page 52: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  52  

Page 53: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  53  

Page 54: Rapport problématisé de stage : penser l'ergonomie et l'expérience utilisateur d'un site web : l'art du web designer

  54