Mtl apptalks ux mobile et ucd - janvier 2014

B.A.B.A du Design d’App mobile=

Conception centrée utilisateur

Loïc NunezMontreal appTalks

Janvier 2014

ca.linkedin.com/in/loicnunez

De quoi on parle ce soir ?

1. Conception centrée utilisateur

2. Recherche utilisateur Pourquoi ? Comment ? Objectif ? Quels outils ? Exemple du test utilisateur « agile »

3. Bonnes pratiques, trucs et astuces


La conception centrée utilisateur consiste à considérer les utilisateurs, leurs besoins, leurs contextes d’usages, leurs motivations et leurs enjeux au centre de la conception d’un produit ou d’un service.


Elle repose sur la norme ISO 9241-210


Définition

Le concept d'utilisateur dans ce contexte est à deux niveaux :


1. L'utilisateur réel :

celui qui utilisera ou utilise déjà le produit dans sa version actuelle.


2. L'utilisateur potentiel :

qui a les mêmes caractéristiques, et qui représente les usagers cibles. Utilisés pour la recherche.


Concept

Pour augmenter les chances de succès d’un produit, ce sont les utilisateurs qui doivent orienter ses caractéristiques, et non la technologie ou les seuls besoins d’affaires.


Concept

C’est tout le processus de conception qui est orienté utilisateur. Il doit être inclus aux prémices du projet (validation du concept), et de façon itérative (validation des étapes).


Étapes


Principe 1/5

Une préoccupation amont des utilisateurs, de leurs tâches et de leur environnement.


Principe 2/5

La participation active de ces utilisateurs, ainsi que la compréhension claire de leurs besoins et des exigences liées à leurs activités, besoins, motivations…


Principe 3/5

Une répartition appropriée des fonctions entre les utilisateurs, les besoins d’affaires et la technologie.


Principe 4/5

L'itération des solutions de conception : on peut s'imaginer le cycle comme une spirale, une démarche qui boucle et reboucle jusqu'à ce que le système satisfasse aux exigences définies au départ.


Principe 5/5

L'intervention d'une équipe de conception multidisciplinaire. La CCU met l’emphase sur la notion d'expérience utilisateur comme étant au carrefour de disciplines différentes : recherche, ergonomie, communications, design, marketing, technologie, qualité, support ...


En résumé

Créer un produit de façon itérative, en plaçant au cœur de la démarche de conception ses utilisateurs cibles

2. La recherche utilisateur

Pourquoi ?


Pour connaître vos usagers : ✓Besoins ✓Contextes d’usages✓Manques✓Frustrations✓Expérience avec la marque et le produit✓…

Pourquoi ?



Comment ?


Comment ?


AVANT :Analyse de l’activité, enquêtes, groupes de discussions, Personas, modèle mental

PENDANTClassement de carte, Scénarios d’usages, Tests utilisateurs

APRÈSTests utilisateurs, analyse experte, mise à jour des Personas

Comment ?


Objectifs ?


Objectifs ?


Objectifs ?

Faire évoluer ses besoins d’affaires pour mieux rejoindre ceux des usagers


Quels outils ?



Exemple du test utilisateur

2. Tests utilisateurs


Objectifs

✓Pour observer des usagers qui utilisent RÉELLEMENT votre service

✓Pour faire ressortir rapidement les bloquants

✓Pour vérifier si l’usager peut effectuer sa tâche avec efficacité, efficience et satisfaction … sans erreurs …et avec une courbe d’apprentissage rapide.


Méthode

- Créer un plan de test qui reflète les activités sur le produit

- Recruter des participants représentatifs des utilisateurs cible

- Observer 1 à 1 les participants en situation d’usage- Mesurer l’efficacité (réussite/échec), l’efficience

(temps de réalisation), la satisfaction (adéquation aux attentes, convivialité), le nombre d’erreurs et la courbe d’apprentissage

3. Bonnes pratiques, trucs et astuces

Touch Gesture Reference Guide: static.lukew.com/TouchGestureGuide.pdf

3. …/ Gestuelles

http://static.lukew.com/TouchGestureGuide.pdf

En résumé

- Utilisez les gestuelles simples et connues pour les interactions associées aux principales tâches

- Utilisez des gestuelles « multitouch » plus complexes seulement pour des fonctions avancées, et secondaires

3. …/ Gestuelles

http://www.uc.edu/content/dam/uc/ucomm/docs/mobile/mobile-usability_highlighted.pdf

3. …/ Les usages avec un mobile

http://www.uc.edu/content/dam/uc/ucomm/docs/mobile/mobile-usability_highlighted.pdf


En résumé 1/3

- Les sites Web sont plus utilisés que les Apps

- L’usage des Apps est préféré pour les usages fréquents auxquels l’utilisateur est attaché (Facebook, Plan…)


En résumé 2/3

- Les situations d’usages évoluent avec les habitudes, la performance des réseaux, et les possibilités des téléphones intelligents (géolocalisation, écran HD…)


En résumé 3/3

- Nombreux sont les utilisateurs qui préfèrent naviguer sur leur canapé avec leur mobile plutôt que leur laptop. Ils s’attendent donc à obtenir les mêmes services, mais adaptés à leur (petit) écran tactile

3. …/ Application ou site Web ?

WEB APPLICATION

+

-

Pas d’installation requise1 version pour tous les OSCoûts de développement plus basLa montée en puissance de l’HTML 5Pas de mises à jour nécessaireAccessible directement via Google

Pas adapté aux guides des OS Plus lent qu’une App nativeMode hors ligne difficile, mais ça vient Créer un raccourci : fonction peu connue

Interaction plus rapidesFacilement accessible sur le mobileAdapté au guide de l’OSMode hors ligne facilement disponible

Coûts de développements plus élevésNécessite une installation, même pour un usage uniqueLes contraintes imposées par le App StoreUne version différente pour chaque OSMises à jour fréquentes

3. …/ Les grilles d’analyses UX

Les principales

- Mölich et Nielsen (1990)

- Bastien et Scapin (1993) Ergonomie

- Nielsen (1994)

- Brangier et Al (2011) Persuasion


Bastien et Scapin

1. Guidage.2. Charge de travail.3. Contrôle explicite.4. Adaptabilité.5. Gestion des erreurs.6. Homogénéité / cohérence.7. Signifiance des codes et dénomination.8. Compatibilité.


Brangier et Al

Plus de détails : http://www.univ-metz.fr/ufr/sha/2lp-etic/ANEBSK_SELF_Toulouse2009_V3x.pdf

3. …/ Les grilles d’analyses UXExemple d’évaluation experte

3. …/ Architecture d’information4 étapes

1 - Définir les contenus et services

2 - Définir une stratégie

3 - Catégoriser les contenus

4 - Organiser et structurer les contenus

3. …/ Architecture d’information4 étapes

Définir les contenus Catégoriser les contenus Structurer les contenus

3. …/ Architecture d’informationOutils de recherche utilisateur : classement de carte

3. …/ Bonnes pratiques de conceptionGuidage


Un bouton « Back » bien en évidence pour revenir en arrière (non utile pour Android)

Un rappel du titre de l’article sélectionné dans la liste d’articles

La présence de pastille qui invite l’utilisateur à « balayer » l’écran. C’est aussi un bon indicateur du nombre de page dans l’article


Un titre clair qui appel à l’action

Une grande image qui assure un bon niveau de « cliquabilité »

Une flèche à droite de la cellule qui indique une continuité du contenu


Un accès direct au menu de navigation, identique sur tous les écrans de l’App

Un bouton « Play » indiquant la présence d’une vidéo

Un icône « commentaire » qui indique le nombre de commentaires effectués sur cet article

3. …/ Bonnes pratiques de conceptionCharge de travail

Wikipédia Bourse (iOS) The Guardian


Un texte d’introduction permet de cerner rapidement un sujet sans devoir lire tout l’article

La catégorisation des contenus facilite :- la compréhension de la structure globale- l’accès direct à une information

Le mode « Afficher / Masquer » facilite :- le parcours rapide d’un (petit) écran- l’affichage d’un seul type de contenu à la fois


Une indication rapide de la tendance positive ou négative des différent niveau de valeurs

Une vue des principales valeurs boursières, qui évite la nécessité de parcourir toutes les cotes

Une vue graphique de l’évolution du marché, plus simple qu’un tableau complexe de données


Une consigne courte et simple pour réaliser la tâche

Un accès simple et très souvent utilisé dans les Apps pour effectuer le changement de l’ordre des sections

Un système d’interaction simple et ludique pour choisir un paramètre

3. …/ Bonnes pratiques de conceptionContrôle explicite

The Guardian STM Facebook


Une action claire et simple pour le téléchargement de plusieurs sections à la fois

Une action directe sur le paramétrage de la fonction


- L’interface propose une mise à jour non obligatoire- La mise à jour ne se fait pas de façon automatique et laisse le contrôle à l’utilisateur


L’interface propose l’accès à de nouvelles données, mais ne force pas la réactualisation automatique de la page

L’utilisateur à le contrôle de son interface : il peu choisir d’afficher de nouvelles informations ou de continuer à consulter le reste de la page

3. …/ Bonnes pratiques de conceptionAdaptabilité

La Presse iOS Météo Média


L’interface permet de régler des paramètres de lecture liés aux caractéristiques et besoins des utilisateurs

L’utilisateur à la possibilité de modifier l’ordre des contenus selon ses goûts et habitudes d’usage


L’interface permet d’ajouter et de supprimer destypes de contenus selon les besoins de l’utilisateur

L’utilisateur à la possibilité de modifier l’ordre des contenus selon ses besoins


L’interface permet de régler des paramètres d’affichage liés aux caractéristiques et besoins des utilisateurs

3. …/ Bonnes pratiques de conceptionGestion des erreurs

Desjardins Site Web Marmiton.caLa Presse


L’interface affiche une alerte pour indiquer la présence et le type d’erreur


L’interface affiche une alerte pour indiquer la présence et le type d’erreur

L’interface propose un accès direct pour récupérer ses informations de connexion en cas d’erreur ou d’oublie de ses informations


L’interface affiche la liste des erreurs et leurs emplacements

Attention : la couleur n’est pas suffisante pour un bon repérage. Il est conseillé d’ajouter d’autres indices visuels, comme l’encadrement d’un champ ou des éléments iconographiques (ex : )

3. …/ Bonnes pratiques de conceptionHomogénéité / Cohérence

Radio Canada La Presse Facebook


L’interface affiche les mêmes contrôles utilisateurs pour l’ensemble des pages d’articles

L’interface affiche le même format d’écran pour l’ensemble des pages d’articles


L’interface affiche un mode similaire de présentation des informations sur les version iPhone et iPAD du même produit

L’ordre des items du menu et des blocs d’information de la page d’accueil est le même


L’interface affiche les contenus et une mise en page très proche entre les plates-formes mobile et Web

3. …/ Bonnes pratiques de conceptionSignifiance des codes et dénomination

duProprio Google + Ted Mobile


La flèche indique l’accès au détail du contenu

Les icônes en forme de maison indiquent la présence d’une maison à vendre

Cet icône, en forme de cible ou de viseur, permet de situer la position de l’utilisateur sur la carte


Selon le niveau de familiarité des utilisateurs cible avec les icônes du même genre d’interface et d’OS, on affiche l’accès aux fonctionnalité par iconographieou par texte


Les icônes sont accompagnés de leurs libellés pour une meilleure compréhension de leurs fonctions

3. …/ Bonnes pratiques de conceptionCompatibilité

CBC Linkedin Flipboard


L’interface s’adapte pour être compatible avec le niveau de connaissance de l’utilisateur : un message explique comment créer un raccourci du site sur le iPhone


L’interface de la version Web est compatible avec les gestuelles possibles sur un écran tactile


L’interface rend accessible une fonctionnalité multiplateforme, avec une aide claire et compréhensible selon les caractéristiques des utilisateurs cibles

Quelques sources à explorerUXPA Québec : http://www.uxpaquebec.org/

Tout le monde UX : http://toutlemonde-ux.com/

Ergonomia : http://www.ergonomia.ca/

UX Mag / Six Mobile Myths : http://uxmag.com/articles/six-mobile-myths

UX Archive : http://uxarchive.com/

Design for mobile part 1 & 2 : http://goo.gl/e7qdFG

Formations en Ergonomie des interfaces mobile : http://goo.gl/jnXsZr Formation Universitaire à Polytechnique Montréal : http://goo.gl/4wQf3V

http://www.uxpaquebec.org/

http://toutlemonde-ux.com/

http://www.ergonomia.ca/

http://uxmag.com/articles/six-mobile-myths

http://uxarchive.com/

http://goo.gl/e7qdFG

http://goo.gl/jnXsZr

http://goo.gl/4wQf3V

Merci !!

Courriel : [email protected]

Linkedin : ca.linkedin.com/in/loicnunez

Maîtrises (master 2) en :- Ergonomie cognitive (2000)- Psychologie du travail (2004)

Certification en :Accessibilité du Web (2006)

mailto:[email protected]