SlideShare une entreprise Scribd logo

Chp2 - Conception UX-UI des Applications Mobiles

Visitez http://liliasfaxi.wix.com/liliasfaxi !

1  sur  52
Télécharger pour lire hors ligne
Chp2 : Design d’Applications Mobiles
UX, Design Patterns et Meilleures Pratiques
Conception et Développement d’Applications Mobiles
GL4 (Option Mobile) - 2015
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 1
UI vs UX
UI: User Interface (Interface Graphique)
Technique: Ce que les clients utilisent pour
interagir avec le produit
UX: User eXperience (Expérience Utilisateur)
Émotion: Ce que les clients ressentent en
utilisant le produit
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 2
Design d’Applications Mobiles
Style et Design: Pourquoi est-ce important?
• La forme suit la fonction
• Quel est le message de votre application?
• Consistance
• « Si cela se ressemble, cela doit agir de la même manière » (Android Style
Guide)
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 3
Design Mobile
USER EXPERIENCE (UX)
Chp2: Design des Applications Mobiles
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 4
UX Mobile : Définition et Composants
• UX Mobile
• Perceptions et sentiments des utilisateurs avant, pendant et après leur
interaction avec le mobile
• Obligation de repenser nos acquis par rapport à la conception
d’applications desktop
• Considérer
• La petite taille de l’écran
• Les différences de fonctionnalités entre les appareils
• Les contraintes d’usage et de connectivité
• Le contexte perpétuellement changeant et difficile à identifier
• Disséquer l’expérience utilisateur mobile en plusieurs composants clefs
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 5
User Experience (UX)
Composant 1: Fonctionnalités
• Sélectionner les fonctionnalités pertinentes pour l’utilisateur
• Guidelines
• Offrir des fonctionnalités adaptées au smartphone (ex: lecture de bar-
code)
• Priorité aux fonctionnalités utilisées dans un environnement mobile
(statut des vols, géolocalisation…)
• S’assurer que les fonctionnalités fondamentales sont optimisées pour le
mobile (num de téléphones clic-to-call par exemple)
• Les capacités clefs doivent être disponibles sur tous les canaux (app ou
site)
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 6
User Experience (UX)

Recommandé

Chp1 - Introduction au Développement Mobile
Chp1 - Introduction au Développement MobileChp1 - Introduction au Développement Mobile
Chp1 - Introduction au Développement MobileLilia Sfaxi
 
Chp5 - Applications Android
Chp5 - Applications AndroidChp5 - Applications Android
Chp5 - Applications AndroidLilia Sfaxi
 
Chp3 - Architecture Logicielle des Applications Mobiles
Chp3 - Architecture Logicielle des Applications MobilesChp3 - Architecture Logicielle des Applications Mobiles
Chp3 - Architecture Logicielle des Applications MobilesLilia Sfaxi
 
Chp2 - Diagramme des Cas d'Utilisation
Chp2 - Diagramme des Cas d'UtilisationChp2 - Diagramme des Cas d'Utilisation
Chp2 - Diagramme des Cas d'UtilisationLilia Sfaxi
 
Chp6 - Développement iOS
Chp6 - Développement iOSChp6 - Développement iOS
Chp6 - Développement iOSLilia Sfaxi
 
UML Part 4- diagrammres de classes et d'objets mansouri
UML Part 4- diagrammres de classes et d'objets mansouriUML Part 4- diagrammres de classes et d'objets mansouri
UML Part 4- diagrammres de classes et d'objets mansouriMansouri Khalifa
 

Contenu connexe

Tendances

Porter stemming algorithm
Porter stemming algorithmPorter stemming algorithm
Porter stemming algorithmkamar MEDDAH
 
Initiation à Android
Initiation à AndroidInitiation à Android
Initiation à AndroidLilia Sfaxi
 
Architectures n-tiers
Architectures n-tiersArchitectures n-tiers
Architectures n-tiersHeithem Abbes
 
Projet Fin D'étude Application Mobile
Projet Fin D'étude Application MobileProjet Fin D'étude Application Mobile
Projet Fin D'étude Application MobileRim ENNOUR
 
Merise
MeriseMerise
Merisebasy15
 
Applications Android - cours 12 : Persistance de données SQLite
Applications Android - cours 12 : Persistance de données SQLiteApplications Android - cours 12 : Persistance de données SQLite
Applications Android - cours 12 : Persistance de données SQLiteAhmed-Chawki Chaouche
 
P2 éléments graphiques android
P2 éléments graphiques androidP2 éléments graphiques android
P2 éléments graphiques androidLilia Sfaxi
 
Projet de fin d’études
Projet de fin d’études  Projet de fin d’études
Projet de fin d’études TombariAhmed
 
Présentation PFE : Mise en place d’une solution de gestion intégrée (OpenERP...
Présentation PFE :  Mise en place d’une solution de gestion intégrée (OpenERP...Présentation PFE :  Mise en place d’une solution de gestion intégrée (OpenERP...
Présentation PFE : Mise en place d’une solution de gestion intégrée (OpenERP...Mohamed Cherkaoui
 
Présentation pfe Développement d'une application bancaire mobile
Présentation pfe Développement d'une application bancaire mobilePrésentation pfe Développement d'une application bancaire mobile
Présentation pfe Développement d'une application bancaire mobileNader Somrani
 
Architectures 3-tiers (Web)
Architectures 3-tiers (Web)Architectures 3-tiers (Web)
Architectures 3-tiers (Web)Heithem Abbes
 
Uml 2 pratique de la modélisation
Uml 2  pratique de la modélisationUml 2  pratique de la modélisation
Uml 2 pratique de la modélisationNassim Amine
 
Technologies sur angular.pptx
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptxIdrissaDembl
 
Présentation de mon PFE
Présentation de mon PFEPrésentation de mon PFE
Présentation de mon PFENadir Haouari
 

Tendances (20)

Porter stemming algorithm
Porter stemming algorithmPorter stemming algorithm
Porter stemming algorithm
 
P4 intents
P4 intentsP4 intents
P4 intents
 
Initiation à Android
Initiation à AndroidInitiation à Android
Initiation à Android
 
Cours Génie Logiciel - Introduction
Cours Génie Logiciel - IntroductionCours Génie Logiciel - Introduction
Cours Génie Logiciel - Introduction
 
Diagrammes de classes
Diagrammes de classesDiagrammes de classes
Diagrammes de classes
 
DART.pptx
DART.pptxDART.pptx
DART.pptx
 
Architectures n-tiers
Architectures n-tiersArchitectures n-tiers
Architectures n-tiers
 
Igl cours 3 - introduction à uml
Igl   cours 3 - introduction à umlIgl   cours 3 - introduction à uml
Igl cours 3 - introduction à uml
 
Tp3 - UML
Tp3 - UMLTp3 - UML
Tp3 - UML
 
Projet Fin D'étude Application Mobile
Projet Fin D'étude Application MobileProjet Fin D'étude Application Mobile
Projet Fin D'étude Application Mobile
 
Merise
MeriseMerise
Merise
 
Applications Android - cours 12 : Persistance de données SQLite
Applications Android - cours 12 : Persistance de données SQLiteApplications Android - cours 12 : Persistance de données SQLite
Applications Android - cours 12 : Persistance de données SQLite
 
P2 éléments graphiques android
P2 éléments graphiques androidP2 éléments graphiques android
P2 éléments graphiques android
 
Projet de fin d’études
Projet de fin d’études  Projet de fin d’études
Projet de fin d’études
 
Présentation PFE : Mise en place d’une solution de gestion intégrée (OpenERP...
Présentation PFE :  Mise en place d’une solution de gestion intégrée (OpenERP...Présentation PFE :  Mise en place d’une solution de gestion intégrée (OpenERP...
Présentation PFE : Mise en place d’une solution de gestion intégrée (OpenERP...
 
Présentation pfe Développement d'une application bancaire mobile
Présentation pfe Développement d'une application bancaire mobilePrésentation pfe Développement d'une application bancaire mobile
Présentation pfe Développement d'une application bancaire mobile
 
Architectures 3-tiers (Web)
Architectures 3-tiers (Web)Architectures 3-tiers (Web)
Architectures 3-tiers (Web)
 
Uml 2 pratique de la modélisation
Uml 2  pratique de la modélisationUml 2  pratique de la modélisation
Uml 2 pratique de la modélisation
 
Technologies sur angular.pptx
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptx
 
Présentation de mon PFE
Présentation de mon PFEPrésentation de mon PFE
Présentation de mon PFE
 

En vedette

Mobile-Chp4 côté serveur
Mobile-Chp4 côté serveurMobile-Chp4 côté serveur
Mobile-Chp4 côté serveurLilia Sfaxi
 
P6 composants avancés
P6 composants avancésP6 composants avancés
P6 composants avancésLilia Sfaxi
 
BigData_Chp5: Putting it all together
BigData_Chp5: Putting it all togetherBigData_Chp5: Putting it all together
BigData_Chp5: Putting it all togetherLilia Sfaxi
 
Android-Tp1: éléments graphiques de base et intents
Android-Tp1: éléments graphiques de base et intentsAndroid-Tp1: éléments graphiques de base et intents
Android-Tp1: éléments graphiques de base et intentsLilia Sfaxi
 
Android-Tp4: stockage
Android-Tp4: stockageAndroid-Tp4: stockage
Android-Tp4: stockageLilia Sfaxi
 
Android-Tp3: fragments et menus
Android-Tp3: fragments et menusAndroid-Tp3: fragments et menus
Android-Tp3: fragments et menusLilia Sfaxi
 
P3 listes et elements graphiques avancés
P3 listes et elements graphiques avancésP3 listes et elements graphiques avancés
P3 listes et elements graphiques avancésLilia Sfaxi
 
P1 introduction à android
P1 introduction à androidP1 introduction à android
P1 introduction à androidLilia Sfaxi
 
Android-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateursAndroid-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateursLilia Sfaxi
 
Android-Tp5 : web services
Android-Tp5 : web servicesAndroid-Tp5 : web services
Android-Tp5 : web servicesLilia Sfaxi
 
eServices-Chp6: WOA
eServices-Chp6: WOAeServices-Chp6: WOA
eServices-Chp6: WOALilia Sfaxi
 
BigData_Chp3: Data Processing
BigData_Chp3: Data ProcessingBigData_Chp3: Data Processing
BigData_Chp3: Data ProcessingLilia Sfaxi
 
BigData_Chp2: Hadoop & Map-Reduce
BigData_Chp2: Hadoop & Map-ReduceBigData_Chp2: Hadoop & Map-Reduce
BigData_Chp2: Hadoop & Map-ReduceLilia Sfaxi
 
Sécurité des Systèmes Répartis- Partie 1
Sécurité des Systèmes Répartis- Partie 1 Sécurité des Systèmes Répartis- Partie 1
Sécurité des Systèmes Répartis- Partie 1 Lilia Sfaxi
 
eServices-Tp3: esb
eServices-Tp3: esbeServices-Tp3: esb
eServices-Tp3: esbLilia Sfaxi
 
eServices-Tp5: api management
eServices-Tp5: api managementeServices-Tp5: api management
eServices-Tp5: api managementLilia Sfaxi
 
eServices-Tp4: esb++
eServices-Tp4: esb++eServices-Tp4: esb++
eServices-Tp4: esb++Lilia Sfaxi
 
eServices-Tp2: bpel
eServices-Tp2: bpeleServices-Tp2: bpel
eServices-Tp2: bpelLilia Sfaxi
 
eServices-Tp1: Web Services
eServices-Tp1: Web ServiceseServices-Tp1: Web Services
eServices-Tp1: Web ServicesLilia Sfaxi
 
BigData_TP5 : Neo4J
BigData_TP5 : Neo4JBigData_TP5 : Neo4J
BigData_TP5 : Neo4JLilia Sfaxi
 

En vedette (20)

Mobile-Chp4 côté serveur
Mobile-Chp4 côté serveurMobile-Chp4 côté serveur
Mobile-Chp4 côté serveur
 
P6 composants avancés
P6 composants avancésP6 composants avancés
P6 composants avancés
 
BigData_Chp5: Putting it all together
BigData_Chp5: Putting it all togetherBigData_Chp5: Putting it all together
BigData_Chp5: Putting it all together
 
Android-Tp1: éléments graphiques de base et intents
Android-Tp1: éléments graphiques de base et intentsAndroid-Tp1: éléments graphiques de base et intents
Android-Tp1: éléments graphiques de base et intents
 
Android-Tp4: stockage
Android-Tp4: stockageAndroid-Tp4: stockage
Android-Tp4: stockage
 
Android-Tp3: fragments et menus
Android-Tp3: fragments et menusAndroid-Tp3: fragments et menus
Android-Tp3: fragments et menus
 
P3 listes et elements graphiques avancés
P3 listes et elements graphiques avancésP3 listes et elements graphiques avancés
P3 listes et elements graphiques avancés
 
P1 introduction à android
P1 introduction à androidP1 introduction à android
P1 introduction à android
 
Android-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateursAndroid-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateurs
 
Android-Tp5 : web services
Android-Tp5 : web servicesAndroid-Tp5 : web services
Android-Tp5 : web services
 
eServices-Chp6: WOA
eServices-Chp6: WOAeServices-Chp6: WOA
eServices-Chp6: WOA
 
BigData_Chp3: Data Processing
BigData_Chp3: Data ProcessingBigData_Chp3: Data Processing
BigData_Chp3: Data Processing
 
BigData_Chp2: Hadoop & Map-Reduce
BigData_Chp2: Hadoop & Map-ReduceBigData_Chp2: Hadoop & Map-Reduce
BigData_Chp2: Hadoop & Map-Reduce
 
Sécurité des Systèmes Répartis- Partie 1
Sécurité des Systèmes Répartis- Partie 1 Sécurité des Systèmes Répartis- Partie 1
Sécurité des Systèmes Répartis- Partie 1
 
eServices-Tp3: esb
eServices-Tp3: esbeServices-Tp3: esb
eServices-Tp3: esb
 
eServices-Tp5: api management
eServices-Tp5: api managementeServices-Tp5: api management
eServices-Tp5: api management
 
eServices-Tp4: esb++
eServices-Tp4: esb++eServices-Tp4: esb++
eServices-Tp4: esb++
 
eServices-Tp2: bpel
eServices-Tp2: bpeleServices-Tp2: bpel
eServices-Tp2: bpel
 
eServices-Tp1: Web Services
eServices-Tp1: Web ServiceseServices-Tp1: Web Services
eServices-Tp1: Web Services
 
BigData_TP5 : Neo4J
BigData_TP5 : Neo4JBigData_TP5 : Neo4J
BigData_TP5 : Neo4J
 

Similaire à Chp2 - Conception UX-UI des Applications Mobiles

Work n coffee : l'Ux design au service de ma performance
Work n coffee : l'Ux design au service de ma performanceWork n coffee : l'Ux design au service de ma performance
Work n coffee : l'Ux design au service de ma performanceNet Design
 
Agile france 2012 comment integrer ux et agile
Agile france 2012 comment integrer ux et agileAgile france 2012 comment integrer ux et agile
Agile france 2012 comment integrer ux et agileYannick Ameur
 
Mtl apptalks ux mobile et ucd - janvier 2014
Mtl apptalks   ux mobile et ucd - janvier 2014Mtl apptalks   ux mobile et ucd - janvier 2014
Mtl apptalks ux mobile et ucd - janvier 2014Loic Nunez
 
Innovation + Mobilité = ROI
Innovation + Mobilité = ROIInnovation + Mobilité = ROI
Innovation + Mobilité = ROIKlee Interactive
 
Page blanchea lapplicationwindows8
Page blanchea lapplicationwindows8Page blanchea lapplicationwindows8
Page blanchea lapplicationwindows8SOAT
 
Formation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et webFormation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et webNovUp
 
Rapport de projet symphony
Rapport de projet symphonyRapport de projet symphony
Rapport de projet symphonyTonySARR1
 
Convivialité (UX) pour les affichages et services numériques dans le processu...
Convivialité (UX) pour les affichages et services numériques dans le processu...Convivialité (UX) pour les affichages et services numériques dans le processu...
Convivialité (UX) pour les affichages et services numériques dans le processu...Immacon
 
Good Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UXGood Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UXNewflux UX/UI News
 
LMS : faire le choix de l'open source - Forum elearning Tunisie 2013
LMS : faire le choix de l'open source - Forum elearning Tunisie 2013LMS : faire le choix de l'open source - Forum elearning Tunisie 2013
LMS : faire le choix de l'open source - Forum elearning Tunisie 2013Jean-Luc Peuvrier
 
Ergonomie des IHM web - Grille d'analyse de Nielsen
Ergonomie des IHM web - Grille d'analyse de NielsenErgonomie des IHM web - Grille d'analyse de Nielsen
Ergonomie des IHM web - Grille d'analyse de NielsenElodieDescharmes
 
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019Oeil de Coach
 
Projets collaboratifs : faites la difference avec Confluence !
Projets collaboratifs : faites la difference avec Confluence !Projets collaboratifs : faites la difference avec Confluence !
Projets collaboratifs : faites la difference avec Confluence !Ideo - Groupe Netapsys
 
Comment l'accessibilité améliore la UX
Comment l'accessibilité améliore la UXComment l'accessibilité améliore la UX
Comment l'accessibilité améliore la UXMaeva Cecchi
 
Comment concevoir une experience utilisateur cross canal
Comment concevoir une experience utilisateur cross canalComment concevoir une experience utilisateur cross canal
Comment concevoir une experience utilisateur cross canalAkiani
 
Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3Anne-Marie Pinna-Dery
 
Mon processus de design en tant que PO sans UX designer - Agile Tour Lille 2016
Mon processus de design en tant que PO sans UX designer - Agile Tour Lille 2016Mon processus de design en tant que PO sans UX designer - Agile Tour Lille 2016
Mon processus de design en tant que PO sans UX designer - Agile Tour Lille 2016Anaël ICHANE
 

Similaire à Chp2 - Conception UX-UI des Applications Mobiles (20)

UX guidelines
UX guidelinesUX guidelines
UX guidelines
 
ESG - Lesson 5
ESG - Lesson 5ESG - Lesson 5
ESG - Lesson 5
 
Work n coffee : l'Ux design au service de ma performance
Work n coffee : l'Ux design au service de ma performanceWork n coffee : l'Ux design au service de ma performance
Work n coffee : l'Ux design au service de ma performance
 
Agile france 2012 comment integrer ux et agile
Agile france 2012 comment integrer ux et agileAgile france 2012 comment integrer ux et agile
Agile france 2012 comment integrer ux et agile
 
Mtl apptalks ux mobile et ucd - janvier 2014
Mtl apptalks   ux mobile et ucd - janvier 2014Mtl apptalks   ux mobile et ucd - janvier 2014
Mtl apptalks ux mobile et ucd - janvier 2014
 
Innovation + Mobilité = ROI
Innovation + Mobilité = ROIInnovation + Mobilité = ROI
Innovation + Mobilité = ROI
 
Page blanchea lapplicationwindows8
Page blanchea lapplicationwindows8Page blanchea lapplicationwindows8
Page blanchea lapplicationwindows8
 
Formation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et webFormation UX Design - Usages mobiles et web
Formation UX Design - Usages mobiles et web
 
Rapport de projet symphony
Rapport de projet symphonyRapport de projet symphony
Rapport de projet symphony
 
Ux
UxUx
Ux
 
Convivialité (UX) pour les affichages et services numériques dans le processu...
Convivialité (UX) pour les affichages et services numériques dans le processu...Convivialité (UX) pour les affichages et services numériques dans le processu...
Convivialité (UX) pour les affichages et services numériques dans le processu...
 
Good Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UXGood Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UX
 
LMS : faire le choix de l'open source - Forum elearning Tunisie 2013
LMS : faire le choix de l'open source - Forum elearning Tunisie 2013LMS : faire le choix de l'open source - Forum elearning Tunisie 2013
LMS : faire le choix de l'open source - Forum elearning Tunisie 2013
 
Ergonomie des IHM web - Grille d'analyse de Nielsen
Ergonomie des IHM web - Grille d'analyse de NielsenErgonomie des IHM web - Grille d'analyse de Nielsen
Ergonomie des IHM web - Grille d'analyse de Nielsen
 
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019
 
Projets collaboratifs : faites la difference avec Confluence !
Projets collaboratifs : faites la difference avec Confluence !Projets collaboratifs : faites la difference avec Confluence !
Projets collaboratifs : faites la difference avec Confluence !
 
Comment l'accessibilité améliore la UX
Comment l'accessibilité améliore la UXComment l'accessibilité améliore la UX
Comment l'accessibilité améliore la UX
 
Comment concevoir une experience utilisateur cross canal
Comment concevoir une experience utilisateur cross canalComment concevoir une experience utilisateur cross canal
Comment concevoir une experience utilisateur cross canal
 
Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3
 
Mon processus de design en tant que PO sans UX designer - Agile Tour Lille 2016
Mon processus de design en tant que PO sans UX designer - Agile Tour Lille 2016Mon processus de design en tant que PO sans UX designer - Agile Tour Lille 2016
Mon processus de design en tant que PO sans UX designer - Agile Tour Lille 2016
 

Plus de Lilia Sfaxi

chp1-Intro à l'urbanisation des SI.pdf
chp1-Intro à l'urbanisation des SI.pdfchp1-Intro à l'urbanisation des SI.pdf
chp1-Intro à l'urbanisation des SI.pdfLilia Sfaxi
 
Plan d'études_INSAT_2022_2023.pdf
Plan d'études_INSAT_2022_2023.pdfPlan d'études_INSAT_2022_2023.pdf
Plan d'études_INSAT_2022_2023.pdfLilia Sfaxi
 
Lab1-DB-Cassandra
Lab1-DB-CassandraLab1-DB-Cassandra
Lab1-DB-CassandraLilia Sfaxi
 
TP2-UML-Correction
TP2-UML-CorrectionTP2-UML-Correction
TP2-UML-CorrectionLilia Sfaxi
 
TP1-UML-Correction
TP1-UML-CorrectionTP1-UML-Correction
TP1-UML-CorrectionLilia Sfaxi
 
TP0-UML-Correction
TP0-UML-CorrectionTP0-UML-Correction
TP0-UML-CorrectionLilia Sfaxi
 
TD4-UML-Correction
TD4-UML-CorrectionTD4-UML-Correction
TD4-UML-CorrectionLilia Sfaxi
 
TD3-UML-Séquences
TD3-UML-SéquencesTD3-UML-Séquences
TD3-UML-SéquencesLilia Sfaxi
 
TD3-UML-Correction
TD3-UML-CorrectionTD3-UML-Correction
TD3-UML-CorrectionLilia Sfaxi
 
TD2 - UML - Correction
TD2 - UML - CorrectionTD2 - UML - Correction
TD2 - UML - CorrectionLilia Sfaxi
 
TD1-UML-correction
TD1-UML-correctionTD1-UML-correction
TD1-UML-correctionLilia Sfaxi
 
Android - Tp1 - installation et démarrage
Android - Tp1 -   installation et démarrageAndroid - Tp1 -   installation et démarrage
Android - Tp1 - installation et démarrageLilia Sfaxi
 
Android - Tp2 - Elements graphiques
Android - Tp2 - Elements graphiques Android - Tp2 - Elements graphiques
Android - Tp2 - Elements graphiques Lilia Sfaxi
 
Android - Tp3 - intents
Android - Tp3 -  intentsAndroid - Tp3 -  intents
Android - Tp3 - intentsLilia Sfaxi
 
Android - TPBonus - web services
Android - TPBonus - web servicesAndroid - TPBonus - web services
Android - TPBonus - web servicesLilia Sfaxi
 

Plus de Lilia Sfaxi (20)

chp1-Intro à l'urbanisation des SI.pdf
chp1-Intro à l'urbanisation des SI.pdfchp1-Intro à l'urbanisation des SI.pdf
chp1-Intro à l'urbanisation des SI.pdf
 
Plan d'études_INSAT_2022_2023.pdf
Plan d'études_INSAT_2022_2023.pdfPlan d'études_INSAT_2022_2023.pdf
Plan d'études_INSAT_2022_2023.pdf
 
Lab3-DB_Neo4j
Lab3-DB_Neo4jLab3-DB_Neo4j
Lab3-DB_Neo4j
 
Lab2-DB-Mongodb
Lab2-DB-MongodbLab2-DB-Mongodb
Lab2-DB-Mongodb
 
Lab1-DB-Cassandra
Lab1-DB-CassandraLab1-DB-Cassandra
Lab1-DB-Cassandra
 
TP2-UML-Correction
TP2-UML-CorrectionTP2-UML-Correction
TP2-UML-Correction
 
TP1-UML-Correction
TP1-UML-CorrectionTP1-UML-Correction
TP1-UML-Correction
 
TP0-UML-Correction
TP0-UML-CorrectionTP0-UML-Correction
TP0-UML-Correction
 
TD4-UML
TD4-UMLTD4-UML
TD4-UML
 
TD4-UML-Correction
TD4-UML-CorrectionTD4-UML-Correction
TD4-UML-Correction
 
TD3-UML-Séquences
TD3-UML-SéquencesTD3-UML-Séquences
TD3-UML-Séquences
 
TD3-UML-Correction
TD3-UML-CorrectionTD3-UML-Correction
TD3-UML-Correction
 
TD2-UML-Classes
TD2-UML-ClassesTD2-UML-Classes
TD2-UML-Classes
 
TD2 - UML - Correction
TD2 - UML - CorrectionTD2 - UML - Correction
TD2 - UML - Correction
 
TD1 - UML - DCU
TD1 - UML - DCUTD1 - UML - DCU
TD1 - UML - DCU
 
TD1-UML-correction
TD1-UML-correctionTD1-UML-correction
TD1-UML-correction
 
Android - Tp1 - installation et démarrage
Android - Tp1 -   installation et démarrageAndroid - Tp1 -   installation et démarrage
Android - Tp1 - installation et démarrage
 
Android - Tp2 - Elements graphiques
Android - Tp2 - Elements graphiques Android - Tp2 - Elements graphiques
Android - Tp2 - Elements graphiques
 
Android - Tp3 - intents
Android - Tp3 -  intentsAndroid - Tp3 -  intents
Android - Tp3 - intents
 
Android - TPBonus - web services
Android - TPBonus - web servicesAndroid - TPBonus - web services
Android - TPBonus - web services
 

Chp2 - Conception UX-UI des Applications Mobiles

  • 1. Chp2 : Design d’Applications Mobiles UX, Design Patterns et Meilleures Pratiques Conception et Développement d’Applications Mobiles GL4 (Option Mobile) - 2015 Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 1
  • 2. UI vs UX UI: User Interface (Interface Graphique) Technique: Ce que les clients utilisent pour interagir avec le produit UX: User eXperience (Expérience Utilisateur) Émotion: Ce que les clients ressentent en utilisant le produit Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 2 Design d’Applications Mobiles
  • 3. Style et Design: Pourquoi est-ce important? • La forme suit la fonction • Quel est le message de votre application? • Consistance • « Si cela se ressemble, cela doit agir de la même manière » (Android Style Guide) Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 3 Design Mobile
  • 4. USER EXPERIENCE (UX) Chp2: Design des Applications Mobiles Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 4
  • 5. UX Mobile : Définition et Composants • UX Mobile • Perceptions et sentiments des utilisateurs avant, pendant et après leur interaction avec le mobile • Obligation de repenser nos acquis par rapport à la conception d’applications desktop • Considérer • La petite taille de l’écran • Les différences de fonctionnalités entre les appareils • Les contraintes d’usage et de connectivité • Le contexte perpétuellement changeant et difficile à identifier • Disséquer l’expérience utilisateur mobile en plusieurs composants clefs Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 5 User Experience (UX)
  • 6. Composant 1: Fonctionnalités • Sélectionner les fonctionnalités pertinentes pour l’utilisateur • Guidelines • Offrir des fonctionnalités adaptées au smartphone (ex: lecture de bar- code) • Priorité aux fonctionnalités utilisées dans un environnement mobile (statut des vols, géolocalisation…) • S’assurer que les fonctionnalités fondamentales sont optimisées pour le mobile (num de téléphones clic-to-call par exemple) • Les capacités clefs doivent être disponibles sur tous les canaux (app ou site) Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 6 User Experience (UX)
  • 7. Composant 2: Architecture de l’Information • Arranger le contenu suivant une structure logique pour permettre aux utilisateurs de trouver les informations nécessaires et compléter leurs tâches • Guidelines • Prioriser selon les besoins de l’utilisateur • Minimiser le nombre de clics, rendre chaque clic utile • Utilisation de Patrons de Conception Mobiles • Rendre la navigation possible pour les écrans tactiles ou non tactiles • Faciliter la navigation: permettre le retour arrière, retour à la page principale… • Utiliser des noms clairs, concis et descriptifs pour les liens et boutons de navigation Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 7 User Experience (UX)
  • 8. Composant 3: Contenu • Plusieurs formats de données (texte, images et vidéo) offrant une information à l’utilisateur • Guidelines • Offrir un contenu adapté et équilibré • Utiliser un contenu multimédia peut avoir une valeur ajoutée, surtout quand l’objectif de l’application est le divertissement, ou l’apprentissage • Donner le contrôle à l’utilisateur sur le contenu multimédia: ne pas démarrer automatiquement une vidéo ou un son, par exemple • S’assurer que le contenu est approprié au mobile (optimisation d’images et média…) • S’assurer que le contenu est présenté dans un format supporté par l’appareil (on continue encore aux utilisateurs de iOS de télécharger Flash…) Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 8 User Experience (UX)
  • 9. Composant 4: Conception • Présentation visuelle et l’expérience interactive de l’appareil • Guidelines • “Mobilize, don’t miniaturize” (Ballard) et “Don’t shrink, Rethink” (Nokia) • Maintenir la consistance visuelle et l’originalité (couleur, typographie et personnalité) pour garantir une reconnaissance visuelle immédiate de la marque • Concevoir pour retenir l’information désirée en un coup d’œil • Définir un flux visuel: faire en sorte que l’élément principal de l’application te guide vers les autres fonctionnalités • Considérer à la fois l’orientation portrait et paysage Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 9 User Experience (UX)
  • 10. Composant 5: Entrées Utilisateur • Effort nécessaire pour produire des données • Doit être minimisé • Ne doit pas requérir les deux mains • Guidelines • Les formulaires mobiles doivent être efficaces et concis • Fournir une aide à la saisie (liste déroulante, auto-complete) le plus fréquemment possible • Offrir des modes de saisie alternatives selon l’appareil (mouvement, caméra, voix, géolocalisation…) • Changer le clavier selon les champs à saisir (par exemple, utiliser un clavier contenant la touche @ en première page pour taper une adresse email) • Considérer les suggestions de correction automatique (spell-check) pour réduire l’effort d’écriture Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 10 User Experience (UX)
  • 11. Composant 6: Contexte Mobile • L’ appareil peut être utilisé n’importe quand, n’importe où • Prendre en considération de l’environnement changeant rapidement • Autant considérer les conditions extrêmement inconfortables qu’extrêmement confortables • Guidelines • Utiliser les caractéristiques de l’appareil pour anticiper les besoins de l’utilisateur dans le contexte d’utilisation de l’application • Offrir la possibilité de naviguer avec la voix pour parcourir les recettes de cuisine! • Changer les caractéristiques de l’interface selon le moment d’utilisation (automatiquement changer de la vue de jour vers vue de nuit par ex.) • Utiliser l’emplacement pour afficher des informations de proximité • Utiliser UX par défaut selon l’appareil, et autoriser des améliorations Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 11 User Experience (UX)
  • 12. Composant 7: Usage (Usability) • A quel point est-ce que tous les éléments précédents (architecture de l’information, le design, contenu…) collaborent ensemble? • Guidelines • Bien montrer à l’utilisateur ce qui doit être sélectionné, cliqué ou balayé • Faire en sorte que les cibles soient de taille correcte et bien espacés • Placer les cibles dans des zones de l’écran appropriées • Certaines zones, difficiles d’accès, peuvent être utilisées pour la suppression • Réduire la courbe d’apprentissage en utilisant des conventions et patterns • Éviter d’utiliser des technologies qui ne sont pas supportées par toutes les plateformes Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 12 User Experience (UX)
  • 13. Composant 8: Confiance • Degré de confiance et d’aise que les utilisateurs ressentent en utilisant une application • Guidelines • Attention à la sécurité et au respect de la vie privée • Ne pas collecter et utiliser des informations personnelles sans autorisation • Laisser le contrôle à l’utilisateur concernant le partage de ses informations dans une application mobile • Indiquer clairement vos pratiques métier en offrant des liens explicites vers les politiques de sécurité Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 13 User Experience (UX)
  • 14. Composant 9: Feedback • Comment attirer l’attention de l’utilisateur et afficher les informations importantes? • Guidelines • Minimiser le nombre d’alertes et optimiser leur contenu • Rendre les notifications brèves, informatives et facilement supprimables • Fournir un feedback et confirmation sans interrompre le travail de l’utilisateur • Si votre application fournit des badges et des notifications sur la status bar: • Les garder à jour • Les supprimer uniquement quand l’utilisateur en a pris connaissance Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 14 User Experience (UX)
  • 15. Composant 10: Aide • Options, produits et services disponibles pour assister l’utilisateur dans la manipulation de l’application • Guidelines • Rendre l’accès à l’aide facile, et à un endroit distinguable par l’utilisateur • Offrir plusieurs moyens d’avoir un support • FAQ, appel, tweets… • Offrir un tutorial rapide à la première utilisation d’une application • Offrir une aide contextuelle et des conseils pour guider l’utilisateur quand l’application introduit un nouveau concept • Offrir des vidéos de support quand c’est nécessaire, mais donner à l’utilisateur le pouvoir le les contrôler (volume, arrêt,…) Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 15 User Experience (UX)
  • 16. Composant 11: Social • Contenu et fonctionnalités permettant de : • Créer une participation sociale • Provoquer une interaction utilisateur • Faciliter le partage sur les réseaux sociaux confirmés • Guidelines • Maintenir une présence dans les réseaux sociaux (page facebook par ex.) • Incorporer vos activités sociales dans votre site mobile en montrant vos récentes activités et offrant un moyen facile de vous suivre ou vous liker • Permettre aux utilisateurs de se connecter facilement à leur réseau social via votre application • Utiliser des APIs pour le partage, tag, like et commentaire • Inviter les utilisateurs à générer du contenu sur votre marque/société en contre-partie d’un gain potentiel Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 16 User Experience (UX)
  • 17. Composant 12: Marketing • Méthodes permettant aux utilisateurs de trouver l’application ou site • Facteurs encourageant l’utilisation répétée • Guidelines • Assurer votre visibilité en optimisant votre site/application pour la recherche mobile • Offrir, dans les résultats de recherche, un accès direct aux informations de localisation • Offrir un QR code (Quick Response) pour votre application • Promouvoir votre application sur d’autres canaux si possible (TV, impression…) et offrir des promotions pour son téléchargement/achat • Demander aux utilisateurs de noter et commenter votre application, et de partager leurs avis sur des réseaux sociaux Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 17 User Experience (UX)
  • 18. DESIGN PATTERNS D’INTERFACES MOBILES Chp2: Design des Applications Mobiles Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 18
  • 19. Interaction Mobile: Les Bases Mobile Action PC Toucher Je veux ça Cliquer Soumettre Fais-le! Soumettre Balayer Suivant, Bouger ou Supprimer Suivant Presser Fais quelque chose Double-clic / Clic droit Pincer (Pinch) Zoom out Barre de défilement Étaler (Spread) Zoom in Barre de défilement Rotation Rotation Barre de défilement Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 19 Design Patterns d’Interfaces Mobiles
  • 20. Patrons de Navigation Principaux Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 20 Patrons de Conception Mobile
  • 21. SpringBoard Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 21 Irrégulier Plusieurs pages Circulaire Avec Drill-Down
  • 22. List Menu Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 22 Liste catégorisée
  • 23. List Menu (Side Drawer) Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 23 Taperpour afficherle menu Overlay : la page principale est couverte
  • 24. List Menu (Side Drawer) Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 24 Glisserpour afficherle menu Inlay : la pageprincipale est poussée
  • 25. Tab Menu Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 25 Tabulations en bas Tabulations navigables
  • 26. Tab Menu Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 26 Tabulations en haut
  • 27. Tab Menu Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 27 Avec Boutons de Commande
  • 28. Tab Menu Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 28 Side bars (dans ce cas mal conçues car sans étiquettes, redondantes…)
  • 29. Tab Menu Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 29 Tab Menu (ou Bar) Toolbar ATTENTION !
  • 32. Métaphore (ou Skeuomorphic) Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 32
  • 34. Mega Menu Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 34
  • 35. Patrons de Navigation Secondaires • Navigation secondaire: naviguer à l’intérieur d’un autre élément Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 35 Patrons de Conception Mobile + tous les patronsde navigationprimairespeuventêtreutilisés ensemble
  • 36. Combinaisons Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 36 Tabs + Galerie Tabs + Metaphor Tabs + Springboard personnalisé
  • 37. Carousel de Page Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 37 Avec indicateurs de page (petits points)
  • 38. Carousel de Page Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 38 Trop de pages !
  • 39. Extension de Ligne Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 39
  • 40. Et ce n’ est pas fini… Ce ne sont QUE les patrons de navigation, il y’en a d’autres : • Formulaires • Tableaux • Recherche, Tri et Filtrage • Outils • Diagrammes • Invitations • Feedback • Aide (*) Lire le livre de Theresa Neil, « Mobile Design Pattern Gallery: UI Patterns for Mobile Applications » Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 40 Patrons de Conception Mobile *
  • 41. Anti-Patterns Les anti-patterns sont des classes de mauvaises solutions, communément utilisées, à des problèmes récurrents. A éviter… Sont en général causées par le besoin d’innover, de se montrer créatif, original, en utilisant des éléments graphiques non-standards Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 41 Patrons de Conception Mobile
  • 42. Un conseil… Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 42 Patrons de Conception Mobile Jusqu’à ce que vous connaissiez les standards UI mobiles!
  • 43. Anti-Patterns Le PCisme Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 43 Patrons de Conception Mobile
  • 44. Anti-Patterns Idiot Box Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 44 Patrons de Conception Mobile
  • 45. Anti-Patterns L’ océan de Boutons Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 45 Patrons de Conception Mobile
  • 46. Anti-Patterns • L’emplacement du menu n’est pas standard, surtout pour iOS • Trop de couleurs • Le text inversé est difficile à lire, il vaut mieux utiliser une liste de catégories Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 46 Patrons de Conception Mobile
  • 47. Anti-Patterns Résultats de recherche avec un scrollbar! Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 47 Patrons de Conception Mobile
  • 48. Anti-Patterns Besoin de faire un clic-long puis un glisser-déplacer pour sauvegarder.. Trop complexe et non- intuitif! Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 48 Patrons de Conception Mobile
  • 49. Anti-Patterns Le contrôle de luminosité se trouve sous l’icône du font! Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 49 Patrons de Conception Mobile
  • 50. Anti-Patterns Métaphore mal utilisée: représenter les requêtes du help desk comme étant une liste de shopping! Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 50 Patrons de Conception Mobile
  • 51. Anti-Patterns No Comment… Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 51 Patrons de Conception Mobile
  • 52. Références • Lyndon Cerejo http://www.smashingmagazine.com/2012/07/12/elements-mobile- user-experience/, article dans le magazine SmashingMagazine, publié en Juillet 2012, consulté le 6 mars 2015 • Dan Hermes, « Mobile Design Patterns », Boston Code Camps 21 • Theresa Neil, « Mobile Design Pattern Gallery: UI Patterns for Mobile Applications », O’Reilly Media, Février 2012 Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 52 Sites Web & Livres