Errores en el Diseño de Interfaces

Unidad 5

IntroducciónLos errores en el Diseño de Interfaces se refieren a los errores

que se cometen cuando se diseña una interfaz de usuario

Tipos de ErrorSe pueden tener errores relacionados con los siguientes

elementos:

Errores relacionados con el UsuarioErrores en elementos de controlErrores de navegaciónErrores textualesErrores en la estructura de diseñoErrores de interacciónErrores responsivos

Errores Relacionados con el Usuario

Errores y Principios Relacionados con el Usuario

Se tienen varios principios relacionados con el usuario y su interacción con el sistema:

ErroresEnfocarse en los usuarios y sus tareas, no en la tecnologíaConsiderar primero la función y luego la presentación

PrincipioAdecuarse a la manera en que el usuario ve una tareaDiseñar para el caso más comúnNo complicar la tarea del usuarioFacilitar el aprendizajeMostrar información, no solo datosDiseñar para ser responsivoProbar en usuarios y mejorar

Errores de Elementos de Control

Errores en Elementos de ControlLa mayoría de las aplicaciones se desarrollan con herramientas,

las cuáles proporcionan conjuntos de controles como:Campos para texto y númerosCheckboxesRadio ButtonsMenusBotones

El error más comunes es seleccionar el tipo de control incorrecto

Errores Comunes de Radio Buttons y Checkboxes

Los radio buttons permiten seleccionar una opción de una lista de opciones mutuamente excluyentes

Se puede cometer el error de manejar los radio buttons por separado, especialmente cuando se utiliza una herramienta de creación

Errores Comunes de Radio ButtonsLos errores más comunes que se tienen relacionados con los

Radio Buttons son:Manejar radio buttons que realmente no son dependientes uno de otro

de tal manera que se cause confusión al usuarioUtilizar un radio button en lugar de un checkboxUn radio button puede verse afectado por el contenido en una

construcción dinámica

Principios para el Uso de Radio Buttons

Se recomienda utilizar los Radio buttons cuando se tengan dos condiciones:

El número de opciones es fijo y reducido: entre dos y ochoSe tiene espacio disponible para colocar las opciones una delante de

otra

Siempre se deben tener al menos un conjunto de dos radio buttons

Un solo radio button no es un control válido

Principios para el Uso de con Checkboxes

Los principios para no cometer errores al momento de utilizar un checkbox son:

Evitar que los checkboxes tengan un comportamiento de Radio Buttons

Se debe tener bien especificado cuantos checkboxes corresponden a una sola opción

Se debe especificar si es necesario o no seleccionar al menos una opción

Principios para el Uso de con Checkboxes

Otros principios para no cometer errores al momento de utilizar un checkbox son:

Se debe especificar si se tiene un límite máximo de opciones

No utilizar si se tienen opciones mutuamente excluyentes

Se puede indicar solamente una opción, si se especifica claramente cuál es la opción por defecto

Otros Elementos de ControlListas de Opciones

Representan una opción cuando se quieren seleccionar opciones y no se tiene el espacio suficiente para un conjunto de Radio Buttons

Listas de SelecciónSon listas en donde se despliegan diferentes opciones y se pueden

seleccionar uno o varios elementos, similares a las listas de opciones pero no aparecen como elementos desplegables

Otros Elementos de ControlElementos cíclicos

Presentan un valor actual y la opción de modificarlo a través de opciones de incrementar o decrementar

Botones de AcciónSi bien se pueden utilizar botones de acción como elementos de

control, se deben tener ciertas consideracionesLa principal se relaciona con la etiqueta del botón, esta se debe

desplegar de manera dinámica para reflejar el cambio que se tendría en la apariencia o configuración al presionarlo

Principios para el Uso de ListasPrincipios para evitar cometer errores al momento de diseñar

listas:No se debe mostrar una lista de opciones o de selección sin elementos

o incluso con solo un elemento

Se debe controlar de alguna manera lo que sucede si no se selecciona un elemento de la Lista

Se debe controlar si se seleccionan más elementos de los permitidos

Principios para el Uso de Elementos Cíclicos

Principios para evitar cometer errores con Elementos Cíclicos:

No permitir que el valor de un elemento cíclico se modifique manualmente

Considerar el incremento que se tendrá con un elemento cíclico

Considerar si se quiere un valor diferente al que se tiene en las opciones

No utilizar tabuladores como elementos de selección

Errores en el Uso de BotonesUn error común cuando se colocan botones es colocar cerca

botones que no se relacionan con la misma acción o funcionalidad

Para evitar este error, se deben organizar los botones de tal manera que solo queden juntos aquellos que se relacionen con la misma actividad

Principios para el Uso de BotonesPrincipios para evitar cometer errores con el uso de botones:

No utilizar botones para opciones de SI/NOSe debe cuidar el contenido de la etiqueta en el botónEn algunos casos la etiqueta deberá ser dinámica para adaptarse a lo que realizará el botón

Errores con Contenedores de TextoUn tipo de error con elementos de texto se relacionan con los

contenedores que se utilizan como entrada de texto

Uno de los errores más comunes con la entrada de datos es poner elementos que no sean editables, esto da una sensación de incomodidad al usuario

Otro tipo de error se asocia con el formato en el que se presenta un contenedor para leer la información

Principios para el Uso de Contenedores de Texto

Principios para evitar cometer errores con elementos textuales:

El espacio para la cantidad de información debe ser el adecuadoSi un campo es obligatorio, se debe especificarAunque se pueda limitar la cantidad de caracteres a escribir,

siempre se debe indicar que esta existeCada campo de texto debe tener una etiqueta que lo identifique al

usuario y ser claro en lo que se espera de él

Principios para el Uso de Contenedores de Texto

Otros principios para evitar cometer errores con elementos textuales:

Si un texto no es editable, es mejor no colocarlo dentro de una caja de texto, sino como una etiqueta

Es permitido desplegar texto no editable dentro de un contenedor con un scroll para recorrido

En la medida reducir el uso de cajas de texto, si es posible sustituirlas con otros elementos de entrada

Adaptar las cajas de texto a un formato adecuado

Errores en el Uso de Menú de Control

En la mayoría de las aplicaciones se tiene un menú que agrupa comandos u operaciones por categoría

Los errores cuando se utiliza un menú con opciones de control son:

Tratar de reducir la cantidad de opciones y la complejidad de los menús utilizando menús dinámicos que cambian de acuerdo a las acciones que se están realizandoEl uso de este tipo de menús termina por confundir al usuario al mostrarle opciones diferentes en el mismo lugar en donde se encontraban otras

Principios para el Uso de Elementos de Menú de Control

Principios para evitar cometer errores cuando se utiliza un menú de control:

En lo posible, mantener siempre las mismas opciones en los menús a lo largo de la interfazSe deben mantener siempre visibles las opciones más comunes y el resto de las operaciones se pueden manejar como paneles de operaciones

Para evitar errores al diseño de menús relacionados con niveles:

Limitar los niveles de navegación o diálogos de configuración a máximo dosLas configuraciones se pueden reducir con paneles desplegables

Principios para el Uso de Elementos de Menú de Control

Principios para evitar cometer errores cuando se utiliza un menú de control:

Considerar que los usuarios aprenden a utilizar una herramienta a partir del contenido de los menúsSe recomienda agregar o quitar menús, no elementos del menú, esto hace que el usuario note su existenciaEvitar menús con solamente una opciónUn menú dinámico puede cambiarse por un menú desplegable con las opciones

ExcepciónLa excepción a este comportamiento es la opción de utilizar archivos que se han usado recientemente

Errores de Navegación

IntroducciónLos errores de navegación se relación con el conocimiento que tiene un usuario sobre como moverse en la interfaz

El problema más común que se tiene en la navegación es que el usuario sepa en donde está y cómo llegar a donde desea

En una buena navegación, se debe conocer: en dónde está el usuario, en dónde ha estado y a dónde puede ir

Errores Más ComunesErrores que se comenten al diseñar una interfaz relacionados con la navegación:

No colocar un título a la página o a la interfazMal manejo de los títulosDistraer al usuario de la tarea que quiere realizarNo permitir una navegación en retroceso de manera sencillaNo ofrecer claridad para continuar avanzando al realizar una tarea

Errores Más ComunesErrores que se comenten al diseñar una interfaz relacionados con la navegación:

Tener demasiada profundidad en la navegación o al momento de realizar una tareaInexistencia o mal uso de cajas de búsquedaMal manejo de la búsqueda de resultados

Principios de NavegaciónPara identificar en donde está navegando un usuario se recomienda:

Las aplicaciones deben incluir títulos en todas las ventanas, por ejemplo: Nombre de la Aplicación :: Título de la VentanaEl nombre puede indicarse en la parte superior o con indicadores dentro de la interfazEn caso de menús laterales, es posible resaltar la sección en donde el usuario se encuentraCada interfaz deberá tener un título único

Principios de NavegaciónOtras recomendaciones para ayudar al usuario a identificar en donde se encuentra son:

Si una serie de interfaces tiene la misma funcionalidad, diferenciar el título en base a algún paso o acción específicoCongruencia en los títulos de interfaces desplegables a partir de selecciones

Principios de NavegaciónPara evitar los errores de Navegación en la misma interfaz

Evitar diferentes referencias en la misma interfazNo mostrar links en una página que lleven a la misma página, esto aplica a migajas y menús, para no deshabilitar la sección de menú, ésta se puede resaltar

Principios para Elementos de Búsqueda

Cuando se coloca una caja de búsqueda se tienen los siguientes principios:

Utilizar una caja de búsqueda para una búsqueda inmediataNo colocar más de dos cajas de búsqueda, en tal caso ofrecer una opción de Búsqueda Avanzada pero para la misma cajaMostrar y resaltar la información importanteMinimizar la necesidad de clicsHacer distinción entre resultados con estilo similar

Errores Textuales

IntroducciónA pesar de que el uso de interfaces gráficas ha crecido, la necesidad de texto en ellas sigue siendo un común denominador. Se puede encontrar texto en los siguientes elementos:

Etiquetas en comandos en menús o botonesInstruccionesLa información presentada es en su mayoría texto

Errores con Elementos de TextoEntre los errores más comunes que se pueden encontrar relacionados con el texto se tienen:

El error más común que se tiene es que el texto sea poco comunicativoTerminología inconsistente, diferentes términos para el mismo conceptoErrores de escritura, ortografía, redacción, gramática

Principios para el Uso de TextoRecomendaciones para evitar cometer errores al momento de utilizar texto:

Tener consistencia entre nombres de acciones y su resultadoUtilizar terminología comúnManejar un nombre por conceptoUtilizar estándares de la industria para conceptos comunesEvitar información redundanteEvitar el uso de sinónimos

Principios para el Uso de TextoRecomendaciones para evitar cometer errores al momento de utilizar texto

Nombrar las acciones como verbosCuidar la ortografía y gramáticaUtilizar consistencia en los textosNo saturar la interfaz de textoEvitar texto repetitivo de manera continua

Principios para el Uso de TextoRecomendaciones para evitar cometer errores al momento de utilizar texto

No utilizar la palabra “Usuario”Evitar mensajes de nivel bajo, es decir nivel programaciónNo utilizar mensajes de error vagos, se necesita una sugerencia de solución en términos de la tarea y no contener caracteres especiales

Errores en la Estructura

Errores en la EstructuraUna vez que se han definido los controles, su estructura y

etiquetas, se debe elegir la manera en que los elementos se presentarán, incluyendo colores, fuentes y estructura de la interfaz.

Los errores más comunes se relacionan con la manera en que se colocan los controles y la información en las ventanas, páginas o formas.

Errores con Despliegue de ElementosEntre los principales errores relacionados con el despliegue de elementos, se tiene:

Asumir que si la información se despliega, ésta será automáticamente vistaNo hacer que la información importante destaque o rodearla de gran cantidad de información

Principios para el Uso de Elementos de Despliegue

Se debe considerar que los usuarios pueden pasar por alto la información, por lo que siempre se debe resaltar lo que es más importante

Construir una jerarquía visual organizando la información en niveles de tal manera que se aprecie la organización de cada sección

La información a resaltar debe ser más grande

Principios para el Uso de Elementos de Despliegue

Colocar la información importante en la parte central de la interfaz

Resaltar la información con algún color diferente o contrastante al resto de la información (técnicas de densidad, color, saturación)

Una pequeña imagen resalta sobre gran cantidad de texto, un sonido o una pequeña animación de inmediato atraen la atención del usuario, pero no se debe exagerar con su uso

Elementos EmergentesLos elementos emergentes se consideran ventanas de diálogo

o ventanas emergentes.Las ventanas de diálogos se utilizan para mensajes de error,

advertencias o confirmaciones

Errores con Elementos EmergentesEn cuanto a las ventanas emergentes, el principal error es que

si se puede realizar una acción incluso estando abiertas, haya necesidad de moverla para ver la interfaz original

Principios para el Uso de Elementos Emergentes

Principios para utilizarlosSiempre ofrecer la opción de cerrarlos de manera sencillaMostrar información útil al usuarioEn caso de que tenga botones, no debe causar confusión con otros

botones de la interfaz que está debajoNo se debe tener que mover la interfaz para continuar leyendo la

información que hay debajo

Errores en Elementos ContenedoresUn error es utilizar un borde contenedor con un solo elemento,

un contenedor tiene sentido cuando agrupa al menos dos elementos relacionados entre sí

Principios para el Uso de Elementos Contenedores

Los principios para el uso de Elementos Contenedores son:Cuando se tenga solo un elemento, colocarlo con una etiqueta,

pero no dentro de un contenedorEtiquetar cada contenedor de manera que se sepa con que

funcionalidad se relacionaSe puede utilizar un elemento separados como una línea para

dividir secciones

Errores con Etiquetas de los Elementos

Un error común con las etiquetas además del relacionado con los errores textuales es que se colocan en una posición que no es la correcta

Principios para el Uso de EtiquetasPara evitar errores en el uso de etiquetas, se considera:

No alejar mucho una etiqueta del elemento que le correspondeSi se alinean a la izquierda y derecha, no colocarlos en los

extremosEl elemento no debe quedar en medio de dos renglones de textoAsegurarse que solo se puede relacionar una etiqueta con un

elementoLa separación entre etiquetas y elementos debe ser la misma para

todos los elementos de un grupoLa alineación de etiquetas y elementos debe ser consistente

Errores de Interacción

IntroducciónSe refieren a los errores que se pueden producir relacionados con la manera en que el usuario realiza una tarea

Errores de InteracciónDistraer la atención del usuario con sus tareas

Limitar al usuario en diversas operaciones

Presentar la misma información en diversos formatos

Agregar pasos innecesarios a la realización de una tarea o solicitar datos que no son esenciales

Repetir acciones frecuentemente para poder realizar otra acción

Presentar información no relevante o equivocada

Mal manejo de resultados en una búsqueda

Principios para Evitar Errores de Interacción

Entre las recomendaciones que se tienen para evitar errores de interacción se tienen

Facilitar la tarea a un usuario

Que el usuario no dependa de su memoria para realizar acciones

Solicitar solo la información que realmente tiene sentido para la tarea

Principios para Evitar Errores de Interacción

Tratar de evitar la mayor cantidad de restricciones posibles

Permitir el cambio de contraseñas o datos de configuración

Ofrecer una manera sencilla de recuperar datos olvidados

Ofrecer soluciones adecuadas y si es posible guiar al usuario paso a paso

Ofrecer la opción de continuar con una tarea en caso de que un error pueda recuperarse

Ofrecer la opción de cancelar modificaciones o tareas

Errores Responsivos

IntroducciónLos errores responsivos se relacionan con la respuesta a ciertas

acciones realizadas por el usuario

Errores ResponsivosEste tipo de error se relaciona con la respuesta que da el sistema al usuario acerca del estado de una operación que solicitó

El principal error es no indicar que están realizando, cuánto les falta por realizar y no tener la posibilidad de cancelar la operación

Tiempos de RespuestaConsiderar a una interfaz como un elemento que funciona en

tiempo real, si una aplicación tarda más de 0.1 segundos en mostrar que se ha hecho una acción para iniciar una tarea, por ejemplo: cambiar una liga de color, deshabilitar un botón, marcar un radio button

Un segundo es el tiempo máximo para mostrar el estado de la tarea

Diez segundos es el tiempo que una persona toma para interrumpir una tarea en caso de ver que no hay progreso

Consejos de RetroalimentaciónSiempre se debe indicar cuando se inicia una acción y cuanto falta

por realizar, es más importante conocer cuanto falta por hacer que cuanto se ha hecho

Mostrar el progreso total, no en el paso actual

Si se maneja porcentaje, comenzar en 1%, no en 0%

Al llegar a 100% mantener por un segundo, más tiempo le hace sentir al usuario que algo salió mal

Unidad 5IntroducciónTipos de ErrorErrores Relacionados con el UsuarioErrores y Principios Relacionados con el UsuarioErrores de Elementos de ControlErrores en Elementos de ControlErrores Comunes de Radio Buttons y CheckboxesErrores Comunes de Radio ButtonsPrincipios para el Uso de Radio ButtonsPrincipios para el Uso de con CheckboxesPrincipios para el Uso de con CheckboxesOtros Elementos de ControlOtros Elementos de ControlPrincipios para el Uso de ListasPrincipios para el Uso de Elementos CíclicosErrores en el Uso de BotonesPrincipios para el Uso de BotonesErrores con Contenedores de TextoPrincipios para el Uso de Contenedores de TextoPrincipios para el Uso de Contenedores de TextoErrores en el Uso de Menú de ControlPrincipios para el Uso de Elementos de Menú de ControlPrincipios para el Uso de Elementos de Menú de ControlExcepciónErrores de NavegaciónIntroducciónErrores Más ComunesErrores Más ComunesPrincipios de NavegaciónPrincipios de NavegaciónPrincipios de NavegaciónPrincipios para Elementos de BúsquedaErrores TextualesIntroducciónErrores con Elementos de TextoPrincipios para el Uso de TextoPrincipios para el Uso de TextoPrincipios para el Uso de TextoErrores en la EstructuraErrores en la EstructuraErrores con Despliegue de ElementosPrincipios para el Uso de Elementos de DesplieguePrincipios para el Uso de Elementos de DespliegueElementos EmergentesErrores con Elementos EmergentesPrincipios para el Uso de Elementos EmergentesErrores en Elementos ContenedoresPrincipios para el Uso de Elementos ContenedoresErrores con Etiquetas de los ElementosPrincipios para el Uso de EtiquetasErrores de InteracciónIntroducciónErrores de InteracciónPrincipios para Evitar Errores de InteracciónPrincipios para Evitar Errores de InteracciónErrores ResponsivosIntroducciónErrores ResponsivosTiempos de RespuestaConsejos de Retroalimentación