1. Empieza con las preguntas clave

-¿Qué colores son los que más te gustan/atraen?

-¿Existe algún color que transmite bien tu marca (o aquello que haces o que representas)?

-¿Hay algún color que te provoque rechazo o que, simplemente no quieras utilizar?

-¿Qué valores/sensaciones quieres transmitir a tus clientes?

-¿Cuál es el objetivo de la marca que quieres construir?

2. Estudia a la competencia

Merece la pena dedicar un tiempo a estudiar las marcas de la competencia, y esto es así por dos motivos:

I. Encontrarás buenas ideas en las mejores prácticas

Lo mejor es aprender de los mejores. Encuentra buenos trabajos y analízalos para encontrar la inspiración que necesitas.

II. Podrás evitar construir una imagen demasiado similar a la de tu competencia cercana

Puede que a ti te encante el azul oscuro, pero si tu principal rival ha elegido el azul oscuro para su marca, es muy posible que tu propuesta se vuelva indistiguible de la suya.

Es verdad que en el mercado freelance la competencia es tan amplia que no resulta sencillo identificar a los competidores directos. Aún así, presta atención a los profesionales de tu mismo nicho y de tu mismo radio de acción.

3. Conoce lo que los colores dicen

Cada color transmite emociones distintas. Resulta muy útil conocer cuáles son las asociaciones típicas: por ejemplo, los rojos inspiran energía y cierta agresividad, los verdes claros transmiten tranquilidad, los azules oscuros seguridad, etc.

Estas asociaciones son, seguramente, culturales, pero la comunicación consiste precisamente en eso, en dominar el lenguaje social. Así que resulta fundamental conocer el mensaje asociado a cada color.

Algunas generalidades:

ROJO. El más cálido y dinámico. Estimulante, apasionado, poderoso, expansivo. En sus formas puras, puede ser utilizado para acentuar, para llamar la atención sobre un elemento concreto, para mostrar poder o pasión. Cuanto más rojo, más energía.

NARANJA. O se ama o se odia. No es tan abrumador como el rojo. Se trata de un color equilibrado, vibrante y energético, sugestivo y atrayente. Puede aportar dinamismo y energía al diseño sin sobrepasar al usuario.

AMARILLO. El más brillante de los colores cálidos. Es alegre y expansivo. Inspira optimismo y energía. Puede ser utilizado para mostrar felicidad y alegría. En su forma más pura, puede utilizarse en diseños específicos para niños. Con tonos más oscuros puede dar un toque de antigüedad al diseño.

VERDE. Este color secundario es el color de la naturaleza. Es tranquilo, equilibrado y rejuvenecedor. Transmite estabilidad. Puede introducir armonía en el diseño.

AZUL. Sin duda, es el favorito, el color más utilizado. El azul transmite confianza y seguridad, calma y espiritualidad. Es excelente para los diseños corporativos.

MORADO. Representa nobleza, abundancia y dignidad, pero también puede inspirar creatividad e imaginación. Las formas más oscuras de morado inspiran lujo y riqueza. Las más claras pueden estar asociadas al romanticismo.

NEGRO. El negro -utilizado como fondo, o en combinación con otros colores más claros- es poderoso, elegante y moderno, y puede inspirar misterio.

GRIS. Transmite calma y neutralidad. En un diseño conservador, puede inspirar una cierta falta de energía.

BLANCO. Inspira claridad, limpieza, esperanza, y apertura. También puede ser asociado con la esterilidad y la simplicidad.

MARRONES

Crema/Marfil. Elegancia y pureza.

Beige. Conservadurismo y piedad. Como el gris, puede ser considerado aburrido.

Marrón. Transmite confianza, experiencia y comodidad.

4. Ten en cuenta las diferencias culturales

Como hemos explicado, el mensaje que los colores transmiten varía en cada cultura. Desde luego, debes tener eso en cuenta si vas a dirigirte a otros mercados y comunidades diferentes a la tuya. Aquí tienes unas cuantas pistas interesantes.

5. Trabaja la mezcla, busca una paleta

No basta con elegir un color. Lo normal es que crees una pequeña paleta con varios colores base, y que ensayes las diferentes combinaciones para garantizar que no desvirtúan el mensaje que quieres transmitir.

Es muy importante -fundamental- asegurarse de que el color elegido para el texto resulta visible sobre el fondo.

6. Prueba antes de decidir

Antes de dar el paso definitivo -imprimir tarjetas y papelería, etc.- pon tu nuevo diseño de marca a prueba. Muéstraselo a otros profesionales con criterio, e incluso a alguno de tus clientes, para comprobar que no genera rechazo. Y prepárate para corregir o afinar detalles.

Debes tener en cuenta que al ser humano le cuesta cambiar, y que por eso los cambios no suelen ser aceptados inmediatamente. Si el trabajo está bien hecho, con el transcurso de los días ese pequeño rechazo inicial -acompañado de dudas- dejará paso a una sólida aceptación.

7. Grandes infográficos sobre el color

Busca, estudia, inspírate. Te animamos a que consultes estos 9 muy buenos infográficos sobre el color.

Puedes consultar el artículo How to pich colors for your personal brand, publicado por Sonia Mansfield en FreelanceFolder.

¿Dónde está el límite?

Evidentemente es lícito atraer al visitante con una propuesta interesante, llamativa, útil, innovadora. Y para ello podemos manejar con creatividad e inteligencia los recursos de que disponemos: las tipografías, las imágenes, los mensajes, los colores, la disposición de las formas, el orden de los contenidos, y un largo etcétera.

Pero lo que nunca deberíamos hacer es tenderle una trampa al usuario para:

1. obligarle a hacer algo que no desea

2. retenerle en nuestras “garras” contra su voluntad

Y es que, cuando el diseño no respeta la libertad del usuario podemos hablar de “diseño con malas intenciones”. En darkpatterns han recogido algunas de las “malas prácticas” que más se han extendido. Os presentamos lo más interesante:

1. Entrar es fácil, salir es muy difícil

Seguro que muchas veces has pensado en lo fácil que es contratar los servicios de una compañía de telecomunicaciones, y lo complicado que resulta darse de baja. Pues siguiendo esta lamentable filosofía, hay diseñadores que consiguen captar al usuario -hasta aquí todo va bien- pero que luego no le dejan escapar.

El ejemplo más claro es el de las newsletters: suscribirse al servicio es muy sencillo; cuando quieres dejar de recibirlas, tienes que estar 10 minutos buscando dónde se encuentra el enlace para darse de baja…

Es una pérdida de tiempo y una falta de respeto por el usuario, que casi con toda seguridad se lo pensará mucho antes de volver antes de confiar en ese sitio web.

2. El usuario decide hacer una cosa, el sistema hace otra

Esta es una de las trampas más antiguas en el mundo del diseño: el usuario elige una opción -un botón, un enlace, una sección del menú- pensando que va a realizar una cosa, y en realidad el sistema realiza otra bien distinta.

Evidentemente, no se trata de un error de expresión, ni de un malentendido. Hay una intencionalidad clara. El texto y el contexto hacen ver al usuario que el resultado de esa opción va a ser A, y luego resulta que el resultado es B.

Por supuesto, el resultado final siempre favorece las intenciones ocultas del diseñador: por ejemplo, para dar de alta al usuario en un servicio, conseguir visitas a una página determinada, etc.

3. Un intruso en la cesta de la compra

El modus operandi es el siguiente: el usuario selecciona un producto en una tienda online y lo añade a su carrito de la compra. De repente, en el paso siguiente, sin que el usuario se dé cuenta, un elemento extraño aparece incluido en el carrito. Se trata de un nuevo producto que “complementa” al anterior. El truco más común es utilizar un radio-button con la opción “Añadir” marcada por defecto.

Es muy típico, por ejemplo, que al comprar un billete de avión, o al alquilar un coche, se nos cuele en la cesta un “seguro asociado”, “un suplemento de prioridad en el embarque” o cualquier otro servicio que seguramente no nos interesa contratar.

Está bien que nos propongan productos relacionados, pero es evidente que la decisión debe estar siempre en manos del cliente. Añadir productos por defecto no es aceptable.

4. Trial trampa

El trial o versión de prueba es un recurso promocional muy extendido. El problema llega cuando, una vez concluido el período gratuito, la empresa comienza a facturar al cliente sin avisarle de forma adecuada, y sin solicitar su conformidad.

Esta situación suele producirse cuando, durante el registro inicial, el sistema solicita al usuario un número de tarjeta de crédito como forma de autenticación (algo bastante común en el mundo anglosajón). En esa fase, se comunica al cliente que la prueba es gratuita, y que no se cargará ninguna cantidad en su cuenta. Pero cuando el plazo de prueba concluye, la realidad es muy distinta.

Una empresa respetuosa solicitaría al usuario una confirmación antes de realizar cualquier cargo.

5. Letra pequeña y opciones seleccionadas por defecto

Una página web, como un contrato, puede contener una gran cantidad de información. Si tenemos en cuenta que en realidad no “leemos” sino que “escaneamos” los contenidos online, es muy fácil que completemos el proceso de contratación aceptando las opciones seleccionadas por defecto, y sin prestar atención a las posibles cláusulas abusivas o engañosas.

El equipo que diseña un servicio es consciente de que muchos usuarios avanzan de forma rápida, sin prestar demasiada atención a los detalles. De ellos depende construir un sistema de pasos honesto:

1. que muestre toda la información importante con claridad

2. que ponga las decisiones clave en manos del cliente

3. y que tenga seleccionada por defecto solo aquellas opciones “favorables” a la mayor parte de los usuarios (para ahorrarles tiempo y esfuerzo)

Por desgracia, muchos servicios están construidos exclusivamente para favorecer los intereses económicos del proveedor, y no dudan en pasar por encima de la libertad del usuario. Por eso dejan seleccionados productos complementarios que encarecen el precio final, “esconden” las opciones menos beneficiosas para la empresa en el interior de las listas desplegables, camuflan información importante en lugares poco llamativos de la página y un largo etcétera de trucos y prácticas poco honestos.

6. Costes ocultos

Esta práctica tiene mucho que ver con el “intruso en el carro de la compra” que hemos mencionado anteriormente, pero suele ejecutarse al final del proceso: cuando llega la hora de pagar por el producto seleccionado, resulta que el sistema añade diferentes cargos de los que ni siquiera habíamos oído hablar. Por ejemplo, impuestos, gastos de envío, etc.

7. Anuncios camuflados

Muchos sitios web -especialmente los de descargas- introducen un montón de enlaces visualmente muy similares, de forma que el usuario no sabe realmente cuál es el que corresponde al producto o servicio que quiere descargarse, y cuál de ellos corresponde al anuncio de un patrocinador.

Es frecuente que el usuario acabe seleccionando un enlace equivocado, que en vez de lanzar la descarga le llevará a la página de un anunciante.

8. Spam “amigo”

Algunas aplicaciones -especialmente las relacionadas con las redes sociales- solicitan al usuario información que en teoría es necesaria para prestar el servicio, pero que luego aprovechan para realizar un envío masivo de mensajes utilizando la libreta de direcciones. El resultado es que los “amigos” del usuario reciben una notificación de un servicio ajeno para ellos que les anima, por ejemplo, a darse de alta. Está claro que se trata de una forma de spam.

9. Uso abusivo de la información del usuario

Hay sitios web que ofrecen servicios gratuitos o a un coste muy bajo, y que para obtener ingresos solicitan al usuario más información personal de la que es imprescindible para prestar al servicio. Después, utilizan esta información para “comerciar” con terceros.

Puede que todo esto se encuentre recogido en las condiciones del servicio, pero por ello no deja de constituir un abuso, y un claro ejemplo de malas prácticas.

Puedes encontrar aquí los ejemplos concretos recopilados por darkpatterns

¿Qué páginas puedo consultar

Estos son algunos de los sitios de consulta más interesantes para los profesionales que se dedican al negocio, al diseño o al desarrollo web, y para todos aquellos que quieren estar al tanto de lo que sucede en el entorno de las nuevas tecnologías:

Los clásicos

Smashing Magazine es probablemente la publicación más conocida sobre diseño y desarrollo web. Proporciona información útil, últimas tendencias, enfoques innovadores…

Wired Magazine. Revista sobre diseño, tecnología, economía y cultura digital. Incluye revisión de productos. Temas muy abiertos. Para todos los públicos.

A List Apart es algo menos generalista que las anteriores. Está pensada para la gente que construye sitios web. Se centra más en los estándares web, y en las mejores prácticas.

Diseños inspiradores, inspiración para el diseño

Inspired. Inspiración para el diseño gráfico.

D-list. Recursos, sobre todo gráficos, para diseñadores y desarrolladores.

Unmatchedstyle. Diseños inspiradores, galería de CSS, podcasts, críticas.

One Page Love se centra en los diseños de una sola página.

Cool Homepages es una galería que recoge cientos de buenos diseños web.

CSSmania es un escaparate de CSS que se actualiza constantemente.

Comunidades de conocimiento web e innovación

Woorkup es una comunidad sobre diseño web, redes sociales, inspiración, tecnología.

Boxes and arrows es una revista/comunidad especializada en la arquitectura de la información, y que recoge ideas innovadoras.

Think Vitamin es un blog sobre el diseño, el desarrollo, y el negocio web.

Más enfocados al desarrollo

Webappers. Recursos de código abierto para desarrolladores web.

Snook.ca Trucos, consejos y direcciones interesantes para el desarrollo web. (Por cierto, el autor, Jonathan Snook, guarda un parecido sospechoso con el showman Andreu Buenafuente .

Global CSS es una comunidad especializada en CSS y estándares web.

Algo más técnicos

Web Scaling Blog. Escalabilidad y rendimiento web.

Scriptia. Javascript y buenas prácticas en castellano.

Martin Fowler. El blog sobre desarrollo software de Martin Fowler.

Ideas, innovación

Ideas4all es una comunidad que se apoya en la inteligencia colectiva para generar ideas y soluciones innovadoras.

Negocio y desarrollo web

El blog de Agustín Cuenca. El mundo del desarrollo web visto en primera persona y en castellano, con atención especial a la metodología ágil y las nuevas formas de trabajar.

Aquí tienes algunos recursos para encontrar y generar ideas creativas. También puedes consultar estos 6 métodos para romper el bloqueo creativo.

*Gracias a la tribu ASPgems por la selección.

- ¿Tienes que dibujar la maqueta o wireframe de un sitio web?

- ¿Necesitas representar un flujo de navegación?

Ya sabes que antes de arrancar cualquier proyecto, lo más útil que puedes hacer es dibujar lo que tienes en la cabeza. De esta forma contarás con una referencia para ordenar el trabajo, para valorar el alcance real, y para detectar los problemas con los que puedes encontrarte. Además, estos esquemas te permitirán compartir la información con el cliente y con el resto del equipo.

Estos consejos y herramientas pueden servirte de gran ayuda:

1. ¿Qué tipo de gráfico me conviene elaborar?

¿Tienes que elegir una forma de presentación para tus datos y no sabes por dónde empezar? Esta recopilación de tipos de gráficos puede servirte como inspiración.

2. Prefiero trabajar con lápiz y papel

Hay gente que prefiere trabajar al estilo tradicional, con lápiz y papel. Muchas veces, sobre todo en la fase de arranque, puede resultar más rápido e intuitivo, y además no pone límites a nuestra creatividad e imaginación: podemos dibujar y apuntar cualquier cosa, como en un cuaderno de notas.

La ventaja es que ahora no tenemos por qué arrancar de un papel en blanco. Aquí tienes unas plantillas imprimibles para que después completes tus wireframes o maquetas a mano.

3. Elaborar wireframes online

- Hotgloo es una aplicación muy sencilla e intuitiva, que te permite elaborar wireframes online arrastrando los elementos básicos al área de trabajo: cajas de texto, combos, elementos de formulario, imágenes, etc.  Puedes compartir los diagramas con tus clientes y colaboradores, y estos pueden comentarlos y editarlos. Tiene una versión beta gratuita aunque, eso sí, par aprobarla hay que registrarse.

- Gliffy también te permite elaborar diagramas online. Va un poco más allá de los típicos wireframes para diseñar una web. Para empezar, seleccionas el tipo de diagrama: de flujo, de redes, de negocio, de interfaz de usuario, planos técnicos, etc. Después puedes compartir tu trabajo con clientes y colaboradores. Es una aplicación gratuita.

4. Cuestión de método

A veces, lo que necesitas no es una herramienta, sino unas instrucciones básicas para ordenar tu trabajo y establecer cuáles son las conexiones entre los diferentes elementos. Aquí tienes un un método realmente útil y sencillo para diseñar el interfaz de tu sitio web.

5. Mucho más

Es evidente que en el mercado existen muchas otras aplicaciones -Axure y Visio son quizá las más conocidas- especializadas en la creación de diagramas. Si necesitas más, aquí tienes otras 16 herramientas para diseñar la estructura de tu próximo sitio web

6. Un poco de inspiración

Y ya que hablamos de representaciones esquemáticas y simplificadas, podemos tomar nota de unos diseños que hacen mucho con muy poco: son sitios web de una sola página, en la que todo el contenido y toda la estructura de navegación está condensada en una pantalla.

Si buscas un poco de inspiración, te proponemos estos 40 diseños de una sola página.

- ¿Hacia dónde se dirige el diseño web?

- ¿Cuáles serán las principales tendencias y claves de éxito en 2010?

La gente de Information Architects ha hecho un pronóstico interesante, que os ofrecemos traducido (libremente) y resumido:

Simplicidad

Todavía hoy muchos sitios web son demasiado difíciles de utilizar. Están repletos de información irrelevante y su funcionalidad es demasiado confusa. En estos sitios, hay 3 elementos esenciales que se echan en falta:

a) Un modelo de negocio

Pocos sitios web tienen un modelo de negocio claro. Muchos intentan hacer dinero a través de una publicidad aleatoria e insistente, pensando que la “cantidad” se transformará automáticamente en mayores ventas.

Pero lo cierto es que los sitios web de éxito, como Google, Flickr, o World of Warcraft, hacen justamente lo contrario, demostrando que la clave está en:

- hacer algo realmente bien

- simplificar

- no apoyarse en publicidad aleatoria

Para hacer dinero hay que tener un modelo de negocio claro, y una estructura de navegación lógica y ordenada. No se trata de apilar contenidos y herramientas, sino de hacer un uso inteligente de los recursos. Menos información aleatoria y más información relevante.

b) Lógica y detalles

Conseguir que las cosas resulten sencillas es uno de los retos más complicados. Hay que pensar mucho y trabajar duro. En otras palabras: para diseñar y construir algo “simple” hay que dedicar mucho tiempo y atención a los detalles.

Piensa en Google. Parece algo muy simple. Como usuario, no te preocupas por los detalles técnicos de las búsquedas. No te importa lo que hay detrás. La “máquina” se encarga de hacer todo por ti, te muestra los resultados de tal manera que ni siquiera te fijas en el diseño.

Este funcionamiento es el fruto de un trabajo y de una delicada atención a los detalles.

c) Autoconciencia

La mayor parte de los profesionales de la web no son conscientes de lo complicada que resulta la lógica de sus sitios y aplicaciones para alguien externo, es decir, para la práctica totalidad de los usuarios. Esto sucede así porque no son capaces de verse desde fuera. Creen que su forma de ordenar las funcionalidades, los contenidos, los productos y servicios es clara, racional, y comprensible para todo el mundo. A veces incluso creen que es la única posible. Pero en realidad, cuando los usuarios llegan a su sitio web se encuentran con un auténtico “laberinto”.

El diseñador debe ser consciente de que su forma de ver y entender las cosas, su forma de ordenar la realidad, no tiene por qué ser compartida por los usuarios. Debe ser capaz de verse desde fuera para salir de sus esquemas mentales y acercarse a los del usuario.

Velocidad

La clave del éxito popular de la televisión reside, en buena parte, en que la web no puede superar la velocidad del mando a distancia. También resulta más rápido cambiar de estación de radio que preparar lo que queremos escuchar en nuestro i-Pod. Es decir: en términos de velocidad, los medios de comunicación tradicionales siguen siendo una referencia importante para el diseño de interfaz. Por eso podemos utilizarlos como mejores prácticas desde el punto de vista de la interacción física.

El éxito de Facebook y Twitter reside en que los mensajes son más rápido y directos, más sencillos de crear y enviar que mediante el correo electrónico. La conclusión es que los diseñadores del futuro tendrán que centrarse en agilizar los procesos, reduciendo el número de movimientos físicos necesarios. La clave puede estar, de nuevo, en el diseño de productos tradicionales: manillas, cajones, botellas de champú.

La belleza está en el interior

La experiencia de usuario se encuentra en el interfaz, no en la superficie. En vez de perder el tiempo discutiendo sobre si es mejor verde o amarillo, resulta mucho más importante centrarse en lo esencial: la interacción que ofrece el interfaz. Lo importante no es la apariencia visual, sino ofrecer al usuario lo que busca y lo que necesita.

Por fortuna, el cambio desde “lo que el director quiere” hasta “lo que el usuario necesita” está ocurriendo también en otros sectores distintos del diseño web: parte del éxito de la Wii y el Iphone reside precisamente en que son más fáciles y cómodos de utilizar que sus rivales.

Principales tendencias

- Estándares. Los estándares -por ejemplo, en las fuentes utilizadas- puede ser un gran paso adelante porque, cuanto más estandarizados se encuentren los elementos que componen la apariencia visual de un sitio web, más sencillo resulta su uso.

- CSS. Los diferentes entornos para el desarrollo de CSS se han convertido en una gran ayuda para los diseñadores.

- Librerías. La librería jQuery UI es otro de los principales apoyos para la labor de los diseñadores: incluye elementos de interfaz especialmente útiles, como formularios de registro, galerías de imágenes, etc.

Contra-tendencia

Los estándares nos ayudan a construir sitios web fáciles de usar en menos tiempo pero, como es lógico, también nos empujan hacia una homegeneización del diseño. Por eso es previsible que repunte una tendencia contraria, que reivindica los diseños diferentes, que tratan de destacarse del resto mediante un aspecto y una identidad de marca muy definidos.

¿Y tú? ¿Cómo crees que evolucionará el diseño web durante los próximos meses?

Puedes consultar el artículo original: What’s Next in Web Design?

Te presentamos unas cuantas listas de “grandes éxitos” para que empieces 2010 cargado de inspiración.

- Los mejores diseños web de 2009. En un año de recesión, los presupuestos en publicidad han sufrido serios recortes. En muchos casos, esto ha hecho que la gente del marketing apueste por la web como herramienta de promoción de bajo bajo coste. Como vas a poder comprobar, el resultado final ha sido un trabajo creativo más que interesante: en D-lists han seleccionado los mejores diseños webs del año.

- 30 buenos diseños de formularios web y páginas de registro. No es fácil conseguir que un cliente se registre en nuestra página web. Pero para muchos negocios, éste es un paso imprescindible. Así que lo mejor es construir una página de registro y unos formularios web sencillos, prácticos y atractivos. Como los que han recopilado en dzineblog.

- Tablón de recursos útiles para diseñadores y desarrolladores. Imágenes gratuitas, plugins, CSS, plantillas, tutoriales de Flash y PHP, fuentes, hosting… Estos son solo algunos de los recursos que puedes encontrar en devlisting.

- Las aplicaciones favoritas de Guy Kawasaki. Guy Kawasaki ha creado una lista con las aplicaciones que para él resultan más útiles y productivas. Puede que ya conozcas muchas de ellas, pero seguramente encontrarás alguna nueva herramienta hecha a la medida de tus necesidades. Por ejemplo, para aumentar tu productividad, o para sacarle el máximo rendimiento a Twitter, a tu iPhone, etc. Solo tienes que echar un vistazo en la lista de favoritos de Kawasaki.

¿Cómo saber si un diseño es bueno o malo? Desde luego, no basta con que nuestro sitio web “tenga buena pinta”. Necesitamos otros elementos de juicio en los que apoyarnos.

Porque, para empezar, ¿quién define qué es una buena imagen y qué no?

Y para seguir: ¿de qué sirve exactamente que un sitio web tenga buena imagen si luego no nos ayuda a conseguir lo que queremos?

Necesitamos un método para medir el diseño. Te proponemos que sigas los siguientes pasos:

1. Entender qué es un “buen” diseño.

Podemos decir que un diseño es bueno cuando nos ayuda a conseguir nuestros objetivos de negocio.

2. Tener claros nuestros objetivos de negocio.

Por lo tanto, antes de abordar cualquier diseño debemos tener claros cuáles son  nuestros objetivos de negocio. Por ejemplo, vender más productos y servicios, obtener ingresos por publicidad, o dar a conocer nuestra marca.

3. Definir los objetivos del diseño.

Con esta información, podemos establecer qué es lo que queremos conseguir con el diseño: atraer usuarios mediante un mejor posicionamiento en buscadores, llegar a  un público objetivo más amplio, conseguir información útil para realizar acciones de marketing, agilizar el trabajo, y un larguísimo etcétera.

Ahora sí estamos preparados para definir una determinada línea de trabajo: una imagen gráfica, una estructura de navegación, una determinada distribución y ordenación de los elementos, etc.

4. Medir el impacto del diseño.

Ya hemos hecho nuestra apuesta: hemos construido nuestro diseño. Ahora llega el momento de determinar si funciona.

Debemos ser capaces de medir el impacto del nuevo diseño en nuestros objetivos de negocio. De ese impacto dependerá el éxito de nuestra apuesta. Entonces podremos decir si el diseño es bueno o no; es decir, si nos ha ayudado a conseguir nuestros objetivos, y en qué medida.

Esto nos lleva al siguiente paso.

5. Elegir las métricas más adecuadas.

Para medir el impacto, debemos apoyarnos en las métricas más adecuadas: aquellas que nos permiten conocer el nivel de cumplimiento de los objetivos que nos hemos marcado.

Métricas más utilizadas

En UI Patterns han recogido algunas de las métricas más comunes. Nosotros hemos las hemos completado:

- Posicionamiento en buscadores. Una posición privilegiada en la página de resultados de Google es como tener un escaparate en la mejor calle comercial. Si conseguimos posicionarnos bien en palabras clave para nuestro negocio, la afluencia de visitantes está prácticamente asegurada.

- Páginas vistas. Los sitios web que viven de la publicidad, y que tienen como objetivo conseguir muchas impresiones de banners, normalmente eligen esta forma de medir.

- Usuarios únicos. Esta es una buena medida para los sitios web que aspiran a captar una porción amplia del mercado.

- Usuarios registrados. Mide el número de personas que se registran en un determinado sitio web. Estos datos pueden ser muy valiosos, ya que dan pie a una posterior fidelización.

- Usuarios nuevos. Mide el número de usuarios que, después de registrarse, han utilizado un servicio o aplicación.

- Compromiso. Mide cuántos de los usuarios siguen utilizando la aplicación o servicio conforme pasa el tiempo.

- Suscripciones a newsletter. Las newsletters, o boletines de noticias y contenidos, pueden ser una buena herramienta de venta: dan a conocer al usuario nuevos productos y servicios de forma no agresiva (existe consentimiento) y le invitan a volver al sitio web.

- Productos vendidos. Para muchos negocios online, esta es sin duda la métrica más importante: ¿cuántos productos y servicios hemos conseguido vender? Lógicamente estos datos son mejores o peores según el dinero invertido.

El ratio de conversión nos da una excelente perspectiva del funcionamiento de nuestro sitio web: nos permite ver cuántos de los visitantes son nuevos, cuántos repiten, cuántos se han registrado, cuántos de esos adquieren un producto o servicio, cuántos siguen utilizando ese servicio más adelante, etc. Así sabemos qué es lo que está funcionando, y dónde estamos fallando a la hora de atraer y fidelizar a los usuarios.

- Dinero invertido. En muchos casos, el principal objetivo es diseñar algo que funcione utilizando la menor cantidad de dinero posible.

- Tiempo de desarrollo. El plazo suele ser una variable clave, y mucha gente va a medir el proyecto por su adecuación al calendario marcado.

- Perfil del usuario y fuentes de tráfico. Desde el punto de vista de nuestro negocio, existen usuarios de diferente “calidad”. Algunos sólo miran, otros hablan bien de nosotros, otros compran… Por eso, no todo el tráfico que genera un sitio web tiene el mismo valor. ¿Qué perfiles nos interesa atraer? ¿De dónde queremos que vengan nuestras entradas? ¿De Facebook? ¿De Google? ¿De un blog técnico? ¿De una web para jubilados? ¿De una área geográfica determinada?

- Ahorro/Impacto en el trabajo. El diseño puede tener un impacto directo en la cantidad de trabajo que después debemos realizar. Por ejemplo: un sitio web que ofrece información de calidad puede evitar un montón de llamadas al Call Center. Eso se traduce en un importante ahorro, y nos libera de tareas en las que quizá no aportamos demasiado valor. Así podemos concentrarnos en la esencia de nuestro negocio.

6. Introducir mejoras en el diseño según la información obtenida.

Lo más importante es entender que el diseño web se ha convertido en un proceso, en algo que debemos ir modificando y ajustando regularmente para asegurarnos de que cumple nuestros objetivos.

Las métricas nos proporcionan la información que necesitamos para introducir esos cambios y conseguir así mejoras significativas.

Los cambios no tienen por qué ser de gran envergadura. A veces basta con modificar el orden de los elementos, cambiar los textos promocionales, simplificar los formularios, modificar el aspecto y la posición de los banners, etc.

¿Qué métricas utilizas tú para valorar un diseño?

Algunas son muy técnicas, y sólo tienen sentido si te dedicas profesionalmente a la “experiencia de usuario”.

Varias de ellas se centran en cómo recoger feedback de los usuarios, un aspecto que resulta fundamental.

Las tres primeras son de conocimiento obligado para alguien que trabaje en la web:

1. Papel y lápiz

2. El ya mítico Google Analytics

3. Google Website Optimizer

4. Website Grader

5. Concept Feedback

6. Chalkmark

7. Clickheat

8. ClickTale

9. Clixpy

10. Crazy Egg

11. Ethnio

12. Feng-GUI

13. Five Second Test

14. Feedback Army

15. Loop11

16. Mechanical Turk

17. Morae

18. Open Hallway

19. Silverback

20. Simple Mouse Tracking

21. Usabilla

22. UserFly

23. UserTesting.com

24. UserVue

Estas son las herramientas. Pero para los que estén interesados, mucho más y mucho mejor en el artículo de Craig Tomlin: descripción de cada aplicación, precios, ventajas y desventajas, etc.

En otoño las hojas se caen. Afortunadamente, las páginas web no.

Hemos ido recogiendo algunos sitios web que, por su diseño sencillo y efectivo, y por la forma directa de comunicar su mensaje, pueden servirte como fuente de inspiración:

- squarespace

- ukecosas

- train-ee

- envato

- tearoundapp

- boxuk

- dellustrations

- thoughtbot

- pixelounge

- slydial

- bookingbug

- ticketea

- saiku

- magntize

Y de postre, unos logos web interesantes, y unas cuantas técnicas y recursos interesantes para diseñar botones mediante CSS.