Comment concevoir au-delà de l'interface

Tous les éléments de conception que vous devez ajouter au-delà des interfaces utilisateur, de l'expérience utilisateur (UX) et des interactions (IxD).

Vous avez tracé le parcours d'un utilisateur, conçu les écrans et ajouté des animations d'interaction à un prototype - travail effectué… n'est-ce pas?

Pas vraiment. Une fois que vous atteignez un niveau plus profond, vous constaterez qu’il reste encore beaucoup à prendre en compte. Et je ne parle pas seulement de couvrir les différents états de boutons de l'interface utilisateur!

Ce sujet entier était une motivation énorme pour la Primaire elle-même. Dans cet article, nous allons passer en revue les différents éléments de conception qui vous aideront:

Si vous connaissez quelqu'un qui remplit ces rôles - et que ce n'est pas le genre à lire religieusement / constamment des articles Medium - alors pourquoi ne partagez-vous pas cet article avec eux?

Contenu

  1. Présentez nos cinq éléments de conception (supplémentaires)
  2. Utiliser chaque élément dans une étude de cas
  3. Liez le tout en un seul flux utilisateur

1. Cinq éléments de conception (supplémentaires)

Élément de design? Le terme élément de conception ne fait pas partie du jargon de conception, de la nomenclature, de la technologie, de la conception ou des logiciels. Il est destiné à être inclusif et couvre: «des éléments qui font partie de la conception et de l’analyse de produits et services numériques» -

… Évidemment, l'élément de conception tire mieux la langue.

Éléments de design et leurs rôles

De nombreux éléments doivent être pris en compte dans votre projet. Nous allons nous concentrer sur seulement cinq.

Comme vous pouvez le constater, ces exemples ne sont pas techniques! Ils sont à l'aise du côté des affaires et du design.

2. Étude de cas: flux d'inscription

Utilisons un flux d’intégration standard comme étude de cas. Nous allons passer en revue chacun des éléments de conception, en nous appuyant sur chaque élément de conception au fur et à mesure.

Interfaces en contexte (1/5)

D'accord, nous avons connecté deux écrans… terminé et épousseté?

Nan! Il manque probablement une interface. Vos utilisateurs reçoivent-ils un email lors de leur inscription?

Le flux ou la série d’interfaces ne doit pas nécessairement être strictement en séquence. N'oubliez pas que vous essayez de communiquer le fonctionnement de l'application et non de simuler un ou deux scénarios avec un prototype.

Chaque étape supplémentaire que vous manquez, est comme chaque veste supplémentaire que vous essayez de porter grâce à la sécurité de l'aéroport; chaque question supplémentaire posera de nombreuses questions. Bien sûr, vous pouvez vous en passer ici ou là, mais si vous le faites plusieurs fois, vous aurez de sérieux problèmes.

Voici quelques questions que l’étape supplémentaire pour le «courrier électronique d’inscription» pourrait causer plus tard:

  • Y at-il un modèle pour cela?
  • De quel système provient-il? (Interphone?)
  • Comment cela s'intègre-t-il dans les communications d'intégration des autres clients?
  • Qui est responsable de la création de l'email?

Types d'utilisateurs en contexte (2/5)

Qui sont vos utilisateurs est un sujet important pour la recherche et le marketing UX. Il est important que les développeurs et les concepteurs définissent qui sont vos utilisateurs et ce qu’ils sont autorisés à faire dans votre produit.

Dans notre exemple, cela pourrait être aussi simple qu'un visiteur devient un utilisateur après son inscription. Ce sera probablement plus complexe. Dans notre exemple, un utilisateur s'inscrit, puis est testé pendant sept jours sur le plan Pro complet.

Cela conduit à plus de cas et de questions qui doivent être conçus pour:

  • Que peut faire l'utilisateur Pro que l'utilisateur Libre ne peut pas faire?
  • Que se passe-t-il sept jours après que l'utilisateur se soit inscrit?
  • Est-ce juste une promotion à court terme? Devrait-il être suffisamment souple pour s’étendre à d’autres régimes?
  • Est-ce que tous les visiteurs ont accès à la version d'évaluation ou uniquement des visiteurs avec les bonnes adresses e-mail?

Ces questions couvrent de nombreuses caractéristiques, flux et interfaces différents; il est préférable d’en définir une grande partie sous chaque type d’utilisateur.

Formulaires en contexte (3/5)

Il existe d'innombrables articles sur l'UX des formulaires, mais il n'y a pas beaucoup d'écrits sur le choix des champs à inclure et leur fonctionnement.

Dans notre exemple, il y a un formulaire dans la première étape.

Il y a plus à couvrir que les états d'interface utilisateur de chaque champ! Voici ce que vous devriez considérer:

Obtenir ces détails dès le départ est le moyen le plus simple de gagner du temps et de l’argent. Cela ne coûte pas cher de changer les choses dans cette phase de conception, mais il est relativement coûteux de changer une fois que cela est dans le code.

Données en contexte (4/5)

Dans notre flux, l'utilisateur remplit le formulaire, clique sur Soumettre, puis affiche la belle page d'intégration. Quoi d'autre se passe?

Des données sont entrées, sauvegardées, utilisées et modifiées. Une partie de cela tombe dans le domaine technique, mais il y a beaucoup à considérer du point de vue de la conception.

Voici quelques questions qui pourraient survenir à propos des données dans notre flux:

  • Quelles données utilisateur stockons-nous? Au juste ce qui est dans la forme?
  • Comment l’ajoutons-nous au CRM de l’entreprise?
  • Pouvons-nous utiliser ces informations pour personnaliser l'écran d'accueil?

Incluons l’élément de conception de données appelé «étiquette client». Cela nous permettra de marquer un utilisateur une fois son inscription complétée afin de lui envoyer les bons messages. Cela pourrait être utilisé pour relier l'essai de sept jours mentionné ci-dessus dans la section utilisateur.

Il y a toujours beaucoup à faire avec les données dans les applications. Nous nous intéressons aux données qui ont un sens pour l’entreprise et les utilisateurs. Certaines des données nécessaires peuvent sembler évidentes pour vous, mais ne le seront pas non plus pour la personne qui implémentera la conception sans le même contexte.

Par exemple, le CRM de votre entreprise peut avoir besoin de collecter le code postal de vos utilisateurs. Si vous ne prenez pas cela en compte dans la conception, vous externalisez la prise de décision à quelqu'un d'autre, ou à vous-même.

Règles en contexte (5/5)

Les règles aident à organiser vos conceptions. Ils sont utilisés pour définir les contraintes, les intentions, les chemins alternatifs, les cas extrêmes et les replis du système que vous concevez.

Quand est-ce que quelque chose se classe comme une règle? En règle générale, il est préférable de saisir tout ce qui implique l’application d’une logique ou d’un test conditionnel. Les actions de l'utilisateur ne doivent pas inclure de conditions, car cela brise le récit et rend le flux plus difficile à comprendre.

Vous pouvez définir les détails d'un code de réduction à la caisse en tant que règle définissant le fonctionnement du code de réduction sur quelques lignes. Vous pouvez également utiliser une règle pour définir le calcul complexe du rendement attendu d'un portefeuille dans de nombreuses pages complètes avec des figures et des pièces jointes.

Voici comment nous avons utilisé une règle dans notre exemple:

Nous avons inclus la règle «Rechercher les clients prioritaires lors de l’inscription». Cette règle concerne la possibilité de vérifier si une nouvelle inscription doit bénéficier d'une expérience d'intégration différente, si son adresse électronique provient d'un compte client d'entreprise.

Nous le définissons ici parce qu’il ne fait pas partie du processus d’inscription standard et qu’il sera important de discuter et de concevoir avant la mise en œuvre.

Personnellement, j’ai le sentiment que la foi aveugle donnée à «l’itération» cache beaucoup de retouches inutiles. Si vous implémentez le flux sans les règles de cet exemple et que vous deviez l'inclure ultérieurement, s'agissait-il d'une «découverte UX étonnante», ou s'agit-il d'une modification?

3. Lier le tout ensemble

À quoi ça sert? Excellente question, ces éléments de conception supplémentaires demandent beaucoup de travail! Mais chaque élément que vous ajoutez peut économiser au moins un:

  • réunion,
  • carte d'émission,
  • email,
  • fil,
  • ou post-it note placé avec colère sur votre moniteur avant de vous mettre au travail.

Dans notre étude de cas, nous n’avons défini que huit éléments, ce qui a permis d’économiser au moins 28 questions. Ces questions (lire: retravailler) pourraient avoir été posées par différentes personnes de votre équipe: développeurs, chefs de produit, spécialistes du marketing et, éventuellement, clients.

Certes, vous auriez pu aborder un grand nombre de ces questions dans les documents relatifs aux exigences métier et techniques, mais c’est beaucoup moins amusant. C’est aussi moins efficace.

Pourquoi ça marche?

Notre cerveau de singe semble seulement bien fonctionner avec et se souvenir des histoires. Donc, ce n’est que lorsque vous parcourez le flux de vos utilisateurs que tous les éléments de conception deviennent clairs.

Magnifique! Et si fastidieux à faire! Si vous souhaitez couvrir le même contenu sans passer votre vie dans Sketch pour le concevoir, essayez notre outil Primary.

Comme je l’ai dit au début, ce sujet est l’une des principales raisons pour lesquelles nous avons créé Primaire. Nous savons que ces éléments sont des citoyens de premier plan dans la conception de produits numériques. (Et si ce n’est pas pour vous, c’est cool - ces éléments de design ont toujours une valeur, quelle que soit leur utilisation).

J'imagine que j'ai dépassé la durée d'attention recommandée de 4 minutes pour la lecture des articles. Si vous êtes toujours ici, faites-le moi savoir avec 24 à 46 claps et un commentaire. Je promets de répondre à chaque question dans les commentaires!