Archives par mot-clé : Nouvelles interfaces

2424Actu – L’actualité rich media partout

2424 Actu, c’est d’abord un service Web, pour suivre l’actualité.

C’est donc un site qui agrège l’information, issue de différentes sources.

Ce service est proposé par Orange (hello Alex).

Et bien ce service est en cours de test sur iPhone. J’ai pu avoir un code d’accès (merci Alex ;), et jouer avec l’appli : sympa.

L’appli permet de naviguer dans un flux d’informations, présenté comme une grande bande horizontale, et quand on sélectionne un sujet, on se retrouve devant l’ensemble des articles trouvé sur le sujet sélectionné, et classés par média (Vidéo, audio et texte).

A quand la version publique ?

(a voir aussi chez Presse Citron)

Des fiches « catégories » riches et tellement réussies !

Bon, d’abord, un peu de vocabulaire :

On appelle les fiches catégories les pages qui affichent plusieurs produits, quand on navigue dans les catégories de produits donc.

Ces pages sont très importantes bien sûr.

L’internaute doit avoir une bonne vision sur les produits, de chaque produit, mais également de ce qui différencie les produits les uns des autres.

Et, sincèrement, ne comptez pas trop que les fonctions de comparaisons : elles sont tellement mal faites en général que les internautes ont perdu l’espoir d’y trouver de l’information intéressante.

Sur ce site, les pages catégories sont particulièrement intéressantes :

Les visuels sont gros, de très très bonne qualités, et sont parfaitement homogènes.

L’internaute peut avoir une bonne perception de chaque produit, et des différences entre les produits.

Le visuel est l’élément clé, très peu d’informations complémentaires : un prix et le nom du produit, d’une couleur qui « appelle le clic ».

Si l’internaute survole la photo avec sa souris, une popup calc s’ouvre (fenêtre javascript) :

A ce stade, tout est réussi :

La zone s’ouvre, parfaitement positionnée par rapport au reste de la page (je ne dis pas ça par hasard : dans beaucoup de site, ce type de popup s’ouvre en donnant une impression de brouillon).

Les informations sont claires, bien structurées, et reste dans l’esprit très sobre du reste du site.

Remarquez également qu’un nouveau visuel vient d’apparaitre, en bas à droite de la photo principale. L’internaute à donc la possibilité, sans quitter la page catégorie, d’avoir une autre vue sur le produit.

Cette photo apparait tout simplement au survol de la vignette. Elle n’est pas affichée brutalement, mais apparait avec un léger effet (type « dissolve » sur powerpoint).

Tout cela est très bien et ne remplace pas la fiche produit, qui reste le seul endroit pour acheter effectivement le produit (en choisissant la taille).

rien à redire, c’est tout simplement… Parfait !

Et tout cela n’est surement pas du au hasard. Il y a eu à l’évidence du travail de préparation, un processus implacable de décision, pour arriver à la bonne solution, et une équipe technique au top niveau pour faire une réalisation aussi propre.

Nouvelle barre « magique » chez Sears ?

Sears est l’un des top e-marchands aux US (ils viennent d’ailleurs d’ouvrir la vente à l’international).

Le site affiche, tout à droite, une drôle de barre de contrôle :

Vous voyez, la barre, à gauche du menu ?

Bon, petite digression : le site est en largeur variable, avec un minimum à 1036 pixels. C’est à mon avis une erreur. La plupart des écrans sont encore en 1024 de large, et quand on ajoute les bords des fenêtres et autres ascenseurs, il vaut mieux rester sur une largeur autour de 950 pixels maximum.

Revenons à nos moutons : à quoi sert cette barre ?

Déjà, c’est une barre active, qui peut s’ouvrir simplement en plaçant la souris dessus :

Le premier item est un panier. Un panier ? Alors que le « standard de fait » place le panier en haut à droite ?

Et bien, chez Sears, on a deux paniers pour le prix d’un : le panier classique en haut à droite, et le panier dans la barre de contrôle de gauche.

Ici, ce premier onglet « Panier » est en fait un peu plus « riche », puisqu’on peut également consulter son historique de navigation.

Les onglets sur cette barre sont :

  • Panier
  • Compte
  • Wishlist
  • Historique (recherche et navigation)
  • Contact (outils pour dialoguer avec l’enseigne)

Au final, je dois dire que je ne suis pas convaincu par cette nouveauté.

Le fonctionnement, en « scroll horisontal » n’est pas très bien réglé. ça s’ouvre, se referme un peu tout seul.

Ce mode d’animation est de plus extrêmement gourmand en ressources, et n’est donc pas fluide (pourtant, je n’ai pas l’ordinateur le moins puissant…).

Enfin, et c’est le plus important, les fonctions présentes dans cette barre restent affichées à d’autres endroits. C’est donc une barre qui alourdi la page, sans ajouter de fonction clé.

A suivre. Soit cette barre est améliorée, soit elle va disparaitre.

Quand la vidéo devient (encore plus) interactive

La vidéo interactive, on connait ça depuis un bout de temps…

Mais finalement, c’est assez rarement bien utilisé.

Une vidéo interactive, c’est une vidéo ou l’internaute peut agir.

Ici, tout commence calmement, avec une vidéo d’accueil plutôt classique :

Vous voyez le bouton qui clignote sur la fermeture éclair ?

En tirant le bouton vers le bas, on ouvre la veste !

On peut continuer à déshabiller le gaillard :

Essayez vous même sur le site (lien sur la première image), vous verrez, c’est bluffant.

On est bien plus loin dans l’interaction que ce qu’on voit d’habitude !

(Lien via Sophie Gironi, Blonde outside, Geek inside !) pas étonnant que cette vidéo interactive plaise aux filles !

Un configurateur avancé pour Home Depot

Tout chaud, le nouveau configurateur avancé, développé par Scene 7 pour Home Depot.

De quoi s’agit-il ?

Il s’agit d’un outil, permettant de concevoir complètement la décoration d’une pièce.

L’internaute peut choisir la matière et la couleur du sol, des murs, les décorations pour les meubles, …

Bien, allons-y.

Premier écran, il faut choisir la pièce que l’on va décorer :

J’ai choisi « cuisine » pour la suite de cette visite guidée.

On doit ensuite choisir un modèle de pièce :

Ici, l’intérêt est de ne pas avoir à dessiner l’ensemble de la pièce, ce qui est nécessairement long et fastidieux.

Une fois qu’on en est là, on va pouvoir choisir ses décorations pour le sol, les murs et les meubles :

Si on choisi le sol, on va avoir à choisir le type de revêtement :

Une fois qu’on a choisi un revêtement donné, on peut choisir précisément la déclinaison :

On pose le parquet choisi par drag & drop. La zone affectée apparait en contour vert. Si le système estime que l’application est impossible, la zone apparaît en contour rouge.

Naturellement, on peut aller voir directement la fiche produit associée au produit sélectionné.

Voici le résultat final pour cet exemple, avec le planché, les carreaux aux murs, et le choix du revêtement pour l’électroménager :

Au final, l’application est plutôt bien faite.

Il y a en particulier une vrai volonté pour guider l’internaute.

Je trouve cependant que l’interface n’est pas toujours si clair que ça.

Il faut dire que, sans qu’on s’en rende nécessairement compte, ce type d’application est réellement très complexe. Il y a donc un gros travail à faire pour rendre tout ça simple.


Pourquoi Apple ne veut pas du Flash sur ses terminaux ?

C’est un des points saillant de l’annonce de l’iPad d’Apple : lors de la démo, par Steve Jobs, quand il surf sur les sites, on voit un grand blanc à la place des espaces Flash.

Pourquoi Apple bloque-t-il le flash ?

En fait, le moteur d’interface, présent dans les iPhone, iPod et iPad, est concurrent du Flash.

Ce moteur permet de réaliser des applications, y compris multimédia, avec tout un tas d’effets graphiques, qui rendent l’utilisation de l’iPhone (et autres terminaux apple) si agréable.

Laisser le Flash entrer, c’est donc pour Apple prendre le risque de permettre le développement « parallèle » d’applications multimédia, sans passer par l’appstore, et donc sans passer par la grille de validation d’Apple.

Mais bloquer le Flash, c’est bien sûr prendre le risque de baisser la richesse de l’offre, la valeur du terminal finalement (il a moins de valeur parce que je ne peux pas surfer sur les sites Flash).

Alors ?

Tout d’abord, diriger, c’est naviguer entre plusieurs risques et faire des choix.

Ensuite, les choses peuvent évoluer dans deux directions simples :

Soit Flash perd la bataille, et disparait au fur et à mesure des sites Web. Flash est d’ailleurs également challengé par le HTML 5.

Soit Apple baisse la garde, et fini par laisser entrer le Flash dans l’iPhone.

Maintenant, il y a tellement de sites qui utilisent le Flash aujourd’hui que je suis près à parier que d’ici quelques mois, Apple baissera la garde et laissera rentrer le Flash dans son navigateur. Mais c’est un pari risqué, car Steve Jobs est têtu ;).

On en parle également ici :

E-Commerce sur iPad

Cette vidéo date de 2 mois.

Elle donne, je trouve, une assez bonne illustration de ce que pourrait être une nouvelle expérience e-commerce sur iPad.

Maintenant, pour avoir ce résultat, il faut penser application native, et surement pas site web adapté.

Chez Araok !, avec notre culture e-commerce et l’expérience dans la conception d’applications, on est prêt à vous concevoir votre application !

(Source Ben)

Et si la tablette d’Apple était un échec ?

Allez, un peu de « provoc » quelques jours avant l’annonce d’Apple. J’ai été très impressionné, ces dernières années par les produits d’Apple, et en particulier par l’iPhone. Mais tout le monde a tellement l’idée que le prochain produit d’apple sera un succès qu’il me semble plus intéressant de creuser « dans l’autre sens ».

Bien sûr, les dernières créations d’Apple sont d’incroyables succès, avec la belle brochette d’iPods, d’iPhones, et les Mac.

Mais personne n’est parfait, et Steve Jobs c’est déjà planté par le passé.

Le NeXT par exemple, est resté un « machin » réservé à quelques développeurs… (j’ai été heureux de revendre le mien, qui m’avait coûté l’équivalent d’une voiture, quelques jours avant l’annonce de la fermeture de NeXT France…).

Le Newton n’a pas non plus été un grand succès…

Alors, comment la tablette d’Apple pourrait elle être un échec ?

Pour ma part, je ne suis pas complètement convaincu par le « form factor » : sa forme physique quoi.

Je continue de penser que le terminal « killer » aura deux écrans, pour prendre moins de place et être protégé quand il est refermé.

De plus, une tablette n’est pas très commode à utiliser :

  • Par ou la tenir ?
  • Comment la faire tenir en place, quand on est assit ou allongé ?
  • Comment l’amener en déplacement ? Elle ne va pas tenir dans une poche.

L’autre risque est au niveau du contenu. Je sais bien que Steve a bossé le sujet, et va proposer des contenus et des applications… Mais dans le contexte domestique, on a déjà accès à pas mal de choses. Voir si il y aura un vrai intérêt à avoir un peu plus de contenu sur ce nouveau terminal.

Enfin, si ce « machin » doit surtout être utilisé comme un ebook, et s’il est doté d’un écran classique, alors il y a un gros problème : les eBook, avec leurs écrans de type « paper ink » ont une autonomie énorme, parce qu’ils ne consomme rien tant qu’on ne tourne pas de page.

La tablette d’apple sera doté d’un écran soit type iPhone, soit Oled. Dans tous les cas, ces écrans consomment pas mal… Et la tablette aura du mal à avoir une autonomie raisonnable pour ce type de terminal.

Personnalisation de produits – l’exemple de usineadesign

L’un des avantages de la vente en ligne, c’est la possibilité de proposer des outils, interactifs, pour aider l’internaute à faire son choix.

Exemple avec usineadesign, qui propose des configurateurs plutôt bien fait, pour complètement personnaliser le produit.

Dès la page catégorie, le fait qu’on peut personnaliser le produit est mis en avant :

La personnalisation est mise en avant de deux manières :

  • Le bouton « personnaliser » bien visible
  • Un « nuancié » pour mettre en avant des exemples de couleurs et de matières

Exemple de fiche produit :

La partie du haut affiche le produit, et l’internaute peut choisir ces options en dessous.

Dans l’exemple, on peut personnaliser le revêtement, et chacun des coussins. Évidemment, les options sont différentes en fonction des produits.

Le paramétrage des différentes options se fait via les onglets, juste en dessous l’affichage du produit.

Quand on clique sur une option, le produit est modifié en temps réel :

Il est pas beau mon canapé 😉 ?

Pour faire ça, ce site utilise Scene7.

Avantage, entre autre, de cette solution : pas besoin de « shooter » toutes les combinaisons. Scene7 permet de plaquer une couleur sur une photo, en prenant en compte les contours, et également les matières, les formes.

Autre point original : ce configurateur est réalisé en Ajax. D’habitude, on a plutôt des outils Flash.

Sur ce dernier point, j’ai bien souvent tendance à conseiller Flash (en Flex) pour ce type de fonction.

D’ailleurs, le configurateur m’a plusieurs fois affiché des messages d’erreur Ajax…

Mais bon, ne soyons pas perfectionniste : cette interface est plutôt réussie, et permet d’offrir un choix assez riche, de manière assez simple.

Formation Flex 3 et AIR gratuite !

Vous souhaitez mieux comprendre ce que permet Flex et AIR d’Adobe ?

BaaO, société spécialisée en formation sur ces technos propose des formations, gratuites :

  • Le Mardi 19 Janvier 2010 à Paris
  • Le Mardi 16 Février 2010 à Paris
  • Le Mercredi 24 Mars 2010 à Paris

C’est par ici pour avoir plus d’info et vous inscrire.

En fait, ces formations sont payées par Adobe : c’est pour eux un moyen d’évangéliser !

J’y étais allé il y a quelques mois, ces formations sont très bien.