Share
Aujourd'hui, nous discutons avec deux concepteurs d'interfaces utilisateur mobiles de la manière dont ils conçoivent des interfaces mobiles performantes et des solutions de navigation intuitives. Nous allons apprendre comment Sacha Greif fonctionne avec l'espace limité de l'iPad en utilisant des éléments d'interface utilisateur peu encombrants. Eryk Pastwa explique comment concevoir de multiples tailles de mobiles et comment tester correctement les conceptions en vue d'une utilisation maximale dans le monde réel. Jetez un coup d'œil à leurs flux de travail et aux meilleures pratiques mises en place dans leurs projets.
Ce post est le troisième jour de notre session de conception d'interface. Sessions créatives "Session Day 2Session Day 4"La navigation est particulièrement importante pour les interfaces mobiles en raison de l'espace limité et des interactions contraintes. Les utilisateurs ne peuvent pas ouvrir votre application dans plusieurs onglets, utiliser des raccourcis clavier ou créer des macros. Il est donc essentiel que chaque partie de votre application soit facile d'accès..
Les croquis (présentés ici pour l'application iPhone LePost) vous permettent de parcourir rapidement différentes idées..
Pour l'application de journal Le Monde, la navigation était l'une des principales préoccupations. Comment conserver la structure linéaire d'un journal tout en permettant un accès rapide à une page ou à un article? Et comment tirer parti de la superbe présentation d'un journal tout en offrant une lisibilité maximale sur une surface physique réduite?
Des outils comme Omnigraffle peuvent vous aider à planifier l'architecture globale de l'application..
Premièrement, nous savions que nous voulions fournir deux modes de navigation: un mode "physique" qui vous permettrait de parcourir la présentation réelle du journal et un mode "texte" ne contenant que le contenu de l'article. Le défi consistait à faciliter le basculement entre les modes.
Notre solution était de créer une relation spatiale entre chaque mode.
Notre solution consistait à créer une relation spatiale entre chaque mode. Par exemple, dans l'application iPhone, chaque mode existe sur des pistes supérieures et inférieures parallèles et le passage de l'un à l'autre déclenche une animation de glissement vertical. Cela garantit que le modèle mental de l'utilisateur correspond à l'architecture de l'application. Si vous laissez simplement les sections de votre application sous forme d'une série d'écrans disjoints, il devient beaucoup plus difficile pour l'utilisateur de se faire une idée de sa position. C'est pourquoi les transitions horizontales de diapositives sont si courantes sur l'iPhone.
Un gros avantage des journaux physiques et des livres par rapport à leurs homologues numériques est que vous pouvez les ouvrir à n'importe quelle page de votre choix. Vous pouvez commencer par la page d'accueil, mais si vous préférez lire la section sports en premier, rien ne vous en empêche. Nous voulions recréer cette même liberté avec une interface mobile, nous avons donc exploré plusieurs options. Tout d'abord, nous avons ajouté une table des matières accessible à tout moment dans l'application. C'est un moyen très rapide de passer à un article ou à une section spécifique du journal, mais nous savions que cela ne suffisait pas. Nous ne voulions pas réduire tout le journal à une liste sèche d'articles.
La laveuse pop-over
Ainsi, pour l'application iPad, nous avons également utilisé le nouvel élément d'interface utilisateur contextuel d'Apple, en association avec un nettoyeur, pour afficher un aperçu de la page lorsque vous "nettoyez" la pagination du journal. Et pour que le journal physique ne soit jamais trop loin, nous avons ajouté une fenêtre de navigation au mode texte. Cette fenêtre contient une version miniature de chaque page, qui vous permet de sélectionner un article pour y accéder sans quitter le mode actuel..
La vue partagée
La clé ici est d'obtenir toutes ces fonctionnalités de la route, tant qu'ils sont encore découvrables.
Enfin, nous avons également profité d'une autre innovation de l'interface utilisateur Apple, la vue partagée. En mode paysage, vous pouvez utiliser le volet de gauche pour parcourir la table des matières tout en lisant dans le volet de droite. Avec autant de modes de navigation différents, votre application risque de devenir gonflée et inutilisable. La clé ici est d'obtenir toutes ces fonctionnalités de la route, tant qu'ils sont encore découvrables. Une bonne technique pour y parvenir est de surcharger les éléments existants.
Par exemple, dans les lecteurs vidéo tels que Youtube, la chronologie indique votre position mais agit également comme un nettoyeur qui vous permet de la contrôler. Comparez cela avec les boutons de rembobinage et d'avance rapide, qui vous permettent de vous déplacer dans la vidéo mais ne vous donnent aucune information sur votre position. Si vous appliquez ce principe, lorsque l'utilisateur est prêt, il découvre naturellement la fonctionnalité qui se cachait tout le temps, et la transition entre nouvel arrivant et utilisateur expérimenté se fera de manière transparente..
Sacha est un concepteur français d’interfaces web et d’interfaces utilisateur, âgé de 25 ans et ayant également vécu en Chine, aux États-Unis et en Suisse. Consultez le portefeuille de Sacha, bloguez ou suivez @SachaGreif sur Twitter..
Le mobile est actuellement l'un des secteurs à la croissance la plus rapide. Tout le monde voit à quel point notre environnement quotidien a changé depuis la sortie du premier iPhone en 2007. Quelqu'un avait-il déjà posté quelque chose sur le Web via des appareils mobiles? Ce sont évidemment des clichés, mais ils montrent à quelle vitesse les choses changent.
Revenons à 2010. La première moitié de l'année, l'iPad, le nouvel iPhone avec iOS 4, la toute nouvelle plateforme de Samsung: Bada, une nouvelle version du système Android et de nombreux nouveaux appareils sur une période de six mois. Il montre le point clé de toute la conception connectée mobile: une diversité écrasante. C'est pourquoi nous aimons tant le mobile.
Donc, chaque projet doit commencer par cette question très fondamentale: pour quel (s) dispositif (s) concevons-nous?
De manière générale, il existe environ six systèmes principaux sur le marché, sur lesquels différents dispositifs fonctionnent, et pour lesquels nous concevons et développons actuellement. Chacune d'entre elles peut fonctionner avec des méthodes de saisie très différentes et suivre d'autres consignes d'interface utilisateur. Donc, chaque projet doit commencer par cette question très fondamentale: pour quel (s) dispositif (s) concevons-nous?
C'est le premier point qui détermine le reste, il définit l'éventail des possibilités et des technologies parmi lesquelles nous pouvons choisir plus tard, et nous montre nos limites. À première vue, cela semble simple et direct, mais cela peut facilement devenir très difficile lorsque vous devez concevoir une application destinée à de nombreux périphériques différents. Qu'est-ce qui est important alors? Offrir aux utilisateurs l'expérience la plus similaire, quel que soit le système ou, au contraire, tirer parti d'appareils plus avancés et de leurs technologies?
La première chose que nous prenons en compte au tout début est le nombre de résolutions que l’application doit supporter. Poser la question de la résolution semble un peu démodé récemment, alors que la majorité ne pense qu’à «l’iPhone». Mais tout est rentré dans les standards mobiles - en pensant maintenant à iOS, vous devez penser aux résolutions 320x480, 640x960 et 1024x768. La comparaison avec JAVA ME n’est pas un problème. Si votre application doit fonctionner là-bas, vous devez prendre en charge au moins vingt résolutions d’affichage différentes et encore plus de tailles physiques.!
L'application pour Allegro devait être distribuée via des périphériques Bluetooth (bluAir) lors de l'événement annuel de la société. Nous devions atteindre la majorité de tous les appareils présents sur le marché polonais à ce moment-là. Nous avons également choisi JAVA ME en tant que framework multi-plateformes, mais nous devions en même temps prendre en charge 21 résolutions d'affichage différentes..
À mon avis, essayer de penser du point de vue de l'utilisateur est une règle de base, valable pour chaque processus de conception d'interface utilisateur et en général pour toute conception commerciale, car l'objectif est simple: les utilisateurs doivent apprécier votre conception. Vous devez définir quel est votre groupe cible, qui va utiliser votre application, quel est le contenu que vous diffusez? Les réponses à ces questions peuvent vous aider à déterminer comment vous pouvez améliorer le concept initial et quoi faire pour aider les utilisateurs à trouver facilement le contenu souhaité ou à effectuer les tâches exactes..
Schéma de couleurs de l'application Allegro.
L’application Allegro était un programme assez chargé. Il contenait de nombreuses informations regroupées en plusieurs catégories qui guidaient les utilisateurs tout au long d’un événement..
Connaître vos utilisateurs aide également à déterminer les limites. Il est clair que, par exemple, les jeunes utilisateurs apprennent plus vite et sont plus ouverts aux nouvelles curieuses. Avec ce marché, vous pouvez envisager des systèmes de navigation moins courants ou assez innovants. Mais pour les applications bancaires, je serais plutôt conservateur et essaierais de penser aux utilisateurs d'âge moyen ayant des problèmes de vue, car ces défauts sont très fréquents chez les populations modernes de ce groupe d'âge..
Il devient clair que l'architecture de l'information dans le mobile compte encore plus que l'apparence réelle.
Une fois les exigences et les limites établies, nous dessinons les premières maquettes. Nous définissons le flux de l'application et travaillons sur la mise en page des éléments de navigation. Donc, fondamentalement, nous créons un squelette, nous allons écorcher plus tard. C'est la phase où l'application peut devenir utilisable et intuitive ou non. La règle de base est de garder l'interface aussi simple que possible. L'interface graphique mobile doit être vraiment simple.
Nous testons nos idées sur des feuilles de papier et / ou de simples structures filaires sur des périphériques et essayons d’imaginer leur "contexte mobile". Lorsque l'application est assez complexe, nous créons des prototypes HTML simples, ce qui nous donne une expérience qui peut être très similaire aux produits finis..
Nous commençons également à penser à l’esthétique visuelle alors, mais pour être honnête, je pense que même les applications les plus remarquables vont échouer si la navigation n’est pas simple. Bien sûr, la conception visuelle peut changer l'impression générale d'une application, mais les utilisateurs y plongent très rapidement, surtout dans le cas d'applications utilitaires. Il devient clair que l'architecture de l'information dans le mobile compte encore plus que l'apparence réelle.
Navigation dans les applications Allegro.
L'application Allegro utilisait une touche directe ou une touche gauche / droite. Comme il avait une navigation hiérarchique, nous avons décidé d’utiliser des chapelures qui montrent l’emplacement actuel sous forme d’icônes simples..
La conception graphique est à coup sûr notre partie préférée de tout le processus de développement. Bien sûr, le design visuel aide à créer une bonne première impression, mais nous l’apprécions surtout parce que nous adorons voir nos produits bien paraître. La conception graphique mobile étant une discipline très jeune, nous explorons encore en réalité ses possibilités. Si vous travaillez avec une équipe de développeurs expérimentés, presque rien n’est impossible, même sur des plates-formes plus hostiles au développement.
Nous avons choisi les polices Pixel, car elles étaient lisibles sur les petits et les grands écrans..
La règle la plus importante ici est de tester les conceptions sur des appareils réels. Il y a une grande différence entre l'affichage «de bureau» et l'écran mobile, et ces différences augmentent encore. Et il ne s'agit pas uniquement des différences de densité de pixels, mais également des changements de couleur. Même certains smartphones modernes ne prennent toujours pas en charge 16 millions de couleurs. Par conséquent, lors de la conception de tels appareils, nous sommes toujours conscients des nuances de bleu..
Travailler avec la taille d'affichage.
Nous prenons le téléphone et essayons de regarder nos créations à la maison, au pub voisin et dans la rue, quelles que soient les conditions météorologiques, en particulier par temps très ensoleillé ou nuageux. Ce sont les endroits où les applications mobiles sont utilisées. Nous déterminons ensuite où ajuster le contraste, changer la taille de la police ou agrandir les boutons. Cette règle est valable, que vous conceviez une application utilitaire ou tout simplement un jeu simple. Nous testons toujours à ce stade car plus tard lors du codage, il est parfois très difficile de réorganiser les choses. Alors continuez et testez!
Eryk est un designer très expérimenté de Pologne. Son travail se concentre sur le design pour les services Web et les mobiles. Il développe des interfaces utilisateur intuitives et claires pour les petites et les grandes applications. Visitez le portfolio d'Eryk, regardez l'excellent travail de Mobo Studio et suivez @mobostudio sur Twitter..
Accentsconagua