miércoles, 20 de noviembre de 2013

El diseño de interfaces es más ciencia que arte


Un proyecto web inicia delineando una interfaz básica, creando un mockup de lo que será el sitio. Este es el trabajo de un diseñador de interfaces, una persona que moldea la experiencia del usuario.

Luego, un diseñador gráfico toma ese mockup, aplica estilo, color, profundidad y forma, dándole una identidad. El proyecto está listo para que programadores y frontends lo hagan funcional.

El proceso del diseño gráfico puede ser una labor artística (aunque algunos piensan que no), pero el diseño de interfaces, a pesar de iniciar como una labor de instinto profesional, se convierte en una ciencia cuando está bien hecho.

Pruebas A/B


El éxito de Facebook está en su usabilidad superior a la competencia. Ninguna red social es más amigable y fácil de usar. Detalles como los widgets para taguear fotos, el buscador de personas, los likes, los comentarios o hasta Facebook Connect los hace líderes.


Facebook hace muchísimas pruebas A/B sobre su interfaz. Una prueba A/B muestra dos opciones de interfaz, cada una el 50% del tiempo. Por ejemplo, poner el enlace de "me gusta" antes de "comentar" o después de. Con base en las estadísticas, se decide donde ponerlo. Puede ser A/B, A/B/C o lo que se necesite. Sólo hay que tener claro el resultado óptimo que se busca.



37Signals hace lo mismo con Basecamp y sus demás productos. Prueban varias opciones de home y miden cual de ellos genera más ventas, más clicks, más usuarios.




Lean el muy interesante proceso de rediseño del home de Basecamp

Estudios de comportamiento


El diseño de interfaces, tanto en la web, como en el escritorio y los sistemas operativos, está altamente regido por estudios. Lo que mucha gente hace por instinto, otros han probado científicamente.


De Eye-tracking studies: more than meets the eye que todos deberían leer
Estudios de eye-tracking determinan las zonas donde los usuarios ven más un sitio y por ende, en donde deben ser ubicados elementos críticos a la interfaz, como botones de compra, precios, fotografías o hasta publicidad.

Interfaces a través de datos, no de sentimientos


No todas las ciencias son exactas, pero sí son medibles. El diseño de interfaz es una disciplina medible y comprobable tras su aplicación. Puedes medir perfectamente dos diseños entre tu audiencia y determinar cual de ellos genera el comportamiento que queremos.


Gráfico hecho por The Science of UX Design
En síntesis, una buena práctica de diseño de interfaces hace uso del método científico. El cual, por cierto, no anula ni descarta la creatividad.

A través de un diseño de interfaces aplicado podemos hacer que nuestro sitio tenga más registros, la gente comente más, cree más contenido o genere más ventas.

Ese no es un proceso artístico.        

¿Crear sitios usables? Piensa en móviles primero


Un buen diseñador/maquetador web sabe que crear un site no es sólo cuestión de colocar elementos aquí o allá para que quede bonito. El mundo web es bastante más complejo que eso y cosas como la accesibilidad,usabilidad, semántica y SEO (y no estoy hablando de personas/empresas que te prometen colocar tu sitio de primero en Google en dos días) son elementos fundamentales, no sólo para que tu sitio se llene de visitas sino, más aún, para que esas visitas vuelvan y se conviertan en fieles.

Lamentablemente, es muy común ver que estas cosas son ampliamente ignoradas, a veces por tiempos de entrega que se mueven entre lo mediocre y lo imposible, clientes que sólo quieren un sitio igualito a aquel, o simplemente por no considerar la verdadera importancia que tienen los aspectos arriba mencionados en el mundo web. Muchas veces esto ocurre porque olvidamos que el verdadero objetivo de un sitio web no es crear una especie de tarjeta de presentación en internet sino un medio de comunicación entre el cliente y su mercado. Esto no me parece una consideración menor, al contrario, comprender el objetivo final es algo vital a la hora de pensar en el producto en el que estás trabajando.

Ahora mismo nos encontramos en uno de los momentos más excitantes de la tecnología, posiblemente desde la aparición en escena de la web social (conocida también como web 2.0): HTML5Flash en dispositivos móviles y televisores, tablets, smartphones y un largo etcétera que hace que nuestras ideas sobre nuevas formas de hacernos millonarios comiencen a surgir a borbotones y nuestra cabeza explote con las nuevas cosas que queremos y debemos aprender sólo para mantenernos al día.

Creo que es en momentos como éste donde debemos recordar lo aprendido y no olvidar cosas como la usabilidad o accesibilidad justo en el momento en que se vuelven más importantes, sobre todo teniendo en cuenta que dispositivos como los smartphones y tablets nos exigirán repensar una y otra vez sobre nuestras aplicaciones y el modo como nuestros usuarios interactuarán con ellas. Estoy convencido que la idea de “trasladar la experiencia de la PC a los nuevos dispositivos” no es la forma más acertada de entender el futuro de la web.

Piensa en móviles primero


 

Crear sitios específicamente para móviles no es una idea novedosa (¿recuerdan el protocolo WAP?), pero la aparición de dispositivos móviles con cada vez mayores capacidades le ha dado un nuevo auge, aún cuando creo estamos lejos de ver lo que realmente pueden llegar a ser. En el nuevo mundo móvil tenemos browsers de verdad, mayor capacidad, Wi-Fi, etc. que nos da todo un nuevo abanico de posibilidades.

Sin embargo, no podemos olvidar que estos dispositivos no cuentan con las mismas ventajas en términos de resolución de pantalla, velocidades de conexión, etc. lo que nos obliga a crear una interfaz que funcione específicamente dentro de estas limitaciones.

Eso significa que, en miras de hacer un proceso escalable y siguiendo los patrones del Progressive Enhancement, lo ideal será pensar primero las interfaces con mayores limitaciones y luego aumentar las prestaciones a medida que los recursos aumentan: móviles primero, luego tablets y de allí a la PC.

Claro que siempre existe la posibilidad de que el proyecto en el que vas a trabajar no contemple móviles y entonces te preguntes ¿y para qué voy a diseñar para móviles entonces? Bien, dos respuestas: 1.- Deberías proponer a tu cliente la posibilidad de tener una versión para móviles (antes que a alguien más se le ocurra). 2.- Aunque no vayas a crear una versión móvil, pensar en términos de móvil te permitirá desarrollar ciertas habilidades que mejorarán tu producto en áreas como usabilidad y jerarquía de contenidos.

¿Qué implica diseñar para móviles?


Obliga a enfocarse en lo verdaderamente importante:


Dadas las limitaciones que tenemos en un dispositivo móvil (tamaño de pantalla, velocidad de conexión, etc.) es indispensable aprender a jerarquizar la información ¿qué es realmente lo que queremos que nuestros usuarios sepan? ¿Cuáles de los servicios que nuestro sitio ofrece son realmente usados como para aparecer de primero en nuestra lista de jerarquía? ¿Realmente es útil darle la bienvenida con un lindo texto de presentación o es mejor mostrar de una vez aquello que los usuarios realmente buscan en nuestro sitio?

Para ilustrar mi punto, quiero citar Steve Krug, en su ya clásico libro sobre usabilidad web: Don’t Make Me Think:

Steve Krug :  "a veces la gente me pregunta ¿Qué es lo más importante que debería hacer si quiero asegurarme de que mi sitio es fácil de usar?”

La respuesta es simple. No es “Nada importante debería estar a más de dos clics de distancia”, o “Habla en el lenguaje del usuario”, o siquiera “Sé consistente”.

Es…

“¡No me hagas pensar!”

He estado diciéndole a la gente por años que ésta es mi primera ley de usabilidad. Y mientras más páginas web veo, más me convenzo.
Diseñar un sitio específicamente para móviles nos obliga a entender al usuario, a saber qué es lo que busca en nuestro sitio y darle justamente eso. Es imprescindible que sepamos enfocar nuestro sitio en aquello que realmente queremos mostrar al usuario o aquello que sabemos que realmente quiere de nosotros, desechando aquellas cosas que, por interesantes que puedan ser desde nuestro punto de vista, resulten secundarias o poco importantes para él.

Hace fundamental conocer al usuario final


Uno de los principales problemas que enfrentamos con nuestros clientes es que, por lo general, no piensan en sus usuarios a la hora de crear el sitio web, haciendo solicitudes que responden básicamente a una mezcla entre sus gustos personales (o los suyos, los de su pareja, los de sus socios, etc.) y las cosas que desea que el sitio muestre sobre su producto. La mayoría de las veces esto se traduce en un montón de información (muchas veces innecesaria y sin importancia para el usuario final) combinada con una serie de pautas estéticas tomadas de otros sitios web: la galería de acá, la animación de allá, el fondo de más allá…Una especie de Frankenstein hecho a la medida de quien solicita la página pero que poco o nada tiene que ver con quien realmente debería interactuar con esta información.

Cuando las limitaciones propias de los dispositivos móviles nos obligan a prescindir de aquello que no es realmente necesario, conocer al usuario, sus preferencias, su comportamiento se convierte en algo vital. Si le damos sólo aquello que no necesita, si no entendemos qué es prioritario para él, si no nos preocupamos del modo como se comportan los usuarios cuando navegan desde un dispositivo móvil, nuestro sitio será un fracaso. No lo olvides, un sitio web es exitoso si es redituable, de lo contrario sólo es una pérdida de dinero.

Se hace entonces más evidente que a la hora de desarrollar nuestra idea, conocer al usuario final y actuar en consecuencia marca la diferencia entre el éxito y el fracaso de nuestro proyecto.

Nos obliga a presentar un buen producto, incluso con recursos limitados


Por supuesto, cada vez que yo digo smartphone, lo más probable es que pienses en iPhone, Android o Blackberry, por decir lo común, y eso está muy bien si estamos pensando en lo que será el mundo móvil dentro de unos dos o tres años, pero hoy mismo, este mercado apenas abarca una fracción del mundo móvil en general y no hace falta tener un smartphone para acceder a la Mobile Web, por supuesto, un teléfono móvil no-smartphone tiene aún más limitaciones que un smartphone. Se hace necesario mostrar un producto que sea atractivo y –sobre todo– efectivo incluso con recursos muy limitados. Esto, aunque requiera un mayor esfuerzo en planificación, resultará en un producto más veloz y óptimo.

En conclusión, hacer el cambio de paradigma de móviles a PC en vez de PC a móviles no sólo nos prepara para el futuro cercano en el que desarrollar sitios optimizados para estos dispositivos no será simplemente un lujo de grandes empresas sino una necesidad real del mercado sino que además nos permite hacer un necesario ejercicio de arquitectura de la información en pro de un producto más efectivo y usable.

Estas son sólo algunas de las consideraciones personales que me motivan a exponer la idea de diseñar para móviles primero, si les parece interesante esta idea y quieren profundizar en ella, el primer lugar donde deberían buscar información es en el sitio de Luke Wroblewski, promotor de la idea de Mobile First! y que además agrega otras razones a las acá expuestas (excepto en el caso del enfoque, que también hemos tratado acá). Hay mucha más información al respecto allí y deberías revisarla.

Mucho queda por decir y aprender respecto a este tema, por supuesto, así que tendremos que volver a ello en posteriores artículos.        

Responsive design en la web


El responsive designdiseño receptivo y adaptativo, o como quieran traducirlo, es una tendencia relativamente nueva en el diseño web, que consiste en reacomodar desde el diseño los elementos que componen un sitio web según el tamaño de dispositivo que los reproduzca.

¿Por qué debo implementarlo en diseño web?


Porque responsive design tiene que ser pensado desde el origen del diseño de nuestro website, como un concepto de fluido entre los elementos que lo componen, para lograr un flujo perfecto al momento de codificarlo. Sí, si sólo diseñas webs, lo mismo debes implementarlo en tus diseños.

¿Entonces no puedo hacer responsive design a mi website actual?


Depende de las características de tu website que esta experiencia sea más o menos dolorosa. En el peor de los casos estás usando un cms con una plantilla prehecha que con mucha probabilidad tiene el código muy desordenado y lo único que ganarás serán dolores de cabeza al intentar modificar el flujo del mismo.

No obstante te invito a que des el siguiente paso y hagas un diseño a la medida, es decir, que desde ya pienses qué es lo que va a tener tu website y con base en eso planees su implementación, para tener el flujo correcto y así puedas sentirte un héroe por haberlo logrado (yo soy un héroe).

¿Cómo es un diseño responsive?


Entra ahora mismo a tu website favorito y redimensiona el navegador. Si aparece un scroll horizontal que impide que veas parte del contenido de la web, significa que no tiene responsive design.

Ahora entra a mejorando.la y redimensiona el navegador y observa como todo el contenido se reacomoda.



Esto es responsive design y se logra con un conjunto de técnicas de css3 y, en especial, las mediaqueries de las que hablaremos en otros tutoriales. Hacer esto no sólo significa agregarle algo más a tu web para que sea más fancy, sino que es una necesidad hoy en día, ya que la navegación móvil es cada vez más grande y con múltiples resoluciones, por lo que debemos hacer diseños que se adapten a todo.

Si buscas inspiración para tu propio responsive design entonces puedes visitar mediaqueri.es donde encontrarás numerosos responsive designs.

La idea dentro de responsive design es que cuando pienses en tu diseño tengas una idea clara de los bloques que lo conformarán, para  que luego sea súper sencillo trabajar en una maquetación eficaz, que mantenga en flujo correcto de la estructura, así que debes hacerle ajustes ligeros a los bloques del diseño dependiendo del target.

¿Y ahora debo hacer cuatro diseños?


Tener los diseños listos antes de su implementación ayuda mucho a tener la mente clara al momento de codificarlo. Pero míralo bien, no son cuatro diseños, es solo uno (tener cuatro diseños sería una muy mala idea) lo que realmente se hace en los “diseños” adicionales es reacomodar el contenido que ya mostraba el “diseño” principal: esto es un correcto responsive design.

Yo sé que te has dado cuenta...
Para este punto espero ya hayas echado un vistazo a mediaqueri.es

¿Te has fijado que el flujo de los elementos es similar?


Por supuesto, porque llevan la filosofía responsive design: se desplazan los elementos para una mejor visualización. Sin embargo: es muy similar, pero no igualYo no sabía cómo categorizar estas diferencias y en realidad era consciente de que se aplicaban diferentes estrategias para acomodar los elementos pero no les daba un nombre.

Desde que digo que las webs que hago están con html5 la gente me mira más bonito.

Entonces cuando digo que mi website tiene responsive design soy una persona más cool, pero yendo un paso más adelante y basándome en este artículo (con el que estoy muy de acuerdo) puedo categorizar los patrones dentro del responsive design:

1. Mostly Fluid (más o menos fluido)

Este quizá es el más popular, se compone de un primer bloque protagonista,  seguido de otros dos con menos relevancia. Cuando se ve desde un dispositivo se adapta siguiendo el flujo que hay en este.

¿Dónde he visto algo parecido? ¡ah! mejorando.la



2. Column Drop (caída de columna)


Quizás tu cms favorito tenga un aspecto de flujo muy similar a este. Bienvenido, este es el responsive design que buscas. Este tipo de diseño se adapta hasta el punto en que no se pueden tener las tres columnas en una sola fila, entonces la columna con el contenido más random pasa a la parte inferior. Luego el flujo se desarrolla hasta llegar a una sola columna.



3. Layout shifter (movimiento de estructura)


Esta probablemente sea la forma de decirle innovación al responsive design, ya que en esta estructura sí cambia ligeramente el diseño. Eso no quiere decir que esté mal, por el contrario, esta estructura está orientada a dar una experiencia diferente en dispositivos de pantallas más reducidas para invitar al usuario a la navegación en el website.

Fíjate en que es muy usada para reacomodar menús y headers.



4. Tyny tweaks (pequeños cambios)


Esto es magia pura para los microsites que sólo brindan información referencial del producto e invitan a una acción rápida, por tanto la navegación es casi nula y el responsive design sólo adapta los contenidos a la pantalla sin casi hacerle cambios.



5. Off canvas (fuera del canvas)


Estoy seguro de que es el más popular en las webapps que no siempre tienen un diseño wow sino más bien guardan mucha información y múltiples opciones, por lo que tienen que recurrir a esta clase de responsive design.

Consiste en tener un solo bloque de información general, que no distraiga mucho (como el timeline de Facebook en su aplicacion móvil) y guardar las demás opciones o menús en botones que suelen tener íconos para distinguirlos. Es indispensable que sean interfaces muy usables.