6 Principios en el Diseño de Interfaces y Trucos que Todo Diseñador Web Debería Conocer

El buen diseño de interfaces es como el aire que respiramos - está ahí cuando lo necesitas y haces uso del mismo sin necesidad de pensar. Si alguna vez has usado un mal diseño de interfaz, has tenido que batallar en una web, has pulsado una botón para volver atrás porque no habías podido imaginar lo que venía detrás, no has sido capaz de completar la tarea que tenías en mente, o simplemente te ha creado confusión, ya conoces los peligros de no hacer un buen trabajo en ésta área.

Los sitios web no son simplemente bonitas imágenes, están ahí para que las usemos y consumamos, así que es muy importante que como diseñadores web empleemos una buena proporción de tiempo pensando en la usabilidad. En este artículo consideraremos algunos de los mayores retos de la usabilidad y te ofreceré mis consejos para llegar a ser un mejor diseñador de interfaces.

1. Analizando las Audiencias

Cuando planificábamos Tuts+ tuvimos en consideración las diferentes maneras en las que la gente usaría el sitio.

En cualquier sitio web existen al menos tres partes involucradas - el cliente o propietario del sitio, el usuario del sitio y el diseñador o creador del sitio. De hecho, con frecuencia existen variedad de grupos de usuarios, algunos clientes diferentes, y posiblemente unas cuantas personas dentro del equipo de diseño. Estos son los agentes implicados que la gente prefiere denominar como "stakeholders" (una palabra que me hace imaginar un grupo de gente sosteniendo chuletones).

El asunto peliagudo respecto a los stakeholders, es que cada parte normalmente quiere algo diferente. Tu o tus clientes tienen sus planes - ya sea el agradar a su jefe, hacer el logo más grande, u obviamente lanzar su mensaje. Tus usuarios tienen sus propósitos - la tarea que están intentando realizar, la información que están tratando de encontrar. Y por supuesto tu tienes tus propios objetivos - conseguir que tu diseño sea mostrado en tu galería de CSS favorita, agradar a tu jefe, encajar un diseño rápido antes de las 5pm cuando ya tenías planeado salir a dar una vuelta…

Bien en el mundo de los stakeholders, siempre es importante recordar que los usuarios son lo principal y que van los primeros. Si quieres un sitio web de éxito, tienes que negociar tus propios planes con las necesidades de los clientes de manera que los usuarios al final estén contentos y encuentren lo que buscan.  Ésta es la razón por la que una de las primeras cosas que haces cuando planificas una web es indagar sobre quién compone tu público objetivo.

Clases de Audiencia

Las palabras público objetivo parecen implicar que se trata de un grupo de gente al que nos dirigimos para usar el sitio. La realidad es que va a existir un puñado de gente que va a usar la web, nos guste o no, y depende de nosotros imaginar cómo serles útiles. Así que prefiero pensar en Clases de Audiencia, compuesta por los diferentes grupos de personas que van a usar el sitio.

Cada clase de audiencia tendrá un conjunto de tareas que intentarán realizar e información en la que estarán interesados. Como diseñador web tu trabajo consiste en descubrir cuáles son esas clases de personas, qué quieren y cómo van ha usar la web.  Para complicar más las cosas, puedes generalmente desglosar una audiencia de diferentes formas, algunas de las cuales serán de más ayuda que otras.

Así por ejemplo, en Tuts+, podrías decir que tenemos estas cuatro clases de audiencias: 

1. Principiantes en Photoshop y en Diseño
2. Diseñadores Web y Diseñadores Gráficos
3. Artistas Digitales
4. Visitantes Casuales Interesados

Ésta sería probablemente un buen método para la segmentación de la audiencia si estuviese interesado en los tipos de contenido a publicar en la web - p. ej. ¿debería tener más tutoriales sobre diseño web o más sobre modelado en 3D?  Pero desde el punto de vista de la usabilidad del sitio, no es de mucha ayuda. Otra forma de dividir la audiencia es decir que tenemos estos grupos:

1. Gente con el objetivo de aprender Photoshop
2. Lectores habituales que intentan mantener al día sus habilidades
3. Lectores habituales que quieren entretenerse un rato
4. Lectores habituales que participan en la comunidad
5. Visitas ocasionales o casuales

Viéndolo así, se comprende mejor los diferentes tipos de audiencia que acude a Tuts+ con objetivos diferentes en la cabeza.  A partir de este desglose podríamos deducir que la gente perteneciente a las categorías 1 y 2 son probablemente las que más impacto tienen en nuestro sistema, las categorías 1 y 4 estarán más interesadas en el grupo de Flickr, etc. Después podrías estimar los tamaños de las distintas audiencias y tener así una idea sobre lo que es más y menos importante en la web.

Priorizar las Tareas de los Usuarios

Una vez hayas identificado los grupos de usuarios, imaginado lo que quieren hacer en el sitio y aproximadamente cuan grade e importantes son cada uno de los grupos, podrás trabajar con las prioridades de las diferentes tareas de los usuarios.  Significativamente, los objetivos de tu cliente/propietario entran en juego aquí ya que valorarán la importancia de los diferentes grupos de usuarios.

Así que volvamos a nuestro ejemplo de Tuts+, una de las tareas más importantes es suscribirse al sistema Plus ya que es lo que hace rentable al sitio, así que aunque "Las personas con el objetivo de aprender Photoshop" no sea un grupo tan numeroso de la audiencia como "Lectores habituales matando el tiempo" o "Lectores habituales que participan en la comunidad", sí son más importantes. Consecuentemente dedicamos parte del mejor espacio de nuestra pantalla (área superior derecha de la columna lateral) a un cajetín que propone unirse a Plus.

"Los lectores habituales que participan en la comunidad" por otra parte son un grupo bastante numeroso pero además ocurre que es un grupo de gente que al mismo tiempo que están familiarizados con el sitio y están deseando trabajar un poco más, así que algo como el grupo de Flickr no puede ser ubicado en la zona inferior del sidebar, que aunque sea accesible, no es evidente de inmediato.

Parte Instinto, Parte Análisis, Parte Sentido Común

Al final de un día imaginando grupos de público, lo que quieren y lo que harán es una mezcla de instinto, análisis y sentido común. Yo con frecuencia me imagino que estoy haciendo educadas estimaciones, mientras que en los proyectos con un gran presupuesto podrías llevar a cabo encuestas y conseguir un poco más de certeza. Creo que sea cual sea tu habilidad y nivel de presupuesto, es una buen hábito redactar un breve análisis sobre los diferentes grupos. Con frecuencia te obliga a ver relaciones y problemáticas que de otro modo no te habrías planteado.

Después puedes presentar el análisis a tu cliente. En la mayoría de los casos te encontrarás con que te pueden informar de cosas sobre los grupos de audiencia que tú nunca habrías sabido de otra forma. Y cuanto más sepas sobre los usuarios, mejor podrás diseñar el sitio para ellos.

2 - Puedes aprender mucho observando a la gente

Es bastante fascinante (y exasperante) observar lo que la gente realmente hace en una web.

La mejor forma de saber cómo va a usar la gente un sitio web es verles haciéndolo. A esto se le llama realizar pruebas de usuario y durante mucho tiempo yo tenía la impresión de que era algo que sólo las grandes y sofisticadas agencias interactivas tenían que hacer.   Ciertamente, llevar acabo pruebas protocolarias de usuario es probablemente algo fuera del alcance del presupuesto del proyecto de un diseñador web, pero existen unas cuantas cosas que puedes hacer aunque seas sólo un tipo sentado en el sótano cogiendo proyectos web de eLance.

Las Pruebas de Usabilidad son Buenas para Ti como Diseñador Web

Lo primero que necesitas reconocer es que cuando realices cualquier tipo de pruebas de usabilidad, te convertirás en un mejor diseñador web. Conseguirás ver exactamente cómo la gente usa tus diseños web y hay muchas posibilidades de que te sorprenda el cómo lo hacen. Cosas que das por sentadas, con frecuencia no lo son, texto que creías que explicaba bien algo - ni siquiera es leído, y en general, lo usuarios hacen cosas que no se suponía que fuesen ha hacer. Incluso si las únicas pruebas de usabilidad que vas a hacer consisten en pedir a algunos amigos que usen la web mientras les observas, estarás más capacitado para realizar correctamente el trabajo, independientemente del tipo de proyecto que sea.

Existen Pruebas de Usabilidad Adecuadas

Si quieres realizar pruebas de usabilidad formales, una de la formas más sencillas y menos costosas es usar la Evaluación Heurística de Jakob Neilsen. A pesar de su aterrador nombre, se trata básicamente de obtener un grupo de cerditos guineanos para que usen la web y después evaluarlos bajo un puñado de criterios llamados heurísticos. El conjunto de criterios heurísticos más normalmente usado es set of 10 Usability Heuristics de Neilsen y el efectivo proceso sobre cómo conducir las pruebas está explicado en un artículo razonablemente fácil de entender.

Lo mejor de la Evaluación Heurística es que no necesitas muchas personas para realizar las pruebas, de hecho con 5 individuos deberías identificar el 75% de todos los problemas de usabilidad, mientras que doblar esta cifra a 10 sólo incermentará los resultados a un 85%. Imagino que las 5 personas deben ser razonablemente diversas ya que la idea es que personas distintas tienden a encontrar problemas diferentes. 

Conforme a un caso de estudio, el "ratio del balance coste-beneficio para la evaluación heurística de un proyecto de 48: El coste de usar el método fue de alrededor de $10,500 y los beneficios esperados fueron de aproximadamente $500,000"(Neilsen 1994) - lo cual suena increíble, aunque se que yo no he trabajado en muchos proyectos en los que haya podido convencer al cliente de invertir 10 más de los grandes.

Y También Existen las Pruebas de Usabilidad Aproximadas

¡El que no dispongas de unos flamantes $10,500 para soltar, no significa que no te puedas beneficiar de las pruebas de usabilidad! Al final, todo lo que realmente necesitas son algunas personas (alias amigos) con los que puedas invertir 10 minutos.  Previamente necesitas organizar las pruebas a realizar por estos. Puede tratarse de cualquier cosa, desde bocetos a papel y lápiz, mockups realizados en Photoshop, hasta una web que ya este a funcionando a medias. Después deberías sacar algunas ideas sobre lo que estás buscando, qué tareas intentará realizar una persona en el sitio y aclararte sobre lo que esperas ver. 

Ahora sienta a tu cerdito guineano, dales infórmales para que entiendan el objetivo que tienen que intentar conseguir - p.ej. "Estás intentando comprar un ticket para Fiji y acabas de llegar a ésta web…", después muéstrales el conjunto de JPGs o piezas de papel o la página aunque apenas tenga la estructura.    Si es algo que realmente no es funcional (p. ej. un grupo de JPGs o papeles) entonces tú produces la funcionalidad - ya sea explicando lo que ocurre cuando hacen "clic" en algún sitio o cambiando a la siguiente pantalla que verán.

Personalmente creo que los JPGs son lo mejor ya que puedes ver hacia donde se mueve el cursor de la persona, ellos están viendo algo que se acerca bastante a lo finalmente verán, pero al mismo tiempo no habrás tenido que pasar a la construcción real de la página completa.

Mientras estés haciendo pruebas no deberías decir mucho, ¡recuerda que tú estás observando!  Al final emplea algunos minutos más para consultarles cualquier pregunta que tengas "¿Por qué diablos has pulsado allí zoquete?" y toma cualquier nota que necesites "Acuérdate, haz ese botón mucho más grande".

¡Y eso es todo! No necesitas una bata blanca de laboratorio, tampoco equipamiento especial, realmente no necesitas nada…excepto algunos amigos o gente a la que puedas sobornar - y que no sean ellos mismos diseñadores.

Servicios de Pago de Terceras Partes

Tras escribir todo esto me ocurrió que podrían existir algunos servicios de terceros relativamente baratos que proporcionasen pruebas de usabilidad. Efectivamente, existe una compañía llamada UserTesting.com que te proporciona un vídeo y un resumen escrito basado en el uso que hace una persona real de tu web, los precios empiezan a partir de $19 por un sólo usuario hasta 100 usuarios por $1,699. Yo no puedo decir en que medida esta gente es objetiva, pero tengo que decir que invertir $100 para que 5 personas realicen diversas tareas a través de toda una web, no es un mal precio para un proyecto de tamaño pequeño o medio.  ¡Y si nada de lo anterior es seguro, lo que sí causará impresión es cuando le digas a tu cliente que vas a organizar un conjunto de pruebas de usabilidad!

No olvides que sólo puedes usar un servicio de este tipo con una web que esté funcionando realmente. Si estás intentando realizar pruebas en la etapa del mockup de Photoshop o con el boceto en papel, ¡vas a tener algunas dificultades! 

Herramientas de Análisis Tras la Publicación

En estos tiempos existen muchísimas herramientas de estadísticas que puedes usar para comprobar como usan las personas tu web. Aquí tienes algunas herramientas de análisis:

1. Análisis de Clics - CrazyEgg, Google Analytics Site Overlay, ClickHeat
   Con estos servicios puedes ver mapas de calor o "heatmaps" para conocer dónde pulsa la gente. El único que he usado realmente es el de Google Analytics (dirígete a Content > Site Overlay en el menú lateral). Están bastante bien para descubrir vagamente a dónde se dirige la gente dentro de una determinada página, pero por supuesto no sabes mucho más sobre lo que los usuarios están intentando conseguir, así que realmente es la mitad de la historia. 
2. Análisis de rutas - La mayoría de los buenos paquetes de análisis
   Imaginar que rutas tomará un usuario a lo largo de un sitio puede determinarse mediante paquetes de estadísticas como Google Analytics.  Desde configurar objetivos, embudos y eventos, registrar las páginas de abandono, así como el porcentaje de navegación según contenido y observar las rutas de navegación, realmente existe mucha más información de la que te puedas imaginar.  Personalmente lo encuentro un poco abrumador en ocasiones y sólo uso realmente los objetivos y embudos, pero intuyo que es mejor disponer más de lo que necesitas, que estar necesitado.  
3. Split Testing - Incluído en la mayoría de los buenos paquetes de análisis
   El Split Testing consiste en alternar dos versiones distintas de una página para ver como convierte cada una. Es una técnica muy útil para descubrir como optimizar ventas y páginas de aterrizaje o "landing pages" en particular, pero podrías usarlo para casi cualquier tipo de diseño de interfaz.

3 - "No Me Hagas Pensar"… demasiado

¡Menudo título! ¡Vaya libro!

Don't Make Me Think es el título de un famoso libro del experto en usabilidad Steve Krug y prácticamente resume la usabilidad con esta afirmación.    Un diseño útil no debería involucrar al pensamiento, debería ser obvio tanto qué se debe hacer como el cuándo se debe hacer. En el libro Krug explica que la gente usa los sitios web de una forma muy diferente a como nos gustaría pensar que hacen (¡algo que verás claramente en cuanto realices algunas pruebas!) y es importante saberlo para que puedas diseñarlas apropiadamente.  Mediante la creación de textos no excesivamente complejos, diseñando para el escaneo, aceptando que la gente no va a leer tus largas instrucciones, y cosas por el estilo, puedes trabajar con los hábitos y el comportamiento real de los usuarios para producir diseños más útiles.

Te estarás preguntando porque añadí "…demasiado" en este subtitular. Bien, tengo que admitir que me molestaba que webs de expertos en usabilidad como Steve Krug y Jakob Neilsen tuviesen un aspecto tan condenadamente básico. Supongo que entiendo porqué lo hacen así, pero a mi no me importa hacer pensar un poco más a los usuarios si con ello se obtiene un mejor impacto visual.  Supongo que soy más bien del tipo de los 37Signals que un devoto de Steve Nielsen.

4 - Navegabilidad y Orientación

Adobe.com realiza un buen trabajo con sus migas de pan o su rastro de "breadcrumbs" para mantenerte informado sobre dónde estás situado dentro de su gigante web.

No creo que pudiese escribir un artículo sobre diseño de interfaces sin tocar el tema de moverse dentro de una web. Las reglas cardinales de la navegabilidad son:

1. Los usuarios deberían siempre ser capaces de reconocer en que punto de la web están.
   A esto se le llama orientación y puedes conseguir un buen resultado a destacando los elementos de menú, los rastros de migas de pan, y los encabezados.  Ser capaz de orientarse en un sitio web es fundamental para hacerla comprensible y útil. En el mundo real es equiparable a la orientación a través de la señalética en las calles, te permiten saber dónde estás en ese mismo momento.
2. La navegación debe ser consistente
   No hay nada más confuso que tener una barra de menús que cambia de lugar, cambia de aspecto dramáticamente o simplemente desaparece. La navegación de una web es una de las herramientas más importantes que disponen los visitantes para entender el sitio. En el mundo real el equivalente físico de la navegación sería un mapa de calles, te permite imaginar a dónde te puedes dirigir. 

La mejor forma de entender porque la navegación y la orientación son tan importantes es imaginar que fueses repentinamente transportado a una ciudad remota y te pidiesen que te dirigieses a un sitio determinado, dándose el caso de que no existen señales en las calles, y que periódicamente tu mapa cambiase por sí solo, desapareciese y reapareciese. ¡El sufrimiento es menor en un sitio web, pero únicamente porque con un solo clic sales del laberinto!

Existen un montón más de convenciones e ideas sobre lo que hace que una navegación/orientación sea buena - pero todo lo demás está subordinado a estas dos reglas.

5 - Haz Tuyos los Problemas

Aunque más enfocado en el desarrollo web que en el diseño, el libro 37signals tiene algunas secciones interesantes útiles para trabajar con tus propios problemas. Y lo mejor de todo es que lo puedes leer gratuitamente online.

Ningún problema es tan claro como el tuyo. Esta es una de las razones por las que siempre se les advierte a los nuevos emprendedores que resuelvan sus propios problemas. Los diseñadores web se pueden beneficiar de la resolución de los problemas que ellos mismos hayan experimentado. Por algún motivo experimentar el sufrimiento de primera mano nos clarifica el cómo podrían mejorarse las cosas.

Como es poco probable que puedas elegir trabajar únicamente con las webs con las que hayas tenido experiencia directa, un mejor método es experimentar con los sitios web en los que estés trabajando. Puedes hacer esto de cualquiera de estas dos formas:

1. Emplear la web actual (si existe) de tu cliente.
2. Usar el sitio web de un competidor que haga cosas similares

Lo importante aquí es que cuando digo 'usar', no me refiero a realizar unos cuantos clics durante algunos segundos y después dar la tarea por terminada. Estoy hablando de usar realmente el sitio. Imagina tareas típicas (p. ej. "necesito contactar con el jefe de ventas en Delaware", "quiero realizar una reserva") y después realízalas hasta completarlas.  Cuando realmente entiendes las tareas y problemas a los que se enfrenta un usuario en una web, eres capaz de diseñar mucho mejor una solución.

6 - Las convenciones resultan familiares y sencillas

Los iconos son un excelente ejemplo de convenciones. Observa los iconos de arriba y verás cuantos de ellos te hacen pensar automáticamente en alguna tarea o acción. A propósito, estos iconos están disponibles con licencia de Creative Commons a través de Web Appers

Hace ya alrededor de una década que la web se ha convertido en algo habitual y durante este tiempo existen muchas cosas relativas al aspecto y la forma de funcionar de las webs que han sido aceptadas de forma general. Por ejemplo cuando pulsas un botón que dice "Inicio", esperas dirigirte a la primera página, no a una página que muestra la casa de una persona.  Parece obvio y estúpido, pero en eso consisten las convenciones.

Como corolario a nuestro anterior consejo "No me hagas pensar", el uso de estándares aceptados significa exactamente eso, lo usuarios no necesitan pensar. Si sitúas tu barra de navegación en el pié de cada página, vas a confundir a tus usuarios, a disgustarlos y ha hacer que salgan de la página. Si usas iconos comunes para propósitos poco habituales, no etiquetas adecuadamente elementos, no proporcionas confirmaciones del tipo "¿Estás Seguro?" para acciones irreversibles, etc., corres el riesgo de perder tus usuarios, y eso es lo último que querrías.

Seguro que hay veces en las que podrías no seguir los métodos convencionales, pero deberás tener una buena razón para hacerlo, y hacer todo lo posible para clarificar y argumentar lo que estás haciendo.