Le chasseur-cueilleur, Hannibal Lecter et autres considérations ergonomiques Une présentation #kiwiparty by @lamitransalpin Antonio Capobianco IUT de Haguenau Département MMI

De l’origine de cette présentation ‣ Design fluide ‣ One page ‣ Double scroll ‣ Parallaxe Recommandations ‣ Minimal content ‣ Clearly set apart each section ‣ Consider screen size ‣ … Noupe http://goo.gl/Yx4ZH6

La cognition spatiale Une brève définition

Rôle de la cognition spatiale Alain Berthoz, La manipulation mentale des points de vue. http://goo.gl/68IC8Y

La mémoire spatiale

La mémoire spatiale De la gestion du territoire à la gestion de l’information …

Mémoire spatiale et interfaces Les interfaces graphiques reposent sur une métaphore spatiale.

Mémoire spatiale et interfaces Recherche visuelle Recherche spatiale La mémoire spatiale est à la base des comportements experts

Axiome : usage de cartes mentales

Axiome : usage de cartes mentales Tutos Forum Emploi HTML CSS JS

Quelques propriétés de la mémoire spatiale Et leurs conséquences ergonomiques

1. La mémoire spatiale conserve les caractéristiques spatiales Kosslyn, S. M., Ball, T., & Reiser, B. J. (1978). Visual images preserve metric spatial information : evidence from studies of image scanning. Journal of Experimental Psychology : human perception and performance, 4, 47-60. Privilégier des structures larges et peu profondes

Caractéristiques spatiales des sites one page Limiter au maximum le nombre d’informations

2. Une information spatiale repose sur un référentiel Exploiter les repères existants Aider l’utilisateur à construire ses propres repères Mou, W, McNamara, T. P, et al. Intrinsic frames of reference in spatial memory. Journal of Experimental Psychology: Learning, Memory, and Cognition, 28(1):162–170, 2002.

3. Une information spatiale c’est « Où » + « Quoi » Frances Yates, L’art de la mémoire. http://goo.gl/Vg57D0 Chaque élément doit avoir une sémantique clairement indiquée

« Quoi » Chaque élément doit avoir une sémantique claire -> ne demandez pas à l’utilisateur de la deviner http://www.maltedemuth.com

« Où » Chaque partie doit être clairement délimitée http://www.uzik.com

« Où » Chaque partie doit être clairement délimitée http://rizonapp.co/

« Où » Chaque partie doit être clairement délimitée http://www.wearehinge.com/

« Où » Chaque partie doit être clairement délimitée http://www.kinoz.com/

Exploiter les référentiels Favoriser un mode de navigation par écran http://camfindapp.com/

Andrade, J and Meudell, Is spatial information encoded automatically in memory The Quarterly Journal of Experimental Psychology Section A, 46(2):365–375, 1993. 4. La mémorisation de l’information spatiale est automatique mais pas immédiate Offrir un comportement spatialement stable.

Stabilité spatiale Attention avec les design fluides lacantina.co.nz/

Stabilité spatiale Attention avec les design fluides simplebits.com/

5. Les animations influencent la mémorisation Bederson, B. B., & Boltman, A. (1999). Does animation help users build mental maps of spatial information?. Information Visualization, 1999.(Info Vis' 99),pp. 28-35. Les animations doivent renforcer la cohérence spatiale du contenu

Animations Limiter au maximum les effets de parallaxe http://www.sony.com/be-moved/ Parallaxe scrolling : engaging or annoying ? http://goo.gl/9VvlFA

Animations et cohérence spatiale mmibordeaux.com/

Conclusion Des tendances a contre-courant de principes ergonomiques de base → N’attendez pas de l’utilisateur qu’il retienne l’information présentée

Merci à tous ! Questions ? Merci @justinbasile et @CloTemesvari pour le coup de main Merci @alsacreations pour l’accueil Merci aux étudiants MMI1 de Haguenau pour les remarques constructives Mention spéciale