Aide S'inscrire

Conseil design n°3 : Structure & Ergonomie


Lorsqu'il visite pour la première fois votre site internet, un nouvel arrivant va décider en quelques secondes seulement de consulter plusieurs pages ou de quitter votre site. Pour maximiser les chances qu'il prenne la bonne décision - rester sur vos pages - présentez lui un contenu clair et bien organisé afin qu'il puisse accèder à l'information qu'il recherche en un coup d'oeil. Vous trouverez dans cet article plusieurs conseils afin d'optimiser cet aspect important de l'ergonomie de votre site.

Structurer le contenu de votre site

La première impression laissée par votre site est la plus importante. Surprenez vos visiteurs dès qu'ils arrivent sur votre page d'accueil et encouragez les à rester et naviguer sur vos autres pages. Plus facile à dire qu'à faire ? Il suffit de vous concentrer sur un objectif : le contenu de votre page d'accueil doit être agréable et bien organisé.  Cela va naturellement conduire vos visiteurs à chercher et trouver rapidement ce qui les intéressent.


Nous vous donnons dans cet article des conseils et des idées pour présenter votre contenu de façon pertinente. Pour chacune des parties importantes de votre site internet, vous trouverez un résumé de ce qu'il faut garder en tête pour proposer la meilleure expérience possible à vos visiteurs.


Notre premier conseil, applicable à l'ensemble de cette démarche, est de vous concentrer sur les détails : c'est une somme de petites choses réussies qui mettront le mieux en valeur votre contenu.

Quelle partie de votre site souhaitez-vous améliorer ?


La navigation permet à vos visiteurs d'avoir une vision claire et complète de tout ce qu'ils peuvent trouver sur votre site internet. Il est donc important de la rendre la plus accessible et la plus logique possible.

Ne faites figurer que les 6 ou 7 pages les plus importantes de votre site dans sa navigation, et faites en sorte qu'elles soient toutes visibles sur une seule ligne. Que faire des autres pages ? Répartissez-les de manière logique sous ces 6 ou 7 pages les plus importantes en utilisant la profondeur de la navigation de votre site : vous pouvez organiser vos pages sur 3 niveaux ! Le but de votre navigation est de guider le visiteur. Plus votre navigation propose d'options, plus il sera difficile pour votre visiteur de choisir quelle page visiter ensuite. De manière générale, plus vous prenez de décisions à la place de votre visiteur, plus vous facilitez sa navigation sur votre site. Enfin, une barre de navigation très grande ne sera probablement pas très esthétique...

Voici les règles de base à garder en tête :

  • se limiter à 6 ou 7 onglets de navigation principaux (accessibles depuis votre page d'accueil) ;
  • organiser les sous-catégories pour aller du plus général au plus particulier ;
  • appuyer votre navigation par des visuels (Images avec lien cliquables ou icône ) ;
  • la navigation de votre site Jimdo peut inclure jusqu'à 3 niveaux : profitez-en !
NOUVEAUTÉ :
Avec le nouvel éditeur de style Jimdo, vous pouvez personnaliser le style de votre navigation : Couleur de fond, de texte et choix de police indépendamment du reste de votre contenu. En savoir plus

CONTENU


Pensez votre page d'accueil comme une couverture de magazine et vos différentes pages comme la suite logique annoncée dans cette couverture. Il vous faut travailler vos pages pour les rendre les plus impactantes et cohérentes possibles !

Titres

Inclure un titre 1 au début du contenu de chaque page et sous-page est un impératif pour la clarté de votre site. Cela aidera vos visiteurs à comprendre le sujet de la page et leur permettra ainsi de savoir si elle propose bien les informations qu'ils recherchent.

Textes

Répartissez votre contenu de texte de manière homogène, et évitez d'utiliser des blocs de textes compacts. Les visiteurs auront alors tendance à lire plus de contenu texte, car cela sera plus agréable. Si le design que vous avez choisir est plutôt large, vous pouvez également aérer votre texte en utilisant deux ou trois colonnes.

Images

Si vous utilisez des images au format paysage, faites en sorte qu'elles couvrent toute la largeur de votre page. Pour les images au format portrait, le mieux sera peut-être de les insérer dans une colonne et d'ajouter du texte ou une autre image à côté pour éviter les espaces vides.

Colonnes

Répartissez votre contenu sur plusieurs colonnes pour lui donner un aspect plus dynamique. Vous aurez besoin d'être un peu perfectionniste : par exemple si vous utilisez trois images dans trois colonnes, assurez vous qu'elles aient la même taille.

Voici un résumé de ces conseils :

  • votre page d'accueil donne un bon aperçu général de votre site ;
  • chaque page traite d'une thématique précise et unique ;
  • des titres de rang 1, 2 et 3 structurent vos pages et aident vos visiteurs à trouver facilement ce qui les intéressent sur la page ;
  • de nombreux liens internes invitent vos visiteurs à consulter plusieurs pages ;
  • votre contenu est aéré et illustré.
NOUVEAUTÉ :
Le module colonne, très pratique pour structurer votre contenu, a été entièrement repensé avec la nouvelle interface. En savoir plus

Exemple à NE PAS suivre

Exemple à suivre

Design Riga
Design Riga

BAS DE PAGE / SIDEBAR


Sur tous les sites Jimdo, il y a des parties fixes, qui ne peuvent être supprimées et qui se retrouvent sur toutes les pages : La sidebar (zone présente sur le côté  ou en bas de votre page ) et le bas de bas. Ces deux zones se retrouvent sur toutes les pages de votre site Jimdo et ont une utilité : permettre à vos visiteurs d'accéder à des informations clés, et ce quelque soit l'endroit où ils se trouvent sur le site.

Vous pouvez par exemple utiliser ces zones de contenu afin de communiquer vos informations de contact, ou mettre en valeur les fonctionnalités de votre site permettant le partage sur les réseaux sociaux. Vous pouvez aussi y afficher vos horraires d'ouvertures. Ces informations seront affichées sur toutes vos pages : rélféchissez bien à ce qui est le plus important. Si votre design comprend une sidebar en bas de page, vous pouvez utiliser cette zone comme un footer/bas de page.

NOUVEAU
Avec le nouvel éditeur de style Jimdo, le style de la sidebar et du bas de page sont personnalisables indépendamment du reste : Couleurs et police d'écriture. En savoir plus

DES IDÉES POUR VOUS INSPIRER 


Les exemples ci-dessous montrent des pages d'accueil mais la structure peut tout à fait être reproduite sur d'autres pages de votre site. De même pour les designs : ces exemples d'organisation du contenu sont réalisables avec tous les designs Jimdo.

Services ( design Dubai )


Portfolio (design Shanghai )


E-boutique (design Zürich)



Justine perussel,

blogueuse pour la communauté


Ces articles peuvent aussi vous intéresser :



Commentaires : 31 (Discussion fermée)
  • #1

    jeremy renault (mercredi, 10 septembre 2014 11:04)

    Merci Jimdo :-)

  • #2

    THAMEUR (mercredi, 10 septembre 2014 11:15)

    bonjour,
    SVP, j'ai deux question :

    1- comment ajouter une fenêtre de recherche (par mot, nom, titre et code de produit) qui s'affiche automatiquement en haut de chaque page. j'ai un catalogue de plusieurs milliers de produits et cette fonctionnalité facilite beaucoup la navigation et la recherche pour les visiteurs de mon site.

    2- comment ajouter des produits en masse: fichier Excel

    merci beaucoup

  • #3

    Erika (mercredi, 10 septembre 2014 12:13)

    site relooké !!
    merci Jimdo ;)

  • #4

    Équipe Jimdo (mercredi, 10 septembre 2014 12:14)

    Bonjour @THAMEUR, pour insérer une barre de recherche, l'équipe Jimdo vous recommande l'outil Swiftype. Voici comment l'installer : http://aide.jimdo.com/outils/tutoriels/swiftype-1/

    Concernant vos produits, vous ne pouvez pas les insérer automatiquement en masse. Il vous faut nécessairement créer chaque fiche produit manuellement. Jimdo est une plate-forme de création de sites qui n'est pas adaptée pour les e-boutiques qui possèdent des millier de produits.

  • #5

    joailettes35 (mercredi, 10 septembre 2014 13:03)

    Merci
    J'ai appliqué votre méthode pour la navigation - regroupement de thèmes - les textes sont courts en général - les titre significatifs, je pense !!!! ... mais peut-être encore du boulot à faire Qu'en pensez-vous ?
    Je continue de suivre vos conseils

  • #6

    aloeverasante (mercredi, 10 septembre 2014 19:15)

    j'aurais bien voulu revoir toute ma navigation et faire des menus déroulants c'est tellement mieux, mais le soucis c'est que les zones a mot de passe apparaissent aux yeux de tous ... :(
    :( :( :(
    quand est ce que ce problème sera réglé ?
    merci de me répondre par email, car j'attends avec impatiente !

  • #7

    countrydancertiags64 (mercredi, 10 septembre 2014 22:59)

    J'ai changer mon design, pour un nouveau avec menu déroulant, j'attendais ça avec impatience je m'aperçois que ça ne fonctionne pas avec avec ma tablette, le menu n'est pas déroulant nous n'avons donc pas accès à toutes les pages. Vais-je devoir revenir à un ancien design, ou tout du moins ne pas choisir avec menu déroulant ?
    Ce serais vraiment dommageable pour moi. Car il me semble qu'avec un menu déroulant si je fais ça bien les personnes qui consulte le site auront plus de facilité à trouver ce qu'ils cherchent.

  • #8

    Équipe Jimdo (jeudi, 11 septembre 2014 09:45)

    Bonjour @aloeverasante, nous vous tenons informé au plus vite !

    Bonjour @countrydancertiags64, les menus déroulants ne sont effectivement pas optimaux pour les mobiles. Ce n'est pas le propre de Jimdo, mais de tous les sites internet ayant des menus déroulants. (Le principe d'un menu déroulant étant de déplacer la souris sur les onglets qui s'ouvrent au fur et à mesure et non de cliquer comme on le fait sur nos téléphones et tablettes. C'est l'une des raisons pour laquelle nous ne souhaitions pas nécessairement les proposer au départ. Aujourd'hui nous préférons donner le choix aux utilisateurs mais la question de l'usabilité demeurera toujours. De plus, cette non praticité est accentuée sur les tablettes, car celles-ci ne disposent pas d'une version mobile différente mais reproduit à l'identique la version ordinateur de votre site. Si vous savez que vos visiteurs accèdent davantage à vos pages via leur mobile et non leur ordinateur, alors effectivement, le mieux est d'opter pour un menu non-déroulant.

    Bonne journée à tous !

  • #9

    mptmap (vendredi, 12 septembre 2014 18:11)

    Bonjour,

    je n'arrive pas a otenir des cadres de couleur pour mes textes ni de lignes d'espace entre les textes?
    merci

  • #10

    marievphotography (lundi, 22 septembre 2014 11:36)

    Bonjour,

    Comment fait-on pour que, dans chaque zone du portfolio (portaits, paysages,..) n'apparaissent dans la galerie QUE les photos en fonction du thème, et pas toutes les photos qui sont ajoutée? Je n'comprend pas ! Merci d'avance,
    Marie

  • #11

    Équipe Jimdo (lundi, 22 septembre 2014 15:15)

    Bonjour @marievphotography,

    Je ne suis pas sur de comprendre votre question... Si vous souhaitez créer des galeries par thèmes, créez un élément galerie pour chaque thème, et chargez y seulement les images se référant à ce thème, et non toutes vos images. Vous pouvez insérer autant de page et d'éléments galerie d'images que vous le souhaitez. Vous trouverez plus d'informations sur ce sujet en consultant cette page de notre aide en ligne : http://aide.jimdo.com/basiques/%C3%A9l%C3%A9ments/galerie-d-images/ .

    Attention cependant : actuellement, la galerie sur votre site est dans la sidebar de votre site : une zone qui est soit sur le côté, soit en bas de votre page, et qui reste la même d'une page à l'autre. Cette zone sert à insérer les informations primordiales de votre site, celles que tout visiteur doit pouvoir trouver facilement, comme par exemple : comment vous contacter pour un devis si vous proposez des séances photo pour particuliers. Vous trouverez plus de détails concernant cette fonctionnalité en vous rendant à la page suivante de notre rubrique d'aide : http://aide.jimdo.com/basiques/pr%C3%A9sentation/ .

    Jérémie

  • #12

    charlottebarrault (samedi, 27 septembre 2014 08:05)

    Bonjour,
    comment adapter le format de mon image de fond au format de mon en tete ?
    Merci beaucoup
    Charlotte

  • #13

    Équipe Jimdo (lundi, 29 septembre 2014 11:41)

    Bonjour @charlottebarrault,

    Je ne suis pas sur de bien vous comprendre... Avec votre design, votre image de fond et votre image d'en-tête sont à priori la même image.

    De plus, je ne suis pas sur que Zurich soit le design le plus adapté à votre site. Avez vous essayé notre index des designs ? C'est un super moyen d'avoir une vue d'ensemble de tous les designs que nous proposons. Vous le trouverez à cette adresse : http://aide.jimdo.com/mise-en-page/index-des-designs/ .

    De plus, n'hésitez pas à contacter notre service de support sur cette page : http://aide.jimdo.com/contact/jimdopro/ . Le dialogue sera plus simple par e-mail.

    Bon début de semaine !

    Jérémie

  • #14

    relooking-interieur-immobilier (samedi, 01 novembre 2014 11:11)

    Bonjour,
    Est-il possible d'insérer une image dans la page sous forme de bandeau afin qu'elle a paraissent sur toute la largeur du site?

    Mille mercis

    Christine R.

  • #15

    Équipe Jimdo (lundi, 03 novembre 2014 09:32)

    Bonjour,

    Oui, cela est possible avec certains designs qui laissent apparaître votre fond personnalisé sur toute la largeur de la page, comme par exemple le design "Zurich". Choisissez ensuite vos fonds personnalisés via la rubrique "Fonds Personnalisés" du menu style.

    Cordialement,

    L'Équipe Jimdo

  • #16

    chodoudous (jeudi, 20 novembre 2014 12:26)

    Bonjour,
    peut-on connaître les dimensions exactes du fond personnalisé du design Zurich de sorte que les images soient bien cadrées? Merci

  • #17

    Équipe Jimdo (jeudi, 20 novembre 2014 13:54)

    Bonjour @Chodoudous, voici les dimensions de l'image de fond : 2000 x 1500 px

  • #18

    Mathilde (samedi, 13 décembre 2014 20:56)

    Bonjour ! J'ai un petit soucis, les premiers articles que j'ai créés n’apparaissent plus sur mon blog Jimdo... (ils ne sont pas en mode "projet") je ne comprends pas ...

    Cordialement

    Mathilde

  • #19

    Équipe Jimdo (lundi, 15 décembre 2014 10:48)

    Bonjour @Mathilde, le blog s'affiche par défaut sur votre page d'accueil mais vous pouvez tout à fait supprimer cet affichage et publier ensuite sur la page que vous souhaitez.
    Pour ce faire, rendez-vous sur la page en question > Ajoutez un module "Affichage du blog".
    N'hésitez pas à nous contacter via le support pour obtenir de l'aide et voici les pages d'aide référentes :http://aide.jimdo.com/blog/activer-le-blog/

  • #20

    desnomsdanslapierre (dimanche, 01 février 2015 10:40)

    Bonjour,
    J'ai créé une nouvelle page nommée "Vougy". Son contenu est apparu en même temps sur la page d'accueil. J'en ai créé une autre nommée Charlieu: Dans celle-ci figure également le contenu de la page Vougy. S'agit-il d'une mauvaise manipulation de ma part ou d'un "bug" du site?
    merci beaucoup de votre réponse.
    Thierry Duperret

  • #21

    Équipe Jimdo (lundi, 02 février 2015 09:51)

    Bonjour @desnomsdanslapierre.
    Chacun de nos designs comprend ce que l'on appelle une zone "sidebar". L'utilité de cette zone est justement de reproduire les informations qu'elle contient sur chacune des pages de votre site, les gens s'en servent principalement pour communiquer leur coordonnée, ou chaque information importante. Dans votre cas, cette sidebar se trouve en bas de page, dans le deuxième encart.

    Pour éviter cela, je vous invite donc à remonter les informations dans le premier bloc de la page dédiée à Vouguy.
    De cette manière, l'élément que vous insérez sera ainsi uniquement présent sur la page concernée.

    Vous trouverez plus d'informations sur cette vidéo : http://youtu.be/Q_g8oxYGQR0

    Bonne journée.

  • #22

    Grand (vendredi, 06 février 2015 09:19)

    Bonjour,
    Comment je fais pour réorganiser la liste produits que j'ai mise sur mon site jimdo sans les récréeer ?

  • #23

    Équipe Jimdo (vendredi, 06 février 2015 12:18)

    Bonjour @Grand, pourriez-vous envoyer un email au support. Il sera plus simple pour nous de regarder votre site et vous guider dans vos modifications. Merci !

  • #24

    DREAN (lundi, 09 février 2015 18:01)

    Bonjour,
    Quelles doivent être les dimensions de l'image d'arrière plan pour le design "Hong Kong" et quelles doivent-être les options choisies pour un fond qui s'adapte à tous type de terminal et à tous types de navigateur web ?
    Si je vous demande cela c'est parce qu'à l'ouverture du site sur différent client web ou sur d'autres terminaux, cet arrière plan est mal centré ou trop grand, etc,...
    Merci Jimdo !!!!!!

  • #25

    Équipe Jimdo (mardi, 10 février 2015)

    Bonjour @DREAN, vous trouverez sur cette page d'aide les dimensions optimales pour votre image de fond : http://aide.jimdo.com/basiques/questions-fr%C3%A9quentes/quelle-est-la-taille-optimale-pour-les-images-et-les-fichiers-utilis%C3%A9s-sur-mon-site/
    Bonne journée.

  • #26

    kinomichi (lundi, 23 février 2015 14:57)

    Je n'arrive plus à insérer un lien vers texte ou autre . L'icone nécessaire (comme une petite chaine) n'est plus fonctionnelle...Elle l'a été.
    pouvez vous m'aider

  • #27

    Équipe Jimdo (lundi, 23 février 2015 15:01)

    Bonjour @kinomichi, après vérification, l'icône est bien fonctionnelle comme le montre cette capture d'écran : http://screencast.com/t/j1OJSlzjDz

    Pourriez-vous contacter le support svp ? Afin que vous puissiez nous en dire davantage sur le problème et que l'on regarde de plus près ? Merci.

  • #28

    de Saint Jores (mercredi, 26 août 2015 12:47)

    Bonjour,
    J'ai créer un site pour mes cours de SVT. Je me permet de vous écrire car j'aimerai connaitre le design qui me permettrait d'afficher mes sous-menus uniquement lorsqu'on clique sur le menus.

    Mes menus concernent les niveaux de mes classes et les sous menus concernent les titres chapitres. J'aimerais par exemple que mes élèves cliquent sur 6e, une page se chargent en proposant les sous-menus et là, il pourront choisir le chapitre à travailler.

    Je vous remercie par avance.
    Cordialement

    Mme de Saint Jores

  • #29

    JimdoFrance (mercredi, 26 août 2015 14:28)

    Bonjour,

    actuellement, vous utilisez le design Barcelone qui a effectivement une navigation avec des menus déroulants.
    Pour ce que vous souhaitez faire, il vous faut une navigation dîte "classique". Voici quelques designs que nous vous recommandons : Hambourg, Bordeaux, Rio de Janeiro, Madrid, Verona...il y en a 19 en tout.
    Pour les connaître tous, rendez-vous sur notre outil index des designs : http://aide.jimdo.com/mise-en-page/index-des-designs/
    Et choisissez de voir apparaître les menus "normal" dans les options.
    Bonne journée. L'équipe

  • #30

    de Saint Jores (jeudi, 27 août 2015 19:59)

    Merci beaucoup :)

  • #31

    Edel (lundi, 14 septembre 2015 13:43)

    Je voudrai regrouper les articles de presse par année, alors qu'elles sont actuellement lisibles en continue



    merci