12 astuces de conception d'interface utilisateur pour applications mobiles et Web dont personne ne vous a parlé - jusqu'à présent
Publié: 2016-02-28[ Proto .io est un outil de prototypage d'applications mobiles utilisé par les entrepreneurs et les startups pour créer des prototypes réalistes entièrement interactifs qui ressemblent à de vraies applications.]
Nous avons demandé à sept concepteurs, développeurs et entrepreneurs d'interface utilisateur quelles astuces de conception d'interface utilisateur d'applications mobiles et Web ils avaient apprises à leurs dépens ou apprises au cours de leur carrière. Soit personne ne leur a jamais parlé de ces conseils, soit personne ne semble connaître les problèmes lorsqu'ils les évoquent. Dans tous les cas, voici 12 choses que vous n'avez plus besoin d'apprendre par essais et erreurs - à moins, bien sûr, que vous ne l'ayez déjà fait !
Top 3 des astuces de conception de Duffy
John Geletka est vice-président exécutif de la stratégie numérique chez Duffy (@duffydesignx), une agence avec plus de 30 ans d'expérience en design. Voici quelques trucs qu'il a appris au fil des ans.
Deux peut être un nombre magique.
“Avec le responsive design, concevez toujours deux écrans à la fois : mobile portrait (320px) et desktop (1200px). Cela rend le processus beaucoup plus rapide », déclare Geletka.
Commencez avec une conception simple.
"Réduisez toutes les fonctionnalités, les cloches et les sifflets dans un premier temps. Éliminez les indésirables et concentrez-vous sur l'objectif de l'application », explique Geletka. « Cela signifie qu'il ne faut pas ajouter le partage, l'enregistrement et chaque intégration à votre conception au début. Assurez-vous de bien comprendre l'idée principale.
N'ayez pas peur de prendre un stylo.
"Les outils numériques sont formidables, mais parfois, vous pouvez en faire plus sur papier en 10 minutes", déclare Geletka. "Si vous êtes coincé ou à court de temps, utilisez du papier."
Atteindre l'équilibre avec cette astuce de conception d'interface utilisateur d'application Web
Brandon Termini est le fondateur et directeur créatif de Handsome (@HandsomeMade), une agence engagée dans la création de conceptions d'interface utilisateur d'applications Web et de produits numériques « intentionnellement beaux et délicieux ».
Utilisez le poids optique correct.
"L'équilibre est extrêmement important lors de la création d'interfaces réussies. Un bon équilibre permet à vos utilisateurs d'analyser facilement votre application comme vous l'avez prévu », déclare Termini. "Je vois que cette règle est enfreinte le plus souvent lors de l'utilisation de diverses icônes dans les interfaces. Certaines icônes sont plus pondérées horizontalement tandis que d'autres sont plus verticales, et c'est notre travail de nous assurer que lorsqu'elles sont assemblées, elles se sentent également équilibrées.
Boutons de poids optique et de lecture
« Si vous concevez un bouton de lecture, la réponse n'est pas de coller un triangle à côtés égaux centré horizontalement et verticalement à l'intérieur d'un cercle. Bien sûr, géométriquement, ils sont centrés, mais le triangle semble optiquement plus lourd à gauche en raison de sa plus grande hauteur », explique Termini. "Ne vous inquiétez pas, vous pouvez faire deux choses pour résoudre ce problème : soit déplacer légèrement le triangle vers la gauche pour inciter l'œil à le voir centré, soit réduire légèrement la largeur du triangle pour que tous les côtés apparaissent égaux."
De la conception d'interface utilisateur d'application Web au mobile
Nos trois prochaines astuces de conception d'interface utilisateur d'applications mobiles et Web proviennent de Christian Dodd, vice-président et directeur de la stratégie d'expérience utilisateur et de Nathan Koch, directeur de la technologie créative de Cramer-Krasselt (@cramerkrasselt). Cramer-Kasselt est la deuxième plus grande agence de publicité indépendante aux États-Unis, avec des clients tels que Porsche, Corona Extra et Heinz, donc Dodd et Koch puisent dans un riche réservoir d'expérience pour nous apporter ce conseil :
N'oubliez pas les interactions de survol Web lors du portage sur mobile et ayez un plan clair pour les traiter dès le début de la conception.
"Le contenu caché derrière un état de survol sur le bureau peut être traité de plusieurs manières sur mobile : directement sur la page et caché derrière une touche. Aucune solution unique pour gérer les événements de survol du bureau ne fonctionne dans tous les cas », déclarent Dodd et Koch. "Le contenu explicatif/utilitaire bénéficie souvent d'être flottant pour s'afficher sur la page, et le contenu exploratoire a souvent plus de sens derrière une touche. En général, à mesure que les utilisateurs se familiarisent avec le défilement sur tous les appareils, il devient de moins en moins nécessaire de masquer le contenu derrière les états de survol et de masquer/afficher les widgets.
Recommandé pour vous:
Que signifie la disposition anti-profit pour les startups indiennes ?
Comment les startups Edtech aident la main-d'œuvre indienne à se perfectionner et à se préparer pour l'avenir...
Stocks technologiques de la nouvelle ère cette semaine : les problèmes de Zomato continuent, EaseMyTrip publie des...
Les startups indiennes prennent des raccourcis à la recherche de financement
La plate-forme de marketing numérique Logicserve met en sac un financement INR 80 Cr et se rebaptise LS Dig ...
Un rapport met en garde contre un examen réglementaire renouvelé sur l'espace Lendingtech
Essayer de faire fonctionner la vidéo en lecture automatique sur le Web mobile n'en vaut généralement pas la peine.
"Les développeurs de systèmes d'exploitation mobiles n'autorisent pas la lecture automatique de vidéos pour une raison. En général, l'audio et la vidéo perturbent davantage l'utilisateur sur mobile », déclarent Dodd et Koch. "Les utilisateurs mobiles sont habitués à faire des choix délibérés pour consommer des médias."
La conception réactive ne se limite pas à réduire votre navigateur.
"La détection de fonctionnalités est également une partie importante du développement Web mobile", déclarent Dodd et Koch. "Ne pensez pas que vous ne pouvez pas deviner les événements tactiles sur un site Web de bureau, les détails de l'interaction mobile sont plus sophistiqués qu'il n'y paraît."
Il y a plus dans la règle de trois que vous ne le pensez
Karolyn Hart est directrice de l'exploitation d'InspireHUB (@Inspire_HUB) et créatrice de l'IHUBApp, l'une des premières applications Web mobiles d'entreprise sur le marché.
Essayez de conserver tous les éléments de conception de l'interface utilisateur de l'application Web par groupes de trois.
« Nous sommes tombés sur la « règle de trois » alors que nous recherchions comment créer la confiance dans notre interface pour nos clients. La version 1.0 de notre plate-forme n'était pas à la hauteur », déclare Hart. « La recherche montre que trois est le nombre optimal qui augmente la confiance. Moins de trois et les gens ne se sentent pas sûrs, plus de trois et ils se sentent dépassés.
«Nous avons donc lancé un défi UX selon lequel tout doit être présenté par trois», explique Hart, «des décisions aux étapes à mesure que nos clients remplissent leurs applications. La règle a transformé notre outil. Notre back-end est extrêmement sophistiqué pour s'adapter à la simplicité de la conception, mais le résultat en valait la peine !
Garder les gestes simples et intuitifs
Jason Suriano est fondateur et PDG de Rocketfuel Productions Inc. (@TrajectoryIQ). Avec plus de 13 ans d'expérience dans la conception d'interfaces utilisateur d'applications mobiles et Web, et ayant créé des projets en ligne et mobiles pour des entreprises comme Discovery Communications, Suriano a recueilli de nombreux conseils de pro. Voici son préféré :
Sur mobile, partez du principe que tous les doigts sont maladroits.
"Une astuce que nous avons mise en œuvre lors de la conception de jeux mobiles consiste à faire de l'écran de démarrage entier une zone tactile. Cela signifie que si l'utilisateur appuie sur le bouton de démarrage et rate, l'application chargera toujours l'écran de jeu suivant, garantissant que l'utilisateur continuera dans l'application », explique Suriano.
"Parce que l'interface utilisateur / UX mobile est définie par des tapotements, des doubles tapotements, des balayages et des gestes, un faux pas en concevant quelque chose de simple comme un écran de démarrage peut laisser votre utilisateur bloqué ou frustré, le forçant à appuyer sur le bouton d'accueil et à quitter l'application ", ajoute-t-il. .
Garder l'esprit ouvert aux nouvelles astuces de conception d'interface utilisateur d'application Web
Nolan Kier est chef de projet et associé au développement commercial chez Messapps (@Messapps), une société de développement d'applications basée à New York. "Bien qu'elle ait été fondée il y a un peu moins de trois ans, Messapps est déjà rapidement devenue l'une des sociétés de développement d'applications les plus réputées et les plus innovantes dans le domaine du développement d'applications", déclare Kier, "et nous avons appris beaucoup d'interfaces utilisateur d'applications Web. astuces de conception au cours de ces trois courtes années.
Continuez à rechercher de nouvelles et meilleures façons de faire le travail.
«Nous avons appris de nombreuses astuces ou de nouvelles méthodes pour accomplir une tâche soit en recherchant le problème, soit en approfondissant un problème de développement particulier pour déterminer quelles réponses pourraient être trouvées», explique Kier. "Par exemple, apprendre à écrire des documents sympas en écrivant de nouveaux extraits de code dans LaTeX, qui s'apparente à un éditeur de texte avec un style/format de programmation. De plus, Mathematica, qui est comme Mathcad pour MacOS, avait cette fonctionnalité cachée intéressante qui permettait à un utilisateur de créer un schéma 3D difficile à l'aide du logiciel.
"Pour la conception, découvrir comment compresser des images en utilisant des éléments tels que la modification des canaux alpha et la possibilité de compresser des images individuelles à l'aide d'algorithmes personnalisés étaient de petites astuces qui ont facilité le processus", explique Kierk. «Être dans le domaine de la conception et du développement d'interfaces utilisateur d'applications Web exige une innovation qui correspond à l'évolution de la technologie. En conséquence, nos concepteurs et développeurs retravaillent constamment nos processus internes et externes pour "réinventer la roue" et découvrir de nouvelles façons de concevoir et de développer. »
Trouver les bonnes personnes avec qui travailler
Robert Pieta est ingénieur iOS et PDG de Porter Key (@PorterKeyboard), un clavier iOS intelligent qui fournit des suggestions contextuelles. Voici son plus grand conseil en tant qu'ingénieur et entrepreneur :
Trouvez un concepteur développeur ou développeur concepteur.
"Quelqu'un qui comprend et possède une expérience de haut niveau des deux côtés aidera à résoudre les problèmes de communication et aidera à maintenir un projet dans les délais", explique Pieta. « Il y a deux avantages principaux à cela. Tout d'abord, une personne ayant de l'expérience en conception et en développement peut aider à combler les lacunes en matière de communication. La conception et le développement ont tous deux leurs propres termes clés, leur argot, leurs hypothèses implicites et leurs principaux locataires. En connaissant les deux mondes, les problèmes de communication peuvent être détectés de manière préventive.
"Deuxièmement, un développeur ayant une expérience en conception peut estimer la complexité et les besoins en ressources bien mieux qu'un seul développeur, un seul concepteur ou même un chef de produit", ajoute Pieta. « Souvent, de petites modifications de conception peuvent entraîner une réduction significative du temps de développement. Cela est particulièrement vrai sur mobile, où certains paradigmes de conception sont pratiquement prédéfinis. Comprendre quelles personnalisations sont faciles à mettre en œuvre et quelles animations sont simples à utiliser aidera à garantir que les développeurs et les concepteurs apprécient le processus. »
"Certaines équipes existantes peuvent prétendre que les réunions debout avec les développeurs et les concepteurs résolvent ces problèmes", explique Pieta, "mais souvent, ce n'est pas le cas. La réunion est trop courte pour approfondir avec précision les hypothèses de conception implicites, les recherches précédentes sur les utilisateurs, les décisions d'architecture de code existantes, le choix du langage et d'autres choix qui définissent le projet. Seule une personne ayant de l'expérience dans les deux mondes sera en mesure de combler l'écart rapidement et efficacement.
Et une autre astuce de notre part : utilisez le bon outil de prototypage
Certaines astuces de conception d'interface utilisateur d'applications mobiles et Web peuvent être enseignées, et certaines ne peuvent être apprises qu'à la dure, par l'expérience. Heureusement, les concepteurs et développeurs d'aujourd'hui peuvent bâtir leur expertise, comme on dit, sur les épaules de géants.
[ Proto .io est un outil de prototypage d'applications mobiles utilisé par les entrepreneurs et les startups pour créer des prototypes réalistes entièrement interactifs qui ressemblent à de vraies applications.]