Principios formales de usabilidad en diseño de interfaces

Esta es una recopilación de principios formales para la creación de interfaces. Funcionan como una lista de buenas prácticas llevada al detalle con las que hacer o analizar la usabilidad de una interfaz.

Están ordenados siguiendo el flujo del usuario para/con la interfaz y cada uno de ellos tiene su argumentación y estudio empírico que constatan su eficacia.

1.    Acceso

Cree una interfaz adaptada técnica y físicamente a las necesidades del usuario.

1.1    Haga que el sitio sea sencillo y natural de usar.
1.2    Ofrezca a los usuarios un versión adaptada a otros dispositivos de acceso ( smartphones, Tablets, TV…).
1.3    Cree una correcta experiencia sin importar el navegador o sistema operativo.
1.4    Optimice el peso de todos los componentes de su sitio.
1.5    Siga estándares de representación.
1.6    Si el usuario no tiene la tecnología adecuada, ofrezca contenido alternativo.

2.    Visualización
Una presentación de información clara y ordenada es vital para una correcta experiencia de uso.

Estructura
2.1    Cree una interfaz simple.
2.2    Comunique su valor en los primeros 10 segundos.
2.3    Muestre la información más importante al inicio del documento.
2.4    Tenga en cuenta el orden de lectura.
2.5    Use un diseño en “F”.
2.6    Reduzca la carga de información.
2.7    Ofrezca una estructura de interfaz lógica.
2.8    Use una rejilla en todo el sitio para generar Consistencia.
2.9    No sobrecargue la memoria del usuario.
2.10    Economice el espacio.
2.11    Unifique bloques de información conceptualmente.

Estilo
2.12    Haga un diseño minimalista que destaque por su funcionalidad.
2.13    Jerarquice la información de una forma visual.
2.14    Use el color para mejorar el procesamiento cognitivo.
2.15    Use el contraste para dirigir la atención del usuario a la información relevante.

Publicidad
2.16    No haga que elementos de contenido del sitio tengan apariencia de publicidad.
2.17    No añada publicidad en páginas de ayuda y error.

3.    Navegación
Una correcta estructura de navegación hace al usuario ubicarse en cada momento y saber cuáles son las opciones de salida.

3.1    Haga una navegación consistente en todo el sitio.
3.2    Genere una estructura de navegación sencilla.
3.3    Optimice el número de clics para llegar al contenido deseado.
3.4    Si genera flujos complejos divídalos en pasos simples.
3.5    Asegúrese de que la interfaz “diga” al usuario como usar el sitio.
3.6    Cree metáforas del mundo real para hacer familiar la interfaz.
3.7    Ofrezca mapas o diagramas que ayuden al usuario a navegar.
3.8    Indique los enlaces como enlaces según las convenciones.
3.9    Haga un tamaño de enlaces en relación a su importancia y uso (Ley de Fitt).
3.10    No deshabilite el backbutton del navegador.
3.11    Impida que se pierda el usuario.
3.12    No abra nuevas ventanas del navegador.
3.13    Elimine elementos de navegación superfluos en flujos críticos (checkout, registration, etc.).
3.14    Si tiene muchos resultados, divídalos en páginas y use las convenciones de paginación.

4.    Búsqueda
Los usuarios llegan a su sitio en busca de respuestas y necesitan herramientas de búsqueda sencillas que le hagan encontrarlas en el menor tiempo posible.

4.1    Ofrezca un buscador bien visible en la parte superior.
4.2    Ofrezca múltiples opciones de búsqueda.
4.3    Permita búsquedas largas.
4.4    Indexe su contenido que de respuesta a varios tipos de búsqueda.
4.5    Cree una SERP sencilla y con los resultados en lista.
4.6    Indique el número de resultados.
4.7    Si hay muchos resultados ofrezca una solución para concretar la búsqueda.
4.8    Si no hay resultados, dígalo claramente.
4.9    Si no hay resultados ofrezca una solución para ampliar la búsqueda.
4.10    Copie a Google .

5.    Legibilidad
Leer en un ordenador es una experiencia interactiva y dinámica pero también costosa. En la mayoría de los casos es una lectura muy efectiva que tiene como fin ser el medio para realizar alguna acción. Por esto el tipo de redacción, estructura y presentación en pantalla tiene que ser muy cuidada.  

5.1    Unifique tamaños de fuente y jerarquicelos según importancia.
5.2    Reduzca texto, reduzca texto, reduzca más texto.
5.3    Fomente el escaneo para llamar la atención de las partes más importantes.
5.4    Use gráficos o ilustraciones que apoyen o remplacen el texto.
5.5    Use encabezados y entradillas con las ideas más importantes.
5.6    Use la “pirámide invertida” a la hora de redactar
5.7    Use vocabulario común.
5.8    Use palabras concretas y ejemplos.
5.9    Evite jergas, argot y otras palabras poco familiares.
5.10    Evite abreviaturas, acrónimos o siglas.
5.11    Use frases simples.
5.12    Use oraciones afirmativas en vez de negativas.
5.13    Use la voz activa en lugar de la voz pasiva

6.    Input (Formularios)
Introducir datos es de las tareas más tediosas para el usuario pero muy importantes para las empresas ya que ahí puede estar su negocio. Un formulario correctamente formateado conseguirá que los usuarios no generen errores ni se frustren a la hora de rellenarlos.

6.1    Optimice el número de campos.
6.2    Indique qué campos son obligatorios.
6.3    Evalúe qué campos son más agresivos y su beneficio (DNI, Teléfono…)
6.4    Ofrezca campos pre-rellenados si tiene información.
6.5    Ofrezca información asociada que explique qué introducir.
6.6    Posicione los campos de una manera clara y ordenada (Lista vertical, 2 cols..)
6.7    Valide o haga comprobaciones en tiempo real.
6.8    Aumente el tamaño de los campos
6.9    Deshabilite el botón de “Enviar” cuando se presione por primera vez.
6.10    En formularios repetitivos guarde los datos en cookie para no tener que introducirlos siempre.
6.11    Ofrezca ventajas para reforzar el interés del usuario.
6.12    No haga al usuario registrarse sin antes ofrecer información o funcionalidades.

7.    Errores
Es inevitable que el usuario se encuentre errores ya sea por su acción o por fallo del sistema. Debe crear una interfaz que los tenga en cuenta y ofrezca soluciones. Sea sincero con el usuario.

7.1    Si el usuario comete errores ofrezca una solución.
7.2    Explique claramente el problema.
7.3    Unifique el estilo de los errores.
7.4    Sitúe el mensaje donde se produzca el error.
7.5    Cuide el lenguaje.
7.6    Haga que el sistema se recupere fácilmente.
7.7    404, 500, 503… cree páginas personalizadas y ofrezca opciones de salida.
7.8    A la hora de redactar : http://www.trucosoptimizacion.com/index.php/2012/02/24/5-reglas-para-escribir-en-la-web/

8.    Ayuda
No importa lo bien diseñada que esté una interfaz, el usuario tendrá problemas y necesitará soporte y ayuda. Ofrecérselo de una manera rápida es vital para no tener un usuario frustrado.

8.1    Cree una página de ayuda.
8.2    Responda las dudas del usuario cuanto antes.
8.3    Ayude al usuario a aprender nuevas habilidades.
8.4    Para nuevas funcionalidades ofrezca ejemplos, tours o flujos predefinidos.
8.5    Ofrezca feedback.
8.6    Si la tarea es difícil, indíquelo.
8.7    Ofrezca una manera de contacto (e - mail, redes sociales,   teléfono).
8.8    Si el usuario ya ha aprendido, ofrezca atajos.

Referencias
•    Handbook of Usability Principles (San Diego State University)
•    Usabilidad: Prioridad en Diseño Web (J. Nielsen)
•    Defensive design (37 signals)
•    Designing the obvious (Robert Hoekman Jr.)