Archives par mot-clé : Nouvelles interfaces

Prestashop – Template Responsive

Le Responsive Design, c’est un design élastique, qui s’adapte aux différents terminaux du Web.

Lors du voyage à New York avec Prestashop, j’ai pu échanger avec Grégoire, qui est en train de préparer un template Responsive, pour la prochaine 1.5.

Plutôt que de grandes explications, j’ai réalisé quelques montages, pour mettre en situation le template, sur iPhone et iPad :

Sur l’ipad en mode paysage :

Et en mode portrait :

Sur l’iphone :

Le thème est prévu pour s’adapter sur différents supports :

  • écran traditionnel,
  • tablettes résolution 1024*768 (avec gestion de l’orientation landscape – portrait),
  • smartphones grands écrans résolution entre 767 et 481,
  • smartphones résolution 480*320,
  • possibilité d’adapter pour les écrans inférieurs à 320px.

Ce template responsive est basé sur le framework foundation (http://foundation.zurb.com/).

Il sera dispo en même temps que la 1.5, gratuitement.

Le design est très épuré, de manière à permettre aux designer de se l’approprier, pour chaque boutique.

Girls Tech in Paris

Cet article est écrit par Augustin GUELDRY, fondateur de COLICOACH Conseil livraison et logistique e-commerce et du blog Livrezfacile.

J’ai assisté cette semaine à la soirée Girls Tech in Paris qui vise à récompenser des femmes entrepreneuses dans les technologies. Le concours était ouvert à l’ensemble de l’Europe et était sponsorisé notamment par Ventech, Orange, Le Web et Founder Institute.

La short- list était de 5 projets en compétition pour le titre suprême.

 » Face aux 5 femmes d’exception sélectionnées en France, UK, Israël, Pologne et Russie, un jury de qualité a tranché. Ce jury était composé, entre autres, de Gilles Babinet (Musiwave, Eyeka, MXP4, Captain Dash), représentant de l’entrepreneuriat en France, de Claudia Helming (Dawanda), représentante de l’entrepreneuriat en Allemagne, de Alena Osipova (Fast Lane Ventures), représentante du capital risque en Russie, de Pascal Latouche, Directeur Nouveaux concepts Marketing chez Orange et de Catherine Barba, The Digital Factory. »

La gagnante est Lina Bachar Kirshon pour la société buzzdoes d’Israel et qui a fait une présentation simple mais très convaincante de son innovation. De quoi s’agit il exactement ?

Cela s’adresse aux développeurs d’application pour les mobiles en permettant à leurs utilisateurs de devenir eux-même promoteur de l’application.

Le concept utilise le principe du bouche à oreille :

L’utilisateur recommande à ses amis l’application et cela lui permet d’être récompensé lorsque sa recommandation amène de nouveaux utilisateurs au développeur de l’application.

L’objectif de ce marketing viral est de faire émerger votre App parmi les centaines de milliers existantes et les 60.000 nouvelles qui paraissent chaque mois …

J’ai demandé à Catherine Barba de bien vouloir nous dire ce qui a retenu son attention dans cette entreprise : « Je trouve que la qualité de la présentation très orientée sur les bénéfices clients (et moins sur la technologie utilisée) et l’enthousiasme ont fait la différence »

Un grand bravo pour les initiateurs de ce Girls Tech in Paris qui démontre tout le potentiel de créativité des femmes dans les technologies

Le HTML 5 en action – Editeur Wysiwig directement dans la page

On le dit, on le répète, le HTML 5 est l’une des évolutions, des révolutions du web.

Ce petit exemple montre un autre aspect de ce qu’on peut faire.

Ce petit site fait la démo de l’édition d’une page web, directement sur la page.

Un clic sur « Try It Now », et la page est réaffichée, mais elle devient éditable directement :

Sur l’image ci dessus, le texte encadré d’un filet bleu est éditable. Un double clic sur le texte fait apparaitre un menu contextuel, permettant de changer la mise en forme (gras, italique, …). On peut bien sûr également modifier le texte (j’ai donc fièrement ajouté le « coucou » et « c’est trop cool » dans le titre ;).

Pas mal, non ?

C’est quand même plus « user friendly que la plupart des back offices 😉

Je vous le dit, le HTML 5 n’a pas fini de nous étonner !

(via Julien)

Responsive Web Design, mon grain de sel ;)

Les tailles des écrans varient énormément, et ce phénomène ne fait que s’amplifier.

Les nagigateurs se diversifient, sans qu’on voie de réelle convergence arriver. En fait, comme l’historique du web augmente (mécaniquement 😉 ) et qu’on ne contrôle pas les mises à jours des logiciels, le nombre de navigateurs augmente mécaniquement, au fil du temps.

Le contexte de l’internaute est de plus en plus varié : chez lui, avec un ordinateur, chez lui, avec une tablette, une console de jeux mobile ; en mobilité, avec un smartphone, …
Ce contexte est important, parce qu’en fonction de celui-ci, les problématiques ne sont pas les mêmes : la bande passante n’est pas du tout la même, entre un internaute qui accède à un réseau wifi et un internaute en mobilité, en 3G ou Edge.

Enfin, même quand l’internaute est chez lui, devant un bien classique ordinateur, la taille de la fenêtre du navigateur peut tout à fait ne couvrir qu’une partie de son écran.

Bref, le contexte de navigation devient de plus en plus varié, avec pas mal de paramètres à prendre en compte.

D’ou la tendance actuelle, intéressante, du Responsive Web Design.

Cette notion vient de l’architecture physique, ou l’on essaye de faire des éléments qui évoluent, en fonction des besoins ou usages.
Exemple : une vitre est transparente et peut devenir opaque, en fonction de l’usage de la pièce.

Je veux pas la ramener, mais c’est bien ce à quoi Wokup s’était attelé dès 1999 !

Donc, ce n’est pas un sujet nouveau, mais on peut dire que c’est un sujet qui devient de plus en plus important.

L’idée, du Responsive Web Design, c’est de changer la façon de concevoir un site web, de manière à ce qu’il soit « intrincèquement » adaptable aux différentes configurations.

On a bien l’idée d’un contenu unique, qui s’adapte à l’ensemble des situations.

 

Ce que j’en pense :

C’est un vrai sujet, c’est donc très bien qu’il soit traité 😉

Comme le dit ce très bon article (en Français en plus), cela ne concerne pas que la partie technique. Il faut que les designers pensent au site différemment, le conçoivent différemment.
Il faut dans le même temps que les décideurs, les manageurs, comprennent ces enjeux, et fassent des choix cohérent par rapport à ce besoin, qu’ils demandent à leurs agences : « comment le site s’adapte aux différentes tailles d’écrans » ?

Si le buzz actuel sur cette approche fait bouger les choses dans ce sens, et aide l’ensemble des acteurs : développeurs, designers, décideurs, c’est déjà très très bien !

Maintenant, l’approche est intéressante, mais n’est pas suffisante.

Je ne pense pas, pour ma part, que le seul sujet soit la mise en forme, aussi intelligente soit-elle.
Exemple : on ne va pas afficher le même nombre de produits, entre une interface pour smartphone et un ordinateur.

Je ne vois pas non plus pourquoi on envoie le même contenu à l’internaute, quelque soit sa configuration.

Je sais que ce n’est pas l’approche « standard », mais je pense qu’il est plus adapté, pour certains éléments, d’envoyer un contenu adapté à la configuration de l’internaute.

Exemples :

  • il est en mobilité, sur un petit écran : j’envoie des images petites, légères.
  • Il est chez lui, avec un bon réseau : j’envoie des images en haute définition, permettant d’avoir une qualité au top.
  • Il navigue depuis IE6 😉

Bref, je pense que la solution passe par un mixe entre ce que propose le Responsive Web Design, et des technologies côté serveur.

La partie Responsive Web Design permet d’avoir un contenu avec une certaine élasticité.

La partie serveur permet d’optimiser ce qu’on envoie à l’internaute, tant au niveau du poid qu’au niveau du format.

Maintenant, l’approche dont je parle n’exsite pas…. Pas encore !

Merci à

Vision du futur par Microsoft

On voit régulièrement ce type de vidéo, présentant un futur bien plus connecté :

Pour le coup, je trouve que Microsoft n’a pas été très créatif, non ?

On voit bien des écrans partout, tactiles et multi touch.

On a quelques écrans 3D, des lunettes permettant de projeter de la réalité augmentée.

Petite innovation complémentaire proposée : on a des écrans ou la zone de projection « sort du cadre ». Il s’agit de projetction holographique ?

Donc, au delà de cette profusion d’écrans, je n’ai pas trouvé ça tellement en rupture….

A sa grande époque, Nokia avait proposé cette vidéo, beaucoup plus futuriste pour le coup, avec un « téléphone polymorphe » :

Si j’étais méchant, je dirais que pendant qu’ils travaillaient là dessus, Apple développait son iPhone…

Alors, quelles seront les grandes ruptures à venir, qui vont changer notre vie et notre rapport avec ces équipements ?

Apple est-il dans la bonne voie, avec Siri ? L’interface vocale sera-t-elle la prochaine évolution majeure ?

Premier contact avec l’iPhone 4S et Siri

Je viens de recevoir l’iPhone 4S.

La fonction que je voulais tester est SIRI bien sûr.

Bon, ça fonctionne plutôt bien mais :

  • Les services sont encore très limités. A voir si il sera possible d’étendre ces services, via une API. 
  • Dans bien des cas, il ne comprend pas bien, et l’usage devient vite énervant.
  • Il a besoin d’une connection, et quand on est en Edge, les temps de réponses sont très mauvais.

Moi : Je voudrais acheter un livre à la Fnac

Siri : je ne peux pas vous aider à vendre ou acheter des actions

Moi : Je voudrais prendre le train demain entre Rennes et Paris

Siri : Je ne pense pas pouvoir vous donner le cours de la valeur boursière AU – AngloGold Ashanti pour demain (???)

Moi : Je voudrais prendre l’avion entre Rennes et Marseille, demain

Siri : A bon ? (???)

Bref, sorti des 10 scénarios de bases (envoyer un message, programmer une alarme ou une alerte, la météo, les cours de bourses, recherche sur le web), ça rame pas mal.

A suivre donc, le système est plutôt pas mal au niveau reconnaissance, reste donc à l’enrichir avec beaucoup plus de scénarios.

Looklet, pour combiner les looks à l’infini

Looklet est un site qui permet de manipuler mannequin et fringues, de manière à « fabriquer » des looks :

Tout commence avec ce configurateur :

En fait, tout est paramétrable :

  • Le mannequin : silhouette, tête, chevelure, regard ( ! )
  • Les habits, très variés
  • Et enfin, la mise en forme, puisqu’on peut travailler le fond et le traitement d’image
Exemple :
(bon, je ne suis pas un spécialiste de mode moi 😉 )
Ensuite, on peut sauvegarder sa création, participer à des concours, partager sa création sur les réseaux sociaux.
Ce n’est pas la première application à proposer ça, mais j’ai trouvé que c’était particulièrement bien fait : un juste mélange entre puissance et simplicité.
C’est à mon avis un très bon outil pour aider le client à se projeter.
On pourrait imaginer un service de ce type, avec une ergonomie spécifique pour iPad ou iPhone.
(merci Cédric pour l’info)

L’aventure de Gmail offline

Le off-line, c’est une nouvelle fonction du web, qui permet d’avoir une application web qui fonctionne avec ou sans réseau.

En mode connecté, l’application a un comportement web classique.

Quand le réseau est coupé, l’application doit continuer à fonctionner, à partir de données stockées dans l’ordinateur.

Initialement, Google a proposé Google Gears. Ce module permettait d’ajouter la fonction de stockage local aux navigateurs.

L’un des sites à utiliser Google Gears fut GMail. Cela marchait, à peu près bien.

Mais la stratégie de Google est de généraliser cette approche, et de l’intégrer au future HTML 5.

Google a donc arrêté le développement de Gears, pour ce réintégrer cette fonctions nativement dans Chrome.

Côté Gmail off-line, on a donc eu une interruption de service, qui a duré quelques mois.

Aujourd’hui, on peut de nouveau réactiver la fonction off-line de GMail.

Chose étonnante, il ne s’agit pas de la même interface que celle de GMail « classique » :

Pourquoi Google a-t-il du développer une nouvelle application ?

Plusieurs hypothèses :

  • Google en profite pour redévelopper, « from scratch » son application de messagerie : l’actuelle version est devenue une usine a gaz.
  • La fonction « off line » est trop impactante, et ne peut pas être intégrée si facilement que ça dans une application web déjà complexe.

A suivre. On verra bien comment les choses vont évoluer.

En tout cas, le off-line est une fonction tout à fait fondamentale pour l’avenir du web en général et du e-commerce en particulier.

Une idée du e-commerce en HTML 5

Le HTML 5, qui devrait aboutir à une norme en 2014, est déjà bien présent dans les navigateurs modernes, Google Chrome en tête.

Le web a d’ailleurs pratiquement toujours évolué comme ça, tiré par les navigateurs plus que par la normalisation (qui est donc plutôt une normalisation « a posteriori »).

Voici quelques sites, qui, je pense, donne une idée de ce qu’on peut faire, en HTML 5 dans notre secteur du e-commerce.

Premier exemple : manufacturedessai.it

Le site propose une navigation verticale plutôt étonnante, faite de plusieurs couches (calques) transparents, ce qui donne une impression dynamique nouvelle. A tester pour comprendre ;).

Autre site  : www.gforce.be

La navigation est là encore différente, avec un slider plein écran, et les différents éléments qui apparaissent en superposition.

Autres sites intéressants :

Tout ça pour avoir un petit aperçu de ce que permet le HTML 5, et des évolutions à venir pour les sites e-commerce… A suivre de très près ;).
Au, fait, je donne une formation HTML 5 le 16 Septembre…

Affichage avancé des pages dans le navigateur

Vous dessinez votre site avec une largeur fixe ?

Cette largeur augmente, et aujourd’hui, la plupart des sites sont réalisés pour un écran de 1024 pixels de large.

La hauteur est habituellement variable : il est « commun » de réaliser des sites avec une hauteur variable et une largeur fixe : les internautes sont habitués à « scroller » verticalement, et pas horizontalement.

Ceci dit, rien d’obligatoire : certains sites ont essayés la navigation horizontale, comme Gucci :

Donc, votre site, il a des pages avec une hauteur variable, et une largeur fixe. Point.

C’est un bon début, mais on peut aller bien plus loin.

Pour vous en convaincre, ouvrez une page d’un service de Google, GMail, par exemple.

L’occupation de l’espace est bien différent :

La page est complètement remplie, sur toute la largeur, quelque soit la taille de la fenêtre.

Bon, en dessous d’un minimum, il y a un scroller horizontal, mais dès qu’on a une largeur raisonnable, la page s’affiche simplement en pleine largeur.

Au niveau vertical, la page déborde, avec un ascenceur donc.

Mais quand on dessend dans la page, un bloc reste collé en haut :

(j’ai entouré en rouge la partie qui reste fixe, quand on scroll la page)

On peut également voir ce type de mise en forme avec le back office de magento.

C’est là ou je voulais en venir : c’est, il me semble, une tendance clé des nouveaux services : cet usage de morceaux « scotchés ».

On peut, comme GMail, scotcher un bandeau, permettant de garder des actions clés toujours visibles (ici, ce sont les boutons pour naviguer dans les mails : envoyer, forwarder, …).

On peut aussi scotcher un bandeau en bas. Headict l’avait fait avec un footer toujours visible. Bon, ils l’ont enlevé pour remonter ces éléments dans le header, et je n’ai pas trouvé d’autres exemples ;). Salomon a sur son site e-commerce, un exemple de footer scotché :

On peut encore scotcher un morceau a gauche ou à droite.

Exemple, avec le service Feedback 2.0, sur Beansight :

Le bouton a gauche est « collé » au bord de la fenêtre, et se déplace, en fonction du scroll de la fenêtre.

Ces fonctions sont très riches, et très utiles.

Quelques bémoles cependant :

  • D’expérience, il faut une mise en oeuvre impeccable. J’ai vu pas mal de site avec une mise en oeuvre approximative. Cela donne, à mon avis, un rendu très amateur. Si on n’a pas les moyens de faire un truc bien travaillé, il vaut mieux s’abstenir.
  • Comme toujours quand il s’agit d’interfaces, le diable se cache dans les détails. Il faut tester le service dans des configurations et des usages limites. Que va-t-il se passer si la fenêtre est toute petite ? Et si l’internaute agrandit l’affichage ? Ou s’il le réduit ? Il faut penser à tout.
  • Enfin, ça peut être super utile de garder des espaces scotché, mais c’est de la place qui ne pourra pas être utilisé pour autre chose. La place sur l’écran, elle est « chère ». C’est donc une super idée d’utiliser ces fonctions pour garder afficher des choses escentiels, pas pour le superflux.