La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

21 novembre 2012 Grégory Petit

Présentations similaires


Présentation au sujet: "21 novembre 2012 Grégory Petit"— Transcription de la présentation:

1 21 novembre 2012 Grégory Petit

2 La semaine dernière Conception centrée utilisateur Analyse des besoins Maquette Validation

3 Et donc on fait quoi aujourdhui? Les critères ergonomiques Design des pages Web

4 Les critères ergonomiques

5 Ergonomie dun site Web Un site Web doit être beau! Mais il doit surtout être utilisable! Un site peut être le plus beau du monde mais il ne servira à rien si les usagers ne peuvent rien faire dessus! Il existe donc des critères ergonomiques pour améliorer leur utilisabilité.

6 La manipulation directe selon Schneiderman (1982) Pourquoi certaines interfaces sont-elles faciles à utiliser? Lutilisateur voit bien le résultat de chacune de ses actions (résultat, rétroaction) Lutilisateur voit chaque action seffectuer Linterface est physiquement évidente Laction est continue, instantanée, progressive et réversible Lutilisateur a toujours le contrôle Les informations sont visibles Linterface est flexible, adaptable selon lusager Utilisabilité

7 Principes de Bastien et Scapin (1993) Guidage Charge de travail Contrôle explicite Adaptabilité Gestion des erreurs Homogénéité/Cohérence Signifiance des codes et des dénominations Compatibilité

8 Guidage Conseiller, orienter, informer et conduire lutilisateur : Incitation On incite les utilisateurs à faire des actions biens spécifiques (ex : Allociné)Allociné Groupement et distinction des items par la localisation et le format (ex : sites de nouvelles) Feedback immédiat Lisibilité

9 Charge de travail Réduire la charge perceptive et mnésique de lutilisateur : Brièveté Limiter le travail de lecture, d'entrée et les étapes par lesquelles doivent passer les usagers (concision et actions minimales) Densité informationnelle Limiter la densité informationnelle de lécran en affichant seulement les information nécessaires

10 Contrôle explicite Actions explicites Les actions possibles des utilisateurs dans lapplication doivent être le plus explicites possibles (ex : « Voter » et non pas « Valider » dans les machines à voter électroniques) Contrôle utilisateur Lutilisateur est toujours le patron. Il doit toujours pouvoir contrôler le déroulement du traitement de linformation par lapplication (ex : sauvegarde dans Office)

11 Adaptabilité Lapplication doit pouvoir réagir selon le contexte, les besoins et préférences de lutilisateur Flexibilité Interface personnalisable en fonction des habitudes et stratégies de lutilisateur (ex : Netvibes)Netvibes Prise en compte de lexpérience utilisateur (ex : UdeM)UdeM

12 Gestion des erreurs Eviter ou réduire les erreurs, et savoir les corriger lorsquelles apparaissent (ex : Google)Google Protection contre les erreurs Prévoir toutes les actions possibles pour détecter les possibles erreurs de manipulation par lutilisateur Qualité des messages derreurs Il doit être clair et précis pour que lutilisateur puisse corriger ses erreurs Correction des erreurs Lutilisateur doit pouvoir corriger ses propres erreurs

13 Homogénéité/Cohérence Les différente parties de linterface doivent garder les mêmes localisations et même styles si le contexte dutilisation des informations est identique ex : barre de recherche, menu, etc. toujours au même endroit

14 Signifiance des Codes et Dénominations Consistance et cohérence interne réutilisation des mêmes codes dans des situations similaires Cohérence externe Emploie de métaphores correctes et appropriées entre linformation ou lobjet affiché, et son référent. Ex : le panier dans les sites dachat en ligne

15 Compatibilité Les termes employés doivent être familiers aux utilisateurs et relatifs à la tâche à effectuer. Accessibilité!!!

16 Design des pages Web

17 Un contexte général doit être présent sur la page daccueil. Créer des blocs fonctionnels : Définir les blocs fixes (éviter le défilement dans ces blocs). Regrouper les informations et les organiser dans l'ordre naturel de lecture et d'action (sauf les blocs fonctionnels).

18 Navigation Maximum 3 clics pour atteindre linformation (idéal). Cohérence interne. Utiliser la hiérarchie de sections jusquà trois. Menus textuels et pas seulement par des icônes (plus rapide). Réduire le nombre de liens dans les pages pour avoir du vrai contenu.

19 Navigation Si le site est grand, on peut fournir deux niveaux de navigation (2 menus). Le survol et le grossissement peuvent aider à la navigation Choisir de bons labels éviter « Cliquer ici », « Valider » Mettre des liens internes (ancres), si les pages sont longues. Réviser les liens internes et externes régulièrement. Faire ouvrir les liens externes dans une nouvelle page.

20 Mise en page Mettre ce qui est important, intéressant, fréquent au début. Mettre les principales sections sous forme de grille (menu). Première page (accueil) sur une seule page (pas de défilement). Attention aux sauts probables des pages. Un chargement long pour gêner la mise en page. Utiliser les tables ou les divs pour la mise en page.

21 Mise en page Utiliser les feuilles de styles CSS. Gérer correctement les espaces horizontaux et verticaux. Placer le texte près des images (en dessous). Créer des groupes dans les formulaires et dans les listes longues indentation Minimiser le défilement vertical. Jamais de défilement horizontal.

22 Textes et typographie Quest ce qui diminue la lisibilité dun texte?

23 Textes et typographie "Sleon une édtue de l'Uvinertisé de Cmabrigde, l'odrre des ltteers dnas un mto n'a pas d'ipmrotncae, la suele coshe ipmrotnate est que la pmeirère et la drenèire soeint à la bnnoe pclae. Le rsete peut êrte dnas un dsérorde ttoal et vuos puoevz tujoruos lrie snas porlbème. C'est prace que le creaveu hmauin ne lit pas chuaqe ltetre elle-mmêe, mias le mot cmome un tuot."

24 Typographie Polices sans empattement (serif) AB vs. AB. Minimiser le gras. Éviter litalique, le souligné. Pour les changements de grosseur, utiliser les styles standards Accessibilité. Dans les listes, suivez les standards de majuscule et de ponctuation.

25 Textes Ne pas mettre de titre de manière verticale. Mettre des sous-titres si nécessaire. Privilégier les phrases courtes et détachées. Évitez les césures dans les mots. Éviter les mots rares et/ou longs, conjonctions, mots ambigus. Préférer la forme positive, active et au présent. Évitez les textes tout en majuscule, ou qui clignotent. Mise en relief pas plus de 10% du texte, pas trop de différentes tailles. Utiliser lalignement à gauche (sauf les titres).

26 Textes « Pourquoi ce texte, qui est pourtant important, nest-il pas plus facile à lire et à comprendre, du moins par nos clients. Pourtant il a été rédigé par un diplômé de Communication qui se disait un expert en typographie. » Est-ce difficile à lire? Que changer dans ce texte?

27 Menus et listes de choix Deux niveaux et pas plus de 10 items par niveau Ordre Standard (cohérence externe) Alphabétique, chronologique, fréquence d'utilisation en haut à gauche Similarité sémantique Organisation spatiale - pays, exploration d'un objet Ordre d'utilisation (couper, coller...)

28 Titres Mettre obligatoirement un titre aux pages (quil reste visible) Choisir soigneusement les titres pour quils désignent bien le contenu et quil soient bien distincts les uns des autres. Choisir le titre des pages qui apparaît dans la barre de titre et apparaîtra dans les favoris. Mettre des sous-titres dans le contenu. Mettre titre - sous-titre dans la barre titre. (site du prof)site du prof

29 Titres Attention aux cadres (frames) Ne chargent quune fois, donc bien pour mettre les données générales mais pas de barre de titre adaptée Si les gens arrivent par la recherche, il faut mettre la possibilité de revenir au site à partir des pages Utiliser un cadre pour les commentaires et détails. Attention aux multiples fenêtres logiciels anti pop- up

30 Formulaire Titre Organisation : groupes et ordre naturel d'entrée Valeurs par défaut Permettre une façon dannuler si possible Montrer clairement les champs à compléter

31 Formulaire Fournir des exemples de ce qui est demandé ou des formats requis (dates, numéros de téléphone) Uniformiser la présentation selon une grille Minimiser l'information qui doit être entrée Permettre de corriger (réversibilité) Boutons exprimant correctement le sens de laction Bouton Voter plutôt que Valider

32 Formulaire Respecter les types de contrôles et la façon de sen servir : Champs de texte à remplir (retour et tabulation) Menus, menus avec options cochées, menus avec dialogue Combo box Listes de sélections Onglets Boites à cocher Boutons radios Compléments graphiques : Séparateurs de zone, avec titres Attributs des éléments par défaut

33 Formulaire Plusieurs autres aspects améliorent la convivialité et la cohérence externe dune interface : La rétroaction (votre commande a bien été effectuée, 10 éléments trouvés). Les indices de lattente et de la progression. La possibilité dannuler. Les changements dans le curseur de la souris. Messages dalerte et dialogue (« Vous allez perdre les modifications, voulez-vous enregistrer? »).

34 Quest ce qui ne va pas ici? Approbation NomPrénom Tél Adresse Profession Intérêts Formation Commentaires Produit commandé Carte de crédit Alignements Pas de modèles Ordre habituel Grandeur des champs appropriée Chercher à déduire linformation Fournir des choix, éviter décrire Bouton Annuler

35 Graphiques et images Images : Pas de graphiques inutiles. Taille et qualité minimum (ne pas rapetisser à lécran). Mettre aussi du texte tout le monde ne comprends pas accessibilité Mettre un texte alternatif (balise alt) moteur de recherche + accessibilité Utiliser des miniatures. Des images progressives (entrelacement). Fonds : Mettre une couleur pendant que les images du fond sont chargées. Tester les fonds sur plusieurs résolutions décran. Utiliser une petite image répétée (patterns). Attention à la lisibilité et aux interactions de couleur (différents selon les écrans). Créer des motifs avec des textures, des photos, des logos. Éviter le « dithering » (réduction du nombre de couleurs) brouille les caractères.

36 Icônes Standard : 16 pixels, 32 pixels, 48 pixels sur le bureau. Taille pour être sélectionnable : 15 (crayon), 20 (trackball ), 40 (écran tactile). Chaque icône doit être différentiable des autres. Cohérence externe et interne. Reconnaissable même petit ou en noir et blanc.

37 Icônes Barres de boutons - thème métaphore, unité visuelle, associer les verbes à des objets. Sur Internet, prévoir un texte alternatif (ALT) qui apparaît en commentaire et sert aux interfaces non graphiques. Boutons - Rétroaction lorsque choix courant, lorsque déjà choisi. Plus une image abstrait les caractéristiques essentielles plus la reconnaissance est rapide (caricature).

38 Icônes Prendre en compte le contexte dutilisation (Arnheim 1964) Icône : Reproduit des caractéristiques physiques d'un objet d'abstraction inférieur triangle = montagne Les images, les caricatures sont des icônes. Symbole : Représente concrètement un objet d'un niveau d'abstraction supérieure triangle = hiérarchie Signe : Lien arbitraire avec l'objet triangle = danger

39 Multimédia Lorsque le non-verbal est plus naturel. Pour une audience moins lettrée ou internationale. Pour renforcer lapprentissage. Pour attirer lattention. Permettre de couper le son. Éviter les animations qui nen finissent plus. Faciliter le chargement des modules complémentaires.

40 Couleurs Pas trop de couleurs différentes on fait des interfaces, pas des pizzas!!! Plus intéressant que noir et blanc 45% plus remarqué même si moins lisible. Attire mieux lattention. Exprime la relation entre des éléments, découpe zones. Peut réduire la recherche dans une fenêtre complexe.

41 Couleurs L'usager doit connaître (cohérence externe) ou apprendre le code par indices. Les codes doivent être très différents les uns des autres. Attention aux daltoniens! Interaction entre les couleurs contrastantes dans l'espace et dans le temps. Les bordures changent la couleur perçue, fatiguent. Fidélité des couleurs selon lécran. Problème à limpression.

42 Psychologie des couleurs Physiologie : Champs de vision : 60° en haut, 70° en bas et 90° environ latéralement. Fovéa - centre plus détaillé et captant mieux les couleurs. Symbologie : Bleu = mer, infini Rouge= feu, force, sang Vert= forêt, nature Noir= nuit, mort Blanc= pureté, divinité Personnalité : Bleu conservateur, violet excentrique, brun solide, noir anarchique, blanc simple, rouge énergique, vert naturel, etc. Basé sur des tests associant les couleurs à des qualificatifs Fonctionnalité : Ex : publicité noir et blanc Message Couleur Image

43 Atelier

44 Site du cours MTH6301 de Poly Trouvez une autre façon de concevoir le site. Changer linterface et faire la maquette. Rajouter des fonctions si vous en trouver des utiles.

45 Des questions??? Merci de votre attention! A la semaine prochaine!


Télécharger ppt "21 novembre 2012 Grégory Petit"

Présentations similaires


Annonces Google