[JONK] Proposition Webdesign

Sujet : Refonte du site d'un voyagiste en ligne
09/07/2011
Difficulté : Image
Compétences : Direction artistique, webdesign, intégration (opt), flash (opt), conception-rédaction (opt), ergonome (opt)

Re: [JONK] Proposition Webdesign

Message 16/05/2011, à 13:04


Hello,

Un peu en vrac :

- je trouve que l'utilisation d'une grille serait la bienvenue
- les blocs ne sont pas trop séparés, ça manque de hiérarchie de lecture, on ne sait pas ou regarder
- sifr n'est PAS une solution viable pour l'intégration de typos ;)
- les boutons manquent de cohérence entre eux, et le style glossy n'est pas cohérent avec le reste du site
- le picto de l'agence : qu'est ce qu'il fait là, hormis pour le plaisir de poser une jolie icône ? Le bloc nos agences est également bizarrement situé.
- "vols secs" c'est une expression interne, pas le nom de l'item de menu public :)
- la séparation entre les boutons du menu et le champs de recherche est un peu bizarre (trop large)
- sinon d'accord avec les remarques des autres.

En résumé,Ça manque de hiérarchie et aurait peut être demandé un travail de zoning plus approfondi, il faut qu'on puisse facilement identifier els blocs et qu'on sache ou poser le regard. il faut organiser tout ça !

Graphiquement c'est un peu trop dépouillé par endroits, et trop glossy sur les boutons, qui ne s'harmonisent pas trop avec le style général.
Directeur artistique web : judbd.com | @judbd
Le blog : mariejulien.com | @mariejulien / L'asso : Métiers Graphiques | @MGAsso
Avatar de l’utilisateur
Julien
La team
 
Messages: 104
Inscrit le: 01/11/2010, à 12:30
Twitter: @judbd

Message 16/05/2011, à 15:24


- La grille, sur ce coup là il n'y en aura pas à moins que je trouve le tps mais là j'y crois pas trop. Une prochaine fois peut-être !
- La lecture peut encore être améliorée c'est sur mais de là à ne pas savoir où regarder...
Image

- Pourquoi SIFR n'est pas viable ?
- Les boutons à voir mais c'est pas faux, il y a mieux à trouver.
- Le picto de l'agence, oui comme l'Iphone ou les engagements, ça identifie visuellement de quoi on parle. Je vais essayer autre chose ;) .
- "Vols secs",on le retrouve quand même souvent : www.fram.fr, après mettre "Vols" ou "Billets d'avion" ne me dérange pas non plus.
------------------------------------------------------------------
Sébastien Joncour - Graphiste/Webdesigner freelance
www.jonk.fr
------------------------------------------------------------------
Avatar de l’utilisateur
Jonk
 
Messages: 25
Inscrit le: 08/03/2011, à 14:31

Message 16/05/2011, à 22:45


Les choix technologiques concernant le développement client vont (ou devraient) revenir à l'intégrateur. Ici, pour l'exercice, je me permet de jouer ce rôle.

C'est bien sûr un travail qui est fait généralement soit directement avec le chef de projet (qui coordonne ensuite), soit avec l'ensemble de l'équipe (développement back, graphisme, (référencement ?), etc. Je cherche donc à soulever des points potentiellement problématiques (ou pas) pour que tout roule par la suite.

J'aurais plutôt tendance à te déconseiller les techniques de remplacement dynamiques de textes telles que sIFR ou cufón, car elles impactent fortement l'accessibilité et les performances des pages. Ses méthodes tendent à être progressivement remplacés par « font-face » aujourd'hui (techno qui apporte elle aussi son lot de problématiques, j'en conviens).

Bref, il reste donc quand même pas mal de choix :
  • l'utilisation de « font-face » en choisissant une police lisible (ce sera à tester ensuite) et libre d'utilisation sur le web en parcourant les répertoires de Google Web Font ou de Font Squirrel ;
  • l'utilisation d'images (seul inconvénient : les textes sont figés et moins facilement modifiables par la suite) ;
  • l'utilisation d'une police « web-safe » ou d'un « font-stack » pour un rendu uniforme partout (mais sans doute plus classique également).
Concernant les images de fond, pour prévoir les écrans les plus larges du moment chez le grand public, il faut monter à plus de 2500 pixels de large. N'importe quelle image photographique de cette taille fera un poids conséquent (et s'optimisera sans doute bien mieux au format .jpg – ce n'est pas une question de mode). On peut tout aussi bien admettre que le jeu en vaut la chandelle, mais mieux vaut en être conscient. Si je fais quelques tests rapides avec tes images, il faut par exemple compter plus de 400 Ko par image, soit une dizaines de secondes en 512 Kbps ; ce n'est pas rien.

Effectivement basculer sur un affichage non-skinné des formulaires se fera très facilement. Mais quid du client qui aura vu la maquette et qui ne comprendra pas par la suite qu'on lui parle de contraintes techniques à ce sujet ? C'est prendre un petit risque facilement évitable je pense.

Mea culpa pour les liens non-compréhensibles hors contexte, effectivement c'est plutôt mineur. Mais tu connais les intés, ils aiment bien râler sur tout. ;)

Chope ce que tu souhaites dans le tas de mes remarques en tout cas, c'est là pour ça.
Vincent – HTML zen garden
Avatar de l’utilisateur
Vincent
La team
 
Messages: 17
Inscrit le: 01/03/2011, à 19:03
Twitter: @htmlzg

Message 17/05/2011, à 09:28


Merci pour ton retour Vincent, effectivement sur un projet réel la maquette n'est montrée au client qu'après avoir été validée par le ou les développeurs. C'est crucial pour la suite du boulot étant donné que c'est le développeur qui prendra le relai, il faut être bien certains que ce qui est proposé au client est réalisable et dans quel mesure (temps...).

Donc ces retours sont très importants, faire une belle propal irréalisable c'est un peu con.

Pour les titres, apparemment il existe donc des solutions, à voir laquelle serait la meilleure et si ça vaut vraiment le coup, sinon je repasse sur une arial mais bon :(

Pour les images de fond, je regarde aussi les solutions, j'arrive dans les 350Ko en optimisant en jpg et sinon j'ai vu en ligne ça, ça ou ça, donc une solution doit exister en ayant un chargement transparent ou qui reste acceptable.

Pour le skin, ça peu aussi être une option que l'on montre au client sur la maquette mais pour laquelle il y a un supplément qui est précisé sur le devis.
------------------------------------------------------------------
Sébastien Joncour - Graphiste/Webdesigner freelance
www.jonk.fr
------------------------------------------------------------------
Avatar de l’utilisateur
Jonk
 
Messages: 25
Inscrit le: 08/03/2011, à 14:31

Message 17/05/2011, à 09:55


- La lecture peut encore être améliorée c'est sur mais de là à ne pas savoir où regarder...


Tu le montre toi même en surbrillance : La zone de relation client fait un "L", et occupe plus de place que la réservation de voyage ! Sans compter que la recherche d'agence fait partie de la relation client, donc ton bloc violet devrait remonter sur ce bloc, et donc mettre en lumière ma critique : c'est le bordel ;)

Part d'un zoning plus consistant et réorganise tes blocs en fonction.
Directeur artistique web : judbd.com | @judbd
Le blog : mariejulien.com | @mariejulien / L'asso : Métiers Graphiques | @MGAsso
Avatar de l’utilisateur
Julien
La team
 
Messages: 104
Inscrit le: 01/11/2010, à 12:30
Twitter: @judbd

Message 17/05/2011, à 13:16


Tu peux également réaliser de rapides zonings des agences/compagnies pour lesquels tu estimes qu'il y a une vraie réflexion de design de service, et t'en inspirer ;-)
Avatar de l’utilisateur
ncatherin
 
Messages: 13
Inscrit le: 07/03/2011, à 14:29

Message 18/05/2011, à 13:51


Et voilà la V3 avec dans les grandes lignes :

- Une réorganisation des blocs, la disparition de "Top destinations", l'apparition d'un slideshow "Nos coups de coeur", l'offre centrale change automatiquement toutes les 6/8 sec mais l'utilisateur peut avancer ou reculer manuellement (flèches du bas), suivant les offres il peut y avoir plusieurs zones cliquables (ici 2) et l'utilisateur peut choisir les offres qu'il souhaite voir entre 3 catégories "Aventure", "Détente" ou "Romance".

- "Nos agences" est descendu d'un étage, l'icône est parti pour voir apparaitre une carte de France, au passage de la souris sur la région souhaitée le nombre d'agences apparait dessous et le clic renvois vers la page des coordonnées d'agences (une ancre amène sur la ligne de la région cliquée)

- Un bouton accueil en plus dans le menu du haut.

- La recherche s'est rapprochée du reste du menu mais se distingue avec le coin corné.

- Les boutons ont été revus pour devenir plus light et s'harmoniser davantage avec l'ensemble.

- Plus de skin sur les cases à cocher de la recherche.

Pour la validation wcag 2.0 AA, désolé ncatherin mais sur un brief comme ça qui reste du plaisir et pas du boulot (et en plus c'était pas dans le brief :D ) je n'en tient pas compte particulièrement.

Mais je ne suis pas loin quand même :
"Bien que 500 soit le seuil officiel WCAG pour la différence de couleurs, 400 est le seuil défini par l'outil de contraste de couleur de HP. Les valeurs situées entre les seuils de 400 et 500 peuvent être acceptables pour votre site puisque des valeurs de contrastes élevées peuvent être un problème pour les visiteurs dyslexiques.

Orange le plus clair : 410
Orange le plus foncé : 474

Sinon pas mal de vos remarques sont quand même corrigées ou améliorées.


Image

Image
Dernière édition par Jonk le 19/05/2011, à 10:51, édité 1 fois au total.
------------------------------------------------------------------
Sébastien Joncour - Graphiste/Webdesigner freelance
www.jonk.fr
------------------------------------------------------------------
Avatar de l’utilisateur
Jonk
 
Messages: 25
Inscrit le: 08/03/2011, à 14:31

Message 18/05/2011, à 19:30


Jonk a écrit:Pour les images de fond, je regarde aussi les solutions, j'arrive dans les 350Ko en optimisant en jpg et sinon j'ai vu en ligne ça, ça ou ça, donc une solution doit exister en ayant un chargement transparent ou qui reste acceptable.


Je rebondis rapidement là-dessus : 350Ko c'est beaucoup, c'est vrai, mais c'est aujourd'hui assez courant. Je dirais qu'il s'agit surtout d'une question de cible : en l'occurrence, la cible, là, sera ultra exigeante sur la performance perçue du site : j'ai un besoin identifié et je viens sur ce site pour le satisfaire (rien de sexuel), je vais droit au but et tout ce qui me ralentit est perçu comme de la pollution. Une grosse image en fond qui met une plombe à se charger en saccades n'est donc pas forcément la plus adaptée pour ce type de service.

Maintenant il est toujours possible d'optimiser à donf l'image (compression JPG par zones chère à notre ami Vincent par exemple) et de la garder malgré cet avertissement, on chipote un peu là. Et puis il faut bien le remporter, cet AO, alors allons y pour les gros fonds, ça marche toujours.

Et puis Julien, il l'avait fait sur Go Voyages d'abord.
:P
DA web / web dev front • folioBD
Avatar de l’utilisateur
STPo
La team
 
Messages: 31
Inscrit le: 15/11/2010, à 14:02
Twitter: @STPo

Message 19/05/2011, à 09:09


Sur la dernière maquette j'ai ajouté un slideshow, du coup un fond unis ou beaucoup plus light pourrais faire l'affaire mais je pense que les solutions techniques existent.

Sur le lien ci-dessous tu vois 75 sites qui fonctionnent avec des photos en background, pour la majorité le temps de chargement ne dépasse pas 2/3 sec mais d'autres sont plus long ou l'image ne fais pas tout l'écran (24" pour moi), certains n'utilisent que des photos B&W (bcp +light). J'ai remarqué aussi que les images en général ne dépassent pas 1600px de large et la photo reste suffisamment clean même sur du 24", ici c'est pas un site de photographe, si l'image peut se limiter à 1600px, la photo pourrait-être entre 100 et 150ko.

75 Websites Featuring Full Screen Photo Backgrounds

Bref à voir...
------------------------------------------------------------------
Sébastien Joncour - Graphiste/Webdesigner freelance
www.jonk.fr
------------------------------------------------------------------
Avatar de l’utilisateur
Jonk
 
Messages: 25
Inscrit le: 08/03/2011, à 14:31

Message 20/05/2011, à 07:53


Tu peux éventuellement ne pas utiliser une photo pleine largeur qui s'adapte à la taille de ta fenêtre de navigation. Les sites avec des photos plein écran existent, oui, ton lien ne ment pas ;-)

Sur un site dont la problématique est axée sur l'acte d'achat, je rejoints STPo : la cible recherche plus des prix / bonnes affaires. Il ne faut omettre que l'internaute compare énormément. On peut donc supposer qu'il aura plusieurs onglets, plusieurs fenêtres d'ouvertes simultanément, réduisant de fait la taille de la page au minimum requis pour consulter l'information. Ton visuel pleine page peut donc ne pas être perçu dans toute sa splendeur !

Et pour les performance, un site de ecommerce subit des variations du taux de fréquentation assez fortes en fonction de l'activité commerciale (offres promo, soldes, grosse campagne publicitaire, …) et des marronniers (noël / saint-sylvestre, vacances estivales, …).
Avatar de l’utilisateur
ncatherin
 
Messages: 13
Inscrit le: 07/03/2011, à 14:29

Message 23/05/2011, à 19:09


Salut à tous et en particulier à Jonk qui a vraiment super bien bossé.
Comme on est ici pour faire progressé autant trancher directement dans le vif du sujet. Les commentaires dithyrambiques ne font pas progresser les gens, même si je le dis tout de suite, c'est du super taf !

Header :
- J'ai un vrai problème avec le header, et le fait qu'il n'ait pas évolué depuis la V3 me laisse penser que je suis la seule à penser cela. Ton logo vie en mode horizontal c'est une force, il faut en profiter pour réduire ton header et optimiser la zone visible sans scroll.
Image

La rechercher rapide :
C'est vraiment le point d'entrée de ton site. Il faut que l'internaute passe par là pour effectuer sa rechercher et achète son séjour. Graphiquement elle doit se démarquer des autres pods. Par un système de couleurs différentes, et etre plus accueillante.
Les champs entre eux doivent aussi être plus aérés là c'est un peu boudiné/optimisation de la place. Pas grave si les coups de coeur se retrouvent un peu plus bas.

Aussi dès que j'aurais sélectionné le nombre d'enfants l'intitulé va se substitué au numéro. Et je ne saurais plus quel champ correspond à quoi. Donc un intitulé et un champ select bien distinct.

Quant au critère tu peux vraiment en supprimer, telle que Formule, Ville de départ, pensio net budget. Ne ferme pas des portes à l'internaute. Trop de critère l’empêcheront de se dire "bon aller je partirais de Paris", ou " je mettrais bien 200€de plus".
Après si lui est ferme et définitif sur les conditions, là il affiche plus de critères.

Les couleurs:
Les titres sont orange, les boutons sont orange, le texte est orange... Une seconde couleur (vert ?) serait la bienvenue pour hiérarchiser le tout.

La typo:
Pas très sur de l'optimisation du référencement avec une type non systeme. Bon ok là on va chercher loin.

Voici donc mes premières remarques :)
Et je le redis, bon boulot vraiment !
Hypaepa // Graphiste, webdesigner freelance
http://www.hypaepa.com
Avatar de l’utilisateur
Hypaepa
La team
 
Messages: 4
Inscrit le: 01/03/2011, à 19:33

Message 24/05/2011, à 14:32


Merci Hypaepa pour ces très bonnes remarques :

Le header, je suis totalement d'accort, dans la V4 le header sera moins haut, comme dans ton exemple.

La recherche rapide, il faut qu'elle se démarque davantage et sois plus aérée c'est vrai, je travaille ça aussi pour la V4. Supprimer des champs je sais pas, peut-être que un ou deux sont de trop mais le but (selon mon idée) est que l'utilisateur renseigne les champs qu'il souhaite, plus je restreint plus il y a de chance qu'il doivent passer par "plus de critères" ce que je voudrais éviter et si il n'en rempli que 1 ou 2 la recherche se fait quand même.
Le champ "nbre d'enfants" je vais le séparer.

Pour la couleur supplémentaire, avec le slideshow au centre, la pub, les vignettes... peut-être, à voir, faut que je test.
------------------------------------------------------------------
Sébastien Joncour - Graphiste/Webdesigner freelance
www.jonk.fr
------------------------------------------------------------------
Avatar de l’utilisateur
Jonk
 
Messages: 25
Inscrit le: 08/03/2011, à 14:31

Message 25/05/2011, à 16:01


V4 avec header plus fin et partie "Recherche rapide" mise plus en avant, voilà pour les plus grosses modifs.

Image

Image
------------------------------------------------------------------
Sébastien Joncour - Graphiste/Webdesigner freelance
www.jonk.fr
------------------------------------------------------------------
Avatar de l’utilisateur
Jonk
 
Messages: 25
Inscrit le: 08/03/2011, à 14:31

Message 08/06/2011, à 15:26


Je rejoins Julien sur le côté lisibilité.

On dirait que t'as voulu caser plein de chose le plus haut possible, du coup ça ne respira pas.

Bizarrement, sur un site d'agence de voyage, le but c'est de donner envie de voyager, là non. Même l'encart Coup de coeur est trop bas / peu présent.

Limite il aurait fallu utiliser un gros carrousel très visuel, qui te ferait ton fond en même temps, pour plonger les gens dans l'univers.

Faut pas chercher à tout foutre tout en haut, genre ta colonne de gauche avec newsletter / facebook / appli, c'est de l'espace en moins pour ton site à toi, et tes offres.
Je suis un éleveur Pokémon !
Avatar de l’utilisateur
Bluug
 
Messages: 6
Inscrit le: 08/03/2011, à 13:15
Twitter: @Bluug

Retour vers [Refonte web] Agence de voyage



cron

Connexion

Rechercher