10 visionneuses et plus encore ! (partie 3 & Fin)

Jacinthe8 commentaires

Dernière partie des billets 10 visionneuses et plus encore ! (partie 1 & 2) : « Découvert sur Smileycat.com grâce à  Brett, 50 visionneuses sont listées et nous permettent de constater l’importance de ce nouveau format… » voir article précédent

M.A.J : Visionneuses/carrousels, vidéo de SmartExperience.org

NONESUCH.COM

Visionneuse NoneSuch Cette visionneuse peut être considérée comme la transition entre les billets précédents et ce dernier présentant des formats de type dynamique. Ici, à  chaque nouvel évènement se joue une animation entre le rédactionnel et la photographie permettant d’illustrer de manière attractive la transition de chaque sujet. Toutefois, l’espace de ce format paysage est assez mal exploité et bien souvent, un vide est omniprésent. La taille des visuels ainsi que du rédactionnel sont trop petit et accentue l’illisibilité.

XBOX.COM

Visionneuse X-Box Longue au chargement, cette visio est simple d’utilisation avec comme pagination les packagings des jeux vidéos. L’utilisation de la perspective pour le positionnement des items accentue la profondeur du CoverFlow tout comme l’élément positionné au premier plan qui répond à  son format promotionnel. Cette présentation peut être considérée comme une PLV (Publicité sur le Lieu de Vente) situé en tête de gondole dans un magasin.

JO2008.CANALPLUS.FR

Visionneuse CanalPlus A l’occasion des JO de Pékin, Canal+ a créé un site évènementiel utilisant un carrousel 2D pour annoncer les derniers évènements sportifs. Ce carrousel contient une légère animation lors de la sélection d’un visuel de second plan ou lors d’un clic sur les flèches directionnelles qui permet d’accélérer la vitesse de consultation. Simple, dynamique et efficace, cette visionneuse est adaptée à  la charte graphique de Canal+ ainsi qu’aux sujets abordés.

PLAZA.PLAYNC.CO.KR

visionneuse Plaync D’une apparence assez gadget et confuse cette visionneuse se navigue pratiquement que par rollover. Des éléments didactiques y sont rajoutés et permettent de compléter la sémantique de chaque items : Hiérarchie du rédactionnel, présence de pictogrammes efficaces, double entrée aux contenus différents. Malheureusement, l’accès aux pages dédiées des sujets ne se fait que par des liens situés sur les titres et sur un minuscule bouton situé en-dessous des images… Difficile à  trouver.

Conclusion

L’importance et les répercussions d’une visionneuse sur une page d’accueil et sur un utilisateur sont considérables. D’o๠la nécessité de réfléchir au mieux sur le choix et les besoins de sa cible, de son intégration et de sa stratégie d’utilisation. En espérant que ces trois longs billets vous ont permis de découvrir des nouvelles utilisations de ce format qui est de plus en plus présent sur le web.

A lire aussi :

Share
10 visionneuses et plus encore ! (partie 3 & Fin)

10 visionneuses et plus encore ! (partie 2)

Jacinthe3 commentaires

Deuxième partie du billet 10 visionneuses et plus encore ! (partie 1) : « Découvert sur Smileycat.com grâce à  Brett, 50 visionneuses sont listées et nous permettent de constater l’importance de ce nouveau format… voir article précédent »

M.A.J : Visionneuses/carrousels, vidéo de SmartExperience.org

FNAC.COM

Visionneuse FnacLa Fnac se restreint à  3 évènements en utilisant une pagination à  chiffre. Chaque visuel est adapté à  la charte graphique de la Fnac ce qui permet d’homogénéiser les promotions, mais aussi de mettre à  jour plus régulièrement leur page d’accueil grâce au nombre limité d’évènement.

Les Plus : L’information textuelle ainsi que les liens sont toujours situés au même emplacement, l’utilisateur s’habitue à  cette navigation et évite une perte de repère à  chaque visite. Le fait d’utiliser 3 à  4 évènements évite de surcharger de promotion l’utilisateur et permet une attention de ce dernier sur les informations qu’il consulte.

Les Moins : Les paginations à  chiffre peuvent déstabiliser l’utilisateur car il doit utiliser sa mémoire à  courte terme. Heureusement, la fnac n’utilise que 3 à  4 visuels pas plus ce qui permet à  l’utilisateur de retenir l’information consultées. Pour CBS cela n’est pas le cas…

CBS.COM

Visionneuse CBS CBS a opté pour l’intégration d’une visionneuse panoramique occupant toute la largeur du site. L’utilisateur profite d’un format inattendu similaire à  un cadrage cinématographique.

Les Plus : L’utilisation des photographies au format 16/9ème permette à  l’utilisateur d’apprécier les sujets présentés qui sont accompagné d’un cartouche rédactionnel. Ce format correspond parfaitement au sujet du site.

Les Moins : La pagination est absente et perd l’utilisateur parmi les 7 items de forme abstraite. L’absence de repère didactique déstabilise l’utilisateur. Trop d’item tue l’item !

PREMIERE.COM

Visionneuse Première USCette visionneuse possède une fonctionnalité en plus des autres : un player ! Oui, un player… pause, play. Wow ! La visionneuse est similaire à  un diaporama.

Les Plus : L’utilisateur se repère grâce à  la pagination à  chiffre et gère son temps de consultation du player. Le rédactionnel permet d’avoir le chapo de l’article correspondant au visuel.

Les Moins : La mention « Todays Features » n’est d’aucune utilité. Le format pavé ne met pas en valeur les thèmes présentés ainsi que l’intégration du chapo des articles… Pas très sexy tout çà .

ACTIVERIDESSHOP.COM

Visionneuse ActiveCette visionneuse reprend le même principe que celle de Premiere.com avec des onglets en plus. Ces onglets permettent de cibler directement les utilisateurs du site pour la vente de produits : « men », « women » et « snow ». 3 visionneuses en 1 car derrière chaque onglet se trouve une visionneuse à  plusieurs items. eheh !

Visionneuses similaires

Visionneuse marthastewart.comVisionneuse discoverychannel.comVisionneuse Fun RadioVisionneuse abc.go.com

A lire aussi :

Share
10 visionneuses et plus encore ! (partie 2)

10 visionneuses et plus encore ! (partie 1)

Jacinthe18 commentaires

Découvert sur Smileycat.com grâce à  Brett, 50 visionneuses sont listées et nous permettent de constater l’importance de ce nouveau format donnant la possibilité de faire plusieurs mises en avant sur une seule et unique zone. Suite à  cette liste, je me suis permise de faire une sélection d’une dizaine de visionneuses tout en essayant de décrypter leurs principaaux atouts et lacunes dans leur contexte respectif.

M.A.J : Visionneuses/carrousels, vidéo de SmartExperience.org

VIRGINMEGA.FR

Visionneuse Virgin
Virgin a adapté une navigation avec 10 items correspondant au cover des CD. Malheureusement, 10 items c’est trop surtout quand ces derniers sont présentés dans un menu défilant à  l’infini. Cela est assez déroutant. L’utilisateur doit utiliser sa mémoire dite « mémoire à  courte terme » pour retenir un item afin de se repérer et de se positionner dans le temps de sa consultation.

Les Plus : Cette visionneuse privilégie le cà´té évènementiel de chaque visuel. Une présentation différente est créée pour annoncer une exclusivité aux internautes sur un artiste. Exploitation du rollover pour passer d’une image à  une autre, cela entraine une rapidité d’utilisation.

Les Moins : Une transition trop rapide qui ralentie la navigation de l’utilisateur. Il manque de temps pour lire le rédactionnel et son intégration dans la page laisse à  désirer : la colonne de gauche contient un pavé promotionnel animé et une méga-banner publicitaire est située dans le Header à  proximité de la visionneuse qui bien sûr, dit pub dit forcément clignotement. Attention aux yeux !

MTV.COM

visionneuse MTV
MTV utilise d’une manière différente ses items visuels : ils représentent un cadrage serré de l’image mise en avant. Les 6 items sont superposés au visuel et se mêle à  lui. Le caractère évènementiel se manifeste par une cartouche opposée aux items et par des photographies bruts c’est-à -dire sans aucun ajout textuel. Le rédactionnel se situe au pied de la photo dans un format standardisé superposé.

Les Plus : Des visuels sobres, impactant et bruts afin d’annoncer des évènements variés et de qualité.

Les Moins : L’utilisateur a 4 niveaux de lecture sur cette visionneuse. Le positionnement, la superposition de chaque élément ainsi que la transition peut troubler la lisibilité et le sens de lecture de l’internaute.

DEEZER.COM

Visionneuse Deezer
Cette visionneuse standardise les mises en avant et permet une hiérarchisation des informations. Elle permet à  l’utilisateur de s’habituer et d’apprivoiser ses différents liens ainsi que leur positionnement. La transition en fondu adoucit le changement de thème et permet d’apprécier les photographies impactant grâce à  leur format paysage.

Les Plus : Une structuration simple et efficace des infos textuels, c’est-à -dire nom de l’artiste, nom de l’album, accès à  sa fiche et accès à  l’album. Aucune phrase promotionnelle n’est présente et permet une mise en avant plus imposante visuellement.

Les Moins : Absence d’information sur le type de l’artiste : rock, jazz, rap… Aucun lien sur le nom de l’artiste, le nom de l’album et le visuel de fond. Ce manque occasionne une frustration et une perte de temps à  l’utilisateur qui est obligé de se diriger sur les 2 petits liens oranges situés dans le cartouche.

Visionneuses similaires

Visionneuse parismatch.comVisionneuse Comme au cinema.com

Visionneuse premiere.frVisionneuse Yahoo Music

A lire aussi :

Share
10 visionneuses et plus encore ! (partie 1)

Publicité Interactive de Hewlet Packard

Jacinthe5 commentaires

La nouvelle publicité interactive de Hewlet Packard, visible en ce moment sur le site Lifehacker.com, va inaugurer cette nouvelle catégorie de billet. Ce premier Ergoflash complète un de mes billet précédent sur l’intrusion des pub sur le web : Pub et contenu une cohabitation est-elle possible ?

pub HP

Intrusive ou fourbe ?

A première vue, ni l’une ni l’autre ! Cette bannière se charge rapidement avec comme ouverture un fondu noir sur une image statique.

Situé dans le header du site, ce pavé reste à  la fois ostensible mais pas plus qu’une méga-bannière animée au format 728x90px. Son inertie permet à  l’utilisateur d’en faire facilement abstraction.

Toutefois méfiez-vous des apparences, cette publicité reste trompeuse : la mention « Rollover to expand » n’est pas visible au premier regard car elle est aux dimensions du packshot et lui est superposée. Si l’utilisateur a le malheur de passer son curseur dessus sans avoir eu la peine de lire la mention… C’est le drame !

La publicité s’anime et vient recouvrir une partie du contenu du site. D’accord, un effet « Waow » se produit auprès de l’internaute lorsque cette dernière se déploie. Il faut bien l’avouer, cette publicité est très bien réalisée et permet une présentation du produit assez détaillé grâce à  sa réalisation qualitative en Papervision 3D.

Je vous laisse la tester sur Lifehacker.com et visiter par la même occasion le portfolio du studio berlinois Whitevoid.com qui utilise le même principe de navigation.

 Share
Publicité Interactive de Hewlet Packard

Rencontre avec Adobe et plusieurs bloggeurs

Jacinthe6 commentaires

Il y a une semaine à  peine, j’ai été conviée à  un apéro réunissant une poignée de bloggeur et des intervenants de chez Adobe. L’objectif de cette soirée était un débat autour des métiers numérique, ses langages et les nouvelles pratiques professionnelles sur les interfaces homme/machine (IHM).

adobe

Une dizaine de questions ont été abordées et chacun devait y apporter son expérience :

  • Quelles sont les technologies matérielles idéales pour les interfaces homme machine (IHM) ?
  • Quelles interfaces pour quels usages ?
  • Quelles sont les incidences des nouvelles interfaces sur les métiers des concepteurs ?
  • A quoi ressemble une IHM idéale ?
  • Les IHM peuvent-elles (doivent-elles) converger avec l’accessibilité ?
  • Les interfaces actuelles peuvent être perçues comme un filtre. Leur amélioration est elle un gain ou une contrainte ? Y-a-t-il un risque intrusif ? Sont-elles un vecteur d’accélération entre bio et techno ?
  • Dans quelles mesures les IHM peuvent fédérer des communautés ? Sont-elles un moyen de démocratiser les technologies ?
  • Comment les nouvelles IHM peuvent influencer le design ?

Les personnes présentes : Eric Di Pol (Superfiction), étienne Mineur (Incandescence), Peter Gabor (Design et Typo), Galdric Pons (Hebiflux / l’Atelier), Sylvain Weber (QuestionsOuvertes.com), Thibault Imbert (ByteArray / Adobe), Stephane Baril (Adobe), Stéphanie Saissay (Adobe).

Une initiative d’Adobe très enrichissante grâce à  la diversité des personnes conviées et leurs témoignages. Même si nous n’avons pu répondre à  toutes les questions, nous avons évoqué, comparé et critiqué divers exemples par rapport à  nos habitudes professionnels : nouvelles fonctionnalités et incohérences de plusieurs logiciels, l’utilisation de la souris face au stylet de la tablette graphique, prise en main et ergonomie de l’iphone, nouvelles méthodes de recherche sur le web, les besoins des particuliers face aux professionnels…

Habitudes et nouveautés

Malgré toutes les suggestions qui ont été abordées, une problématique implicite revenait régulièrement : notre réticence au changement, nos difficultés à  s’adapter à  des nouveautés que ce soit sur des applications desktop, mobiles, interfaces web, ou des objets. Beaucoup d’idées, d’intentions ont été imagées, suggérées pour révolutionner notre quotidien et nos incompréhensions face à  ces nouvelles interfaces.

Une question me turlupine depuis bien longtemps et je profite de ce billet pour la poser : Bien souvent sur le web, les utilisateurs rejettent au premier abord de nouvelles interfaces sans avoir pris le temps, l’envie et la curiosité de les tester. Comment faire accepter en douceur de nouvelles fonctionnalités (ou interfaces) sans créer un bouleversement dans leurs habitudes ?

 Share
Rencontre avec Adobe et plusieurs bloggeurs

Ergospeed #16 : Widget FnacMusic.com

Jacinthe7 commentaires

Il y a seulement deux jours que je viens de découvrir le widget de la FnacMusic, « mieux vaut tard que jamais ». Ce widget de bureau permet d’avoir en temps réel les différentes actualités musicales telles que les dernières sorties, les meilleurs ventes d’albums, les coup de coeur de la Fnac…

Navigation circulaire

Ce widget, nommé « Caroussel 3D » par ses créateurs l’agence Nosibay, a une approche assez attractive entre l’utilisateur et l’interaction qui en résulte. Grâce à  son ouverture dynamique qui se déploie progressivement l’utilisateur comprend directement le sens de lecture circulaire de ce widget et son fonctionnement.

Sur ce screencast, vous pouvez apercevoir comme la fluidité et la circulation dans ce widget se fait assez instinctivement. Le rollover d’un élément graphique se manifeste par le zoom avant de ce dernier et le retrait en profondeur des autres. Nous pouvons y mentionner la loi de Fitts qui résume dans ce cas présent la taille et la proximité de chaque élément permettant une meilleure utilisabilité.

Loi de Fitts
Le temps que l’on met pour atteindre une cible est proportionnel à  la distance à  laquelle elle se trouve, ainsi qu’à  sa taille. Plus précisément, une cible est d’autant plus rapide à  atteindre qu’elle est proche et grande.
Amélie Boucher

Schéma widget Fnac Music

Malheureusement, quelques regrets apparaissent sur les fenêtres de navigation qui permettent d’accéder à  l’information :

  • L’esthétisme est décevant et n’est pas homogène à  celui du widget
  • La consultation du contenu se fait en utilisant 2 boutons « haut/bas » pour passer d’une page à  l’autre. Un scroll est sans doute suffisant et plus rapide dans son utilisation
  • Les boutons situés dans la barre de navigation sont illisibles à  cause de leur petites tailles. Cela entraine une incompréhension de leur fonctionnalité
  • Le widget est seulement disponible pour Windows. Tchao les Macs !

Billets similaires à  une navigation circulaire :

Derniers Ergospeeds :

Share
Ergospeed #16 : Widget FnacMusic.com

Ergophile a 1 an…

Jacinthe14 commentaires

Ergophile 1 an … depuis le 1 juillet 2007 à  3h04 du matin précisément. Eh oui ! 1 an déjà . Ce billet n’est pas un récapitulatif de tous mes écrits mais juste un condensé de ces 12 derniers mois : statistiques, conséquences, rencontres et bien sûr évolution de ce blog.

Conséquence d’Ergophile

Tout commence par la sortie de la v2 de Ziki qui me déplaisait fortement et qui fut mon premier Ergotest. Quelques mois plus tard, la v3 vu le jour et JF Ruiz (directeur de Ziki France) m’envoie un email de remerciement pour mon billet qui a été un élément déclencheur. Suite à  ce petit évènement, Techcrunch écrit à  son tour un billet sur ce sujet « De l’influence d’un blog« .

Au cours des mois, j’ai continué à  écrire, lire, surfer, observer et apprendre. En février 2008, l’équipe de Deezer avait eu part de mon Ergotest sur la V1 de leur site et recherchant une graphiste/webdesigner en ce début d’année 2008, ils m’ont contacté directement et m’ont proposé un poste. Bien entendu, j’ai accepté avec joie cette opportunité.

Ce blog m’a permis aussi de rencontrer de nombreuses personnes enrichissantes qui m’ont conseillé et partagé leurs connaissances. Merci à  elles !

Les statistiques de Google Analytics

Statistiques d’Ergophile

En regardant la courbe des statistiques, vous pouvez apercevoir 2 piques. Le premier date du 10 août 2007 : 493 visites, l’Ergotest sur Ziki est parue en home de Scoopeo. Le deuxième date du 17 novembre 2007 : 621 visites, parution sur Techcrunch. Après je ne suis pas une spécialiste des chiffres donc…

Récapitulatif des billets :
Comme dit dans mon Twitter, eh oui maintenant j’en ai un… il faut bien commencer un jour.

« Ergophile à  1 ans depuis 3h du mat ! 41 billets ont été écrits, 252 commentaires… Bientà´t un billet plus précis dessus 🙂  »

Vous trouverez un récapitulatifs de toutes mes publications dans la rubrique « Récap des Billets« . A propos de ce compte Twitter, il va principalement me servir à  twitter des sites que je trouve intéressant à  voir mais que je n’ai pas forcément le temps d’écrire dessus.

Et maintenant… que vais-je faire ?


tKaap Galaxy : Vidéos « wall-e« 

C’est vrai que c’est 3 dernier mois, je n’ai pas été très assidue sur Ergophile car faute de temps. En à  cà´té de mon travail, je consacre beaucoup de mon temps au projet tKaap et Galaxy dont vous pouvez voir un aperçu avec ce widget ci-contre. (Plus de détails sur ce projet sur tKaap.com/blog)

Pour la suite d’Ergophile, bien sûr je ne vais pas arrêter mais essayer de m’organiser au mieux afin de prendre le temps d’écrire. Je prévois de faire un nouveau thème qui se nommera Ergoflash (ok, je sors !). Il sera consacré au site utilisant la technologie Flash. Je vais aussi améliorer la présentation de ce blog en réorganisant la colonne de droite qui devient un peu « bordélique ».

Si vous avez des remarques ou suggestions, n’hésitez pas 🙂

 Share
Ergophile a 1 an…