Principios de la interfaz de usuario

2023-10-17

En este tema se describe cómo implementar los principios de diseño de una interfaz de usuario y una experiencia del usuario intuitivas en aplicaciones de Windows.

Introducción
Principios básicos de una correcta interfaz de usuario
20 recomendaciones para mejorar la experiencia funcional del usuario
Conclusión

Introducción

A menudo, los desarrolladores no tienen en cuenta la perspectiva del usuario final. Los desarrolladores trabajan mucho para que la aplicación funcione (los clientes solo esperan que funcione y su percepción del software se centra en torno a este requisito). Esto sucede sobre todo cuando se desarrolla software comercial que van a utilizar personas sin conocimientos técnicos. Los desarrolladores deben tener en cuenta las necesidades del usuario final en todo el proceso de diseño del software.

No solo debe ser muy fácil desplazarse por las aplicaciones de software, sino también usarlas en general. Con la cantidad de software que se crea, se calcula que cuatro de cada diez aplicaciones de software tienen una magnífica interfaz que gusta mucho al usuario final y que es muy cómoda de usar desde el primer momento.

Se crea una ingente cantidad de software de uso interno para empresas. Tanto si se desarrolla internamente como si se encarga a un consultor, a menudo se invierten muy poco de tiempo, esfuerzo o dinero en la creación de una buena interfaz de usuario. El rol de "diseñador" es poco frecuente en el ciclo de desarrollo, sobre todo en el mundo de las aplicaciones de Windows.

Para lograr que la interfaz de usuario de cualquier aplicación sea mucho más atractiva y funcione mejor, es preciso seguir algunas reglas básicas. Esto no requiere demasiada inversión de tiempo o dinero por su parte, y con ello obtiene una buena rentabilidad de la inversión.

Antes de continuar, vamos a diferenciar entre la interfaz de usuario y la experiencia del usuario, al menos para el ámbito de este artículo. La primera incluye los objetos visuales y controles de la aplicación, mientras que la segunda abarca tanto la interfaz de usuario como el comportamiento de la aplicación, en relación con la interfaz de usuario, así como la "sensación" que obtiene el usuario de la aplicación. No solo hay que diseñar una interfaz de usuario visualmente muy atractiva, sino también es preciso asegurarse de que funciona perfectamente.

Aquí analizaremos 20 puntos del diseño de la experiencia de usuario que se pueden integrar fácilmente en la fase de diseño de cualquier aplicación. El resultado será el desarrollo de aplicaciones más ricas y con una funcionalidad más intuitiva, lo que podría denominarse una "experiencia de usuario humana". Como todos sabemos, la generación de aplicaciones de Windows Vista tendrá que tener un aspecto y un comportamiento diferentes. Este tema le ayudará a prepararse para futuras aplicaciones, al mismo tiempo que ofrecerá a los usuarios actuales un adelanto del futuro.

En las secciones siguientes se describen los conceptos básicos de un diseño adecuado de cualquier interfaz de usuario.

Principios básicos de una correcta interfaz de usuario

Cualquier profesional que busque una buena experiencia del usuario depende de estos cuatro factores:

Espaciado y colocación de los elementos
Tamaño
Agrupar
Intuitividad

Con las versiones de Microsoft Visual Studio anteriores a la 8.0, ni el espaciado ni el ajuste de tamaño eran óptimos. Una cuadrícula de 4x4 u 8x8 no siempre funciona. Con la inclusión de lineas de ajuste, el proceso se ha simplificado considerablemente. La alineación de una etiqueta con un cuadro de texto, o lo que es peor, la alineación de varias etiquetas con sus cuadros de texto correspondientes era acciones muy difíciles de realizar en las versiones anteriores de Visual Studio. Las líneas de ajuste han simplificado considerablemente este proceso.

En las secciones siguientes se describen cuatro de los aspectos más importantes del diseño profesional de la experiencia del usuario.

Espaciado y colocación de los elementos

Es importante el espacio que haya entre los controles. En la siguiente captura de pantalla se muestra un formulario de entrada de información del usuario mal diseñado (los dos cuadros de texto superiores están demasiado cerca, la lista que hay debajo de ellos está demasiado lejos y hay mucho espacio sin usar en el formulario).

captura de pantalla de un formato mal diseñado.

En la siguiente captura de pantalla, se puede ver un cuadro de diálogo con un aspecto más profesional, con un espaciado adecuado y controles de un tamaño apropiado. Es el mismo formulario que el de la captura de pantalla anterior, pero se modificó para usar el espaciado recomendado por las líneas de ajuste. Siempre se recomienda alinear una etiqueta con la línea base de texto del cuadro de texto u cualquier otro control que esté al lado, en lugar de con el borde inferior real del control. Las líneas de ajuste cambian de color cuando se logra esa alineación, normalmente solo unos pocos píxeles por encima del borde inferior.

captura de pantalla de un formato mejor diseñado.

Aunque no hay reglas exactas para el espaciado, las líneas de ajuste proporcionan directrices muy útiles para lograr el espaciado adecuado. Otras herramientas que le ayudará a mantener el espaciado adecuado son los controles de diseño del grupo de cuadros de herramientas Contenedores. TableLayoutPanel también es muy útil para crear cuadros de diálogo de estilo del formulario de entrada.

Tamaño

Las mismas consideraciones se aplican al tamaño. Al arrastrar un botón desde el cuadro de herramientas a un formulario, tiene el alto y ancho perfectos. El ancho máximo recomendado (salvo que haya motivos muy importantes para lo contrario) es duplicar el ancho original.

Si observa la ventana Ejecutar en el menú Inicio o el cuadro de diálogo Propiedades de cualquier objeto del Explorador de Windows, los tamaños de botón son los "adecuados". Si tiene alguna función muy importante que necesite que el usuario final perciba sin errores, se pueden emplear métodos que no sea usar un botón grande o colores no estándar (posteriormente encontrará más información al respecto).

En la siguiente imagen, puede ver tres botones. El primer botón es el tamaño más recomendado y es el tamaño que se crea de forma predeterminada cuando se arrastra (o hace doble clic) desde el cuadro de herramientas. A veces hay texto adicional que exige que el botón sea mayor. El segundo botón muestra un tamaño grande pero aceptable. Aunque hubiera otros controles, el aspecto no sería abigarrado. Sin embargo, el tamaño del tercer botón es completamente inaceptable. Puede ver que incluso distorsiona ligeramente los mapas de bits del tema que Windows usa para dibujar controles con temas. También hará que sea difícil alinear otros controles intuitivamente a su alrededor.

imagen de tres botones, que aumenta el tamaño de izquierda a derecha.

Agrupar

Lo habitual es que una aplicación contenga muchos controles. Una agrupación adecuada e intuitiva es lo único que puede facilitar su uso. La mejor forma de agrupar por funciones o categorías es usar controles mediante pestañas. Por ejemplo, "Cuentas", "Informes", "Empleados" y "Proyectos" serían candidatos perfectos para usarlos como pestañas en una aplicación empresarial típica. La mejor forma de agrupar elementos al mismo nivel (controles que contribuyen a lograr el mismo resultado final) es usar controles de grupo. No se recomienda usar paneles con bordes para dicha agrupación. Los controles de grupo ahorran el peso adicional de un control de etiqueta, sobre todo si los controles secundarios se explican por sí mismos.

No se recomienda colocar controles de grupo dentro de otros controles de grupo, a menos que no haya más de 2 o 3 en un control de grupo grande.

Intuitividad

Este es el aspecto más importante para lograr una excelente experiencia de usuario. Una experiencia de usuario intuitiva reduce la necesidad de explicaciones. El usuario conoce la función de los controles.

Un tema importante en un diseño intuitivo es la codificación mediante colores. Un buen ejemplo se presenta en Windows XP, que incluye nuevos botones cuadrados con esquinas redondeadas para funciones como la navegación en aplicaciones con temas, los cuadros de diálogo Cerrar sesión y Desactivar equipo, entre otros.

Los colores de estos controles se determinó en función de la gravedad del resultado que se produce al pulsar el botón. El botón Navegación es verde, como la luz de paso de un semáforo. El color del botón Apagar, lo que provocaría una potencial pérdida de trabajo, es el rojo como un signo de advertencia. Los botones semi-críticos, como Cerrar sesión o Hibernar, son de color amarillo. Los botones neutros que no tienen ningún efecto crítico en los procesos de trabajo del usuario, como Ayuda, son de color azul suave. Si se crea una interfaz de usuario con máscara, se deben tener en cuenta estos aspectos sobre el color.

Un buen ejemplo de reconocimiento de contenido por colores es Microsoft Office OneNote. Las pestañas de la aplicación se pueden establecer en colores diferentes, mientras su aspecto siga siendo una parte adecuada del diseño general del estilo de Windows XP.

Otro aspecto importante es el texto de las aplicaciones. Recientemente, se han realizado grandes esfuerzos para simplificar el lenguaje que se usa para las instrucciones escritas en el software de Windows. El uso del texto dentro del software se explicará más adelante, pero tenga en cuenta el siguiente detalle, que es pequeño pero importante.

MSN Messenger tenía en su cuadro de diálogo Opciones la casilla "Compartir funcionalidades de cámara web". Tanto los desarrolladores como los amantes de la tecnología saben lo que esto significa, pero los usuarios novatos quizás pensaran que podría permitir que un usuario que se encuentra en el otro extremo del chat usara también su cámara web. En una versión reciente, la cambiaron a "Mi cámara web: permitir que otros vean que tengo cámara web". Esto es perfecto para el público objetivo que puede que no tenga conocimientos técnicos y se usa para simplificar el lenguaje.

Un lenguaje más sencillo facilita su comprensión y, además, hay una ventaja adicional. Los estudios científicos muestran que nuestra mente funciona más fácilmente con un lenguaje más sencillo cuando intenta comprender algo nuevo. A menudo, nuestro cerebro procesa palabras como "esto", "para", "eso" y otras palabras comunes de forma tan rápida y sin esfuerzo que se asigna más "ancho de banda" para comprender las palabras que destacan, como "cámara web" u "otros", en el ejemplo anterior.

Los títulos de los cuadros de mensaje, los subtítulos de los cuadros de grupo y otros bloques de texto facilitan la transmisión de la función de un grupo de controles al usuario final con pocas palabras.

La intuitividad también nace de la familiaridad. Por ejemplo, la colocación de los botones Aceptar y Cancelar es tan uniforme e instaurada en nuestras mentes que si están colocados en un cuadro de diálogo en orden inverso (Cancelar y luego Aceptar; en lugar de Aceptar y Cancelar), podría hacer clic en Cancelar. Después de usar un estándar determinado para hacer cosas (por ejemplo, aplicaciones Windows) durante más de un año, se desarrollan ciertos hábitos. El uso de los estándares del sector (por muy poco explícitos que puedan ser) hace que el software sea más fácil de usar.

En una de las primeras compilaciones preliminares de Windows Vista, los botones Minimizar, Maximizar y Cerrar de cualquier ventana eran diferentes. En las versiones anteriores de Windows (sobre todo cuando se usa un solo monitor), se desarrollaba el hábito de mover el cursor en la esquina superior derecha de la pantalla y hacer clic en él. Esta acción siempre provocaba el cierre de la ventana. En esta compilación concreta de Windows Vista, había aproximadamente un espacio de ocho píxeles entre el botón Cerrar y el borde más a la derecha de la ventana. El espacio adicional hizo que fuera atractivo (y que probablemente era necesario para la bonita animación que el botón mostraba), pero irritaba a los usuarios, porque no les permitía cerrar las ventanas abiertas fácilmente. El reacondicionamiento de la mente no es una tarea fácil. Afortunadamente, en la siguiente compilación, se solucionó este problema. Ahora, sigue habiendo espacio entre el borde de la ventana y el botón Cerrar, pero si se hace clic en ese espacio también se cierra la ventana.

Un factor muy importante del diseño intuitivo es la cantidad de "ancho de banda mental" (la cantidad de tiempo que puede tardar nuestra mente en comprender algo) que usa. Cuanto menor sea el uso del "ancho de banda", mejor será la experiencia del usuario.

Estas son las pequeñas cosas que contribuyen a la "experiencia" de usar una aplicación de software. En los siguientes ejemplos se ofrecen sugerencias para mejorar las aplicaciones con trucos y sugerencias para el día a día.

20 recomendaciones para mejorar la experiencia funcional del usuario

El objetivo de una mejor experiencia de usuario es tener una interfaz de usuario más sencilla y funcional, y que también es atractiva. Estas sugerencias le ayudarán a dar forma a la interfaz de usuario para que sea más eficaz.

Uso de estándares

Los estándares establecidos de todos los entornos de software (ya sea en el nivel de sistema operativo, el nivel de marca o el nivel de aplicación) son muy importantes. Además de la personalización de marca, los estándares actúan como un esquema proverbial en la mente del usuario. Si el usuario pasa largos períodos trabajando con una aplicación de software, aumentará automáticamente su productividad debido a la creciente familiaridad.

Antes de explicar los estándares, vamos a explicar primero lo que son exactamente. Los estándares incluyen el diseño de controles de una manera determinada en los cuadros de diálogo (como los botones Aceptar y Cancelar, la forma de la interfaz de usuario), las esquinas redondeadas de la parte superior de la ventana como en cuadros de diálogo de Windows XP, los estilos de iconos, los estilos de cualquier otro gráfico, el comportamiento interactivo de la aplicación, etc.

Si la aplicación se encuadra en un nicho concreto, puede resultar mejor seguir otro conjunto de estándares. Por ejemplo, si la aplicación o un complemento admiten Office OneNote 2003, es aconsejable seguir los estilos de la interfaz de usuario y los estándares de interactividad de Office, y del propio OneNote, en particular. Esto incluye el uso de las barras de comandos de estilo Office, en lugar de las barras de herramientas estándar, así como otros elementos, tanto visuales como de comportamiento. Si la aplicación va a formar parte de la categoría .NET de Microsoft Visual Studio, tiene un conjunto de estándares independiente. De hecho, para este tipo de complemento o aplicaciones de soporte técnico, las empresas como Microsoft lanzan directrices escritas. Tenga en cuenta también que a veces los conceptos gráficos y de diseño son propiedades intelectuales protegidas. Compruebe siempre la documentación adecuada para asegurarse de que tiene la licencia necesaria para crear dichos diseños.

Un tercer ejemplo de estándares sería el entorno de Tablet PC. Estos estándares atraviesan los límites entre las directrices del sistema operativo y las de las aplicaciones. La documentación del SDK de Tablet PC contiene información muy útil en el tema "Planear la aplicación". A diferencia de las directrices de Office 2003 o Visual Studio, estas recomendaciones de diseño afectan directamente a la forma en que el usuario interactuará con la aplicación y en cómo debe comportarse a su vez. Por ejemplo, si tiene ventanas de acoplamiento en la aplicación, la documentación recomienda asegurarse de que puede detectar el cambio de orientación de la pantalla y que las ventanas de acoplamiento se reorganizan correctamente en una orientación vertical o horizontal, lo que sea necesario. Aunque no diseñe la aplicación para que sea específica para tableta, debe seguir estas directrices.

Con el auge de los clientes inteligentes, ahora las aplicaciones traspasan las fronteras entre los distintos tipos de hardware: equipos normales, Tablet PC, dispositivos móviles o ultra móviles, equipos con Media Center, etc. Cada situación requiere que se siga un conjunto diferente (o adicional) de estándares.

Cuando las aplicaciones comparten los estándares de funcionamiento de nivel de sistema operativo o de nivel de la aplicación, los usuarios se sienten más a gusto con el software, lo que facilita su aprendizaje y uso. Esto provoca un aumento directo a la productividad. Los usuarios quieren ser productivos con el nuevo software lo antes posible.

Dirigir la atención a los botones importantes

A veces es preciso dirigir al usuario a los botones más importantes, incluso cuando haya otros cuatro o cinco botones alrededor. Si experimenta con el tamaño, el color o la fuente, no seguiría los estándares, algo que no se recomienda. En su lugar, puede usar un par de trucos sencillos para lograrlo.

El primero consiste en convertir los otros botones no críticos en LinkLabels, como se muestra en la imagen siguiente. De este modo, el usuario sabe que estos vínculos realizarán una tarea, pero su atención irá primero al botón que destaca (por lo que dejan de seguirse las directrices de diseño estándar).

imagen de tres botones convertidos a linklabels.

El segundo consiste en colocar el botón crítico el primero de línea, ya sea a la izquierda en los diseños horizontales, como se muestra en la siguiente imagen, o en la parte superior en los diseños verticales. Tenga en cuenta que esto puede cambiar en función de la referencia cultural del usuario de destino (puede resultar mejor si coloca el botón en cuestión en el extremo derecho si la aplicación está cualquier idioma que se escriba de derecha a izquierda).

imagen de tres botones donde el botón crítico está más a la izquierda en un diseño horizontal.

La opción recomendada es establecer recibir el foco de forma predeterminada. Por ejemplo, en un cuadro de diálogo de confirmación de eliminación, se debe resaltar la opción No, ya que esto impide que el usuario realice alguna eliminación de forma accidental.

Simplificación del reconocimiento con iconos

Los iconos (sobre todo los de Windows XP y Office 2003, y los mapas de bits de la barra de herramientas) ayudan a acelerar el conocimiento de la interfaz de usuario y la tarea que el usuario tiene que realizar.

Por ejemplo, cuando vea el icono de exclamación, que se ve con más frecuencia en el cuadro de mensaje, al instante se dará cuenta del nivel de riesgo asociado a los controles situados junto al icono. Del mismo modo, cuando una aplicación presenta muchos controles (por muy bien organizados que estén) puede resultar desalentador encontrar el conjunto de controles que se busca.

En Windows XP Service Pack 2, se agrega una pestaña actualizada al applet del panel de control Propiedades del sistema denominado "Actualizaciones automáticas". Hay cuatro opciones: descargar actualizaciones automáticamente, descargar actualizaciones dejando que el usuario decida cuándo instalarlas, notificar al usuario si hay actualizaciones disponibles pero no iniciar la descarga y deshabilitar las actualizaciones automáticas por completo.

Es posible que un usuario de PC nuevo no sepa cuáles son estas actualizaciones ni cuál sería mejor elegir. Por consiguiente, Microsoft ha colocado un icono de un escudo verde con una gran marca de verificación junto a la opción más recomendada, que significa "segura", y un icono de un escudo rojo con una gran "x" junto a la que sería potencialmente dañina para el usuario. Esto es muy útil en situaciones críticas, sobre todo cuando el usuario no tiene tiempo para leer mucho texto.

En el mismo applet Propiedades del sistema, cada pestaña tiene varios GroupBoxes con controles diferentes para las distintas tareas. Junto a cada grupo se coloca un gráfico relativo que señalaría fácilmente la tarea del grupo de control. Este tipo de código gráfico es similar a la codificación por colores de los archivos físicos o los parkings. Esto también funciona según el mismo principio que algunos elementos visuales en artículos de revistas: mantiene el interés del lector.

También es importante elegir el icono correcto. Microsoft proporciona muchos gráficos estándar como parte de Visual Studio 2005. Esta sería la mejor opción. Si crea sus propios iconos, es muy aconsejable que siga los estándares de nivel de sistema operativo o de nivel de aplicación para estos gráficos, como se mencionó en la sección Uso de estándares.

En Instrucciones para la interacción de la experiencia del usuario de Windows encontrará una guía muy útil para crear iconos con el estilo de Windows.

Simplificación del reconocimiento con encabezados

Los encabezados son la forma perfecta de explicar todo el cuadro de diálogo en una sola frase (y opcionalmente un gráfico). A veces, los encabezados pueden incluso ayudarle a acomodar la navegación y los comandos dentro de ellas también. Los encabezados funcionan mejor que las etiquetas de descripción normales, ya que son lo primero que ve el usuario cuando aparece el cuadro de diálogo.

Es posible que los asistentes de Windows Installer sean los encabezados más populares: un icono simple en el extremo derecho, una etiqueta de título que describe el cuadro de diálogo (por ejemplo, Seleccionar carpeta de instalación) y un sub encabezado que describe el propósito del cuadro de diálogo (por ejemplo, Seleccione la carpeta en que se instalarán los archivos de software).

Supongamos que tenemos una aplicación empresarial típica con una sección de cuentas. Siguiendo el paradigma de diseño defendido por Windows Vista, podemos suministrar información de misión crítica y comandos relacionados en el encabezado (o el pie de página si el escenario lo requiere). Nuestro usuario ha abierto el archivo de cuentas de "Big Company" y el encabezado sería similar al que se muestra en la siguiente captura de pantalla.

captura de pantalla de un cuadro de diálogo que contiene un pie de página detallado.

En la siguiente captura de pantalla se muestra un ejemplo de un encabezado detallado en un cuadro de diálogo.

captura de pantalla de un cuadro de diálogo que contiene un encabezado detallado.

Del mismo modo, puede evitar tener que agregar paneles de tareas con estilo de Windows XP (sobre todo cuando tiene pocos comandos, lo que desperdiciaría mucho espacio vertical) moviendo estos comandos al encabezado.

Hay varias cosas que se deben tener en cuenta al diseñar encabezados:

Asegúrese de que el color de fondo no coincide con el color de fondo del cuadro de diálogo. En la mayoría de los casos, bastará con una encabezado blanco sobre un color de cara de control intrínseco estándar de Windows. Pero si realmente quiere asegurarse de que ningún tema especial ni color personalizado estropean su encabezado, dibuje un dibuja un LinearGradient usando Color.FromKnownColor con los colores ControlLight y ControlDark.
Si es posible, el alto del encabezado no debería superar los 150 píxeles. Normalmente, un alto de 100 o 120 será adecuado. Como regla general, asegúrese de que sea inferior a un cuarto de la altura total del formulario.
Si desea agregar la edición local de la información que se muestra en el encabezado anterior, reemplace dinámicamente LinkLabel por un cuadro de texto y vuelva a intercambiarlos cuando haya finalizado la edición.
Si tiene una etiqueta de título con una fuente con un tamaño superior a 10 puntos, use Arial o Franklin Gothic Medium. MS Sans Serif conferirá un aspecto un tanto abigarrado y poco profesional. Franklin Gothic Medium es la recomendación que encontrará en la documentación de directrices de diseño de Windows XP. Para las aplicaciones destinadas a Windows Vista, use la fuente Segoe UI, que es la fuente predeterminada del sistema.

Uso de cuadros de mensaje personalizados

Las opciones disponibles en el cuadro de mensaje estándar de Windows son muy limitadas. Cuando tenga que hacer a su usuario una pregunta que no se pueda responder con un simple sí o no, o aceptar o cancelar, empiezan las complicaciones.

Las aplicaciones de Windows cada vez son más fáciles de usar debido al gran volumen de usuarios no técnicos. A veces, puede ser mucho más sencillo incluir botones con textos más sencillos e incluso algunos controles adicionales (por ejemplo, LinkLabels) para facilitar la tarea a mano.

Microsoft .NET Framework facilita la implementación de cuadros de diálogos personalizados. La mera asignación de un par de propiedades en el formulario de diálogo personalizado o con una sola línea de código, el formulario puede funcionar como un cuadro de mensaje estándar. En los eventos de hacer clic en el botón, establezca la propiedad DialogResult del cuadro de diálogo en DialogResult.Ok o DialogResult.Cancel. Use el método ShowDialog([OwnerForm]) del formulario primario. Este método devuelve el valor DialogResult.

Puede usar todos los miembros de DialogResult. El método MessageBox.Show estándar usa estas mismas opciones.

Como alternativa, puede establecer la propiedad AcceptButton del cuadro de diálogo en btnOK y la propiedad CancelButton en btnCancel. Esto asignará automáticamente las teclas Entrar y Esc a los eventos Click respectivos de los botones btnOK y btnCancel.

Estas son algunas sugerencias para hacer que los cuadros de diálogo personalizados sean más atractivos:

Para temas complicados, incluya vínculos a la ayuda local o en línea con un LinkLabel que indique "Más información" en la etiqueta de texto adecuada.
En lugar de los botones Sí/No/Cancelar, use textos que indiquen claramente lo que sucede si se hace clic en el botón, como por ejemplo, "Guardar archivo y salir", "Salir sin guardar" y "No salir". Sin embargo, cíñase al estándar Sí/No, Aceptar/Cancelar y a estos botones estándar siempre que sea posible. La familiaridad favorece la productividad.
Mantenga un margen de 50 píxeles a la izquierda (o a la derecha, según la configuración de la referencia cultural de destino) y agregue un icono que represente el escenario del cuadro de diálogo. Si se trata de un cuadro de diálogo de información, puede utilizar el icono "i" que usan los cuadros de mensaje estándar; si es un cuadro de diálogo de seguridad, puede utilizar un icono de un candado o un icono de una llave. Visual Studio 2005 se distribuye con varios gráficos de gran calidad.
Asegúrese siempre de proporcionar una navegación con el teclado adecuada para estos botones (los usuarios usan los métodos abreviados de teclado para los cuadros de mensaje, como por ejemplo, A para Aceptar, S para Sí, C para Cancelar, etc.). Es muy probable que los usuarios lo encontrarían molesto si el cuadro de diálogo personalizado no los usara.

Inclusión de comandos alternativos

Hay dos factores importantes que determinan la necesidad de métodos alternativos de introducción de datos: la frustración y la pereza. La frustración es una algo que les ocurre con demasiada frecuencia a los usuarios de equipos. Cuando un usuario se frustra, quiere que su tarea se haga rápidamente. A todos nos ha pasado alguna vez que cuando estamos estresados, un clic de más o una espera de unos segundos más de lo previsto nos pueden llegar a enfadar. La pereza a menudo nos impulsa a terminar la tarea sólo con el teclado o el ratón, lo que estemos usando en ese momento. Pero aparte de estos dos factores, disponer de métodos alternativos para introducir datos facilita al usuario la realización de tareas.

Por ejemplo, si tiene un cuadro de lista con dos botones ("Agregar" y "Quitar") a cada lado, debería agregar un menú contextual para ese cuadro de lista con comandos de menú análogos a estos botones. De esta forma el usuario puede elegir el método que le parezca más adecuado. Los usuarios inexpertos, tal como se indica en las directrices de la experiencia de usuario de Windows Vista, utilizan mucho los menús contextuales y esperan que estén en todos los lugares en que hagan clic con el botón derecho del mouse.

De forma similar, usamos controles visuales para especificar texto o números. Por ejemplo, los controles deslizantes se usan para especificar enteros, mientras que los controles Calendar se usan para introducir fechas. A veces puede ser más cómodo usar el teclado. A menudo puede suponer una gran diferencia para el usuario si se agrega un control Numeric Up-Down vinculado a un control deslizante, o se utiliza DateTimePicker en lugar del control Calendar.

Control de acciones críticas

Cuando se realiza una función crítica e irrecuperable, por lo general es aconsejable que aparezca un cuadro de mensaje emergente para confirmar la acción. Subamos un peldaño. En la siguiente captura de pantalla puede ver un cuadro de mensaje personalizado similar, pero con una ventaja adicional, se muestra un temporizador con la ayuda de una barra de progreso.

captura de pantalla de un cuadro de diálogo de acción crítica.

Hay algunas variaciones específicas del escenario que puede usar. Si la acción que se va a realizar es muy crítica (desde sobrecargar una central nuclear hasta borrar archivos permanentemente), la acción predeterminada tras agotarse el tiempo del temporizador debería ser cancelar. El cuadro de diálogo no debe desaparecer, sino que la etiqueta de texto debe cambiar para mostrar que se ha cancelado la acción. El usuario puede elegir entre confirmar el comando o la cancelación.

Asegúrese siempre de que los botones que realizan operaciones críticas estén marcados con claridad (use siempre texto claro que describa la acción con precisión). Si la acción es la eliminación de archivos, no escriba "Quitar archivos del repositorio"; sino "Eliminar archivos del repositorio". Cuando se trabaja con listas de archivos, si un comando de menú Eliminar borra los archivos seleccionados del disco duro (en lugar de eliminarlos sólo de la lista de archivos), se debe recalcar adecuadamente el carácter crítico de esta acción y enfatizar explícitamente que la acción borrará los archivos de forma permanente.

Hay un dicho que reza: "Eres tan bueno como tu peor trabajo". Lo mismo se aplica a las aplicaciones de software. Una única mala experiencia con una aplicación puede hacer que el usuario se lleve una pésima impresión. Para tener la certeza de que esto no sucede, puede asegurarse de que si la aplicación se bloquea, deja de funcionar correctamente. Si puede agregar las opciones de recuperar datos o permitir que el usuario intente guardar una copia de esos datos, la impresión que se llevará el usuario puede cambiar mucho. Si la aplicación se bloquea, el usuario debe recibir la notificación pertinente. No es aconsejable que aparezcan un depurador JIT o un cuadro de diálogo de error crítico. Aunque explicar cómo controlar los bloqueo está fuera del ámbito de este artículo, se recomienda que aparezca un cuadro de diálogo simple en el que se pida disculpas al usuario y se le informe de la situación (y posiblemente con un vínculo desde el que se le ofrezca más información sobre cómo recuperarse del bloqueo), ya que sería muy útil para el usuario.

Si quiere ir un paso más allá, puede hacer lo mismo que una de mis aplicaciones de diseño gráfico favoritas. Si se bloquea, mostrará un cuadro de diálogo de recuperación que permitirá guardar una copia independiente del archivo en el que se está trabajando y, a continuación, aparecerá un cuadro de diálogo en el que se pueden aportar datos sobre el bloqueo (y, por si puesto, opcionalmente se puede incluir información personal) y enviarlos a los creadores.

¿Botones de radio o cuadros combinados?

A primera vista, el método para que se seleccione una opción entre varias existentes no parece tan difícil o importante. A veces puede serlo, sobre todo si el escenario es una aplicación que se usa para trabajos urgentes.

Echemos un vistazo a un ejemplo de la vida real. Microsoft lanzó recientemente una versión preliminar de una aplicación de gráficos, Expression Graphics Designer (cuyo nombre en código era "Acrylic"). Tenía unos 20 objetos gráficos a los que tenía que asignar una propiedad concreta de forma independiente en esta aplicación. El proceso fue muy monótono. Para hacerlo, tuve que seleccionar el objeto, hacer clic en el botón para abrir la ventana de configuración y configurar las opciones. En una de ellas había que elegir entre dos opciones en un cuadro combinado, como se puede ver en la siguiente captura de pantalla.

captura de pantalla del cuadro de diálogo de textura de borde para el diseñador de gráficos de expresiones.

Si tiene que desplegar la lista Cuadro combinado y seleccionar el segundo elemento (de dos elementos), puede que se enfade mucho. De lo que no solemos ser conscientes es del tiempo que tarda en aparecer la lista desplegable. Puede perder mucho tiempo y resultar frustrante. Esto podría resolverse fácilmente colocando un cuadro de grupo con dos botones de radio, sobre cuando hay tanto espacio disponible. He encontrado problemas similares en aplicaciones como CorelDRAW o Microsoft Access, entre otras.

Además de la pérdida de tiempo que supone la animación desplegable, también se desperdicia nuestro "ancho de banda mental". Con dos botones de radio "siempre visibles", nuestra mente conocería subliminalmente la posición en la que debe hacer clic el cursor. Con el cuadro combinado, solo se procesará después de que se haya dibujado la lista. Aunque pueda parecer que es algo nimio, es muy importante.

A veces es mejor usar botones de radio, sobre todo si tiene un máximo de cuatro opciones.

No se interrumpe al usuario

Aparte de ponerles una pistola en la cabeza, esto es lo más destructivo que un desarrollador puede hacer a los usuarios. Cuando una aplicación, innecesariamente o no, interrumpe con un cuadro de mensaje o un destello de la barra de tareas al usuario mientras trabaja en otra aplicación, es posible que este se enfade un poco.

Los parpadeos de la barra de tareas pueden ser útiles, por supuesto, pero sólo deben utilizarse cuando el proceso de la aplicación requiera la intervención del usuario para continuar, o bien hay transmitir al usuario algo crítico. Si el usuario ha seleccionado la opción Ocultar automáticamente en la barra de tareas, un botón parpadeante en ella puede impedir que el usuario acceda a la barra de estado u a otros controles anclados bajo, ya que la barra de tareas estaría encima de ella y no se ocultará de nuevo hasta que el usuario haya clic en el botón que parpadea.

captura de pantalla de una ventana del sistema.

Las ventanas "emergentes de notificación" (véase la figura 10), que se hicieron famosas gracias a clientes de mensajería instantánea como MSN Messenger, son una excelente solución para informar al usuario de algo sin molestarle ni interrumpir su flujo de trabajo. Hay un magnífico artículo de Bill Wagner sobre la creación de ventanas emergentes de notificación. Es buena directiva (además de ser lo más educado) no interrumpir las notificaciones de otra aplicación. La obstrucción de estas ventanas puede ser molesta e improductiva. Una solución consiste en usar la exclusión mutua ToastSemaphore proporcionada por el sistema operativo para evitar la colisión de notificaciones emergentes.

A veces, es posible que tenga que mostrar varios elementos mediante notificaciones emergentes. No es aconsejable que aparezcan tres, o más, notificaciones de este tipo. En su lugar, sería mejor recorrer todas ellas haciendo que emerja y se desvanezcan una notificación tras otra. Microsoft Outlook implementa una solución similar cuando notifica al usuario los correos electrónicos entrantes.

Especificación del estado de progreso

A menudo hay tareas que requieren que el usuario tenga que esperar. Por supuesto, esto es algo que no gusta a ningún usuario. Pero es peor cuando algún usuario está esperando sin saber por qué. A veces, es posible que una aplicación necesite conectarse a un servicio web o a un ordenador remoto, o que esté procesando grandes cantidades de datos (sea cual sea la razón, el usuario debe ser consciente, o al menos vagamente consciente, de lo que sucede en segundo plano). Hay diferentes métodos para hacerlo, en función de la situación.

Si se va a conectar a algún objeto lejano como un servicio web o algún elemento colocado en una red o un servidor de Internet, sería aconsejable mostrar un cuadro de diálogo de progreso simple (vea la siguiente imagen) o una barra de progreso hospedada en la barra de estado. Una etiqueta adjunta debe describir el estado actual del proceso. Por ejemplo, si se está conectando a un servicio web para procesar datos, basta con decir "Conectando con servicio web... " o "Espere, procesando datos... " Si este proceso es síncrónico, se recomienda deshabilitar todos los controles a los que pueda acceder el usuario hasta que el proceso haya finalizado, o simplemente mostrar el progreso como un cuadro de diálogo modal.

captura de pantalla de un cuadro de diálogo de barra de progreso.

Si utiliza una barra de progreso y no sabe cuánto tiempo va a durar el procesamiento o si no se dispone de un valor máximo, se recomienda encarecidamente establecer el estilo de la barra de progreso en el modo Marquesina de neón.

Otro método que está adquiriendo gran popularidad es una ventana fija de "notificación del sistema" que muestra el progreso. Las notificaciones emergentes del programa de descarga o de actualización de Microsoft AntiSpyware de la consulta del correo electrónico de Norton AntiVirus son buenos ejemplos de esto. Por supuesto, esto solo debe usarse para procesos asincrónicos. De lo contrario, es posible que el usuario sienta cierto desconcierto. Lo mejor es usar estas ventanas para procesamiento en segundo plano, como la descarga de una actualización o la realización de una tarea programada, y nunca deben configurarse como "Siempre arriba".

Simplificación de pasos complejos con asistentes

Es seguro asumir que si un usuario típico se enfrenta a un gran número de controles en un solo formulario, se sentirá perdido. A veces, la agrupación, el ajuste de tamaño o el espaciado pueden ayudarle cuando tiene muchos controles importantes.

En casos así, lo mejor es un asistente. Los controles se pueden dividir por tareas o categorías, según proceda, y se pueden colocar en pasos separados. Esto puede ayudar al usuario a mantener la concentración y no sentirse intimidado por la tarea. Puede proporcionar ayuda específica para un paso o una tarea con un botón Ayuda. Para obtener más información, consulte Asistentes.

Los asistentes también son una buena manera de ayudar a realizar la configuración inicial de la aplicación. Muchas aplicaciones utilizan este tipo de asistente para establecer una configuración personalizada inmediatamente después de finalizar la instalación, o bien en el primer uso. En la medida de lo posible, este asistente inicial también debería ser opcional (si el usuario cancela la operación en cualquier momento, los valores no especificados pasan a ser los valores por defecto). Si puede hacer que el asistente sea un poco gráfico (consulte la sección Uso de gráficos atractivos), la tarea de configuración será mucho más fácil.

Dar el tono adecuado al texto

En Instrucciones para la interacción de la experiencia del usuario de Windows, se ha hecho una observación muy importante sobre el "Tono del texto". Es la impresión y la sensación que transmite el texto de su aplicación. Puede ser cualquier cosa, desde una simple información sobre herramientas hasta un control de etiqueta de instrucciones.

Anteriormente analizamos el cambio de texto en la opción Webcam de MSN Messenger. Esto se denomina el tono de texto adecuado. Cuando se trata de usuarios no técnicos o novatos, transmitir el mensaje adquiere un aspecto diferente.

Si escribe "Ruta de destino" encima de un cuadro de texto en una aplicación autoextraíble, un usuario técnico puede saber fácilmente que escribe algo como "C:\Temp\MyPath". Un usuario novato (como, por ejemplo, "mamá") puede sentirse desconcertado y tener que consultar el manual, llamar al soporte técnico o, peor aún, darse por vencido. Una buena alternativa es especificar lo que quiere que haga el usuario: "Seleccione la carpeta en que desea colocar estos archivos". Incluso puede cambiar el nombre del botón "Examinar... " que se encuentra al lado de ese cuadro de texto a "Seleccionar carpeta..."

Proporcionar una descripción clara de lo que quiere que haga el usuario también reduce la necesidad de archivos de ayuda o, al menos, reduce los detalles que hay que incluir en los archivos de ayuda.

Una buena sugerencia de Instrucciones para la interacción de la experiencia del usuario de Windows se aplica a cualquier software. Establece que el escritor debe mantener un tono coloquial en el texto. Las Instrucciones lo definen como "Evite palabras que no diría a otra persona cara a cara".

Algunas sugerencias para escribir texto:

Evite hablar del usuario en tercera persona. Diga "Usted", en lugar de "El usuario".
Siempre que sea posible, use "Mi nombre:" o "Mi dirección de correo electrónico:" en lugar de "Nombre:" o "Correo electrónico:"
Cuando ofrezca varias opciones, escriba el texto desde la perspectiva del usuario. Por ejemplo, si tiene dos botones de radio debajo de una etiqueta como "Seleccionar permiso para [Nombre de usuario] en esta red" encima de dos botones de radio, como "Permitir" y "Denegar", sustituya el texto del botón de radio por "Quiero permitir a [Nombre de usuario]" y "No quiero permitir a [Nombre de usuario]".
Subraye el texto solo si se usa para vínculos. Confunde al usuario si el texto subrayado no es un vínculo.
Llame la atención sobre la información importante con una etiqueta en negrita, pero utilícela con cuidado. Demasiado texto en negrita es confuso y reduce el impacto general del formulario.
Al escribir el texto de una casilla, asegúrese de que es fácil saber lo qué va a ocurrir cuando se seleccione y cuando se anule su selección o se desactive. La opción que se recomienda es escribir el texto directamente como resultado de la selección de la casilla. Por ejemplo, escriba "Enviarme información útil de sus asociados", en lugar de "No enviarme información útil de sus asociados". Aunque me imagino a mucha gente de marketing discutiendo sobre este ejemplo en particular, estoy seguro de que sabe a qué me refiero.
Si tiene un control de tipo botón (normalmente un botón de radio con apariencia de botón de comando) que controla Habilitado/Deshabilitado, asegúrese de que lo etiqueta correctamente. Si el proceso está habilitado, escriba "Habilitado" en lugar de "Habilitar" o "Deshabilitar". Si escribe Habilitado, se muestra el estado actual. Si se hace clic en el botón (habilitado) y el botón indica "Habilitar", puede resultar confuso y problemático. "Habilitar" puede pedir al usuario que haga clic en él pensando que el proceso no está activo.

A veces es mejor un control ListView

A menudo nos ceñimos a DataGrid o ListBox, o incluso ComboBox, para tareas de selección, pero con Windows XP y las versiones posteriores de Windows, el uso de ListView puede ofrecerle más opciones.

Los detalles del control ListView:

Acelera el reconocimiento de elementos con iconos y mapas de bits.
Muestra información adicional con las vistas Detalles o Icono.
Con Visual Studio 2005, incluso puede tener grupos para realizar más categorización. Los grupos abarcan todas las vistas y son flexibles. Los grupos también se pueden utilizar para aplanar una vista jerárquica (como una vista de árbol) en la que hay más nodos secundarios que primarios. Un buen ejemplo de ello es el cuadro de diálogo Conexiones de red de Windows XP, cuando se ve con "Mostrar en grupos" y la vista está establecida en Detalles.
Para personalizar un control ListView, píntelo manualmente estableciendo la propiedad OwnerDraw y usando los eventos DrawItem y DrawSubItem.
Admite la edición rápida in situ de elementos ListView.
Admite fácilmente el reordenamiento manual.
Permite a los usuarios seleccionar la vista (Iconos grandes, Iconos pequeños, Lista, etc.) con la que se sientan más cómodos.

"Navegación secundaria" es la clave de la interfaz de usuario compleja. A veces no puede evitar tener una interfaz de usuario complicada. Lo mejor que se puede hacer en una situación así es facilitar al máximo la experiencia al usuario. Una barra lateral formada por etiquetas de enlace, o una vista de árbol para la navegación basada en jerarquías, sugiere una navegación del mismo nivel para la tarea del cuadro de diálogo actual. Facilita mucho al usuario pasar de un paso a otro del proceso sabiendo dónde se encuentra.

Si va a una navegación por jerarquías con vistas de árbol u otra navegación similar compleja, una buena utilidad para el usuario sería un control de ruta de navegación. Aunque Visual Studio aún no incluye un control integrado para esta función, consulte Creación de un control de ruta de navegación para obtener información sobre cómo crear uno. Los controles de ruta de navegación facilitan la búsqueda de la ubicación actual en relación con la jerarquía.

La navegación de ruta de navegación se puede combinar fácilmente en el encabezado, en caso de que el formulario tenga. Consulte la sección anterior sobre encabezados.

Uso de gráficos atractivos

A todo el mundo le gustan las aplicaciones con gráficos atractivos. Aunque una interfaz de usuario con gráficos atractivos no es una opción lógica para todas las aplicaciones, ayuda a causar una buena impresión y puede ser un placer trabajar en ella. Por supuesto, los gráficos no deben dificultar la productividad, sino que si se utilizan correctamente, pueden aumentarla.

No tiene por qué haber muchos gráficos, ni necesariamente requieren mucho trabajo. La solución es una pantalla de presentación o un encabezado (como los que hemos mencionado antes) diseñados por profesionales. Si su presupuesto se lo permite, puede utilizar gráficos bien diseñados para las barras de herramientas, los asistentes, etc. Hacen que su aplicación tenga no solo un aspecto más atractivo, sino también más profesional. Es un efecto sutil, pero un aspecto profesional transmite confianza y estabilidad. Si es una empresa relativamente pequeña que crea aplicaciones para minoristas, este es un aspecto clave que debe tener en cuenta.

Utilice siempre gráficos diseñados por profesionales. Los gráficos libres de derechos son fáciles de conseguir y económicos. También puede contratar a un diseñador. Pero si los gráficos no son su fuerte, no lo intente hacerlo usted mismo. Si no puede adquirir o utilizar gráficos diseñados por profesionales, es mejor que no los utilice.

En el caso de gráficos pequeños, siempre puede recurrir a los iconos y mapas de bits incluidos en Visual Studio 2005 (no se recomienda usar los gráficos que se incluyen en las versiones anteriores).

Ofrecer formularios de tamaño ajustable siempre que sea posible

Las ventanas de tamaño ajustable se asemejan algo a las ventanas independientes de la resolución. Las ventanas independientes de la resolución tienen el mismo aspecto si se utilizan pantallas de 96 PPP como de 300 PPP. Tanto si la interfaz de usuario de su aplicación es independiente de la resolución como si no, le irá mejor si se puede redimensionar. Indudablemente, esto no se puede aplicar a muchos escenarios, pero es una buena regla de uso general.

Si en su ventana aparecen listas de cualquier tipo (especialmente ListViews) esto cobra aún más importancia. El cambio de tamaño permite al usuario examinar más datos al mismo tiempo.

Por ejemplo, tenemos una aplicación en la que el usuario debe seleccionar una imagen en una gran colección. El cuadro de diálogo Abrir permite seleccionar una vista en miniatura, pero el cuadro de diálogo es de tamaño fijo y la lista de miniaturas sólo muestra cuatro miniaturas a la vez. Si la colección tiene un centenar de imágenes, desplazarse por ellas y examinarlas (unas tareas repetitivas) pueden ser unas tareas bastante pesadas y su eficacia puede disminuir. Si el cuadro de diálogo se puede cambiar de tamaño, el usuario puede hacerlo tan grande como le resulte cómodo o, al menos, tan grande como permita la pantalla, y poder terminar la tarea rápidamente. Si su lista tiene desplazamiento horizontal (como un ListView o un DataGrid detallados), es aún más pesado. Las ventanas de tamaño ajustable son muy útiles en esta situación.

Más funcionalidad con barras laterales o paneles de tareas

Al igual que los encabezados de los que hablamos anteriormente, las barras laterales y los paneles de tareas son una magnífica forma de proporcionar funcionalidad adicional y comandos de utilidad. Por ejemplo, los paneles de tareas de Office Word 2003 son muy prácticos, accesibles y no intrusivos. También funcionan de forma asíncrona cuando se conectan a recursos en línea, lo que brinda al usuario la opción de hacer varias tareas a la vez.

Crear un panel de tareas o una barra lateral es tan fácil como crear un panel acoplable, con la opción de colocar un gráfico elegante en la parte superior para que actúe como barra de título. Incluso puede utilizar un control Label de color para ello. Las posibilidades de los paneles de tareas son muchas.

Si dispone de funciones adicionales y desea ofrecérselas al usuario de forma no intrusiva, no hay mejor lugar que el panel de tareas. También puede hacer que los paneles de tareas se "oculten automáticamente" o se contraigan como las ventanas de herramientas de Visual Studio.

Brindar la opción de notificación

Ya hemos visto cómo crear un cuadro de mensaje personalizado. Si un cuadro de mensaje de su aplicación se le va a mostrar a menudo al usuario, puede ser prudente agregar una casilla que el usuario puede seleccionar para deshabilitar que ese cuadro de diálogo se muestre en el futuro. Esta opción es especialmente buena para mensajes más obvios.

Un ejemplo conocido de esto es el cuadro de diálogo Buscar de Visual Studio. Al buscar o reemplazar texto, Visual Studio muestra un cuadro de mensajes que indica los resultados. Pero también se le da la opción de deshabilitar ese cuadro de mensaje. Puede ser muy molesto tener que pulsar Intro o hacer clic en Aceptar cada vez que realiza una búsqueda.

Otra cosa estupenda que hace Visual Studio es que aunque el cuadro de diálogo esté deshabilitado, muestra los resultados de esa operación en la barra de estado.

Ofrecer información sobre herramientas

A veces, la información sobre herramientas puede ahorrar mucho tiempo. Los botones, las casillas y otros controles pueden ser ambiguos y es posible que el usuario no esté seguro de lo que debe hacer. La información sobre herramientas es la mejor forma de ayuda contextual en una sola línea. El usuario puede decidir rápidamente qué hacer sin tener que buscar nada en el archivo de ayuda ni abrir otra ventana.

Los desarrolladores a menudo omiten esto en sus aplicaciones. Procure añadir información sobre herramientas a todos los controles ambiguos o, si es posible, a TODOS los controles. No repita el texto de una etiqueta adjunta ni el texto propio del control, proporcione información adicional sobre el control. El texto debe explicar la función del control en pocas palabras.

No olvide los pequeños detalles

Los pequeños detalles pueden molestarle, pero ignorarlos puede repercutir en la impresión que cause. Una vez usé una aplicación creada por una persona importante de la industria del software y en la propiedad de estilo de los bordes de su formulario se había seleccionado la opción de ajuste de tamaño, pero los controles del lado derecho del formulario no estaban anclados. Por eso, la aplicación creada por un peso pesado del sector tenía un aire poco profesional.

Este tipo de "pequeños detalles" son el núcleo de la impresión general. La interfaz de usuario y la experiencia de usuario de cualquier aplicación son por lo que van a juzgar los usuarios la aplicación, al menos al principio. Si ven errores obvios en la interfaz de usuario, es posible que consideren que la aplicación es menos eficaz.

Conclusión

Sólo hemos tocado una pequeña parte de la experiencia del usuario humano. A medida que la experiencia del usuario se vuelve más simple, eficaz, divertida y fácil de usar, la tarea de crear esa experiencia se vuelve mucho más compleja. Pero con algo de previsión y una buena planificación, se puede crear una magnífica experiencia del usuario.

La mejor forma de crear la experiencia de usuario perfecta es realizar pruebas de usabilidad dirigidas especialmente a la interfaz de usuario, ya sea con un grupo de pruebas especial o en solitario. Cuanto más tiempo dedique a probar la experiencia del usuario antes de lanzar la aplicación, mejor. Le ahorrará muchos problemas más adelante.