A noter

C'est le 707e jour depuis le début de cette aventure !

Nouvelle interface de Loomiz

Publié le 18 jan 07 à 10:17 | Catégorie : Création D’Entreprise | 33 commentaires

Il s’agit plus d’une évolution de la charte graphique actuelle que d’un redesign complet. Le but étant ici de prendre en compte certains commentaires très pertinents émis à propos de la première version de la maquette de Loomiz et de préparer le terrain pour la suivante.

Comme le témoigne les nombreux aperçus ci-dessous, le processus a été plutôt long et fastidieux. Mais en procédant par itérations, je me suis rapproché d’une présentation claire et soignée qui correspond bien à la vision adoptée par Loomiz. Les principaux objectifs étaient donc de :

  1. Faire remonter la publicité en haut de la page (de préférence sous le menu) sans que cela gène trop l’utilisateur.
  2. Mieux qualifier le sujet du site à l’aide d’une phrase d’introduction. ‘Social Stimulator’ est un leitmotiv très réussi mais n’explique pas ce que le site permet de faire.
  3. Mettre en évidence un bouton pour inviter l’utilisateur à sauvegarder un lien. Certains d’entre vous préconisaient un bouton ‘S’enregistrer’ mais je préfère que l’utilisateur commence à utiliser le site. S’il l’adopte, il ne sera pas compliqué de lui demander de s’inscrire.
  4. Augmenter la visibilité du formulaire de recherche.
  5. Réduire la hauteur de l’entête pour que l’utilisateur n’ait pas à descendre trop pour arriver au contenu de la page.

Design N°1

Design N°1

Design N°2

Design N°2

Design N°3

Design N°3

Design N°4

Design N°4

Design N°5

Design N°5

Design N°6

Design N°6

Design N°7

Design N°7

Design N°8

Design N°8

Design Final

Design Final

Je n’ai pas réussi à atteindre tous les objectifs que je m’étais fixé, mais je suis plutôt content du résultat final. Je pense que la charte graphique est plutôt claire et elle évoluera probablement encore, mais par petites touches cette fois-ci. Vous aurez découvert dans ces aperçus un nouveau logo pour Loomiz. Celui-ci s’intègre mieux au design du site et a un aspect plus simple, mais rien ne dit qu’il soit définitif.

Une partie du temps consacré à ce travail concernait la conception graphique du pied de page qui avait été pour le moment laissé de côté. Vous allez donc devoir attendre la prochaine version de la maquette pour le découvrir.

A lire également

Vous pouvez continuer votre lecture sur des sujets similaires en consultant les articles suivants :

Les visiteurs qui ont vu cette page ont consulté ensuite :

A savoir

La rédaction de cet article a nécessité 1 heure et 22 minutes. Si vous le souhaitez, vous pouvez être prévenu de la parution de nouveaux articles en vous abonnant par RSS ou par email.


32 commentaires à propos de “Nouvelle interface de Loomiz” :

  1. J’aime beaucoup cette dernière maquette, cependant pour moi la pub prend beaucoup trop de place et nui à la page.

  2. De tous les aperçus, le dernier est mon préféré. Les pubs prennent de la place, ce serait bien de pouvoir les réduire, mais au fond, elles ne sont pas si dérangeantes que ça…

  3. Il n’y a pas à dire, le design final est le meilleur de tous, à la fois compact, complet, il est attirant, tout en montrant la fonction principale du site et son contenu. Concernant les pubs, je ne les trouve pas gênantes, elles sont bien placées et bien intégrées pour attirer l’oeil, sans trop le détourner du contenu principal. Bon je ne suis quand même pas très amateur du rose/magenta, mais il s’associe bien avec les autre teintes. Donc pour moi cette charte est très bien :) (Je ne dirais pas parfaite, la perfection n’existe pas ;] )

  4. Le design est sympa, par contre quelques idées:
    - Je ne suis pas super fan des couleurs (jaune vs rose)
    - Que se passe-t-il avec AdBlock (extension firefox) ? la pub disparait mais laisse un gros carré blanc.
    - La liste est peut être trop simple l’oeuil doit faire l’effort de détecter les lignes puis de lire le texte pour comprendre de quoi ca parle. Je ne sais pas ca manque de visuels.

  5. Salut Stéphane, j’adore ton blog, en particulier parce que je suis moi-même en train de créer mon entreprise sur le web. Mon RDV à la Maison de la Création de Nantes avait lieu avant hier et hier c’était les Assedic… je te suis à la trace comme tu vois. J’aimerai que l’on puisse rentrer en contact, . Va voir mon lien (site pas à jour mais ca donnera une idée) et envoie moi un mail si ca t’intéresse.

    Toujours est-il que ta nouvelle maquette est à mon sens assez réussie. Je pense quand même que l’entête est encore un peu trop grande. Autre point, j’aurais qq conseils à te donner sur les liens commerciaux (c’était ma responsabilité il y a encore qq semaines lorsque je travaillais pour Benchmark Group, cad pour le JDN, l’internaute, etc.). A mon avis, tu devrais les enlever, au moins dans un 1er temps. On en reparle si tu veux.

    Bonne continuation.
    Ludo

  6. J’ai également une préférence pour la dernière maquette, bien que je pense que l’ancien logo remplissait mieux son office que le nouveau qui n’accroche pas même s’il va bien avec la charte.

    Sinon es-tu certain d’avoir bien réfléchi à tes menus ? Ils te posent énormément de problèmes apparemment et ce n’est pas surprenant : 4 menus énormes comme ça…

    Je donne mon avis rapide, tu en feras bien sûr ce que tu veux : à une exception près tout ce que tu as mis dans Menu serait mieux à sa place en footer, l’exception c’est le “Tour” qui devrait être mis TRES sérieusement en avant pour les nouveaux venus et disparaître ou en tout cas être discret pour les membres. Pour ce qui est des deux menus de bookmarks, ça sent le refactoring à plein nez un truc pareil non ? Deux menus identiques dont seule la “visibilité” change il doit y avoir moyen de rendre les choses plus fluides. Enfin le dernier menu je ne suis pas persuadé non plus qu’il mérite autant d’attention : j’imagine que tu as prévu un autologin, auquel cas le register en haut suffit amplement non ?

    D’une manière générale je trouve l’ensemble assez peu fonctionnel parce qu’une bonne partie des liens sont inutiles dans le cadre d’une utilisation normale quotidienne du site. Tu es en train de nous faire une usine à gaz avec tous ces sous-menus, du coup tu as choisi de cacher l’arborescence puisque la développer prend trop de place et rien n’est plus pénible que de devoir cliquer sur un truc supplémentaire, d’attendre que l’animation (au sens large, la remarque est valable même s’il n’y a pas d’effet Web 2.0) de changement de menu soit terminée, et enfin de localiser le lien qu’on cherche avant d’accéder à ce qu’on veut.

    PS : à chaque fois que j’écris une virgule (,) un point (.) ou un point d’interrogation (?) dans ce commentaire, le DHTML du diaporama qui prend la main, c’est insupportable change les raccourcis STP :)

  7. Bonjour,

    Bref message pour vous indiquer qu’on n’écrit pas 109ème mais 109e. A modifier dans la pastille en haut à droite du site :).

    bon courage pour la suitie

  8. Salut, Stéph.

    Je ne considère pas la pub comme gênante pour un service gratuit “il n’y a vraiment pas de quoi fouetter un chat” (Expression de chez nous, Suisse). Bon si, Ludovic, dis que ce serait mieux de l’enlever c’est qu’il y a une raison ! Je ne la connais pas mais bon, il a travailler pour Benchmark Group quand même :-) Respect :-).

    En ce qui concerne l’interface, ma préférence se balance entre la 5 et la 9, j’aime dans la 5, le logo, qui je trouve s’intègre bien à la charte. J’aime les couleurs jaune, rose et bleu, qui donne une ambiance très douce. Ce que je n’aime pas trop dans la 9, c’est le logo qui prend beaucoup trop de place dans la page. En sachant que beaucoup sont trop flemmard pour scroller 150 pixels, il faudrai peut-être le virer ou réduire sacrement ces dimensions, cela te permettrai en plus de remonter le contenu un plus pour les flemmard :-)

    J’aime bien dans la 9, la manière dont tu as intégré la pub, on croirait presque qu’elle fais partie du contenu.

    Oh, une idée m’ai venue !!! Change carrément de nom, appel le Floomiz, comme dédicace aux flemmards :-)

    Pour le bouton “Save a link” de la maquettes 9, je le verrai bien dans le même esprit que les boutons du menu mais en orange et sur la droite !

    Voila, bravo et continue comme ça :-)

    P.S. Si j’ose te donner un conseil, stop toi sur une interface, et développe le code, de toute manière tu ne pourra pas satisfaire tout le monde, alors a quoi bon changer les couleurs, le logo,… ? SI tu me prend comme exemple, ça doit faire la 30ème interface que j’ai conçue et je ne suis toujours pas convainc “dure de travailler tout seule” !

  9. Un article que je trouve sympa sur le design de sites Web 2.0 : http://www.webdesignfromscratc.....-guide.cfm

  10. Merci à tous pour ces premiers commentaires (et désolé pour la couleur, mais je crois qu’il va falloir s’y habituer). En tout cas, ça me rassure, le design final semble quand même être celui qui plait le plus.

    Jean-Philippe : je n’avais pas pensé à cette histoire d’extensions qui bloquent la publicité. Donc oui, il y aura une large bande blanche qui apparaîtra à la place. Mais de toute manière, c’est un peu normal, non ? Lorsqu’on utilise ce genre d’extension, on s’attend à retrouver beaucoup de ‘blancs’ dans ses pages, non ? En ce qui concerne le menu, peut-être que je devrais en effet augmenter un peu le contraste pour qu’il soit plus lisible.

    Hello Ludovic. Bienvenu à toi dans le monde de l’entreprenariat web ! Je serais content de discuter avec toi du placement de la publicité. Si j’ai revu le design du site, c’est en grande partie pour ça.

    Je crois que tu as fais une très bonne analyse Brice : les menus m’ont en effet posé beaucoup de problèmes. Comme tu peux le voir, j’ai essayé différentes stratégies. Je comptais m’orienter vers une présentation ‘à plat’ comme pour le design n°8. Mais du coup, l’entête devient tout de suite plus conséquente. Ce que je voulais faire, c’est offrir à l’utilisateur une vision d’ensemble afin qu’il puisse comprendre très rapidement toutes les subtilités du site. Bref, j’ai cherché la meilleure façon possible de présenter les menus, et d’afficher tous les sous-menus sans en cacher certains dans le pied de page.

    Al-Kanz : tant mieux, comme ça je gagne de la place. Par contre, pour ma culture générale, est-ce que tu peux m’expliquer pourquoi il faut écrire ‘109e’ et pas ‘109ème’ ?

    Merci pour ton retour Badoux. En effet, il va falloir maintenant donner forme à tout ça. D’autant plus que je préfère largement la partie développement à la partie graphisme !

    Concernant ce problème de prévisualisation de commentaire, je suis vraiment désolé. Je pensais l’avoir résolu lors de la dernière mise à jour du blog, mais apparement ce n’est pas le cas. Je vais revoir ça pour la prochaine version. Mais si c’est trop ennuyant, je peux désamorcer le mécanisme tout de suite.

  11. Pour ma part, j’aime bien la fonctionnalité de prévisualisation du commentaire.
    En tout cas, tous mes voeux de succès pour ton projet.

  12. Stéphane,

    On écrit 109e tout simplement parce que c’est la règle orthographique : 1er, 1re, 2e, 3e, 4e, etc.
    Si vous voulez une source “officielle”, je peux vous la fournir.

  13. Merci Julien !

    Al-Kanz, oui à l’occasion si tu peux m’envoyer ça, ce serait sympa. Je vois partout des ‘ème’ donc si je peux éviter de faire la même erreur…

  14. Stéphane, je précise qd meme pourquoi je déconseille le placement de pub sur ton service, au moins dans un premier temps :
    - en général, le taux de clics est d’environ 1% (nb clics/nb pages vues). Mais toi, tu proposes un service et non du contenu, ce qui est encore plus mauvais pour le taux de clics (les gens ne sont pas en phase de recherche d’info qd ils sont chez toi et souhaitent y passer un minimum de temps)
    - le placement de pub est très mal vu par certaines personnes (je dirai environ 20-30% des internautes), même sur une service gratuit. C’est stupide mais c’est comme ça et le plus drole c’est que cette aversion pour la pub est encore plus forte chez les geeks ou early-adopters (l’utopie du web démocratique et non-commercial). Je sais que tu vises le grand-public mais, au début, tu auras une majorité de geek comme utilisateurs.
    - tu as placé tes liens commerciaux en haut de page, c’est très visible et surtout ca bouffe pas mal de place. Du coup, il faut scroller dès que l’on veut voir + de 5 liens. Sur Delicious, on en voit une dizaine sans scroller.
    - le placement de liens commerciaux en haut de page n’est pas l’endroit qui marche le mieux. cf doc de Google qui parle des “zones chaudes” et des bonnes pratiques pour Adsense
    - la plupart des services web2 comme Wikio ne mettent toujours pas de pub. Chappaz explique qu’il attend que l’adoption de Wikio soit massive avant de mettre de la pub contextuelle. Il sait que le placement de pub est mal vu par les gens et préfèrent donc attendre et ne pas risquer de décevoir une partie de ses 1ers utilisateurs. Pourtant, Wikio est un excellent espace pour la pub contextuelle.

    En gros, je pense qu’en laissant tes liens comme cela, tu risques de perdre des utilisateurs et des influenceurs (ca peut nuire au buzz), une petite partie mais qd meme. En +, tu gagneras presque rien (ex : avec 500 000 pages vues par mois, j’évalue tes gains à même pas 500€). A mon avis, enleve tes liens pour l’instant, acharne toi sur la qualité du service et “l’expérience utilisateur”, fait un max de buzz en france et à l’international. Dans 6 mois, remets les liens (si tes utilisateurs sont super satisfaits par ton service, ca ne les embetera pas beaucoup et ton manque à gagner sera largement compensé).

    Stéphane, cet argumentaire n’est que mon avis. Il est évident que tu fais comme tu veux. Envoie moi ton mail et ton pseudo Skype si tu en as un. On pourra approfondir la question si tu le souhaites.
    A+ Ludo

  15. Hello Stéphane,

    La disposition à l’interieur de l’écran est bien. Mais l’assemblage de couleur rose et orange est difficile. Il vaudrait mieux d’une part, atténuer l’intensité du rose comme dans le design 1 et peut être remplacer l’orange par du vert par exemple. Il me semble même qu’il vaudrait mieux abandonner le rose qui est plutôt une couleur un peu “kitch” pour une couleur plus passe partout.
    A+

  16. Stéphane,

    Voici : http://img181.imageshack.us/im.....auxiy8.gif (bas de page).
    (Tiré de cet ouvrage, qui est une référence : http://www.amazon.fr/exec/obid.....tlibrairie).

    A.

  17. Tout à faire d’accord avec Ludovic, sur la maquette, seulement 1/3 de ce qui est vu est du contenu.

    Je les verrai plus discrètes sur d’autres pages comme sur la description des liens, de plus elles seront plus en rapport avec l’optique de l’internaute.

  18. Salut,

    Super blog et je crois que tu tiens le bon bout pour Loomiz. La charte graphique a vraiment de la gueule.

    A+

    Fab

  19. Je trouve ta maquette trés belle Stéphane. J’avoue que j’aime beaucoup ce nouvel habillage. Tu tiens le bon bout ;)
    Concernant les arguments de Ludovic, j’adhère à 100% à ses propos. Même si ton business model repose sur la pub, je pense que le but au départ est de générer du traffic. Ainsi tout ce qui pourrait nuire au recrutement de nouveaux visiteurs serait trés dommageable pour Loomiz. Lève le maximum de freins qui ralentiraient le buzz de ton site. Si tu es persuadé que la pub ne constitue pas un frein alors fonce. Par contre, s’il y a une seule chance que cela entrave la progression de ton traffic alors réfléchis y encore. Tout comme Wikio, Netvibes qui draine un traffic énorme n’a pas pris le risque de surchargé de pubs son application mais bon Chappaz est encore derrière ;)
    Je te conseille le blog canadien de Stephane Guérin (hé oui ENCORE !) trés instructif car trés imprégné de cette culture outre-atlantique moins complexée par rapport au business, la réussite et l’argent en général. Ce billet m’avait particulièrement intéressé. Il devrait aussi retenir ton attention.

    PS : c’est vrai que les raccourcis de ta lightBox rendent la rédaction des commentaires énervante difficile ;)

  20. En effet, il est peut-être préférable de ne pas afficher de la publicité au début (ou alors plutôt dans le corps de la page, là où ça s’intègre mieux). Je vais analyser tout ça.

    Merci Al-Kanz, c’est super ce bouquin. J’ai un ami qui travaille dans l’édition. Je vais pouvoir vérifier si il est vraiment à la page et si il le connaît.

    Sinon promis, je corrige l’édition de commentaires ce week-end !

  21. Stéphane, you’re welcome :)

  22. C’est bon, la prévisualisation des commentaires en live (excusez du peu) est réparée. Je croise les doigts quand même.

  23. On a encore des désagréments avec les virugles et les points. Le problème intervient seulement aprés avoir lancer ta lightbox.

  24. Bravo Stéphane pour ce design final (et le nouveau logo qui abandonne le vert olive que je n’aimais pas trop ;) ).
    Je regrette juste la home page très visuelle “1 Manage (ou Save ?), 2 Access et 3 Share” (au moins pour un nouveau et pour les inscrits une hompage personnalisée avec des blocs comme podemus ou netvibes !).
    N’oublie pas de travailler le (ou la ?) Favicon (pourquoi pas utiliser l’ancien logo en orange ?).
    Et puis, il n’y a toujours pas de vignettes devant chaque favori, est-ce prévu ?

  25. Salut Didier ! Je n’ai pas encore mis à jour la maquette (je suis en train de le faire), donc pour le moment la page d’accueil n’a pas changé (ni les autres pages d’ailleurs). Il s’agissait surtout ici de vous présenter à quoi va ressembler la nouvelle interface de Loomiz. Par contre, j’ai noté pour le favicon (j’avais pensé à un carré orange avec une flèche vers le bas). Pas de soucis pour les vignettes/aperçus des sites bookmarkés, c’est prévu (avec une présentation type ‘blog’ comme tu le mentionnais dans un de tes précédents commentaires).

    Et si tu recharges complètement ta page (Shift+F5) Stéphane, est-ce que tu as toujours le même problème ?

  26. C’est bon le problème a complétement disparu (j’ai testé sur MAC et PC). Par contre l’effet “slider” sur ton lien “# commentaires” ne fonctionne pas sur FF2 MAC. Pourtant l’effet fonctionne bien avec le “retour en haut de page”.

  27. Bonjour, l’interface est sympatique, seulement (et j’arrive peut être apres la tempête) mais je ne trouve pas que la police et le logo vert sur fond bleu zébré blanc soit pertinent.
    On ne peut que constater l’apparition en force de la couleure verte sur les nouvelles applications web, c’est pas nécessairement un mal, mais la je trouve que ca colle moyen, bon cela n’engage que moi.

    Sinon j’apprécie beaucoup le choix des polices de caractères ainsi que leur taille. Cependant (une fois n’est pas coutume) je trouve qu’il y a un problème de contraste des polices, qui (me) rend la page plus difficile à la lecture que d’habitude.

    Sinon très bon boulot, précis et fin.

    Une question au passage : Elegant, Simple & Addictive => Quel est le nom de cette police ? Elle me fait penser à Fontana mais je ne suis pas certain.

    Cordialement, etienne.

  28. Salut Etienne, et merci pour ton commentaire. Par contre, j’ai l’impression que tu parles de l’interface de la maquette disponible ici et non pas des ébauches de la future version présentés dans cet article (car j’ai en effet abandonné le logo vert sur fond bleu zébré). Sinon, le nom de la police qui t’intéresse, c’est ‘Delicious Heavy’.

  29. Salut l’artiste ! Félicitation pour ce blog et pour l’effort investi dans Loomiz.
    J’ai quelques critiques sur le design final, en toute sympatie bien sur.

    En fait je préfere le teaser 2 que tu présente à cette page : http://www.simpleentrepreneur......teaser-20/

    Les couleurs y sont très agréable alors que sur le design final d’ici à ce rose foncé que je n’aime pas vraiment.Le dégradé bleu d’arrière plan fait fouilli, avant c’était bleu en haut, un menu beige, blanc pour le corps, c’était clair et propre.
    Le logo vert y était plus travaillé aussi, alors qu’ici il n’a pas d’originalité.
    De plus pour le menu, sur le teaser 2 les deux boutons à droit de taille superieur aux autres attire l’oeil, il faudrait reprendre cette idée pour le “save a link”.

    Enfin, pour la publicité. N’en mets pas en homepage, et surtout pas en dessou du menu, ça donne vraiment l’impression que tu guetes le faux clique du menu vers la pub.

    En tout cas bon courage dans cette aventure !

  30. Oui CédriCS, je pense que je vais basculer (dans un premier temps en tout cas) la publicité en bas de la page. Je vais néanmoins démarrer Loomiz avec, car je préfère habituer les utilisateurs à sa présence, quitte ensuite à optimiser son placement. Encore merci à Ludovic pour ses excellents conseils !

    Pour les couleurs, je crois à la vue de tous les commentaires qu’il sera difficile de mettre tout le monde d’accord. Je suis maintenant plutôt satisfait du résultat, donc on va commencer comme ça (sinon quand est-ce que je commence le développement, moi ?). Et si Loomiz marche bien, et bien on fera intervenir une vrai star du web design.

  31. Salut Stéphane,

    Tout d’abord je tiens à te féliciter pour ton courage et pour tout l’excellent travail que tu accompli sur ton projet.

    Revenons à ta nouvelle charte graphique. Il me parait clair que ton design final est beaucoup plus pratique que ta première maquette. Cependant je regrette que cette nouvelle version perde la chaleur que dégageait la première. Je la trouve beaucoup plus froide et moins conviviale. Cette appréhension que j’ai viens surement du fait que les couleurs choisis se marient moins bien que celles de ta première maquette.

    Qui plus est, l’ancien logo donnait une identité graphique à ce service. Et celui-ci était remarqué d’un coup d’oeil sans aucun effort. On peut critiquer sa couleur ou encore son intégration dans une charte graphique, mais il donnait de la personnalité au service.
    Je pense que ton nouveau logo perd en caractère, il en devient presque banal! Et comme tu le résumais très bien dans un ancien billet, un logo est très important. Je dirais presque que celui-ci est l’âme d’un site.

    Bien entendu tout ceci n’est que mon avis personnel et n’engage que moi.
    En tout cas je te souhaite une bonne continuation dans ton projet qui a mes yeux est prometteur.

  32. Hello Tiagut, et merci de nous avoir fait partager ton avis. C’est vrai que l’interface est moins contrastée que la précédente, mais je voulais surtout qu’elle soit plus claire. Et tu as raison, le nouveau logo est plus banal, mais en contre partie il est moins ‘risqué’ et plus facile à intégrer grâce à son format rectangulaire. Mais c’est tellement compliqué d’élaborer une identité graphique qui soit accrocheuse (enfin je veux dire pour moi qui ne suis pas du métier) ! En tout cas, je prends bonne note de tes remarques. Et si tu connais un spécialiste qui puisse m’aider (gratuitement, je n’ai pas le choix pour le moment) dans ce domaine, je suis preneur !

Ajouter un commentaire

Les informations obligatoires sont indiquées par une étoile rouge *.


Un rétrolien à propos de “Nouvelle interface de Loomiz” :

  1. Blog des developpeurs de Gobseck
    Le 7 février 2007 à 12:27


A Propos

Pas facile de franchir le pas et d'abandonner un poste de consultant. Mais depuis octobre 2006, je me consacre entièrement à la conception d'un nouveau service Internet et au montage d'une société.

Ce blog raconte le parcours d'un entrepreneur dans la net économie et aborde de nombreux aspects pratiques, juridiques et financiers liés au développement d'un business sur Internet.

Lire la suite…