UxTimeline.com : redécouvrez l’historique des interfaces web

Genèse sur le projet UxTimeline.com

Eté 2015, nous étions en pleine refonte de notre Showcase pour Kontest. Qui dit refonte, dit inspiration, veille, analyses, recherches… Après plusieurs heures passées sur les Internets, je suis très enthousiaste de découvrir de nouveaux showcases de plusieurs services que j’apprécie mais également déçue de ces changements.
Je dois me baser sur ma mémoire pour redefinir leurs anciennes versions, imaginer les détails d’UI qui me semblait pertinent, leurs couleurs, animations… Bref, trop de choses à se remémorer !

Aparté : Le Showcase d’un service SAAS est tellement important pour l’image, les valeurs et le business d’une société que ce dernier doit être irréprochable. Votre produit a beau être le plus complet du marché en termes de features, d’utilisabilité et de design que si cela ne se perçoit pas dans le site vitrine, votre visiteur ne deviendra jamais utilisateur. N’oubliez pas que vos visiteurs ne sont pas curieux. Ils se focalisent essentiellement sur ce qu’il découvre sur votre Showcase. Si ce dernier les convainc alors ils ouvriront la porte de votre magasin pour, peut-être, acheter un de vos produits. Fin de l’aparté

Bien sûr Google est mon ami et Archive.org est là. Mais l’ergonomie de ce dernier laisse à désirer par sa lenteur, sa navigation et son design. Toutefois, il reste une vrai mine d’or. Etant toujours frustrée de n’a pas avoir l’historique des showcases, mon cerveau continue sa réflexion pour me chuchoter : Pourquoi ne crées-tu pas ce site sous forme de timeline ? D’autres personnes aimeraient sans doute découvrir l’historique de ces Startups ?

Nouveau défi!

Défi relevé mais plusieurs questions se pressent aussi :
Comment faire un site web pouvant être utile aux personnes sensibles au design produit ? Ne sachant pas développer, comment trouver un outil ou service facile à mettre en place ? Quelle organisation sera la plus efficace ? Combien de temps cela va-t-il me prendre ? Comment le faire connaitre ? Comment récolter des feedbacks ?

Méthodologie & mise en place

  • 1/ Trouver un nom de domaine exhaustif, court et mémorisable : product-timeline.com puis UXtimeline.com
  • 2/ Choisir un template HTML Responsive en mode Timeline : CodyHouse | Vertical Timeline
  • 3/ Définir des services que j’apprécie afin de se motiver dans ce projet fastidieux : Airbnb, Spotify, Uber…
  • 4/ Installer l’extension Chrome permettant les captures d’écran Full Page : Superbe Capture d’écran
  • 5/ Chercher le service SAAS permettant de réaliser des Gifs animés rapidement : https://www.getcloudapp.com/
  • 6/ Organiser l’archivage, définir les bonnes nomenclatures des fichiers et des dossiers sour Google Drive
  • 7/ Commencer avec un premier service dont je connais l’historique ;) Deezer
  • 8/ Planifier un « Rendez-vous » pour les personnes intéressés pas ce projet
  • 9/ Mise en place sous OVH et intégration du premier service
  • 10/ Trouver un outil de récolte de feedbacks : https://getsitecontrol.com
  • 11 / Communiquer sur les réseaux sociaux
  • 12 / Analyser les retours pour améliorations et itérer progressivement

UXTimeline_back_to_the_past_homepage

En moyenne, pour la mise en place d’une Timeline cela dure 8h soit 2 soirées : la première pour faire les captures d’écran sous Archive.org et Google. La seconde pour le découpage, l’intégration et la mise en ligne.

Les Plus

  • J’ai eu de très bons retours sur Twitter et étonnamment sur Reddit.
  • J’ai répondu à mon besoin et je suis surprise à chaque fois lorsque je découvre le passé de ces services, leur évolution graphique, marketing et business

Les Fails

  • Je ne suis pas du tout régulière dans les publications par manque de temps
  • Je me suis éparpillée sur certaines « Timeline » car il y a tellement de changements, de devices qu’il est parfais difficile de rester Focus.
UxTimeline.com : redécouvrez l’historique des interfaces web

Sooon, les tendances de demain

Cela fait plusieurs mois que je n’ai pas écrit sur mon blog mais j’ai eu beaucoup… mais beaucoup de projets à gérer en parallèle dont celui que je vais vous présenter maintenant :)

L’ami Tony de Wisibility me sollicite début de l’été pour participer à un projet collaboratif édité par Fotolia d’Adobe avec plusieurs designers ayant chacun une thématique dédiée. Le défi était d’imaginer un futur proche ou lointain selon ses affinités professionnels.

sooon team

sooon

Sooon est bien plus qu’un livre. Il est une passerelle entre le confort du papier pour la lecture des articles et la découverte de contenus enrichis via des commandes vocales à prononcer à l’aide de son navigateur Chrome.

sooon commande vocale

Le site est bien sûr consultable sur les différents devices et ses contenus sont vraiment très intéressants. Vous avez de la bonne lecture en perspective pour vos prochaines semaines :)

sooon livre

Voici quelques liens complémentaires :

Sooon, les tendances de demain

Adobe Comp CC, de l’idée au wireframe à la prod

La semaine dernière, l’édition 2015 d’Adobe Creative Cloud
eu lieu où plusieurs centaines de professionnels, amateurs et passionnés se sont retrouvés pour découvrir les nouveautés Adobe et écouter les retours d’expériences d’artistes, designers ou photographes de talents :

La grande nouveauté 2015 est sans aucun doute le Creative Sync. qui va permettre à chaque utilisateur de synchroniser l’ensemble des applications Adobe aux fichiers en cours d’édition sur différentes plate-formes, supports et collaborateurs. Une nouveauté majeure qui soutient les nouveaux usages et permet de fludifier les workflows collaboratifs.

Petit cadeau de la soirée : ma propre typo BussonCondensedMedium. La classe !
busson_typo

Adobe Comp CC, nouvelle app sur l’iPad

Mon coup de coeur se porte sur Adobe Comp CC, que je ne connaissais pas… honte à moi :(

Cette application permet de matérialiser une idée sur iPad sous forme de wireframe, puis en maquette grâce à la synchronisation avec les différences services comme Fotolia, Typekit, ses propres fichiers. Comme tout est synchronisé, l’utilisateur peut continuer sous Photoshop, Indesign ou Illustrator directement sur son desktop.

Lors de la démo de Michael Chaize, j’ai trouvé cela GENIAL! Je suis en train de tester actuellement cette app pour un projet personnel et je suis assez bluffée de la prise en main très rapide et la fluidité pour créer des éléments avec une gestuelle très instinctive.

Comme toute prise en main d’un nouvel outil, il y a des habitudes à prendre et il ne faut pas être réticent au changement mais… car il y a toujours un « mais »… j’ai rencontré quelques difficultés lors de la conception pour une app mobile. Sauf erreur de ma part, je n’ai pas réussi à faire défiler mon contenu, c’est-à-dire, les éléments doivent remplir le contenant et ne peuvent dépasser de la zone définie. Donc, on ne peut pas avoir la sensation du défilement continu dans la prise en main de sa maquette. Cela est le cas dans tout les templates fournis ce qui est assez contraignant sachant qu’aujourd’hui nous n’arrêtons pas de scrolllllleeeerrr.

adobe compCC

Adobe Comp CC, de l’idée au wireframe à la prod

#ColorForAll : des lunettes pour les daltoniens

Découvrez dans cette vidéo très émouvante les réactions de personnes atteintes de Daltonisme qui pour la première fois de leur vie perçoivent la couleur grâce à des lunettes innovantes :

Le fabricant de peinture américain Valspar Paints collabore avec la société EnChroma pour la conception de lunette adaptée aux différents handicapes liés à la perception de la couleur. Le site évènementiel valsparcolorforall.com y consacre plusieurs vidéos et témoignages sur le sujet.

Pour tester votre perception des couleurs, EnChroma vous propose également une série de tests et, forcément, des lunettes adaptées à vos résultats :)
enchroma-cvd-test


Color Enhancer : extension Chrome

Souvenez-vous dans un article précédant, Astuce graphique pour les daltoniens, un jeune étudiant de New Dehli développait un algorithme qui permettrait d’afficher des contenus web à la perception des daltoniens. Je ne sais pas si cette extension Chrome provient de ces recherches mais cela est maintenant disponible : Color Enhancer.
enchroma-cvd-test


Théorie de la couleur et usage du Cercle Chromatique

tuto_theorie_couleur

Si la couleur vous passionne, je vous invite à regarder le Master Class vidéo (gratuit) proposé par Adobe et l’ami Stéphane Baril twitter sur tuto.com.


Livre : L’étonnant pouvoir des couleurs


Egalement, je vous invite à lire le livre de Jean-Gabriel Causse déjà évoqué dans un L’étonnant pouvoir des couleurs.

#ColorForAll : des lunettes pour les daltoniens