Vos avis sur le design du site d'une bibliothèque

Bonjour tout le monde !

Notre village possède une petite bibliothèque tenue par des bénévoles motivés, mais malheureusement, son taux de fréquentation est bien bas. Comme il n'y avait pas encore de site internet, je me suis dit que ce serait pas mal d'en faire un pour informer les gens et faire un peu de pub au passage (je précise que je suis un simple amateur).

Le site se veut donc
- informatif : il y a des gens qui ne connaissent même pas l'existence de la bibliothèque alors qu'ils payent des impôts pour en profiter.
- publicitaire : non les bibliothèques c'est pas ringard !

Le site n'est pas encore finalisé, mais je vous le présente déjà car j'aimerais déjà avoir un avis sur le design et l'ergonomie avant d'aller plus loin.

Les points qui posent déjà problème :
- les images sont trop lourdes et j'ai du mal à diminuer leur taille
- il y a peut être trop de typos différentes
- il serait bon de rajouter une troisième couleur (rouge et gris ça va un moment mais c'est quand même pas très gai)


Je suis sûr que vous trouverez des milliers de détails à changer, j'essayerais de les régler si j'ai du temps, sinon je ne modifierais que ce qui est crucial.

Merci pour le site et le forum qui m'ont été d'une grande aide.

Site de la bibliothèque
Modifié par quartdocre (26 Aug 2007 - 12:49)

bonjour ,

a écrit :

- les images sont trop lourdes et j'ai du mal à diminuer leur taille
- il y a peut être trop de typos différentes
- il serait bon de rajouter une troisième couleur (rouge et gris ça va un moment mais c'est quand même pas très gai)

Ben déjà tu as cerné pas mal de points posant "problèmes" ...
Concernant la typo, celle qui me gène le plus et celle utilisée en "background" et cette répétition des"types" d'ouvrages que possédent la bibliothèque ...

Franchement cet arrière-plan est assez ... ehhh ..."bof" !
Il faudrait peut-etre une typographie plus traditionnel au monde du livre (et non caligraphiée) et en gardant ce type de 'background' , un style d'impression en filigramme (ou filigrane) serait peu-être mieux( à voir ) ...

Effectivement l'ensemble est assez monochrome (mis à part la bannière mais qui augmente le coté "froid" par la valeur de sa teinte) .
Mais la mise en page du contenu me plait bien : simple et claire .
Ce serait plutôt la bannière qui paraît "vite faite" , avec juste ce dégradé sur l'image et le titre en rouge posé en travers

Le menu horizontal devrait etre un peu plus travaillé également (pour donner vie à la page) et éviter un lien aussi long que "horaire &localisation&contact" ... voir pour un titre de lien plus générique alors ...

Je garderais le contenu tel quel pour l'instant en " habillant " le reste ...( une couleur chaude plutot qu'une couleur froide , un menu plus travaillé, un arriére plan plus "discret")

Voilà les idées qui me viennent ..
bon courage

Ps: concernant le texte de la page d'acceuil , justement j'acceuillerais les visiteurs avec un message de bien-venue , plutot qu'un texte expliquant d'où proviennent les livres ...ect
"Bienvenue dans Votre bibliothéque en ligne ..." (en valorisant les visiteurs )
"Chaque mois nous vous proposons ....ect "
Leur proposer les Livres ou romans par thémes ,avec la partie nouveauté plutot en première page ..."Le dernier Roman de "Victor Hugo" vient d'arriver ...

.. mais je m'emballe
Modifié par kzone (12 Mar 2007 - 03:40)

Salut,

Je trouve que le site est visuellement assez intéressant, même s'il mériterait d'être enrichi, car pour l'instant il donne quand même une impression d'inachevé.

Le point fort à mon sens est la gestion de la typo, que je trouve graphiquement plutôt élégante au niveau du contenu. Ceci dit il y a pour l'instant peu de contenu, mais ça donne une idée de ce que cela pourra être plus tard.

Le point faible est l'ambiance très austère donnée par tant de blanc, paré d'un bleu et d'un rouge assez ternes. Ceci est renforcé par le manque de visuels.

Petite chose à corriger, qui ne nécessitera pas trop d'efforts, ton site est un poil trop large, en 800x600 il est affublé d'une barre de défilement horizontale inutile et gênante compte tenu du peu d'espace dont disposent déjà les gens qui surfent en cette résolution.

Le fond du site est à mon sens à refaire, car il n'apporte rien, on se doute bien qu'il y a des livres dans une bibliothèque... Comme en plus il est blanc, dans le même ton que le reste du site, il devient un peu trop présent, surtout en grande résolutions. AMHA, tu devrais essayer une couleur un peu plus sombre,ce qui ferait ressortir le contenu, et peut être un motif différent ou du moins remanié de sorte qu'il ait l'air moins répétitif. Attention, quand je parle de couleur plus sombre je ne parle pas forcément de noir, il y a beaucoup de degrés entre le blanc et le noir, à toi de choisir le bon.

Là où le site pèche, c'est au niveau de la bannière et du menu. La photo est assez peu flatteuse, j'ai l'impression de voir quelques vieux bouquins sur un étalage de bouquiniste plutôt qu'une bibliothèque. Le titre est placardé dessus assez brutalement. Attention à une chose, la valeur de gris du rouge et la valeur de gris du bleu de la photo sont trop proches, et la lisibilité du début du titre est moins évidente.

Le menu est quand à lui à revoir totalement, car il est lourd et peu compréhensible. Le lien "Horaires & localisation & contact" est long pour le peu d'informations qu'on y trouve. Il suffirait d'appeler çà "informations pratiques", ou quelque chose dans le genre, çà serait plus clair. Ou alors faire un lien indépendant par chacune des 3 rubriques appelées sur cette page, donnant alors accès à des pages spécifiques.

Le plan d'accès mériterait d'être remanié graphiquement, pour être dans les tons du site. La grosse flèche noire donne l'impression que la bibliothèque va nous tomber sur la figure si on s'aventure au bout de cette impasse.

Il n'est pas possible de contacter un quelconque responsable du site ou de la bibliothèque par mail ou par formulaire de contact, je trouve ça un peu étrange.

Si je parcours ton code, je vois que tu as mis la date de chaque article dans un titre h4. Pourquoi ? Je ne vois pas l'intérêt de rendre cette information si importante. De plus, comme la date se situe avant le titre qui la suit, dans l'ordre du code, on a h1, h2, h4 puis h3. Ce qui n'est pas dans la logique de titrage de ces balises.

Tout d'abord merci beaucoup pour toutes ces réponses

J'avais oublié de le dire dans le premier message : en effet il n'y a aucun moyen de contacter un responsable du site ou de la bibliothèque car il n'y a tout simplement aucun responsable du site (je ne fait que le mettre en oeuvre, je n'aurais pas assez de temps libre pour le suivi), et les bibliothéquaires sont dans le même cas : pas assez de temps pour répondre aux mails, enfin ponctuellement si, mais rien de certain sur le long terme, or quand on met en place un service, c'est pas terrible d'annoncer le lendemain qu'on ne peut plus l'assurer. Je sais que c'est très minimaliste mais mieux vaut peu que rien du tout (enfin c'est mon avis)

Pour l'horrible lien "Horaires & localisation & contact", je ne comptais pas séparer les 3 éléments. Il vaut mieux que les gens aient toutes les infos sous les yeux que de devoir aller chercher les infos sur plusieurs pages. Mais je suis d'accord, le nom doit être changé.

Pour le plan d'accès, c'est temporaire, je compte aller à la mairie voir s'ils n'en ont pas un tout fait (solution facile héhé)

Pour la largeur du site, j'avais mis 770px car j'avais cru voir quelque part que c'était la bonne taille pour le 800*600, mais donc en fait lefaudrait réduire un peu, je prend note.


Vous m'éclairez pas mal sur le fond du site. Pour le moment je n'avais eu que les réactions de mes proches, et comme je m'en doutais un peu, ils n'étaient pas très objectifs

Par contre je ne vois pas ce que vous entendez par "filigrane" je croyais que c'était déjà l'effet présent. Vous les réalisez comment ?
Pour la police, j'avais peur que si le fond aussi était écrit en Times, Arial, Verdana et autre ça renforcerais le côté froid déjà trop marqué.

Par contre il me semble que vous avez deux avis différents sur le fond : plus discret pour kzone, et plus voyant pour Mikachu, ou alors j'ai mal compris.

Sinon oui, la bannière est un peu vite faite, mais j'ai pas trop d'idées et je ne sais pas vraiment utiliser les logiciels de dessin

En fait ma grande difficulté c'est que j'ai du mal à donner un air sérieux tout en ne tapant pas dans le froid et l'austère...

Pour le h4, je prend note, il faut mettre un span à la place ?

Ne vous inquiétez pas si vous ne voyez pas de changement immédiat, je n'aurait le temps de le faire que le week end prochain, mais j'essayerais de suivre vos remarques.

encore une fois Merci beaucoup
Modifié par quartdocre (12 Mar 2007 - 22:34)

quartdocre a écrit :
Pour le plan d'accès, c'est temporaire, je compte aller à la mairie voir s'ils n'en ont pas un tout fait (solution facile héhé)

Il sera toujours mieux si tu le refais toi même, au couleur et graphisme de ton site.

quartdocre a écrit :
Pour la largeur du site, j'avais mis 770px car j'avais cru voir quelque part que c'était la bonne taille pour le 800*600, mais donc en fait lefaudrait réduire un peu, je prend note.

Normalement ça doit passer, c'est bizarre. Enfin sinon si tu mets 760, c'est sur. J'ai pas regardé dans le détail, c'est peut être un élément qui dépasse du conteneur qui provoque l'apparition de la barre de défilement.

quartdocre a écrit :
Par contre il me semble que vous avez deux avis différents sur le fond : plus discret pour kzone, et plus voyant pour Mikachu, ou alors j'ai mal compris.

Tu as en effet mal compris, ou alors je me suis mal exprimé, je trouve aussi que le fond est trop présent, déja car il est blanc comme le site, et que les mots sont très présent car assez gros. Ils sont visuellement presque aussi importants que le contenu. Il faut faire en sorte que le fond reste un fond, et que le visiteur focalise sur l'intérêt du site, à savoir son contenu.

quartdocre a écrit :
Pour le h4, je prend note, il faut mettre un span à la place ?

Si tu veux, mais c'est un élément en ligne, donc tu seras certainement obligé d'avoir quelques manips pour gérer l'espace autour. Un paragraphe, qui est un élément block fera mieux l'affaire, car il ne te restera qu'à régler tes marges.

Mais tout de même, pour la date, je vois assez mal un paragraphe car en terme de sens un paragraphe reste un élément de plusieurs lignes pour moi. Pour le moment j'ai mis un span avec display:block...

Pour la largeur, j'ai coupé à la tronçonneuse : 750px

Mhhh pas facile de faire un joli plan (là c'est un screenshot de google maps)

ça y est, j'ai enfin compris ce que tu voulais dire pour le fond (je comprend vite mais faut m'expliquer longtemps ) Mais là aussi je sens qu'il va y avoir du boulot... Selon vous, si le fond n'est plus blanc, il vaut mieux que les écritures soient plus claires que le fond ou légèrement plus sombres ?

quartdocre a écrit :
Mais tout de même, pour la date, je vois assez mal un paragraphe car en terme de sens un paragraphe reste un élément de plusieurs lignes pour moi. Pour le moment j'ai mis un span avec display:block...

Si tu préfère, rien ne t'oblige à utiliser le paragraphe si ça ne colle pas à tes convictions. Je te dis comment moi je fais, libre à toi de faire tes propres choix en fonction de ta perception de la sémantique du html.

quartdocre a écrit :
Pour la largeur, j'ai coupé à la tronçonneuse : 750px

Autant n'était pas nécessaire, mais c'est un choix qui t'appartient malgré tout

quartdocre a écrit :
ça y est, j'ai enfin compris ce que tu voulais dire pour le fond (je comprend vite mais faut m'expliquer longtemps ) Mais là aussi je sens qu'il va y avoir du boulot... Selon vous, si le fond n'est plus blanc, il vaut mieux que les écritures soient plus claires que le fond ou légèrement plus sombres ?

Sincèrement on s'en fout, c'est ton esthétique personnelle qui y répondra. L'important étant surtout que le contraste entre les deux soit assez minimal, bien plus que le contraste entre le fond du contenu de site et le contenu. Car c'est ça qui prime, le contenu !

J'ai un peu tout changé (enfin ce qui était rapide à faire ), c'est assez radical : du times pour le titre et le menu, les sous titres et le menu en small-caps, et bye-bye le rouge terne, pour une couleur plus dynamique
Mieux ? ou pas du tout ?

Comme je n'ai pas beaucoup de recul par rapport au design de sites, j'experimente un peu tout, donc je m'excuse si vous trouvez que le design change trop souvent.

C'est mieux à mon avis. Plus lisible. Par contre, si tu agrandis la taille de typo, le titre va plus sur la gauche et devient illisible en rouge sur bleu, car ce sont des couleurs de même valeur. De même valeur signifie qu'optiquement elles correspondent au même gris. L'oeil a du mal à faire la différence, et ne peut donc pas lire le texte.

Oui en effet, le titre devient peu lisible dès que l'on augmente la taille. Mais je ne vois pas trop comment faire tant que je n'aurais pas changé le bandeau
(mais pas d'inquiétude, aucun lien ne pointe sur le site à part sur ce forum, donc pas encore de vrais visiteurs)


J'ai tenté de changer un peu le fond en allant dans les tons pêche clair. Le design retrouve de la chaleur et les filigranes sont moins visibles j'espère, mais j'ai comme la sensation que ça fait un peu mal aux yeux, et je ne peux pas vraiment faire plus sombre.

Et moi qui disais que je n'allais pas y toucher d'ici ce week end Une vraie drogue le CSS

En tout cas, merci pour toutes ces réponses

Bonsoir,

Apparement les couleurs de mon écran sont très éloignées de la réalité, j'ai trouvé le fond carrement moche sur d'autres ordis.

Mais comme vous l'aviez dit, de toute façon il n'allait pas.

Donc j'ai tout simplement mis une couleur unie.

J'ai refait aussi la banière qui était moche. Mais du coup je suis un peu déçu de revenir dans les designs, certes très beau, mais un peu trop à la mode ces temps ci avec une photo macroscopique de végétal (une fleur de nénuphare en l'occurence). Le problème de la taille est toujours d'actualité : 27ko pour la banière, mais c'est le seul élément graphique.


Je suis toujours en attente de remarques sur le site, ce n'est qu'en faisant des erreurs qu'on apprend

quartdocre a écrit :
une photo macroscopique de végétal (une fleur de nénuphare en l'occurence).

Salut quartdocre ,

heu, pourquoi un une fleur de nénuphar en fait ? Ca a un rapport avec la littérature ou quoi ? Enfin bon, peut-être qu'il y a vraiment un rapport .

Sinon, ben c'est vrai que comme ça, le design du site change énormément par rapport à la toute première version.

Ah oui, j'ai testé avec les navigateurs suivants, tout s'affiche très bien dans FF, Netscape, Opera, IE 6 et 7 sauf dans le 5, tu as un petit problème de positionnement avec ton titre <h3> et ta balise <span>, voici une image pour te montrer :



Maintenant, bon, je sais que c'est un peu normal d'avoir quelques problèmes parce que le positionnement dans IE 5 c'est souvent un peu foireux

Bonsoir touvert

Hum, pour la fleur de nénuphar, très bonne question, oui en effet ça a un lien avec la littérature, enfin presque, quoique si, en fait non, mais peut être que ... finalment, non aucun lien
Je n'avais vraiment aucune idée de bannière, j'avais bien quelques photos de la bibliothèque mais elles ne me convenaient vraiment pas. A côté de ça trainaient les photos de cet été, et puis je me suis dit pourquoi pas. L'effet est simple à réaliser, plus esthétique, habillant, et reposant pour les yeux. (et après tout, quel est le rapport entre la bannière d'Alsacréations et les standarts du web mis à part le sentiment perçu qui colle avec l'image de l'entreprise ?)

touvert a écrit :
Sinon, ben c'est vrai que comme ça, le design du site change énormément par rapport à la toute première version.

Si j'ai soumis mon site à vos critiques, c'était bien pour aller dans ce sens C'est une vrai chance d'avoir un avis extérieur quand on a le nez rivé sur ce qu'on est en train de faire.

touvert a écrit :
Ah oui, j'ai testé avec les navigateurs suivants, tout s'affiche très bien dans FF, Netscape, Opera, IE 6 et 7 sauf dans le 5, tu as un petit problème de positionnement avec ton titre <h3> et ta balise <span>

Merci pour tous ces tests. J'ai aussi constaté un énorme problème d'affichage sur IE5 MAC (avec l'ancien design, je ne sait pas ce qu'il en est du nouveau) : rien mais alors absolument rien ne s'affichait correctement. En même temps, je préfère passer du temps sur des problèmes d'accessibilité (s'il y en a) plutôt que sur des problèmes de navigateurs peu utilisés car dans ce dernier cas, la personne a plus facilement la possibilité de changer Mais c'est vrai que la superposition du h3 et du span donne un résultat illisible...

D'ailleurs une bonne partie des visiteurs de la bibliothèque sont des personnes du club du troisième âge du village. En terme de besoin, il s'agit surtout de taille de caractère et de navigation clavier non ? Il faudra peut être que je songe à rajouter l'augmentation de la taille de caractère directement sur le site ?

Re,

quartdocre a écrit :
(et après tout, quel est le rapport entre la bannière d'Alsacréations et les standarts du web mis à part le sentiment perçu qui colle avec l'image de l'entreprise ?)

Oui, c'est vrai

a écrit :
Il faudra peut être que je songe à rajouter l'augmentation de la taille de caractère directement sur le site ?

Ah ben logiquement c'est toujours un plus, surtout avec le type de public visé.

quartdocre a écrit :
(et après tout, quel est le rapport entre la bannière d'Alsacréations et les standarts du web mis à part le sentiment perçu qui colle avec l'image de l'entreprise ?)

Et surtout si on te demande, t'as rien vu, tu sais rien... regarde le bout de cet appareil... *FLASH* Bon tout ce que tu as vu n'était qu'un éléphant qui tenait un singe par la trompe et qui l'emmenait au musée du Louvre pour voir l'exposition saisonnière...