MANUAL DE USABILIDAD Estándares de diseño para interfaces de usuario
PRINCIPIOS GENERALES DE USABILIDAD
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.
BUSCADORES Dejar que el usuario busque todo lo que quiera. Ofrecer resultados ordenados.
FORMULARIOS Evitar campos innecesarios que solo son formalidades, por ejemplo: Tratamiento (Don, Sr., Sra.,) Tipo de Via (Calle, Camino, ...) 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:
Asterisco en campos obligatorios FORMAS DE ALINEAR LOS CAMPOS:
Nombre del campo arriba (se gana espacio horizontal)
Nombre del campo a la izquierda (se gana espacio vertical)
Es la opción mas recomendable cuando son pocos los campos del formulario.
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.
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:
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.
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 existentes cuando 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.
BOTONES DE ACCIONES PRIMARIAS Y SECUNDARIAS: Acciones primarias: enviar, guardar y continuar son necesarias para poder completar el formulario. Acciones secundarias: cancelar, resetear y volver. Este tipo de acciones no resultan imprescindibles para el objetivo principal. Las acciones primarias siempre se destacarán más que las secundarias.
Incorrecto: botones de aceptar y cancelar tienen las misma jerarqu铆a visual.
Correcto: botones de acciones primarias se descatan
BOTONES DE ACEPTAR Y CANCELAR: Para usuarios de Windows:
Para usuarios de Mac:
Bot贸n de confirmar (aceptar, guardar) a la izquierda, botones de cancelar a la derecha.
Bot贸n de confirmar (aceptar, guardar) a la derecha, botones de cancelar a la izquierda.
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.
Breadcrumbs
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 realmente importantes.
MENÚS NO DESPLEGABLES Y EN FORMA DE DIRECTORIO Y EN VERTICAL:
PESTAÑAS A) Pestañas de módulos 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 otros Hace falta una forma de cambiar de paneles sin ir a otra página
B) Pestañas de navegación Se necesita todo el ancho de la página de contenido El set de módulos es predominantemente estático y no se añadirán más con frecuencia Se necesita para representar el nivel más alto de navegación de un sitio
A TENER EN CUENTA 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 ERRORES AL DISEÑAR PESTAÑAS:
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.
OTROS ELEMENTOS DE NAVEGACIÓN:
Menús desplegables
Menús acoplados (se muestran o se esconden con botón)
Navegación horizontal (anterior y siguiente, carroussel)
PÁGINAS Y MENSAJES DE ERROR Siempre se debe crear una página 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. Crear una página específica para cada tipo de error. La página de error debe tener el mismo estilo que todo el sitio pero se debe dejar en claro que es un aviso de error. En formularios, pintar los campos que tienen error individualmente, acompañar con una breve explicación de la solución.
COLORES:
SEGURO: riesgo bajo o inexistente PRECAUCIÓN: riesgo leve ADVERTENCIA: riesgo grave DESCONOCIDO: no clasificado
ALERTAS DE BOOTSTRAP: Aviso: No completó completamente la descripción
Error: Hubo un error en la base de datos, intente en unos minutos.
¡Operación exitosa! la comunicación se ha enviado a los destinatarios seleccionados.
ÍCONOS Los íconos utilizados en una misma interfaz deben tener la misma morfología.
Correcto
Correcto
Incorrecto
EJEMPLOS DE FAMILIAS DE ÍCONOS:
ELEMENTOS QUE AYUDAN A NAVEGAR
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 colocar ventanas emergentes de ayuda.
Botones de Adelante, Atrรกs e Inicio Mapa del sitio web