Bonjour,

Actuellement en formation de développeur web à la CCI de Colmar, Laurent et moi-même souhaitons tenter l'aventure avec le site que nous devions faire en tant que projet d'étude.

ElsassDeal est un site de petite annonce High-Tech pour l'alsace. Il met l'accent sur la proximité (site régional) et l'échange.

Nous serions ravis d'avoir vos retours sur l'ergonomie du code, ses fonctionnalités, son code...
C'est un site développé en PHP avec le moteur de template smarty et est basé sur le modèle MVC.
Et si le coeur vous en dit, vous pouvez même l'utiliser pour déposer vos annonces.

Merci

kepha
Je me permet de relancer. Je vois qu'il y a eu beaucoup de lecture mais aucun commentaires ! Promis je ne relance plus après.

Ce qui m'intéresse surtout, c'est votre avis sur l'ergonomie et l'expérience utilisateurs.

Merci
Bonjour,

Je vais vous donner mon avis d'utilisateur lambda du dimanche matin :

Si j'arrive sur le site sans savoir, je ne comprends pas tout de suite de quoi il s'agit. Le titre dans le logo est pourtant explicite "Petites annonces higt-tech en Alsace", mais on a tellement l'habitude d'avoir un visuel en plus qui donne l'info que... ou bien le titre est-il trop petit. Peut-être ça d'ailleurs. Parce qu'il est plus petit que la plupart des textes qui suivent. J'apprécie par contre le choix de la taille de police ; enfin on sort des sites en 13 px qui ne sont plus du tout adaptés à nos écrans actuels (je ne parle même pas des plus petits où CTRL molette devient une habitude).
Bon, l'interface est clairement orientée windows 8, et ça saute aux yeux, au point que l'on se demande si ce n'est pas trop "orienté".
Je ne comprends pas exactement à quoi sert le premier slider (iosSliderInfoAccueil) : Les icônes laisseraient penser qu'il s'agit d'un menu, mais un menu en slider, c'est étonnant. Ensuite, les div de ce slider sont grandes, et ne contiennent qu'une icône, un titre et un libellé. Quitte à partir sur une interface proche de windows 8, pourquoi ne pas avoir tenté des tuiles dynamiques (que mettre dedans, je n'en sais rien).
Un truc qui me choque : les liens, boutons etc n'ont pas d'état 'actif', 'visité', 'survolé',... gérés. Alors que c'est une information cruciale. Seul le curseur change.

Le site est quand même très sombre. Les couleurs sombres enferment, cloisonnent. On se sent légèrement oppressé.

Ah, et le validateur w3c donne 17 erreurs.

Smiley smile
Bonjour,

tout d'abord, merci d'avoir pris le temps de nous partager vos remarques.

a écrit :
Si j'arrive sur le site sans savoir, je ne comprends pas tout de suite de quoi il s'agit. Le titre dans le logo est pourtant explicite "Petites annonces higt-tech en Alsace", mais on a tellement l'habitude d'avoir un visuel en plus qui donne l'info que... ou bien le titre est-il trop petit. Peut-être ça d'ailleurs. Parce qu'il est plus petit que la plupart des textes qui suivent.

Très bonne remarque qu'on nous avait déjà faite, on est en train de travailler sur une nouvelle page d'accueil avec une explication du site plus claire.

a écrit :
Bon, l'interface est clairement orientée windows 8, et ça saute aux yeux, au point que l'on se demande si ce n'est pas trop "orienté".

C'est un choix que nous avons fait, le but était d'imaginer un site entièrement responsive... le fait de travailler sur des tuiles commes windows 8 nous a clairement aidé dans cette perspective.

a écrit :
Je ne comprends pas exactement à quoi sert le premier slider (iosSliderInfoAccueil) : Les icônes laisseraient penser qu'il s'agit d'un menu, mais un menu en slider, c'est étonnant. Ensuite, les div de ce slider sont grandes, et ne contiennent qu'une icône, un titre et un libellé.

Tout à fait d'accord, d'ailleurs cette zone va disparaître sur notre nouvelle page d'accueil. Nous allons axer davantage sur le contenu.

a écrit :
Quitte à partir sur une interface proche de windows 8, pourquoi ne pas avoir tenté des tuiles dynamiques (que mettre dedans, je n'en sais rien).

On réfléchit encore pour savoir comment et où placer ces tuiles dynamiques, mais c'est vrai que ça peut être très intéressant.

a écrit :
Un truc qui me choque : les liens, boutons etc n'ont pas d'état 'actif', 'visité', 'survolé',... gérés. Alors que c'est une information cruciale. Seul le curseur change.

C'est vrai qu'on peut perdre l'utilisateur. On bosse dessus Smiley smile

a écrit :
Le site est quand même très sombre. Les couleurs sombres enferment, cloisonnent. On se sent légèrement oppressé.
Ah, et le validateur w3c donne 17 erreurs.

C'est également dans les tuyaux.

Encore merci pour toutes ces remarques. La nouvelle version devrait être opérationnelle d'ici une semaine.

Toutes remarques sont encore bonnes à prendre Smiley murf
Bonjour,

Je pense également que la charte est à revoir. Trop sombre, pas assez conviviale, rien qui évoque les petites annonces ou l'Alsace, excepté le petit truc rouge rajouté sur le nom (et faut deviner). Le fond gris plombe tout le site. Il manque quelque chose entre le "logo" et le formulaire de recherche (une présentation ? un carousel ?). Là c'est trop brut de décoffrage. Il manque une hiérarchisation des infos, tout est au même plan. Certains textes sont trop gros (lancer la recherche...). Les pictos sont énormes et font déjà vu, si on les retire, il ne reste plus rien du site. On ne sait pas de quoi il s'agit, une baseline c'est insuffisant. Ça ressemble un peut à une grosse iApp mystère.

Si le site fonctionne techniquement (j'ai pas testé), il manque une vraie réflexion sur la charte graphique et la maquette. C'est gênant car c'est ce que les gens voient en premier. Quitte à commencer par une étude concurrentielle, de sites de P.A., de sites qui évoquent l'Alsace (tous secteurs, même touristique), des croquis et des planches tendances.

Là on voit que vous avez directment tapé le code et que le style du site se résume à ce qui vous est tombé sur la main à ce moment là.

Voilà pour moi. A+
J'aime bien l'ensemble à part le logo qui colle pas du tout au reste du design. Mais pour un projet d'étude je trouve que c'est du bon boulot quand même.
Bonjour,

Comme dis précédemment, on a bossé sur une nouvelle charte graphique et une nouvelle page d'accueil, en prenant en compte vos remarques très pertinente.

La page d'accueil présente maintenant plus explicitement le site avec ses fonctionnalités... Après sur le design, on est resté sur la même logique de tuile, ça peut ne pas plaire c'est sur, mais on pense que les gens vont s'habituer de plus en plus à ce style de design.

On a aussi commencé a géré les problèmes relevés par le validateur w3c.

Votre avis sur cette deuxième monture ?
Kepha a écrit :

Votre avis sur cette deuxième monture ?


C'est très sympa, mais en même temps j'aimais bien la 1ère version aussi. J'essaierai de poster un avis plus détaillé à l'occase.
Bonjour,

C'est quand on voit ce genre d'évolution qu'on est content d'avoir laissé ses petits conseils. Smiley lol

Le site est plus clair, enfin on respire. Le petit texte explicatif était indispensable. Peut être indiquer d'avantage la spécialisation high tech, même si ça semble évident vu les rubriques ? On a une meilleure hiérarchisation des infos. j'aime bien la typo utilisée pour le texte.

Toujours pas fan du logo pas très sexy, avec cette typo un peu passée de mode, il est un peu petit par rapport au reste du menu. De plus on ne retrouve aucun lien entre le logo et le reste de la charte, il fait un peu trop bande à part. Tu peut lui garder une typo spécifique, c'est même préférable, mais lui donner un style moins "choucroute". Le placement du "noeud alsacien" est à tester avec d'autres typos, de façon différente ?
Chez moi (chrome/mac) le menu du header reste collé à gauche alors que l'ensemble du site se centre horizontalement. Je pense qu'il faudrait que tout le site se centre, ça serait plus cohérent et plus esthétique.

Le style est propre et assez efficace (c'est déjà beaucoup). L'utilisation des tuiles fonctionne mieux. Une optimisation des couleurs pourrait être envisagée. La gamme actuelle fai trop microsoft. Il vous faut absolument votre propre gamme, vos code couleurs qui font qu'on est chez Elsass Deal et pas ailleurs. Il existe plusieurs sites qui aident à créer des gammes couleurs, a vous de trouver le vôtre, c'est plus complexe qu'il n'y paraît et peut demander pas mal de temps et de tests avant de trouver la gamme la plus adaptée.
Entre le haut beige clair, la bande grise et les tuiles colorées par microsoft, il y a un équilibre à optimiser, déjà entre le beige et le gris clair, i y a peut être une couleur de trop, tu peux avoir une gamme pêchue et pour les teintes claires ne garder que les tons neutres (blanc, gris clair, noir ou gris très foncé…). C'est à définir…

Quand je clique sur un produit, le code graphique fait trop copie de Windows 8. On se croirait sur microsoft.com. Il faut d'avantage se démarquer au niveau du style. Toutes les tuiles colorées sur le côté sont trop similaires, même microsoft utilisent des fonds clairs non colorés pour garder une hiérarchisation des infos. Là tout est au même niveau, les liens de partage (facebook…) pourraient rester sur fond blanc. Il y a trop de tuiles. Sur fond coloré, certains pictos sont trop gras et on perd les traits les plus fins (pliure de l'enveloppe, détails du $…).

En cliquant sur différentes rubriques dansles liens noir du bas on constate un problème de code couleur évident. Par exemple sur la page "loisir et sport", le fond ocre jaune bouffe les tuiles placées dessus, c'est pas beau, surtout avec la bande du haut beige clair qui se fait bouffer elle aussi. Il faut la jouer plus sobre et subtile au niveau du code couleur, par exemple en mettant des gris très clair pour les grands applats et ne faire apparaitre certaines couleurs de tuiles qu'en "roll over". Il y a plusieurs options possibles, en tout cas éviter au maximum de placer des tuiles de couleurs sur un fond de couleur différente, les couleurs luttent au lieu de se répondre.

Je n'ai pas navigué sur tous les liens, d'autre remarques peuvent s'ajouter avec plus de précision. En résumé, la progression par rapport à la précédente maquette est évidente, par contre il faut se décoller de la charte microsoft (s'inspirer sans copier, ce qui est plus difficile), définir vos propres codes visuels et optimiser la gestion des couleurs.

Voilà pour moi. Smiley cligne
Bonjour,

Il est clair que l'évolution a été profitable. Le site est désormais clair et propre.
Deux petites modifications d'ergonomie/code seraient à mon avis souhaitables :

Lorsque je veux faire une recherche, je clique sur le champ de saisie "Je cherche" :
- première modif : les label ne sont pas associés à leurs input. Un simple for="" associerait les deux, ainsi un clic sur "je cherche" donnerait le focus à l'input.
- deuxième modif : une fois saisi l'article recherché, étant sur le clavier, je ne reprends pas ma souris, je tabule directement vers ville. Très bien, mais ensuite, j'aimerais pouvoir descendre dans les villes proposées avec les flèches du clavier, et ne pas être obligé de taper exactement le nom de la ville ou de prendre ma souris.

Ensuite, je crois comprendre que le site n'est pas terminé, car lorsque je clique sur "déposer une annonce", je vois exactement la même page que "se connecter ou s'inscrire" : je comprends bien qu'il m'est nécessaire de m'inscrire pour déposer une annonce, mais aucune différence même infime entre les 2 pages, donc je m'interroge, surtout que l'url en question est "../connexion/mIN-ERREUR" ce qui laisse quelques doutes. Un message me rappelant qu'il est nécessaire de m'inscrire ou de me connecter pour déposer une annonce ne serait pas mal.
Enfin, une gestion des hover sur les menus serait sympa tout de même. Même légère.

J'ai par contre été étonné de ne trouver quasiment aucun élément de titrage (hx), à part un h1 sur l'accueil et quelques h2 sur une autre, mais certaines pages n'en ont pas du tout alors qu'ils seraient les bienvenus.

Je n'ai pas pris le temps de passer partout, mais bravo pour les évolutions Smiley smile