En ligne · Standard · [ Linéaire+ ] Rech. Ex. Interfaces Site Infos Croisées En Php

[Sha]

Je me suis lancé dans un projet qui m'intéresse beaucoup. C'est juste un test, je ne sais pas si je serais capable de le mener à bout, mais enfin on aura au moins une maquette.

Je recherche actuellement des exemples/idées de mise en page / interface. Voilà un descriptif du bidule :

L'objectif du site est de fournir une somme de référence dans un domaine précis. Ce domaine recouvre une série de procédures, et plusieurs thématiques transversales interviennent (j'espère être compréhensible). S'y rajoutent des informations utiles de type glossaire, biblios, contacts, liens.

Après une mémorable séance de brainstorming avec les membres de l'équipe, nous sommes arrivés à conseptualiser le truc sous la forme d'un gros tableau à double entrée, avec en ligne les différentes étapes de la procédure principale, et en colonne les thématiques transversales. A chaque cellule correspond donc un morceau d'information.

L'idée centrale de l'organisation du site va être que chaque cellule du tableau sera matérialisée par une fiche, stockée dans une bdd. Pourquoi ce choix ? Tout simplement parceque l'on voudrait que les fiches reliées à celle affichée soient disponibles sous forme de liens dans l'interface, le tout dynamiquement généré selon l'endroit du site (la cellule du tableau), ainsi l'utilisateur a toujours sous les yeux les infos les plus utiles, sans avoir besoin de chercher au travers des 7-8 rubriques croisées du site.

Donc là je suis parti sur une organisation php/mysql, avec une table de fiches, une table de lien fiche/fiches, et des tables de styles pour le formattage de tout ça à la volée.

J'espère que vous voyez le truc :-) J'ai déjà vu des interfaces top délire futuristes en java3D, mais là j'en suis incapable et je crains que ce style soit trop éloigné de la volonté de pragmatisme et d'utilitarité du site.

Ma question (merci de me lire jusque là), c'est de savoir si vous connaissez ce genre de présentation de site, et si oui vos idées quant à l'ergonomie de l'interface idoine.

[Darhf]

Je sais pas si j'ai bien capté le truc, mais ça a l'air de se rapprocher d'un concept encyclopédique. Dans ce cas-là, il y a la bonne vieille méthode de mise en surbrillance de mots-clés.
ex : http://www.wikipedia.org/w/wiki.phtml?sear...ch=France&go=Go

Le tout étant d'associer une liste de mots-clés à une fiche et de transformer en lien les mots choisis.

L'avantage est que ça fait gagner de la place à l'affichage.

Sinon, ce qui se fait d'habitude, c'est l'affichage des liens vers les fiches concernées après le texte (avant c'est pas naturel), à la amazon :
ex : http://www.amazon.fr/exec/obidos/ASIN/B000...6094325-4399325 (voir "Les internautes ayant acheté ce DVD ont également acheté :")

La variante principale est de mettre ça dans une case/menu à gauche ou à droite du texte.

La dernière variante à laquelle je pense est la mise en page façon journal : Des encadrés posés au milieu du texte.

[Sha]

Ok Darhf merci de ta compréhension ;-)



Les fiches ne sont pas une grande quantité de plus ou moins lourdes infos peu reliées entre elles, comme dans une encyclo., mais plutôt des fiches organisées selon un flux principal que l'on peut saisir selon deux angles, avec en plus des fiches connexes de ressources (glossaires, lien etc.) qui gravitent autour. L'idée c'est que le visiteur du site, localisé devant une fiche du flux de procédure principal, puisse avoir à portée de main : les thèmes transversaux correspondants à la partie de la procédure où il se trouve, mais aussi les phases amont et aval de la dite procédure.

Sans oublier que les thèmes transversaux présentent aussi des fiches hors procédures, générales disons.

La première idée d'interface que j'ai, là, c'est une case centrale pour la fiche en cours, et un colonne gauche avec une liste dynamique de fiches reliées, voire une double colonne. La liste "les acheteurs de ce dvd ont également acheté" citée par Darhf ci-dessus rappelle cette idée.

[Guepi]

une idée de présentation :

[Darhf]

Ah wai, ton schéma il aide un peu mieux à comprendre

Je suppose que la logique est pas assez linéaire pour présenter un truc comme ça :

CODE

^                                       Theme A                                       Theme B                     ----------------------------------------                                     [Theme C] < - Etape1                                                         Etape2 ->                    ------------------------------------------                                       Theme D                                       Theme E                                             \/

[Sha]

Merci bien vous deux, c'est en effet ce type de layout qu'il faut que je teste. Je vais carburer dessus ce week-end, on verra ce que ça donne , encre faut-il animer tout ça.

[Guepi]

Je me rends compte que je n'ai pas précisé comment fonctionne cette interface que j'ai faite à l'arrache ( je suis pas graphiste )

• La barre de Titre ( Procédure A ) = le nom de la procédure principale
  
• La barre de sous-titres ( Etape1 > Etape 2 > Etape 3 ) = le listage de toutes les étapes de la procédure principale. [ en violet, ce sont les étapes déjà vues, en noir (sans lien) l'étape en cours, et en bleu les étapes à venir ]
  
• La barre de gauche contient les approffondissement possibles de manière tranversale ( Thème A, B et C ) ainsi que les ressources.
  
• La barre de droite contient les éléments d'approffondissement hors de la procédure principale.
  
• La partie centrale contient les informations de l'étape en cours de la procédure principale.
  

[Sha]

Guepi> oué c'est exactement ce genre d'exemples que je cherche, merci !
Pour l'instant je suis parti sur le codage du moteur de gestion des fiches et des liens, en php sur une bdd mySQL, ça commence à fonctionner pas trop mal (bonjour les requêtessur tables liées). Je vais voir avec la collègue qui va gérer le layout ce qu'elle en pense.

Je vous montrerai le bébé au finish =)