Ergonomie du forum

[Tunrida Astraani]

C'est le seul titre que j'ai trouvé... Il y est question, principalement, de la page d'index, qu'un certain nombre d'entre vous jugent trop encombrée.

Pour l'instant, les suggestions sont :
- mettre les différentes catégories dans des "tiroirs" : la page d'index ne comporterait plus que 8 liens, vers chacune des catégories : Salle commune, Bibliothèque, Actualités, Activités, Ressources, Projets, Discussions, Archives.
- si c'est techniquement possible, configurer ça sous forme de menus déroulants : en cliquant sur le titre d'une catégorie, l'utilisateur pourra étendre ou refermer la liste des sous-forums de celle-ci, ouvrir plusieurs listes en même temps, etc.

Je précise que pour l'instant, je n'en sais pas assez pour dire avec certitude ce qui est possible ou pas. Le débat est ouvert.

[Invité]

Je pense que ce serait effectivement plus pratique de masquer par défaut les sous forum en terme de lisibilité (et non d'ergonomie).

D'un point de vue ergonomie, nous n'avons pas les moyens de faire quoi que ce soir, l'application a été faite, et même si elle est plus ou moins paramétrable, on ne peut pas faire grand chose.

Par contre, on peut agir sur la clarté et la lisibilité. Et avoir les principales catégories d'un coup d'oeil, ca me parait pas mal pour ça (peut être ajouter une courte description de chacune d'elle pour éviter qu'on hésite entre deux)

[Gestionnaire du forum]

Des parties qui ce "déroulent" ... je sais pas faire.
Au pire y a toujours les histoires de "catégories" avec des sous forum dedans.

[Tunrida Astraani]

Ok, lisibilité, pas ergonomie.

Pour les menus déroulants, je sais pas si c'est possible ou pas, donc à voir (m'enfin, ça serait bien si c'était possible, je pense). Enfin, je pense que la mise en tiroirs des catégories sera plus simple a faire.

On va attendre d'avoir résolu l'aspect visuel avant de voir si il y a vraiment quelque chose à faire au niveau du rangement proprement dit. Si ça se trouve, si le forum est plus facile à utiliser, tout le monde se rendra compte qu'en fait, le rangement ne pose pas de problèmes.

[Invité]

Au pire on doit pouvoir mettre une page d'index en HTML + javascript.

[Läorä]

Après il me semble que le forum est propulsé avec Forums Actifs de Google donc y’a possibilité de créer un portail au moins avec les outils Forums Actifs. Après si d’autres savent programmer en java script ou HTML pourquoi pas proposer une version de portail qui permettrait de se diriger sur le forum. Si l’ergonomie Forums Actifs est simple les 2 autres options… J’m’y connais pas assez pour aider (HTML la base… Java script, hum c’est quoi ? de l’occultisme ? ^^).

Ensuite un simple index des forums (ou catégories chais plus comment ça se nomme ^^) programmé en HTML mit en widget (comme le widget « Dernier sujet ») qui existe déjà plus ou moins en widget personnalisé d’ailleurs… "Suffit" de changer les codes HTML ^^

[Tunrida Astraani]

Au passage, je signale qu'à la base, je m'y connais pas. Autrement dit, je vais me faire la main sur le forum dont Narmë m'a donné l'adresse ce week-end et apprendre sur le tas. Donc évitez les termes trop techniques^^"

[Gestionnaire du forum]

HTML, Java script meme moi Tun j'y touche pas^^

[Invité]

Le javascript est un langage de programmation embarqué coté client qui permet davantage de souplesse aux utilisateurs que le fameux "formulaire validé" qui est la seule moyen d'envoyer des informations HTTP au serveur.

Le Js peut être relativement simple en utilisant une bibliothèque (je me suis mise récemment a Jquery et jqueryUI) qui permettent de faire pas mal de choses sympas et sont simples à utiliser.

Ces bibliothèques sont hébergées par google, d'ailleurs, et on peut les utiliser juste en mettant un lien dans l'entête (ou même dans le corps de la page, même si c'est moins propre)

Après ça roule tout seul , tu intègre ton code JS entre des balises HTML nommées "script":

Code:

<script type="text/javascript">
$(document).ready(function(){
   $('#resultat').load('http://eu.battle.net/wow/fr/character/les-clairvoyants/daelysha/' #profile-wrapper);
});
</script>

ce petit code est une requête AJAX (asynchrone javascript and XML) qui permet de charger sur une page existante une partie d'une autre page (ici, cet exemple, c'est sur l'armurerie des nouveaux forums, charger l'élément contenant l'image de daelysha dans un élément nommé "Resultat" sur la page principale)


On peut également faire tout un tas d'effet visuels pour faciliter la navigation (un que j'aime beaucoup est celui ci : http://jqueryui.com/demos/accordion/ ), des animations, etc.

[Invité]

Je vous met une page (vu que j'avais creusé un peu le sujet) que j'avais commencé pour le forum du projet immersion. Il intègre un certain nombre d'éléments d'interface mais AUCUN css (enfin pas tout a fait, y'a le minimum pour la mise en page).

Donc pas de couleur, pas de joli effet, que le squelette et la disposition. Si vous voulez voir ce que ça donne, enregistrez le en tant que fichier texte en lui mettent une extension .htm et lancez votre navigateur internet dessus

Ou alors si on m'autorise à insérer du code HTML via le forum (mais c'est risqué après, ca veut dire qu'une personne mal intentionnée peut mettre des scripts de JS qui sont louches )

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head>
      <!-- appel des bibliothèques jquery depuis l'hebergement Google -->
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
      <!-- Feuille de style Jquery UI -->
      <style>
       
      </style>
      <!-- Définition de la feuille css -->
      <style>
        <!-- mise en page -->
        body{
            text-align:center;
        }
       
        #corps{
            width:90%;
            margin-left:5%;
            margin-right:5%;
        }
       
        #baniere{
            height:220px;
        }
       
        #pagePrincipale{
        }
       
        #menu{
            float:left;
            width:220px;
            height:100%;
        }
       
        #blocPrincipal{
            margin-left:223px;
            height:100%;
        }
       
        #blocPrincipal div{
            position:static;
            left:0%;
        }
       
        #navigation{
            margin-bottom:3px;
        }
       
        #campagneActuelle{
       
        }
       
        #contenu{
            clear:both;
        }
       
        #sectionGauche{
            height:100%;
            float:left;
            width:50%;
        }
       
        #finances{
           
        }
       
        #news{
       
        }
       
        #sectionDroite{
            height:100%;
            float:right;
            width:50%;
        }
       
        #historiqueCampagne{
       
        }
       
        #liens{
       
        }
       
        #piedDePage{
            clear:both;
        }
       
        .section{
            padding-top:0px;
            padding-bottom:0px;
            padding-left:0px;
            padding-right:0px;
            margin-left:0px;
            margin-right:0px;
            margin-bottom:0px;
            margin-top:0px;
        }
       
        .categorie{
            border-style:solid;
            border-width:1px;
            padding-top:0px;
            padding-bottom:0px;
            padding-left:0px;
            padding-right:0px;
            margin-left:0px;
            margin-right:0px;
            margin-bottom:0px;
            margin-top:0px;
        }
       
        <!--Fin mise en page-->
      </style>
      <!-- Scripts utilisant les bibliothèques chargées -->
      <script type="text/javascript">
        $(document).ready(function(){
            $("#news").accordion();
            $("#historiqueCampagnes").accordion();
        })
      </script>
  </head>
  <body>
      <div id="corps" class="section">
        <div id="baniere" class="categorie">
            <h3>Bannière</h3>
        </div>
        <div id="pagePrincipale" class="section">
            <div id="menu" class="categorie">
              <h3>Menu</h3>
              <p>du contenu</p>
              <p>du contenu</p>
              <p>du contenu</p>
              <p>du contenu</p>
            </div>
            <div id="blocPrincipal" class="section">
              <div id="navigation" class="categorie">
                  <h3>Navigation</h3>
              </div>
              <div id="campagneActuelle" class="categorie">
                  <h3>campagne actuelle</h3>
                  <p>du contenu</p>
                  <p>du contenu</p>
                  <p>du contenu</p>
                  <p>du contenu</p>
              </div>
              <div id="Contenu" class="section">
                  <div id="sectionGauche" class="section">
                    <div id="finances" class="categorie">
                        <h3>Finances</h3>
                        <p>du contenu</p>
                        <p>du contenu</p>
                        <p>du contenu</p>
                        <p>du contenu</p>
                    </div>
                    <div id="news" class="categorie">
                        <h3><a href="#">News numero 1</a></h3>
                        <div class="news">
                          <p>Une news qui contient des infos voire des images </p>
                          <p> du contenu </p>
                        </div>
                        <h3><a href="#">News numero 2</a></h3>
                        <div class="news">
                          <p>Une news qui contient des infos voire des images </p>
                          <p>du contenu</p>
                        </div>
                        <h3><a href="#">News numero 3</a></h3>
                        <div class="news">
                          <p>Une news qui contient des infos voire des images </p>
                          <p> du contenu </p>
                        </div>
                        <h3><a href="#">News numero 4</a></h3>
                        <div class="news">
                          <p>Une news qui contient des infos voire des images </p>
                          <p>du contenu </p>
                        </div>
                    </div>
                  </div>
                  <div id="sectionDroite" class="section">
                    <div id="historiqueCampagnes" class="categorie">
                        <h3><a href="#">Campagne 1</a></h3>
                        <div class="historique">
                          <p>Presentation d'une campagne </p>
                          <p>du contenu </p>
                          <p>du contenu </p>
                          <p>du contenu </p>
                        </div>
                        <h3><a href="#">Campagne 2</a></h3>
                        <div class="historique">
                          <p>Presentation d'une campagne </p>
                          <p>du contenu </p>
                          <p>du contenu </p>
                          <p>du contenu </p>
                        </div>
                        <h3><a href="#">Campagne 3</a></h3>
                        <div class="historique">
                          <p>Presentation d'une campagne </p>
                          <p>du contenu </p>
                          <p>du contenu </p>
                          <p>du contenu </p>
                        </div>
                        <h3><a href="#">Campagne 4</a></h3>
                        <div class="historique">
                          <p>Presentation d'une campagne </p>
                          <p>du contenu </p>
                          <p>du contenu </p>
                          <p>du contenu </p>
                        </div>
                    </div>
                    <div id="liens" class="categorie">
                        <h3>Liens utiles</h3>
                        <p>du contenu</p>
                        <p>du contenu</p>
                        <p>du contenu</p>
                    </div>
                  </div>
                  <div style="height:5px;clear:both;">&nbsp</div>
              </div>
            </div>
        </div>
        <div id="piedDePage" class="categorie">
            <p>Pied de page</p>
        </div>
      </div>
  </body>
</html>

[Tunrida Astraani]

Je ne sais pas ce que signifie "embarqué côté client", ni ce qu'est un "formulaire validé"... Sinon, on peut te donner temporairement des droits d'admin^^"

Enfin, je vais déjà voir si y'a pas une bête case à cocher dans le panneau d'administration pour simplement réduire les catégories.

[Gestionnaire du forum]

Bah la solution serais de reorganiser les sections de nouveau.
C'est le plus simple.

Sinon, faut passer par Js... et la bah je passe la main...

[Tunrida Astraani]

Non non. La discussion a été très claire là dessus, ce n'est pas un problème d'organisation, mais de présentation.

[Tunrida Astraani]

Bon ben, un premier test de fait, c'était juste une case à cocher, est-ce que ça vous convient ?

[Gestionnaire du forum]

hum...

[Invité]

Pour le coup, on parle de lisibilité (et d'ergonomie, pour de vrai, si on intègre des éléments de javascript)

Les deux exemples que j'ai donné ne sont pas innocents en vérité.

Imaginez qu'on fasse une page principale, avec un "accordion" (le style que j'ai link plus haut, qui permet, d'avoir plusieurs intitulés, et le contenu en cliquant de l'un a l'autre), dans lequel on fait une requete ajax pour charger une partie du contenu d'une page.

Plus concrètement, on met l'entête des catégories ("Salle commune", "bibliothèque", etc), et en cliquant dessus, on dévoile ce qui figure sur la page comme si on avait cliqué sur le lien et qui a été préalablement chargé en ajax.

Par exemple, on charge le tableau de cette page là :

http://forumlesclairvoyants.forumchti.com/salle-commune-c13/

dans le menu accordéon de "Salle commune". On gagne pas mal de place, en ne laissant "déroulé" qu'un menu.


Ca fait un peu le principe d'une barre de navigation. Sinon, y'a aussi la possibilité de faire une vraie barre de navigation, semblable au menu "démarrer" en javascript.

[Tunrida Astraani]

Euh...

Avant de partir dans des trucs compliqués, la modification que j'ai faite hier, vous en pensez quoi ?

[Invité]

Je peut ptet filer un coup de main de temps en temps.
J'ai crée le forum de la traque d'arthas sur forum actif et c'était très poussé.

Question de goûts, le bg qui se répète c'est pas top. Le fond uni vert c'est bien ^^

est-ce vraiment vital d'avoir les colonnes de droites ? La page du portail ne suffit-elle pas ?

Au passage, c'est un peut redondant le titre en double

[Tunrida Astraani]

Au niveau du fond, il y a déjà eu un sondage là dessus, qui s'est terminé hier, et il a été décidé de garder le même.

Et y'a pas de colonne à droite, elle est à gauche :p Et dedans, personnellement, je me sers uniquement du défilement des derniers posts, et du "qui est en ligne", à voir si d'autres utilisent les autres trucs...

Bref, pour l'instant, j'attends surtout des avis sur le fait d'avoir "contracté" les catégories, au lieu qu'on ait le détail de leurs sous-forums sur la page d'index...

[Invité]

Je trouve ca mieux, le regroupement des catégories, ca mange moins de place

[Contenu sponsorisé]