Nicolas Gut

mardi 4 juin 2019

Question de couleurs

ApplicationsIHM UI UX – # # # # #

Je l’admets volontiers, les couleurs, ce n’est pas mon truc. Que ce soit pour le dessin, le design d’interface, le choix de mes vêtements, la couleur reste un langage dont je n’ai pas encore saisi la syntaxe.
Heureusement, le web est là, riche de ses enseignements et de ses outils prompts à résoudre tous les problèmes.
Cet article de Patrizia Slongo – prototypr.io judicieusement titré Free Color Tools For Designers, datant d’il y a un an déjà, propose 6 outils gratuits qui vous aideront à gérer la couleur dans vos travaux.
A noter que 6 mois plus tard, Free Color Tools for Designers — Vol. 2 venait ajouter 10 outils de plus et des articles de référence comme A guide to color accessibility in product design et The Science of Color Contrast — An Expert Designer’s Guide.

lundi 27 mai 2019

Design d’application, ce qu’il faut garder en tête

ApplicationsIHM UI UX – # # # # #

Une petite check list à garder en tête tout au long de la conception.

1. Ne pas penser que vous avez toujours raison.
2. Ne pas faire quelque chose de nouveau si vous n’en avez pas besoin.
3. Ne pas oublier de tester votre design.
4. Ne pas y aller à l’instinct, sauf si vous pouvez argumenter.
5. Ne pas sous estimer la charge.
6. Ne pas éliminer des idées sans les avoir testées.
7. Ne pas perdre son objectif.
8. Ne pas oublier d’éduquer les utilisateurs.
9. Ne pas oublier de se mettre à jour.

Plus de détail dans l’article Top nine app design mistakes to avoid

vendredi 26 avril 2019

Fluid Interface, l’essentiel

IHM UI UX – # # # # #

Le 26 avril est certainement à marquer d’une pierre blanche. Car c’est le jour où UX Collective nous gratifie d’un dossier référence sur les Interfaces fluides, « Fluid Interfaces ».

Fluid Interfaces is all about prioritizing the user. We want the user to understand what the system is trying to communicate, and we also want the user to feel control.

Tout l’objet est de donner le sentiment à l’utilisateur qu’il a le plein contrôle de l’interface, que cette dernière lui obéit et lui répond. Ce qui passe par un travail sur :
– l’interaction intrinsèque (réactivité/réponse de l’interface, interruption de l’action, modification de l’action);
– l’animation qui joue le rôle de « body language » de votre interface, une façon de communiquer autrement que par des messages.

2 articles de référence à diffuser un maximum : Fluid Interfaces et Make body language of your design by using Animation.

lundi 8 avril 2019

Standardiser le jargon UI

CultureIHM UI UX – # # # # # #

Avec la popularisation du design d’Interface Utilisateur et l’augmentation de l’intérêt porté à celle-ci, il devient impératif de standardiser le vocabulaire qui lui est associé. Ne serait-ce que pour s’assurer que tout ce petit monde se comprend et que le travail collectif ne tourne pas irrémédiablement au dialogue de sourds. Situation que, je vais être honnête, constate très, trop, fréquemment.
UX Collective se penche sur l’exercice, entre index et méthodologie.

Lire User interface ontology — UI jargon.

jeudi 14 mars 2019

Interface claire ou sombre ? Comment choisir le bon champs colorimétrique de l’UI

IHM UI UX – # # # #

Notre vie quotidienne est un flot continu de choix. Aussi bien dans la vie personnelle que professionnelle, nous devons considérer un nombre important de challenges et il est préférable que les solutions à apporter ne se basent pas seulement sur une intuition, mais aussi sur des faits, de l’expérience et du savoir. Le choix du champs colorimétrique d’une interface utilisateur fait partie de ces réflexions systématiques, projet par projet. Une très bonne raison pour s’y intéresser de près.

A lire sur UX Planet

vendredi 21 décembre 2018

Créer un Design System en 5 étapes

IHM UI UX – # # # # # # # # #

Si vous ne savez pas ce qu’est un design system, Usabilis en propose une définition complète et pertinente :

Les définitions du Design system englobent souvent les mots bibliothèque (library), lignes directrices (guidelines), styleguide et langage visuel (visual language). En fait, le Design system comprend tous ces aspects. Le Design system regroupe ce que nous appelions auparavant la charte ergonomique et la charte graphique. C’est une bibliothèque de référence et un guide pour designer et développer une application métier, un site e-commerce ou toute autre forme de produit ou service digital. Les équipes techniques et design peuvent ainsi piocher des composants prêts à être utilisés et écrits dans un langage commun. Le contenu du Design system dépend de l’identité de l’entreprise et de son écosystème digital. Toutefois, les éléments suivants y figurent généralement :
– Composants UI et patterns
– Principes visuels autour de la typographie
– Palettes des couleurs et règles associées
– Iconographie et imagerie
– Grilles pour structurer les éléments, espaces, etc. (Grid layout)
– Principes de communication de la marque (langage, ton…)
– Éléments réutilisables de l’interface utilisateur (UI)

Maintenant que la notion est claire, comment créer son design system ?
En 5 étapes, avec, de préférence, un outil comme Sketch.
1. Passer en revue son site ou son application et faire une liste d’éléments
2. Organiser en pages
3. Créer des styles de calques et des styles typographiques
4. Créer les symboles et les composants
5. Mettre à jour continuellement le design system

Trouver les détails sur Beyond 360

mardi 19 juin 2018

Comment utiliser les animations dans les interfaces d’applications mobiles

IHM UI UX – # # # #

En UX design, les animations des interfaces d’applications sont l’objet d’innombrables recherches créatives tout comme de débats endiablés. Penchons-nous sur la façon d’utiliser les animations dans le design d’applications mobiles dans le but d’assurer une expérience utilisateur positive et une interaction agréable.

A lire sur UX Planet

mardi 20 février 2018

7 points simples d’amélioration du design d’interface

IHM UI UX – # # # # #

Le titre est volontairement provocateur mais le contenu n’en est pas moins vrai et efficace.
Améliorer simplement et efficacement le design d’une interface en respectant 7 règles quasiment évidentes.
1. Utiliser la couleur et le poids de la typo plutôt que la taille pour hiérarchiser le contenu.
2. Ne pas utiliser du texte gris sur des fonds colorés.
3. Excentrer les ombres.
4. Limiter le nombre de bordures.
5. Ne pas afficher en grand des visuels prévus pour être petits.
6. Utiliser une bordure contrastée pour coloriser une design fade.
7. Tous les boutons n’ont pas besoin de bordure et de fond.

Parcourir en détail sur Refactoring UI

jeudi 9 février 2017

Les tendances 2017 du web design

IHM UI UX – # # # # # # #

A garder en tête, au moins pour l’année à venir.

– Définitivement, c’est la fin du web design traditionnel. On parle maintenant de « experience design ».

– Les interfaces conversent avec l’utilisateur.

– Les Gifs et les animations s’étendent aux phases de design pour mieux illustrer l’expérience.

– Le design responsif maintient son hégémonie grâce son efficacité indiscutable dans la gestion des écrans multiples.

– Le web design est minimaliste et permet à l’utilisateur d’aller droit au but. Gain de place, plus de simplicité et d’efficacité.

– La data visualization est toujours plus la vraie priorité compte tenu de l’importance de l’analyse des données et la diffusion de messages toujours plus complexes. Merci le big data.

– On ne fait plus son marché dans les banques d’images, on vend de l’authenticité avec de vraies personnes, de vrais vidages, de vraies photos.

– Le material design. Parce que c’est Google qui l’a dit. (Si vous sortez de léthargie, c’est par ici)

– Le scroll infini. Mais avec un peu plus de finesse et moins d’ennui.

– 2017 écrit encore plus gros que 2016 pour assurer le « Wow effect ».

Source

lundi 27 juin 2016

Rappel : les 10 règles de base de l’UX mobile

IHM UI UX – # # # # #

Si pour certains je vais donner le sentiment d’enfoncer des portes ouvertes, pour d’autres – et ils ne sont pas minoritaires – il est bon de rappeler ces quelques points à garder en tête lorsque l’on parle d’UX mobile.

1. La taille minimum des éléments d’interaction, d’une quarantaine de points pour permettre de taper du doigt confortablement.

2. Evitez les zones inutilisables, liées à la taille du pouce et aux mouvements qu’il peut faire pour balayer l’écran. Quelles sont ces zones ? Testez-vous même avec votre pouce et votre mobile.

3. Le mobile permet nombre d’activité, dont la principale, répondre à un appel. Il est important de s’assurer que l’on peut interrompre l’usage de l’application et y revenir sans recommencer à 0.

4. Testez l’UX mobile dès que possible, sans attendre sa mise à disposition publique. Il est plus compliqué de faire revenir l’utilisateur après un échec.

5. Allez droit au but, quitte à proposer des compléments si l’intérêt de l’utilisateur le nécessite. Il est dommage de tester la patience et l’endurance de l’utilisateur en le noyant sous des informations et des fonctions qui ne sont pas prioritaires.

6. Préférez les éléments d’UI natifs (j’y reviendrai ultérieurement)

7. Ne développez pas à nouveau des fonctions/services existants, comme celles proposées par le système d’exploitation (GPS, APN, partage, login…)

8. Evitez les impasses, ou zones mortes, comme les CGU, les politiques de confidentialité, les contenus-qui-n’allaient-pas-ailleurs. Ces pages ont tendance à perdre l’utilisateur et pourraient le détourner de l’objectif principal.

9. Soignez la performance. L’utilisateur en situation mobile à une patience très fortement réduite. La moindre seconde de trop dans le chargement du contenu, de réactivité à une action, est un risque de lassitude que vous ne voulez pas courir. Il est donc impératif de se pencher sur l’ensemble des facteurs qui peuvent venir fragiliser votre app/site.

10. La navigation. Evidemment. Mais pas si évident à optimiser. Posez-vous plutôt de fois qu’une la question de l’obligation d’utiliser tel ou tel élément de navigation (non, on n’utilise plus de hamburger dans une app), si tel ou tel contenu doit être impérativement accessible depuis l’écran principal. Si c’est le cas, réfléchissez bien à la position à l’écran.

En gardant tout ça en tête, le travail d’UX mobile n’en sera pas plus simple, mais assurément plus efficace.

5 UX Tips to consider on a mobile (Part One)
Another 5 UX tips to consider on a mobile (Part 2)