Mantén la web simple, estúpido

El famoso principio KISS, tan cierto en ingeniería, es brutalmente aplicable a cualquier desarrollo web. Quizá sea porque un proyecto web es especialmente complejo: pocas cosas aúnan tantas disciplinas, algunas tan radicalmente diferentes como la redacción de contenidos, el marketing, el diseno gráfico o la programación. Es una mezcla alquímica, a veces altamente inestable…

Pero ésta no es la principal razón por la cual la web deba ser simple.

El reduccionismo en Diseño Web

Se trata de transformar las cosas complejas en cosas simples quitando lo que sobra y agrupando el resto en componentes ordenados de fácil digestión.

A menudo hay que volver a la raíz de las cosas, porque éstas tienden a hincharse sin control. De hecho, es muy típico que una página de inicio se vea “secuestrada” por diferentes tipos de personas.

Un ejemplo:  Si imaginamos una web que vende gatitos por internet…

• El diseñador cree que una foto gigante de un puma quedará alucinante, sobretodo si el puma ruge enfurecido mientras sus ojos relampaguean cada vez que el usuario mueve el ratón.
  
• El programador dice que las fotos de fondo son complicadas, pesan mucho, dan problemas en móviles y no van a dejar espacio para las 358 funcionalidades que los usuarios van a necesitar.
  

…Tras unos cuantos asaltos la cosa sale más o menos bien. Pero esto no es nada, porque todavía no la ha visto el cliente/resto-del-departamento:

• El director/propietario quiere ver su marca, un logo enorme… y claro, su lema… Y por supuesto un texto hablando de las bondades de su empresa y de la legendaria historia de su concepción.
  
• Los de marketing quieren dejar bien claro que sus gatos no desarrollan inclinaciones obsesivas hacia las lasañas, como los de la competencia.
  
• Aparece un SEO que piensa que estamos desperdiciando la portada si no repetimos 777 veces “gatitos cariñosos online”.
• … y así sigue la cosa.

En algún momento alguien se ha olvidado de que el asunto es vender los malditos gatos y de que nadie se va a molestar en leer todas esas cosas, hacer un estudio, sopesar todos los argumentos y entonces decidir si realmente se siente convencido de que necesita uno de esos gatos.

No se trata de preparar un juicio, se trata de “entretener” a gente corriente.

Beneficios para la experiencia de usuario

Los desarrolladores solemos pasar mucho tiempo tratando de prever situaciones que probablemente van a suceder. Queremos darle a los usuarios todas las herramientas que puedan llegar a necesitar. Esta forma de pensar, en un principio bien intencionada, puede degenerar con facilidad en desarrollos de proporciones épicas con muchas horas de ingeniería malgastadas.

En cambio, si tratamos de darles a los usuarios simplemente aquello que verdaderamente necesitan, reducimos drásticamente el esfuerzo mental que tiene que hacer  para usar aquello que creamos.

Como dice Krug en su libro “No me hagas pensar“, pues eso, “no me hagas pensar”. Lo que a menudo se resume en reducir la cantidad de opciones que presentamos.

En definitiva: REDUCCIONISMO.

Elegir, es una de las actividades que más intensamente “fastidian” la cabeza, de modo que cuando presentamos multitud de herramientas a nuestros usuarios realmente no les estamos ayudando.

Aparta la caja de herramientas y dales la maldita llave inglesa.

¿Y sabéis qué es lo mejor de todo? Que encima ahorramos trabajo.

Principios de la Metodología

Hay 3 lugares dónde aplicar el reduccionismo.

¿Arte + ingeniería? Mentira. Siendo completos la web se compone realmente de 3 ingredientes:

Pero ya quieras aplicar el reduccionismo al código o al diseno, el principio sigue siendo el mismo: Dale al usuario justo lo que necesita; ni más, pero tampoco menos.

Realmente no quieren mil funciones, quieren dos que funcionen de verdad. Demasiadas cosas confunden y un usuario confuso dispone de menos tiempo que prestar a tu contenido.

Reduccionismo del contenido

Decía Krug (de nuevo lo nombro, léelo ya) algo así como que te deshicieras de la mitad  de los textos y una vez hecho esto volvieras a quitar la mitad.

Pero no todo el contenido es texto, el peso y orden visual de las imágenes es también fundamental. En general debemos evitar la gratuidad: una imagen debe aportar algo, ya funcione por sí misma o refuerce la idea de un texto, si no es así, probablemente sea ruido.

Un contenido bien ideado debería poder dividirse en estos puntos. Si echas en falta alguno, insisto: ruido.

• Ideas principales: Les tiene que llegar a toda costa, sino no habrá habido “comunicación”.
• Extras útiles: Si lo leen, reforzará alguna idea principal.
• Contenido opcional: si no lo leen tampoco pasa nada, lo habrán entendido igual.

Claves

1. Si puedes transmitir la misma idea con menos palabras, no lo dudes.
2. Evita tecnicismos.
3. Conoce para quién escribes y averigua qué quiere saber.
4. Usa elementos visuales con los que ahorrarte texto o reforzar su significado. Recuerda: una imagen puede e incluso debe ser contenido.
5. Utiliza los títulos de manera lógica, para agrupar textos. La jerarquía es tu amiga.
6. Utiliza los recursos a tu alcance: viñetas, citas… y por dios, no te olvides de la tecla “enter”, los párrafos largos asustan al tipo más duro.

Reduccionismo del código

El reduccionismo en el código tiene mucho que ver con la “elegancia”, que bien entendería un matemático. Se trata de usar la mejor de las soluciones, la más corta, la más económica, la más legible… y, en definitiva, la más fácil de mantener en el futuro.

Otro enfoque es minimizar la cantidad de tecnologías a emplear. Debemos evitar la sobreingeniería. Cuantas más piezas juntemos más probable es que alguna falle, y el fallo de un sólo componente tiene la mala costumbre de romperlo todo. Es así de divertido.

Si puedes lograr algo con CSS antes que con JavaScript, hazlo. Si puedes hacerlo con javascript antes que usando Flash… ¡Ni se te ocurra usar Flash!

Claves

1. Planea lo que vas a hacer antes de programar. Sabemos que es duro y da pereza, pero también sabemos que luego sale mejor.
2. Examina el código y estate atento a los despistes (que los habrá, esto también lo sabemos).
3. Si piensas que puede parecer largo y/o complicado es que posiblemente lo es. Reescríbelo y tu “yo” del futuro te lo agradecerá.
4. Sigue los estándares, y si es posible usa código nativo antes que código dependiente (jQuery, etc).

Reduccionismo del diseno

Si dudas sobre un elemento, es que seguramente sobra.

De nuevo: “no los hagas pensar”. El diseno es una ocasión ideal para reforzar las ideas que pretende transmitir el contenido. Sírvete de él para conseguir que todo sea intuitivo; que tus ideas se cuelen en sus cabezas con tan poco esfuerzo que casi ni se den cuenta.

Claves

1. Reduce el número de click/interacciones necesarias para hacer algo.
2. Usa el espacio en blanco, oxigena las cosas… Aquí está gran parte de toda la magia.
3. No uses adornos innecesarios, intenta que tengan una función.
4. Reutiliza elementos. La homogeneidad te ahorra trabajo a ti y a tu usuario.
5. Prueba los disenos con gente real. Ninguna cosa te ayudará más.

Y por último…

No olvidemos que la clave de este proceso es que el producto quede igual o mejor. No se trata de “amputar” a lo loco, sino de reflexionar cuidadosamente sobre lo necesario de las cosas y el orden en que están expuestas.