davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
							<!doctype html>
<html lang=fr>
<head>
  <!-- Always define the charset before the title -->
  <meta charset=utf-8>
  <title>Critique du livre Designing the obvious — Biologeek — David Larlet</title>
  <!-- Define a viewport to mobile devices to use - telling the browser to assume that the page is as wide as the device (width=device-width) and setting the initial page zoom level to be 1 (initial-scale=1.0) -->
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- Fake favicon, to avoid extra request to the server -->
  <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  <link type="application/atom+xml" rel="alternate" title="Feed" href="/david/log/" />
  <link rel="manifest" href="/manifest.json">
  
  <link rel="stylesheet" href="/static/david/css/larlet-david-_J6Rv.css" data-instant-track />
  
  <noscript>
    <style type="text/css">
      /* Otherwise fonts are loaded by JS for faster initial rendering. See scripts at the bottom. */
      body {
        font-family: 'EquityTextB', serif;
      }
      h1, h2, h3, h4, h5, h6, time, nav a, nav a:link, nav a:visited {
        font-family: 'EquityCapsB', sans-serif;
        font-variant: normal;
      }
    </style>
  </noscript>
  
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://larlet.fr/david/biologeek/archives/20081008-critique-du-livre-designing-obvious">

</head>
<body>
  <div>
    
    <header>
      <nav>
        <p>
          <small>
            Je suis <a href="/david/" title="Profil public">David Larlet</a>, <a href="/david/pro/" title="Activité professionnelle">artisan</a> du web qui vous <a href="/david/pro/accompagnement/" title="Activité d’accompagnement">accompagne</a><span class="more-infos"> dans l’acquisition de savoirs pour concevoir des <a href="/david/pro/produits-essentiels/" title="Qu’est-ce qu’un produit essentiel ?">produits essentiels</a></span>. <span class="more-more-infos">Discutons ensemble d’une <a href="/david/pro/devis/" title="En savoir plus">non-demande de devis</a>.</span> Je partage ici mes <a href="/david/blog/" title="Expériences bienveillantes">réflexions</a> et <a href="/david/correspondances/2017/" title="Lettres hebdomadaires">correspondances</a>.
          </small>
        </p>
      </nav>
    </header>
    
    
  <section>
    <h1 property="schema:name">Critique du livre Designing the obvious</h1>
    <article typeof="schema:BlogPosting">
      <div property="schema:articleBody">
        <img src="/static/david/biologeek/images/logos/designing_obvious.png" alt="vignette" style="float:left; margin: 0.5em 1em;" property="schema:thumbnailUrl" />
        <p>Cet ouvrage est une véritable ode à la simplicité. Alors qu'il est étonnamment facile de faire des interfaces totalement bloated, c'est tout un art de rester simple et de ne concentrer l'attention de l'utilisateur que sur une seule tâche à la fois dans un web qui laisse toujours plus de choix. C'est ce qu'enseigne <a href="http://rhjr.net/dto/">Designing the obvious</a>, je ne vais pas résumer tout le livre mais concentrons-nous sur les points intéressants.</p>
<h2>Formulaires et erreurs</h2>
<p>J'ai beaucoup aimé les réflexions sur les formulaires qui tentent de réduire au maximum les erreurs possibles. C'est tout simple mais le seul fait de désactiver les boutons tant que les champs requis ne sont pas complétés ou offrir des choix qui ont du sens par défaut ne coûte quasiment rien mais peu apporter un avantage réel à l'utilisation.</p>
<p>Intitulés <em>poka-yoke</em>, ces dispositifs (appelés <a href="http://fr.wikipedia.org/wiki/D%C3%A9trompeur">détrompeurs</a> en français) diminuent la frustration d'un utilisateur lorsqu'il utilise une application. L'auteur insiste bien sur le fait que l'utilisateur n'est pas un geek, il n'est pas en train de tester votre application pour le plaisir ou sa culture, <strong>il a un besoin qu'il souhaite satisfaire le plus rapidement possible</strong> pour pouvoir passer à autre chose. C'est la base mais il est bon de se la rappeler, souvent.</p>
<p>Je n'ai toujours pas d'avis tranché sur la question de la validation à la volée des champs d'un formulaire (souvenez vous, <a href="https://larlet.fr/david/biologeek/archives/20071117-12-regles-d-ergonomie-web-par-amelie-boucher/">Amélie Boucher était contre</a>), par contre il faudrait que je trouve une méthode pour automatiser ça avec Django, je pense que ça pourrait être bien pratique selon les cas, pas évident de rester RESTful là-dessus... j'avais commencé à réfléchir à <a href="http://www.snellspace.com/wp/?p=894">des solutions à base de PATCH</a> mais ça reste un peu du bricolage pour l'instant. </p>
<h2>Apprentissage et aide</h2>
<p>Je n'avais jamais envisagé ça sous cet angle mais l'auteur explique que <strong>l'aide n'est utile qu'aux experts</strong> qui souhaitent aller encore plus loin. Elle est donc loin d'être inutile mais doit être adaptée à ce lectorat qui connaît déjà l'application. Les débutants ne lisent pas l'aide, c'est une fatalité (par contre <a href="http://arstechnica.com/news.ars/post/20080923-study-confirms-users-are-idiots.html">ils peuvent vraiment cliquer sur n'importe quoi</a>...).</p>
<p>D'un autre côté, ils ont besoin de retours pertinents et doivent être sûrs de ne pas effectuer d'actions destructrices irrémédiables. Ça m'a donné envie de me replonger dans <a href="https://larlet.fr/david/biologeek/archives/20070807-une-solution-pour-faciliter-la-conception-d-applications-web-restful-avec-django/">la solution d'annulation que j'avais intégré pour Django</a>. C'est pénible lorsque ça tape sur plusieurs modèles pour faire les choses proprement mais ça apporte un plus non négligeable.</p>
<p>J'ai bien aimé aussi la façon d'expliquer qu'un utilisateur a une façon de penser qui peut totalement différer de celle avec laquelle vous avez conçu une application.</p>
<h2>Réflexions ergonomiques</h2>
<p>Je suis de plus en plus convaincu que l'interface de l'iPhone avec ses « listes slidantes » a son rôle à jouer au niveau du web pour parcourir des arborescences afin de remplacer les habituelles tree-views (l'auteur suggère de passer plutôt par plusieurs select multiple mais l'iPhone n'était pas encore sorti il me semble). Il faut que je moleskine encore un peu avant de pouvoir accoucher :-).</p>
<p>L'ergonomie, au même titre que les contenus, doit faire partie intégrante du processus de développement d'une application. C'est un domaine trop souvent sous-estimé qui ne devrait pas l'être puisqu'il <strong>influe directement sur la satisfaction de votre utilisateur</strong>.</p>
<p>Les applications qui marchent sont les plus simples, on ne va plus faire des usines à gaz permettant de tout faire mais bien des applications de niche qui pourront ensuite être liées entre elles. Et c'est là où le Web Sémantique prend tout son sens, il faut absolument que je prenne le temps de développer cette notion d'horizontalité (vers laquelle tend le monde par ailleurs mais c'est un autre débat).</p>
<p>Au final je vais sûrement me laisser tenter par <a href="http://rhjr.net/dtm/">Designing the moment</a>, des avis sur celui-là ? (j'ai peur qu'il y ait pas mal de redites par rapport au premier, encore qu'il s'agit d'études de cas ça devrait limiter les dégâts).</p>
      </div>
    </article>
    <footer>
      <h6 property="schema:datePublished">— 08/10/2008</h6>
    </footer>
  </section>
  <section>
    <div>
      <h3>Articles peut-être en rapport</h3>
      <ul>
        <li><a href="/david/biologeek/archives/20091031-critique-de-livres-photo/" title="Accès à Critique de livres photo">Critique de livres photo</a></li>
        <li><a href="/david/biologeek/archives/20081015-design-centre-sur-activite-et-sur-attention/" title="Accès à Design centré sur l&#39;activité ET sur l&#39;attention">Design centré sur l&#39;activité ET sur l&#39;attention</a></li>
        <li><a href="/david/biologeek/archives/20080701-critique-du-livre-presentation-zen/" title="Accès à Critique du livre Presentation Zen">Critique du livre Presentation Zen</a></li>
      </ul>
    </div>
  </section>
  <section>
    <div id="comments">
      <h3>Commentaires</h3>
      
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Arthur Rainbow</span> le <span class="comment-date" property="schema:commentTime">08/10/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Je me permets de vous conseiller dans le même genre:<br />Je ne veux pas chercher, principalement pour les sites internet (titre original: don&#39;t make me think) <br />ainsi que <br />&quot;design of everyday things&quot; qui a au moins l&#39;avantage de totalement déculpabilisé le lecteur de ne jamais savoir si il faut tirer ou pousser une porte, et qui s&#39;applique après ça aux ordis.</p>

<p>Un cours sur ce sujet est offert à l&#39;université de Montréal (et au MIT, mais j&#39;y suis pas), je pense que, en dehors des sciences, c&#39;est un sujet qui a eu une des plus grandes valeurs ajoutés pour moi.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Rik</span> le <span class="comment-date" property="schema:commentTime">08/10/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Si je me rappelle bien ce que disait Amélie (j&#39;étais en train de finir ma présentation...), c&#39;était que la validation à la volée était bénéfique mais qu&#39;il fallait faire attention car il est très facile de se tromper. Dans le cas de Remember the milk, le champ signale une erreur trop tôt.</p>

<p>La plupart des validations de ce genre n&#39;ont pas besoin de requête HTTP d&#39;ailleurs, juste quelques règles, regexp suffient en général. Au passage, vivement que Web Forms 2 (dans HTML5) soit plus largement implémenté parce que required, pattern, datalist, c&#39;est juste terrible.</p>

<p>Pour illustrer le fait que les utilisateurs pensent différemment, je vais prendre le cas de Skyrock (que je connais un peu). On permet aux utilisateurs de trier une liste d&#39;amis. On pensait qu&#39;ils mettraient leurs préférés en premier. Et bien certains s&#39;en servent pour que cette liste dessine une forme. Du genre un triangle avec les pseudos du plus long au plus court.</p>

<p>Pour les &quot;listes slidantes&quot; de l&#39;iPhone, il y avait déjà un concept similaire avec le Finder.</p>

<p>Faut que je fasse les courses pour la bibliothèque de la boîte... Je pourrais stocker ça dans une ouicheliste...</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">florence meichel</span> le <span class="comment-date" property="schema:commentTime">08/10/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Jolie réflexion et moment fort d&#39;auto-apprentissage autour d&#39;un livre ! Merci de le partager avec nous ! :-)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">dominique</span> le <span class="comment-date" property="schema:commentTime">21/10/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Oui, je conseille aussi Don&#39;t make me think. C&#39;est un livre qui peut surprendre car la simplicité est parfois mal vue de ce côté-ci de l&#39;Atlantique. On privilégie souvent le beau côté du web au lieu de se focaliser sur l&#39;efficacité et l&#39;expérience de l&#39;utilisateur.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Thomas de blog webmarketing</span> le <span class="comment-date" property="schema:commentTime">24/10/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>je confirme la qualité du livre don&#39;t make me think.<br />en plus il a l&#39;avantage de se lire très vite.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Paul | Riad Marrakech</span> le <span class="comment-date" property="schema:commentTime">08/11/2010</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Merci de partager ce livre. L&#39;ergonomie est un élément très important dans le développement et pour ma part je pense que c&#39;est l&#39;un des points majeurs qui permettent de différencier une application médiocre d&#39;une application bien exécutée. Aussi, le lien vers l&#39;étude qui montre que les utilisateurs peuvent cliquer sur n&#39;importe quoi est très intéressante. Je savais qu&#39;il y avait beaucoup d&#39;utilisateurs crédules mais pas à ce point. C&#39;est bon à savoir :) </p>
    </div>
</div>

    </div>
  </section>

    
    <footer>
      <nav>
        <p>
          <small>
            Je réponds quasiment toujours aux <a href="m&#x61;ilto:d&#x61;vid%40l&#x61;rlet&#46;fr" title="Envoyer un email">emails</a> (<a href="/david/signature/" title="Ma signature actuelle avec possibilité de chiffrement">signés</a>) et vous pouvez me rencontrer à Montréal. <span class="more-infos">N’hésitez pas à <a href="/david/log/" title="Être tenu informé des mises à jour">vous abonner</a> pour être tenu informé des publications récentes.</span>
          </small>
        </p>
      </nav>
    </footer>
    
  </div>
  
  <script src="/static/david/js/larlet-david-3ee43f.js" data-no-instant></script>
  
  <script data-no-instant>InstantClick.init()</script>
  
</body>
</html>