+
M-Developer Ministère des Technologies Organisation Arabe
pour l'Education, la
de la Communication
et de l‘Economie Numérique Culture et les Sciences
Projet de jeunes développeurs
en programmation mobile
Conception et
scénarisation des
Applications Mobiles
Ramzi FARHAT
+ 2
Objectifs
Comprendre les notions d'interface utilisateur, d'expérience
utilisateur
Apprendre la conception des interfaces graphiques via la
création de maquettes (wireframing)
Se sensibiliser par rapport aux techniques relatives à
l'affichage sur des écrans de tailles très variés
Découvrir les directives de création d'interfaces utilisateur
pour certains environnements mobiles
+ 3
Plan
Nouvelles tendances dans les interfaces graphiques UI/UX
Wireframing
Adaptive Design
Responsive Design
Lignes directives
+
Nouvelles tendances
dans les interfaces
graphiques UI/UX
+ 5
Nouvelles tendances dans les
interfaces graphiques UI/UX
Interface Utilisateur (UI : User Interface)
Partie visible d'un produit logiciel
Permet de gérer les interactions avec l'utilisateur
Afficher les fonctionnalités proposées par le produit logiciel
Permettre l'introduction d'informations de la part de l'utilisateur
Permettre de retourner des information pour l'utilisateur
Nouveaux défis :
Taille réduite des écrans des dispositifs mobiles
Écrans tactiles
Hétérogénéité des écrans en termes de taille, de résolution,
d'orientation, etc.
Nouvelles tendances dans les
+ 6
interfaces graphiques UI/UX
Recommandations
Éviter les longs menus
Affecte la prise de décision par l'utilisateur vu le
nombre de choix
Camoufle les fonctions principales de
l'application
Nouvelles tendances dans les
+ 7
interfaces graphiques UI/UX
Recommandations
Choisir le système de navigation le plus
adéquat pour votre application mobile
Deux types de systèmes de navigation : Primaires
et Secondaires
Systèmes de navigation primaires
Hiérarchique
Persistant
Séquentiel
Systèmes de navigation secondaires
Recherche
Index
Liens rapides
Chemin de navigation
Liens intégrés
Nouvelles tendances dans les
+ 8
interfaces graphiques UI/UX
Recommandations
Opter pour des interfaces qui sont affichables sur des écrans de
différents tailles avec :
Facilité de lecture du contenu et de navigation
Redimensionnement et défilement minimales
Nouvelles tendances dans les
+ 9
interfaces graphiques UI/UX
Recommandations
Prendre en considération l'orientation du dispositif mobile
Deux modes d'affichage :
Portrait
Paysage
L'utilisateur attend généralement que l'affichage en mode paysage offre une
meilleure consultation du contenu
Nouvelles tendances dans les
+ 10
interfaces graphiques UI/UX
Recommandations
Limiter le nombre de couleurs utilisés
Beaucoup de couleurs créent un désordre visuel
Augmentation du temps nécessaire pour localiser un composant en
fonction du nombre de couleurs
Nombre de secondes pour
trouver un objet
Il est recommandé
d'utiliser entre 5 et 6
couleurs
Nombre de couleurs utilisés
Nouvelles tendances dans les
+ 11
interfaces graphiques UI/UX
Recommandations
Utiliser des graphiques légers et une interface propre
Moins de perturbations pour l'utilisateur
Meilleures performances et fluidité de l'application
vs
Nouvelles tendances dans les
+ 12
interfaces graphiques UI/UX
Recommandations
Favoriser toujours la sélection à la rédaction
X
Nouvelles tendances dans les
+ 13
interfaces graphiques UI/UX
Recommandations
Gestion classique des interactions utilisateur
Interprétation classique du gestuel utilisateur
Support d'un seul gestuel par écran
+ 14
Nouvelles tendances dans les
interfaces graphiques UI/UX
Expérience de l'utilisateur (UX : User experience)
Terme utilisé pour qualifier la qualité de l'usage d'une application
informatique en termes de :
Usage (côté utilitaire)
Confort (côté ressenti)
Objectif :
Faciliter la vie de l'utilisateur
+ 15
Nouvelles tendances dans les
interfaces graphiques UI/UX
C'est quoi la différence entre UI et UX ?
Qu'est ce qu'on Qu'est ce qu'on
veut réaliser veut accomplir
Éléments Expérience
visuels vécue
Désirable
Crédible
Centrer sur
Centrer sur
les outils
l'interaction
+
Wireframing
+ 17
Wireframing
Objectif :
Préparer des interfaces utilisateur en
spécifiant les zones et les composantes:
leurs emplacements et leurs tailles.
Principe :
Préparer des maquettes fonctionnelles
(wireframes)
+ 18
Wireframing
Démarche :
Chaque maquette correspond à une
interface utilisateur
Chaque maquette permet de définir les
zones et les composants qu'elle doit
contenir
Exemple d'outils :
Pencil ([Link]
Protoshare ([Link]
Justinmind Prototyper
([Link] etc.
+ 19
Présentation du Wireframing
Capture d'écran de Pencil :
+ 20
Présentation du Wireframing
Capture d'écran de Justinmind
+ 21
Présentation du Wireframing
Capture d'écran de Protoshare
+
Adaptive Design
+ 23
Présentation de l'Adaptive Design
Objectif :
Optimiser l'expérience utilisateur à une diversité de dispositifs
(divers résolutions, divers tailles de la surface d'affichage, etc.)
Principe :
Amélioration progressive de l'interface utilisateur selon les
caractéristiques du dispositif et des facteurs connexes (taille de la
surface d'affichage, orientation de l'écran, etc.).
Démarche :
Définir un ensemble prédéfini règles de mise-en-page selon les
caractéristiques du dispositif et des facteurs connexes.
+ 24
Présentation de l'Adaptive Design
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<title></title>
<style type="text/css">
@media screen and (min-width: 100px) and (max-width:400px) {
.ad { width:200px; background-color: #dff23c; }
}
@media screen and (min-width: 400px) and (max-width:1200px) {
.ad { width:400px; background-color: #65f236; }
}
</style>
</head>
<body>
<div class="ad"> M-Developper</div>
</body>
</html>
+ 25
Présentation de l'Adaptive Design
Exemple (Suite) :
Adaptation de l'affichage pour des
largeurs entre 1200 et 400 px
Adaptation de l'affichage pour des
largeurs entre 400 et 100 px
+
Responsive Design
+ 27
Présentation du Responsive
Design
Objectif :
Optimiser l'expérience utilisateur à une diversité de dispositifs
(divers résolutions, divers tailles de la surface d'affichage, etc.)
Principe :
Affichage fluide de l'interface utilisateur quelque soit les
caractéristiques du dispositif et des facteurs connexes (taille de la
surface d'affichage, orientation de l'écran, etc.).
Démarche :
Usage des "media queries", des "flexible grids" et des
"responsive images".
+ 28
Présentation du Responsive
Design
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<title></title>
<style type="text/css">
@media screen {
.ad {width:50%; background-color: #dff23c; }
}
</style>
</head>
<body>
<div class="ad"> M-Developper</div>
</body>
</html>
+ 29
Présentation du Responsive
Design
Exemple (Suite) :
Quelque soit la largeur de la
fenêtre le <div> occupe sa moitié
+
Directives pour les
UI
etr Desig F at Desig ateria Desig
+ 31
Recommandations
Introduction
Plusieurs familles de directives (guidelines) pour la
conception des interfaces graphiques existent
Chacune proposent un ensemble de règles à suivre pour
concevoir des interfaces graphiques de qualité à la fois au
niveau ergonomie aussi bien qu'au niveau esthétique
Chaque type de directives dispose d'un ou de plusieurs
ressources permettant au développeur de l'adopter
CSS
Polices
JavaScript
Images
+ 32
Recommandations
Introduction
Chaque système d'exploitation mobile suit des directives pour
uniformiser l'expérience utilisateur
Material Design
(Depuis Android 5)
Flat Design
(Depuis iOS 7)
Metro Design
(Depuis Windows phone 7)
+ 33
Recommandations
Introduction
Lors du développement d'une application hybride il est
possible de choisir de suivre l'une des ensembles de
directives
Choix recommandé en particulier si l'application sera compilée
pour une seule plateforme mobile
Permet d'offrir à l'utilisateur des interfaces avec une allure
familière facilitant l'exploitation de l'application mobile
Permet de profiter d'un ensemble prédéfini de :
Icones
Thèmes de couleurs
Typographie
Transitions
Animations
+ 34
Recommandations
Exemple : Material Design
Objectif :
Optimiser l'expérience utilisateur pour une diversité
de dispositifs (divers résolutions, divers tailles de la
surface d'affichage, etc.)
Principe :
Proposer de interfaces utilisateur responsives,
rapides, légères, simples et lisibles
Démarche :
Usage des flexible grids et des bibliothèques CSS,
JavaScript, thèmes, etc. (offerts par Google).
+ 35
Recommandations
Exemple : Utilisation du Material Design dans une
page Web
<html>
<head>
<style> Styles personnalisés
.[Link]-card {width: 512px; margin: 0 auto;}
.demo-card-wide > .mdl-card__title {color: #fff; height: 176px; background: url('welcome_card_tuts.png') center / cover;}
.demo-card-wide > .mdl-card__menu {color: #fff; }
body {padding: 20px 0 0; background: #fafafa; position: relative; }
</style>
</head> Utilisation des scripts, styles et police
<body> du Matreial design
<!-- Material Design Lite -->
<script src="[Link]
<link rel="stylesheet" href="[Link]
<link rel="stylesheet" href="[Link]
<!-- Contenu-->
<div class="mdl-card mdl-shadow--2dp demo-card-wide">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">M-Developer</h2> Définition du contenu en utilisant les
</div> styles du Matrial design
…
+ 36
Recommandations
Exemple : Utilisation du Material Design dans une
page Web
+
M-Developer Ministère des Technologies Organisation Arabe
pour l'Education, la
de la Communication
et de l‘Economie Numérique Culture et les Sciences
Projet de jeunes développeurs
en programmation mobile
Conception et
scénarisation des
Applications Mobiles
Ramzi FARHAT
