{"id":4605,"date":"2017-10-05T10:30:51","date_gmt":"2017-10-05T08:30:51","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=4605"},"modified":"2017-10-05T10:30:51","modified_gmt":"2017-10-05T08:30:51","slug":"principes-mobile-design","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/principes-mobile-design\/","title":{"rendered":"8 principes de mobile design \u00e0 ne pas oublier"},"content":{"rendered":"

La navigation via les \u00e9crans de smartphone ou de supports mobiles, comme les tablettes, n\u00e9cessite une r\u00e9flexion particuli\u00e8re quant \u00e0 l\u2019organisation et la pr\u00e9sentation de vos pages internet.<\/p>\n

On parle l\u00e0 de mobile design, et plus seulement de webdesign.<\/p>\n

Voici donc 8 principes fondamentaux qui doivent vous guider pour toute action de mobile design.<\/p>\n

 <\/p>\n

1. Limitez votre barre de navigation<\/h2>\n

Plus l\u2019\u00e9cran est petit, plus l\u2019espace utilis\u00e9 co\u00fbte cher.<\/p>\n

Si un menu large est bienvenu sur un ordinateur de bureau, il s\u2019av\u00e8rera inutilement encombrant pour un smartphone. Ce n\u2019est pas pour autant une raison pour se priver de menu.<\/p>\n

L\u2019option la plus populaire ces derni\u00e8res ann\u00e9es est la pr\u00e9sentation en \u00ab\u00a0hamburger\u00a0\u00bb\u00a0: trois lignes apparaissent \u00e0 l\u2019\u00e9cran, qui se d\u00e9roulent ensuite sous forme de menu \u00e0 la demande de l\u2019utilisateur.<\/p>\n

Vous pouvez bien s\u00fbr tenter d\u2019autres m\u00e9thodes mais prenez garde \u00e0 ne pas trop d\u00e9router les utilisateurs\u00a0avec des mod\u00e8les qu\u2019ils ne d\u00e9crypteront pas et qui ne leur permettront pas de retrouver votre menu.<\/p>\n

 <\/p>\n

2. Gardez les zones les plus importantes \u00e0 port\u00e9e de doigt<\/h2>\n

Comment utilisez-vous votre \u00e9cran tactile\u00a0? La plupart du temps, c\u2019est le pouce qui sert \u00e0 naviguer, \u00e0 changer d\u2019\u00e9cran, \u00e0 cliquer\u2026<\/p>\n

Et m\u00eame si les \u00e9crans se sont \u00e9largis ces derni\u00e8res ann\u00e9es, les zones les plus utiles, celles avec lesquelles il reste le plus simple d\u2019interagir, demeurent au centre du rectangle.<\/p>\n

C\u2019est l\u00e0 que vous placerez vos \u00e9l\u00e9ments les plus essentiels, ou les informations les plus pertinentes. Les bordures, les parties hautes et basses de l\u2019\u00e9cran, seront r\u00e9serv\u00e9es \u00e0 des outils moins importants pour vous (et pour vos clients).<\/p>\n

 <\/p>\n

3. Optimisez vos fichiers<\/h2>\n

Les internautes sont encore plus press\u00e9s sur smartphone que sur ordinateur. Am\u00e9liorez leur exp\u00e9rience de navigation (et conservez leur attention) en construisant des pages qui se chargeront rapidement.<\/p>\n

La taille des images a une incidence directe\u00a0: n\u2019installez pas sur votre serveur des fichiers trop lourds. Ils n\u2019ont pas besoin d\u2019\u00eatre d\u2019aussi bonne qualit\u00e9 que pour une impression, par exemple.<\/p>\n

Il existe des utilitaires qui optimisent automatiquement chaque fichier image pour les r\u00e9duire pour une utilisation web\u00a0: utilisez-les\u00a0!<\/p>\n

 <\/p>\n

4. Un petit lien pour vous, une grande aide pour l\u2019utilisateur<\/h2>\n

Il existe une astuce toute simple pour faciliter la vie des utilisateurs\u00a0: rendre votre num\u00e9ro de t\u00e9l\u00e9phone cliquable.<\/p>\n

Ainsi, depuis leur smartphone, ils n\u2019ont plus besoin de tenter de copier-coller votre contact, ou de le retenir. Ils n\u2019ont plus qu\u2019\u00e0 appuyer dessus pour vous joindre, comme ils le font d\u00e9j\u00e0 pour vous envoyer un mail.<\/p>\n

De m\u00eame, vous pouvez ajouter un lien Google Map sous votre adresse, pour guider plus rapidement les gens vers vous.<\/p>\n

Ces petits services ne vous co\u00fbteront rien mais pourront vous rapporter gros\u00a0!<\/p>\n

 <\/p>\n

5. Pensez responsive<\/h2>\n

Ce n\u2019est pas la premi\u00e8re fois que ce sujet est \u00e9voqu\u00e9 ici\u00a0: aujourd\u2019hui, un site web se doit d\u2019\u00eatre responsive.<\/p>\n

Cela implique de r\u00e9fl\u00e9chir \u00e0 l\u2019ordre dans lequel seront pr\u00e9sent\u00e9s les diff\u00e9rents \u00e9l\u00e9ments, au format des images pour qu\u2019elles s\u2019adaptent \u00e0 la taille de l\u2019\u00e9cran, \u00e0 la suppression de certains effets qui ne sont pas indispensables (notamment les vid\u00e9os ou le JavaScript).<\/p>\n

Pensez syst\u00e9matiquement \u00e0 l\u2019utilisation sur mobile lorsque vous pr\u00e9parez votre site internet.<\/p>\n

 <\/p>\n

6. Oubliez les pop-ups<\/h2>\n

Les pop-ups sont souvent jug\u00e9es ind\u00e9sirables sur internet. Elles deviennent tr\u00e8s d\u00e9sagr\u00e9ables sur un smartphone. Au point que Google p\u00e9nalise les sites qui les utilisent.<\/p>\n

Vous \u00eates peut-\u00eatre tr\u00e8s attach\u00e9 \u00e0 ces petites fen\u00eatres publicitaires qui s\u2019ouvrent pour vendre vos produits, mais r\u00e9fl\u00e9chissez \u00e0 d\u2019autres techniques pour obtenir les m\u00eames r\u00e9sultats sur les mobiles.<\/p>\n

Des bons call-to-action judicieusement ins\u00e9r\u00e9s pourront bien \u00eatre tout aussi efficaces\u00a0!<\/p>\n

 <\/p>\n

7. Utilisez des formulaires plus courts<\/h2>\n

M\u00eame si les claviers des smartphones se sont grandement am\u00e9lior\u00e9s ces derni\u00e8res ann\u00e9es, l’utilisation des formulaires sur mobile<\/a>\u00a0reste souvent hasardeuse.<\/p>\n

Que celui qui ne s\u2019est jamais battu avec la correction automatique me jette son t\u00e9l\u00e9phone\u00a0!<\/p>\n

Par cons\u00e9quent, quand vient l\u2019heure de remplir un formulaire, certains utilisateurs peuvent h\u00e9siter. Surtout si ce formulaire comprend de nombreux champs.<\/p>\n

Vous avez deux options\u00a0:<\/p>\n