Webdesign Friday (#wdfr) - La communauté des webdesigners francophones

Les vendredis Webdesign !Chaque semaine, un nouvel article par un professionnel du Web.

Design mobile : différencier web et application ?

Design mobile : différencier web et application ?

Lorsque j’ai été contacté par Matthieu Bué pour écrire sur WDfriday, j’ai été très honoré, de part la qualité du contenu, les sujets et thématiques abordés, mais aussi car j’allais pouvoir enfin vous parler de ce qui a beaucoup modifié mon travail de designer ces dernières années : le design d’interface en condition de mobilité (comprenez le “design sur mobile & tablette”). Aujourd’hui, je vais donc plus précisément aborder la question suivante :

Pourquoi & comment différencier les applications web mobile et les applications mobiles natives

Introduction

J’ai souvent autour de moi des entreprises avec lesquelles je travaille qui se posent la question, légitime, de la conception d’une web app ou d’une application native. Je les rassure donc tout de suite car elles ont déjà fait le plus dur : elles ont compris l’intérêt d’avoir leur place dans la mobilité (sur tablette et smartphone) !

Ensuite, vient très vite les choix suivant :

  • concevoir un site web mobile (en responsive design, pourquoi pas);
  • concevoir une web application consultable dans le navigateur du téléphone, de la tablette;
  • concevoir une application native iPhone, iPad, Android, Windows, etc.

avec les problématiques qui correspondent.

1. Le site web mobile

Mobile Website vs Standard Website

Mobile Website vs Standard Website

C’est ce qu’il y a de “plus simple” aujourd’hui. Et quand je dis “simple”, c’est dans le sens pratique, rapide et peu onéreux.

Les navigateurs standards mobiles se perfectionnent (en attendant la sortie de Chrome sur mobile), et les possibilités sont nombreuses. La page web mobile s’adapte donc au format de votre téléphone, de votre tablette, et pour garantir une expérience cohérente entre votre ordinateur, votre téléphone, votre tablette et pourquoi pas le navigateur web de votre télévision, il existe la solution du responsive design pour obtenir un site web qui adapte comme un grand l’intégralité de son contenu, au support sur lequel il est affiché. Nicolas Torres a d’ailleurs écrit récemment un excellent article à ce sujet.

Personnellement, en tant que designer, c’est ce que je recommande et conçois le plus fréquemment pour les clients qui ont des besoins assez simples sur mobile.

Côté design

Ici, le design est très orienté page web. On fonctionne donc avec des hyperliens et navigue de page en page ou en scrollant. Le site doit être avant tout pratique, ce qui limite hélas parfois l’expérience et l’interactivité.

Il y a cependant encore beaucoup de choses à faire, notamment dans la notion de grille pour les sites web mobile, et notamment sur la façon dont il est possible de jouer sur la modularité de la grille. Alterner, textes et images ne vous empêche pas non plus d’insérer des vidéos sur votre page web mobile.

Exemple mobile

2. La web-app, ou application web mobile

C’est un cran au dessus en terme de technicité. En effet, une web-app est théoriquement une page web mais avec une expérience en matière de design et d’ergonomie très différente d’un simple site web mobile, qui se rapproche de l’application native.

Par exemple, lorsque je travaillais avec Mozilla, nous avions créé une série de web-app mobiles qui permettaient de lire de la vidéo avec un player circulaire, un Photo Booth like en javascript, une application 3D qui utilisait l’accéléromètre du téléphone, etc.

Enfin, les web-app mobiles tirent donc un avantage très fort du fait qu’elles n’ont pas besoin d’être développées une fois sur Android, une autre sur iOS, et encore sur Windows Phone, etc. À l’instar de cet avantage, la web-app mobile possède deux inconvénients : elles ne disposent pas des plateformes de diffusion comme l’Apple Store ou l’Android Mar… pardon, Google Play Store, et elles sont limitées d’un point de vue technique car elles n’ont pas – encore – accès à l’intégralité des possibilités du téléphone.

Côté design

Ici, on s’oriente déjà plus franchement vers les applications natives, on ne joue plus avec les conventions du web, on drag & drop des éléments, on a des “boutons” comme sur une application native, on se retrouve également avec plus d’images, qu’elles soient icônes, photos ou textures.

L’idée dans la web app, c’est d’offrir assez de légèreté pour être chargée dans un navigateur web, mais assez d’immersion pour faire oublier que c’est “juste” une page web.

L’expérience de l’application est donc très délicate et intéressante à faire passer. Il ne faut pas hésiter à passer du temps avec des utilisateurs pour recueillir leur retour d’expérience et pour voir si l’immersion se passe bien comme vous l’aviez prévue.

Applications Web

3. L’application native

L’application native, si vous avez un iPhone, un Android ou un autre smartphone, vous connaissez ! En effet, il s’agit des applications codées, non pas dans un langage web, mais dans le langage de programmation conçu pour le téléphone. Ces logiciels mobiles peuvent ainsi faire appel à presque toutes les caractéristiques de votre téléphone, que ce soit le gyroscope, l’accéléromètre, la caméra, le carnet d’adresse, etc.

Cependant, l’application native demande quant à elle plus de temps, de budget et un développeur spécialisé en Java, l’Objective-C, etc. Plus de contraintes donc car il vous faudra développer votre application spécifiquement pour chacune des plateformes que vous ciblerez, mais vous aurez la possibilité de la retrouver très exposée sur Google Play Store, sur l’Apple Store et donc, souvent téléchargée.

De même, il est possible de vendre son application aux utilisateurs, chose qui ne se fait pas – encore – avec les web applications.

Côté design

Ici, tout est permis. Vous allez pouvoir réaliser exactement l’interface que vous souhaitez, sans contrainte. Une application native étant enregistrée sur le téléphone (sauf certaines données qui seront mises à jour depuis Internet), vous allez également pouvoir faire la part belle à la vidéo, à la photo, au son.

L’idéal pour une application native étant d’offrir une expérience unique et différente, là aussi, l’interactivité sera importante. Je compare parfois les applications natives aux “sites en flash” où tout est possible. Enfin, avec l’essort du HTML5, la comparaison s’amoindrie.

Application

Exemple d'une application native

4. Conclusion

Qu’elle soit application native, web-app ou simple page web, il vous faut trouver la bonne solution à votre question. Rien ne sert de développer une application native pour laisser les coordonnées d’une entreprise et quelques photos. À l’inverse, vous serez un peu à l’étroit sur une page web si vous souhaitez créer une application interactive avec beaucoup de fonctionnalités.

Cela vous semble sûrement évident mais dans tous les cas, il faut prendre le temps pour bien évaluer ses besoins, ses moyens et ses ambitions. C’est dans le juste milieu de ces trois composantes que se trouvera sûrement votre réponse ;-)

5. Pour aller plus loin

A propos de l'auteur : Geoffrey Dorne

Je m’appelle Geoffrey Dorne, je suis né en 1985 et je suis designer depuis 2006. Je travaille en tant qu’indépendant et je suis diplômé avec mention en graphisme & multimédia de l’ENSAD. Je poursuis aujourd’hui ma réflexion autour du design et des usages dans mon métier de designer et en tant que chercheur à l’EnsadLab. Grand passionné de graphisme, de typographie, de sciences et d’informatique, je suis très curieux et c’est aussi ce qui me pousse à travailler sur des projets très divers. J’ai un blog qui s'intitule Graphisme & Interactivité et également un autre blog qui traite l’actualité en affiches. Pour en savoir plus, n’hésitez pas à consulter mon portfolio.

Live Tweet

Dans le Blog

Newsletter

Vous souhaitez être tenu au courant des dernières nouvelles concernant le WDfriday, événements, conférences, barcamps, etc… ?

N'hésitez pas à vous inscrire à notre newsletter !