Consejos sobre diseño de Interfaces de usuario

Nota Vista 14.126 Veces

Algo en lo que quizás todos los programadores tropezamos es en la interfaz de usuario. Nuestro sistema puede ser sólido, bien seguro, que cumpla todas las buenas prácticas y especificaciones y aún así puede no ser una solución efectiva. Los usuarios pueden encontrar dificultades al usar nuestro sistema.

A continuación daré una serie de consejos a la hora de armar nuestras interfaces de usuario.

 Información por pantallas

Pantalla de sistema con Mucha informacionSuele suceder que al aumentar la información que pueda procesar el sistema, en lugar de aumentar las interfaces, aumentemos la información a mostrar quedando de una forma todo junto y casi incomprensible.

A la izquierda vemos un sistema con demasiada información. 

Pantalla de sistema con información organizadaA la derecha vemos otro donde la información está mejor organizada y es más amigable a la vista del usuario.

Separados por marcos, sería mejor incluso si son cuadros desplegables o que remarquen en donde está ubicado la información que estamos editando.

Accesibilidad

No todos los usuarios manejan una computadora de la misma forma. Hay preferencias por teclado, por mouse, algunos que prefieren pantallas táctiles, etc. A la hora de crear un sistema hay que contemplar todo esto. Muchas veces usamos controles o partes de terceros que solo tienen el comportamiento más básico: Que se le pueda hacer clic. Esto puede ralentizar el uso a usuarios avanzados que prácticamente solo usan el teclado, disminuyendo su productividad.

Para evitar esto, es importante tener en cuenta a la hora de diseñar una pantalla:

» Los controles que se puedan editar y/o “clickeables” se puedan acceder por teclado. Ejemplo por la tecla TAB

» Su orden de tabulación (TabIndex) debe seguir un flujo. Ejemplo: Seria medio raro que al completar una factura, ingresamos nuestro nombre, presionamos Tab y el foco se ponga en el botón “Aceptar” ¡Pero si no hemos puesto nada!

» Para navegar entre distintas pantallas principales es recomendable asignarles botones F. Ejemplo, para ver mi lista de clientes presione F3, para ver mis productos presiono F5, etc.

» Al mostrar listas, se prefiere tener una botonera por encima o por debajo de ésta, además de contar con un menú contextual o un botón por cada ítem para manejarlo

Decoración

Ya no estamos en la era de Windows 95/98 para que nuestros usuarios tengan todo cuadrados y fondos grises. Una interfaz con resaltado de información de importancia suma puntos al usuario. Algunos lenguajes de programación y/o frameworks ya vienen preparados para esto tal como GTK, Qt de Nokia y XAML del .Net Framework, entre otros. Una demostración con imágenes, ¿con cuál se quedarían más cómodos?

Pantalla cómoda y efectiva
Pantalla cómoda y efectiva. En Windows XP con estilos de Windows 98
Pantalla elegante con presentacion
Pantalla elegante con juego de colores y bien organizada

Ni hablar de los sistemas web, donde es muy fácil decorar y acomodar todo gracias al CSS3 y jQuery con su complemento jQuery UI.

Espero que les haya servido este artículo. ¡Nos vemos la próxima!

Raúl Arellano Raúl Arellano (3 Posts)

Alias raul338. Programador y Estudiante de segundo año de Ingeniería en sistemas de información en la Universidad Tecnológica Nacional en Buenos Aires, Argentina. Programador en lenguajes PHP, .Net y Visual Basic 6



9 Responses

  1. YAcosta dice:

    Muy buenas recomendaciones amigo Raul. El programador ya no solo debe programar sino también diseñar al menos con un criterio mínimo la interfaz para asegurar la usabilidad del mismo, sino lo tiene está en problemas. Bravo por el post.

    Saludos

    • Raúl Arellano Raúl Arellano dice:

      Muchas gracias YAcosta :) Hay que estar en todas a la hora de programar. Y mantener un cliente satisfecho de entrada. Más si es una aplicación tipo “utilitario” para uso masivo.

  2. edgar dice:

    Buenos puntos, a mi siempre me ocasiona problemas el diseño =(, gracias por la expliacion.

  3. JuanRangel dice:

    Muy buenas recomendaciones, como desarrolladores esto nos viene muy bien ya que a algunos de nosotros nos cuesta mucho la parte de diseño, incluyendo las ventanas (o paginas en el caso web), la combinación de colores y diseño de logotipos para las aplicaciones o sistemas

    • Raúl Arellano Raúl Arellano dice:

      Gracias! Si es algo que por ahí no le dan mucha importancia a la hora de aprender a programar. Pero como dice el dicho: “Todo entra por los ojos” así que, ¡A diseñar (aunque sea un poco) se ha dicho!

  4. Rommel dice:

    Podrías, hablar un poco sobre WPF y sus diseño de aplicaciones fáciles.

    • Raúl Arellano Raúl Arellano dice:

      Por el momento no tengo instalado Visual Studio .Net ni Microsoft Expresion Blend instalados. Pero cuando pueda hablare de estos y su nueva forma de diseñar (a eso me referí cuando nombre a XAML)

  5. Hipolito dice:

    excelente artículo, yo tomo demasiado tiempo, buscando iconos, viendo colores de fondo, tipo de letra y su compatibilidad, que lo que duro en la programación, es increible como cuesta eso, espero futuros tips al respecto, gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© VB-MUNDO – Visual Basic y mucho más
CyberChimps