La Historia de los manuscritos es muy antigua y han sido parte fundamental de las grandes culturas, su misión era transmitir conocimientos, relatos o creencias a las siguientes generaciones u otras culturas. Entre los más antiguos están los realizados por escribas del Antiguo Egipto, manuscrito  encontrado en la tumba de Hemaka, alto oficial del faraón Den, datado entre 2914-2867 antes de  Cristo.

Con la llegada de la imprenta y la generación de los primeros textos no manuscritos se han propuesto diferentes patrones o estructuras para presentar la información, algunas de las cuales han demostrado que existen áreas específicas donde los usuarios fijan su atención y exploran el texto antes de leerlo. Incluso aspectos que suelen darse por sentado como es el caso del sistema de escritura influye en la estructuración de dichos contenidos, en la cultura occidental se nos adoctrinó en la escritura izquierda a derecha, en el sistema árabe predomina la escritura derecha izquierda y en la oriental, superior hacia abajo, siendo este último sistema de mayor complejidad cuando se habla de la creación de un  estructura web.

Para aquellos que no somos diseñadores y nos enfrentamos al reto de construir una interfaz desktop o móvil para un  servicio web, la sensación es similar a ir a un maratón sin haberse preparado previamente. La razón de tener una buena interfaz gráfica no solo responde a razones estéticas y de usabilidad, es un asunto vital dentro de  cualquier estrategia de marketing. No basta con que el desarrollo sea acorde a los funcionalidades detectadas en el mercado o establecidas por el cliente, que cumpla con la normatividad de diseño y color; la visibilidad de los componentes de la página, posicionamiento de los elementos  de la misma puede influir ampliamente en los resultados buscados. La estructuración del sitio web responde a la  necesidad de mostrar el contenido de manera propicia para captar la atención del usuario en menos de cinco segundos y transmitir el mensaje correcto de forma efectiva.

Cuando hacemos referencia directa a la creación del  layaout (estructura web) nos debemos referir al uso de patrones de diseño web, los cuales más que imponer posturas o limitar la creatividad, buscan  ofrecen soluciones a problemas de percepción que se pueden presentar dentro del web site por medio de sugerencias  basadas en estudios y experiencias previas que nos permiten saber con mayor precisión cuales son esos sectores de mayor interés desde la perspectiva de los usuarios.

La diferencia en el diseño entre las páginas web a los antiguos textos radica en el mayor control sobre formas, tamaños y presentaciones, sin embargo en la actualidad los contenidos se enfrentan no solo a ser atractivos en una pantalla, deben de serlo en las cuatro pantallas que actualmente están bombardeando con información a los usuarios y esto es un factor de gran importancia para  cualquier emprendedor o diseñador que este estableciendo/implementando su estrategia de  marketing online, pues es necesario saber como el usuario interactúa con los contenidos de la página, también en cómo leen sus contenidos. En un computador, tableta, celular y Smart tv no se lee de la misma forma y el hecho de que se parpadea mucho menos hace que el usuario se canse más rápidamente.

Jakob Nielsen fue uno de los pioneros en estudiar el comportamiento de los usuarios en la lectura web, en 1997 publicó un estudio llamado “How Users Read on the Web”. Muchos de sus conocimientos y estudios siguen hoy vigentes y es uno de los gurús de la Usabilidad a nivel mundial. Expertos en el tema de la usabilidad han realizado estudios sobre Interacción Máquina Persona (Human Computer Interaction – HCI) y estos estudios han conducido a la generación de unas normas.

El lenguaje evoluciona al unísono de la sociedad que lo alimenta, adapta y renueva,  por exagerado que  se lea, han cambiado poco en los último 500 años pues la comunicación visual esta ligada a la lectura, al comparar los libros incunables (del latín incunabulae, en la cuna) producidos en el siglo XV, los de Gutenberg  y los actuales, los cambios son pocos; han cambiado los contenidos y los medios para difundirlos, el usuario sigue siendo humano.

Estructura de un landing page

Siempre se ha dicho “no existen segundas oportunidades para dar una buena impresión” y este popular adagio es valido también en la internet. Sin importar la procedencia del visitante, que puede ser desde una campaña SEM,  otra página donde nos están promocionando o desde una campaña de email marketing. Lo importante es que ha llegado haciendo click en un enlace o banner que le proponía algo, por tanto se debe ser consistente y presentar en la landing page el contenido que este espera. El visitante al ingresar a la página analiza durante  4 o 5 segundos y si no encuentra lo que busca se va. Y esta es la razón de ubicar ciertos elementos claves en la página de aterrizaje.

La estructura de la landing page debe contener los siguientes elementos, acomodados de forma estratégica:

1. Titular, este es el espacio reservado para el título del emprendimiento.

2. Imagen, debe representar claramente el bien o servicio razón que ofreces.

3. Llamado a la acción, es una frase que motive al usuario a pertenecer o  vincularse a la iniciativa.

4. Beneficios, deben de ser reales y centrarse en los punto a favor de usar el bien o servicio en cuestión.

5. Testimonios, es de gran utilidad poder ofrecer argumentos de terceros que favorezcan el producto/servicio que se ofrece.

Estos son algunos conceptos clave hay que tener en cuenta al momento de estructurar un sitio web[1]:

Los usuarios escanean

Cada vez hay más personas y en este sentido proporcionalmente se pasa más tiempo navegando en la web. La lectura en profundidad es cosa de pocos. Nos encontramos inmersos en un medio audiovisual y de ojeo, incluso se habla de la lectura en diagonal.

Los usuarios  leen el 20% del texto de las páginas y la mayoría de los usuarios en la web no leen palabra por palabra (solo lo hace un 16%) como hacemos con un libro o un periódico de papel. En la web, el 79% de los usuarios escanean, buscan palabras o frases que respondan a lo que están buscando, para luego leerlo. [1] Fuente: http//:www.nngroup.com

Usuario leen en forma de F

Nuevamente nos referimos a Jacob Nielsen con su artículo AlertBox donde él plantea que los usuarios leen en tres etapas: 1. Movimiento horizontal en la sección superior de la web. 2. Bajando la mirada sobre el portal y realizando nuevamente un movimiento horizontal corto. 3. Realiza un movimiento lento explorativo sobre la sección final del portal.

Sabemos que tanto empresas o startups tienen como objetivo principal tener tracción y hacer que sus visitantes se conviertan en leads (contactos), para lograrlo es de suma importancia la creación de landing pages dentro de su estrategia de marketing on line,  por los estudios expuestos anteriormente esta claro que las personas no leen, escanean los textos y solo tenemos 0,05 segundos para generar una buena primera impresión en línea.

Así es solo 50 milisegundos para enganchar a alguien y crear interés en tus propuestas de acuerdo a un estudio de los investigadores de la  Universidad de Carleton [2].  Por esto se debe tener mucho cuidado con elementos que significarían la perdida o el enganche de un posible contacto.

[2] Fuente: http://www.tandfonline.com/doi/abs/10.1080/.U3TrJfl5OSo

Aplicando el esquema de Jacob Nielsen acerca de cómo leen los usuarios y sobre poniéndolo en un esquema típico de landing pages se tendría como resultado la gráfica siguiente:

Al ver la línea amarilla que se súper puso en la estructura del landing page podemos concluir que las piezas claves son:

• Titulo
• Imagen
• Beneficios

En este orden el usuario las escanea en su primer acercamiento, por ende debemos colocar especial atención al titulo para evitar que los visitantes se vayan de inmediato, o decidan quedarse a leer lo que se está ofreciendo. Estos son algunos consejos al momento de escribir los títulos:

• Se debe usar frases que reflejen que entiendes lo que necesita el lector.
• Ser conciso en la propuesta,  enviando un mensaje de perdida o de ganancia, para acercar al usuario al  producto o servicio ofrecido.  Por ejemplo: Cada cigarrillo que fumas mata tu futuro y el de tus hijos, en este caso se vende un tratamiento para dejar de fumar.
• Puedes acudir al misterio: A todos nos gustan los secretos y lo que en apariencia esta prohibido  Ejemplo:  “Los secretos financieros que los bancos no quieren que sepas” en lugar de “Guía para invertir”.
• Aprender de los mejores: es necesario ver los landing pages de los expertos o blogs mas famosos, nunca creas que posees la mejor técnica.
• Siempre prueba, prueba y por ultimo prueba que landing page es el que mejor tasa de conversiones ofrece.

El triángulo de oro

La zona que más llama la atención a los usuarios que navegan por internet es la esquina superior izquierda de la pantalla, y la que menos llama la atención es la esquina opuesta.  El Triangulo de Oro es la que primero leen los usuarios, el objetivo es crear interés y así guiarlos con simplicidad y claridad a realizar una acción requerida en corto tiempo.

Los diseñadores se deben de valer de esta información para colocar en esta sección la información que primero quieren que llame la atención del usuario, normalmente el logotipo de la empresa o iniciativa.

Para esto se deben cumplir determinadas reglas como las siguientes:

• Un titulo descriptivo que describa el objeto de la pagina optimizado con palabras clave que el prospecto utilizo en la búsqueda.
• Una imagen del producto o si es un servicio algo que proyecte satisfacción por parte de los clientes y genere confianza.
• Por ultimo la técnica utilizada cuando se habla del producto o servicio es iniciar por los beneficios luego las características, con el animo de guiar al prospecto a que realice la acción deseada, ya sea inscribirse en un boletín de noticias, comprar o la mas apropiada de acuerdo al producto o servicio que se esta ofreciendo.

Scroll y atención en la página

El pliego (fold) es aquella área de pantalla que se puede ver sin hacer scroll vertical en la página.

Alguien podría pensar que a mayor longitud de página, menor cantidad de contenido leído por parte de los usuarios. Pero no es así, no existe influencia entre la longitud de la página y la voluntad del usuario en hacer scroll vertical, según el informe de Clicktale. Según el estudio de CX Partners, a menor contenido por encima del pliego, más motivación del usuario para explorar más contenido por debajo.

Por lo que se debe usar un buen diseño que permita priorizar y distinguir a los elementos más importantes del contenido, otro estudio de Nielsen, reveló que los usuarios prestan o gastan su atención por encima del scroll en un 80.3 %. Y por debajo del scroll solo un 19.7 %.

Se ha venido comparando la forma en que leen los usuarios vs landing pages con el objetivo de dejar claro que muchos conceptos que hoy en día se manejan vienen siendo tratados desde hace siglos atrás, sin presentar cambios trascendentales.

En el caso del Scroll,  se puede emplear esquemas como AIDA[1] (Atención, Interés, Deseo, Acción) modelo que fue enunciado  por Paul Lazarsfeld [2](1901-1976), todo mensaje publicitario debe ser encaminado a conseguir resultados que puedan medirse, cuando un navegante aterriza en nuestro landing page normalmente la ruta que ha seguido es:

1) Vio el anuncio o banner en algún lugar de la red e inicio el proceso,  le llamo la Atención el mensaje y decidió darle clic.

2) Es de vital importancia utilizar las técnicas de persuasión como pueden ser, reciprocidad, Prueba social, Autoridad y otras para llamar su Interés y hacer que se dirija hacia abajo y lea el resto de la pagina,  ya hemos hablado de títulos descriptivos que hagan sentir al visitante que sabemos lo que quiere e iniciar con beneficios claros que toquen su real dolor.

3) Debemos provocar Deseo en el  usuario de realizar la Acción lo cual puede hacerse dejando entrever un contenido claro y corto en los beneficios pero con creando una incógnita que lo motive a seguir leyendo.

Estos son algunos consejos, hay muchísimas mas técnicas de las cuales puedes apropiarte para mejorar cada vez mas tus métricas de conversión.

A continuación un listado de algunas herramientas que ayudan a determinar donde miran los usuarios dentro de tu landing page:

Qualaroo

Esta herramienta puede decir por qué lo están haciendo los usuarios en su web o aún más importante, por qué no están haciendo algo.

Clicktale

Permite saber cuanto tiempo pasan de media los usuarios en cierta zona de la pantalla, grabación del rastro del mouse para cada uno de los usuarios, etc.

4Q

Recoge datos cualitativos a través de un cuestionario al usuario cuando ha estado navegando por nuestra web

Crazyegg

Ofrece diferentes visualizaciones: Permite identificar zonas calientes donde no esperabamos recibir clics y potenciar visualmente estos elementos o reubicar contenidos.

Seevolution

Esta herramienta integra muchas de las funcionalidades de Crazy Egg y Clicktale, es gratis

Heatmap

Permite identificar zonas calientes donde no esperabamos recibir clics y potenciar visualmente estos elementos o reubicar contenidos

Userfly
Es un servicio que te permite comprobar de primera mano y sin lugar a error, el comportamiento de tus usuarios cuando visitan tu página web.

Mogotest

Es una aplicación que resultará de enorme utilidad para los desarrolladores y diseñadores web. Una nueva herramienta de verificación que les permitirá comprobar si sus páginas y aplicaciones web se renderizan y se comportan correctamente en los distintos navegadores.

Clickheat

Ofrece mapas de calor sobre cualquier página HTML

Five second test

Permite refinar  landings y llamadas a la acción, analizando los elementos más prominentes de la página. Tienen una versión gratuíta y de pago.
Sobre los autores

[1] Fuente:  http://es.wikipedia.org/wiki/AIDA

[2] Fuente: http://en.wikipedia.org/wiki/Paul_Felix_Lazarsfeld

gf

 PROTOTIPADO EN PAPEL

El paper prototyping nació de la mano de empresas como IBM, Digital, Honeywell, Microsoft, entre otras, durante gran parte de su historia, en especial en sus orígenes la creación de prototipos de papel ha sido una herramienta usada principalmente por investigadores académicos o especialistas en usabilidad, sin embargo como cualquier herramienta, su mayor potencial esta en las manos de los no especialistas.

Paper prototyping es una variación de testeo de usabilidad donde usuarios realizan tareas e interactúan con una versión en papel de la interface, el usuario juega al computador sin necesidad de que nadie intervenga para explicarle el funcionamiento de las interfaces; la principal diferencia entre el prototipado en papel y usability test radica principalmente en el costo y en el momento de su empleo. En Paper Prototyping solo se necesita papel para representar la interface y el “usuario” va simulando la navegación o administrando el flujo de “pantallas”; en un estudio de usabilidad convencional suele emplearse una versión “semi funcional” de la aplicación misma en su entorno natural: equipo desktop.

Algunas personas consideran que dibujar es una perdida de tiempo existiendo herramientas para prototipar como las presentadas en el artículo ¿Qué son los wireframes y cómo generarlos? (Ver) Es necesario aclarar que un wireframe no cumple la misma función que un prototipo en papel, pues en la fase inicial de diseño el trabajo del equipo debe estar más enfocado en la navegación, flujo de datos y la funcionalidad, que en los detalles del diseño visual. Los wireframes son producidos generalmente hacia el final de la fase de diseño inicial, no al principio, pues en este punto decisiones importantes sobre el producto ya se han tomado.

Un prototipo en papel es una visualización rápida de su idea, el valor artístico del dibujo es irrelevante, el propósito de la creación de prototipos en papel es evaluar la idea detrás de la interfaz de usuario, no el propio dibujo. La efectividad de la técnica depende al entorno donde sea aplicada, no es lo mismo aplicar el prototipado en papel a un desarrollo donde desde el comienzo se conocen las necesidades a resolver a un proceso de descubrimiento de clientes y las interacciones cliente(s), usuario(s), y startup como lo plantea la metodología lean lauch pad. La construcción del prototipo mínimo viable en versiones tempranas debe responder a la identificación clara y concreta de la necesidad que se resuelve al cliente. Paper prototyping es una herramienta para diseñar experiencias de usuario, que al apoyar el diseño iterativo permite involucrar a los usuarios al inicio del proceso de diseño, se muestra las interfaces iniciales a los clientes que van a usar el aplicativo antes haber escrito una línea de código.

La intención de muchos emprendedores es crear una aplicación que resalte de las demás en el mercado y este afán los lleva a saltar cuanto antes al desarrollo de software, todo con la intención de generar  aplicaciones tan únicas, con interfaces gráficas tan especializadas que al final del proceso terminan sirviendo solo a la persona que la creo. El propósito de la creación de prototipos de papel es generar rápidamente ideas de diseño que puedan ser probadas con los usuarios y no como generalmente se piensa, que se crean ideas de diseño que luego serán votadas por los integrantes del equipo de diseño, el calificativo “user friendly” lo debería otorgar el usuario y no el equipo emprendedor.

La creación de prototipos de papel no se trata sólo de diseño, se trata de diseño iterativo: la creación de cosas que el emprendedor puede probar rápidamente y luego descartar o mejorar. Desafortunadamente algunas reuniones de diseño pueden terminar centrándose en puntos no tan importantes para el crecimiento de un startup como ¿el menú de navegación estará en la derecha o la izquierda? ¿Son los colores adecuados? Para los emprendimientos de base tecnológica el tiempo es un elemento clave y se debe aprovechar de la mejor manera, como por ejemplo construyendo un par de diferentes prototipos de papel y poner a prueba dichos diseños con un grupo de interesados o posibles usuarios. Esta acción no sólo ayuda a tomar una decisión rápida, el emprendedor tendrá la confianza de haber tenido más elementos de juicio en cuanto al diseño para tomar mejores decisiones al momento de iniciar la construcción de los wireframes.

Los prototipos en papel utilizan el dedo del participante como el ratón y el lápiz como un teclado y aun cuando sus creadores busquen que las interfaces sean un poco  elaboradas,  un hecho real y a veces casi inevitable  es los prototipos en papel no se caractericen por su belleza, sin embargo siguen siendo eficaces en la detección de muchos tipos de problemas de usabilidad. Por su aparente simpleza no se puede considerar una técnica poco profesional,  pues mientras se logre que el usuario  interactué con el prototipo en papel sin ayuda o necesidad de explicaciones,  significa que se está logrando el objetivo;  lo que es realmente preocupante es construir  un prototipo de espalda al cliente, sin tener en cuenta sus opiniones y comentarios, que deberían ser  lo más importante por cualquier startup.

Para los desarrolladores experimentados  puede  no ser una técnica tan atractiva, ya que argumentarán que su herramienta online favorita cumple con la misma función, y el proceso de copiar y pegar elementos es más sencilla con herramientas digitales  evitando así re hacer interfaces y adicionalmente algunas de estas herramientas ofrecen la posibilidad de ser probados y retroalimentadas en línea. Sin embargo creo que es más fácil cortar y pegar en papel y la fotocopiadora es ideal para replicar elementos cuando se usa la técnica de prototipado en papel y para realizar el proceso de pruebas con usuarios se pueden escanear los bocetos y enviarlos a los interesados, incluso se pueden grabar las sesiones o sencillamente  tomarles fotografías y construir un secuencia.
El pensamiento divergente y  la recursividad son claves. Los prototipos electrónicos se enfocan en una  mejora incremental dejando a un lado el concepto de interacción, en la fase inicial de un proyecto de base tecnológica se busca generar una serie de ideas completamente diferentes, ponerlas a prueba, y combinar las mejores partes de estas en una solución convergente. Bill Buxton afirma que las herramientas electrónicas no son buenos en el apoyo al pensamiento divergente que necesita para obtener el diseño adecuado.

Es natural que los desarrolladores se sientan cómodos frente a un pc/laptop, este parecería su entorno por naturaleza, pero limitar la habilidades del integrante técnico del emprendimiento a dicho entorno es desaprovechar una habilidad clave en aquellos que generan código y esta es: la capacidad de resolución de problemas, las habilidades del desarrollador van más allá del teclado.

Ventajas

• Favorece la comunicación entre el equipo de diseño-desarrollo, los usuarios y los implicados.
• Proporciona retroalimentación de los usuarios sustantiva al principio del proceso de desarrollo antes de haber invertido esfuerzos en la ejecución.
• Promueve el rápido desarrollo iterativo, permitiendo experimentar con muchas ideas en lugar de apostarlo todo por una sola.
• Facilita la comunicación dentro del equipo de desarrollo y entre el equipo de desarrollo y clientes.
• No requiere ningún conocimiento técnico, por lo que un equipo multidisciplinario puede trabajar en conjunto.
• Alienta a la creatividad en el proceso de desarrollo de productos.
• Los problemas funcionales y de usabilidad se logran detectar de manera temprana
• Son muy rápidos de construir y refinar, permitiendo actualizar el diseño de ser necesario
• Los recursos consumidos son mínimos (materiales muy básicos) y económicos, haciendo que cualquier cambio propuesto por el usuario sea factible.
• Resulta menos intimidante que un ordenador (ayuda a superar el fenómeno conocido como tecnofobia).
• No están sujetos a restricciones impuestas por la tecnología -arquitectura del sistema, la base de datos, el ancho de banda, el sistema operativo-, y a pesar de ello ayuda al equipo a anticipar problemas y decisiones derivadas de la tecnología.
• Puede servir como herramienta de marketing y para demostraciones de ventas.

Desventajas

• Por falta de experiencia se puede confundir un boceto creativo con un prototipo
• Su utilidad depende del conocimiento que se halla logrado del mercado
• Los desarrolladores netos pueden no sentirse afines a esta técnica
• No hay un consenso sobre cuál debe ser el nivel de detalle que el prototipo debe implementar ni de la calidad gráfica o de expresividad.
• Por su simplicidad, los prototipos de papel no sirven para realizar evaluaciones detalladas del diseño.
• En el momento de evaluarlo es fácil que se den por supuestas cosas que realmente no están en el prototipo.
• No hay un consenso sobre cuál debe ser el nivel de detalle que el prototipo debe implementar ni de la calidad gráfica o de expresividad.

La construcción de los prototipos de papel parece tan evidente que a menudo se menosprecia esta técnica por su sencillez, pero es necesario que al hacer uso de esta se tengan en cuenta aspectos tan importantes como que el prototipo en papel sea lo más similar en tamaño y forma a la interfaz del dispositivo para el que estamos prototipando, mientras más realista sea el prototipo construido mejor será la realimentación de los usuarios.

A continuación les comparto una plantilla con elementos para la web y móvil para que construyan sus propios prototipos.

paperprototyping

Primer Cafetón Colombia

Mayor información proximo Cafetón: jjcuadros@icesi.edu.co

El Centro de Desarrollo del Espíritu Empresarial de la Universidad Icesi se ha aliado con el MinTIC para desarrollar el programa Apps.co, y estimular la innovación empresarial en el suroccidente colombiano. Este programa promueve el desarrollo digital mediante la potencialización de empresarios e ideas de empresa basadas en las TIC, con la intencionalidad de crear de modelos de empresa sostenibles.

Haz parte del cambio y únete a nosotros.