Los 10 mandamientos del buen diseño de Dieter Rams pueden aplicarse perfectamente a la web

Dieter Rams, probablemente pensando en sus principios de diseño

Y de hecho, estos principios o mandamientos, aplicados a un sitio web, son, por lo menos en mi opinión, un buen termómetro de la calidad y utilidad de su diseño.

Estos famosos 1o mandamientos o principios son:

1. El buen diseño es innovador.
2. El buen diseño hace un producto útil.
3. El buen diseño es estético.
4. El buen diseño ayuda a un producto a ser entendido.
5. El buen diseño es discreto.
6. El buen diseño es honesto.
7. El buen diseño es duradero.
8. El buen diseño es constante hasta el último detalle.
9. El buen diseño está concienciado con el medio ambiente.
10. El buen diseño es tan poco diseño como sea posible.

Vale que no todos son 100% aplicables al diseño web si los interpretamos literalmente, pero desde luego un buen número sí lo son, y de hecho suponen una ayuda en la definición de un diseño web como un elemento de real utilidad y correctamente orientado. Es fácil comprobarlo de la siguiente forma, aplicando estos principios al diseño web:

1. El buen diseño es innovador. Un diseño web innovador es algo complicado de definir, por las características del medio, que tienen sus limitaciones y lo definen, pero desde luego, lo que es incuestionable es que la innovación en un diseño web ayuda a diferenciarse sobremanera, más a ún hoy día, en un mundo web hiperpoblado de clones, gracias a herramientas coo WordPress o Magento, de gran utilidad práctica, pero con nula capacidad innovativa en cuestiones de diseño.
2. El buen diseño hace un producto útil. Creo que no hay discusión posible en este principio. Un diseño web es útil solo si es vehículo para conseguir el propósito del sitio web. Si no es así, el diseño puede ser un vehículo de lucimiento o una muestra de habilidades, pero poco más. Y si no es util, ¿para qué queremos ese diseño?
3. El buen diseño es estético. De nuevo, algo básico e indiscutible. Un buen diseño siempre se acompaña de una coherencia estética. Son elementos indisolubles. No hablamos de gustos personales, sino de que debe haber una estética identificable del diseño, homogénea.
4. El buen diseño ayuda a un producto a ser entendido. Quizás la parte más importante, si el diseño no sirve para que el usuario o cliente entienda lo que tiene delante, en este caso una web o un producto dentro de una web, el diseño desde luego no es bueno.
5. El buen diseño es discreto. Siempre que sale un tema de estos recuerdo la web que hizo Homer Simpson repleta de GIFs animados. La discreción, la mesura, el raciocinio y la proporción ayudan a que un diseño sea mejor precisamente por enfocarse principalmente en sus objetivos y no perderse en las formas. Aunque también es cierto que la web está repleta de cosas horripilantes que, contra todo pronóstico, consiguen, y muy bien, sus objetivos.
6. El buen diseño es honesto. Supongo que podemos utilizar lo que significa honesto para explicar, en un diseño web, la importancia de la coherencia del diseño y de que éste sea proporcionado y adecuado a lo que se quiere representar.
7. El buen diseño es duradero. Quizás este principio es el más difícil de aplicar al entorno web. En un medio como internet hablar de duradero (o muy duradero) pueden ser 6 o 7  años. Más allá de eso es difícil mantener un diseño vivo, aunque si es cierto que si está bien concebido, los cambios no afectarán a la esencia. Pero el entorno web se caracteriza por ser extremadamente cambiante. Desde luego hay ejemplos de diseños duraderos aún así, pero son difíciles de encontrar.
8. El buen diseño es constante hasta el último detalle. La atención al detalle es desde luego un claro elemento diferencial en muchos diseños web. Un pequeño detalle puede marcar mucha diferencia.
9. El buen diseño está concienciado con el medio ambiente. Quizás el más dificil de encajar en el entorno web.
10. El buen diseño es tan poco diseño como sea posible. Un alegato a favor del minimalismo y de lo concreto, de resaltar la funcionalidad y el fondo en lugar de la forma, ¿a qué suena a como son muchas webs?

Desde luego, y como conclusión, la importancia del diseño web está fuera de toda duda y estos principios constituyen una buena guia inicial de calidad de diseño en nuestros sitios web.

De remate, el propio Dieter Rams afirmó en una entrevista en 2009 que según su criterio la única empresa que hoy día cumplía sus principios de diseño era Apple. Por si alguien tiene dudas sobre ello, aquí puede verse una comparativa entre los diseño de Dieter Rams de los 60 y los diseños actuales de Apple, de Jonathan Ive, donde desde luego las similitudes son claras.

A ver, una cosa es “inspirarse” en un diseño web y otra es copiarlo directamente, fusilarlo sin más

Yo, como la mayoría de la gente que trabaja en esto, me fijo, y mucho, en el trabajo de los demás, porque de ahí aprendo y de ahí saco ideas o adapto las ideas de otro, o si me gusta un layout o una disposición de elementos lo utilizo… pero lo adapto!!! Intento convertirlo en algo propio partiendo de un modelo que ya existe, y eso, señores, es una cosa, y esto, amigos de Campoamor formación, es otra muy distinta.

Desde aquí os invito a que trabajeis más vuestras propias propuestas, por supuesto aprendiendo de los demás, pero trabajando y esforzandoos, como hacemos o intentamos hacer otros. Pensad amigos de Campoamor, si todos hiciéramos los mismo, solo habría 4 o 5 diseños web en el mundo, porque todos copiaríamos literalmente al otro para enmascarar nuestra falta de imaginación y/o ideas. NO LO HAGAIS AMIGOS DE CAMPOAMOR! Pensad que si nosotros lo hemos hecho, vosotros también podeis (¿o no?), solo hay que trabajar un poquito y tener una pizca de ética. Ayudadnos a hacer de este mundo un lugar más bonito donde vivir y empecemos por aquí, por tener un sitio web realmente diseñado por ti. Además llevando la palabra “amor” en vuestro nombre, esto está muy feo. Vais a cabrear a Cupido.

Y mira, que vale que es posible hacer un diseño calcado, y que como te puedes descargar el código, las imágenes, los textos, el CSS, etc, nada te impide hacerlo, pero, hombre, un poquito de por favor, por lo menos cambia el color del formulario o las imágenes de los banners, copia la web, OK, pero con un mínimo de estilo.

Esto que hemos visto aquí es una fusilada en toda regla del diseño del equipo de trabajo de desarrollo web de MasterD, y para este sitio web específico ha trabajado mucha gente (Aby, Jorge, Esther, Jaime, Noe, Victor, Diana, Javier, yo mismo), que ha sido “reutilizado” para esta empresa, que hace lo mismo, del mismo producto y ahora, con la misma web, en apariencia.

Estos amiguetes lo han copiado literalmente todo, ni se han molestado en cambiar los colores del formulario o la tipografía del texto, y por si había dudas de la copia en el código de la página aparece claramente un archivo .js nuestro, así como el mismo esquema de código, etc.

Por ser positivo, está claro que nuestra propuesta de sitio web es cojonuda, y como es inmejorable, la única opción de igualar a estos tios es literalmente hacer exactamente lo mismo que ellos. Pero fuera de coñas y buenrollismo, joder tios, vale que el sector formación es duro, vale que nuestra web está muy bien y mola un montón, pero ¿no le podiais haber echado un pelín de imaginación, un pelín menos de descaro, preocuparos de haber construido vuestra propia propuesta?

Y digo yo, ¿y el usuario?, porque claro, tú vas navegando por internet y llegas a esta página, la original, y luego llegas a esta otra, la copia, y dices, ¿esto es la misma empresa?, ¿esto no lo había visto yo antes?, y seguro que el pobre usuario tiene un brutal deja vu. Pero a los que han fusilado el diseño original seguramente el usuario les importe un huevo y parte del otro y lo que quieren es coger un modelo de éxito y, tal cual, aprovecharse de ello. En fin, dudo que os funcione, porque cada uno debe elaborar sus propias soluciones, aunque se base en el trabajo de otros, pero siempre debe haber una nota diferenciadora, porque sino, dime, ¿cómo te van a distinguir a ti de mi?.

ACTUALIZACIÓN: A fecha de hoy, 14 de mayo, la web que era una copia literal ha sido retirada o por lo menos lo parece, ya que no hay más que una página en blanco en su lugar. En vierta forma me alegra, porque demuestra verguenza y cierta intención de mejora por parte de la empresa que copió tan a saco. Ahora solo queda ir viendo poco a poco esa web a ver cual es su propuesta propia, y eso si sería una buena reacción.

La optimización generalmente se plantea tras el lanzamiento de un proyecto y cuando éste lleva un recorrido inicial que permite obtener una serie de datos (ventas, tiempos de visita, rebotes, fuentes de tráfico, etc) que a su vez hacen posible el analizar su rendimiento y, a partir de ahí, empezar a proponer acciones de mejora en el sitio web siempre buscando un mejor rendimiento en función del objetivo principal del sitio web.

Sobre estos temas, y en concreto de optimización de un ecommerce de servicios, hablamos largo y tendido en el Conversion Thursday de Madrid el pasado 17 de febrero

En concreto, en función del análisis de un proyecto de ecommerce de servicios durante un periodo de 18 meses se encontraron 10 puntos clave de optimización web, cuya mejora y el encontrar un modelo óptimo es necesario para alcanzar umbrales de rentabilidad.

Antes de detallar los 10 puntos de mejora claves en un ecommerce os dejo el vídeo de la exposición de este tema en el Conversion Thursday de Madrid:

www.youtube.com/watch?v=yMo3FbeZsqM

Sobre los 10 puntos clave de optimización y mejora de un ecommerce, en este caso de servicios, que tratamos esa tarde, éstos son:

1. El TPV. La pasarela de pago que empleemos es determinante en el éxito de las operaciones de venta. Hay TPVs con sistema CES (3D Secure), que son la mayoría, y que tienen sentido en el marco de la venta de bienes físicos. Quizás en el sector servicios tengan menos sentido, y, en general, debes tener un TPV adecuado a lo que vas a vender y que, en la medida de lo posible, permita integración con tus sistemas financieros, de pedidos y logística, etc.
2. Los medios de pago. Aunque la mayoría empezamos con un único medio de pago en un ecommerce, la verdad es que es necesario disponer más de uno aunque tampoco debemos dar una lista de opciones tan larga que al final caigamos en la paradoja de la elección (el usuario, abrumado por múltiples opciones, decide no escoger ninguna). En función del lugar de venta, debemos disponer de los medios de pago apropiados.
3. Probar lo que se va a comprar. Si es posible y el producto lo merece, es una opción interesante el permitir al usuario probarlo durante un tiempo limitado antes de pagar por él. Es una opción que genera confianza, pero el producto debe ser muy sólido.
4. Geolocalización de contenidos. Cada pais, aunque utilice un mismo idioma, tiene su propia idiosincrasia. Esta es la realidad, así que adaptemos nuestros contenidos a la realidad. No podemos escribir igual para un usuario de Argentina que para uno de Perú, aunque ambos hablen español.
5. Testing. Gran parte de la mejora en lo que a interfaces, disposición de elementos y presentación de productos se refiere está en el testing como sistema que permite determinar que opciones son las que realmente prefieren los usuarios. El testing te da conocimiento de usuario, de cliente, y eso es básico para optimizar un ecommerce y conseguir eficacia.
6. Optimización de contenidos. La redacción de cada producto debe estar orientada a ese producto y pensada con una estructura de copys atractiva y bien armada.
7. Las llamadas a la acción. A veces tenemos clarísimo lo que queremos conseguir, pero la forma de dirigir al cliente a ese objetivo no es tan clara. Es básico trabajar las llamadas a la acción y la claridad en ellas.
8. Optimización de la oferta. ¿Para qué sirve un producto?, ¿qué consigo con él? Imprescindible que el cliente tenga clarísimo lo que le va a aportar lo que le vendemos y el valor que esto tiene.
9. Proceso de compra. Una parte crítica de cualquier ecommerce. Hay rios de tinta sobre este tema, así que por no extenderme, una clave básica es no solicitar aquellos datos que realmente no necesitemos para formalizar una venta, ¿para qué los quieres?, ¿cuando te compras un pantalón te preguntan los años que tienes, en que calle vives o como has conocido la tienda?, ¿te comprarías un pantalón si te preguntaran todo eso? Porque yo pensaría que el vendedor es un psicópata.
10. Optimizar el tráfico. OK, tenemos un ecommerce; OK, funciona y tenemos tráfico, pero desde luego las ventas solo te las van a dar determinado tipo de tráfico. La cantidad es importante, pero no es lo más importante. La calidad del tráfico es fundamental. Si yo vendo cuadros y la gente entra a mi sitio web por el término “aprender a pintar cuadros” es probable que de aquí no saque muchas ventas.

Y para terminar, aquí teneis las diapositivas empleadas en la presentación del Conversion Thurday de Madrid del 17 de febrero. Agradecer desde aquí la asistencia a los que estuvieron allí (@sorprendida, @barbmk, @ana_sopli, @gemamora, @aleyda, @ivo_campos, @patsapel, @paula_sanchez, @esmargoz, @guillermovalls y a Sergio Maldonado de @mvconsultoria, y muchos más!!!) y por supuesto gracias a la organización por contar conmigo.

Desde el punto de vista del diseño web siempre me ha parecido fundamental controlar y medir que navegadores de internet utilizan los usuarios en los sitios web en los que trabajo y que resoluciones de pantalla, además de otros indicadores igualmente importantes.

La evolución de uso de los navegadores de internet en tan solo un año ha sido lo bastante significativa como para tenerla en cuenta a nivel de diseño web.

Es un dato muy importante sobre todo por asegurarnos de que el CSS va a funcionar igual en todos los navegadores empleados y también asegurarnos de que el sitio web se va a visualizar igual en cualquier navegador, sin hacer cosas raras si vemos la web en Firefox, Opera, Chrome o en Internet Explorer.

Estudiando recientemente la evolución del uso de navegadores de internet por parte de los usuarios en varios perfiles de Google Analytics que mido, en los que hay sitios web de temátcias muy diferentes, se aprecian cambios muy importantes en el uso de navegadores web por parte de los usuarios. Como muestra, esta comparación tipo (una media entre 5 sitios web de temáticas distintas) entre el uso de navegadores en el primer trimestre de 2009 y en el primer trimestre de 2010:

Comparativa de uso de navegadores de internet entre el primer trimestre de 2009 y el primer trimestre de 2010.

Podemos observar cosas bastante interesantes:

1. Internet Explorer pierde una cuota de uso de casi el 8,5%, y los grandes beneficiados son Chrome y Safari, y no Firefox, como se podría intuir en un principio.
2. Firefox se consolida como el segundo navegador en uso, pero no incrementa sus usuarios de forma relevante. Se mantiene con un nada despreciable 21%.
3. El crecimiento de Chrome y Safari es muy llamativo y significativo, como lo es igualmente el estancamiento de Opera. Con porcentajes entre el 3% y el 6% de la navegación total de un sitio web ya no podemos considerar a Chrome o Safari navegadores secundarios o de freaks o de gente que no es cliente potencial. Con ese volumen, ya no podemos.

Este tipo de información pone de manifiesto la importancia de realizar diseños web que sean 100% visualizables y funcionales (por ejemplo, que el introducir un user y password funcione en todos los navegadores) en la mayor parte de los navegadores, porque si no os arriesgais a perder visitas si la web no está preparada para todos los navegadores.

Puede afirmarse que si una empresa no tiene su web optimizada para ser visualizada y operativa en Firefox, por ejemplo, puede estar perdiendo un tráfico entre el 15 y el 20% del total, simplemente porque su home no se ve bien o porque no funciona correctamente (formularios, logins, etc.). Como es lógico, aquí hay un problema grande y más aún si mueves tu negocio a través de internet. Lo recomendable es concebir la web para que funcione correctamente en todos los navegadores de internet.

Y ya para finalizar, si queremos detenernos en las versiones específicas de navegadores es muy llamativa la evolución media de uso de Internet Explorer entre el primer trimestre de 2009 y el de 2010:

Estadistica media de uso de las diferentes versiones de Internet Explorer entre el primer trimestre de 2009 y el de 2010.

Como puede verse la evolución de uso de las diferentes versiones de Internet Explorer hace que hoy en día nos veamos obligados a seguir pensando en el dichoso IE6, con todos los problemas de CSS que conlleva, ya que el reparto de versiones de Internet Explorer aún le da cuotas de uso muy altas, cercanas al 20% de la navegación de internet llevada a cabo con IE, lo que supone más o menos y según los datos que hemos ido viendo aquí el 13,7% del total de la navegación de un sitio web, por lo que de momento nos guste o no debemos seguir acordándonos de Internet Explorer 6.

Las tendencias de uso cambian bastante de un año para otro y es muy importante controlar este tipo de información, ya que si una nueva tecnología relacionada con internet, como pueden ser los navegadores, irrumpe con fuerza y no somos capaces de verlo corremos un riesgo grande de perder tráfico de clientes potenciales o de darles un servicio nefasto en lo referente a nuestro sitio web. Debemos probar nuestros diseños con todas las variantes principales de navegadores para garantziar el sevicio a las personas que van a navegar por ellas.

La página de resultados de google.es (o SERP) que me he encontrado es muy muy parecida a la SERP de Bing

Pagina de resultados nueva de Google.es para la búsqueda "alquilar coche" - Clic sobre la imagen para verla grande.

Por comparar y entrender el porque llama la atencion tanto este cambio, aquí podeis ver una página de resultados del buscador Bing:

Pagina de resultados del buscador Bing para la búsqueda "rent a car" - Clic sobre la imagen para verla grande.

Como puede verse a simple vista, la disposición de los elementos de la nueva página de resultados de Google es muy similar a la de Bing, sobre todo en lo referente al menú vertical de la parte izquierda, algo nuevo en google y que fue una apuesta de Bing. ¿Es este el futuro de la página de resultados de Google?

Como el tema me ha llamado mucho la atención, he abierto otro navegador distinto (Firefox) con una sesión nueva y he entrado en google.es a ver que me encontraba, y ahí no, me ha salido la página de resultados a la que estaba acostumbrado, habiendo hecho la misma búsqueda, “alquilar coche”:

Página de resultados "clásica" de google para la búsqueda "alquilar coche" - Clic para ver la imagen grande

Al subir varios grados mi mosqueo he abierto otro navegador más (IE8), con otra sesión nueva y he vuelto a entrar en google.es y tampoco me ha salido la página de resultados nueva, sino la última a la que estaba acostumbrado, así que deduzco que en Google están probando esta nueva interfaz de la página de resultados de forma aleatoria y que supone un cambio a nivel de usabilidad y de diseño bastante grande respecto a la página de resultados a la que estábamos acostumbrados. Además he visto que otras personas se han percatado de este cambio, como es el caso del Señor Muñoz, que habla de lo mismo en este post: la nueva interfaz gráfica de Google

Los principales cambios que pueden apreciarse en la nueva página de resultados de google.es son:

Hay un menú a la izquierda de los resultados para que podamos acceder desde allí a la misma búsqueda en Maps, en Vídeos, filtrar la búsqueda por fechas o similares. Además esas opciones están representadas por iconos gráficos, lo que les da una relevancia visual importante, haciendo que el usuario repare mucho antes en ellos que en los snippets tradicionales.

Aunque se nos dice el número aproximado de resultados para la búsqueda que hemos hecho, el tamaño de la fuente es menor y el color es un gris apagado que hace que sea menos visible al ojo. Además, se ha suprimido el número de resultados que estamos viendo en la página, mientras en la página de resultados “clásica” vemos que estamos viendo los resultados del 1 al 10, en la nueva, esta información no se indica.
La localización geográfica cobra un protagonismo importante, ya que directamente bajo la caja de búsqueda aparece un icono indicándonos donde estamos ubicados, o donde cree Google que estamos, ya que en estos ejemplos dice que estoy en Barcelona, cuando estoy en Zaragoza. Esta geolocalización ya está presente en la página de resultados “clásica” pero no de una forma tan aparente.
La caja de búsqueda tiene mayor tamaño y el texto aparece en negrita. El botón “Buscar” también ha cambiado. Además, el tamaño de la fuente en la búsqueda se ha incrementado un pixel y hay otros cambios en el grafismo: el logo de Google es menos plano y juega con sutiles degradados, etc.

Eso sí, en lo referente al posicionamiento, nada parece cambiar, los resultados y su orden son los mismos en ambas interfaces de búsqueda, pero lo que sí puede cambiar con esta ¿mejora? es la clicabilidad de los resultados, tanto orgánicos como de pago, ya que a simple vista, los resultados orgánicos parecen tener menos protagonismo que los de pago o el menú de navegación a la izquierda, lo que puede redundar en menos clics en los resultados SEO y más clics para los de pago o las opciones de navegación de la búsqueda.

Al tratarse de una prueba más o menos aleatoria hay que deducir que Google está probando esta nueva página de resultados, tan “inspirada” en Bing. Si la implanta o no el tiempo nos lo dirá, pero lo que puede suceder con esta nueva página de resultados, aunque es una incógnita, puede pasar por:

1. Descenso en los clics de los resultados orgánicos, dado que éstos, con la inclusión del menú a la izquierda, resultan menos visibles al usuario.
2. Al implantar tanto la geolocalización y opciones de búsqueda avanzada desde la primera página de resultados (filtrar por fechas, etc) se incrementara la diferencia de uso de los buscadores, abriendo una brecha muy grande entre los usuarios avanzados y los usuarios de perfil bajo. El usuario avanzado aprenderá a customizar su búsqueda al máximo, pero el usuario novato se quedara como estaba y además verá sus búsquedas muy sesgadas por la geolocalización, la busqueda personalizada, etc.
3. Una importancia mayor de los resultados de negocios locales, con mapas, dado que ahora todavía tienen mayor visibilidad ya que quedan como elemento más relevante de la búsqueda, más que antes incluso, ya que al añadir más iconos y opciones se presentan como la opción más fácil en la que hacer clic.

Por supuesto todo esto son conjeturas y especulaciones, pero no creo que Google hiciera una prueba de este tipo si no tuviera en mente cambiar su manera de presentar los resultados, ¿o no?

Un test multivariante nos permite comprobar el rendimiento de varias alternativas de un elemento en un diseño web. Para mejorar la conversión es una muy buena herramienta.

Dicho esto, en el caso práctico y real del que voy a hablar aquí, tenemos una web de comercio electrónico, y queríamos comprobar, tras leer un artículo, si la posibilidad de que un usuario haga clic sobre el botón de compra de un producto varia en función del color de éste. Es decir, si tengo un botón de “Iniciar compra” de un producto, ¿el color de este botón influye en la decisión del usuario de hacer clic en él, y por tanto comprar?.

En este test multivariante se utilizaron 3 colores diferentes para el botón de compra, con el objetivo de ver cual ofrecía mayor ratio de conversión.

Por supuesto, yo tengo claro que sí, que influye y mucho, y hay montones de estudios, posts y artículos hablando de ello, porque los colores tienen una asociación inconsciente con el comportamiento del usuario. Pero con creerlo o intuirlo no vale, así que decidí hacer un test multivariante para determinar si el color del botón de “Iniciar compra” influía en el CTR, el índice de clics, en ese botón de compra de los usuarios, en qué medida y qué margen de mejora teníamos en la web.

La prueba se planteó entre tres colores del botón de acción principal. Los colores elegidos fueron el azul, color original, el naranja y el rojo. Anteriormente hicimos otra prueba con más colores en la variación de los que eliminamos aquellos que funcionaron peor que el original: como el color verde, por ejemplo. Así que este segundo test la intención era clara: determinar cual de los tres colores elegidos ofrecía un mayor ratio de clic en el botón objeto del test, un dato muy importante teniendo en cuenta que hablamos del botón que corresponde con la acción de iniciar una compra.

Hacer un test multivariante para determinar el botón más adecuado para una acción que supone una conversión o acción de compra tiene un gran valor comercial.

Desde el principio la idea era probar esas alternativas durante un mes completo, para poder tener un volumen de clics y datos importantes y que permitieran que los cambios en el CTR del botón no se debieran a circunstancias puntuales de un día concreto.

¿Qué cuales fueron los resultados del test multivariante? Aquí los teneis:

Gráfico de la evolución del test multivariante en el que se testearon 3 colroes diferentes para el mismo botón a ver cual ofrecia mejor CTR.

Lógicamente, lo importante aquí es lo que los datos de la prueba nos dicen, no nuestra opinión personal o las sensaciones subjetivas que pudiéramos tener respecto a un color u otro. Y lo que vemos aquí es que ambas versiones alternativas del botón funcionan mejor que la original y ofrecen un mejor CTR y, por tanto, incrementan las probabilidades de compra del producto, ya que cuanta más gente inicie el proceso de compra, más gente lo terminara, siempre y cuando el proceso de compra esté bien pensado y concebido, pero esa es otra historia.

Como puede verse en el gráfico, el botón anaranjado (representado en la gráfica por la línea naranja) nos da una mejora de más del 30% (un 5,38% de conversión frente a un 4,10% del modelo original) en el indice de CTR en el botón. La versión del botón en color rojo se ha quedado en una mejora del CTR de un 27%.

Finalmente, la decisión gracias a los datos de este test multivariante es sencilla: implantaremos el color naranja en el botón de “Iniciar compra”.

Lo malo es que la profesión de diseñador web alberga a muchos perfiles, algunos muy profesionales y conscientes de lo que supone el diseño de web y otros que simplemente se apuntan al carro porque saben manejar Dreamweaver un poco por encima y consideran que con eso ya son diseñadores web.

Aquí tenemos un diseño web reciente, de 2008 o 2009, aunque no lo parezca, ¿os atreveis a llamar profesional del diseño web a su autor?

La principal característica del diseño web y la que lo diferencia de otros tipos de diseño, es que requiere un buen conocimiento de conceptos como navegadores, usabilidad, arquitectura de la información, resoluciones, código HTML y demás zarandajas técnicas y no técnicas directamente relacionadas con el medio en el que trabaja el diseñador web: internet. En resumen, puedes ser un gran diseñador gráfico, pero eso no te convierte en un buen diseñador web, y la fórmula también se aplica a la inversa.

Después de conocer a muchos y trabajar yo mismo como diseñador web unos cuantos años, participar en procesos de selección e incluso hacerlos, os incluyo unas listas de mínimos que SI y que NO debe cumplir un diseñador web para poder considerarlo como tal. La lista podría ampliarse mucho en ambos sentidos, pero se trata de ver lo básico que debe tener y no tener un diseñador web.

Lo que SÍ debe saber o tener un diseñador web que sabe diseñar webs:

1. En su portafolio deben aparecer varias direcciones web diseñadas por él mismo. Si un diseñador web no tiene URLs en su portafolio solo hay dos posibilidades: no sabe hacer webs o las que ha hecho le averguenzan y no las pone en su curriculum. En cualquier caso nada bueno.
2. Debe conocer y utilizar CSS. Hoy en día, por muchísimos factores, el uso de CSS es imprescindible en el diseño web. Si un diseñador web no utiliza CSS generalmente es porque no se ha molestado en aprender y estar actualizado o porque sigue diseñando webs basadas en el uso de flash o en tablas y recorte de imágenes.
3. Sabrá trabajar con código HTML. El diseño web, guste o no, no se limita solo al diseño gráfico, sino que también hay que controlar y utilizar algo de código HTML y ser más o menos hábil con editores de HTML. Un buen diseñador web sabrá lo que es una etiqueta <h1> o una etiqueta <head> o una etiqueta <alt>, simplemente porque son hoy en día etiquetas indispensables en cualquier diseño web.
4. La disposición de los elementos en los sitios web que haya diseñado será como mínimo, de sentido común. La información será fácilmente accesible, la navegación será clara, etc. Independientemente del grafismo o de los colores empleados, la web será comprensible por el público al que vaya dirigida.
5. Un buen diseñador web hará un diseño pensado para cualquier navegador actual y resolución y tendrá en cuenta una serie de mínimos en cuanto a estructura web, como por ejemplo, no abusar de JavaScript o no colocar Flash sin cargador, etc. Con la situación actual, por ejemplo, es impensable que un diseño no funcione como mínimo en Internet Explorer 6, 7 y 8, Firefox y Chrome. Si por ejemplo un diseñador web te dice que no sabe porque versión vamos de Internet Explorer o que que es eso de Chrome, él mismo se pone en su sitio.

Por ejemplo, aquí tenemos un buen par de ejemplos de diseños web muy bien concebidos, aunque muy diferentes entre sí:

El diseño web de Product Planner: claro, sencillo, limpio y muy profesional. Directamente a los valores del producto.

La web de SMS Parking también se centra en las virtudes del servicio, pero se orienta a su público objetivo a través de un grafismo que busca complicidad.

¿Y como saber cuando un diseñador web NO es un buen diseñador web?. Lo que te da pistas de que NO es un buen diseñador web:

1. Su opinión sobre el diseño de la web es la más importante y no admite ningún tipo de crítica o corrección por obvia que parezca. Su opinión es importante, pero no es la más importante. Un buen diseñador web debe entender que el diseño debe obedecer a un objetivo concreto y que está dentro de una estrategia. Un diseño debe servir a un propósito, y no ser un vehículo de placer del propio diseñador.
2. Si no domina la teoría del color o del sentido común. Si un diseñador combina verde y rojo y/o utiliza 7 fuentes en un diseño que además no son de las más comunes. Los diseñadores que utilizan 40 colores en un diseño no son, en general, muy recomendables.
3. Si utiliza marcos, popups, keywords en el color del fondo de la web o similares. Si aún usa ese tipo de técnicas es que no se actualiza o peor aún, le da igual.
4. Todos sus diseños son exactamente iguales, con pequeños cambios. Eso significa que ha aprendido a hacer una web y la explota hasta la saciedad.
5. El peso de la web, la optimización de imágenes o el donde colocar el menú de navegación le da absolutamente igual o lo hace sin ningún tipo de lógica o siguiendo su instinto. Cualquiera de estas cosas es mala cosa, amigos.

No voy a poner ningún ejemplo de web horrorosa porque hay montones por todos lados, y hay montones de webs que recopilan webs mal hechas como la famosa QWeb.

A ver, es cierto que se puede hacer un buen diseñador web de alguien que tiene interés en aprender y conceptos de base, bien por sus estudios, bien por su experiencia profesional, y también es verdad que el que alguien, por ejemplo, no sepa como colocar la información no le convierte en un mal diseñador, pero creo que en general estos 5 SIes y estos 5 NOes reflejan muy bien lo que debe ser un perfil de diseñador web profesional hoy en día.

Google Analytics puede ayudarte con el diseño web en lo referente a los navegadores empleados por los usuarios.

A nivel de diseño web uno de los valores más importantes que nos ofrece Google Analytics es la posibilidad de ver los navegadores web que utilizan los usuarios que usan nuestro sitio web. En los ejemplos voy a utilizar los datos de un sitio web de comercio electrónico orientado fundamentalmente a España pero con usuarios y clientes en algunos paises como Venezuela, Chile o Uruguay. Si por ejemplo, analizo la información del mes de septiembre de 2009 veo la lista de los navegadores más utilizados y los porcentajes de tráfico correspondientes a cada uno (en Google Analytics se ve esta información en Usuarios/Navegadores). Esta información lógicamente me es muy util porque me dice que navegadores usan los usuarios de mi sitio web. En este caso los navegadores que se usan son estos:

Google Analytics nos muestra el porcentaje de visitas de nuestro sitio web que corresponde a cada navegador.

Como podemos ver haciendo una rápida suma los usuarios que emplean Internet Explorer y Firefox suponen el 94,5% de las visitas al sitio web, con lo que ya tenemos una primera conclusión, por muy obvia que sea: nuestro sitio web debe funcionar perfectamente y estar correctamente diseñado para ser usado con Internet Explorer y Firefox como mínimo. Si verdaderamente queremos tener a casi todo el mundo en cuenta no podemos olvidar el 5% de las visitas que han empleado Chrome y Safari, de forma que si queremos tener un diseño web que cubra casi el 100% de las posibilidades debe estar correctamente diseñado para Internet Explorer, Firefox, Chrome y Safari.

La visualización de un diseño puede variar mucho de un navegador a otro si no lo contemplamos desde el principio. Gracias a Google Analytics podemos saber en cuantos navegadores como mínimo debe funcionar perfectamente el diseño de nuestro sitio web.

Lo más interesante es profundizar, sobre todo en el caso de Internet Explorer, ya que un mismo diseño no se comporta igual en Internet Explorer 6 o en Internet Explorer 8. Si en el mismo informe hacemos clic sobre “Internet Explorer” veremos las versiones de este navegador que nuestros usuarios emplean:

Las diferentes versiones de Internet Explorer que utilizan los usuarios para ir a nuestro sitio web

Esta información, de cara al diseño web es muy importante porque sé que mi diseño debe funcionar perfectamente en varios navegadores y en concreto en varias versiones del mismo navegador, y ya conocemos todos los problemas que fundamentalmente da el CSS con estos temas. En este caso concreto, es muy llamativo que, en nuestro ejemplo, todavía el 26,38% de las visitas hechas con Internet Explorer, que suponen un 20,12% de todas las visitas al sitio web, utilizan Internet Explorer 6, lo que nos obliga, nos guste o no, a hacer nuestros diseños pensando en que deben verse y funcionar a la perfección en Internet Explorer 6, lo que en gran medida condicionara nuestro diseño, sobre todo en cuanto a CSS y uso de JavaScript o AJAX.

En resumen, si somos unos buenos diseñadores web, y atenor de lo que veamos en la analítica web de los sitios que conozcamos o que nos toque rediseñar, debemos considerar que un diseño web será bueno si funciona corerctamente en Internet Explorer 6, 7 y 8, Firefox, Chrome y Safari, y eso como mínimo profesionalmente exigible, porque con el uso cada vez mayor de los dispoditivos moviles para navegar aún se podría hilar más fino.

Y sobre todo, aunque penseis en todos estos navegadores a la hora de diseñar nunca olvideis probar los diseños sobre estos navegadores, a ser posible con diferentes combinaciones de sistema operativo. ¿Alguien dijo que diseñar para web era fácil?

Ahora bien, por muy buen contenido que tengamos, ¿es suficiente con eso?, ¿solo importa el contenido?. La respuesta es no, porque el contenido del sitio web es su núcleo, pero el envoltorio también es muy importante, es como si un caramelo que está riquísimo lo envolvieramos en un cutreenvoltorio de papel de water. Sería igual de bueno, pero desde luego no lo parecería. Vale que el ejemplo no es el más apropiado, pero a lo que voy es que si es importante tener un buen contenido web es igual de importante maquetar ese contenido de una manera adecuada para que resulte atractivo para el usuario.

De hecho, y lo voy a explicar con un caso práctico, simplemente cambiando la apariencia de una landing page de un sitio web sin variar el contenido pueden mejorarse valores tan importantes en un sitio web como el porcentaje de rebote, el tiempo de permanencia o el número de páginas vistas por usuario. Y todo ello simplemente variando la forma de presentar la información, sin tocar el contenido ni el SEO del sitio web, ni la programación ni ningún factor que no sea la disposición de la información (ni siquiera voy a llamarlo usabilidad, que es un concepto más complejo). Para tomar este tipo de decisiones sobre como maquetar un sitio web es fundamental utilizar Google Analytics o similar y analizar con tranquilidad los datos que la analítica web nos ofrece, aplicar el sentido común, escuchar a los usuarios y sobre todo olvidarse de las opiniones personales sobre los sitios web. No importa que nos guste o no, importa que consigamos el objetivo que se pretende.

En uno de los proyectos web para los que trabajo teníamos un sitio web que entendíamos que tenía bastante calidad en los contenidos, que además estaban orientados a conseguir un objetivo concreto, en este caso leads (formularios de información), pero el porcentaje de rebote del sitio web nos parecía alto y el tiempo de permanencia nos parecía insuficiente, dado el posicionamiento natural del sitio y sus contenidos, de forma que el equipo que trabajamos en ello nos reunimos y pensamos como mejorarlo. La conclusión a la que llegamos era que el sitio web tenía un buen SEO y un buen contenido, pero que éste no estaba maquetado de la mejor manera posible para que resultara atractivo para el usuario que nos visitaba.

¿Qué hicimos?, algo sencillo pero relativamente radical: cambiamos el diseño del sitio web y la disposición de la información para que fuera algo más visible y fácil de leer por los usuarios: maquetar el sitio web pensando en el usuario al que va dirigido. Para decidirlo les pedí a unas 50 personas (compañeros de trabajo, conocidos, amigos, etc…) que me dijeran que era lo que más y lo que menos les gustaba de las landing pages del sitio web, y de estas sencillas preguntas salieron tres conclusiones principales:

1. Las landing pages resultaban dificiles de leer por el tamaño del texto, etc.
2. Había un exceso de color y elementos que distraían la atención del usuario.
3. No había elementos diferenciadores en las landing pages. Todas parecían la misma.

La landing page original era similar a esta:

La landing page original. Buen contenido y buen posicionamiento orgánico, pero mucho rebote y poco tiempo de permanencia.

Una vez que nos reunimos y estudiamos el caso concreto, planteamos una serie de mejoras en la disposición de la información y en la reestructuración de los contenidos. Tuvimos en cuenta sobre todo el sentido común y nuestras propias experiencias de usuario, e intentamos “limpiar” las landing pages para que el contenido, fundamental en este caso, tuviera el protagonismo que merecía. Se cambio la maquetación del sitio web buscando dar a la información un mayor protagonismo y claridad. El resultado final fue este:

La landing page nueva. Mismo contenido y posicionamiento orgánico, buscando mejorar la calidad del sitio web.

Después del cambio vino un periodo de análisis exhaustivo de los datos que nos iban llegando, porque aunque suponíamos que el cambio era acertado, solo el comportamiento de los usuarios nos iba a decir si teníamos razón o no. ¿Es posible que “simplemente” cambiando la maqueta del sitio web mejorarán valores como el porcentaje de rebote o el tiempo medio de visita?

Ahora mismo llevamos algo más de 6 meses con el cambio, y al tener un volumen de datos considerable, la conclusión es que se ha ganado y mucho, por ejemplo:

• El porcentaje de rebote ha disminuido más de un 10% desde el cambio de maquetación del sitio web. No hace falta que explique el valor de esto y la muchísima mejora que suponen más de 10 puntos porcentuales de diferencia en algo como el porcentaje de rebote. Claramente los usuarios del sitio web prefieren la maquetación actual, que les invita a navegar por el resto del sitio web, disminuyendo notablemente el porcentaje de rebote.
• El promedio de tiempo en el sitio ha subido más de un 14% en todo el sitio web, lo que indica que aunque la infromación y el contenido son los mismos, ahora se les presta mucha más atención, gracias a un diseño más amable para el usuario.

Como se puede ver a veces la mejora no está en grandes y complejos cambios a ningún nivel, sino simplemente en analizar si nuestros contenidos está presentados de la forma óptima para lograr el objetivo que pretendemos. Y para tomar decisiones correctas tan solo debemos analizar con perspectiva los datos que nos facilitan las herramientas de nalítica web, plantear una alternativa y ponerla en funcionamiento. Algo que desde luego parece mucho más fácild e lo que es.

1. Antes de diseñar nada de nada, reúnete con el cliente si es posible. Es fundamental saber de primera mano que es lo que el cliente quiere, y si no lo tiene claro, ayúdale. La pregunta clave es ¿para qué quieres una web?. La web no va a ser igual si el objetivo es vender productos, vender servicios, hacer branding o dar información. Pero lo más importante es saber lo que quiere el cliente con exactitud. A veces no es posible reunirse con el cliente, pero en ese caso es necesario disponer de un briefing (¿qué es un briefing?) o de unas indicaciones vía email o como sea pero sobre todo claras y concisas. Cuantos más intermediarios haya, más dificil te va a ser hacer un diseño web acertado. Me permito un apunte: muchas veces hay clientes que directamente no saben lo que quieren, así que si después de hacerle 2 o 3 propuestas no lo ve claro o sigue sin saber lo que quiere, no trabajes para él hasta que lo tenga claro, porque si no ni el cliente ni tú vais a tener una relación fácil.
2. Haz una maqueta de la web que vas a hacer en papel, en plan dibujo esquemático. Esto parece una chorrada, pero te servirá, y mucho, para aclarar ideas y hacer un planteamiento de como vas a hacer la web.
3. Crea una maqueta gráfica de la web en Photoshop o similares. Simplemente diseña todos los elementos, tal y como se verían en un navegador. Es una maqueta del resultado final, que no funciona pero que es al 100% un reflejo del aspecto gráfico que tendrá la web. Esta maqueta puede ser tu principal arma… a favor o en contra.
4. Con tu maqueta gráfica, reúnete con el cliente para conocer sus impresiones y su opinión. Se supone que has trabajado con material que el cliente te ha facilitado y siguiendo sus indicaciones, por lo que lo que hayas diseñado debería estar próximo a su idea de como quiere su web, aunque también depende de tu habilidad como diseñador web. El principal trabajo es plasmar la idea del cliente en la maqueta. Imprime la maqueta y coméntala con el cliente.
5. Fundamental: si crees que el cliente está equivocado en sus planteamientos o que no son los más adecuados para su web, házselo saber, pero siempre de una manera objetiva y muy argumentada. No puedes decirle a un cliente que su idea de como hacer una web es erronea porque sí, pero si que puedes explicarle porque le conviene hacerla de otra manera, aportando datos, ejemplos y estrategias web que le pueden beneficiar. No pretendas convencerle con un “porque si”, pero si le das argumentos y explicas tus razones, además deun mero diseñador te habrás involucrado mucho más en el trabajo y el cliente lo agradecerá.
6. Ten en cuenta los navegadores que se utilizan y las resoluciones más comunes, y adapta tu diseño a ello. Hoy en día, por ejemplo, no tiene sentido diseñar para una resolución de 800×600 o sin haber probado el sitio web como mínimo en Internet Explorer 6, 7 y 8 además de Firefox, como mínimo.
7. Hoy en día, debes tener en cuenta el posicionamiento web al plantear un diseño, ya que es muy típica la pregunta tipo “Y cuando la web esté lista, ¿cuanto tiempo tardará en estar en Google?, ¿de eso te encargas tú, no?”. Todo el mundo quiere estar en Google, y para estar en el buscador con garantías, el sitio web que diseñemos debe cumplir unos mínimos, algo que Google se encarga de explicarnos en su guía SEO para principiantes. Otra cosa es que ignoremos el tema de los buscadores porque estamos haciendo un sitio web enteramente en flash porque así nos lo han pedido. Pero si quieres un sitio web apto para buscadores y con posibilidades de aparecer en ellos, olvídate de frames o marcos, flash indiscriminado y uso excesivo de imágenes.
8. Prepárate para ser receptivo a las críticas. El diseño es algo muy subjetivo y todo el mundo tiene una opinión sobre el sitio web que estés diseñando. Esto es así, y hay que aceptarlo. Un alto porcentaje de los clientes llevan un diseñador web en su interior. Siempre hay que escuchar las opiniones, siempre. Pero si realmente estás convencido de que lo que te proponen es una majadería, defiende tu postura con argumentos que hagan entender al cliente que estás haciendo un trabajo para él, pero para que triunfe y sea un éxito. Un ejemplo sencillo, las combinaciones de colores. Es clásico que un cliente nos pida algo que hemos hecho en un color, en otro que se da de patadas. La mejor manera de que entienda que eso no va a funcionar es enseñarle sitios web muy populares que respetan una líneas claras en cuanto a colores. Aunque a veces, toca tragar.
9. Plantea tu diseño pensando en lo que el cliente quiere, no en lo que quieres tú. A veces, a la hora de plantear un diseño web, los diseñadores pensamos en lucirnos con el último javascript que hemos visto o utilizar tal disposición de elementos o en trabajar mucho las imágenes de la web. Antes de hacer todas estas cosas piensa si es lo que verdaderamente quiere tu cliente. Tú tienes tu estilo, OK, pero debes adaptarlo a lo que el cliente quiere, y no debe ser el cliente el que se adapte a tu estilo. Para eso tenemos nuestros proyectos personales, para gustarnos a nosotros mismos, pero aquí hablamos de trabajo.
10. Si es posible, enseña tu diseño a un grupo pequeño pero variado de personas. Esta práctica no gusta a muchos diseñadores, pero es una forma de probar un diseño simulando un entorno más o menos real. Varias personas, de diferente perfil, van a ver tu web y van a opinar sobre ella. Escucha sus opiniones. Algunas no tendrán sentido, objetivamente, pero seguro que alguien, generlamente quien menos pienses, te dará alguna pauta o apunte interesante que podrás aplicar y enriquecerá el diseño. Y si desde luego consigues que un grupo variado de personas esté satisfecho con un diseño web es que has conseguido el sueño de cualquier diseñador: que tu diseño guste a todos.

Ahora que he puesto estos 10 consejos para hacer un buen diseño web la verdad es que se me ocurren unos cuantos más, como la importancia del contenido, o del tamaño de las fuentes o el uso de CSS, etc… pero bueno, creo por el momento es más que suficiente, por lo menos para empezar. ¿Estais de acuerdo con estos 10 consejos para hacer un buen diseño web?