Archives par mot-clé : design

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.

Soignez l’ergonomie et le design de vos formulaires de paiement !

Cet article est écrit par Julien Chaumond, co-fondateur et CEO de Productism, un réseau social centré sur les produits, et auteur du livre Social commerce. Vous pouvez aussi suivre Julien sur Twitter.

Le formulaire de paiement de Tumblr

En développement Web et e-commerce, un formulaire de paiement par carte bleue est souvent vu comme quelque chose de nécessairement austère voire ennuyeux. Comme si le dépouillement graphique et ergonomique était un gage de sécurité sur cette étape critique du parcours client !

Pourtant, il y a vraiment un intérêt à développer une expérience utilisateur de qualité : lorsqu’ils sont bien designés et bien conçus, les formulaires de paiement peuvent être intuitifs, beaux, guider le client (notamment par une bonne gestion des erreurs), et même dans certains cas s’approcher du « Graal » du formulaire de paiement : donner envie de payer 😉

Exemple : entre ces deux formulaires de paiement par carte bleue, lequel avez-vous le plus envie de remplir ? 😉

ou :

Le deuxième est celui de Capitaine Train, le concurrent de Voyages-SNCF.

Bien sûr, il n’y a pas que le design graphique : la non-surcharge d’informations, le comportement naturel de la navigation au clavier (quand j’appuie sur Entrée, cela devrait toujours soumettre le formulaire… sinon il y a un problème), l’utilisation de balises HTML sémantiques pour optimiser l’autocomplétion par le navigateur, sont autant de facteurs qui participent de la qualité de l’expérience utilisateur.

Pour ne pas faire de jaloux 😉 , l’application iPhone de Voyages-SNCF est aussi un bon exemple d’expérience utilisateur pour le paiement : sur mobile, l’interface tactile donne une relation physique, presque intime avec le formulaire… et on est presque content de rentrer ses informations de paiement !


Et vous, quels sont les formulaires de paiement que vous appréciez sur le Web ?