Archives pour la Catégorie «Web design»

iPhone, iPad, PC et Marmiton

Publié le par Isabelle Canivet et Jean–Marc Hardy
facebooktwittergoogle_pluslinkedinmail

Vous aussi vous imprimiez comme moi, la recette de la tarte au sucre ou du houmous sur trois pages A4 volantes qui finissaient au fond d’un tiroir avec le tire-bouchon et le coquetier ?

Avec Marmiton, c’est fini tout ça !

Référence en matière de site de recettes de cuisine, Marmiton décline aujourd’hui  son offre en une application mobile.

En dehors de l’intérêt de ces 55.000 recettes de cuisine gratuites à l’approche du réveillon, mon propos est d’analyser la qualité des interfaces.

« Responsive design » ?

J’ai été un peu vite, au démarrage de cet article, en écrivant que Marmiton faisait une belle démonstration de « responsive design ». En réalité, le véritable « responsive design », c’est de faire un site unique qui va réagir automatiquement en fonction de la dimension de la fenêtre et proposer une interface adaptée. Par exemple ce site-ci que je trouve génial dans sa réactivité (réduisez les dimensions de la fenêtre de votre navigateur et dégustez le spectacle). Le site de Marmiton n’est pas « responsive » à proprement parler. Simplement, ses applications iPhone et iPad proposent d’autres mises en scène.

Ce que je trouve très intéressant, c’est le fait de décliner non seulement la mise en page, mais également les fonctionnalités.

En version iPhone :

  • 1 seule colonne
  • 1 recherche immédiate et simplifiée
  • Des photos de taille réduite
  • Des zones de clic confortables

L'application iPhone de Marmiton

En version iPad :

  • 2 colonnes
  • 1 formulaire de recherche enrichi
  • Des effets de « slider » pour calibrer le niveau de difficulté de la recette
  • Des photos plus grandes, de haute qualité

Application iPad de Marmiton

« Mobile First »

Ce slogan a beaucoup circulé dans le monde du Web mobile : « Mobile First » signifie que l’interface prioritaire, dans certains univers comme ici la cuisine, est l’interface mobile et non le site web classique !

Le site « desktop » de Marmiton s’apparente à un puzzle d’informations dont vous ne voyez ici qu’une moitié ! A la sauce « portail » ;-)

Le site web de Marmiton

Remarquez comme les versions mobiles iPhone et iPad sont faiblement valorisées, très bas dans la colonne latérale droite, bien en-dessous de la ligne de flottaison.

En vérité, je vous le dis, les meilleures applications mobiles enverront bientôt les interfaces classiques aux oubliettes.

Le peu de pixels octroyés par les mobiles est une superbe opportunité de simplifier les interfaces.

Vous désirez en discuter davantage ? Découvrez notre formation « Du Web vers le mobile » !

De bons exemples de sites web ?

Publié le par Isabelle Canivet et Jean–Marc Hardy
facebooktwittergoogle_pluslinkedinmail

Malgré la maturité croissante du média, en formation comme en prose, il reste plus facile d’épingler des exemples négatifs que d’identifier de véritables bonnes pratiques à suivre.

Souvent, en fin de formation, les stagiaires, gavés de « choses à éviter », désirent repartir avec un exemple à suivre, une étoile du Berger. Ce qui n’est pas aisé pour une double raison : la perfection n’est pas de ce monde, et le site idéal dépend toujours du contexte.

Donc venons-en au fait : je voulais vous présenter le type d’interfaces que je trouve fameusement efficaces dans le contexte d’une communication « produit ».

AVAST : un bon produit, une belle interface

L’antivirus AVAST, gratuit pour les particuliers, en dehors du fait qu’il a fait ses preuves comme logiciel proprement dit, nous offre une interface d’une efficacité remarquable.

La page d’accueil a des allures de « landing page » : une action, une argumentation acérée, un bouton. Et cet espace blanc qui permet si bien à l’oeil de plonger.

La page d

(Bon, en taille écran normale, ça donne mieux, évidemment)

 

A l’intérieur, on trouve un comparatif limpide, factuel, visuel, digeste malgré la densité des informations. Une belle coopération entre le design graphique et le rédactionnel, avec le marketing en arrière-plan… ce qui, vous le savez comme moi, n’est pas gagné d’avance.

Comparatif des versions gratuites et payantes sur avast.com

Si Norton s’en inspirait, il séduirait peut-être davantage son marché, non ?

Allons, faites votre choix dans la gamme Norton, Messieurs, Dames, à l’aide de cette barre de scroll horizontal, en vous appuyant sur des visuels redondants et des noms de produit ésotériques !

Gamme de produits Norton

Sur ces mots, retournons au travail…

De la variété des écrans au design flexible

Publié le par Isabelle Canivet et Jean–Marc Hardy
facebooktwittergoogle_pluslinkedinmail

Rendez-vous sur le site ScreenResolution.org et vous constaterez l’incroyable variété des conditions d’affichage.

La taille des écrans est extrêmement variable

6.569 résolutions d’écran répertoriées au total !!!

Faut-il développer 6.569 versions de votre site web ?

Évidemment non ! Le « responsive design » consiste à développer des mises en page flexibles, qui s’adaptent à la multitude des conditions d’affichage.

Fini le temps où on optimisait une page web pour la résolution « standard » ! Préhistoriques, les discussions qui visent à trancher entre calibrer son site sur du 800 x 600 pixels ou sur du 1024 x 768.

En matière d’écran, il n’y a plus de standard. La résolution « dominante » pèse à peine 16% d’utilisation.

Le "responsive design" consiste à produire une mise en page flexible qui s'adapte à la multitude des conditions d'affichage

Pour en savoir plus sur le « responsive design », lisez cet excellent article de Usaddict.