Créez des prototypes pour vos applications et évitez les erreurs
Lors de la création d’une nouvelle application, la création d’un prototype est fortement recommandée avant d’attaquer la phase de développement, cela évite de perdre du temps ensuite en mettant rapidement toutes les idées à plat.
Pour vous aider à créer des prototypes et à éviter les erreurs fréquentes, Nokia Developer a mis en ligne deux vidéos :
- La première vidéo vous montre les bases de la création d’un prototype,
des méthodes pour vous montrer de manière simple comment retranscrire vos idées avec un simple crayon et une feuille ou avec des logiciels tels que Adobe Illustrator, Balsamiq ou Inkscape). - La seconde vidéo montre quelques-un des problèmes que vous pourriez rencontrer
et des erreurs que vous pourriez commettre en utilisant les outils « Qt Quick Components » pour les applications Symbian.
Les bases de la création d’un prototype
Le moyen le plus simple c’est de dessiner. Prenez un stylo, une feuille de papier et une carte dans votre porte-feuille : cette carte est en fait très proche de la forme d’un écran 4 pouces. Faisons ensuite une barre de notifications, une barre d’outils (précédent, et un menu).
Regardons ensuite l’outil appelé Balsamiq depuis lequel vous pouvez faire des maquettes en ligne puis les partager. J’ajoute un en-tête ; les graphiques de l’en-tête viendront plus tard mais je peux déjà le mettre en bleu… et maintenant j’ajoute tout ce dont j’ai besoin pour une liste : un séparateur, deux labels, une icône « suivant », et j’ai déjà l’icône de liste ici. Je place le séparateur, je place l’icône liste ici, maintenant un peu de texte (un titre et une valeur : localisation et Helsinki – Finlande) et j’aligne les lignes de texte. Maintenant j’ajoute l’indicateur « plus d’infos ». Ensuite je copie l’élément de liste, je supprime la seconde ligne, je mets un nouveau titre sur l’élément (c’est maintenant devenu « Départs de vols ») et je remplace l’icône. Ça va très vite et c’est simple, et on fait des glisser-déposer qui sont vraiment faciles. La simplicité du logiciel me permet de ne pas m’arrêter à des détails qui ne sont pas importants.
Maintenant nous allons essayer Inkscape. Ce qui est sympa c’est que vous pouvez utiliser les collections de motif Nokia. Premièrement, je vais ajouter un logo sur la vue. J’ai préparé préalablement le logo de la compagnie, je peux donc l’utiliser immédiatement et le placer au centre de l’en-tête. Je veux plus d’éléments dans la liste : je sélectionne donc cet élément et le copie. Je change ensuite le titre de l’élément pour avoir « Arrivées de vols » et je retourne l’icône.
Regardons une autre application : Adobe Illustrator. Je veux 4 éléments sur ma liste, je copie donc un élément et le place. Je change le titre et je remplace l’icône. J’ai besoin d’une élément de recherche dans la barre d’outils; j’ajoute donc une icône loupe dans la barre d’outils qui lancera éventuellement la fonction de recherche. Enfin, je veux ajouter un joli fond d’écran qui corresponde bien à l’application : je le place ici et l’ajuste… et voilà mon fond d’écran.
Voici le résultat des maquettes une fois finies, avec les différents outils… prenez la méthode qui vous va le mieux. Faites des tests de vos prototypes, et les gens aimerons votre application.
Quelques-uns des problèmes que vous pourriez rencontrer
<center><iframe width= »560″ height= »315″ src= »http://www.youtube.com/embed/1XabTOe8cC0″ frameborder= »0″ allowfullscreen></iframe></center>
L’une des plus grosses difficultés en termes de ciblage des tailles d’écran c’est la résolution comme celle du E6. Ici on voit un exemple sur un N8 en mode portrait, et ici vous voyez comment il s’adapte sur l’écran du E6. Surtout si vous n’utilisez pas les outils « Qt Quick Compenents » pour Symbian, il est très important que vous vérifiez que votre application fonctionne parfaitement sur les écran 640*480 aussi.
Ce deuxième exemple montre l’optimisation de l’application pour différentes tailles d’écran. En mode portrait sur le N8 les éléments sont alignés les uns après les autres ; sur le E6 les deux derniers éléments sont réarrangés, de ce fait ils sont toujours visibles sans avoir à faire défiler l’écran. Nous vous recommandons de tester vos applications, mais dans le cas où vous n’auriez pas tous les mobiles à portée de main, vous pouvez utiliser le service RDA (Remote Device Access).
Parfois, certaines parties de votre application sont des pages web intégrées. Il arrive souvent que ce genre de pages ne sont pas optimisées pour l’usage mobile. Dans beaucoup de cas, il s’agit d’une vue pour se connecter à un site ou service et qui définit la première impression quand on lance une application. La taille actuelle est beaucoup plus petite sur mobile qu’elle ne l’est sur un véritable écran d’ordinateur : donc agrandissez la taille de la police et des éléments (boutons entre autre). Quand une page web est optimisée pour l’usage mobile, elle utilise une police beaucoup plus grande ; la page aura également de plus grands éléments : par exemple 7mm*7mm est la taille minimale recommandée pour la plupart des mobiles Nokia tactiles… et vous devez également laisser de l’espace entre les éléments afin qu’ils soient plus simples à distinguer.
Dans le cas où vous voudriez supprimer un élément seul, c’est généralement fait depuis la liste des éléments. L’application a l’air de ça (voir vidéo). J’ouvre l’élément, j’appuie sur le bouton supprimer dans la barre d’outils (vous devez toujours faire apparaître un message de confirmation afin d’éviter que l’utilisateur perde quelque chose d’important et qu’il ne puisse pas le récupérer ensuite), j’accepte en cliquant sur supprimer. L’application retourne automatiquement sur la première vue en liste avec un message d’information qui s’affiche quelques secondes, indiquant que l’élément a été supprimé.
La suppression peut aussi se faire en restant appuyé sur un élément. Le menu de l’élément s’ouvre et montre uniquement les fonctionnalités qui ont une relation directe avec celui-ci. Je sélectionne « supprimer l’élément », j’accepte la suppression en cliquant sur supprimer, et je retourne à la liste. J’ai encore une fois la notification qui s’affiche pour m’indiquer que l’élément a été supprimé.
Supprimer plusieurs éléments à la fois ressemblera à ça (voir la vidéo). J’ouvre le menu, je sélectionne « supprimer » et je sélectionne les éléments grâce aux cases à cocher. Vérifiez bien d’utiliser des cases à cocher et non des boutons radio car ces derniers ne permettent que de sélectionner un élément. Il y a ensuite simplement deux boutons texte dans la barre d’outils : le bouton de gauche me permet de continuer ma tâche, et le bouton droit permet d’annuler. N’ajoutez pas de bouton précédent à la barre d’outils car la navigation n’est pas clairement définie. Ne supprimez pas non plus les boutons, il n’y a sinon aucun moyen d’annuler l’action : utilisez simplement deux boutons texte dans la barre d’outils. J’appuie sur supprimer, le message de confirmation s’affiche et j’appuie sur « supprimer ». Les fichiers sont supprimés et l’application affiche un message d’information.
Quand une action prend plus d’une seconde à se terminer, vous devriez utiliser une barre de progression pour le dire à votre utilisateur. Si l’utilisateur ne voit pas d’indicateur de chargement, ou de barre de chargement, ils ne savent pas que quelque chose se passe. Vous deviez utiliser un sablier pour les images par exemple pour montrer qu’un élément n’est pas prêt, et vous deviez utiliser un élément fictif dans le cas où il n’y a pas d’image à montrer. Soyez vigilant en créant vos propres icônes de chargement dans la barre d’outils, la plupart du temps la métaphore n’est pas claire. Je vous recommande d’utiliser le composant sablier (spinner) qui est reconnu et associé à l’action de chargement.
Ce n’est pas toujours nécessaire de montrer un en-tête : la plupart du temps le contenu donne assez d’informations. Lorsque vous utilisez des onglets, n’ajoutez pas d’en-tête supplémentaire au-dessus ou au-dessous de ceux-ci. Les onglets sont suffisamment parlants pour indiquer à l’utilisateur où il se trouve. Ne pas avoir d’en-tête supplémentaire vous permet d’avoir plus de place sur l’application, pour mettre une plus grande image par exemple. Si vous placez un en-tête en haut d’une liste défilante, il faut que la barre défile avec le contenu afin d’avoir plus de place sur l’écran.
Pour plus d’informations, consultez la section Pitfalls de Nokia Developer.
