#1🍿POPCORN UX/UI

la sélection de septembre 2017 de snacks & liens à propos de 🙇Product Design ✏️UX & 💎📲 UI

J’inaugure ce premier numéro de notre sélection de liens. Elle a pour but de partager dans le cadre de france télévisions (et plus largement) les articles qui ont retenu notre attention.

Avis aux contributeurs internes, francetelevisions-design needs you ;)

1. Sketch

Sketch libraries 💎📦

Chez france télévisions nous avons mis en place depuis plusieurs mois un design system (avec une librairie et un style guide partagés inspiré des principes de l’atomic design). Ce workflow permet désormais aux équipes (UX & UI)) de travailler avec beaucoup plus de réactivité et de s’assurer avec beaucoup plus de finesse de l’unité du produit sur l’ensemble des supports.

Les avantages de l'Atomic Design et comment appliquer la méthode

D’abord initié dans le cadre d’un projet puis plus largement disséminé dans toute la maison, ce processus, qui combine Sketch + Craft + Dropbox business + Trello + Zeplin permet de travailler de bout en bout, du wireframe à l’UI définitive et de satisfaire une bonne transmission si bien avec les PO qu’avec les développeurs.

Nous avions identifié néanmoins deux problèmes majeurs :

• il était impossible pour deux membres de l’équipe de travailler simultanément sur le même fichier.
• la gestion du “versioning” était délicate à gérer.

Encore en version beta, Sketch 47 intègrera désormais directement la gestion de la librairie (jusqu’alors nous nous appuyions sur Craft d’Invision) et pourra être combiné avec Abstract une sorte de Github pour designer.

💎 Sketch Libraries and 🏴 Abstract combined in a design workflow

Sketch templates 💎📱

Sketch comprend de nombreux templates natifs par défaut, mais il arrive que l’on en identifie de nouveaux en fonction des besoins du moment sur des sites comme https://www.sketchappsources.com/ par exemple. Nous nous sommes intéressés à la manière de partager avec l’ensemble des équipes ces divers templates.

Symlink sharing Sketch Templates

Sur ce sujet, voici typiquement une ressource bien utile qui réunie les boîtes de dialogue des réseaux sociaux (.sketch).

Free OAuth Dialogs Template Sketch freebie - Download free resource for Sketch - Sketch App Sources

UX User Flows dans Sketch 💎↷

Lorsqu’on essaie de lier deux artboards, le lien fléché est automatiquement rattachée à l’un des deux, ce qui provoque la disparition de l’extrémité que l’on voulait rattacher à l’autre. Les équipes de https://www.uber.design/ on trouvé une astuce, intitulée à juste titre “flow sandwich”.

How to Present App User Flows with Sketch

Lorsque l’on créé des liens entre les différents écrans ils doivent être bien construits pour être redimensionnables et dynamiques. Voici un tutoriel explicatif de la meilleure manière d’opérer.

Fantastic Flow Arrows for Sketch

2. iOS

iPhone X 📱✖️

A moins que vous viviez dans une grotte vous n’êtes pas sans savoir qu’Apple sort ses version 8, 8 plus et X. En attendant qu’il soit directement intégré à Sketch voici le nouveau GUI iOS11 pour iPhone 8 et X (téléchargeable en .sketch).

iOS 11 GUI for iPhone X and iPhone 8

Un article intéressant également sur la manière de mettre à jour ses fichiers pour ces nouveaux écrans.

Design for iPhone X

iOS new App Store 🏷

Signe des temps l’app Store a également été intégralement revu et autorise beaucoup plus d’éditorial.

The Easter egg in Apple's new App Store and why it matters

3. Facebook 50 shades of grey

Si cela vous avait échappé, facebook (tout comme twitter d’ailleurs) a opéré un redesign de son app (notamment sur android) qui se répand graduellement… et n’est pas toujours apprécié de ses utilisateurs.

Download this: Why Facebook's app looks so different

Twitter totally solves all of its problems with new profile photos

4. Prototypage

On me pose souvent la question “ Quel est ton outil de prototypage de prédilection ? ”. Question à laquelle je réponds toujours : cela dépend du besoin, de ce que nous voulons tester, dans quel contexte, sur quel support, s’il s’agit d’une interface ou d’une animation, s’il faut tester rapidement ou non, s’il s’agit d’une fonctionnalité ou d’un parcours global... Voilà un article intéressant qui explique assez bien comment faire des choix.

Bien choisir son outil de prototypage (en 2017)

5. UX

Un article très intéressant, sur les 7 qualités nécessaires à un design thinking leader.

“Design-thinking leaders prototype visions, not just products.”

7 qualities of design-thinking leaders - InVision Blog

La confiance est, particulièrement dans le cadre du service public, un véritable sujet. Je vous invite à regarder cette vidéo de l’un des co-fondateurs d’Airbnb.

" Designer pour la confiance " expliqué par le co-fondateur d'Airbnb

Je vous invite à lire l’histoire de ces deux produits, “le Phonographe de Thomas Edison (1877)” et “la guitare Fender Stratocaster de Leo Fender (1954)” qui oppose une approche centrée technologie et une approche centrée utilisateur et permet d’en tirer des enseignements. L’analogie et l’illustration sont parfois les meilleurs moyens de convaincre du bien établi d’une démarche…

The Origins of UX: A Tale of Two Products

6. Design principles & toolkits 🎁

L’équipe d’Airbnb Design s’est mis en tête d’aider les Designers d’Expérience et d’Interfaces. Leur objectif : nous ôter des biais qui peuvent exclure des personnes lors de nos conceptions. Les équipes de Newflux nous présentent les grands concept de Another Lens.

Le nouveau Design Toolkit d'Airbnb

7. Netflix 🎁

Jamais avares de partager leurs best practices, manière de dire “on vous donne la recette, si vous n’y arrivez pas on voit pas trop ce qu’on peut faire de plus pour vous…” Netflix dévoile la mécanique d’addiction derrière son algorithme.

Netflix dévoile comment son algorithme vous rend accros

7. Techno 🛠

Il est toujours intéressant d’être en mesure d’anticiper les virages technologiques et de pouvoir contribuer à la recommandation d’une ou l’autre plateforme en fonction des besoins du produit. Cela devrait faire partie du spectre des obsessions d’un bon UX, qui doit concilier les objectifs business, les besoins et la satisfaction des utilisateurs mais aussi accompagner sur les choix des technos qui serviront la meilleure expérience en ce sens.

4 promising open source projects for 2018

Please clap your hands everybody 👏