Article original : How developers and tech founders can turn their ideas into UI design
Par Simon McCade
Découvrez comment transformer une idée géniale pour un produit ou un service en un design UI magnifique pour une application web ou mobile avec ce guide simplifié pour les startups technologiques.
Transformer des idées brillantes en interfaces utilisateur magnifiquement conçues pour les applications web et mobiles est chronophage. C'est une tâche souvent difficile pour les développeurs et les fondateurs de startups technologiques.
Il pourrait sembler que ce devrait être un processus simple après le moment 'Eureka !'. La réalité est qu'un manque d'expérience en design, même chez les ingénieurs les plus techniques, peut empêcher une application de fonctionner au mieux de ses capacités — du moins en ce qui concerne les utilisateurs.
À ce stade, je vais supposer que vous avez mené quelques recherches utilisateurs. Ou du moins, parlé à des clients potentiels pour tester vos hypothèses. Ainsi, vous serez beaucoup mieux positionné pour transformer vos idées en un design concret.
Ce guide simplifié décompose le processus en étapes logiques pour ceux qui ne peuvent pas se permettre de prendre le temps de comprendre toutes les complexités de la conception UI et UX.
Quel est le problème à résoudre du point de vue de la conception UI ?
Le point de départ est toujours de non seulement définir le problème que vous essayez de résoudre, mais aussi de le comprendre du point de vue de vos clients. Il y aura, bien sûr, de nombreuses perspectives dans votre public cible.
La vision d'un fondateur ne peut fonctionner que si elle est conçue de manière à ce que les clients puissent réellement l'utiliser. Cela dépend fortement de leur capacité à articuler l'idée aux bonnes personnes avec le bon ensemble de compétences.
Cela peut sembler simple, mais le vrai problème réside généralement dans le manque d'expertise en design dans les startups technologiques. Il peut être judicieux d'utiliser des ressources cruciales pour gravir une courbe d'apprentissage abrupte à un stade aussi précoce du développement du produit. Le premier problème que vous devez résoudre est de savoir comment résoudre les problèmes auxquels vos clients sont confrontés de la manière la plus rapide, la plus intelligente et la plus efficace.
Une fois que vous avez fait cela, vous pouvez travailler sur la manière de transformer ces idées en designs UI réellement utiles
...le premier problème que vous devez résoudre est de savoir comment aborder les problèmes auxquels vos clients sont confrontés de la manière la plus rapide, la plus intelligente et la plus efficace...
Développer un processus de design simple pour votre application
L'essentiel est de former un processus simple pour la conception UI de votre application — voici les étapes que je recommande toujours :
- Créer un diagramme de flux utilisateur
- Rechercher différents modèles et styles de design
- Créer des wireframes
- Créer des maquettes
Créer un diagramme de flux utilisateur
Commencez par prendre une vue d'ensemble des façons dont les utilisateurs pourraient interagir avec votre application.
Comment pourraient-ils atteindre les objectifs spécifiques qu'ils ont ? Quels sont les chemins potentiels qu'ils pourraient emprunter pour les réaliser ? Pouvez-vous visualiser facilement tous les parcours utilisateurs possibles au sein de votre application dans un diagramme de flux utilisateur ?
Il est extrêmement important de garder les choses aussi simples que possible en réduisant tout encombrement et en supprimant les étapes inutiles. Une vue d'ensemble de cela peut vraiment aider à informer votre conception UI dès le départ.
Certains des outils que j'aime utiliser sont les modèles de diagrammes de flux de Miro, Milanote et Whimsical. Vous pouvez facilement façonner les parcours en comprenant les trois formes typiques que vous trouverez dans les diagrammes de flux :
- Rectangles : Utilisés pour représenter différentes écrans au sein de l'application
- Losanges : Utilisés pour représenter les décisions que l'utilisateur prendra au sein de l'application
- Flèches : Utilisées pour afficher les connexions entre les écrans et les décisions
Cette image illustre un diagramme de flux utilisateur pour la phase de pré-conception d'une application. Vous pouvez explorer d'autres parcours utilisateurs courants et filtrer à travers une large gamme de captures d'écran d'applications iOS, Android et Web ici sur Page Flows.
Rechercher différents modèles et styles de design
La planification facilite la mise en œuvre. Je décompose toujours les tâches en parties plus petites et plus faciles à gérer pour pouvoir atteindre mes objectifs de conception pour les applications.
Les instincts créatifs entreront en jeu ici pour les designers UI ayant des années d'expérience, mais il est facile pour les fondateurs et les développeurs de tomber dans le piège de s'appuyer sur leurs routines quotidiennes pour informer ces décisions, comme prendre trop d'influence des applications qu'ils utilisent simplement régulièrement.
...décomposer les tâches en parties plus petites et plus faciles à gérer...
Il est important de voir cela comme un point de départ sur votre parcours de recherche. Utilisez les informations pour rechercher différents modèles de conception UI dans différents secteurs, tels que les formulaires, les menus et les tableaux. Tirez parti des informations non seulement pour reproduire ce qui fonctionne pour votre public, mais aussi pour l'améliorer afin de rendre votre application aussi bonne que possible.
Une excellente source d'informations à ce sujet est UI Patterns. C'est une ressource brillante pour se familiariser avec les modèles de conception les plus couramment utilisés, y compris comment et quand les employer.
Une fois que vous avez acquis une compréhension plus approfondie des composants que vous pourriez avoir besoin d'inclure dans votre propre application, consultez des sites comme Behance et Dribbble pour plus d'inspiration. Vous pourriez vouloir prendre ce que vous voyez sur Dribbble avec des pincettes, cependant. Une grande partie de ce que vous voyez là-bas est conceptuelle plutôt que le produit fini lorsqu'il s'agit d'applications réelles.
Voici quelques autres excellentes ressources pour les captures d'écran d'applications populaires avec des designs de pointe dans l'industrie :
Ce sont des sources fantastiques d'inspiration visuelle pour la conception de nouvelles applications web et mobiles.
Créer vos wireframes
Maintenant, voici où nous pouvons commencer à être créatifs. Les wireframes sont une partie cruciale du processus de conception, ils ne doivent donc jamais être sautés.
Si vous êtes familier avec un outil de prototypage, c'est l'option préférée pour vous aider à obtenir le meilleur design pour votre application. Si c'est un tout nouveau monde pour vous, alors vous pourriez vouloir revenir à l'ancienne école et revenir au classique stylo et papier. Le temps qu'il faut pour s'habituer aux nouveaux outils ne fera que vous ralentir, alors n'ayez pas peur de revenir à l'ancienne école.
Les wireframes sont une partie cruciale du processus de conception, ils ne doivent donc jamais être sautés.
Jetez un coup d'œil à SneakPeekIt pour une large gamme de modèles d'appareils que vous pouvez imprimer pour utiliser pour vos croquis. Ils sont un moyen complètement gratuit d'obtenir l'inspiration dont vous avez besoin pour lancer vos designs.
Assurez-vous de consulter également Balsamiq, Whimsical et OmniGraffle. Pour plus de variété en termes de composants pré-construits, vous devez commencer la structure hiérarchique de votre application web ou mobile.
Votre première UI pourrait bien provenir d'un amalgame de quelques modèles de design différents de ces sites. Les vérifier tous en profondeur ne fera que vous mettre en bonne position pour optimiser votre expérience dans l'application.
Si vous êtes un ingénieur ou un fondateur de startup technologique dans les premières étapes de la conception, ne vous laissez pas tenter par l'envie de sauter l'étape des wireframes. Vous devez comprendre pleinement chaque angle des parcours utilisateurs de l'application en les visualisant avant qu'il ne soit trop tard pour les modifier plus tard.
Créer des maquettes de votre application web ou mobile
Une fois la hiérarchie en place et la structure de chaque écran définie, vous pouvez passer à des logiciels comme Figma ou Sketch pour concevoir votre produit. Figma est un outil de conception UI basé sur le cloud, conçu pour les équipes, idéal pour donner vie aux wireframes à ce stade du processus.
Les premières maquettes de conception vous aideront à réaliser plus efficacement votre vision et à donner à votre application l'apparence et la sensation d'un produit réel. Elles devraient pouvoir être utilisées comme un véritable point de référence pour les développeurs lorsqu'il s'agit de construire l'application. Ne vous inquiétez pas de passer un peu plus de temps sur cette étape — plus les détails sont nombreux, mieux c'est.
Avez-vous encore des difficultés avec votre design UI ?
Si vous avez l'impression d'avoir fait tout ce que vous pouviez avec votre idée et que vous avez besoin d'aide pour la transformer en un vrai design UI, vous pourriez vouloir faire appel à un designer d'applications pour vous aider.
Plutôt que de continuer à avancer et de risquer des erreurs, je peux appliquer ma décennie d'expérience en design pour mener à bien le processus robuste nécessaire pour mettre votre idée devant de vraies personnes.
Si vous souhaitez une consultation sur votre projet, qu'il s'agisse de la conception complète de votre application web ou mobile ou d'un soutien continu en matière de design UX, je serais ravi de mettre à profit mon expertise et de m'intégrer à votre équipe de développement pour réaliser le meilleur produit final possible.
Besoin de conseils supplémentaires ? Demandez ma fiche de triche GRATUITE qui comprend '47 Astuces UX Actionnables pour Corriger Votre Application'.
Merci d'avoir pris le temps de lire cet article. Si vous l'avez trouvé utile, faites-le moi savoir. ???
Si vous souhaitez lire davantage, consultez mon blog pour des mises à jour régulières.
Cet article a été initialement publié sur www.simonmccade.com.