Vos avis sur mon nouveau site Nephila

Bonjour / bonsoir.

Je suis développeur / intégrateur en freelance, spécialisé dans les plateformes WordPress et Prestashop.

J'ai refait dernièrement mon site vitrine ainsi que le blog de A à Z, et je recueille maintenant des avis afin de l'améliorer, toujours l'améliorer =).
Voici le lien du site : www.nephila-studio.com

L'objectif du site était de mettre en avant l'ergonomie et l'experience utilisateur sans trop penser au SEO.

Il est développé sur une base responsive permettant à l'utilisateur de naviguer correctement sur le site quelque soit son appareil et son écran.

Afin de donner un peu plus de vie au site il est agrémenté de parallax au scroll, et de quelques animations (apparition, disparition, déplacement de contenu).

Le blog aussi a été relooké : www.nephila-studio.com/blog

N'hésitez pas à dire ce que vous en pensez, si certaines choses vous gênent ou tout simplement ne fonctionne pas correctement (en précisant version de l'OS et du navigateur siouplait ^^).

Je termine en remerciant 1000 fois mes 2 collègues freelances qui ont participé à cette nouvelle version :

Blandine de Graphical Ink pour son incroyable travail sur la création de l'identité graphique, des maquettes.

Julie de White Elephant pour son excellent travail sur la création du contenu, la traduction.

Merci d'avance pour vos retours ! =).
Modifié par Franck_K (09 Feb 2013 - 02:16)

Bonjour,
Pour moi le contenu du ne devrait pas s'étendre sur toute la largeur, mais devrait être centré. Sur un grand écran, ce n'est pas très confortable, je suis obligé de réduire la fenêtre de mon navigateur pour apprécier design (surtout sur le blog).

En tant que responsive, ne devrait-il pas s'adapter à la taille de mon smartphone ?

Salut endzero.

Je suis aussi sur un grand écran et je pense savoir ce que tu veux dire. Mais c'est voulu. Concernant la vitrine je vais prendre un peu de recul et voir si ça choque beaucoup de monde. Concernant le blog je me suis posé la question, et tu as peut être raison : sur un grand écran le regard est concentrée sir la moitié gauche seulement. Je vais y réfléchir.


Salut Manhattan.

Tu as quoi comme smartphone / navigateur ? Et tu as quoi comme rendu (si tu peux faire un screen ce serait parfait =)). Le contenu est censé s'adapter en effet.

Bonjour,

Le design est très réussi, bravo!

Sur Ordi (Mac)
--La police est trop petite à mon goût.
--la taille du site ne me gène pas.
--j'ai du mal au scroll: problème de calage des sections et les animations sont disgracieuses tant que tout n'est pas parfaitement calé.

Sur tablette (ipad)
--la police passe bien.
--je ne peux pas naviguer tactilement. La page revient irrémédiablement sur le la page sélectionnée par le menu.

Samsung galaxy s2
Navigateur : dolphin browser



Et je viens de tester avec opéra mobile, firefox et chrome : identique. Donc cela doit être en rapport avec mon téléphone.
Modifié par Manhattan (09 Feb 2013 - 10:41)

Même rendu sur iphone4.

Et je viens de tester sur le S, pareil.

Je vois d'où ça vient, effet de bord. Viewport mal configuré et le mauvais css est chargé.

Thanks for reporting =).

chapeau pour l'intégration du site hormis quelques détails de tailles de polices. Moins fan du logo du blog.

T'es sur un mutualisé?

Le design et les transitions sont vraiment top.

jb_gfx a écrit :
Le design et les transitions sont vraiment top.

+1, je crois bien que c'est une des première fois où l'effet para-machin ne me gonfle pas méchamment

Plop,


Je ne suis pas fan du fond triangle jaune, on se demande si c'est pour souligner un mot ou pas (vu que ça se met parfois sur un mot).

Malgré la flèche noir, on ne comprend pas forcément qu'il faut scroller.
Pourquoi ne pas centrer cette flèche pour mieux la voir et la comprendre ?
Pourquoi était-elle noir ? Pourquoi ne pas l'adoucir avec un gris clair comme tes picto ?

Tu as beaucoup de contenu, perso, ça me rebute un peu...

Attention, ne pas afficher le formulaire de contact... ça peut te faire perdre des clients.
Quel est l'intéret de mettre ce visuel ?

Sur mon galaxy s2 (navigateur chrome), le site n'est pas optimisé (cf la capture d'un précédent post).

Wouala,
KaySix

Merci pour ces nouveaux retours.

jmlapam :
Je suis sur un kimsufi.
Concernant les tailles de police, je les ai déjà augmenté un peu samedi soir je crois bien, peux tu me dire ce qui te dérange toujours stp ?

KaySix :
- Ok pour les triangle jaune, je note.

- Le "on comprend pas qu'il faut scroller", je ne le comprend pas bien ^^. On arrive sur un site, on lit ce qui s'affiche à l'écran, puis 2 options si l'on reste : on scroll, ou on clique sur un lien du menu (ce qui renvoi au scroll). Non ?

- La flèche centrée je pense que cela casserai la cohérence "contenu aligné sur la gauche" du site. Ceci dit je vais y toucher un mot à la graphiste car j'ai du mal à me faire une bonne idée sur ce point.

- Pour la couleur de la flèche, pour moi c'est un peu kif kif bourricot ^^, mais je vais faire un test tout de même. Je vais aussi tester avec un hover smooth.

- Tu m'intéresses avec le contenu qui te rebute, peux tu m'expliquer un peu ? J'ai le nez dans ce site depuis un bout de temps donc j'ai du mal à avoir du recul . Vaudrait il mieux aérer davantage ? enlever/cacher du contenu ?

- Je pense pareil pour le formulaire de contact, et en même temps j'aime le design sans. Argh c'est compliqué ! Je note.

- Ce visuel... Aucun intérêt =). C'est un emplacement pour mettre ma tête de codeur tout beau tout propre devant un pc, fin un truc dans le genre pour mettre encore plus en avant le "Je", et ajouté un peu de proximité avec l'utilisateur.
Sauf que, cette photo, je l'ai pas encore. Elle viendra très rapidement, du moins j'espère !

Yep pour le mobile c'est noté. Le problème étant que j'ai un note, que le S2 de ma copine est inutilisable (surcouche orange faisant parfaitement buguer le système), et que j'ai pomé mon "vieux" nexus...
Ceci dit c'est le GROS problème majeur du site, et je tacherai de m'en occuper le plus rapidement possible.

Merci beaucoup pour ces retours nombreux !

Bonsoir. En plus des avis plus haut sur la version mobile : le contenu dépasse de certaines div, et curieusement celui-ci n'est pas configuré pour remplir 100% de la largeur là où certaines div contenantes pourraient le permettre.

Certaines images de décoration - comme les triangles jaunes, ou encore les cadenas - passent par dessus le texte et les titres. De même pour certaines icônes. Plutôt gênant (et cela donne aussi un aspect non fini).

Le formulaire de contact est tronqué sur mobile (PS : j'ai envoyé un message bidon pour tester les regex).

Bon courrage

Yop,

Niveau contenu, pour moi, il faut que ce soit doser/aérer/imager pour que le lecteur ne lache pas le fil.

Home
Sur la page d'accueil, ton texte fait écrasé en pavé, ça ne donne pas envie de lire. On a l'impression que tu veux en mettre le plus possible sur un petit espace. Est-ce nécessaire d'avoir autant de texte ? Pourquoi ne pas afficher les info' moins nécessaires aux clics (puisque là aussi, avec tes ronds qui bougent au survol, on a envie de cliquer) en faisant apparaitre un p'tit popup, ou un truc venu de nulle part ?
Peut-être suffit-il d'aller à l'essentiel en mettant quelques mots clés :
Expertise :
-> php
-> respect des normes
-> j'aime les frites
-> etc.
Je ne sais pas.
Ressources sur la typographie que je trouve très intéressante.

Pour le scroll :
En fait, au départ, j'ai pas compris que sur la gauche, c'était un menu... Peut-être devrais-tu rajouter un hover pour qu'on comprenne que c'est cliquable.

Pour le formulaire de contact :
Mets au moins un bouton clair : Me Contacter qui là fera apparaitre ton popup.
Pour le visuel, si tu mets une photo de toi, c'est plus logique ! C'est d'ailleurs, je pense conseillé de faire cela, ça humanise le contact.

Franck_K a écrit :

jmlapam :
Concernant les tailles de police, je les ai déjà augmenté un peu samedi soir je crois bien, peux tu me dire ce qui te dérange toujours stp ?

Certaines variations et puis des breakpoints sur ton rwd qui sont pas toujours top >> screenshot sur un notebook en mode fullscreen. Bon à relativiser, je surfe à ma façon

Moi j'ai un problème avec certaines "pages" où il faut utiliser la roulette ^^

Dans les sites à parallaxe, je m'attends à voir 1 "page" = 1 écran. J'ai donc commencé à la roulette (parce que c'est mon système de navigation classique, 1 page = roulette, 1 partie du menu = 1 page).
J'ai vu le système de parallaxe, ok, je passe donc à la navigation au menu.

Hors pour moi, c'est l'un (parallaxe avec le menu) OU l'autre (navigation à la roulette), pas les deux à la fois.

Les "pages" touchées :
- prestation. Si on se sert uniquement du menu, on apprend jamais que tu fais dans les applis facebook aussi. Sans compter les 2 derniers points de cette même page que j'ai découvert par un pur hasard au 3ème parcours du site.
- processus, obligé de scroller pour voir la partie "mise en page"
- référencement, je m'arrête au milieu du point 2
- profil contact... la partie contact n'est pas visible, faut scroller


Enfin, j'ai un soucis avec tes effets de hover un peu n'importe où pour n'importe quoi. Typiquement les 4 titres de la "home"... Perso, quand je vois un hover c'est qu'il y a un lien derrière. Donc je clique...
Ce qui fait que très vite, on ne voit plus la différence entre un lien et une simple animation pour le fun. Ce qui fait qu'on passe à coté de ton formulaire de contact. (vu que les autres images animées n'ont pas de lien, il n'y a aucune raison pour que celle-là en particulier en ait un et au bout d'une dizaine de faux clic, le 11ème, on tente même plus).


edit : et je n'ai pas une résolution très spéciale étant en 1280 x 768 soit un classique en 17" wide ^^
Modifié par Lothindil (22 Feb 2013 - 13:41)

Merci à tous pour vos retours. Tout d'abord je dois maintenant libérer mon temps pour mes clients, je me permet donc de laisser le site tel qu'il est pour quelques semaines. C'est pour cela que prend note de vos remarques sans les appliquer forcément maintenant.


@Kaysix, je comprend ce que tu veux dire pour le contenu. Pourtant je compare avec pas mal de sites vitrines, j'ai l'impression d'avoir un contenu plus aéré, plus léger que la moyenne. Mais je prend note.

Pour les hover dans le menu, c'est claire, tu as raison. Je prend note, c'est à améliorer.

@jmlapam : Y a pas de "à relativiser" ! L'objectif est justement d'être bon partout . Il y a des problèmes de responsive, c'est certain =/.

@Lothindil : Attention ne mélangeons pas parallax et animations classiques hein ^^. Sur le site il y a pas mal d'anims au scroll sans que ce soit de la parallax. Bon c'est pour chipotter bien sur .
Sinon ce qui compte pour moi c'est que l'utilisateur utilise n'importe quel manière de scroller (molette, menu, flèches HAUT / BAS). Pour cela il suffit de se baser sur le scroll molette et là je n'arrive pas à voir le soucis car les éléments ne se déplacent pas tant que l'on ne quitte pas la page, a moins qu'il y ai un bug...
En ce qui concerne le menu, je vois le problème. On se dit que l'on ne scroll pas, du coup on peut rater des infos. Mais je pars sur 2 idées :
- Si l'utilisateur voit des éléments coupés en bas, il a le réflexe de scroller.
- Si il n'y a pas d'éléments coupés, il clique sur un autre item du menu, et au scroll il voit qu'il a raté des choses et revient en arrière.

Là par contre c'est pas génial, c'est vrai. Je vais essayé de trouver comment palier à ça.

Pour les hover il y a 2 choses : le changement d'opacité que je veux garder, car il plait beaucoup. Et la mise en couleur, le déplacement de certaines icones, qui peut être revu ou supprimé. Je vois ce que tu veux dire par la confusion mais est ce que les utilisateurs ne font pas plus attention au curseur qu'au hover ? Moi je clique si le curseur me dit que je peux cliquer, pas parce qu'il y a un hover.

A étudier.


Merci à tous pour vos retours =).

Salut.

Je viens de découvrir ton site et wow, magnifique, superbe travail !

Les points forts :
- En général, je n'aime pas les effets mais là, c'est parfaitement utilisé et surprenant.
- Les icônes sont sympas.
- Les pages sont très différentes avec toutefois une homogénéité, étonnamment.
- Bon choix de couleurs.
- La photo est bien et bien choisie, ça donne un site plus personnel.
- C'est actuel sans tomber dans les clichés du design actuel.

Histoire de chipoter :
- Même si le logo a cette fonction, j'ajouterais un bouton "Accueil" dans le menu gauche. Certaines personnes retrouveraient la page d'accueil plus facilement.
- Je mettrais "profil/contact" (profil sans "e") dans le même style que les autres boutons du menu vertical et sans icône (trop d'icônes tuent les icônes ^^).
- Attention de ne pas multiplier les effets, non-plus. Après, on tombe dans le défaut bien connu des débutants en montage vidéo qui calent tous les effets de transitions possibles entre les plans de leur film. Par exemple, l'effet au survol de la photo me paraît too much. On ne peut pas non-plus montrer tout son savoir-faire technique sur le même site. Parfois, la sobriété peut être appréciable.
- En l'état, c'est équilibré mais attention de ne pas trop multiplier les textures non-plus. Par exemple, le fond du logo n'est pas réutilisé, des choses comme ça...
- De même qu'il y a un bouton pour aller à l'écran du dessous \/ je ferais un bouton pour revenir à l'écran du dessus : /\.
- Je ferais en sorte que le bouton \/ tombe toujours au même endroit dans l'écran pour que l'internaute qui ne bouge pas son curseur puisse recliquer.
- Chez moi, il y a des moments où les libellés du menu gauche restent noirs (FF19, Windows 7) mais c'est rare.
- Le logo est sympa, peut-être regrettable de ne pas l'exploiter davantage, par exemple pourquoi la silhouette dans le menu gauche et pas la petite tête ?
Modifié par zuhh (25 Feb 2013 - 17:03)