Sebastián Thüer

Comunicación, diseño y tecnología

Diseño Web

Anatomía de una landing page perfecta [infografía]

· ·

Técnicamente se conoce las «landing pages» (páginas de aterrizaje es una traducción horrible) es la página de entrada del usuario a nuestro producto o servicio. Normalmente, llega aquí luego de haber hecho clic en un aviso, resultado de Google o enlace publicado.

Hay muchas técnicas para persuadir usuarios y generar confianza pero todo puede arruinarse si no hay un buen diseño que permite ver con claridad cuál es la propuesta, su valor diferencial y permitir realizar la acción del usuario de forma rápida y efiza.

Esta infografía analiza algunos de los elementos más comunes de este tipo de páginas a la cual hay que prestarle especial interés porque de ella dependen que muchos empleados de empresas con negocios en la web cobren su sueldo a fin de mes.

Vía KissMetrics.com

Ubicación y diseño de botones en cuestionarios online

· ·

En apariencia, ubicar un par de botones debajo de una encuesta para continuar o retroceder es una decisión sencilla. Tiempo atrás publicaba un post sobre la usabilidad y los botones atrás / adelante donde cuestionaba la solución que una prestigiosa consultora había implementado: ubicar el botón de siguiente a la izquierda, en lo que parece un lugar anti natural y extraño.

Ahora llega la evidencia a través de un estudio elaborado por Mick Couper, de la Universidad de Michigan y Reg Baker, de la consultora Market Strategies International. Los investigadores publicaron el artículo Placement and Design of Navigation Buttons in Web Surveys donde reconocen que la simple ubicación de estos botones es un tema de discusión y que hay muchas diferencias de criterio.

La decisión más habitual es colocar el botón siguiente a la derecha. Así lo hacen los navegdores web, los buscadores como Google y es normalmente como se paginan las pantallas en la web. Colocar el botón siguiente a la izquierda sigue otra convención: seguir los lineamientos de la interfaz de Windows que siempre coloca la opción más habitual sobre este lado.

Una tercera posibilidad es ubicar ambos botones alineados a la izquierda uno debajo de otro. Finalmente, la cuarta variante es directamente ocultar el botón de atrás lo cual anula la posibilidad que el usuario corrija sus respuestas.

En total, las cuatro opciones habituales son estas:

Siguiente a la derecha, Anterior a la izquierda.
Siguiente a la derecha, Anterior a la izquierda
Siguiente a la izquierda, Anterior a la derecha.
Siguiente a la izquierda, Anterior a la derecha
Siguiente y Atrás a la izquierda con Atrás al final.
Siguiente y Atrás a la izquierda con Atrás al final
Siguiente a la izquierda, sin botón Atrás
Siguiente a la izquierda, sin botón Atrás

El estudio

A partir de los objetivos del estudio y del análisis de investigaciones previas los autores presentaron 5 alternativas diferentes para el colocar los botones en formularios online:

  1. Botón Atrás en el extremo derecho, Siguiente en el extremo izquierdo
  2. mbos botones alineados a la izquierda, primero opción Siguiente
  3. Botón Siguiente a la izquierda, Botón Atrás a la izquierda debajo de Siguiente
  4. Botón Siguiente a la izquierda, Botón Atrás a la izquierda con hipertexto
  5. Ambos botones alineados a la izquierda, primero opción Atrás

El estudio empírico se realizó a través de un muestreo no probabilítisco entre usuarios mayores de 18 años en los Estados Unidos. A ellos se les solicitó que contestaran unas preguntas relacionadas con el consumo de energía. Utilizaron 3 herramientas online diferentes con un total de 1800 respuestas, 600 por cada una. 

Los resultados que encontraron los investigadores se resumen en la siguiente tabla (clic para ampliar la imagen):

Tabla comparativa de resultados por variantes.
Tabla comparativa de resultados por variantes.

Conclusiones

En primer lugar, parece no haber diferencias significativas en el tiempo que emplean los usuarios según la diferente distribución de botones. No se pudo verificar que colocar la opción Atrás en un hipertexto para hacerla menos visible sirviera de algo. Por el contrario, la opción 5 registró el menor tiempo.

En segundo término, sí se observaron diferencias entre la cantidad de personas que usan la opción de volver según donde se ubique el botón Atrás. En los 2 primeros casos 1 de cada 5 usuarios usó la opción de volver. En cambio, en los casos restantes el uso cayó a menos de 1 cada 10.

La opción ganadora.
La opción ganadora.

En síntesis, el estudio no permite establecer diferencias sustanciales según la ubicación de los botones. No obstante, hay que tomar nota que los usuarios que participaron del estudio están habituados a responder encuestas online. De todas maneras, la opción más razonable parece ser ubicar ambos botones alienados a la izquierda siguiendo el orden lógico de situar primero Atrás y luego Siguiente.

Estudio original: Placement and Design of Navigation Buttons in Web Surveys. Gracias a Sergio Ortega por el enlace.

Mighty Deals, cupones de descuento para recursos de diseño

· ·

Mighty Deals se suma a la moda de los sitios de descuentos pero enfocado en un sector particular: ofrece descuentos para adquirir recursos relacionados con el diseño como packs de iconos, imágenes, templates o libros.

El éxito de sitios como  Groupon -que el año pasado facturó 760 millones de dólares– parece despertar el interés por verticalizar el mercado a través de concentrar la oferta para nichos específicos.

Hasta ahora las opciones de descuento ofrecidas a los diseñadores llegaban a través  de los bundle packs, una colección de recursos de todo tipo donde  siempre encontré más cantidad que calidad. Personalmente, la posibilidad de comprar un producto concreto me resulta más atractiva que una compilación donde más de la mitad de las cosas no las voy a usar.

Diseño web con HTML5: 10 recursos para comenzar ya

· ·

El HTML5 está a la vuelta de la esquina. Aunque la especificación todavía no está aprobada, cada vez más diseñadores y desarrolladores web se animan a iniciar sus proyectos con el futuro estándar. Para que iniciar un proyecto en HTML5 no sea un quebradero de cabeza, acá hay una recopilación de diferentes recursos que permiten comenzar rápidamente el diseño web en la nueva versión del HTML.

Está lista actualiza el viejo post de 2009 con 5+5 recursos para HTML5. Si no tenés idea de HTML5, mirá primero HTML5 para diseñadores web.

1. Modernizr

Moderniz es una librería JavaScript que permite incorporar HTML5 y CSS3 a tus proyectos sin que los antiguos navegadores que no soportan las nuevas tecnologías queden imposibilitados de ver tu sitio. Por ejemplo, se pueden utilizar los nuevos tags semánticos como HEADER, SECTION o FOOTER sin tener que preocuparse por no estar soportados en Internet Explorer.

2. HTML5 Shiv

Una librería específicamente desarrollada para que las etiquetas HTML5 y CSS3 puedan ser interpretadas por Internet Explorer. El proyecto está hosteado en Google Code y no que hay que descargar ni configurar nada. Basta incluir unas líneas en el código y es suficiente.

3. HTML5 Boilerplate

Es una plantilla HTML5 para desarrollar rápidamente un proyecto con las opciones y configuraciones más habituales. No es un framework, sino solo una recopilación de diferentes técnicas y trucos comunes en todo proyecto web que utilice HTML y CSS3.

4. Initializr

Es un proyecto que funciona como una recopilación de diferentes librerías y recursos de HTML5. En su página web elegimos una serie de opciones a partir de las cuales nos genera un ZIP con todos los archivos necesarios. Puede incluir Modernizr, HTML5 Shiv, jQuery, configuración para .htaccess y más.

5. HTML5 Reset

Se trata de una completa plantilla que incluye todos los elementos más habituales en un proyecto con HTML5. Incluye HTML, CSS y JavaScript. Hay tres versiones disponibles que van desde la completa con comentarios muy buenos para aprender y la básica solamente con la estructura general.

6. Switch To HTML5

Un sencillo generador online de HTML5 basado en una serie de opciones que puede definir el usuario. Ideal para comenzar y obtener resultados rápidos sin complicarse demasiado.

7. HTML5 Lint

Con HTML5 la validación del código es un asunto delicado. En lugar de la consistencia que proponía el escricto estándar XHTML, HTML5 vuelve a ser más laxo y mantener el código coherente se hace más difícil. HTML5 Lint ayuda a los desarrolladores a mantener la consistencia original en HTML5 a través de una serie de opciones que validan la escritura en minúscula, el uso de comillas para los valores de atributos, el cierre de todas las etiquetas y otras reglas de sintaxis. Ideal para puristas del código.

8. HTML5 Doctor

Uno de los primeros sitios dedicados a HTML5 que se ha convertido en una verdadera fuente te recursos para este lenguaje con publicación regular de artículos, novedades y algunos tutoriales. También es interesante su sitio hermano HTML5 Gallery con una muy buena selección de sitios web que implementan HTML5.

9. HTML5 Rocks

Otro excelente centro de recursos sobre HTML5 con el auspicio de Google y del que ya publiqué una presentación sobre HTML5. HTML5 Rocks combina información con tutoriales y al mismo tiempo nos deja ver en vivo las mejoras que ofrece el nuevo lenguaje de la web. Para pasar un buen rato recorriendo y aprendiendo.

10. HTML5 Reference Poster

Un impresionante poster de 10 x 7 metros con un buen resumen de las especificaciones del HTML5. Un diseño equiibrado y armonioso junto a el uso de iconos ayuda a identificar fácilmente los diferentes aspectos de la nueva especificación. Un buen recurso de decoración-consulta en la oficina y para clases de tecnología.

#Bonus: HTML5 for Beginners

HTML5 for Beginners

HTML5 for Beginners es un libro escrito por Jeremy Keith especialmente para diseñadores web que quieran iniciarse en los futuros estándares de la web. De manera ágil y sencilla, Keith introduce las principales novedades de HTML5 con ejemplos y casos prácticos. Un texto breves pero tremendamente útil publicado por A Book Apart. Cuesta 18 dólares más envío en versión papel y 9 dólares el eBook (ePub y PDF abierto sin restricciones).

Ilustración principal a partir de una imagen de BigStockPhoto

La web, ¿ecosistema o jungla?

· ·

“Solía ser fácil. Sólo necesitabas un sitio web. Hagas lo que hagas hoy en la web, es una pesadilla si querés optimizar tu presencia”.  Loic Le Meur, de Seesmic, escribió en su blog lo que muchos emprendedores y directores de proyectos están pensando: el ecosistema de la web se está convirtiendo en una jungla.

Llegaron los smart phones y la necesidades de desarrollar aplicaciones para iPhone, Android y –con el acuerdo entre Nokia y Microsoft– Windows Phone 7. Ahora las estrellas son las tabletas como iPad y, dentro de poco tiempo, los dispositivos tácticles basado en Android 3.0 también serán populares.

Además, cada fabricante tiene su propia App Store como Apple y, recientemente, Google. Cada uno con sus requisitos y entornos de desarrollos que obligan a que sean proyectos independientes. Pero hay más: todos quieren replicar el modelo de Apple y ahora los operadores analizan lanzar sus propias plataformas (al menos, Telefónica ya lo hizo). Y en mucha ocasiones, también hay que hacer acuerdos directos los otros fabricantes.

El escenario es complejo por varias razones. El crecimiento orgánico de la web es natural, lógico y saludable pero no deja de ser un dolor de cabeza para quienes buscan diferenciarse.

Un buen sitio no alcanza. Un buen posicionamiento tampoco. La presencia en redes sociales ya dejó de ser novedad. Llegar a los líderes de opinión es cada vez más difícil. Y el mundo de las aplicaciones es complejo de gestionar porque se trata de un espacio cerrado donde cada fabricante hace y deshace a voluntad.

 ¿Realmente todo producto o servicio necesita de web + SEO + Social Media + Apps para el dispositivo de moda? ¿Hasta cuando se le seguirán sumando capas a la web?

La salida parece estar en HTML5, la esperada nueva versión del lenguaje en cual se escribe la web que se ha mantenido prácticamente inalterable por más de 10 años.  Sin embargo, la aprobación del estándar se demora y mientras tanto la tecnología y los creadores de software siguen avanzando.

Mientra tanto, es probable que leamos más post como los de Le Meur.

Foto por BigStock