Concevoir votre application

Introduction

Une fois que vous avez une idée pour une application Web, il est recommandé de la concevoir prudemment avant de commencer à faire le design ou la moindre ligne de code. Cela semblera totalement évident pour la majorité d'entre vous, mais ce point ne peut pas être ignoré, que vous créiez une application complètement nouvelle ou que vous transformiez une application existante. Cet article aborde les concepts principaux à garder à l'esprit quand vous concevez une application et préparez sa réalisation.

Notez qu'il s'agit d'un workflow simple et général créé pour aider les gens à démarrer. Si vous êtes un développeur professionnel expérimenté, vous voudrez sûrement utiliser vos propres habitudes de travail pour commencer le développement d'une applications web, ce qui est parfait.

Une déclaration d'intention

Pour commencer, vous devriez coucher sur papier les fonctionnalités prévues et les utilisateurs cible, de la manière la plus concise possible, et vous devrez penser aux contextes et situations dans lesquels votre public cible pourra utiliser l'application. Pour mon application Location Finder , j'ai défini les deux listes suivantes :

Fonctionnalités

• Avoir une localisation du téléphone la plus précise possible
• Afficher cette localisation sur Google Map

Groupes d'utilisateurs

• Développeurs souhaitant apprendre les applications Web et le développement Firefox OS, sûrement au bureau ou dans le train
• Quiconque voulant repèrer où il est, principalement à l'extérieur et/ou loin de chez soi

L'application doit être aussi simple que possible; se concentrer sur la réalisation d'une tâche (ou de plusieurs tâches liées) et le faire correctement. Si l'application comprend plusieurs tâches différentes il faut peut-être la séparer en plusieurs applications distinctes. Enfin, si l'application est utilisée sur différentes plateformes, il faut séparer sur des listes différentes les fonctions pour le mobile de celles pour l'ordinateur (ou bien la tablette, télévision connectée etc.)

Ensuite, il faut rédiger un résumé convivial qui va pousser les utilisateurs à télécharger et tester l'application. Si la description tient en une seule phrase alors l'idée est probablement adaptée pour une application. Pour Location finder, je résumerais à:

Location finder utilise la géolocalisation pour vous situer et affiche une carte des environs en utilisant l'API de Google Maps.

Voila, pour une application normalement destinée à des utilisateurs finaux, je ne devrais pas inclure le nom des technologies; cela donnerait plutôt:

Location finder permet de vous repèrer et d'afficher une carte des environs.

Mais comme cette application est destinée à l'apprentissage du développement, j'ai décidé que cette information pouvait être utile.

Faire un croquis de l'application

Une fois que le but de l'application et les utilisateurs visés sont définis, il est toujours préferable de faire quelques croquis sur papier:  essayer de dessiner les différents écrans bruts pour définir à quoi l'application va ressembler et comment l'utilisateur va s'en servir. Vous devrez probablement définir différentes interfaces en fonction de la plateforme (ordinateur de bureau, mobile, tablette, TV) si la liste des fonctionnalités, définie précédemmement, le nécessite.

Dans tous les cas il est utile d'inclure des notes sur les esquisses à chaque étape, autant pour vous souvenir de votre choix lors de la conception et du développement que pour vous assurer que vous n'oubliez rien. Pour Location Finder, la fonctionnalité est tellement simple que je n'ai fais qu'un croquis:

Pour une  application plus complexe vous voudrez peut être inclure les croquis de plusieurs écrans pour montrer l'interface principale et les différentes vues que l'utilisateur parcourra lors de l'utilisation.

Est ce que tous les programmes (peuvent être convertis) et fonctionner en tant que Web app?

A peu près toutes les pages web, programmes ou sites web peuvent fonctionner en tant que web app tant que vous gardez à l'esprit ce qui a été écrit précédemment; il faut la garder simple avant tout. Si une application est particulièrement compliquée (comme un traitement de texte ou une plateforme de commerce en ligne) alors ça ne fonctionnera pas en tant qu'application dans ce contexte, il faudra donc réfléchir à créer différentes interfaces pour les mobiles et les tablettes. Par exemple, le site d'eBay contient la publicité, plusieurs options pour la recherche et beaucoup d'autres fonctionnalités. En comparaison, la version mobile du site omet beaucoup de fonctionnalités et de publicité, et se contente de ne présenter que les fonctions les plus importantes tout en réduisant les interactions avec le clavier.

Google Docs est un autre exemple intéressant à considérer. La version installable sur l'ordinateur est un traitement de texte très riche en fonctionnalités mais ça serait un cauchemard à utiliser sur un site mobile donc la version mobile permet de visualiser le document avec un interface plus épurée.

A ce niveau vous avez une idée de comment présenter les différentes versions. Dans beaucoup de situation vous serez capable d'utiliser les media queries pour optimiser l'interface et les fonctionnalités de votre projet en fonction des différents navigateurs web. Cependant, si vous devez réaliser une application mobile adaptée d'un site web lourd d'entreprise,  ou si les interfaces entre la version application de bureau et la version mobile sont très différentes, gardez à l'esprit qu'il est préferable de créer deux applications distinctes.

Pensez à la technologie dont vous avez besoin

Certaines personnes vont intégrer cette étape dans le chapitre "déclaration d'intention" traité précedemment mais il est souvent plus judicieux de réfléchir  aux fonctionnalités et à l'affichage et, de manière indépendante, au choix de la technologie employée. Vous devez penser aux fonctionnalités et choisir en premier lieu la meilleure pour vos utilisateurs, plutôt que d'essayer d'intègrer difficilement une technologie dans le projet parce qu'elle sera la plus récente, la plus amusante ou la plus attrayante. Bien souvent, l'approche la plus simple reste la meilleure.

En général vous devez étudiez les principales fonctionnalités/besoins de l'application et les technonologies qui permettront la meilleure implémentation. Parmi les questions que vous devez vous poser on retrouve:

• Vous avez besoin de stockage hors-ligne? Si l'application a besoin de faire persister des données, on utilise généralement un langage côté serveur couplé à une base de données. Si vous voulez continuer à les utiliser en mode déconnecté ou installée sur un appareil, il faudra stocker les données via un mécanisme côté client comme  IndexedDB ou localStorage.
• Vous voulez afficher ou manipuler des médias? Vous aurez probablement besoin des fonctionnalités HTML5 <canvas>, <video>, ou <audio>.
• Vous voulez obtenir des informations concernant l'appareil et son environnement? Vous aurez besoin d'utiliser une des nombreuses APIs de l'appareil comme Battery Status API, Proximity API, ou Device Orientation API.

Plan de test

Un autre point qui est généralement considéré comme évident mais qui est souvent négligé est le test. Vous devez tester aussi tôt et aussi souvent que possible. La plus basique des erreurs découverte rapidement pourra permettre d'économiser beaucoup de temps et d'argent pour la suite du projet quand une grande partie des dévelopements sera réalisée. Voici les étapes générales d'un plan de test:

• Une fois que vous avez décrit les fonctionnalités et la cible de votre application, partagez-la avec certains de vos collègues, amis et votre famille. Est-ce que cela semble être une bonne idée dès le début, ou est-ce que ça résonne comme quelque chose de ridicule? Est-ce qu'il est juste nécessaire de peaufiner ou faut-il retravailler les fonctionnalités?
• Partagez aussi vos croquis pour obtenir un retour. Est-ce qu'un point essentiel manque ? Est-ce que quelque chose pourrait en améliorer l'usage?
• Ensuite c'est généralement une bonne idée de créer un prototype qui permettra aux personnes de tester les fonctionnalités essentielles et l'usage de l'application. Sélectionnez des utilisateurs réels, en dehors de l'équipe de développement,  pour tester l'usage fait de l'application et comment il s'en sortent. Peu importe si vous ne pouvez pas offrir une configuration professionnelle. Une selection d'amis et de personnes de la famille c'est bien souvent presque aussi bien, à condition de définir les bons tests et de poser les bonnes questions.
• Quand vous travaillez sur le dévelopement de l'application, répétez la procédure de test utilisateur aussi souvent qu'elle est sensible. Maintenant que vous travaillez sur l'application finale, il faut tester sur le plus grand nombre de navigateur web et d'appareils possible, en commençant par les plus utilisés par le public cible vers les moins courants. Définissez une "experience correcte" sur chaque navigateur web et appareil, ne testez pas juste son usage classique, regardez comment l'application réagit en cas de stress : utilisation soutenue, saisie de mauvaises données, anciens navigateurs ...
• A la fin du projet, mettez en place un cycle rigoureux de tests de qualité pour éliminer tout mauvais bug de dernière minute; ceux qui viennent vous mordre sur le cou lorsque vous vous y attendez le moins.

Conclusion: points à considérer

J'espère que cet article vous a donné les points essentiels à prendre en compte pour réaliser une application web pleine de succès. La liste ci-dessus en est un résumé.

Quel est l'objectif de votre application?

Créez une liste de tâches, une idée pour l'application et le type d'utilisateurs visé puis définissez le but du projet. Déterminez la fonction principale et l'usager le plus important, si possible en une seule phrase. Par exemple: un outil de création d'une liste de souhait pour les personnes qui ne sont pas des acheteurs compulsifs.

Se concentrer sur l'usage principal

Il est possible que vous ne puissiez pas inclure l'ensemble des fonctionnalités définies dans votre liste. Ce n'est pas si grave parce que beaucoup d'applications géniales n'ont qu'un seul but et elles le réalisent correctement. Si votre application tente de faire trop de choses alors il faut penser à découper ces usages en plusieurs applications différentes.

Comment l'utilisateur va se servir de l'application?

A cette étape vous avez défini l'usage principal, le public visé et les principales fonctionnalités. Votre scénario d'utilisation doit aussi prendre en compte l'environnement de l'utilisateur dans lequel votre application sera utilisée. Par exemple une jeune mère qui garde son enfant pourra utiliser votre application pour se souvenir d'une jolie poussette (potentiellement en utilisant d'autres applications, en s'arrêtant et reprenant la saisie plus tard). Un autre utilisateur pourra plannifier l'achat de son prochain ordinateur depuis sa maison, dans son fauteuil, sans être interrompu.

Concentrez-vous sur quelques fonctions essentielles

Regardez encore votre liste de fonctionnalités. Filtrez cette liste avec le but de l'application: si la fonctionnalité ne s'aligne pas avec l'idée directrice de l'application, excluez-la. Décrivez chaque tâche de base en tant que fonctionnalité et demandez-vous: "Est-ce que cette fonction est essentielle?". "Ou est-ce une option interessante mais non obligatoire pour l'utilisateur dans l'usage principal de l'application?" Soyez honnête avec vous-même. Si vous terminez avec une petite liste de fonctions vous êtes sur la bonne voie. Souvenez vous que les bonnes applications font généralement une chose bien. Les application échouent souvent, non parce qu'elles ont peu de fonctionnalités, mais trop.

Réaliser un prototype

Une fois que vous avez les différents comportements majeurs à l'esprit vous pouvez transformer ces étapes en écrans visuels. Vous pouvez esquisser le déroulement de l'application; qui est ce que l'utilisateur va accomplir pour passer d'un écran à l'autre et achever sa tâche. Pensez à la fonctionnalité de votre application et placez sur l'interface les élements qui correspondent aux interractions les plus importantes aux meilleurs endroits. Pensez à commment sera affichée l'application en fonction du  support (sur une tablette ou un ordinateur).

Technologies nécessaires

Regardez votre liste de fonctionnalités et recherchez les technologies les plus pratiques pour répondre à ces besoins.

Définir un plan de test

Construisez un plan de tests raisonnable afin de réduire la probabilité de voir survenir des surprises inatendues, et coûteuses, plus tard durant le développement.

Pour plus d'informations

• Open Web apps
• Developing your Web app