CONCEPTION D IHM ADAPTÉS À LA PLATEFORME MIAGE 2 PLASTICWEB SYBILLE CAFFIAU ANNÉE 2014-2015

OBJECTIFS DE LA SÉANCE Vous avez : Un sujet avec des règles de jeu Une équipe de conception Des utilisateurs cibles Au moins 2 scénarios d utilisation différente de plateformes Du code (que vous récupérerez jeudi) qui permet de se logger, d initialiser un plateau de jeu, de rejoindre une partie, de vérifier qu un coup est possible, de savoir si la partie est terminée Vous voulez : Savoir ce que vous allez développer pour l IHM

DES ÉTAPES POUR GUIDER LA CONCEPTION Définition des tâches Définition des opérations Définition de la méta-ihm Création des espaces de travail Implémentation

ETAPE 1 : DÉFINITION DES TÂCHES Exemple pour un «maître du jeu» 2 scénarios : Création d un jeu par la métaphore du peintre Création d un jeu par construction

SCÉNARIO MAITRES DU JEU Création d un jeu par la métaphore du peintre. Adrien veut créer une nouvelle partie. Pour cela, il va utiliser la fonctionnalité de création disponible avec sa tablettes et la table interactive. Adrien commence par créer une partie et lui donner un nom puis se connecte avec sa tablette sur cette nouvelle partie. En utilisant sa tablette, il complète le plateau de jeu présenté sur la table. Il place les murs, la cible et les robots. Sur la tablette sont présentés les éléments à positionner et sur la table le plateau en cours de création. Lorsqu il est satisfait de son plateau (et que tous les éléments obligatoires sont présents), il permet aux joueurs de jouer sur son plateau.

SCÉNARIO MAITRES DU JEU Création d un jeu par construction Adrien, Pauline, Sophie, Robert veulent créer leur propre partie. Pour cela, ils vont utiliser la fonctionnalité de création disponible avec leurs tablettes. Adrien commence par créer une partie et lui donner un nom puis affiche sur sa tablette le plateau de jeu d une partie. Pauline, Robert et Sophie en font de même. Ils cognent leurs tablettes respectives pour composer un nouveau plateau de jeu composé des 4 plateaux des parties choisies. Le nouveau plateau est ensuite prêt pour être édité.

ETAPE 1 : DÉFINITION DES TÂCHES Exemple pour un «maître du jeu» 2 scénarios : Création d un jeu par la métaphore du peintre Création d un jeu par construction => Tâche : créer un jeu

ETAPE 1 : DÉFINITION DES TÂCHES Exemple pour un «maître du jeu» 2 scénarios : Création d un jeu par la métaphore du peintre Création d un jeu par construction Tâche : créer un jeu Gestion de «tournois»

SCÉNARIO MAITRES DU JEU Gestion de «tournois» Robert a décidé d organiser un mini-tournoi auquel il fait participer quelques uns de ses amis. A chaque tour du tournoi, il choisit les parties qui vont être jouées et les attributs aux participants. À tout moment, il peut voir pour chaque participant ses caractéristiques (nombre de parties gagnées/perdues ) et pour chaque partie les meilleurs scores obtenus (le nombre minimum de coups). Les informations complémentaires sur une partie sont affichées en utilisant un fish-eye sur des interfaces tactiles.

ETAPE 1 : DÉFINITION DES TÂCHES Exemple pour un «maître du jeu» 2 scénarios : Création d un jeu par la métaphore du peintre Création d un jeu par construction Tâche : créer un jeu Gestion de «tournois» Tâche : gérer un tournois

ETAPE 2 : DESCRIPTION DES TÂCHES Pour chaque tâche de haut niveau : détailler les sous-tâches Exemple : Création d un jeu par la métaphore du peintre. Adrien veut créer une nouvelle partie. Pour cela, il va utiliser la fonctionnalité de création disponible avec sa tablettes et la table interactive. Adrien commence par créer une partie et lui donner un nom puis se connecte avec sa tablette sur cette nouvelle partie. En utilisant sa tablette, il complète le plateau de jeu présenté sur la table. Il place les murs, la cible et les robots. Sur la tablette sont présentés les éléments à positionner et sur la table le plateau en cours de création. Lorsqu il est satisfait de son plateau (et que tous les éléments obligatoires sont présents), il permet aux joueurs de jouer sur son plateau.

ETAPE 2 : DESCRIPTION DES TÂCHES Ajouter les décorations pour «généraliser»

ETAPE 2 : DESCRIPTION DES TÂCHES Prendre en compte tous les autres scénarios Exemple : Création d un jeu par construction Adrien, Pauline, Sophie, Robert veulent créer leur propre partie. Pour cela, ils vont utiliser la fonctionnalité de création disponible avec leurs tablettes. Adrien commence par créer une partie et lui donner un nom puis affiche sur sa tablette le plateau de jeu d une partie. Pauline, Robert et Sophie en font de même. Ils cognent leurs tablettes respectives pour composer un nouveau plateau de jeu composé des 4 plateaux des parties choisies. Le nouveau plateau est ensuite prêt pour être édité.

ETAPE 2 : DESCRIPTION DES TÂCHES

DÉFINITION DES OPERATIONS Pour chaque tâche concrète : décrire comment elle est réalisée Exemple :

DÉFINITION DES OPERATIONS Pour chaque tâche concrète : décrire comment elle est réalisée Exemple : Imaginons la réalisation de la tâche : - Si un seul créateur du jeu - Si plusieurs créateurs connectés pour un même jeu

DÉFINITION DES OPERATIONS Pour chaque tâche concrète : décrire comment elle est réalisée Exemple : Imaginons la réalisation de la tâche : - Si un seul créateur du jeu : sur une palette sur le smartphone sélection de la cible et sur le plateau en édition touch de la case - Si plusieurs créateurs connectés pour un même jeu : lorsque tous les murs sont placés, les joueurs valident les positions des murs, le système indique plusieurs positions possibles et les utilisateurs votent. La cible est placée là où il y a le plus de vote.

ADAPTATION DES OPERATIONS : PENSEZ AU CONTEXTE Ne pas oublier le contexte d utilisation Utilisation de tablette, liseuse et smartphone (août 2011) (http://www.ergonomie-iphone.com/infographie-usage-du-web-mobile/)

REALISATION DE LA META-IHM Pour chaque tâche concréte, il y a plusieurs opérations possibles, il faut décrire dans quels cas réaliser quelle(s) opération(s) Exemple : si <un seul maitre du jeu en création et smartphone et table interactif sont connectés ensemble> alors utiliser le déroulement D

CONCEPTION DE LA META-IHM Pour réaliser une opération il est nécessaire d allouer un «espace» pour avoir une information ou faire une action qui sera disponible au bon moment dans la bonne situation Un espace de travail est une zone qui présente tous les concepts nécessaires pour réaliser une operation Espace de travail Page Possibilité de présenter plusieurs espaces de travail sur une seule page Prévoir pour chaque configuration Plateforme Association de plateforme Utilisateur connecté

DES TÂCHES AUX FONCTIONNALITÉS

DES TÂCHES AUX FONCTIONNALITÉS Diaporama des photos Naviguer dans les albums Visualiser les photos

DES OPERATIONS AUX PAGES : ÉTAPE 1 Operations : - Naviguer dans les albums - Visualiser les photos - Diaporama des photos 1 espace par fonctionnalité Naviguer dans les albums Visualiser les photos Diaporama des photos Associations entre espaces (à partir des opérateurs de l arbre de tâches) - «Naviguer dans les albums» et «Visualiser les photos» sont dépendants l un de l autre (l un puis l autre, retour au premier ) - «Diaporama» n a pas besoin des 2 autres Naviguer dans les albums Visualiser les photos Diaporama des photos

CREATION DE LA META-IHM Relever les contraintes pour la répartition des espaces de travail par page : Les enchaînements imposés Naviguer dans les albums Visualiser les photos Diaporama des photos Les différentes configurations techniques Cas de l exemple : 2 plateformes possibles, 1 utilisateur connecté, plateformes utilisées seules ou combinées Config 1 : Ordinateur de bureau seul, utilisateur = Bob Config 2 : SmartPhone seul, utilisateur = Bob Config 3 : Ordinateur et Smartphone, utilisateur = Bob

CREATION DE LA META-IHM Répartition par configuration Config 1 Config 2 Naviguer dans les albums Page NV Page N Visualiser les photos Page NV Page V Diaporama des photos Page DO Page DS Config 3 SmartPhone Ordinateur de bureau Naviguer dans les albums Visualiser les photos Diaporama des photos Page N Page DC (contrôle) Page VO Page DOA (affichage)

DE LA CREATION DE LA META- IHM À L IMPLEMENTATION Concevoir chaque page Code : un espace = un DIV Naviguer dans les albums Visualiser les photos Diaporama des photos Config 1 Page NV Page NV Page DO Mettre les espaces définies précédemment Ajouter les moyens de naviguer (passer aux pages suivantes) Ajouter les fonctionnalités utiles (recherche, logo )

CREATION DES ESPACES DE TRAVAIL Adaptation de l interaction Adaptation de la présentation Contexte d usage Zones d activités Listes Une surface ne se distingue pas d une autre QUE par sa taille Il FAUT adapter les principes de conception (recommandations adaptées )

ADAPTATION DE L INTERACTION Repenser toutes les interactions technique/dispositif utilisé Ex : dispositif d entrée Souris/clavier physique stylet doigt précision ++ + - intuitivité - + ++ séquence d action Ex : majuscule sur clavier Clavier physique Shift+lettre (en même temps) Clavier numérique (tactile) Shift PUIS lettre

DU CURSEUR AU TACTILE Des commandes (pour le tactile : static.lukew.com/touchgestureguide.pdf) Adaptées à la technique Redéfinies pour chaque technique 34

DU STATIQUE AU MOBILE Modification des «outils» à disposition (ex : accéléromètre) Passage à une interaction 3D 35

ADAPTATION DE LA PRÉSENTATION : EN RÉSUMÉ Ce que l on adapte L organisation des fonctionnalités La présentation des «ensembles» : Menu Listes

PASSAGE D UNE PLATEFORME À L AUTRE : LES ESPACES DE TRAVAIL Logo Navigation - Menu Identification Publicité Navigation - Favoris Recherche Personnalisation - Barre personnalisée Tuto Retour Logo Navigation - Fil d Ariane Image Publication d info - Carte Recherche Navigation Fil d Ariane Navigation - Menu Publication d info - Carte Navigation Les rubriques 37

DES FONCTIONNALITÉS AUX PAGES : ÉTAPE 4 Placement des zones d activités dans les pages Attention à prendre en compte les spécificités de chaque plateforme Ex : les zones à interaction «facile» pour le tactile Des éléments à redéfinir : Menu Liste Formulaire

ADAPTATION DE LA PRÉSENTATION : EN RÉSUMÉ Ce que l on adapte L organisation des fonctionnalités La présentation des «ensembles» : Menu Listes

LA PRÉSENTATION DU MENU La structure Organisation des fonctionnalités adaptées Ex : Minimiser le nombre de clic sur smartphone 1) Permettre l action rapide (2 pages max) sur les fonctionnalités les plus utilisées 2) Utiliser chaque élément. Exemple : le logo pour revenir à la page d accueil Les menus différents Adaptés au type d entrée (clic avec pointeur ou doigt) Adaptés à l orientation et la taille de la surface d affichage 40

LA PRÉSENTATION DU MENU La structure Les fonctionnalités réorganisées But : Minimiser le nombre de clic sur smartphone 1) Permettre l action rapide sur les fonctionnalités les plus utilisées 2) Utiliser chaque élément. Exemple : le logo pour revenir à la page d accueil Les menus différents 41 Adaptés au type d entrée (clic avec pointeur ou doigt) Adaptés à l orientation et la taille de la surface d affichage

LES LISTES : GÉNÉRALITÉS Pourquoi des listes? On aime avoir le choix parmi un grand nombre de produits mais paradoxalement nos processus de décision s enclenchent mieux lorsque le choix est plus réduit (Lyengar & Lepper 2000) Besoin de rendre comparables des éléments => La liste doit rendre identifiables et comparables les éléments Pour la comparaison : Les listes sont meilleures que les tableaux Peuvent lier comparaison et navigation

LES LISTES POUR LES SITES COMMERCIAUX Pour les sites commerciaux : plus il y a d articles vus, plus il y a de chance que le visiteur achète => beaucoup d infos Les internautes y passent beaucoup de leur temps (et ont un impact sur le choix et l envie d achat) Action la plus fréquente : cliquer sur un endroit pour avoir plus de détail

LES DIFFÉRENTES LISTES Les listes-widget Cachent le contenu Permet de laisser le cas le plus courant sans intervention de l utilisateur => Ne sont à utiliser que pour des éléments explicites et non nécessaires dans la majorité des scénarios Les listes avec présentation d informations Sur plusieurs pages ou pas Navigation «horizontale» ou «verticale»

LISTES AVEC PRÉSENTATION D INFORMATIONS : COMMENT CHOISIR? Préambule : Avoir un ordre de grandeur du nombre d éléments dans la liste Savoir quelle facette présenter par élément (la place occupée pour un élément) Eviter à l utilisateur des clics inutiles pour aller chercher des infos Est ce que mes éléments peuvent être affichés sur une seule page? une page non oui Selon la plateforme et l utilisateur, quel est le geste le plus facile à faire? Pour une liste très longue prévoir un moyen de revenir au début de la liste Est ce que je peux regrouper mes éléments en sous rubriques (pertinentes)? non Que préférez vous : Une page ou plusieurs? plusieurs Scroller est plus naturelle que passer à la page suivante ou précédente Présenter le nombre de pages

LISTE : OUTILS D AIDE Recherche d un produit/d une catégorie Tri de listes : Utiliser les facettes pour restreindre la liste des produits Faire attention aux critères de tri Navigation Pages Retour à la page précédente

PAUSE PROJET Réalisez ces étapes pour concevoir les pages de vos applications Pensez à être original pour l interaction Exemple : http://www.dailymotion.com/video/ x577lc_rr-320x240-divx5-web_tech

QUELQUES EXEMPLES DE SCENARIOS

SCÉNARIO MAITRES DU JEU Création d un jeu par la métaphore du peintre. Adrien veut créer une nouvelle partie. Pour cela, il va utiliser la fonctionnalité de création disponible avec sa tablettes et la table interactive. Adrien commence par créer une partie et lui donner un nom puis se connecte avec sa tablette sur cette nouvelle partie. En utilisant sa tablette, il complète le plateau de jeu présenté sur la table. Il place les murs, la cible et les robots. Sur la tablette sont présentés les éléments à positionner et sur la table le plateau en cours de création. Lorsqu il est satisfait de son plateau (et que tous les éléments obligatoires sont présents), il permet aux joueurs de jouer sur son plateau.

SCÉNARIO MAITRES DU JEU Création d un jeu par construction Adrien, Pauline, Sophie, Robert veulent créer leur propre partie. Pour cela, ils vont utiliser la fonctionnalité de création disponible avec leurs tablettes. Adrien commence par créer une partie et lui donner un nom puis affiche sur sa tablette le plateau de jeu d une partie. Pauline, Robert et Sophie en font de même. Ils cognent leurs tablettes respectives pour composer un nouveau plateau de jeu composé des 4 plateaux des parties choisies. Le nouveau plateau est ensuite prêt pour être édité.

SCÉNARIO MAITRES DU JEU Gestion de «tournois» Robert a décidé d organiser un mini-tournoi auquel il fait participer quelques uns de ses amis. A chaque tour du tournoi, il choisit les parties qui vont être jouées et les attributs aux participants. À tout moment, il peut voir pour chaque participant ses caractéristiques (nombre de parties gagnées/perdues ) et pour chaque partie les meilleurs scores obtenus (le nombre minimum de coups). Les informations complémentaires sur une partie sont affichées en utilisant un fish-eye sur des interfaces tactiles.

SCÉNARIO JOUEUR Jeu Nicolas se logue au jeu. La liste des parties est présentée. Nicolas en choisit une. Le plateau de jeu se présente ainsi que la liste des autres personnes connectée en train de jouer sur la même partie. Lorsqu il a trouvé une solution, il déplace les robots pour que la cible soit atteinte.