[ Intermédiaire ] Hens World

Bonjour !

Hens world est un projet porté par une petite bande d'amis depuis quelques années déjà. Il s'agit de proposer un site communautaire, intégré dans un univers fictif que nous avons mis en place ensemble. Un univers simple, aux allures fantastiques, mais tout à fait maniable.
Nous voulons faire grandir une galerie sur Hens aux media divers et variés (musique, dessin, vidéo , jeux vidéo, écriture, et autres) . La base des créations reste toujours l'univers proposé, mais l'écriture est polyphonique, c'est à dire que chacun pour y apporter une vision tout à fait différente, et parfois même en contradiction avec d'autres créations, c'est aux utilisateurs de choisir les interprétations qui leurs conviennent.

En ce qui concerne la forme de cette galerie, la navigation à l'intérieur du site se fait à travers une balade dans l'univers, c'est à dire sur les quatre villages qui composent le monde de Hens ( représentant chacun un élément et une saison). On peut les visiter, et découvrir les lieux qui y sont proposé, car c'est à l'intérieur de ceux ci que seront postée les créations. Chaque village propose aussi des éléments animés. Un système jour/nuit est installé, ainsi qu'en fonction de l'heure à laquelle on visite le village, différentes activités dans le village seront visible ( des jeunes à un bar le soir, un marché rempli le matin etc..). Enfin, nous proposons les prémices d'un côté rôliste pour les utilisateurs, en leur proposant d'intégrer un village, remplir un questionnaire qui va déterminer leur pouvoir, et ensuite s'il le souhaitent leur laisser la liberté de remplir ( ou non ) une fiche de personnage.


En savoir plus sur le projet:

Hens est à l'origine un univers créé par une de nos membres ( et graphiste principale, qui à réalisé les maps) à l'intérieur d'un forum RP que nous avons tous rejoint il y à déjà 4 ans. Le forum s'est mourut peut à peu, mais nous voulions continuer à faire vivre cet univers, cette communauté qui nous reliait. Dans notre jeunesse un peu folle l'idée d'un MMORPG nous à effleuré l'esprit, mais cette entreprise s'est, comme vous pouvez vous en douter, révélé complètement au delà de nos compétences. Cet après cet échec que ce concept nous est venu à l'esprit, vouloir proposer une forme beaucoup plus libre de création, car nous venions tous d'univers un peu différent. Nous retournons un peu à nos origines de forum, mais sous une forme plus libre et interactive. Depuis cette dernière idée, de nouvelles personnes nous ont rejoint sans avoir participé aux origines RP de Hens, séduits par le projet et par l'envie de faire vivre leurs créations.

Le site


Lancé le week end dernier, en V 0.1, le voici!

http://hens-world.fr/

C'est une release assez tôt dans le développement, il manque pas mal de features pour améliorer la navigation, mais il faut avant tout s'inscrire pour profiter au mieux des fonctionnalités du site, et surtout, pouvoir accéder aux créations des contributeurs.

On a aussi mit en place un forum, pour communiquer un peu plus facilement avec les utilisateurs. Dans la F.A.Q, il y a un début d'explication pour utiliser le site. On peut aussi rapporter les bugs et faire des retours sur le site, je vous invite donc à le faire

http://forum.hens-world.fr

Dans une version dans un futur proche, un tutoriel sera intégré pour faciliter la première visite du site.

Je n'ai pas encore reglé trop les mails, du coup le mail de confirmation du compte est pour l'instant envoyé dans vos spams

Technologies


En tant que développeur du site, je vais parler un peu des choix technologiques utilisés sur le projet. Pour le back-end, j'ai utilisé Wordpress, n'ayant pas une expérience folle dans ce domaine, pour avoir beaucoup de fonctionnalités accessibles dès le départ ( système de compte, article, bdd etc...). J'ai couplé Wordpress avec AngularJS, les deux étant reliés grâce à WP API 1.2.2.
Côté routine de développement, j'utilise LESS , jade et coffeescript et gulp pour faciliter l'écriture.

Objectifs:

Nous voulons dans un premier temps confirmer la validité d'un tel format. Sans être révolutionnaire, il regroupe beaucoup d'éléments différents et n'a pas vraiment de précédent, du moins à notre connaissance. Si l'expérience initiale se révèle concluante, nous voulons agrémenter au fil du temps le site de nouvelles fonctionnalités. Pour donner une liste non exhaustive de ce que nous voudrions vraiment ajouter:
- Un système de chat RP dans un bar, avec par exemples des actions en fonction de notre pouvoir ...
- Un système d'amis, avec des MP
- L'inclusions de jeux liés au compte Wordpress, et pourquoi pas rendre des infos accessibles depuis les profils
- Dans la même idée, L'animal lié ( un familier ), une sorte de Tamagochi lié à notre compte.

Hens World essaye de proposer une forme plus immersive et interactive qu'un forum axé sur la création. Il essaye de mélanger les différents supports créatifs, en donnant un terreau commun pour la création. Il vise autant les créatifs qui veulent contribuer au site que ceux qui veulent simplement pouvoir s'immerger dans un univers en tant que spectateur. Les influences rôlistes peuvent aussi attirer un public friand d'un univers aux interprétations multiples.


Voilà, on aimerai beaucoup recueillir divers avis pour avoir une idée de dans quoi on se lance, le projet peut vraiment partir dans plein de directions. En tant que dev surtout, j'aimerai savoir si la navigation paraît claire, quels ajouts/retraits penseriez-vous nécessaire pour faciliter la navigation, la compréhension de ce que fait vraiment le site ? Merci pour votre temps

Bonjour,

Tout d'abord bravo ! Bravo et merci de nous faire partager votre projet déjà bien avancé et que je trouve très créatif et d'un esthétisme poétique particulièrement réussi ! En particulier les animations et paysages qui sont d'un niveau professionnel digne d'un app store, voir d'un court métrage, le tout dans un esprit collaboratif non mercantile.

Passé cette très bonne impression générale, quelques points de design et ergonomiques essentiellement peuvent être optimisés.

Le logo :
Sympa de reprendre le symbole de chaque univers, mais quand on ne connait pas, ça reste confus dans un premier abord. Peut être un symbole qui regroupe tout, qui soit la synthèse des autres univers (les saisons) ? Là c'est joli, mais sans vos explications, il faudra revenir plusieurs fois avant de comprendre. L'idéal serait qu'on comprenne le concept tout de suite.
Ou tout simplement, reprendre la police de caractère de HENS à cette taille me semble un peu trop maigrichonne. Une police plus impactante et efficace serait préférable.

Les pictos :
On ne les comprend pas du premier coup d'œil. Pire, il faut passer dessus pour que le nom s'inscrive sous chaque pictogramme. Laissez l'aspect mystérieux dans la partie ludique, mais pour ce qui doit aider à la navigation, soyez le plus clair possible. Affichez les noms, les légendes et surtout, ajoutez un texte explicatif de votre projet directement sur l'accueil. Vous devez prendre l'internaute par la main et le guider, pas le perdre.
Imaginez des pictos moins gros, bien stylisés, avec les légendes et un texte concis qui explique où on est et ce que propose ce site. Un lien bien visible pour expliquer le site en détail ne serait pas du luxe. Pour vous aider, regardez les apps Google ou Apple, elles ont presque toutes en commun d'être claires dès la première prise en main (ou du moins d'essayer).

Le fond d'écran + ergonomie :
Je n'ai pas testé en responsive sur tablette (j'imagine qu'une version smartphone serait trop restrictive ?). Sur mon moniteur de bureau, les fonds qui défilent en alternance sontcalés sur la largeur. Il en résulte une répétition en hauteur de l'image, ce qui est dommage et casse un peu l'effet immersif. On doit être plongé dans votre univers, pas se retrouver avec un background repeat. Placez donc des images qui se calent sur toute la surface de l'écran (hauteur/largeur), quitte à n'en mettre que deux ou même une seule.
C'est par exemple ce que fait wetransfer, avec un résultat impactant graphiquement, pour peu que les fonds soient bien choisis.
https://www.wetransfer.com/
Pour rester sur cet exemple, notez la simplicité du contenu. Le message/baseline clair et évident, les informations contextuelles réduites au minimum mais qui vont à l'essentiel. Je pense que l'interface de votre home aurait à gagner à aller dans ce sens. Vous pourriez choisir des images qui reprennent les paysages du "jeu", ou bien des images complémentaires/différentes, en fonction du message que vous souhaitez passer. Ne pas perdre de vue que chaque élément que vous placez doit prendre sens et avoir une utilité réelle pour la compréhension du site. Là pour le moment, le concept, les saisons, le jeu, le partage de créations… rien n'est vraiment clair et le côté "rébus" des icônes apporte de la confusion à la confusion. L'effet waouh n'arrive réellement que lorsqu'on se promène dans les paysages (encore une fois très beaux) ou lorsqu'on visionne le dessin animé. Racontez nous une histoire dès la home, embarquez-nous dès le départ et soyez clair. Aussi facile à écrire que difficile à réaliser !!…

Le menu :
Tout rikiki en haut, au dessus du player. En fait, je ne l'avais pas vu. Je pense qu'il faut réfléchir et remettre à plat l'ergonomie de la home et les éléments de design (navigation, baseline, texte explicatif, aide, pictos, logo, images, fonds…). Une fois cette étape résolue, le reste suivra de façon plus fluide. Là j'ai trop l'impression que vous capitalisez sur le travail de l'illustratrice. Mais ça ne suffit pas à rendre l'expérience utilisateur simple et intéressante. L'ergonomie et le design du site doivent se hisser au niveau des illustrations. Je suis sûr que vous allez y arriver.

Divers :
Le login est un peu basique, utilisez un vocabulaire qui nous emporte un peu plus imaginatif ?
Quand on clique sur "Qui êtes-vous", je ne comprend pas. Les internautes savent qui ils sont. Ensuite la grosse maison pour revenir à l'accueil est un peu basique, surtout avec d'aussi jolies illustrations.
"Autour de Hens", l'animation est tout simplement superbe et pleine de poésie. J'adore !! Pourquoi faut-il cliquer sur un bouton standard et sans légende pour la découvrir (il y a un boulot énorme là-dessus, c'est un travail d'étude?). Pourqoui ne pas glisser cette animation sur la home avec le texte explicatif ?? Il y a plusieurs pistes à creuser… À vous de voir.
Le texte sous l'animation ne me convainc pas. Plutôt que de m'expliquer de quoi il en retourne, il rend le concept encore plus confus. Pour commencer, je site « l'histoire, qui est controversée et compliquée… ». Rien que là, j'ai déjà plus envie de lire la suite. Il faut partir du principe que les internautes ne feront aucun effort pour aller vers vous. Là vous avez trop de texte, trop confus. Personne ou presque ne le lira.
Pire, le "Principe du site" est aussi un texte à rallonge, quand on devrait tout comprendre en 2 ou 3 phrases maximum (et/ou une baseline efficace) dès la home. Placez les éléments aux bons endroits, clarifiez, supprimez ce qui n'est pas indispensable, pour aller à l'essentiel : le contenu, les illustrations/animations, votre univers. Inutile d'en rajouter, vous avez largement la matière pour faire avec. Dans votre cas, la difficulté n'est pas de remplir, mais d'enlever, d'élaguer, de structurer…

Avec une telle démarche, ce site que j'aime déjà beaucoup, pourrait devenir une vraie tuerie !

"Qui sommes-nous", c'est très bien de se présenter, mais je choisirai là aussi la simplicité. Déjà du dessin, du ludique et des animations un peu partout. Inutile de surcharger. Mettez les vrais photos des participants plutôt que des avatars illustrés (sauf si c'est impératif pour la suite?). Montrer des vrais gens donnera de l'épaisseur à votre joli projet. Pas fan des mini barres de scroll et des fonds de pleins de couleurs, même si ça reprend le logo. Je n'arrive pas à revenir à l'accueil en cliquant sur le logo.

L'action principale :
Pour moi, c'est la "carte de l'archipel (qui manque un peu de légendes elle aussi une fois affichée). Pour clarifier la navigation, je pense qu'il faut mettre le paquet sur ce lien, plutôt que de le perdre dans une liste d'icônes anonymes sur la home. Ensuite, une fois un des 4 symbole cliqué, c'est tout simplement superbe !
On avance dans un univers à la hauteur des animations. Franchement, chapeau bas !

Le forum :
Interface un peu fade et technique avec des textes en pattes de mouches. Un burger icon rikiki, pour quelle raison ? Là encore, simplicité !

Conclusion :
Pour ce qui est de l'idée du partage de créations, pour moi c'est le flou artistique total. Simplifier le site vous aidera à clarifier vos idée et votre message. Pour le moment, je ne sais pas clairement ce que je trouverai sur votre site. Dans un premier abord je pense à un jeu, un portfolio d'illustrateur… puis c'est la confusion. Peut être, y aller progressivement et se focaliser sur uniquement une partie pour débuter, comme vous le suggériez ? Et là c'est à vous d'établir vos priorités.

Pour conclure, je dirais que vous avez là un très beau projet. Il faut juste recadrer un peu tout ça pour passer de l'esthétisme à quelque chose qui soit ergonomique et viable.

En espérant que ma modeste contribution vous aura aidé.
Modifié par spongebrain (17 Jul 2015 - 20:27)

Je trouve que vos suggestions vont dans le bon sens. Y a plus qu'à !

Si vous hésitez entre plusieurs versions, dessinez des wireframes. Ça vous aidera à faire les bons choix ergonomiques, à avancer et facilitera le travail collaboratif. Je vous déconseille de vous jeter directement dans des templates Photoshop, ou pire d'attaquer le HTML sur une base incertaine. Vous n'aurez aucune souplesse et la moindre modification se transformera en usine à gaz.

Les wireframes sont fait pour ça, jusqu'à obtenir l'interface qui met tout le monde d'accord. Vous pouvez les dessiner sur un logiciel comme illustrator, à la main (très bien aussi), ou utiliser un outil spécialisé :
http://www.responsive-mind.fr/10-outils-wireframe-gratuits/
http://www.marevueweb.com/ressources-web/11-outils-gratuits-wireframe-pour-designers/

Après 2 petits mois, une nouvelle version est arrivée, porté par les conseils de Spongebrain

http://hens-world.fr

La version 0.2 apporte donc sa nouvelle page d'accueil, décrivant le site et son univers. La partie décrivant l'univers est encore un peu incomplète, et redirige vers une ancienne présentation du site, mais dans les semaines qui suivent on va régler ça !

Le header a donc été revu pour rendre les menu plus lisible. Cela à été fait au détriment du lecteur de musique, qui n'est accessible qu'aux membres connectés désormais, car placé dans la barrre de navigation sur la gauche.

Pas mal de nouveautés accompagnent cette nouvelle version, pour une liste exhaustive, je vous invite à consulter les notes de versions ici. En plus rapide:

Accessible à tous :
? Le guide touristique: permet de visualiser tous les lieux, avoir une description, et faire une recherche personalisée pour trouver ce qui nous intéresse.

Pour les membres uniquement:
? La population: permet de voir tous les Hensiens, avec une nouvelle fois une recherche personalisée.
? Le recensement: Dans la "mairie" de chaque village, vous pouvez voir toutes les fiches de personnages du village en questions écrites par la communauté, et mettre en favori vos préférées.
? Le tchat global : Dans certains bar de l'archipel, un tchat a été ouvert à tous les membres inscrits, permettant de discuter avec la communauté. Chaque village possède un bar, et correspond à une salle de discussion. On peut facilement voir le nombre de personnes dans chaque salle et s'y rendre depuis le tchat. Le tchat reste accessible en permanence, à la manière de la discussion instantanée de Facebook.
? Il y a aussi l'arrivée de l'automne, qui change légèrement l'apparence de chaque village.

Petite note techno: Pour les curieux, le tchat a été Réalisé avec NodeJS + Socket.io, le tout saupoudré d'encore pas mal de bugs !

[et puis on a bien écouté, on a utilisé des wireframes ]

C'est franchement mieux que dans mes souvenirs, plus claire sur le sujet du site, la dernière fois je n'avais pas compris de suite.

Je ne suis pas allé très loin, mais une fois sur la map j'ai cliqué sur un personnage et je eu beaucoup de mal à lire le texte. Texte trop petit et compact, interlignage trop serré, contraste noir et blanc trop prononcé. J'ai une bonne vue, mais là mes yeux s'embrouillaient rapidement.

Lire un grand texte centré ça va pas non plus... Il le texte est trop collé sur le côté droit.

Il faut trouvé un moyen d'aérer tout ça et que ça soit plus confortable à lire.
Modifié par juliesunset (23 Sep 2015 - 15:03)

Merci pour ce retour ! Je vais faire des essais pour rendre ça moins violent pour les yeux ! Je suppose que c'était avec un écran avec une grande résolution ? J'ai pas encore faire de media query pour les tailles de police. Je fais ça dans un prochain correctif tout proche !

Bonjour,

Et bien, il y a eu du boulot depuis la dernère mouture !

Je trouve que c'est mieux. Il y a encore des points d'optimisations à mon avis. J'espère pouvoir revenir sur ceux-ci dans quelques jours. En attendant, bravo pour le travail accompli !

Re-bonjour,

Le site est toujours aussi créatif. Toutefois, des optimisations simples au niveau de la maquette me semblent possibles.

Globalement, les illustrations me plaisent toujours autant, mais les grosse masses noires contribuent à alourdir le site. Pour commencer, le gros triangle noir du haut, qui n'apporte rien. Mettez un joli visuel plein pot, et placez votre jolie animation ronde dessus en toute simplicité.

Les textes sont encore trop techniques. Vous devez embarquer les internautes dans votre univers. Par exemple "HW est une plateforme créative et communautaire autour d'un univers fictif", c'est très bien pour une étude marketing à présenter à un banquier, mais pour un internaute, c'est beaucoup trop austère. Parlez lui directement, vu la cible, vous pouvez utiliser le tutoiement, adopter un ton ludique et amical, et gardez-le pour tous les textes du site.

Je ne suis pas fan de la bande noire translucide sous l'animation ronde. Vous pouvez placer le texte dans des blocs rectangulaire, et plutôt que le noir, utilisez de la couleur, pour dynamiser.

Ensuite, je scroll, et j'ai une rupture nette vers un fond noir sur lequel est placé une vidéo. Je trouve ce noir un peu plombant. Avez-vous testé une maquette avec une couleur à la place du noir ou même un fond blanc ?
Puis, j'ai un problème sous la vidéo, Le passage au niveau inférieur se fait par la grosse masse noire sous la vidéo qui prend la forme d'un triangle tronqué vers le bas. Cette zone est vide de contenu et on se demande à quoi sert tout cet espace perdu, avec un texte tout petit en blanc qui n'occupe pas l'espace.

Faites vivre votre texte, Travaillez la typo, avec une police de caractère attrayante et colorée, dans une taille confortable pour tous vos titres. Afin de rythmer votre maquette et de donner des repères aux internautes.

Ensuite, j'ai une bande noire qui coupe l'illustration, ce qui est dommage, surtout qu'elle ne sert à rien vu que le texte serait parfaitement lisible sur cette image. Image que je trouve mal choisie. Avec tous les beaux visuels que vous avez, de villages fabuleux, là on a un gros plan sur un ponton/radeau, ce qui ne m'emporte pas. De plus, en zoomant trop, on voit les petits défauts de l'illustration( bordures qui dépassent… ). Ça ne met en valeur, ni le dessin, ni le concept du site. Choisissez plutôt des visuels de type panoramiques pour commencer, qu'on ait une vue d'ensemble. Là on zoom sur des détails sans grand intérêt alors qu'on n'a pas encore vu de quoi il s'agit. Présentez-vous comme pour un teasing de jeux ou de film d'animation, en nous en foutant plein la vue ! Mais avec élégance, bien entendu.

Je continue le scroll et retrouve une animation ronde. C'est très sympa et me fait penser à un passage vers un monde fictif. Mais je n'accroche toujours pas sur ces grosses masses noires. et pourquoi ces formes en biais ? À vouloir cumuler trop d'effets graphiques, en fait, vous affaiblissez le site qui n'a pas besoin de toutes ces complications pour nous séduire.
Sous le rond, j'ai encore un énorme gros plan sur un truc, on dirait un puits. Juste à côté du rond, la symbolique n'est pas très adroite. Plutôt que de nous faire rêver, on se fait menacer d'être jeté dans le puits ?

Le footer noir, avec les pointillés "couture", bof.

Le logo manque toujours de lisibilité, avec cette police de caractère trop light. Elle se fait complètement bouffer par le fond noir et les lettres sont à peine apparentes.

Je ne suis pas inscrit. Du coup je ne sais pas si le sticky menu en haut glisse au scroll après validation. Je ne le trouve pas très esthétique, surtout que ce n'est pas le même noir que le reste et que ça fait une bande trop visible (ou alors pas assez). Si les infos contenues dans ce menu doivent toujours rester visibles, avez-vous pensé à un burger icon, ou quelque chose de plus stylisé, comme des icônes… Là j'ai des infos comme "Carte du monde", "Population", mais je ne comprend pas de quoi il s'agit. Ces informations arrivent peut être trop tôt ?
Bon je clique au hasard sur "Population". >>> "Vous n'avez pas accès à ce contenu, désolé" me dit la petite fée. En fait, en tant que nouvel arrivant, pas encore inscrit, ce menu n'a pas à se trouver là à ce moment précis. Si comparé à la version précédente, qui de souvenir était trop complexe. Je pense qu'il y a encore des efforts à faire en terme d'ergonomie. Ce qui finalement n'est peut être pas si simple vu l'univers "sophistiqué" que vous développez.

Pour vous aider, avez vous testé de présenter votre site à des néophytes, pour noter leurs réactions, les questions qu'ils posaient, juger la clarté de votre propos. Cela pourrait vous permettre d'avancer dans la formulation et l'ergonomie de votre site. En gardant ce qui fonctionne, et en améliorant ce qui doit l'être.

Bon, je clique sur "Guide touristique" et là, je retrouve le fameux petit village et les illustrations que j'aime beaucoup ! Là par contre, je trouve cette partie beaucoup plus claire et fonctionnelle que la home.

Oups, j'ai cliqué sur la bande de présentation "antiquaire" pour l'enlever, et j'ai 4 pictos (caméra, crayon… ) qui s'affichent en blanc sur noir avec le village en arrière plan. Je ne vois pas à quoi sert ce fond noir. Je le trouve vraiment plombant. Le résultat visuel serait probablement tout aussi efficace et bien plus léger si les pictos étaient placés sur des ronds avec le village derrière qu'on puisse admirer. Là le noir cache tout. J'ai failli écrire il "gâche" tout. Un peu moins grosses les icônes seraient tout aussi visibles. Le logo au dessus est minuscule en comparaison. Il faut hiérarchiser la taille des éléments (pictos, titres, paragraphes… ) et grader la même logique pour tout le site. Il en va de la cohérence graphique, donc votre image, de votre crédibilité, de l'ergonomie.
Au survol des pictos "la mention "Apparemment il n'y a rien ici" n'est pas très ludique. Pensez au ton dont je vous ait parlé en début de commentaire.

Je pense qu'il faut simplifier la maquette, notamment la home. Et remplacer ce noir par une couleur moins dure, voir du blanc. Ce qui allègerait probablement le design du site.

Voilà, heureusement que j'avais dit que j'aimais ce site. car vu le nombre de critiques que je viens de vous sortir, vous pourriez penser le contraire. J'aime toujours autant ce site, mais je pense que le chemin pour optimiser la typo (très important, pour le moment elle est négligée), alléger le site (une maquette plus simple et claire), n'est pas encore terminé.

En tout cas, bravo pour le travail accompli. Et bon courage pour le travail qu'il reste encore à fournir.
En attendant la suite !
Modifié par spongebrain (29 Oct 2015 - 05:16)