Fundamentos del diseo de la interfaz

No tiene que ser un artista para crear una gran interfaz de usuario; la mayora de los principios del diseo de una interfaz de usuario son los mismos que los principios de diseo bsicos que se imparten en los cursos elementales de arte. Los principios de diseo elementales de composicin, color, etc. se aplican por igual a la pantalla de un equipo que a una hoja de papel o a un lienzo. Aunque Visual Basic facilita la creacin de una interfaz de usuario con slo arrastrar controles dentro de un formulario, un poco de diseo previo puede marcar una gran diferencia en cuanto a la facilidad de uso de su aplicacin. Podra intentar dibujar primero el formulario sobre papel, determinando los controles que vaya a necesitar, la importancia relativa de los diferentes elementos y las relaciones entre los controles.

Composicin: la apariencia de una aplicacin

La composicin o distribucin de un formulario no slo afecta a su atractivo esttico, sino que tambin tiene un tremendo impacto en la facilidad de uso de la aplicacin. La composicin incluye factores tales como la colocacin de los controles, la coherencia de los elementos, su facilidad de uso, el uso del espacio en blanco y la sencillez del diseo.

Colocacin de los controles

En la mayora de los diseos de interfaces, no todos los elementos son de igual importancia. Es necesario un diseo cuidadoso para asegurar que los elementos ms importantes sean inmediatamente accesibles para el usuario. Los elementos importantes o utilizados con ms frecuencia deben tener una posicin prominente; los elementos menos importantes deben estar relegados a posiciones menos prominentes. En la mayora de los idiomas, se nos ensea a leer de izquierda a derecha y de arriba a abajo en una pgina. Lo mismo se aplica a la pantalla de un equipo: los ojos de la mayora de los usuarios irn primero a la parte superior izquierda de la pantalla, por lo que el elemento ms importante debe estar all. Por ejemplo, si la informacin de un formulario se refiere a un cliente, el campo con el nombre del cliente debe mostrarse all donde se vea primero. Los botones, como Aceptar o Siguiente, deben estar situados en la parte inferior derecha de la pantalla; normalmente el usuario no los usar hasta que haya terminado de trabajar con el formulario. La agrupacin de elementos y controles tambin es importante. Procure agrupar la informacin de forma lgica, de acuerdo con su funcin o su relacin. Como las funciones estn relacionadas, los botones para desplazarse por una base de datos deben estar agrupados visualmente en lugar de estar esparcidos por el formulario. Esto mismo puede aplicarse a la informacin; los campos de nombre y direccin se encuentran generalmente agrupados, ya que estn estrechamente relacionados. En muchos casos, puede usar marcos para reforzar la relacin entre controles.

Coherencia de los elementos de la interfaz

La coherencia es una virtud en el diseo de una interfaz de usuario. Una apariencia coherente aporta armona a una aplicacin: todo parece encajar perfectamente. La falta de coherencia de una interfaz puede provocar confusin y puede hacer parecer que la aplicacin es catica, desorganizada y barata, pudiendo llegar incluso a provocar al usuario dudas sobre la fiabilidad de la aplicacin. Para obtener coherencia visual, establezca una estrategia de diseo y convenciones de estilo antes de empezar el desarrollo. Los elementos de diseo tales como los tipos de controles, el estndar de tamao y agrupacin de controles, y las opciones de fuente deben establecerse previamente. Puede crear prototipos de los posibles diseos para ayudarle a tomar las decisiones de diseo. La gran variedad de controles disponibles en Visual Basic tienta a usarlos todos. Evite esta tentacin: elija el subconjunto de controles que mejor se adapte a su aplicacin en particular. Mientras que los controles de cuadro de lista, cuadro combinado, cuadrcula y rbol pueden usarse para presentar listas de informacin, es mejor adoptar un nico estilo en la medida de lo posible. Adems, utilice los controles de forma apropiada; si bien un control de cuadro de texto puede definirse como de slo lectura y usarse para presentar texto, un control de etiqueta suele ser el ms apropiado para este propsito. Mantenga la coherencia en el valor de las propiedades de los controles: si en un sitio utiliza un color de fondo blanco para el texto modificable, no utilice un fondo gris en otro sitio a menos que tenga una buena razn para ello. La coherencia entre los diferentes formularios de una aplicacin es importante para su facilidad de uso. Si en un formulario utiliza un fondo gris y efectos en tres dimensiones y un fondo blanco en otro, parecer que los formularios no estn relacionados entre s. Adopte un estilo y mantngalo en toda la aplicacin, incluso si ello implica volver a disear algunas caractersticas.

Facilidades: la forma sigue a la funcin

Las facilidades son pistas visuales de la funcin de un objeto. Aunque el trmino no sea muy familiar, a su alrededor hay muchos ejemplos de ellas. El manillar de una bicicleta tiene hendiduras para colocar los dedos, una facilidad que hace obvio que se es el sitio donde poner las manos. Los botones, los mandos y los conmutadores luminosos son todos facilidades; slo con mirarlos puede deducirse su propsito. La interfaz de usuario tambin hace uso de estas facilidades. Por ejemplo, los efectos tridimensionales utilizados en los botones de comando hacen pensar que estn para ser presionados. Si diseara un botn de comando con bordes planos, perdera esta facilidad y el usuario no tendra claro que es un botn de comando. Hay casos en que los botones planos pueden ser apropiados, como en juegos o en aplicaciones multimedia; est bien mientras mantenga la coherencia en toda la aplicacin. Los cuadros de texto tambin aportan un grado de facilidad: los usuarios esperan que un cuadro con bordes y un fondo blanco contenga texto modificable. Aunque es posible

presentar un cuadro de texto sin bordes (BorderStyle = 0), lo hara parecer una etiqueta y para el usuario no sera obvio que es modificable.

Uso del espacio en blanco

El uso del espacio en blanco dentro de la interfaz de usuario puede contribuir a resaltar elementos y aumentar su facilidad de uso. Aunque el espacio en blanco no tiene que ser necesariamente blanco, hace referencia al uso del espacio vaco entre y alrededor de los controles de un formulario. Si hay demasiados controles en un formulario puede parecer una interfaz congestionada, dificultando la localizacin de un campo o control concreto. Hay que incorporar espacio en blanco al diseo para hacer nfasis en los elementos del diseo. El espaciado coherente entre los controles y la alineacin vertical y horizontal de los elementos hacen que el diseo sea tambin ms sencillo. De igual forma que el texto de un peridico est dispuesto en columnas con el mismo espacio entre las lneas, una interfaz ordenada la hace ms legible. Visual Basic proporciona varias herramientas que facilitan el ajuste del espaciado, la alineacin y el tamao de los controles. Los comandos Alinear, Igualar tamao, Espacio horizontal, Espacio vertical y Centrar en el formulario se encuentran en el men Formato.

Simplifquelo
Quizs el principio ms importante en el diseo de la interfaz sea la sencillez. Cuando se trata de aplicaciones, si la interfaz parece difcil, probablemente lo sea. Pensando un poco se puede crear una interfaz que parezca (y sea) fcil de usar. Adems, desde un punto de vista esttico, siempre es preferible un diseo limpio y sencillo. Un error frecuente en el diseo de la interfaz es el de modelarla a partir de objetos del mundo real. Imagine, por ejemplo, que se le pide que cree una aplicacin para completar impresos de seguros. La reaccin natural sera disear una interfaz que duplicara de forma exacta el impreso en papel. Esto crea varios problemas: la forma y las dimensiones de un impreso en papel son diferentes a las de una pantalla, la duplicacin de un impreso le limita al uso de cuadros de texto y casillas de verificacin, y el usuario no obtiene un beneficio real. Es mucho mejor disear una nueva interfaz, proporcionando quizs un duplicado impreso (con presentacin preliminar) del impreso original en papel. Agrupando los campos de forma lgica y utilizando una interfaz con fichas o varios formularios enlazados puede presentar toda la informacin sin tener que hacer desplazamientos de pantalla. Tambin puede usar controles adicionales, como cuadros de lista con opciones predefinidas, lo que reduce la cantidad de datos que tiene que escribir el usuario. Tambin puede simplificar las aplicaciones si lleva las funciones utilizadas con poca frecuencia a sus propios formularios. Proporcionar acciones predeterminadas puede simplificar una aplicacin; si nueve de cada diez usuarios seleccionan el texto en negrita, haga que el texto sea en negrita de forma predeterminada en vez de forzar al usuario a hacerlo cada vez (no olvide proporcionar una opcin que invalide el valor

predeterminado). Los asistentes tambin contribuyen a simplificar las tareas complejas o poco frecuentes. La mejor prueba de la sencillez de uso de una aplicacin es observar la aplicacin en uso. Si un usuario tpico no puede realizar inmediatamente una tarea deseada sin ayuda, quizs debera volver a disearla.

Uso del color y de imgenes

El uso del color en una interfaz puede aportar atractivo visual, pero es fcil abusar de ello. Con tantos monitores capaces de presentar millones de colores, se tiene la tentacin de usarlos todos. El color, como todos los dems principios bsicos de diseo, puede ser problemtico si no se tiene en cuenta en el diseo inicial. Las preferencias de color varan mucho; puede que los gustos de los usuarios no coincidan con los suyos. El color puede evocar emociones y si el destino de su diseo es internacional, ciertos colores pueden tener un significado cultural. Normalmente, lo mejor es ser conservador, y emplear colores ms suaves y neutros. Por supuesto, la eleccin de los colores tambin puede estar influida por los destinatarios de la aplicacin, as como por el tono o el estado de nimo que intente transmitir. Los rojos, verdes y amarillos brillantes pueden ser apropiados para aplicaciones infantiles, pero en raras ocasiones provocaran una impresin de responsabilidad fiscal en una aplicacin bancaria. Se pueden usar pequeas cantidades de colores brillantes para hacer nfasis y llamar la atencin sobre un rea importante. Como norma, debe limitar el nmero de colores en una aplicacin y el esquema de colores debe ser coherente. Lo mejor es adoptar la paleta estndar de 16 colores si es posible; aunque los medios tonos puede hacer que algunos colores desaparezcan cuando se presentan en un monitor de 16 colores. Otra consideracin en cuanto al uso del color es la ceguera a ciertos colores. Mucha gente no es capaz de diferenciar entre distintas combinaciones de colores primarios como rojo y verde. Para alguien con esta limitacin, el texto rojo sobre un fondo verde no sera visible.

Imgenes e iconos
El uso de imgenes e iconos tambin puede agregar inters visual a su aplicacin pero, de nuevo, es esencial un diseo cuidadoso. Las imgenes pueden transmitir informacin sin necesidad de incluir texto, pero las imgenes son percibidas de manera diferente por personas diferentes. Las barras de herramientas con iconos que representen distintas funciones son un elemento til de una interfaz, pero si el usuario no puede identificar la funcin representada por el icono, pueden ser contraproducentes. Al disear los iconos de una barra de herramientas, fjese en otras aplicaciones y vea las normas estndar ya establecidas. Por ejemplo, muchas aplicaciones utilizan una hoja de papel con una esquina doblada para representar el icono Nuevo archivo. Puede que haya una mejor

metfora para esta funcin, pero si se representa de forma diferente, podra provocar confusin en el usuario. Tambin es importante considerar el significado cultural de las imgenes. Muchos programas utilizan una imagen de un buzn de estilo rural con una bandera (figura 6.21) para representar las funciones de correo. Se trata de un icono principalmente norteamericano; los usuarios de otros pases o culturas probablemente no lo reconozcan como buzn. Figura 6.21 Un icono que representa un buzn

Cuando disee sus propios iconos e imgenes, procure que sean sencillos. Las imgenes complejas con muchos colores no se ven bien cuando se presentan como iconos de 16 por 16 pxeles de las barras de herramientas o cuando se presentan con resoluciones de pantalla superiores.

Eleccin de fuentes
Las fuentes tambin son una parte importante de la interfaz de usuario, ya que con frecuencia comunican informacin importante al usuario. Tiene que elegir las fuentes que sean fcilmente legibles a resoluciones diferentes y en diferentes tipos de monitores. Lo mejor es adoptar fuentes sencillas con o sin remate siempre que sea posible. Script y otras fuentes decorativas generalmente quedan mejor impresas que en una pantalla y pueden ser difciles de leer con tamaos en puntos pequeos. A menos que piense distribuir fuentes junto con su aplicacin, debe ceirse a las fuentes estndar de Windows como Arial, New Times Roman o System. Si el sistema del usuario no incluye una fuente concreta, el sistema la sustituir, dando como resultado una apariencia completamente distinta de la pretendida. Si el destino de su aplicacin es internacional, tendr que investigar las fuentes disponibles en los idiomas de destino. Adems, deber tener en cuenta la expansin del texto cuando disee para otros idiomas; las cadenas de texto pueden ocupar hasta un 50% de espacio ms en otros idiomas. De nuevo, es importante la coherencia del diseo a la hora de elegir las fuentes. En la mayor parte de los casos, no debe usar ms de dos fuentes con dos o tres tamaos en puntos distintos dentro de una misma aplicacin. Demasiadas fuentes pueden hacer que su aplicacin parezca una nota de peticin de rescate.

Qu es una buena interfaz?

El mejor punto de partida al disear una interfaz de usuario es fijarse en las aplicaciones ms vendidas de Microsoft y de otras compaas; despus de todo, puede que no sean las ms vendidas a causa de sus pobres interfaces. Encontrar muchas cosas comunes, como las barras de herramientas, barras de estado, Informacin sobre herramientas, mens contextuales y cuadros de dilogo con fichas. No es una coincidencia que Visual

Basic proporcione la posibilidad de agregar todos estos elementos a sus propias aplicaciones. Tambin puede aprovechar su propia experiencia como usuario de programas. Piense en algunas de las aplicaciones que haya utilizado, en lo que es funcional y lo que no, y cmo lo solucionara. Recuerde, sin embargo, que puede que sus gustos y sus fobias no coincidan con los de sus usuarios; tendr que validar sus ideas con ellos. Tambin se habr dado cuenta de que las mejores aplicaciones ofrecen opciones que se acomodan a las distintas preferencias de los usuarios. Por ejemplo, el Explorador de Microsoft Windows permite que los usuarios copien archivos con mens, comandos de teclado o mediante arrastrar y colocar. Al ofrecer opciones se ampla el atractivo de la aplicacin; como mnimo debe hacer que todas las funciones sean accesibles desde el mouse y desde el teclado.

Recomendaciones de interfaz para Windows

Una de las principales ventajas del sistema operativo Windows es que presenta una interfaz comn en todas las aplicaciones. Un usuario que sepa usar una aplicacin para Windows debe poder aprender otra con facilidad. Desafortunadamente, las aplicaciones que se apartan de las recomendaciones de interfaz establecidas no son fciles de aprender. Los mens son un buen ejemplo de esto. La mayora de las aplicaciones para Windows siguen el estndar de un men Archivo a la izquierda, despus mens opcionales como Edicin y Herramientas, seguidos de un men Ayuda a la derecha. Podra argumentarse que Documentos sera un nombre mejor que Archivo, o que el men Ayuda debera ser el primer men de la pantalla. No hay nada que le impida hacerlo, pero si lo hace confundir a sus usuarios y disminuir la facilidad de uso de su aplicacin. Los usuarios tendrn que pararse a pensar cada vez que cambien entre otras aplicaciones y la suya. La colocacin de los submens tambin es importante. Los usuarios esperan encontrar los comandos Copiar, Cortar y Pegar en el men Edicin; si los mueve al men Archivo provocara como mnimo confusin. No se desve de las recomendaciones establecidas a menos que tenga una buena razn para hacerlo.

Pruebas de facilidad de uso

La mejor manera de comprobar la facilidad de uso de su interfaz es involucrar a los usuarios en la fase de diseo. Tanto si va a disear una gran aplicacin como un pequea aplicacin de uso limitado, el proceso de diseo debe ser casi el mismo. Siguiendo las recomendaciones de diseo establecidas, empezar por disear la interfaz sobre papel. El siguiente paso es crear uno o varios prototipos, diseando sus formularios en Visual Basic. Tendr que agregar el cdigo necesario para hacer que el prototipo sea funcional: presentar formularios, llenar los cuadros de lista con datos de ejemplo, etc. Despus podr empezar a probar su facilidad de uso.

Las pruebas de la facilidad de uso pueden ser un proceso informal, repasando su diseo con unos pocos usuarios, o un proceso formal dentro de un laboratorio dedicado a ello. En cualquier caso, el propsito es el mismo: obtener las impresiones de primera mano de los usuarios acerca de qu partes del diseo funcionan y cules necesitan mejoras. En lugar de preguntar al usuario, es ms efectivo dejar que los usuarios jueguen con la aplicacin y observarlos. Haga que el usuario pronuncie su proceso mental a medida que realizan una serie de tareas: "Quiero abrir un documento nuevo, as que mirar en el men Archivo". Anote las partes del diseo de la interfaz que no respondan a sus procesos mentales. Haga pruebas con varios usuarios; si observa que varios usuarios tienen dificultades para realizar una tarea concreta, dicha tarea necesita algo ms de atencin. A continuacin tendr que revisar las notas y considerar cmo modificar la interfaz para hacerla ms fcil de usar. Efecte los cambios en la interfaz y vuelva a probarla. Una vez que est convencido de la facilidad de uso de su aplicacin, puede empezar a escribir el cdigo. Tambin tendr que hacer pruebas ocasionales durante el proceso de desarrollo para asegurarse de que los resultados del prototipo siguen siendo vlidos.

Facilidad de descubrimiento de las caractersticas

Uno de los conceptos clave en las pruebas de facilidad de uso es el facilidad de descubrimiento. Si un usuario no puede descubrir cmo usar una caracterstica (o incluso si una caracterstica existe), dicha caracterstica es poco til. Por ejemplo, la mayora de los usuarios de Windows 3.1 no saban que las combinacin de teclas ALT, TAB se poda usar para cambiar entre las aplicaciones abiertas. No haba ninguna indicacin en la interfaz que contribuyera a que los usuarios descubrieran esta caracterstica. Para comprobar la facilidad de descubrimiento de una caracterstica, pida al usuario que realice una tarea sin decirle cmo hacerla (por ejemplo, "Cree un documento nuevo con una plantilla de carta"). Si no lo pueden hacer, o si lo consiguen despus de varios intentos, hay que mejorar la facilidad de descubrimiento de esta caracterstica. Crear cuadros de dilogo inteligentes Ventanas de mensajes de error no se puede guardar el registro ya existe etc