{"id":125123,"date":"2017-09-27T08:00:50","date_gmt":"2017-09-27T06:00:50","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/content-pillars\/mobile-app-prototyping-ux-for-e-reading-with-javier-lianes\/"},"modified":"2025-01-30T17:48:21","modified_gmt":"2025-01-30T16:48:21","slug":"mobile-app-prototyping-ux-for-e-reading-with-javier-lianes","status":"publish","type":"tc_content_pillar","link":"https:\/\/www.justinmind.com\/fr\/clients\/javier-lianes","title":{"rendered":"Prototypage d&rsquo;applications mobiles : UX pour la lecture \u00e9lectronique avec Javier Lianes"},"content":{"rendered":"<h2 style=\"margin-top: 0cm;\">Javier Lianes d\u00e9passe les attentes des utilisateurs avec son prototype de refonte de l&rsquo;interface utilisateur du Kindle d&rsquo;Amazon.<\/h2>\n<p><a href=\"https:\/\/www.linkedin.com\/in\/javierlianes\/\" target=\"_blank\" rel=\"noopener noreferrer\">Javier Lianes<\/a>, designer UX bas\u00e9 \u00e0 Madrid, a utilis\u00e9 Justinmind pour reconstruire l&rsquo;exp\u00e9rience utilisateur de son coll\u00e8gue e-reader. <span style=\"color: #ff0000;\"> <\/span>utilisateurs. Passionn\u00e9 de technologie et lecteur avide, Javier est souvent coll\u00e9 \u00e0 son iPad, perdu dans un livre \u00e9lectronique. Mais malgr\u00e9 sa passion pour la lecture en ligne, l&rsquo;exp\u00e9rience de Javier avec les lecteurs \u00e9lectroniques a \u00e9t\u00e9 assez d\u00e9cevante. Dans notre \u00e9tude de cas, nous l&rsquo;interrogeons sur ses r\u00e9ticences \u00e0 l&rsquo;\u00e9gard du kindle d&rsquo;Amazon &#8211; <a href=\"https:\/\/www.google.es\/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=1&amp;cad=rja&amp;uact=8&amp;ved=0ahUKEwihu6KX5bXWAhUDkRQKHcZsCUAQFggqMAA&amp;url=http%3A%2F%2Fwww.techradar.com%2Fnews%2Fportable-devices%2Fbest-kindle-and-ereaders-1320453&amp;usg=AFQjCNGKfGHV3IE3H3lqgriDu2eMyfyNGw\" target=\"_blank\" rel=\"noopener noreferrer\">malgr\u00e9 le battage m\u00e9diatique<\/a> -, sur les solutions qu&rsquo;il a propos\u00e9es pour relever les d\u00e9fis du design et sur la mani\u00e8re dont il les a prototyp\u00e9es \u00e0 l&rsquo;aide de <a href=\"https:\/\/www.justinmind.com\/fr\" target=\"_blank\" rel=\"noopener noreferrer\">Justinmind.<\/a>  <\/p>\n<h2>Des designers UX satisfaits font de meilleurs produits.<\/h2>\n<p>En tant que designer ind\u00e9pendant, Javier est son propre patron. Cela signifie souvent travailler sans assistance 24 heures sur 24 pour obtenir des actifs num\u00e9riques et des UI construits et envoy\u00e9s aux <a href=\"https:\/\/www.justinmind.com\/fr\/clients\" target=\"_blank\" rel=\"noopener noreferrer\">clients<\/a>. Pour livrer des designs de haute qualit\u00e9 dans les d\u00e9lais impartis, le flux de travail de Javier doit \u00eatre irr\u00e9prochable, et gagner du terrain dans le processus UX se r\u00e9sume souvent \u00e0 l&rsquo;efficacit\u00e9 de ses outils de conception. Tout designer UX peut vous dire \u00e0 quel point il est important de trouver la bonne combinaison d&rsquo;outils. Si vous n&rsquo;\u00eates pas \u00e0 l&rsquo;aise avec les outils que vous utilisez, cela se verra dans vos designs. Et si vous \u00eates occup\u00e9 \u00e0 trouver votre chemin \u00e0 travers des UI inintelligibles, vous ne vous concentrez pas sur la r\u00e9solution des probl\u00e8mes de design pour l&rsquo;utilisateur. Ainsi, lorsqu&rsquo;il s&rsquo;est agi de relever son prochain grand d\u00e9fi en mati\u00e8re de design &#8211; la refonte de l&rsquo;UI du Kindle d&rsquo;Amazon &#8211; Javier \u00e9tait \u00e0 la recherche de l&rsquo;outil id\u00e9al. C&rsquo;est alors qu&rsquo;il est tomb\u00e9 sur Justinmind.  <\/p>\n<h2>Des UI intuitives et des exp\u00e9riences de design transparentes<\/h2>\n<p>Javier a commenc\u00e9 \u00e0 prototyper avec Justinmind alors qu&rsquo;il suivait un cours d&rsquo;UX \u00e0 l&rsquo;<em>Escuela Trazos<\/em> qu&rsquo;il fr\u00e9quentait \u00e0 Madrid. Il \u00e9tait \u00e0 la recherche d&rsquo;une interface intuitive qui ne n\u00e9cessiterait pas trop de temps pour la prendre en main. D\u00e8s le d\u00e9part, Javier a ador\u00e9 la facilit\u00e9 avec laquelle il a pu se familiariser avec Justinmind. Il a trouv\u00e9 toutes les couches et tous les \u00e9l\u00e9ments de l&rsquo;UI exactement comme il s&rsquo;y attendait. <\/p>\n<blockquote><p>\u00ab\u00a0Justinmind m&rsquo;a surpris d\u00e8s le d\u00e9part. Il respire la clart\u00e9, l&rsquo;accessibilit\u00e9 et se d\u00e9marque des outils de design actuels.\u00a0\u00bb<\/p><\/blockquote>\n<p>Lorsque le moment est venu de commencer la refonte de l&rsquo;UI de son lecteur \u00e9lectronique, il a emmen\u00e9 Justinmind avec lui pour la balade. Son prototype offre une <a href=\"https:\/\/youtu.be\/KQCN3TE4We4\" target=\"_blank\" rel=\"noopener noreferrer\">solution alternative<\/a> au Kindle classique. Jetez un coup d&rsquo;\u0153il ci-dessous ! <\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/KQCN3TE4We4\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<div class=\"jim-banner mobile\">\n<hr>\n<h2 style=\"text-align: center;\"><span style=\"color: #21c0c0;\">T\u00e9l\u00e9chargez Justinmind et cr\u00e9ez des exp\u00e9riences utilisateur pour vos prototypes d&rsquo;applications web et mobiles.<\/span><\/h2>\n<p style=\"text-align: center;\"><a style=\"color:#FFFFFF; background-color:#000000;\" data-category=\"cta-download-other\" data-label=\"banni\u00e8re1-post\" data-action=\"fr\/wp-json\/wp\/v2\/tc_content_pillar\/125123\" data-tracking-name=\"__jim\" data-tracking-content=\"eyJkYXRhIjoiZXlKallYUmxaMjl5ZVNJNkltTjBZUzFrYjNkdWJHOWhaQzF2ZEdobGNpSXNJbXhoWW1Wc0lqb2lZbUZ1Ym1sY2RUQXdaVGh5WlRFdGNHOXpkQ0lzSW1GamRHbHZiaUk2SW1aeVhDOTNjQzFxYzI5dVhDOTNjRnd2ZGpKY0wzUmpYMk52Ym5SbGJuUmZjR2xzYkdGeVhDOHhNalV4TWpNaWZRPT0iLCJzaWduYXR1cmUiOiIzNzVlOTkwOThmOGRjYTc5ZTY0MWVmZGY2NmJmMDFiYjM0ZjVmNGVmYjQ5YzI1ZGIwZDQwYzgyN2UzM2EzOWZmIn0=\" data-tracking-content--after-scroll=\"eyJkYXRhIjoiZXlKallYUmxaMjl5ZVNJNkltTjBZUzFrYjNkdWJHOWhaQzF2ZEdobGNpSXNJbXhoWW1Wc0lqb2lZbUZ1Ym1sY2RUQXdaVGh5WlRFdGNHOXpkQ0lzSW1GamRHbHZiaUk2SW1aeVhDOTNjQzFxYzI5dVhDOTNjRnd2ZGpKY0wzUmpYMk52Ym5SbGJuUmZjR2xzYkdGeVhDOHhNalV4TWpNaWZRPT0iLCJzaWduYXR1cmUiOiIzNzVlOTkwOThmOGRjYTc5ZTY0MWVmZGY2NmJmMDFiYjM0ZjVmNGVmYjQ5YzI1ZGIwZDQwYzgyN2UzM2EzOWZmIn0=\" class=\"action-tracking-button mks_button mks_button_large squared\" href=\"https:\/\/www.justinmind.com\/usernote\/signUp.action\" target=\"_blank\">T\u00e9l\u00e9charger gratuitement<\/a><\/p>\n<hr>\n<\/div>\n<h2>Prototypage d&rsquo;applications mobiles : se frotter au kindle d&rsquo;Amazon<\/h2>\n<h3>Design de l&rsquo;UI pour Amazon Kindle iOS<\/h3>\n<p>En un rien de temps, Javier \u00e9tait op\u00e9rationnel avec Justinmind. Il a utilis\u00e9 le<strong> mod\u00e8le d&rsquo;application mobile iPhone<\/strong> pour concevoir la disposition des \u00e9crans de son prototype. Javier souhaitait cr\u00e9er des visuels plus propres et plus frais pour ses coll\u00e8gues lecteurs de livres \u00e9lectroniques. Selon lui, l&rsquo;interface sombre de Kindle est un peu d\u00e9primante. Kindle opte pour des tons gris pour ses principaux \u00e9crans UI et un th\u00e8me plus clair pour l&rsquo;\u00e9cran de lecture. Pour rem\u00e9dier \u00e0 la morosit\u00e9 ambiante, Javier a opt\u00e9 pour un th\u00e8me clair tout au long du prototype de l&rsquo;application. Personnellement, nous adorons la continuit\u00e9 ! Il a ensuite utilis\u00e9 une combinaison de <a href=\"https:\/\/www.justinmind.com\/fr\/ui\" target=\"_blank\" rel=\"noopener noreferrer\">widgets d&rsquo;interface utilisateur iOS pr\u00e9d\u00e9finis<\/a> de Justinmind, tels que la barre d&rsquo;\u00e9tat et le champ de recherche, ainsi que ses propres images, pour cr\u00e9er la structure iOS de son prototype. Il lui a suffi de les glisser-d\u00e9poser sur le canevas. <\/p>\n<h3>Construire l&rsquo;interaction<\/h3>\n<p>Javier s&rsquo;est concentr\u00e9 sur la performance et la coh\u00e9rence des sch\u00e9mas de navigation lorsqu&rsquo;il a donn\u00e9 vie \u00e0 son prototype d&rsquo;application Kindle. Il voulait s&rsquo;assurer que les utilisateurs puissent naviguer facilement dans l&rsquo;UI et acc\u00e9der \u00e0 leurs livres kindle depuis le magasin kindle sans perdre de temps \u00e0 parcourir de multiples menus. Pour que le flux de navigation reste net et concis, Javier a opt\u00e9 pour une barre de navigation inf\u00e9rieure. Celle-ci ne comprendrait que 4 \u00e9l\u00e9ments : les ic\u00f4nes de favoris, de t\u00e9l\u00e9chargements, de param\u00e8tres et de recherche. \u00c0 l&rsquo;aide d&rsquo;<a href=\"https:\/\/www.justinmind.com\/fr\/aide\/evenements-et-interactions\">\u00e9v\u00e9nements de liaison<\/a>, Javier a commenc\u00e9 \u00e0 d\u00e9velopper les fonctionnalit\u00e9s de son prototype d&rsquo;application. <\/p>\n<blockquote><p>\u00ab\u00a0J&rsquo;ai ador\u00e9 la simplicit\u00e9 des \u00e9l\u00e9ments d&rsquo;interface utilisateur et des \u00e9v\u00e9nements par glisser-d\u00e9poser. Il \u00e9tait facile de les appliquer sans avoir de connaissances approfondies en programmation.\u00a0\u00bb<\/p><\/blockquote>\n<p>Pour cr\u00e9er la fonction de d\u00e9filement de l&rsquo;\u00e9cran tactile d&rsquo;un lecteur kindle (pour permettre \u00e0 l&rsquo;utilisateur de se d\u00e9placer vers le haut et vers le bas de l&rsquo;\u00e9cran), Javier a utilis\u00e9 les \u00e9l\u00e9ments de parallaxe de Justinmind. Il a ajout\u00e9 un <a href=\"https:\/\/www.justinmind.com\/fr\/aide\/parallaxe\" target=\"_blank\" rel=\"noopener noreferrer\">\u00e9l\u00e9ment \u00ab\u00a0pinned bottom\u00a0\u00bb<\/a> au bas de l&rsquo;\u00e9cran d&rsquo;accueil de l&rsquo;application. Le bas \u00e9pingl\u00e9 est un \u00e9l\u00e9ment collant qui reste fixe m\u00eame lorsque l&rsquo;utilisateur fait d\u00e9filer l&rsquo;\u00e9cran de haut en bas. Les <a href=\"https:\/\/www.justinmind.com\/fr\/aide\/prototypage-formulaires-listes-et-grilles-de-donnees\" target=\"_blank\" rel=\"noopener noreferrer\">Data Masters<\/a> et les <a href=\"https:\/\/www.justinmind.com\/fr\/aide\/grilles-de-donnees\" target=\"_blank\" rel=\"noopener noreferrer\">Data Grids de<\/a> Justinmind ont \u00e9t\u00e9 une combinaison essentielle pour ce projet. Il les a utilis\u00e9es pour cr\u00e9er l&rsquo;exp\u00e9rience du chariot de d\u00e9coupe, ainsi que l&rsquo;inventaire, les signets et la personnalisation de l&rsquo;utilisateur. <\/p>\n<h2>Le test ultime : Le processus de test utilisateur de Javier<\/h2>\n<p>Le processus de prototypage de Javier comprend trois phases. La premi\u00e8re est une phase exploratoire au cours de laquelle il cr\u00e9e des prototypes sur papier et observe ensuite comment les utilisateurs interagissent avec eux. La deuxi\u00e8me phase comprend une \u00e9valuation des interactions avec les utilisateurs, et il cr\u00e9e des prototypes plus \u00e9labor\u00e9s pour r\u00e9soudre certains des probl\u00e8mes de convivialit\u00e9 rencontr\u00e9s lors de la premi\u00e8re phase. La derni\u00e8re phase est une phase de validation, accompagn\u00e9e d&rsquo;une bonne \u00e9valuation heuristique.   <\/p>\n<h2>Exp\u00e9rience utilisateur : La formule de Javier pour le plaisir<\/h2>\n<p>\u00ab\u00a0Impliquer l&rsquo;utilisateur dans le processus UX est la meilleure chose qui soit arriv\u00e9e au design depuis la d\u00e9couverte du nombre d&rsquo;or\u00a0\u00bb, affirme Javier en riant. Javier s&rsquo;efforce d&rsquo;am\u00e9liorer l&rsquo;ergonomie pour l&rsquo;utilisateur. Lorsqu&rsquo;on lui a demand\u00e9 ce que l&rsquo;exp\u00e9rience utilisateur signifiait pour lui, il a r\u00e9pondu : \u00ab\u00a0Imaginez un parc avec plusieurs all\u00e9es en gravier. Les chemins se connectent et s&rsquo;entrecroisent. Ils cr\u00e9ent des itin\u00e9raires diff\u00e9rents mais sont tous balis\u00e9s pour aller au m\u00eame endroit. Le promeneur ignore les chemins. Il trouve son propre chemin, en cherchant des itin\u00e9raires alternatifs et des raccourcis qui le m\u00e8neront plus confortablement \u00e0 cet endroit.\u00a0\u00bb Tout comme le vagabond, l&rsquo;utilisateur ignore souvent les panneaux de signalisation et cr\u00e9e son propre itin\u00e9raire pour se rendre l\u00e0 o\u00f9 il veut aller. C&rsquo;est dans le meilleur itin\u00e9raire possible que r\u00e9side la grande exp\u00e9rience utilisateur &#8211; le parcours de l&rsquo;utilisateur &#8211; et c&rsquo;est au designer UX qu&rsquo;il revient de montrer la voie.<\/p>\n<h2>La r\u00e9volution UX de Javier : d\u00e9couvrir l&rsquo;outil de prototypage qui met fin \u00e0 tous les outils.<\/h2>\n<p>Javier contemple le passage de l&rsquo;industrie du design web \u00e0 des pratiques centr\u00e9es sur l&rsquo;utilisateur, ainsi que les outils qui ont rendu cela possible. Les designers UX ont pour objectif de cr\u00e9er des produits utilisables et agr\u00e9ables pour leurs utilisateurs. Mais historiquement, comme le rappelle Javier, les entreprises ont impos\u00e9 aux designers de se concentrer sur les clients disposant d&rsquo;un pouvoir d&rsquo;achat, plut\u00f4t que sur les utilisateurs quotidiens. Mais nous assistons \u00e0 une \u00e9volution vers un design centr\u00e9 sur l&rsquo;utilisateur, les acteurs prenant enfin en consid\u00e9ration l&rsquo;utilisateur final. Par exemple, Netflix a fait tomber Blockbuster en <a href=\"https:\/\/www.amazon.com\/Users-Not-Customers-Determines-Business\/dp\/1591846315\">traitant ses abonn\u00e9s comme des utilisateurs<\/a> et non <a href=\"https:\/\/www.amazon.com\/Users-Not-Customers-Determines-Business\/dp\/1591846315\">comme des<\/a> clients. Les utilisateurs \u00e9tant d\u00e9sormais au centre de la strat\u00e9gie produit, il est du devoir du designer d&rsquo;axer le design du produit autour de l&rsquo;utilisateur final. Des outils comme Justinmind permettent de r\u00e9pondre \u00e0 ce besoin. Pour Javier, le <strong>prototypage basse et haute fid\u00e9lit\u00e9<\/strong> est essentiel pour capturer ses id\u00e9es, identifier les erreurs et apporter des am\u00e9liorations \u00e0 l&rsquo;exp\u00e9rience utilisateur. En tant que designer ind\u00e9pendant, le prototypage lui permet d&rsquo;\u00e9conomiser du temps, des ressources et des maux de t\u00eate. En r\u00e9glant les probl\u00e8mes avant de d\u00e9velopper un design et des fonctionnalit\u00e9s plus complexes et lorsque les erreurs deviennent assez co\u00fbteuses, le rapport co\u00fbt-b\u00e9n\u00e9fice est beaucoup plus \u00e9lev\u00e9.<\/p>\n<blockquote><p>\u00ab\u00a0Justinmind est l&rsquo;outil qui m&rsquo;aide \u00e0 faire passer mes designs au niveau sup\u00e9rieur. J&rsquo;ai la libert\u00e9 de concevoir et d&rsquo;obtenir des r\u00e9sultats \u00e9tonnants.\u00a0\u00bb<\/p><\/blockquote>\n<p><a class=\"jim-banner-post-footer\" href=\"https:\/\/www.justinmind.com\/usernote\/signUp.action\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13263 size-full\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2017\/01\/Download_free.png\" alt=\"T\u00e9l\u00e9charger gratuitement\" width=\"1399\" height=\"302\" srcset=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2017\/01\/Download_free.png 1399w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2017\/01\/Download_free-300x65.png 300w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2017\/01\/Download_free-768x166.png 768w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2017\/01\/Download_free-1024x221.png 1024w\" sizes=\"(max-width: 1399px) 100vw, 1399px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Javier Lianes d\u00e9passe les attentes des utilisateurs avec son prototype de refonte de l&rsquo;interface utilisateur du Kindle d&rsquo;Amazon.  <\/p>\n","protected":false},"author":11,"featured_media":91515,"parent":0,"menu_order":0,"template":"","tags":[8466,8463,8412,8474],"content_category":[],"class_list":["post-125123","tc_content_pillar","type-tc_content_pillar","status-publish","has-post-thumbnail","hentry","tag-etude-de-cas","tag-experience-utilisateur","tag-legacy-fr","tag-ux-design-fr"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tc_content_pillar\/125123"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tc_content_pillar"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/tc_content_pillar"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/11"}],"version-history":[{"count":4,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tc_content_pillar\/125123\/revisions"}],"predecessor-version":[{"id":125247,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tc_content_pillar\/125123\/revisions\/125247"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media\/91515"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=125123"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=125123"},{"taxonomy":"content_category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/content_category?post=125123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}