Faculté des sciences juridiques, économiques et de gestion

de jendouba

Concevoir une application

Réalisé par : Hermi Héla
Hezzi Ranya

Année Universitaire : 2019/2020

Plan
Introduction

1/Désigner l’interface

2/L'implantation

3/Préparatifs à la conception d’une application mobile.

a)La conception fonctionnelle de l’app

b)La conception ergonomique
c)La conception graphique

Conclusion
Introduction

Après avoir déterminé le modèle mental que les utilisateurs utilisent

dans l'accomplissement de leurs tâches. Il faut valider et confirmer la
compréhension de ce modèle,à travers :

● Le diagramme de gestion des flux .

● Les prototypes.
● Les tests(A/B).

Cette étape très important pour valider le modèle afin de réaliser le

design d’un site ou d’une application.
 1/ Designer l’interface
Le design de site est le processus itératifs au cours duquel le design va
évoluer progressivement.

Il comprend différentes technique tel que :

● Les test d’utilisabilité réalisés au moyen de prototypes papier.

● Évaluations d'utilisabilité.

Cette approche peut s'avérer plus efficiente et économique lorsque

des itérations sont apportées avant que le design et le développement
ne soit trop avancés. 1
2/L'implantation
La collecte de rétroaction (Feedback)
Cette Phase vise 2 Objectifs:
Le suivi (durant 6 mois minimum)

Ces deux objectifs sont particulièrement difficiles à atteindre du

fait du caractère déconnecté de l'application.

2
2/L'implantation
Définition

une application mobile ou une application native est définit comme

un logiciel conçu spécifiquement pour un système d’exploitation
enregistré et stocké dans la mémoire du téléphone et fournissant des
contenus “riches”.

⇒ ce type d’application ne nécessite pas forcément un accès à internet

pour utiliser les services proposés.
3
 2/L'implantation
Les applications mobiles constituent un levier pull car les mobinautes
viennent intentionnellement vers la marque et choisissent de faire partie
d'une base opt-in à partir le téléchargement de l’application.

⇒ Ces applications ont un impact persuasif positif qui se traduit par un

fort niveau d'engagement du fait de la richesse de l’expérience qu'elles
procurent .

4
 2/L'implantation
1/ Les applications informatifs

Il ya deux types d’applications : 2/ Les applications expérientielles

1/ Les applications informatifs :

Ces applications requièrent une attention intellectuelle associée à un rythme

fort plus rapide,comme facebook,Twitter.

5
2/L'implantation
2/ Les applications expérientielles :

requièrent une attention sensorielle associée à un rythme moins rapide,

comme Google maps.

L'évaluation du rythme fort est due au fait que les applications

informatives focalisent l’attention sur l’utilisateur alors que les
applications expérientielles focalisent l’attention sur le web.

6
2/L'implantation

Les applications de types informatifs ont un impact plus important sur

l'engagement.

⇒ Elles ont plus succès que les applications de type expérientiel,parce

qu’elles essaient de s’intégrer et de s’adapter au mieux au quotidien des
utilisateurs.

7
 3/Préparatifs à la conception d’une
application mobile.
La conception d'une application mobile doit suivre une démarche tenant
compte de 3 aspects:

● Les fonctions
● L’ergonomie
● Graphisme/Design.

8
a)La conception fonctionnelle de l’app

Consiste à déterminer les informations ainsi les fonctionnalités à mettre

à disposition de l’utilisateurs en fonction de ses besoins.

L’objectif: répondre aux besoins spécifiques des usages des mobinautes

( l’ubiquité, praticité) .

9
a)La conception fonctionnelle de l’app

Pour maximiser à la fois la qualité perçue d’une application mobile et

l'expérience utilisateurs ⇒ plusieurs fonctionnalités qui utilisent les
caractéristiques techniques des smartphones :

● Scanner QR code.
● Géogalication .
● Réalité augmenté .

10
b)La conception ergonomique

C’est une démarche de conception d’une application mobile concerne

les caractéristiques ergonomiques.

⇒ Adaptation aux conditions d'utilisation(“Comportement d’utilisateur”).

⇒ Le parcours du mobinautes s'en trouve à facile.

⇒ Faciliter l’utilisation optimal du parcours du mobinaute(moins click

possible).

11
b)La conception ergonomique

● La conception ergonomique doit prendre en compte la taille de l’

écran d’un Smartphone qui reste limité.
● Donc, il faut :

⇒ Optimiser l’espace.

⇒ Ne pas le surchargé.

12
b)La conception ergonomique

Définition IHM (Interface Homme-Machine): c’est l’ensemble de dispositif

matérielle et logicielle qui permet aux utilisateurs d’interagir avec l’interface.

Pour construire cet interface:

Il faut suit un nombre de théorie psychologique suivant les lois de Géstalt:

★ Loi de proximité.
★ Loi de similarité.
★ Loi de Fitts.
13
b)La conception ergonomique

★ Loi de proximité: le cerveau regroupe les éléments les plus

rapprochés dans l’espace ,comme formant un ensemble.

Il est important dans un souci de clarté d’agréger les éléments

pouvant répondre à une même fonction et de séparer ceux n’ayant
pas de point communs.

14
b)La conception ergonomique

★ Loi de similarité: qui paraissent semblables au niveau de leur

forme,de leur taille/leur couleur.

Il est pour Faciliter l’usage les fonction qui répondent à une

même besoin ⇒ Visuellement identiques.

15
16
b)La conception ergonomique

★ Loi de Fitts: représente un modèle empirique de la relation entre la

vitess et la précision d’un mouvement humain .

2 principes découlent à cette loi:

● Plus une cible sera proche et grosse,moins un utilisateur mettra de

temps pour l’atteindre.
● Plus une cible sera éloignée et petite,plus un utilisateur mettra de
temps pour l’atteindre.
17
b)La conception ergonomique

Efficacité de Pointage sur un élément de l’application suit les principes

de loi de Fitts:

⇒ Les éléments cliquable sur une app mobile doivent avoir une taille
adaptés par l'élément activable (pouce) pour éviter les erreurs de
pointage .

Pour éviter que le mobinaute appuie sur élément différent.

18
 Le superficie de pointage d'élément

mesurer au moins 44 pixels.

b)La conception ergonomique

Un autre aspect de la conception ergonomique:

● Division de l'écran en zone:

1/ Zone Confort

2/ Zone Inconfort

19
b)La conception ergonomique

1/ Zone Confort:

Facile à atteindre ⇒ Facile d'accès pour l’utilisateur

● Mode portrait ⇒ coin inférieur gauche.

● Mode paysage⇒ les deux parties latérales.

20
b)La conception ergonomique

2/ Zone Inconfort:

Nécessite plus d’effort de l’utilisateur.

● Mode portrait ⇒ coin supérieur gauche.

● Mode paysage⇒ partie central haute

Les éléments important doit être placés dans la zone confort

,par contre les éléments moins important placés dans la zone inconfort.
21
 b)La conception ergonomique
Exemple: Comparaison des zones de confort entre l’iphone(Apple) et un
smartphone Samsung(Microsoft) :

Application
placés dans Raccourci principale au
différentes bas de l'appareil
raccourcis

22
b)La conception ergonomique

Il faut que les boutons nécessaires doit toujours explicite affichés

à l’écran.

23
b)La conception ergonomique
Pour l’aspect écran Tactiles :

La navigation dans un app nécessite une réflexion dans la conception

ergonomique.

⇒ cette navigation doit être simplifié et facile:

❏ moins click,en fonction des boutons de navigation

❏ Les boutons “Précédent” et”Retour” pour facile manipuler le parcour.

❏ Nombre d’onglet permanents présents ne doit pas dépasser 4 ou 5.

❏ La barre de navigation d’un site responsive. 24

b)La conception ergonomique
Pour l’aspect clavier Tactiles :

Lorsque l'utilisateur va écrit un e-mail/SMS ,il est obligatoire d’utiliser la

saisie en clavier donc il nécessite

❖ les apostrophes
❖ les autres accents .
❖ Utilisation des chiffres/lettres (majuscule /minuscule);
❖ utilisation de valeurs par défaut (dates)

⇒ Rendre l’utilisation plus facile et plus rapide

25
b)La conception ergonomique

Fonctionnalité qui permet de faciliter l’interaction avec l’interface:

❖ Sauvegarde les dernières recherches sur le navigateur .

❖ Enregistrer des listes d'élément favoris .
❖ Positionnement : renseignement de la météo du lieu de résidence
de l’utilisateur.
❖ mémorisation automatique: enregistrer MDP

26
c)La conception graphique

Le design est l'élément graphiques et visuels d’une interface utilisateur qui

contribue à le confort de l’internaute.

Sur l’interface d’une applications mobile les éléments graphiques utilisés

(“les couleurs,les images,la typographie”)

⇒ se sont des éléments qui vont aider à la clarté de l’information

transmise à l’utilisateur.

27
c)La conception graphique
Il est conseillé de:

● ne pas utiliser plus de 5 couleurs différentes.

● ni d’images de fonds pour ne pas rendre l’UX confuse
● profiter un fond de page uni pour une lisibilité optimale.
● Un fond de page clair
● une typologie foncée( contrast positif )
● l’utilisation des icônes doit être privilégiée dans la navigation sur
application,car ils sont les plus adaptés et plus rapidement
interprétables que du texte.
28
Conclusion

La technologie mobile nous donne accès à des écrans tactiles avec lesquels
on peut interagir en tapant, en faisant défiler ou pivoter l’appareil ; au GPS
qui permet de créer des services géodépendants (avec la géolocalisation),à
des accéléromètres qui permettent d'utiliser les mouvements de votre
mobile,ainsi qu'à une (des) caméra(s).

29