5 étapes pour les applications mobiles avec encadrements et prototypage de papier

Cet article s'appuie sur notre précédent article sur le processus de conception mobile, en approfondissant les phases de prototypage sur papier et de création d'images en fil de fer du développement d'applications. À la fin, je vais avoir une liste de divers outils que vous pouvez utiliser pour créer vos structures filaires et vos prototypes..

La conception de l'interaction pour mobile est un sujet de conversation courant parmi les professionnels de l'expérience utilisateur (UX), mais qu'en est-il de ceux d'entre nous qui ne travaillons qu'avec UX à l'occasion? De nombreux concepteurs et développeurs se voient attribuer des projets qui n'ont pas le luxe de retenir un spécialiste UX, mais qui doivent (bien entendu) toujours produire des interfaces élégantes et intuitives..

Wireframing et prototypage de papier

La communauté des utilisateurs expérimentés a beaucoup discuté de la nécessité d'implanter une structure filaire dans la conception Web, et je commençais à me demander «est-ce que cela s'applique au mobile?» nous travaillons? Non, je pense que c'est plus que ça. Le wireframing et le prototypage sur papier évoluent à mesure que les prouesses et les goûts en ligne des utilisateurs s'affinent, mais cette pratique reste un élément très précieux du design mobile..

Le prototypage de papier avant tout

D'après mon expérience, il existe une grande différence dans la forme et la fonction des structures filaires par rapport aux prototypes en papier, même si les termes peuvent être utilisés de manière interchangeable. Dans mon processus de conception mobile, la première chose qui se passe après avoir déterminé qui utilise l'application et comment, est un prototype en papier - AUCUNE structure filaire.

Certains prétendent que «le papier est mort» et vantent les avantages du prototypage numérique. D'autres soutiennent que le crayon et le papier renforcent la conception. Personnellement, je propose des dispositions plus fluides lorsque je ne suis pas devant mon ordinateur. Cependant, nous sommes tous des individus, avec des préférences et des modes de pensée différents. Peut-être pouvez-vous être aussi créatif devant votre ordinateur; c'est quelque chose que chaque concepteur doit comprendre par lui-même!

Une des choses que j'aime dans le prototypage de papier hors connexion est la vitesse à laquelle vous pouvez itérer le design. J'utilise des notes autocollantes de la taille d'un écran qui peuvent être rapidement retirées, retravaillées, réarrangées, etc. Une fois qu'un flux a été établi pour l'application, il est temps d'inscrire les éléments à l'écran dans une version filaire..

Les structures filaires viennent en second et doivent être partagées

Même s'il s'agit d'une application pour votre propre «client» interne, les structures filaires constituent un autre moyen de vérifier que l'application fonctionne de manière à servir à la fois l'utilisateur et l'entreprise. Vous pouvez ignorer le processus et passer directement des prototypes de papier à Photoshop pour la conception d'interface graphique. Je sais que c'est tentant, mais ne le fais pas! L'instant où vous commencez à travailler dans une bulle est le même temps que vous cédez à la «malédiction de la connaissance».

Dans le livre Made to Stick, les auteurs et frères Chip et Dan Heath parlent de la «malédiction du savoir» et de son impact sur notre capacité à créer de nouvelles idées «collantes». Le principe en ce qui concerne la conception mobile est que lorsque vous commencez à construire votre base de connaissances sur la conception et la technologie mobiles, plus vous vous éloignez d'un «utilisateur d'application typique». Vous ne pouvez pas vraiment imaginer ce que signifie être votre public, même si votre profil correspond parfaitement. Votre capacité à vous mettre à la place de votre public est brouillée par tout ce que vous savez déjà sur l'application, son fonctionnement et ce que le public souhaite, à votre avis..

Une fois que nous savons quelque chose, nous avons du mal à imaginer ce que cela a été de ne pas le savoir. Notre connaissance nous "maudit". - Fait pour coller
Tout cela pour dire que vous devez utiliser une structure filaire et partager ces structures filaires avec le public cible de votre application..

Maintenant que la création de structures filaires et de prototypage de papier dans le contexte mobile a été définie, j'aimerais souligner les cinq principales tâches que vous devriez faire lors de vos sessions de prototypage de structures filaires et de papier. Il est facile de simplement taper une série d'esquisses et de parler d'une journée, surtout si votre objectif principal n'est pas la conception de l'expérience utilisateur..

J'espère que ces conseils vous encourageront à prendre le temps de réfléchir à l'expérience utilisateur de votre application en en faisant un processus simple, étape par étape, reproductible et facile à suivre.!

1. Concentrez-vous sur la tâche principale

La première chose à faire avant même d’envisager la rédaction est de vous poser la question suivante: quelle est la tâche principale de votre application? Notez spécifiquement:

(Votre différenciateur) (Votre solution) pour (Votre public).

Regardons un exemple pour l'application Evernote:

"Evernote pour iPhone vous permet de créer des notes, de prendre des photos et d'enregistrer des mémos vocaux auxquels vous pouvez accéder à tout moment à partir de votre iPhone, de votre ordinateur ou du Web."

La copie sur leur site Web explique clairement la tâche principale de l'application:

(Omni-accessible) (création et stockage de types de fichiers multiples) pour (utilisateurs occasionnels d'iPhone).

Définissez cette déclaration pour votre application et clouez-la à un endroit où vous la verrez fréquemment tout en travaillant sur les prototypes. Cela vous aidera à rester concentré sur la seule chose que l'application DOIT FAIRE.

2. Créer des scénarios de cas d'utilisation

Une fois que vous avez défini votre tâche principale, vous avez probablement aussi réfléchi à qui veut une application qui effectue cette tâche! Les cas d'utilisation sont le MEILLEUR moyen de démarrer le processus de prototypage sur papier. Dans cet article, je décris comment j'ai défini des scénarios de cas d'utilisation pour notre application Doodle Bright. J'ai donné à «mon peuple» un nom, une adresse, une profession et un scénario spécifique dans lequel ils pourraient utiliser une application comme Doodle Bright.

Voici un exemple:

Jane attend dans le cabinet du médecin un rendez-vous à 3 heures avec son fils Chad, âgé de 4 ans. Elle a apporté son iPad au cas où l'attente serait plus longue que prévu et, bien sûr, ils resteraient dans la salle d'attente une demi-heure avant d'être appelés. Jane passe le temps en dessinant des camions et des trains avec Chad pendant qu'ils attendent son rendez-vous.

Dans ce scénario, Jane et Chad jouent ensemble avec l'application, ce qui signifie que maman peut lui indiquer comment interagir avec différents éléments à l'écran s'il n'est pas sûr de l'étape suivante..

Regardons maintenant cet exemple:

Jane est dans la file de covoiturage pour aller chercher son aînée à l'école. Chad est sur la banquette arrière, ennuyé après une journée de courses. Jane lui tend son iPad avec l'application Doodle Bright lancée. Chad sait quels boutons appuyer parce qu'ils sont intuitifs pour un enfant de 4 ans.

Dans ce scénario, les contrôles doivent être facilement compréhensibles pour un enfant non supervisé. Est-ce que cela modifie les types de prototypes de papier que vous créez pour cette application? Heck oui il fait! Maintenant, au lieu de concevoir pour maman et son fils, d'avoir un appel plus large, nous voyons que les prototypes devraient être principalement destinés à l'enfant.

Il est évident qu'une telle application nécessiterait de «penser comme un enfant», mais sans ce scénario d'utilisation pour sauvegarder cette affirmation, vous pourriez tomber dans le «mode adulte» par défaut de penser à la conception..

3. Identifier les modèles mentaux

Dans son article sur «le secret de la conception d'une interface intuitive», Susan Weinschenk explique comment adapter votre conception à ce que l'utilisateur s'attend à voir. Mieux vous pourrez le faire, plus votre interface sera intuitive.

4. Vérifiez le flux

Je constate souvent que j'ai un flux parfait défini pour une application, puis je trouve quelque chose que j'ai oublié. Été là? C'est aggravant, mais j'ai trouvé une chose qui peut éviter beaucoup de «laisser sortir», c'est penser en dehors du scénario «parfait».

Un exemple tiré du scénario Doodle Bright est celui où Chad crée une image totalement impressionnante que Jane souhaite enregistrer et imprimer, mais ferme accidentellement l'application. Euh oh. Et maintenant? Avez-vous pris en compte une sauvegarde automatique dans vos prototypes de papier? j'espere!

5. Trouvez la méthode qui vous convient

Comme je l'ai déjà mentionné, chacun est unique et créatif à sa manière. Vous devez trouver une méthode qui tire le maximum de vous. Le prototypage de papier est l’un des exercices les plus créatifs du processus de développement d’applications; vous devez y travailler pendant vos heures de grande écoute, votre environnement, etc..

Autres ressources

Il existe de nombreux articles avec des dizaines de ressources et d’outils pour la création de structures filaires. J'espère que cet article vous convainc que c'est une tâche à laquelle vous pouvez vous attaquer, même si vous n'êtes pas un expert en expérience utilisateur. Jetez un coup d'œil aux liens suivants et prenez note de ceux que j'ai laissés dans les commentaires ci-dessous.

Pour un excellent article sur le wireframing en général, passez à la section «Avantages de la wireframing» pour apprendre les principes applicables aux applications Web et mobiles..

Prochaine commande, un aperçu de très haut niveau du processus d'encadrement qui était derrière l'application iPad du Washington Post. Personnellement, j'aimerais voir plus d'informations sur celui-ci!

Autres références de la note:

Un ensemble de modèles de croquis imprimables pour les applications mobiles.

Une liste énorme d'outils de wireframing et de prototypage de papier.

Tout comme il est dit: "d'excellentes ressources filaires".