Concevoir l’arborescence de son application mobile

Pour une application mobile, nous vous recommandons de faire une arborescence relativement courte. A la différence d’un site internet, une application doit avoir un objectif beaucoup plus ciblé et centré. Il vous faudra sélectionner seulement une ou deux fonctionnalités prioritaires qui guideront votre projet. Il est important de rappeler que nous traitons de la conception d’une application et non pas de la version mobile d’un site internet.

En amont : la cohérence de votre application mobile

Le maître mot lors de la création d’une application qu’elle soit mobile ou tablette, est la cohérence :

  • Cohérence dans l’arborescence, vos différentes pages de contenu doivent être organisées de façon logique. Cette logique doit être comprise en un clin d’œil par l’utilisateur, il sera donc primordial de prendre en compte l’objectif de l’application, le besoin auquel elle répond et le public visé.

Répondez aux questions :

  • QUI ? : Qui sont vos utilisateurs
  • QUOI ? : Quel est votre service
  • QUAND ? : Quand les utilisateurs vont ils utiliser votre application
  • COMMENT ? : Comment l’application fonctionne t’elle ?
  • Cohérence dans la navigation, l’utilisateur doit s’y retrouver immédiatement et ses choix de navigation doivent l’amener aux résultats souhaités rapidement et de façon fluide. Bien réfléchir à votre expérience utilisateur est donc clé.
  • Cohérence dans le graphisme, vous allez définir des codes et une charte graphique qui sera appliquée de manière égale à l’ensemble de vos pages.

 

Définir l’arborescence de votre application mobile

L’arborescence de votre application mobile est la structure d’information en diverses rubriques et sous-rubriques du contenu présenté par votre application. L’arborescence constitue l’architecture de votre application. Pour concevoir une application, il faut déterminer quel est l’objet de l’interaction. Cet objet est le contenu de la fenêtre principale. Les menus présentent les actions et les propriétés possibles sur le contenu.

Ciblez vos fonctionnalités clés

Concevoir votre arborescence arrive normalement après le choix des fonctionnalités de votre application. Pour garantir le maximum de chance de réussite de votre projet, il vous faut sélectionner une ou deux fonctionnalités prépondérantes qui guideront l’utilisateur dans sa démarche. Une entreprise comme la SNCF à développer plusieurs applications pour répondre aux principales fonctionnalités demandées par les usagers.

Répondez aux deux questions suivantes :

  • Quelles sont les fonctionnalités principales ?
    • Celles sans lesquelles l’appli ne fonctionne pas
    • Celles qui vous démarquent de vos concurrents
    • Celles qui apportent une vraie valeur ajoutée à l’utilisateur
  • Quelles sont les fonctionnalités secondaires ?
    • Celles qui ne sont pas critiques pour le lancement du produit
    • Celles qui n’apportent pas une valeur ajoutée immédiate à l’utilisateur
    • Celles qui nécessitent un développement lourd et donc un budget lourd

 

Réfléchissez au service principal auquel votre application répond.  Ne cherchez pas a tout faire dès le début.

Une application ne doit pas permettre de tout faire. Ce n’est pas un site internet. Son utilisation doit respecter des contraintes d’ergonomie et de simplicité qui imposent de réduire et de simplifier au maximum son utilisation.

Une application va découler d’une action impliquante qui est son téléchargement. Il est donc plus dur de convaincre l’utilisateur de télécharger son application. La valeur ajoutée apportée de l’application doit être suffisamment forte pour convaincre.

Pensez parcours utilisateur

Le parcours utilisateur est le parcours emprunté par l’utilisateur sur une interface pour atteindre son objectif.

Rendez accessible dès le premier écran les fonctionnalités clés. Votre application doit être simple et facile d’utilisation pour votre cible clients. La définition de l’arborescence, la navigation et l’ergonomie de votre application mobile vont participer à améliorer votre expérience utilisateur.

L’objectif est que l’utilisateur prenne rapidement en main l’apps, qu’il y trouve une valeur ajoutée.  Faites attention à ne jamais laisser l’utilisateur au bord de la route ou à ce qu’il quitte l’application car il est perdu. Favoriser la décision rapide et faciliter les actions.

 

Structurer vos pages

Une fois que vous avez défini vos principales fonctionnalités et pensez votre parcours utilisateur, vous allez définir les pages où vont être stockées l’information. Dans cette étape, faites preuve d’organisation et de cohérence pour regrouper les informations utiles et cohérentes sur des mêmes pages. Par exemple, sur une page utilisateur, vous allez regrouper toutes les informations relatives à cet utilisateur. Pour une application d’actualité, vous définirez une page pour chaque article ayant la même structure.

L’arborescence des pages permet d’identifier les différentes pages et vues dont votre utilisateur aura besoin. Le but est d’avoir une vue d’ensemble et globale des différentes pages de votre interface et leur articulation les unes avec les autres, il n’est pas nécessaire de rentrer dans un gros niveau de détail :

  • Définissez votre contenu
  • Lister les pages / les vues en amont en incorporant ce contenu
  • Définissez les interactions : comment passe t’on d’une page à une autre
  • Regroupez tout ceci en arborescence avec rubriques et sous-rubriques jusqu’à avoir classer tous les contenus disponibles sur votre application.

Gardez à l’esprit qu’une application n’est pas un site web et se construit généralement autour d’une ou deux fonctionnalités principales. Les informations ou les fonctions doivent être accessibles quasi immédiatement. Evitez donc une arborescence trop complexe.

 

 

Le mockup sert à bien définir les zones de contenu (zone de texte, images, vidéos, etc.), l’emplacement des différents éléments (boutons, progress bar, icônes, etc.) sur chaque écran. Dans le web on appelle cela le zoning ou encore wireframing (structure fil de fer).

L’arborescence de vos pages va vous aider à réaliser cette étape. Vous allez définir un emplacement spécifique pour chaque contenu en respectant leur importance hiérarchique. Le mock up s’associe a de la mise en page.

L’outil Balsamiq peut être un outil intéressant pour définir vos mock up car il propose un grand nombre de templates dont des templates Windows Phone. https://balsamiq.com/products/mockups/

 

 

 

Pensez aux étapes d’après

Il reste ensuite l’ergonomie, la charte graphique, les maquettes et le découpage.

L’étape la plus importante après va être de définir l’ergonomie de votre application. Mettez-vous dans la peau de votre utilisateur.

Votre application mobile doit :

  • être claire et lisible,
  • faciliter et accélérer l’usage de l’utilisateur
  • facile en termes de navigation

 

Quelques principes d’ergonomie à savoir en complément de votre arborescence

Un écran de mobile présente des caractéristiques propres difficiles à contourner :

  • La taille de l’écran – le choix des informations présentées et des typographies est clé
  • Les situations de consultation parfois inconfortables (contrastes/fond d’écran, cf éco de batterie)
  • Les habitudes de consultation : l’utilisateur consultera le site selon sa convenance, en position horizontale ou verticale
  • Le choix des couleurs et les contrastes, qui est là pour diriger l’oeil et non le brouiller.
  • Les éléments cliquables ne sont pas forcement reconnaissables – faire des contenus zoomables.

Related

Dans la phase de définition, au-delà de l’étude de l’existant, les besoins sont recueillis, le budget...

Join li diskason