Catégorie : Développement web

Et si nous dépas­sions les posi­tions de prin­cipe ?

Pour faire une mise en page web « respon­sive », des gens biens me décon­seillent de me servir des tailles des diffé­rents appa­reils pour imagi­ner les paliers sur lesquels modi­fier l’agen­ce­ment. L’idée est de travailler sur le contenu et d’ima­gi­ner ce qui est le plus perti­nent pour le contenu, indé­pen­dam­ment des appa­reils sur le marché, qui vont de toutes façons évoluer.

Oui, ok, en théo­rie. Main­te­nant il est temps de travailler la pratique.

Je peux faire une opti­mi­sa­tion ou un nouvel agen­ce­ment à chaque fois que l’es­pace dispo­nible me permet d’ap­por­ter un peu de valeur ajou­tée. Je fini­rai avec une multi­tude de paliers diffé­rents. Certains me deman­de­ront du temps, peut être beau­coup, alors qu’ils ne repré­sentent quasi­ment aucun visi­teur. Autant dire que j’au­rai perdu du temps.

À l’in­verse, je peux prévoir unique­ment quelques paliers prin­ci­paux et lais­ser les marges ou tailles s’adap­ter parce que mon contenu le permet. Ce sera correct et lisible partout mais peut être que tel ou tel type d’ap­pa­reil repré­sente beau­coup de visi­teurs et qu’un palier ou qu’une opti­mi­sa­tion supplé­men­taire aurait apporté un retour sur inves­tis­se­ment signi­fi­ca­tif.

Au final je vais devoir faire des choix de palier non seule­ment en fonc­tion de mon contenu, de l’er­go­no­mie visée et du temps dispo­nible, mais aussi en fonc­tion des visi­teurs et de leur maté­riel. C’est une clas­sique ques­tion de retour sur inves­tis­se­ment, de ratio entre la valeur ajou­tée et l’in­ves­tis­se­ment néces­saire : Je veux que ce soit correct partout, mais je veux concen­ter mes efforts supplé­men­taires là où c’est le plus utile et visible.

Même sans toucher au nombre de paliers, l’er­go­no­mie et les conte­nus ne dictent pas toujours un palier très précis. Je peux fina­le­ment viser un peu plus tôt ou un peu plus tard sans que ça ne change grand chose, j’ap­por­te­rai juste une solu­tion légè­re­ment diffé­rente. Tel ou tel appa­reil risque de se retrou­ver proche d’un palier et avoir connais­sance de cette proxi­mité me permet un quick-win au niveau de la valeur ajou­tée qu’il serait dommage de rater.

Bien évidem­ment c’est une réflexion qui dépend en partie des appa­reils, de la répar­ti­tion des utili­sa­teurs et des prévi­sions tels que nous en dispo­sons aujourd’­hui. Cela peut chan­ger, et cela chan­gera. Si je prends correc­te­ment en compte le design et l’er­go­no­mie alors le rendu restera correct. Peut être pas autant opti­misé qu’au départ, mais pas moins bon que si je ne prends pas du tout en compte les appa­reils et utili­sa­teurs au départ.

À contre-courant des habi­tudes des divi­sions de web marke­ting : Ignore the fold.

Et si au lieu de bour­rer l’in­for­ma­tion de façon à ce que l’uti­li­sa­teur n’ait pas à faire défi­ler la page, il fallait l’aé­rer pour que l’ac­tion désor­mais natu­relle de défi­ler ne soit plus l’obs­tacle à des mises en pages effi­caces ?

Je suis preneur de plus de ressources à ce sujet si vous en avez. Le lien donné corres­pond assez à mon expé­rience en tant qu’u­ti­li­sa­teur.

Oui, ils semblent une superbe idée pour four­nir plus de propo­si­tions à l’in­ter­naute, mais ajou­ter un carrou­sel est géné­ra­le­ment une mauvaise idée. Le carrou­sel tue le taux de conver­sion.

D’autres ont détaillé la ques­tion bien mieux que moi alors si vous voulez suivre les études, les tests utili­sa­teurs ou les statis­tiques de conver­sion, suivez un des liens en bas du billet. Pour ceux qui veulent un résumé :

1. Ça ressemble à un élément très graphique, qui bouge, souvent avec des promo­tions ou messages publi­ci­taires, c’est donc traité visuel­le­ment par l’in­ter­naute comme de la publi­cité, et ignoré incons­ciem­ment. Ce que vous mettez dans le carrou­sel est ce qui a le plus de chances de ne *pas* être suivi.
2. Sans que ça ne soit contra­dic­toire avec le point précé­dent, l’oeil humain fonc­tionne par compa­rai­son. Ce qui bouge attire l’oeil et empêche de se concen­trer ailleurs. Le carrou­sel bouge et en plus de ne pas être effi­cace en lui-même, il empê­chera le reste de la page de l’être.
3. Trop souvent mal fait il pose de problèmes de perfor­mance sur l’ap­pa­reil client, et des problèmes d’er­go­no­mie si jamais le client souhaite l’uti­li­ser.

Au final il appa­rait que le carrou­sel est surtout une bonne idée pour l’édi­teur du site, ses équipes commer­ciales et marke­ting, de façon à ne pas choi­sir ce qui doit vrai­ment être mis en avant. Sa seule valeur ajou­tée c’est de conten­ter l’or­ga­ni­sa­tion interne.

Bien entendu tout ceci est géné­ral, mais parce que c’est le cas géné­ral, il y a peu de chances que votre cas soit diffé­rent, malgré votre volonté d’y croire. Tout ceci n’est pas de l’opi­nion, il y a des vrais tests utili­sa­teurs et des chiffres de conver­sion derrière.

Si vous souhai­tez tout de même un carrou­sel :

• C’est pour une infor­ma­tion non secon­daire (une galle­rie d’illus­tra­tions par exemple)
• Un carrou­sel = un seul type d’in­for­ma­tion
• Il doit être navi­gable au clavier et en tactile, et les zones de navi­ga­tion clavier doivent être en dehors de la zone du carrou­sel
• La posi­tion courante doit être expli­cite, et si possible utili­sez des minia­tures pour mieux iden­ti­fier les diffé­rents items du carrou­sel
• Char­gez le code néces­saire à l’ani­ma­tion et les éléments non visibles en asyn­chrone, ne ralen­tis­sez pas l’ac­cès à la page

Quelques liens :

• Sliders suck
• How to make sliders no suck
• Don’t use auto­ma­tic images sliders or carrou­sels, ignore the fad
• Carrou­sels
• Rota­ting banners ? just say no!
• Auto-forwar­ding carou­sels and accor­dions annoy users and reduce visi­bi­lity
• Carou­sels inter­ac­tion stats

Je dois certai­ne­ment être en retard mais de mon temps les machines virtuelles pour tester Micro­soft Inter­net Explo­rer n’étaient diffu­sées que sous un système acces­sible unique­ment par Windows. Il fallait bidouiller un peu.

Visi­ble­ment les choses ont changé et sous modern.ie il y a des machines virtuelles pour tous les OS hôtes, et pour toutes les versions sensées de IE. Bon, il n’y a déjà plus IE6 mais plus personne de sensé ne regarde encore IE6.

Encore un outil de proto­ty­page. Ici « dans le navi­ga­teur », assez clean, qui a même une notion de respon­sive design basique et des grilles : easel.io

Ceci dit de mon côté je commence à me dire que Blue­grif­fon est peut être aussi pratique, et génère une base HTML/CSS qu’on pourra réuti­li­ser plus tard.

J’aime bien les gens qui revi­sitent les inter­faces des formu­laires. Il n’y a pas mieux pour bloquer la conver­sion et donner envie de partir. Ce n’est pas qu’une ques­tion de graphisme, c’est vrai­ment une notion d’in­te­rac­tions.

Aujourd’­hui je vois une petite démo d’un paie­ment par carte bancaire. C’est simple, effi­cace. Ça peut semble gadget mais sur smart­phone ou tablette je suis convaincu que ça peut réel­le­ment chan­ger l’ex­pé­rience utili­sa­teur.

Je suis preneur d’autres liens du même type si vous en avez.

Parfois les idées les plus simples sont les meilleures : le nom de domaine x.x.x.x.xip.io redi­rige vers l’adresse IP x.x.x.x, quelle qu’elle soit. Pour mieux vous aider, vous pouvez même préfixer par ce que vous souhai­tez : www.10.0.0.1.xip.io, backof­fice.10.0.0.1.xip.io, etc. Pour pas mal de cas simples, plus besoin de deman­der à tout le monde de modi­fier son /etc/hosts.

Là dessus se rajoute Pow, un serveur web simpliste : Vous faites un lien symbo­lique dans le réper­toire de Pow, ça vous créé un site web virtuel à ce nom avec une exten­sion .dev. Vous pouvez aussi utili­ser les xip.io et Pow redi­rige vers le bon sous-site en fonc­tion du préfixe. J’au­rai bien aimé avoir un moyen simple d’ar­rê­ter/démar­rer le serveur et la possi­bi­lité de défi­nir mes propres alias (et pas que des .dev, mais utili­ser de vrais noms de domaine), mais c’est un premier pas inté­res­sant.

Secu­re­hea­ders, une gem ruby pour ajou­ter et confi­gu­rer des entêtes liées à la sécu­rité sur vos appli­ca­tions web.

• Content Secu­rity Policy (CSP) – Helps detect/prevent XSS, mixed-content, and other classes of attack. CSP 1.1 Speci­fi­ca­tion
• HTTP Strict Tran­sport Secu­rity (HSTS) – Ensures the brow­ser never visits the http version of a website. Protects from SSLS­trip/Fire­sheep attacks. HSTS Speci­fi­ca­tion
• X-Frame-Options (XFO) – Prevents your content from being framed and poten­tially clickja­cked. X-Frame-Options draft
• X-XSS-Protec­tion – Cross site scrip­ting heuris­tic filter for IE/Chrome
• X-Content-Type-Options – Prevent content type snif­fing

Et vous, quelles entêtes ajou­tez vous à vos sites pour gérer la sécu­rité ?