Trucos Optimización » Diseño

Ejemplos de Landing Pages :: Generación de contactos

Eduard Barredo — Fri, 11 Jun 2010 17:35:56 +0000

Segunda entrega de la colección de ejemplos de landing pages. En esta ocasión os planteamos una posible página destinada a la generación de contactos interesados en un producto o servicio determinado.

El ejemplo que os proponemos es de lo más genérico, pero hay algunos elementos interesantes que no debemos olvidar:

Look&feel del sitio web pero con las mínimas opciones de navegación posibles.
El formulario es una buena forma de conseguir contactos pero no nos olvidemos de nuestro teléfono y dirección. Situarlo en la esquina superior derecha es muy habitual y el usuario generalmente lo conoce, a la vez que no invadimos la zona izquierda de alto impacto visual.
Gran peso visual del nombre del producto.
Reducción al máximo de ruido y contenido innecesario.
Contenido de forma esquemática y con pocos párrafos
Posible inclusión de una imagen de producto o de público objetivo a captar.
En el formulario… Sólo los campos estrictamente necesarios. Cuantos menos mejor.
Una llamada a la acción clara y concisa.

¿Queréis algún ejemplo en particular? Deja un comentario o hablémoslo en Twitter: @edubarredo. ¡Y todo sin cobrar!

Ejemplos de landing pages :: Pre-lanzamiento

Eduard Barredo — Tue, 25 May 2010 09:08:32 +0000

Primer wireframe de la colección de ejemplos de landing pages. Empezamos con una página destinada a generar leads para una web de reciente creación. Poco contenido, algo de misterio y una acción muy clara: “Dame tu e-mail si quieres ser el primero en saberlo”

Negocio Web = 50% Egoísmo + 50% Generosidad

Daniel Rodríguez — Fri, 14 May 2010 16:11:14 +0000

Si quieres hacer negocio en Internet, se mitad altruista y mitad hombre de negocios. Tu lado altruista es tu lado generoso, siempre preocupado por el bien de los usuarios. Tu otra mitad es egoísta, preocupada por la buena salud de tu bolsillo.

50% Egoísta

Cuando quieras mejorar tu web, se egoísta. Pregúntate:

¿Cómo hacer que mi marca sea recordada?
¿Cómo conseguir seguidores en Twitter?
¿Cómo hacer rentable la publicidad?
¿Cómo ser el primero en Google?
¿Cómo ganar más fidelización?
¿Cómo conseguir tráfico?
¿Cómo ganar dinero?
¿Cómo ser viral?

50% Generoso

Cuando quieras mejorar tu web, se generoso. Pregúntate:

¿Cómo lograr que el usuario encuentre lo que busca?
¿Cómo crear diseños agradables a la vista?
¿Cómo crear un menú de navegación óptimo?
¿Cómo mejorar la experiencia de usuario?
¿Cómo evitar errores de navegación?
¿Cómo hacer una página web rápida?
¿Cómo hacer que todo sea fácil?
¿Cómo dar sugerencias útiles?

Egoísta generoso. Generoso egoísta

El truco es conseguir ser las dos cosas a la vez. Hacerse preguntas egoístas teniendo una actitud generosa, hacerse preguntas de intención altruista sin perder de vista la importancia del negocio.

Nos vemos en twitter @drodriguezlopez

4 reglas de oro para todo call-to-action

Daniel Rodríguez — Fri, 09 Apr 2010 07:08:09 +0000

Si el link es el rey de Internet, el call-to-action no se queda lejos. Estamos rodeados de botones y cada dia pulsamos unos cuantos con esa mano virtual llamada cursor. “Buscar”, “Comprar”, “Aceptar”, “Cancelar”, “Descargar”, “Iniciar sesión”, “Enviar”, “Pulsa aquí”, ¿Por qué?, “Tú pulsa”, etc.
Los hay de mil colores y estilos pero ¿Cómo debe ser el botón ideal? Con este post aprenderemos las 4 reglas que configurarían el botón perfecto. Vamos a ello…

Las 4 Reglas de Oro

Affordance
Tal como Donald Norman apunta en The Design of Everyday Things, el affordance es aquella cualidad que un objeto tiene para autodescribir las posibilidades que ofrece y hacerlo de forma perceptible para el usuario. Por ejemplo, el pomo de una puerta y la maneta de otra son mecanismos de apertura que cumplen un mismo cometido, sin embargo y únicamente con su apariencia intuimos que ambos mecanismos requieren diferentes formas de interacción. Es decir, ofrecen affordance diferentes.
Así que la primera regla es conseguir que todo call-to-action tenga un affordance correcto. Esto quiere decir que todo call-to-action tiene que aparentar ser un elemento pulsable.
Un efecto 3D es la clave para conseguir una apariencia pulsable.
En la imagen inferior, el botón de la izquierda tiene una apariencia más bien plana mientras que el botón de la derecha ofrece un aspecto que autodescribe el comportamiento.
Copys descriptivos
Gracias al affordance ya sabemos el como interactuar con ese elemento que vemos en pantalla, ahora necesitamos saber el que o el para que nos servirá pulsar sobre el mismo. Utilizar un copy—o texto—descriptivo será fundamental.
Por norma general el texto que incluyen la mayoría de los call-to-action es aquella palabra que describe la acción. Por ejemplo: “Comprar”, “Descargar”, “Suscríbete”, etc. Pese a que estos literales son bastante descriptivos, aún podemos reforzarlos si además incluimos el objeto sobre el que recae la acción. Por ejemplo: “Comprar entrada”, “Descargar catálogo”, “Suscríbete al RSS”, etc.
En un primer momento, complementar el texto con el objeto puede parecer innecesario pues el propio contenido de la página daría el contexto necesario. Sin embargo, el propio peso visual de un call-to-action puede dirigir nuestro foco de atención hacia el mismo sin haber realizado un previo escaneo de los contenidos. En este caso, contar un botones que contengan el contexto de manera explícita facilitará el uso sin dar pie a posibles ambigüedades.
Refuerzo cromático
Con un copy descriptivo tenemos un mensaje con contexto, pero aún podemos reforzar el mensaje si hacemos un uso adecuado del color. Es el caso típico de call-to-action con mensajes o acciones de tipo confirmación o anulación.
Sucede que como usuarios procesamos e interpretamos el significado de un color mucho más rápido que leemos el texto que pueda contener el botón. Así, utilizar el recurso del color resultará en una mayor eficiencia al uso.
No hay una norma estándar para este punto, pues está lleno de matices. Un consejo es diferenciar los call-to-action de acción neutral (p.e: “Añadir a favoritos”) de aquellos call-to-action cuya acción puede afectar al flujo de un proceso (p.e: “Ir al paso 2″ o “Cancelar compra”). Para el caso de los botones que ejecuten una acción neutral podemos utilizar el tema de color corporativo de todo el sitio web. Para los botones que aparecen durante un proceso podemos utilizar el color corporativo para aquellos botones que accionen confirmación y el color complementario para aquellos que anulen el proceso.
En la imagen vemos que para la acción “positiva” se emplea el color corporativo, mientras que para la acción “negativa” se utiliza un color neutro que pasaría más desapercibido.
Eye Candy
El punto estético tiene una influencia directa sobre la percepción de las cosas. Si algo está cuidado a nivel visual automáticamente cautivará nuestra atención, nos persuadirá, y nos transmitirá confianza.

La apariencia importa, somos así.

Despedida

Para terminar, un par de enlaces recomendados.

“In Defense of Eye Candy” de A List Apart y
“Buttons Design Showcase“.

Espero que este artículo os sea útil y que lo podáis poner en práctica.

Nos vemos en Twitter @drodriguezlopez

Escuchar al usuario es primordial

Eduard Barredo — Fri, 19 Mar 2010 14:48:16 +0000

Hace ya algunos días Pere Rovira escribía que no sólo de clics se alimenta el analista. En ese artículo Pere destacaba la importancia del método más sencillo y directo de mejorar un sitio web: escuchar a nuestros clientes.

Dado que en este blog damos recomendaciones, trucos y sugerencias para mejorar sitios y/o negocios web, lo peor que podríamos hacer es no predicar con el ejemplo, así que hemos hecho algunos pequeños cambios según lo que nos habéis ido comentado durante ya bastantes meses.

Por si no os habéis fijado, en la esquina inferior derecha tenéis un pequeño icono azul con forma de triángulo. Si hacéis clic en él os aparecerá una pantalla como esta:

Este es un tipo de software llamado “voice-of-customer”, muy en boga últimamente. En nuestro blog hemos utilizado Kampyle, pero hay varias herramientas de este estilo que también funcionan muy bien como son UserVoice, 4Q, Omniture Survey, etc.

Este tipo de programas se alejan de los clics, impresiones o conversiones y simplemente nos aportan los comentarios y valoraciones que hacen nuestros usuarios en nuestro sitio web. Información 100% cualitativa.

Kampyle concretamente te muestra un dashboard al estilo Google Analytics en el que puedes consultar métricas del estilo número de comentarios, comentarios por sección, grado total de satisfacción, tendencias…

Hay muchos tipos de comentarios, algunos buenos:

Teneis muy buen contenido y creo que muy optimizado y actualizado

y otros no tan buenos…

Me parece muy interesante la informacion que se presenta conozco lo dificil que es desarrollar contenido de calidad, Felicidades.

Un poco elevado para los navegantes no especializados. Tenéis muy buenos contenidos. Es estupendo.

Y otros no tan buenos…

Tiene mucho texto y me pierdo

Muchas letras en la parte derecha

Los menus laterales derechos tienen muchos elementos en poco espacio complicando el seguimiento correcto.

En primer lugar gracias a todos por vuestros comentarios, ya sean buenos o malos. De vuestros comentarios hemos aprendido que no os gusta que os agobien con contenido. Queréis los artículos lo más “limpios” possibles sin elementos de distracción ni un bombardeo de opciones.

Que grandes son los pequeños cambios

Con 4 retoques mientras escribía este artículo ya he dado otro aire al blog. Así es la presentación que teníamos inicialmente:

Simplemente eliminando “ruido” ya se nota una mejora en la facilidad de lectura. Un lavado de cara por parte de un buen diseñador con nuestras especificaciones, seguro que daría aun mejores resultados.

Moraleja

No te ahogues en un mar de datos. Escucha a tu usuario. Pregúntale en tu web, pregunta al call-centre cuales son las inquetudes o realiza encuestas online. Optimizar no es sólo testear. Testear simplemente es una técnica más.

¿Cual es vuestra opinión sobre el tema? Os invito a dejar un comentario o a charlar direcamente en Twitter: @edubarredo

Si quieres maximizar empieza por minimizar

Daniel Rodríguez — Wed, 10 Mar 2010 14:44:03 +0000

Yo pensaba que maximizar era algo contrario a minimizar.

Pensaba que el ser minimalista era sólo cuestión de gustos. Que preferir los colores lisos, los muebles escandinavos o la arquitectura de Le Corbusier era algo que no iba más allá de lo estético. Sin embargo, cada vez tengo más claro que lo minimal tiene efectos muy positivos en términos prácticos.

Y es que ciertas características del diseño—que no arte—minimal, lo convierten en óptimo. Óptimo ya que el resultado suele ser algo eficiente, independientemente de si se trata de un taburete, un electrodoméstico, o ¿como no? una página web.

Las características que hacen eficiente a lo minimalista son que:
El minimalismo es simplicidad.
El minimalismo es prescindir del ruido.
El minimalismo es potenciar lo necesario.
El minimalismo es eliminar lo innecesario.

El gran valor que tiene seguir estas premisas es que no sólo se consigue algo minimal en apariencia, sino también en uso. Es decir, eficiente, optimizado para satisfacer su cometido.

Del arte barroco al diseño 2.0

Veamos los siguientes sillones:

El primero de ellos encaja en los cánones de diseño barroco, mientras que el segundo pertenece a un diseño contemporáneo. Ambos sillones sirven para lo mismo, que el usuario pueda sentarse sobre ellos en una posición más o menos confortable. No obstante, los criterios en juego a la hora de diseñar estas piezas varían.

Fundamentalmente, el artista que dio forma al sillón barroco dio un peso importante a lo funcional pero parece haber dado un mayor peso a lo ornamental.
No sucede lo mismo con el sillón contemporáneo donde, a priori, lo funcional prevalece sobre lo ornamental. No hay rastro de apéndices decorativos, innecesarios desde un punto de vista de uso.

Veamos un paralelismo con par de ejemplos que ilustrarían algo similar dentro de un contexto web:

Ambas pantallas tienen un objetivo mayor: servir de login para los usuarios. Como norma, el principal componente de una pantalla de login es el formulario donde deberemos rellenar los campos “nombre de usuario” y “contraseña”.

Observando el peso visual de estos formularios, vemos como Tumblr gana sobre Yahoo. Tumblr opta por un diseño donde se maximiza casi al límite el componente funcional, mientras que Yahoo añade múltiples elementos informativos además del formulario. Elementos informativos que, en la mayoría de los casos, no serán más que ornamentación parásita para la necesidad primaria del usuario: hacer login.

Moraleja

El minimalismo, pese a tener casi como norma el uso de ciertos colores y cierta geometría, es algo que sobretodo busca potenciar la funcionalidad.
Por eso, y para maximizar las conversiones, la eficiencia de uso, o el escaneo de un texto la clave es minimizar aquello que desvirtuaría los principales objetivos.

En cualquier modo, y a pesar de que el gusto es algo muy particular, no creo que ser minimalista quiera decir hacer cosas pobres a nivel estético. Para mi la clave del minimalismo es que son el propio objeto y su funcionalidad los que definen su estética, ya sea un sillón o un formulario web.

¿Que opinas?

Nos vemos en Twitter @drodriguezlopez