Le blog de Sophie

Comment web design et mobile design sont en train de conver­ger

Ces dernières années, l’ac­qui­si­tion et l’uti­li­sa­tion de supports mobiles – de la simple consul­ta­tion de site à la concré­ti­sa­tion d’un achat – n’a eu de cesse d’aug­men­ter. Tablettes et smart­phones prennent le pas sur l’usage jusqu’a­lors démo­cra­tisé des PC de bureaux et autres ordi­na­teurs portables. Et tandis que l’em­ploi de supports mobiles surpasse le web, nous sommes témoin de l’in­fluence toujours plus impo­sante du respon­sive design (design pour mobile) sur le web design. De sorte qu’en 2014, l’aug­men­ta­tion de l’usage de support mobile au niveau mondial ne peut plus être igno­rée.

blog_1

Le respon­sive design, bien plus que l’ajus­te­ment à diffé­rents supports

Selon Smashing Maga­zine :

« Respon­sive Web Design is the approach that suggests that design and deve­lop­ment should respond to the user’s beha­vior and envi­ron­ment based on screen size, plat­form and orien­ta­tion… »

(Traduc­tion : « Le respon­sive web design est l’ap­proche qui suggère que design et déve­lop­pe­ment doivent répondre au compor­te­ment et à l’en­vi­ron­ne­ment des utili­sa­teurs, sur base de la taille de l’écran, la plate­forme et l’orien­ta­tion … »)

Il ne s’agit pas simple­ment de réso­lu­tions d’écran et d’images ré-ajus­tables. Chaque produit (appli­ca­tion mobile ou site) doit être conçu spéci­fique­ment et distinc­ti­ve­ment pour chaque support (et non faire l’objet d’un simple copier/coller). Pourquoi ? Tout simple­ment parce que chaque appa­reil a lui-même été conçu avec une fina­lité d’uti­li­sa­tion spéci­fique et possède des contraintes tech­niques qui lui appar­tiennent. Ainsi, déve­lop­per une appli­ca­tion pour smart­phone et ne pas conce­voir son pendant sur tablette rendra domma­geable l’ex­pé­rience utili­sa­teur, ainsi que l’uti­li­sa­tion même de l’ou­til (du site, de l’ap­pli­ca­tion).

blog2

Il nous est déjà arrivé à tous d’ins­tal­ler une appli­ca­tion déve­lop­pée pour mobile sur une tablette. L’ap­pli­ca­tion s’avère souvent inuti­li­sable car non opti­mi­sée pour le support, la réso­lu­tion d’écran mais égale­ment les contraintes et possi­bi­li­tés tech­niques. Par exemple, la tablette dispose d’un clavier virtuel et permet de connec­ter un clavier physique, ce que le Smart­phone ne permet pas. D’un point de vue de l’op­ti­mi­sa­tion du produit, les possi­bi­li­tés tech­niques spéci­fiques à un support pour­ront appor­ter à l’ap­pli­ca­tion ou au site une plus-value, comme elle pour­rait la rendre complè­te­ment inuti­li­sable (par exemple, si le clavier virtuel de la tablette appa­raît au-dessus des champs d’un formu­laire que l’in­ter­naute est en train de complé­ter).

À cette fin, Matt Gemmel a listé une série de diffé­rences entre les appa­reils à écran tactile large (tablette) et à écran tactile plus petit (smart­phone) ayant un impact sur la manière avec laquelle nous devons envi­sa­ger le design d’un produit : http://matt­gem­mell.com/ipad-appli­ca­tion-design/

L’im­pact des écrans tactiles larges sur le respon­sive design

Si l’iPad a large­ment popu­la­risé l’écran tactile dit « large », ce dernier fut égale­ment à la source du déve­lop­pe­ment de nombreux autres supports du même type. Les supports hybrides ont parti­cipé à complexi­fier encore davan­tage le design et le déve­lop­pe­ment de nouveaux produits. Bien que tablettes et smart­phones soient simi­laires en termes d’hard­ware et d’OS, la diver­sité des produits témoigne de la diver­si­fi­ca­tion des usages pour lesquels ces derniers ont été conçus (iPhone, iPad, Kindle, etc.). L’im­pact que les écrans larges ont sur la concep­tion graphique des produits est donc assez consé­quent.

blog_3a

L’uni­fi­ca­tion de l’ex­pé­rience digi­tale à travers les diffé­rents supports

Bien que chaque appli­ca­tion, page web, etc. doive être envi­sa­gée, conçue puis déve­lop­pée de manière spéci­fique pour chaque appa­reil, contexte d’uti­li­sa­tion et fina­lité d’usage ; il est hors de ques­tion que l’ex­pé­rience utili­sa­teur soit égale­ment unifiée. En effet, l’uni­fi­ca­tion du design sur les diffé­rents supports permet prin­ci­pa­le­ment de ne pas « dépay­ser » l’in­ter­naute et ainsi, opti­mi­ser l’ex­pé­rience utili­sa­teur. Ce dernier ne doit pas se sentir perdu lorsqu’il décide de passer d’un appa­reil à un autre.

Imagi­nons un indi­vidu en plein proces­sus d’achat. Ce dernier commence par consul­ter les articles d’un site de vente en ligne sur sa tablette tactile. Sa consul­ta­tion termi­née et son article ciblé, ce dernier préfère réali­ser son achat via son ordi­na­teur de bureau. La cohé­rence graphique de l’in­ter­face entre les diffé­rents supports permet­tra à l’in­ter­naute de se repé­rer immé­dia­te­ment, ce qui permet­tra d’évi­ter (notam­ment) l’aban­don, en cours de route, du proces­sus d’achat. En effet, le manque de cohé­rence graphique est respon­sable de lourdes pertes en termes de conver­sion.

blog_3

Du point de vue du desi­gner et du déve­lop­peur web, envi­sa­ger dès le départ le design d’un site de manière globale (pour tous les supports sur lesquels ce dernier devra s’af­fi­cher) a un impact non négli­geable sur la créa­tion en elle-même (tant au niveau de l’ef­fi­ca­cité du travail que sur les choix graphiques qui vont suivre). Il ne faut pas oublier qu’en plus de devoir adap­ter les desi­gns aux diffé­rents appa­reils, les web déve­lop­peurs doivent égale­ment se soumettre aux contraintes des diffé­rents navi­ga­teurs (ainsi qu’à leurs trop nombreuses versions).

Les desi­gns, déjà très épurés par la tendance, s’en­vi­sagent désor­mais davan­tage en blocs (carrés). Face à une idée un peu plus complexe et déli­cate à mettre en place puis à décli­ner, on préfé­rera la simpli­cité de formes simples et de zones bien déli­mi­tées (en carrés, rectangles, lignes, bandes colo­rées, et j’en passe). Dans un contexte de crise, certaines agences – dans une recherche constante de dimi­nu­tion des coûts par l’aug­men­ta­tion de l’ef­fi­ca­cité – se tournent bien volon­tiers vers ce type de design, bien plus simple à implé­men­ter et à conce­voir.

En conclu­sion

Si le secteur reste sous-tendu par des tendances auxquelles acteurs du web /desi­gners et déve­lop­peurs ne peuvent échap­per (flat design, etc.), le risque de tomber dans le travers d’un mini­ma­lisme accru (design simpliste en blocs) – du fait de la simpli­fi­ca­tion que cela apporte à la décli­nai­son du site web en site mobile, ainsi que sur les divers navi­ga­teurs – est bien présent. Envi­sa­ger le design en amont et ce, pour tous les supports, est une excel­lente chose puisque cela permet tant d’op­ti­mi­ser le design en lui-même que le temps auquel on va s’y consa­crer. Veillons à ce que cela ne bride pas pour autant la créa­ti­vité des desi­gners.

Il devient donc indé­niable que la proli­fé­ra­tion et la diver­si­fi­ca­tion des supports tactiles (allant du smart­phone à la tablette) a un impact consé­quent sur le web design, tant en terme de concep­tion qu’en termes d’ex­pé­rience utili­sa­teur. Conce­voir une inter­face au design respon­sive, c’est être amené à prendre en compte, pour chaque support :

  •  les réso­lu­tions d’écran ;
  •  les divers navi­ga­teurs et leurs nombreuses versions ;
  •  les fina­li­tés et contextes d’uti­li­sa­tion ;
  •  les contraintes et possi­bi­li­tés tech­niques.

Et ce tout en veillant à conser­ver une cohé­rence et une homo­gé­néité graphique constante.

blog_5