Design mobile : différencier web et application ?

[note : j’ai écrit originellement cet article sur wdfriday ;-) ]

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

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évison, 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 en image d’un site web 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 Market 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.

Deux exemples de web-app en image :

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 l’Android Mar… pardon, Google Play, 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.

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

• Des exemples d’applications natives
• Des exemples de site web mobiles
• Des exemples de web-applications