# L'expérience-utilisateur dans la conception des produits digitaux : "The safe city" comme exemple

Moâtaz Fatnassi

► To cite this version:

Moâtaz Fatnassi. L'expérience-utilisateur dans la conception des produits digitaux: "The safe city" comme exemple. Le Design Art de la conception et de la médiation, EDTIONS SOTUMEDIAS, pp.369-381, 2024, 978-9938-61-077-2. hal-05005702

HAL Id: hal-05005702

https://hal.science/hal-05005702v1

Submitted on 25 Mar 2025

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_1.png" /></figure>
# L'expérience-utilisateur dans la conception des produits digitaux : “The safe city” comme exemple

FATNASSI Moâtaz

Université de Monastir, Tunisie

## Résumé

Cet article explore l'importance de l'expérience utilisateur (UX) dans la conception de produits digitaux, en s'appuyant sur le projet "The Safe City" mené par la JCI de Sidi Hassine. L'UX, définie comme l'ensemble des interactions entre l'utilisateur et un produit, est devenue centrale pour répondre aux besoins des usagers. Le projet inclut un site web et une application Android, conçus via une approche participative impliquant brainstorming, personas et maquettes. Les étapes clés de l'UX, comme l'exploration des besoins, l'idéation, le prototypage et le test, sont détaillées. L'article souligne que l'empathie envers l'utilisateur est cruciale pour une expérience optimale, transformant ainsi la conception digitale.

**Les mots clés** : expérience utilisateur (UX), Conception digitale, The Safe City, Design Thinking, Approche participative, Interface utilisateur (UI), Prototypage interactif.

## Abstract

This article examines the role of user experience (UX) in designing digital products, using "The Safe City" project by JCI Sidi Hassine as a case study. UX, encompassing all user interactions with a product, has become essential for meeting user needs. The project involves a website and an Android app, developed through a participatory approach with brainstorming, personas, and prototyping. Key UX stages—needs exploration, ideation, prototyping, and testing—are outlined. The study highlights empathy as critical for optimal user experience, revolutionizing digital design.

## I- introduction

Depuis quelques années, l'attrait pour les biens matériels recule pour laisser place aux demandes et aux désirs de vivre des expériences. Thomas Gilovich<fnref n="1" />, affirme que « nos expériences sont une part plus importante de nous que les choses que nous possédons. [...]

<footnote n="1">¹ C'est un professeur de psychologie à Cornell University</footnote>
Vous pouvez être attaché à des objets mais ils restent distincts de vous. À l'inverse, nos expériences font vraiment partie de nous<fnref n="2" />». la demande à l'expérience trouve écho dans les nouvelles orientations de positionnement stratégique des marques et des entreprises. Auparavant, le produit était au centre de leurs préoccupations, désormais, tous cherchent à concevoir et à offrir une expérience unique et inoubliable à leurs clients-utilisateurs respectifs.

Parmi les secteurs qui vivent un changement radical après avoir adopté l'expérience en tant qu'élément de démarcation concurrentielle et de satisfaction clientèle est celui de la production digitale. Aujourd'hui, toutes les sociétés travaillant dans ce domaine exploitent l'expérience utilisateur (UX) pour concevoir et développer leurs produits. Ainsi, dans cette présente communication, nous allons se référer à un projet associatif concret pour parler de l'UX et de ses spécificités au niveau de la conception et de la création digitale.

Nous allons commencer par la présentation de la démarche de l'expérience utilisateur d'une manière générale et spécifiquement dans le secteur digital. Après, nous présenterons le projet « The Safe City » qui sera le cadre dans lequel nous allons appliquer l'UX. Au final, nous développerons les étapes que nous avons suivies pour expérimenter cette nouvelle approche.

# II- l'expérience utilisateur (UX)

## 1- définition

L'UX– User Experience– est un terme anglo-saxon, traduit par l'expérience utilisateur. En tant que terme, l'UX est apparu dans les années 90 grâce à Donald Norman<fnref n="3" />, mais en tant qu'une spécialité du design (UX Design) il n'a vu le jour qu'au début des années 2000 avec l'expansion de l'exploitation de la démarche du Design Thinking<fnref n="4" />.

Pour Donald Norman, l'expérience utilisateur « englobe tous les aspects de l'interaction entre l'utilisateur final et l'entreprise, ses services et ses produits ». Toutefois, Il existe plusieurs autres définitions de l'expérience utilisateur qui diffèrent de celle proposée par Norman et qui proviennent de domaines et de spécialités différentes, Par exemple, l'Institut de l'Architecture de l'Information définit l'UX en tant qu'une « conception structurelle des

<footnote n="2">² T. Gilovich. « The Science of Why You Should Spend your Monet on Experiences, Not Things », Fatscoexist.com, 30 mars 2015, https://www.fastcoexist.com/3043858/world-changing-ideas/the-science-of-why-you-should-spend-your-money-on-experiences-not-thing</footnote>

<footnote n="3">³ Donald Norman est aujourd'hui directeur du Design Lab à l'Université de Californie.</footnote>

<footnote n="4">⁴Tim Brown, L'esprit design : Comment le design thinking transforme l'entreprise et inspire l'innovation</footnote>
environnements informationnels partagés, l'art et la science d'organiser et d'indexer des sites Internet, des communautés en ligne, des intranets et des logiciels pour en faciliter l'utilisation et la "trouvabilité". Une communauté de pratique émergente qui se concentre sur les principes du design et de l'architecture adaptés au paysage numérique <fnref n="5" />», alors que L'Association Professionnelle de l'Expérience Utilisateur<fnref n="6" /> (en anglais : User Experience Professional Association) définit l'UX comme suit : « Chaque aspect de l'interaction de l'utilisateur avec un produit, un service ou une entreprise qui constitue les perceptions de l'utilisateur de l'ensemble. La conception de l'expérience utilisateur en tant que discipline concerne tous les éléments qui composent cette interface, y compris la mise en page, la conception visuelle, le texte, la marque, le son et l'interaction. L'UE travaille à coordonner ces éléments pour permettre la meilleure interaction possible des utilisateurs<fnref n="7" /> ». Malgré la différence qui peut apparaître dans les deux définitions, l'orientation principale ou l'approche adoptée sont les mêmes dans les deux cas, leurs centres d'intérêts convergent vers l'utilisateur et la manière qu'avec laquelle il va exploiter le produit.

L'expérience utilisateur est une méthode de conception ou de résolution de problème où le concepteur se focalise essentiellement sur les usagers ou les utilisateurs. Dès le départ de son travail, il cherche, avec des multiples moyens et techniques de comprendre les aspirations, les attentes, les coutumes et les craintes du potentiel utilisateur. Ces mêmes préoccupations vont accompagner le concepteur tout au long de la création du produit. L'objectif derrière ce processus conceptuel spécifique est d'optimiser la qualité de l'expérience vécue par l'utilisateur dans toute situation d'interaction avec le produit.

On note, que l'expérience utilisateur est considérablement exploitée dans le domaine digital. Toutefois, elle est toujours applicable dans des divers secteurs, autre que ce dernier. L'expérience utilisateur n'est pas un moyen ou un outil technique qui peut être opérationnel dans son espace utilitaire et obsolète dans d'autres circonstances. Mais plutôt c'est une approche et une démarche qui s'applique sur l'ensemble des projets qui cherchent à concevoir un produit.

<footnote n="5">⁵ SURCIN, Delphine. L'Expérience Utilisateur (UX), les professionnels de l'information et la réalité du terrain [en ligne]. Mémoire de Master. Ingénierie Documentaire. Toulouse : Ecole Management et Société, 2015 [consulté le 20/02/2021].</footnote>

<footnote n="6">⁶ Site officiel de l'association : https://uxpa.org/</footnote>

<footnote n="7">⁷ Association des professionnels de l'expérience utilisateur. Définitions de l'expérience utilisateur et de la convivialité [En ligne]. 2014 [consulté le 21/02/2018]. Disponible sur le Web : https://uxpa.org/resources/definitions-user-experience-and-usability</footnote>
## 2- l'UX et l'interface digitale

Comme nous avons déjà mentionné, l'UX est largement exploitée dans le domaine digital. Il réfère à l'étude et à l'analyse des attentes et des besoins des usagers pour la conception et la création des applications mobiles et des sites web. L'objectif principal du designer UX est de concevoir une navigation plus fluide et optimale que possible tout en considérant l'aspect émotionnel de l'utilisateur.

Pour concevoir un site web, l'expert en UX, Magnus Revang résumait l'expérience utilisateur à 6 étapes :

1. Un site facile à trouver

2. Un site accessible sur tous supports

3. Un design attrayant

4. Une facilité d'utilisation

5. Un site crédible

6. Un site efficace et propre

Les moyens et les techniques utilisés pour récolter toutes les informations indispensables à l'application de ces étapes sont nombreux, parmi eux, nous citons les Personas, la carte d'empathie, le brainstorming, le Roadmap, le Modboard, etc. la similitude que nous pouvons remarquer entre ces moyens et ceux utilisés dans l'application du Design Thinking est due simplement au fait que l'UX suit les mêmes étapes prédéfinies dans la méthode du design thinking.

Lors de la conception d'un support digital, il y a souvent une confusion entre l'expérience utilisateur (UX) et l'interface utilisateur (UI), or les deux spécialités sont différentes. Si le rôle d'un designer UX consiste à répondre pleinement aux besoins des utilisateurs et de leur fournir la meilleure expérience utilisateur possible, celui du designer UI prend un aspect plutôt technique puisque sa mission consiste à exploiter les règles et les méthodes dédiées à l'ergonomie d'interface digitale pour concevoir et positionner les éléments graphiques et textuels sur une interface précise (application par exemple). Ainsi son objectif est de faciliter la navigation des utilisateurs en leur offrant des éléments ergonomiques intuitifs, utiles et pratiques. Ceci dit, les deux spécialités restent indissociables et complémentaires à l'instar des deux parties d'un iceberg. L'UX présente la partie invisible concentrant ainsi sur l'aspect émotionnel et psychologique de l'expérience des utilisateurs, alors que l'UI présente la partie visible qui compose les éléments ergonomiques et pratiques servant à la création d'interface.

Le schéma ci-dessous représente la complémentarité entre l'UI et l'UX comme si c'étaient deux hémisphères d'un seul cerveau.
<figure><img src="image_2.png" /><figcaption>Figure 01 : Quelle différence entre UX Design et UI Design<fnref n="8" /></figcaption></figure>

## III- le projet « the safe city »

### 1- présentation du cadre général

Dans le cadre du «projet Nass Al-Houma» qui vise à mettre en évidence et à soutenir des initiatives urbaines innovantes portées par des représentants de la société civile et des habitants des quartiers concernés pour répondre aux besoins de la population, l'équipe projet<fnref n="9" /> lance un programme exceptionnel pour soutenir de petites initiatives dans les quartiers ciblés. Le programme est sous le nom "Appel à microprojet urbain". Ainsi la jeune chambre internationale (JCI) de Sidi Hassine, dans laquelle nous occupons le poste du président, a postulé sa candidature pour cette appelle et elle a réussi à gagner un prix pour l'exécution de son projet intitulé « The Safe City »

Le projet est basé sur une idée globale ou plutôt sur un concept, nommé THE SAFE CITY (la ville sécurisée). Dans cette ville nous trouvons un bon nombre de bénévoles qui travaillent ensemble pour préserver leur cité de tous les dangers et les problèmes qu'ils peuvent lui faire face, aussi ils considèrent qu'il est de leur devoir de contribuer dans le développement de la ville et dans l'amélioration de ses conditions de vie. L'aspect sécuritaire se traduit essentiellement dans le sentiment de sécurité ressenti par les habitants grâce à la grande

<footnote n="8">⁸ Source de l'image : le site web sur l'adresse suivante : https://blog-ux.com/quelle-difference-entre-ux-design-et-ui-design/</footnote>

<footnote n="9">⁹ L'équipe projet se constitue de l'Organisation Humanitaire et d'Inclusion (HI), le Laboratoire d'Economie Sociale et Solidaire (LAB'ESS) et le Bureau d'Etudes Qandil soutenues par l'Agence Française de Développement (AFD).</footnote>
implication collective, comme il touche la préservation de l'environnement, des espaces verts
dans la ville et la santé de ses habitants.

A l'instar de the samart city et de the green city, le concept de « the safe city » se concrétise
à travers des multiples projets qui vont succéder et perdurer dans le temps. Ainsi, l'équipe de
projet de JCI ont proposé 6 sous-projets à savoir un film documentaire, un site internet, une
application androïde, une manifestation artistique, un challenge entre des collégiens et une
action d'aménagement d'une ruelle.

## 2- le digital dans le projet « the safe city »

### a- le site internet :

C'est un site internet sous forme de plateforme de réflexion collective (think tank) dont l'objectif est de débattre les grands problèmes existants dans la ville de Sidi Hassine et d'en proposer des solutions. Cette plateforme est ouverte pour toutes personnes que se soient des habitants de la ville concernée ou d'ailleurs, l'essentiel c'est d'être impliqué sérieusement dans l'objectif de ce projet. Le site offre plusieurs services, entre autres il communique les actualités de la ville, il donne accès à des forums répertoriés selon les sujets et il permet de comparer l'expérience d'autres villes dans la résolution des problèmes similaires à ceux détectés à Sidi Hassine.

### b- l'application androïde :

L'application androïde est une sorte de tableau de bord de la société civile à Sidi Hassine.
Dans cette application, nous pouvons trouver toutes les informations nécessaires pour
s'informer de la structure de la société civile dans la ville, et de connaitre la nature d'activité
de chaque association et organisation. Aussi, l'application présente un forum de discussion
qui permet ces dernières et les habitants de la ville de débattre certains sujets d'une manière
directe.

## IV- l'application de l'UX dans la partie digital du projet « the safe city »

### 1- l'approche participative dans le travail

Tout au long de l'élaboration des produits digitaux (l'application et le site), l'approche suivie
par l'équipe de projet était une approche participative.

Premièrement, la conception de l'architecture du site comme celle de l'application sont faites
par les 20 membres de JCI. En fait, plusieurs réunions ont été faites pour discuter des
fonctions et de la méthode d'utilisation de ces produits, aussi des séances de brainstorming ont été organisées pour que tout le monde participe dans la proposition des idées.

Deuxièmement, une fois les fonctions et l'architecture globale de deux produits ont été définies, les croquis de ces travaux sont envoyés à un expert en UX pour revoir le travail précédent, donner ses remarques et faire une maquette fonctionnelle.

Troisièmement, une fois le prototype a été validé, les conceptions du site et de l'application ont été envoyées à un programmeur pour les développer. Lui aussi, il a fait des remarques d'ordre techniques qui ont demandé des petites modifications dans la conception initiale.

## 2- les étapes suivies

Les étapes que le groupe du projet a suivies pour la conception du site web sont les mêmes pour la création de l'application. Ainsi, dans ce qui suit nous allons seulement nous contenter d'expliquer et de suivre les phases qui concernent le site.

### a- l'exploration des besoins utilisateurs

Nous avons essayé dans la première phase de la conception du site de définir les profils des utilisateurs potentiels. Ainsi, nous avons eu recours à la technique de Personas. Cette technique consiste à former des groupes d'utilisateurs ayant des points communs, après quoi nous établissons des personas (profils) qui symbolisent chaque groupe.

Le nombre de personas que nous avons défini est de quatre :

- les habitants de Sidi Hassine qui cherchent à suivre les actualités et à s'informer sur certains sujets.

- les habitants de Sidi Hassine qui cherchent à donner leurs avis sur certains sujets et d'être parmi les personnes activistes (tendent à créer un changement).

- des tunisiens qui s'intéressent au développement des différentes régions de la Tunisie : ils cherchent à suivre ce qui se passe sur le terrain et d'aider si c'est possible.

- des experts ou des personnes qui ne résident pas en Tunisie et qui veulent aider dans la résolution de certains problèmes.

Après avoir étudié les différents Personas, nous avons essayé de déterminer l'ensemble de leurs besoins, que nous l'avons intégré dans les services offerts par le site.

D'après Daumal Sylvie « On est toujours plus intelligent à plusieurs que tout seul, et un groupe de personnes est toujours plus intelligent collectivement que son membre le plus
brillant <fnref n="10" />», ainsi nous avons eu recours à la technique de brainstorming pour définir les différents services que le site peut offrir à ses utilisateurs. Le résultat de ce travail est comme suit :

<figure><img src="image_3.png" /><figcaption>**Figure 02 :** les services offerts par le site</figcaption></figure>

Le site ou le Think Tank en ligne offre :

- des statistiques dans plusieurs secteurs touchant la ville de Sidi Hassine.

- des études d'état des lieux (provenant d'organisme étatique ou de la société civile).

- des expériences comparatives des problèmes auxquels la société civile locale cherche à trouver des solutions. Ces données peuvent être sous forme d'étude, d'images, des vidéos, etc.

- un forum de discussion qui aide les différentes parties prenantes à exprimer leurs avis, à échanger leurs idées et à se comprendre mutuellement.

- des informations et des données sur l'actualité dans la ville de Sidi Hassine.

## b- l'idéation et la génération de solutions

Dans cette phase, nous avons essayé de déterminer la forme générale du site tout en concevant les parcours utilisateur de nos différents personas.

<footnote n="10">¹⁰ DAUMAL SYLVIE. Design d'expérience utilisateur : principes et méthodes UX. 3e édition. Paris : Paris : Eyrolles, DL 2017, 2017</footnote>
Comme exemple, nous citons la persona qui représente les habitants de Sidi Hassine. Pour définir son parcours d'utilisation nous avons commencé par l'analyse et la définition de ses besoins. Ainsi une liste a été établie dans ce cadre :

- notre persona cherche à suivre les actualités.

- il veut s'informer sur certains sujets (répertoriés dans le site).

- il veut un service rapide.

- il veut un service simple et facile à utiliser (ses connaissances en matière de navigation sont rudimentaires)

En se basant sur les spécificités de cette persona et ses besoins en rapport avec le site, nous avons conçu le parcours utilisateur suivant :

<figure><img src="image_4.png" /><figcaption>**Figure 03** : les services offerts par le site</figcaption></figure>

Une fois la persona est en page d'accueil, il a le choix de choisir entre les actualités ou suivre un sujet de débat qu'il intéresse. Pour le premier cas, il peut, après deux clics de souris, arriver à son objectif. Pour le deuxième cas, il a besoin de 3 clics pour y arriver. Par
exemple, s'il veut s'informer sur la décharge de déchets de Borj Chakir<fnref n="11" />, il doit cliquer sur dossier après sur environnement après sur décharge Borj Chakir. Ainsi, nous avons essayé de raccourcir les parcours au maximum tout en préservant la simplicité de fonctionnement.

Après avoir appliqué le même travail avec l'ensemble de nos personas, nous avons schématisé une prémaquette du site qui tient compte de tous les points communs recensés.

<figure><img src="image_5.png" /><figcaption>**Figure 04** : une maquette du site sous forme de croquis</figcaption></figure>

La maquette schématisée traduit les spécificités fonctionnelles du site. Premièrement, il est simple à utiliser et toutes ses fonctionnalités sont apparentes dans la page d'accueil. Il est important que l'utilisateur trouve son chemin de navigation dans un bref délai et sans gêne. Ainsi, tous les services du site sont traduits par des boutons et des éléments de navigation dès la première page. Deuxièmement, les actualités et le forum se trouve directement dans la page d'accueil ce qui facilitera l'accès aux utilisateurs qui s'intéressent uniquement à ces services. Troisièmement, les grands problèmes de la ville de Sidi Hassine sont répertoriés sur l'onglet dossier, une fois l'utilisateur clique dedans, il se retrouvera devant une liste de domaines : environnement, économie, gouvernance locale, etc. ainsi, il pourra se diriger facilement vers le sujet qu'il cherche.

<footnote n="11">¹¹ C'est une décharge qui présente une grande polémique à l'échelle nationale comme à l'échelle locale. La période légale de son exploitation est expirée depuis des années mais il continu à fonctionner tout en provoquant plusieurs répercussions néfastes sur l'ensemble de l'environnement dans lequel il existe.</footnote>
**c- prototypage :**

Pour pouvoir prototyper le site internet, nous avons recours à un spécialiste, un designer en UX. Nous lui avons procuré toutes les données nécessaires pour pouvoir concevoir le site tel que nous l'avons imaginé et conçu.

Les images qui suivent, montrent les fonctionnalités de site développées sur Adobe XD, qui est un logiciel de prototypage de produits digitaux (site et application). En fait, le prototype n'est pas hébergé sur internet mais il fonctionne avec tous ses liens hypertextes grâce à un exécutable à distance.

<figure><img src="image_6.png" /><figcaption>**Figure 5** : les deux versions du site, sur PC et Smartphone</figcaption></figure>

**d- le test :**

« Concevoir un système ou un produit présentant une bonne expérience utilisateur est l'un des principaux objectifs de tout projet numérique. Pour améliorer cette expérience durant le cycle de développement ou s'assurer que le produit final a une bonne UX, encore faut-il savoir l'évaluer de manière fiable et valide<fnref n="12" />»

Pour tester le site internet, nous avons envoyé son adresse à plus de 40 personnes entre membres de JCI et autres. Jusqu'à maintenant nous avons eu des feedbacks sur plusieurs paramètres à savoir les couleurs utilisées, la grandeur des boutons, les graphismes incrustés, le mode de recherche, les fonctionnalités du forum, etc.

<footnote n="12">¹² Carine Lallemand. Guillaume Gronier, Méthodes de design UX – 30 méthodes fondamentales pour concevoir et évaluer les systèmes interactifs, Paris, éditions Eyrolles, 2018</footnote>
Actuellement nous sommes en train de regrouper toutes ces données et les répertorier suivant leurs natures et leurs fréquences de redondance. Ensuite, les modifications que nous porterons sur le site vont tenir compte de ces remarques.

## Conclusion

La démarche de l'expérience utilisateur a révolu le monde digital. Désormais il n'est plus question de concevoir des applications et des sites attractifs de point de vue esthétique, mais plutôt de créer des produits dont l'expérience d'utilisation est parfaitement adéquate aux besoins et aux spécificités de leurs utilisateurs.

Durant la conception des produits digitaux (site et application androïde) dans le cadre du projet The Safe City, nous avons remarqué que la phase la plus importante et la plus cruciale dans l'exécution de la démarche UX est celle de l'empathie. La conception d'une expérience d'utilisation agréable est tributaire de la compréhension des attentes et des préférences du potentiel-utilisateur. Tout au long de l'exécution du projet, la prise en considération de ces données a présenté une boussole qui oriente les modifications et l'avancement du travail.

## Bibliographie

* BRUNET EMMANUEL. La boîte à outils du design thinking : 67 outils clés en main + 4 vidéos d'approfondissement. Malakoff : Malakoff : Dunod, DL 2019, 2019

* DAUMAL SYLVIE. Design d'expérience utilisateur : principes et méthodes UX. 3e édition. Paris : Paris : Eyrolles, DL 2017, 2017.

* LALLEMAND, Carine et GRONIER, Guillaume. Méthodes de design UX: 30 méthodes fondamentales pour concevoir des expériences optimales. 2ème édition. Paris : Eyrolles, 2015. [Consulté le 9 janvier 2020]. ISBN 978-2-212-73397-6. URL : http://univ.scholarvox.com/book/88863440

* Hatchuel Géraldine, LE DESIGN D'EXPERIENCE, Paris : FYP éditions, 2018.
Carine Lallemand. Guillaume Gronier, Méthodes de design UX – 30 méthodes fondamentales pour concevoir et évaluer les systèmes interactifs, Paris, éditions Eyrolles, 2018.

Beudon, Nicolas. « Mener un projet avec le design thinking », I2D - Information, données & documents, vol. 54, no. 1, 2017, pp. 36-38.