Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

December 15 2010

Anatomy Of A Perfect Landing Page

Although there is no exact formula to making a perfect landing page, there are some common rules of thumb to increase your chances of making a winning one. If you’re looking for ideas on where to start with your next landing page design, the infographic below is a great place to begin. And remember, after you build your first landing page you must continually test variations to improve your conversion metrics.

Landing Page Design
via Formstack

View an enlarged version of this Infographic »

Reposted bythatsridicarusjrbmstrzadmn

August 02 2010

New Design for Instigator Blog – Lightweight and Simplified

Every so often I feel compelled to redesign this blog. The first redesign was in 2007, followed by another in 2008. It’s been a couple years since the last redesign, and this one is a big departure from the last. It’s still a work-in-progress, but I’d love to get your feedback.

I really wanted to go simple and lightweight. Strip out unnecessary elements and focus more attention on the content. I eliminated a lot of the sidebar noise; which I think most people ignore anyway. It’s still perhaps a bit too noisy over there – but I added a list of categories and a tag cloud in an effort to draw attention to older, but still valuable and relevant content.

The home page now only shows one post, with links to a few other recent ones. This is to shine a spotlight on the most recent post.

I put a “related posts” plugin back in, again hoping that it gets people digging further into the content. My bounce rate is quite high, and time spent on the site is low — I’m looking for ways to improve both those metrics.

I put the “subscribe” options at the top but also part-way down the sidebar. My goal is to increase subscriptions (via email, RSS or Twitter), and people will notice the colorful icons as they’re reading a specific post.

The footer (for now) has almost nothing in it. I’m still not convinced there’s anything meaningful you can’t put in the footer of a blog that increases key metrics like generating traffic, engagement, etc. But I’m open to suggestions.

I think the design is more personal, even though it’s a bit starker. The tagline is personal, my picture is more prominently displayed (although I need a new picture too!) The “contact” link is also more prominent. In some ways (at least to me) it feels more welcoming. Less can truly be more.

This wasn’t a rigorous re-design process. I went looking for a premium WordPress theme, found Minimal and decided to give it a try. I’ve made some modifications (I always enjoy hacking around in WordPress), but they haven’t been drastic. I do believe it’s important to have great design for your blog. In 2008 after redesigning Instigator Blog I wrote a guest post on ProBlogger about the experience. Design matters. But there are so many good premium themes out there that you don’t necessarily have to start from scratch.

I’ll be tweaking here and there for the next little while. I’m not entirely satisfied with everything on the site, but I’m very pleased with the overall look. It speaks very well to how I feel right now and to my near-term goals. I’m trying to simplify, clean up, discover, free myself and focus. Instigator Blog has always been a reflection of me; and I welcome you to its new look & feel.

All comments and feedback are welcome!

April 20 2010

Le design interactif est transparent

Lorsque les «Club Price» ont commencé à s’implanter au Québec, plusieurs personnes proclamèrent haut et fort leurs échecs imminents. Selon eux, les consommateurs québécois n’allaient pas se sentir à l’aise dans un immense entrepôt gris et fade où on proposerait une panoplie de produits de gros formats.

Ils eurent bien tord.

Maintenant appelée Costco, cette entreprise fait dorénavant partie de nos habitudes de consommation. Son succès peut s’expliquer par le fait qu’elle se soit concentrée à réduire les frustrations, en offrant entres autres un grand nombre de places de stationnement et de gros paniers pouvant se mouvoir facilement dans de larges allées. On y retrouve un grande variété de produits de tous les jours dont les prix sont clairement indiqués en gros caractères.

Malgré ce que l’on peut croire, le design de ces magasins longuement réfléchis permet de réduire au maximum les frustrations des consommateurs.

La meilleure interface est celle que l’on ne voit pas.

Dans un grand magasin, le consommateur s’attarde rarement au fait que l’air climatisé lui offre une température adéquate, lui permettant une expérience de magasinage de qualité. Sur le web, le consommateur ne souligne que rarement la conception d’une page de coordonnées bien faite puisque cette dernière lui aura permis de rejoindre son objectif rapidement.

Lorsqu’une interface répond aux exigences de l’interlocuteur, on ne lui porte plus vraiment d’attention. Pour preuve, nous connaissons tous des sites comportant peu de couleurs et presque absents d’images mais qui sont pourtant des incontournables du web.

Première étape vers un design transparent

Pour que l’interface devienne transparente, il ne suffit pas de connaître ce que font vos utilisateurs, mais qui ils sont. Les tests d’utilisabilité de type observation offrent une première étape intéressante car ils permettent de bien cerner vos utilisateurs. Commencez avec deux heures par semaine: les frustrations les plus communes ressortiront rapidement. En augmentant graduellement le temps d’observation, vous découvrirez ce que vos internautes aiment et ce qu’ils recherchent dans votre produit web.

Avec chaque amélioration, l’interface deviendra de plus en plus transparente. Vous ne pourrez que vous concentrer sur l’essentiel: vos clients.

April 12 2010

Un design pattern pour le big footer

UI Patterns a sorti hier une intéressante proposition de design pattern pour le big footer, ce pied de page dans lequel l’auteur d’un site va concentrer un ensemble d’informations d’informations et de navigation fondamentales communes à l’ensemble du site. Fan du big footer depuis des années, j’ai eu l’occasion de l’implémenter à plusieurs reprises sur ce site avant finalement de le retirer dans la version actuelle… pour l’instant.

UI Patterns Fat footer

Le big footer permet de répondre à la problématique suivante : comment offrir un accès rapide à des sections du site fréquemment utilisées qui ne relèvent pas de son architecture hiérarchique. Tout un programme ; encore faut-il l’utiliser à bon escient.

Quand utiliser le big footer ?

UI Patterns recommande d’utiliser le big footer dans les cas suivants :

Utilisez le big footer comme navigation secondaire dans un site Web, surtout si vous voulez lui attribuer toute la largeur de la page.

Ne l’utilisez en revanche jamais comme navigation primaire. Évident, mais ça va toujours mieux en le disant. Le choix de Darren Rowse, par exemple, d’utiliser le pied de page afin d’afficher ses catégories est plus que discutable.

Big footer pro blogger

Cela implique donc qu’il ne doit pas servir à naviguer vers les sections décrivant la hiérarchie de votre site. Si vous tenez un blog, dégagez-en donc la navigation chronologique ou thématique, elles n’ont rien à faire là.

Utilisez le big footer afin d’afficher des informations que l’utilisateur aura intérêt à avoir à sa disposition sur toutes les pages de votre site, sans exception. Préférez des éléments auxquels vos utilisateurs accèderont souvent.

Implémentation :

Toujours selon UI Patterns :

Utilisez le même pied de page sur toutes les pages de votre site – avec la même disposition partout.

Utilisez-le afin de proposer des liens vers des sections fréquemment utilisées de votre site : dernières brèves, inscription à une newsletter, liens vers votre flux RSS etc…

Utilisez-le afin de proposer des liens vers des éléments vitaux de votre site web.

Analyse

En commençant la lecture de Fat Footer Design Pattern, je me suis posé la question du bien fondé d’un tel motif. J’avais peur de voir les propositions prises au pied de la lettre, éradiquant toute créativité dans la mise en place d’un big footer, en gros un effet Smashing Magazine. Finalement, en dehors du second point de l’implémentation, ce design pattern fait plutôt bien son boulot : il donne des directives d’implémentation suffisamment détachées de l’usage éditorial pour ne pas créer une uniformisation de mauvais aloi.

Je ne suis en revanche pas d’accord à divers degrés sur les trois points d’implémentation.

Le premier est sur le fait d’afficher le même pied de page partout. Affichez les mêmes blocs sur toutes les pages de votre site, mais variez-en au besoin le contenu, notamment en fonction du contexte. Vous pouvez ainsi vous en servir en référencement afin de travailler le maillage interne de votre site de manière intelligente pour vos utilisateurs. Ne l’utilisez en revanche pas pour d’afficher des liens en rapport direct avec le contenu visité. Les liens connexes, par exemple, n’ont rien à y faire et doivent rester dans la partie contenu, cohérence oblige.

Le second concerne l’affichage d’informations vitales pour votre site. Si les informations sont vitales, elles n’ont rien à faire sur le pied de page. Le pied de page de Last.fm en est l’exemple parfait : véritable boite à outils, il affiche un ensemble de liens utiles dont on pourrait facilement se passer, mais qui s’avèrent fort pratique pour les différents types d’utilisateurs du service.

Biig footer Last FM

C’est d’ailleurs le problème des éléments mis en avant dans l’article d’UI Patterns. Un flux RSS, ou une inscription à une newsletter sont des éléments de transformation importants qui n’ont rien à faire dans le pied de page.

J’y ajouterai enfin un conseil personnel : utilisez le big footer sur des sites dont les pages sont raisonnablement longues. Un site corporate, un portfolio ou un service web sont de très bonnes destinations. En revanche, sur un blog sur les pages duquel s’affichent la totalité des 10 ou 20 derniers articles, il ne sert – en dehors des pages d’articles – qu’à alourdir inutilement des pages déjà imposantes.


Article original écrit par Frederic de Villamil et publié sur Ergonomie Web, Expérience Utilisateur et Ruby On Rails | lien direct vers cet article | Si vous lisez cet article ailleurs que sur Ergonomie Web, Expérience Utilisateur et Ruby On Rails, c'est qu'il a été reproduit illégalement et sans autorisation.

December 16 2009

Petit projet? Un moodboard est souvent approprié! En voici un exemple.

Voici un document que j’utilise régulièrement pour de petits projets: un moodboard.

Cela permet d’offrir une idée générale et tout de même assez précise d’un projet. Un seul document pour expliquer un bonne partie de la fondation. Simple et efficace

Exemple de moodboard

Voir le moodboard en format original sur Flickr

Qu’est-ce qu’un moodboard? Wikipédia l’explique très bien:

A mood board is a type of poster design that may consist of images, text, and samples of objects in a composition of the choice of the mood board creator. Designers and others use mood boards to develop their design concepts and to communicate to other members of the design team. The mood board may be used as a frame of reference during the design process in a variety of abstract disciplines, for example:

Source: http://en.wikipedia.org/wiki/Mood_board

La prochaine fois que vous me présenté un petit projet, voici surement l’un des documents sur lequel nous baserons beaucoup de nos discussions!

December 11 2009

Le métier de «designer web» devrait bientôt disparaître.

Internet n’est pas le web. Internet est une autoroute où on y transporte le web, ainsi que le courriel, les messageries instantanées et nombreux autres types de communication qui, ensembles, font le succès d’Internet.

33% web / 33% mobile / 33% courriel + 1% réseaux sociaux

Concevoir un produit qui vivra en ligne est un défi toujours plus important car pour rejoindre les consommateurs, plusieurs canaux doivent être mis à profit. Que ce soit à travers divers réseaux sociaux, par courriel et même par l’imprimante, il faut accepter qu’il n’y a pas que le web et qu’un designer doit intégrer toutes les plateformes dans sa réflexion afin d’assurer une expérience globale et complète.

L’exemple classique.

Prenons par exemple un site de recettes qui mettrait tout en oeuvre afin d’offrir une valeur ajoutée à l’ensemble de ses visiteurs:

  • un outil de recherche web efficace pour trouver la bonne recette souhaitée;
  • l’impression d’une recette avec une bonne mise en page afin de bien lire les étapes lors de la préparation;
  • une info-lettre personnalisée où l’on retrouve des suggestions basées sur les intérêts de chacun des destinataires;
  • la possibilité d’envoyer la liste des ingrédients par SMS pour que le passage à l’épicerie se fasse sans papier;
  • gazouiller via twitter afin d’informer sa communauté sur les tendances et les nouveautés;
  • permettre le partage de sa recette chouchou sur Facebook;
  • offrir une baladodiffusion sur divers sujets comme la bonne alimentation à écouter sur son lecteur mp3 au retour du travail.

L’expérience est globale, les interactions sont multiples.

Un seul design ne suffit plus.

Dans ce contexte où une expérience n’est pas uniquement web, il ne suffit plus de recevoir simplement une maquette de la page d’accueil. Le guide de la marque doit aussi proposer l’affichage de votre logo sur des téléphones mobiles. La page d’impression devrait aussi intégrer des «call2actions».

Et le designer web?

Est-ce que le métier de «designer web» survivra? Peut-être y aura-t-il toujours de la place pour cette expertise spécialisée, tout comme il y a des garages qui ne travaillent que la mécanique et non l’électronique de votre voiture.

Nous nous devons de concevoir des produits qui s’adaptent aux nouvelles réalités technologiques et sociales, les expertises évoluent et déjà le designer web n’est plus suffisant.

En effet, si Internet fut tout d’abord conçu pour connecter les gens, la fin des années 1990 fut celle de l’information où l’indexation des documents prit une part importante. Le retour de l’aspect social et des relations humaines s’impose en le nom du «Web 2.0» et Internet redevient le village global rêvé. Au grand dam d’ailleurs de ceux qui venaient tout juste de comprendre comment faire un bon site web qui pousse leur contenu.

Le designer interactif!

De cette nouvelle réalité, de nouvelles expertises émergent comme le designer interactif.

Un designer interactif conçoit un design simple, des interfaces faciles à utiliser, des formulaires qui convertissent, des modèles de navigation efficaces, des applications mobiles, des pages de profils, des tableaux de bord, des flux d’informations (activity stream), des widgets, etc.

Un designer web ne suffit plus.

December 02 2009

Does Design Matter for Small Business?

Does Design Matter for Small Businesses?As Infusionsoft’s senior graphic designer who puts together all the design you see from our company, I thought it was time to help share a little bit of my expertise with you. A common question entrepreneurs and small businesses ask me is if design matters for their business. Trust me, I pick my battles between copy and design on a healthy basis, but I want to elaborate on why design matters for small business.

Take a look around you right now. What do you see? Maybe a computer, product packaging, pens, pictures on the wall, logos, ads and a cell phone? All of these things have been designed. Some better designed than others, but all have had thought put into them whether simple or complex.

The first scenario that comes to my mind when thinking about design (or lack thereof) in a small business is restaurants. When I sit down to eat at a Mom-and-Pop restaurant I’m excited for the possibility of finding a diamond in the rough that provides better food and service than your typical franchise. I get a little apprehensive (more so than others as I’m a designer) when they hand me the menu that has obviously been designed in Word. I start thinking this can go one of two ways – either the food is amazing and I won’t care what the menu looks like or it will be obvious to me why they can’t afford to get the menus designed.

What does this mean? It means that design makes me form opinions and judgments before I have the means to establish a true judgment on the company. This is true of all businesses. We are all visual people even if we are not all designers. People can make false assumptions about you and your business based on your appearance and branding.

Furthermore, a well-designed piece that doesn’t convey the right message is not a well designed piece. In this case, if fewer design gets the correct message across then it is the better choice. Remember you can always test designs before you make a final choice and once you are using something, you can always improve from there.

SMALL BUSINESS DESIGN EXERCISE:

Go collect your business collateral and take an objective hard look at it again for the first time. (Ideally, take it to someone you know who doesn’t know much about your business.)

  • What does it make you/them think of?
  • How does it make you/them feel?
  • What is the message you/they are getting?
  • Are these thoughts and feelings the ones that you want to portray?
  • If not, consider what you can change to improve the image of your company.

Not everyone will have the same impression, but you want to do your best to convey your message through design.

Does design matter for small businesses? The short answer is “yes.” Design does matter in small business; good design contributes to the bottom line because people need to understand how to use and interact with a brand.

In order to help your business succeed, I plan to periodically offer you design tips and ideas that will be helpful to you. If you have any topics or ideas you’d specifically like me to cover please feel free to leave a comment to let me know.

Elisa

[Editor’s note: Elisa can bake a mean batch of goodies and can be found blogging her latest recipes at elisacooks.wordpress.com. -Joe]

Here are some possibly related posts:

November 17 2009

La maquette, un élément très peu important dans la conception web.

Qu’est-ce que je veux dire par là?

Après 15 ans de métier, je remarque encore aujourd’hui que les maquettes prennent une place beaucoup trop importante dans la conception web. Bien sûr, les maquettes sont très utiles mais elle pourraient l’être encore plus si la plupart d’entre nous les utilisions de façon plus appropriée.

Ma vision est claire à ce sujet et je ne suis pas le seul: Amazon, Google, Yahoo et de nombreux autres grands du web ont la même façon de faire. Si vous reconnaissez leur expertise à produire d’excellents produits, leurs méthodes devraient aussi devenir les vôtres.

Alors, quel est le véritable rôle de la maquette? Pour mieux comprendre, prenons un exemple sur la conception d’un immeuble.

Concevoir un immeuble vs produit web: mêmes règles.

Lorsque l’on conçoit un immeuble, plusieurs questions se posent:

  • l’espace disponible (le règlement municipal, le vent, l’entrée principale, le type de sol, etc.) ;
  • les commerces que l’on désire y retrouver (vente au détail, bureaux, logements, etc.) ;
  • le style (prestigieux, conservateur, baroque, etc.) ;
  • le retour sur investissement (1 an, 2 ans, 20 ans, etc.).

Source: Jackson Custom Homes
Source: Jackson Custom Homes

Le résultat de toute cette réflexion est communément appelé le «blueprint». Ce document source devient alors celui sur lequel tous travaillerons.

Quel est le rôle de la maquette? La maquette donne une carte postale du projet et permet à tous de comprendre à quoi le projet pourra ressembler, comment le projet pourra prendre forme.

Il ne viendrait pas du tout dans la tête de l’entrepreneur, de la banque ou de l’inspecteur de la ville de se baser sur la maquette pour évaluer le projet.

Concevoir un produit web. De la théorie à la pratique.

En web, la façon de faire n’est pas différente. La méthodologie qui sert à concevoir le projet se base sur des «wireframes». Bien sûr, les principaux acteurs du projet devront s’entendre sur une meme base de wireframes pour développer le produit, car ceux-ci répondent au pourquoi et au comment ça marche.

Au départ, les wireframes peuvent être griffonnés sur un serviette de papier et tout au long du processus de réflexion, les objectifs se clarifient et les wireframes se raffinent. Résultat: ces documents deviennent si précis que chaque pixel a sa raison d’être et se justifie.


Inspiration: http://wireframes.tumblr.com/

Et la maquette? Quel est son rôle?

Vous aurez donc compris que la maquette n’est pas une phase de réflexion, mais plutôt le résultat concret d’un long processus de conception.

Est-ce à ce moment que nous réfléchissons au logo, aux couleurs, au choix de la typographie ou à la grosseur des boutons? Bien sûr que non; ces éléments auront été réfléchis bien auparavant car ils sont intrèsequement liés à l’expérience et au comportement de l’utilisateur ainsi qu’à son rapport à la marque.

La maquette propose donc une vue d’ensemble du projet. Pour reprendre la précédente analogie, une maquette est la carte postale qui explique tout en une image. On l’affichera publiquement pour bien promouvoir le projet mais pour du solide, on se fiera à l’architecture (wireframes).

Répondre avant tout au pourquoi et au comment ça marche.

La prochaine fois que vous concevrez un produit web, faites comme la plupart des entreprises web qui ont réussi en vous adressant à un architecte web. Il s’assura que votre projet fasse du sens. Il répondra à vos interrogations avec un plan bien défini; il vous expliquera pourquoi en se basant sur tout les aspects; il vous dira comment ensemble vous utiliserez les wireframes pour traduire le tout.

Pour terminer, n’oubliez jamais: la maquette n’est qu’un reflet des décisions que vous avez pris auparavant, et non l’inverse.

November 16 2009

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl