MANUALDE USABILIDADEstándares de diseño para interfaces de usuario

La interfaz debe anticiparse a las necesidades del usuario.

Debe permitir deshacer las acciones realizadas.

Optimizar el tiempo de espera del usuario.

Asegurarse que los usuarios nunca pierden su trabajo como consecuencia de un error.

El color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente grande.

Alcanzar los objetivos con un mínimo esfuerzo y unos resultados máximos.

Cuando el usuario comete un error el sistema debe solucionar el problema.

No sobrecargar al usuario de información.

Dejar que el usuario busque todo lo que quiera.

Ofrecer resultados ordenados.

PRINCIPIOS GENERALES DE USABILIDAD

BUSCADORES

Evitar campos innecesarios que solo son formalidades, por ejemplo:

Cuestionarse el uso de los combos en los formularios.A veces es mas rápido escribir que seleccionar la opción en el combo.

Colocar en los campos valores de sugerencia para los usuarios, por ej:

Tratamiento (Don, Sr., Sra.,)Tipo de Via (Calle, Camino, ...)

Asterisco en campos obligatorios

Nombre del campo arriba(se gana espacio horizontal)

Nombre del campo a la izquierda(se gana espacio vertical)

FORMAS DE ALINEAR LOS CAMPOS:

FORMULARIOS

Es la forma mas utilizada en los diseños web actuales. Cognitivamente se genera una rápida asociación entre los labels y los campos de texto.

Es la opción mas recomendable cuando son pocos los campos del formulario.

AYUDAS ESPECÍFICAS PARA CADA FORMULARIO:

A) Ayuda automática

B) Ayuda invisible activada por el usuario

POSIBLES FORMAS DE CUBRIR UN FORMULARIO CON VARIAS COLUMNAS:

BOTONES DE ACCIONES PRIMARIAS Y SECUNDARIAS:

Acciones primarias: enviar, guardar y continuar son necesarias para poder completar el formulario.

Las acciones primarias siempre se destacarán más que las secundarias.

Acciones secundarias: cancelar, resetear y volver. Este tipo de acciones no resultan imprescindibles para el objetivo principal.

AGRUPACIONES DE CONTENIDOS

Crear agrupaciones de contenidos basados en la relaciones existentes entre ellos ayudará a facilitar la comprensión y rellenado de los campos existentescuando haya varias categorías de datos, facilitando la lectura y la exploración.

Debemos centrarnos únicamente en las agrupaciones que realmente sean relevantes, ya que una sobrecarga visual que transmita un exceso de agrupaciones puede resultar contraproducente al obtener el efecto contrario.

Utilizar elementos visuales, siempre lo más sutiles que sea posible,para crear las agrupaciones sin crear ruido visual.

Los formularios en varias columnas deben evitarse.

Con una sola columna solo existe un orden posible que es descendente.

Vale la pena ganar en scroll y hacer el formulario sencillo evitando confundir al usuario.

Para usuarios de Windows:

Botón de confirmar (aceptar, guardar)a la izquierda, botones de cancelar a la derecha.

Para usuarios de Mac:

Botón de confirmar (aceptar, guardar)a la derecha, botones de cancelar a la izquierda.

BOTONES DE ACEPTAR Y CANCELAR:

Incorrecto: botones deaceptar y cancelar tienenlas misma jerarquía visual.

Correcto: botones deacciones primariasse descatan

Breadcrumbs

MENÚS Y NAVEGACIÓN

Los menús con demasiados niveles son difíciles de manipular.

Los menús de múltiples niveles generalmente contienen muchos elementos, por lo que sobrecargan la memoria del usuario y le hacen más difícil aprender a usar el sitio.

Generalmente se diseña a varias columnas para evitar el scroll.

La tipografía es muy importante para darle orden, agrupar opciones y facilitar su uso.

El orden de lectura es vertical.

MENÚS DESPLEGABLES:

Un usuario no sabe, a priori, qué opciones hay en el desplegable de turno, hasta que utiliza el ratón para descubrirlo.

No todos los usuarios tienen la suficiente habilidad psicomotriz para manejar un desplegable con soltura.

Es mejor que las opciones disponibles se puedan ver de un vistazo

Excesivas opciones desvían la atención de las realmenteimportantes.

MENÚS NO DESPLEGABLES Y EN FORMA DE DIRECTORIO Y EN VERTICAL:

A TENER EN CUENTA AL DISEÑAR PESTAÑAS:

ERRORES AL DISEÑAR PESTAÑAS:

Para que las pestañas logren un efecto completo, los elementos gráficos deben crear la ilusión de que la pestaña activa está por encima de las otras pestañas.

La pestaña además debe estar conectada con el área de contenido tal como sucede en una ficha física

Anidar pestañas o combinar pestañas horizontales con pestañas verticales.

Scroll en pestañas horizontales, el desplazamiento horizontal no es fácilmente detectable.

Colocar iconos en las pestañas: añaden desorden visual innecesario y consumen espacio.

PESTAÑAS

Existen varios paneles de contenido pero sólo hay espacio para mostrar un panel al mismo tiempo.Los diferentes paneles no necesitan verse en contexto unos con los otrosHace falta una forma de cambiar de paneles sin ir a otra página

A) Pestañas de módulos

B) Pestañas de navegación

Se necesita todo el ancho de la página de contenidoEl set de módulos es predominantemente estático y no se añadirán más con frecuenciaSe necesita para representar el nivel más alto de navegación de un sitio

Menús acoplados (se muestran o se esconden con botón)

Navegación horizontal (anterior y siguiente, carroussel)

Menús desplegables

OTROS ELEMENTOS DE NAVEGACIÓN:

¡Operación exitosa! la comunicación se ha enviado a los destinatarios seleccionados.

Aviso: No completó completamente la descripción

Error: Hubo un error en la base de datos, intente en unos minutos.

Siempre se debe crear una página de error.

Crear una página específica para cada tipo de error.

En formularios, pintar los campos que tienen error individualmente,acompañar con una breve explicación de la solución.

La página de error debe tener el mismo estilo que todo el sitio pero se debedejar en claro que es un aviso de error.

Esta página debe contener una explicación breve del motivo posible del error junto al logo de la página y enlaces a la portada, mapa del web, ayuda, etc.

COLORES:

ALERTAS DE BOOTSTRAP:

SEGURO: riesgo bajo o inexistente

PRECAUCIÓN: riesgo leve

ADVERTENCIA: riesgo grave

DESCONOCIDO: no clasificado

PÁGINAS Y MENSAJES DE ERROR

Los íconos utilizados en una misma interfaz deben tener la misma morfología.

EJEMPLOS DE FAMILIAS DE ÍCONOS:

Correcto

Correcto

Incorrecto

ÍCONOS

Incluir solo las opciones fundamentales.

Zonas activas claramente definidas.

Indicar la posicion relativa del usuario en la interfaz (Breadcrumbs).

Ayudar al usuario a reconocer lo que es clickeable y lo que no.(por ej: links subrayados)

Ofrece al usuario la informacion necesaria sobre donde está y a donde puede ir de forma clara.

Procurar que la palabra enlazada indique claramente el destino.

En secciones que impliquen información extra para el usuario colocarventanas emergentes de ayuda.

ELEMENTOS QUE AYUDAN A NAVEGAR

Botones de Adelante, Atrás e Inicio

Mapa del sitio web