Haz Prototipos para tu sitio web

Introducción

Bien... las notas anteriores han tratado los conceptos importantes sobre la forma de definir y encarar tu Estrategia Web.

Ahora, es momento de ir un poco "más allá" y comenzar a implementar estos conceptos aprendidos en la planificación de tu sitio web. Vamos a empezar por el prototipado...

¿Qué es un prototipo web?

Un prototipo web es un bosquejo o modelo inicial a partir del cual se empieza a concebir y desarrollar la idea original del diseño de un sitio web.

Es más sencillo y económico hacer un prototipo, y ajustarlo gradualmente hasta lograr el mejor modelo posible, que hacer un diseño web real y luego modificarlo hasta alcanzar lo que se busca.

Prototipo de Homepage y prototipos de las Páginas internas

Puesto que las páginas web que conforman un sitio no deben ser todas iguales (puesto que no tienen los mismos objetivos y usos), se hace una diferenciación entre los prototipos de cada tipo o clase de página web.

La homepage es la página índice por excelencia (es la página más importante del sitio web), es todo un arte diseñar una buena homepage.

Prototipando una web con papel y lapiz

Si bien existen muchísimos softwares y aplicaciones para hacer prototipos web, estos están orientados a diseñadores/desarrolladores web.

Para el usuario sin conocimientos que necesita "hacerse entender", debe lograr transmitirle a su desarrollador web lo que requiere de la manera más clara posible. Para mi lo mejor es el papel y lápiz, o en su defecto, un prototipo realizado digitalmente con algún editor gráfico (Photoshop, Corel, Fireworks, etc)

A continuación presento un prototipo dibujado de la homepage de nuestro propio sitio web:

prototipo web de la homepage de DDW en papel

Lo que trata de transmitir este boceto es la configuración y disposición de los elementos que contiene esa página web.

Pero antes de dibujar, necesitamos partir definiendo qué elementos de información e interacción deseamos que formen parte de la página a diseñar, en este caso una homepage:

prototipo web de la homepage de DDW en papel

Elementos clave del Prototipado de la Interface gráfica

El prototipado de las páginas web resuelven básicamente los siguientes aspectos:

  • qué elementos deben conformar la interface gráfica (de cada página)
  • cuántos elementos deben conformar la interface gráfica para que haya suficiencia en la información/interacción pero evitando la saturación de elementos (de cada página)
  • cómo debe organizarse la jerarquía visual (en qué orden y disposición van los elementos)
  • qué extensión (superficie visual o tamaño) adecuado deben tener aprovechando eficientemente el espacio bidimensional disponible
  • cómo modularizar la interface gráfica
  • qué patrones de diseño web deben respetarse para estandarizar el diseño de interfaces
  • otros aspectos técnicos y de usabilidad / accesibilidad

Podemos separar la interface gráfica en dos areas

  • Layouts genéricos (partes comunes que se reutilizan en varias páginas web, ej: header, footer)
  • Wireframes (elementos individuales que tienen usos particulares: grilla de datos, buscador, etc)

Factor Jerarquía visual de contenidos

La jerarquía visual de la disposición de los elementos es un factor importante que rara vez se tiene en cuenta.

Todo sitio web eficiente debe definir las prioridades de comunicación, información, e interacción.

En el mundo occidental los elementos deben disponerse de izquierda a derecha y de arriba hacia abajo, respectivamente, para establecer una jerarquía que va de mayor a menor importancia.

Es decir, lo más destacado e importante va arriba a la izquierda, y va perdiendo fuerza o importancia aquello que se relega hacia abajo y a la derecha.

este es el patrón de comportamiento más frecuente mediante el cual los usuarios leen información en las páginas webeste es el patrón más frecuente mediante el cual los usuarios exploran y buscan los contenidos deseados en las páginas web

 

Factor Modularidad del sitio web

Es muy importante, la definición de modularidad porque no todas las páginas deben contener los mismos elementos (recordar las diferencias entre la homepage y las páginas internas)

En el espacio bidimensional de cada página web hay que diferenciar entre tres tipos de areas:

  1. Sector del contenido principal (Información o aplicación)
  2. Bloques contextuales (sidebars con contenidos o elementos de navegación/interacción secundarios, que no deben repetirse en todas las páginas del sitio)
  3. Partes "comunes" del template, que contienen elementos cuya aparición generalmente se repite en todas las páginas del sitio (ej: cabecera y pié de página)

Es preciso aclarar que no todos los prototipos de interfaces web contienen siempre necesariamente todos estos elementos. Existen por ejemplo, webs sin barras laterales, sin cabecera y sin pié de página.

El uso de bloques contextuales facilita la navegación y la ampliación del mensaje o contenidos a transmitir, sin perder el foco del asunto, y manteniendo el interés del usuario en el tema para el cual desea encontrar información.

Una aplicación directa de lo anterior son los menúes de sección. Para sitios web relativamente grandes, seguramente cada "sección" necesitará tener su propio menú, que va a ser diferente del resto de las otras secciones.

La publicidad contextual y la administración de banners según la temática de contexto es otra aplicación posible.

Un ejemplo de prototipo web, para la presentación de un servicio:

[Header]
Imagen institucional de cabecera que contiene logotipo, slogan y puede contener elementos secundarios (fecha y hora actual, buscador, botones, etc)

[Columna lateral]
Menú de navegación
bloques con información contextual
formularios de login o newsletter
banners de autopromoción
publicidad contextual
otros

[Bloque superior] (opcional)
Menú horizontal, breadcrumb, versiones disponibles de la página, información de publicación (autor, fecha, hora, etc)

[Contenido principal]

Encabezado principal (un buen título descriptivo del producto o servicio)

Introducción (detalle o resumen escueto de lo que se ofrece - objetivo: "despertar el interés del usuario en la información, producto o servicio", esto contiene indicios de la PUV)

"Para quien" (texto que explícitamente anuncie para quién o quienes es esta información, servicio o producto) [foto o imagen del producto o alusiva al servicio que se está ofreciendo]
Propuesta concreta (explicación del servicio o producto que se le ofrece al usuario, aquí va la PUV o propuesta única de ventas)
Ventajas y Beneficios Explicación de la metodología sobre Cómo comprar / contratar
Términos, condiciones y requisitos de la compra del producto o servicio Info adicional - Testimonios
Llamada a la acción
(compre ahora!... Consulte sin compromiso!.... Contrate ya!)
[Footer o Pie de página]
(Información de contacto, declaración de Copyright y Aviso Legal)

Técnicas y disciplinas que intervienen en la definición del prototipado web

1 - Usabilidad

Según la Organización Internacional para la Estandarización (ISO):

  • La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso (ISO/IEC 9126)
  • Usabilidad es la eficacia, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico (ISO/IEC 9241)

Existen en la actualidad normas y reglas específicas que extienden estos conceptos (propios del software) a los sitios de internet (aunque un sitio web puede considerarse un software en sí mismo). Según Jacob Nielsen, es el atributo de calidad que mide lo fáciles que son de usar las interfaces web.

En el análisis actual (heurístico) se detallará en qué aspectos falla el sitio web auditado, cuáles son sus falencias técnicas desde el punto de vista de la usabilidad, y qué tipo de optimizaciones se proponen.

[Más info en: http://en.wikipedia.org/wiki/Usability y en http://en.wikipedia.org/wiki/User-centered_design]

2 - Patrones de diseño e interacción

Los patrones de diseño web (o patrones de interacción para la web) son una serie de normas o recomendaciones que intentan solucionar problemas recurrentes en el diseño. Cada patrón ofrece la mejor solución posible a un problema o necesidad específica del usuario en la web.

Empíricamente, ciertos elementos que componen las interfaces web han demostrado (a través de la experiencia acumulada en pruebas representativas estadísticamente hablando) ser más eficientes (para un mismo propósito) que otros. El uso de patrones busca la reutilización de los elementos de interface más eficaces.

[más info en http://developer.yahoo.com/ypatterns/index.php y http://www.welie.com/patterns/]

3 - BenchMarking Competitivo

La práctica del benchmarking competitivo (investigación de los competidores directos) constituye un proceso sistemático y continuo para evaluar comparativamente los productos, servicios y procesos de trabajo en organizaciones y empresas.

El benchmarking sistemático nos permite:

  • disponer del conocimiento de prácticas o modelos de comunicación que funcionan
  • aprovechar la experiencia de los más fuertes (dentro de un determinado rubro o segmento de mercado) que muchas veces se refleja en sus propios sitios web
  • evitar el uso de medios y prácticas que no funcionan
  • descubrir e identificar ventajas competitivas de los productos/servicios de los competidores directos
  • idear un modelo adecuado de mercadotecnia y merchandising
  • conocer su sistema CRM y otros

Conclusión

El prototipo es la mejor forma de aproximarse a la comprensión y concepción del producto final (en este caso un sitio y/o páginas web). En mi opinión la mejor forma de hacerlo es con lapiz y papel. Hasta lograr algo aceptable, seguramente vas a gastar varias hojas de papel. Lo más importante del uso de prototipos es que estos son constantemente perfeccionables.

Cuando hay algo que no te convence, es porque probablemente debas perfeccionarlo.

Antes de comenzar el prototipo de tu web, te recomiendo que hagas una sesión de benchmarking en 3 o 4 sitios web similares al tuyo (de la misma temática, rubro, etc). Identificar y abstraer sus elementos de comunicación e interacción, enriquecerá la idea del prototipo a realizar, y también de la arquitectura del proyecto web.

Recuerda que debes hacer un prototipo diferente, para cada tipo de página web que desees tener en tu sitio, de las cuales seguramente la más importante es la página principal o homepage.

En DDW nos tomamos muy en serio la búsqueda de los prototipos más eficientes y adecuados para cada proyecto web, y por eso te ofrecemos nuestros servicios de planificación web y consultoría para la planificación web