Design

Design web et interfaces hommes-machines
  • Design - le 14 Août 2014 par
    L'affordance dans le webdesing

    L'affordance est la capacité d’un système ou d'un produit à suggérer sa propre utilisation.

    Au terme affordance, je préfère le néologisme feedforward de Stephan Wensveen , en opposition au feedback.

    On peut distinguer 2 types de feedforward:

    • le feedforward inhérent
    • le feedforward augmenté

    Feedforward inhérent

    C'est lorsque la forme d'un objet indique l'action qu'il peut effectuer. Par exemple, la forme d'une clenche de porte indique qu'on peut l'attraper et la tourner. On en déduit à priori qu'elle sert à ouvrir la porte.

    Cette notion renvoi au concept de zuhanden de Heidegger. Un marteau est compris pour sa fonction. En voyant un marteau, on pensera à le prendre par le manche et à l'utiliser pour enfoncer un clou. Notre perception de l'objet dépasse le bois et le métal qui composent le marteau : c'est sa fonctionnalité qui transparaît.

    Seulement voilà, aujourd’hui nous vivons dans l'ère du Digital. La forme d'un iPhone n'indique en rien qu'il permet de téléphoner.

    Feedforward augmenté

    C'est lorsque des informations ont été rajoutées contextuellement à l'objet pour donner une indication de sa fonction.

    Attention, ce n'est pas forcément une information digitale. Par exemple, un simple "on" sur un bouton indique qu'il sert à allumer l'appareil.

    Pour moi, un des exemples le plus réussi de feedforwad sont les bornes tactiles de la SNCF. Lorsque l'on va taper une destination, les lettres se grisent en fonction des possibilités de villes desservies. L'utilisateur reçoit comme feedforward qu'il ne sert à rien de taper cette lettre car elle n'apportera aucun résultat.

    Do, Feel, Know

    On peut s'interroger sur la véracité de ces propos. La première fois que l'on a vu un marteau, a-t-on vraiment pensé à enfoncer un clou ? La différence entre l'inné et l'acquis n'est pas toujours évidente.

    Je pense que notre approche du monde est beaucoup plus empirique. Notre courbe d'apprentissage suit le cycle

    • DO : les indications de feedforward vont nous permettre de présupposer de l'utilisation.
    • FEEL : lors de l'exécution de l'action, le feedback va nous conforter sur notre à priori.
    • KNOW : le résultat permettra de valider ou d'invalider notre hypothèse.

    Finalement, on peut juger un système selon 3 critères :

    • Intuitivité : à quel point notre connaissance actuelle va nous permettre de déterminer l'utilisation du système. Combien d'erreurs devra-t-on rencontrer avant d'obtenir le bon résultat ?
    • Efficacité : Est-ce que l'outil est réellement adapté et agréable à l'utilisation. Un marteau vous permettra d'ouvrir une boite de conserve, mais on conviendra qu'il est plus aisé d'utiliser un ouvre boîte.
    • Mémorisation : à quel point je ne reproduirai pas les même erreurs face à la même situation dans le futur ?

    Pour moi, le pinch de l'iPhone n'est pas intuitif. Néanmoins il est très plaisant à utiliser, très efficace et on retient le geste facilement. Il devient rapidement naturel.

    Pour finir, la disquette est toujours utilisée aujourd'hui comme convention pour l'enregistrement d'un fichier, même si cela est contre-intuitif. La génération Z qui n'aura pas connue la disquette aura bien du mal à comprendre le rapport entre un objet inconnu et le fait d'enregistrer. Pourtant ils l’utiliseront de façon naturelle.

  • Design - le 8 Août 2014 par
    Search, Browse, Feed

    Petit revue de l'évolution du web en terme de navigation et d'expérience utilisateur

    Google, le search

    Au début il n'y avait rien, puis google créa le web. En une recherche vous pouvez accéder à toutes les ressources du world wild web et ce, de façon pertinente.

    Mais l'utilisation de google reste une démarche active. Son utilisation demande beaucoup plus d'initiative que d'allumer la télé et se laisser porter par les flux d'informations continus.

    Youtube, le browse

    Youtube n'a pas inventé le browse, cela reste du lien hypertexte.

    Mais les études montrent que les liens sont des causes de stress pour les lecteurs qui perdent le fil de leur lecture et sont 'effrayés' que de lien en lien ils ne finissent jamais ce qu'ils ont commencé.

    Chez Youtube c'est différent. Cela tient à l'ergonomie de la page :

    • un contenu principal clairement identifié
    • une sidebar listant les vidéos associées.

    Pour ma part, ça a été ma première expérience de browse réussie au sein d'un même site. Je pense qu'il n'y a pas mieux pour améliorer le ratio pages/visites.

    Un conseil : BROWSE over SEARCH.

    La démarche de l'utilisateur est désormais interactive, dans le sens où elle est assistée. On a pas besoin de poser de question à Youtube pour qu'il vous présente d'autres vidéos.

    Facebook, le feed

    Si je devais faire un parallèle avec l'alimentation, Google ça serait la chasse, certes avec un uzi et un bazooka, mais quand même il faut aller chercher sa proie.

    Youtube c'est le supermarché. Tout est déjà en boite, ordonné par rayons, il n'y a plus qu'à faire son choix.

    Facebook, c'est un peu bébé à qui on donne la petite cuillère. D'ailleurs c'est eux qui ont imposé le terme feed.

    C'est eux également qui ont inventé la navigation en deux temps :

    • Étape 1, on se laisse guider pour 'suivre' des amis et des sujets, on configure ses goûts.
    • Étape 2, on consulte les news qui nous intéressent.

    Facebook c'est le premier site grand public qu'on ne peut pas utiliser tout de suite (j'exclu volontairement meetic).

    En revanche, passé la première étape, on se laisse porter par les flux de nos amis qui travaillent pour nous.

    Ça y est on peut enfin être complètement passif :)

  • Design - le 29 Juillet 2014 par
    Typo 3x3

    Depuis que Maxime m'a parlé de cette typo, j'ai toujours eu une attirance pour celle -ci.

    Pour moi dans l'art, il n'y a pas de création sans contrainte. Et plus la contrainte est forte, plus le résultat est intéressant.

    Pour le coup, la typo 3x3 donne le niveau de complexité optimum:

    • la type 2x2 est impossible avec ses 16 possibilités pour 26 lettres
    • la typo 4x4 propose plus de 65 000 possibilités ...

    Et puis il faut avouer que le côté pixellisé lui donne un petit charme geek très appréciable ;)

    Le G me pose le plus de problème. Je ne suis pas super content du résultat.

    J'ai une petite affection pour le E, le M et le W. Pour ces lettres il n'existe pas de solution inscrite dans le carré qui soit très satisfaisante. En revanche, en prennant une approche outside the box et en inclinant le carré à 45°, on obtient une solution assez élégante.

    Si vous voulez voir la typo originale 3x3 c'est ici.

  • Design - le 31 Mars 2014 par
    e-Paper

    Sony a annoncé le premier e-Paper (plus d'infos sur PC Inpact). Modèle e-Ink avec un stylet. Très proche d'un eBook donc d'un point de vue techno, mais on voit bien avec l'iPhone et l'iPad que la taille du device suffit à elle seule à introduire de nouveau usages.

    Je suis vraiment fan du e-Ink. Techniquement, une impulsion électrique va modifier la structure de la matière pour laisser passer la luminère (pixel blanc) ou non (pixel noir). La modification de la matière s'effectue uniquement au changement de pages. L'e-Ink ne consomme donc pas d'électricité à l'affichage est permet donc

    • une consommation relativement peu gourmande et une plus grande autonomie de l'appareil.
    • un affichage non-rétroéclairé et donc un confort de lecture plus proche du papier.

    Quand on sait que la lecture sur appareil numérique diminue de 25% la concentration, je pense que l'e-Paper a un réel avenir devant lui.