Skip to content

1 Introducción a las interfaces gráficas

Introducción

La interfaz de usuario es la parte de un programa que permite al usuario interactuar con el programa. Esta es una de las partes más importantes de un programa, por lo que debe estar bien definida y ser sencilla de usar para que el usuario pueda utilizarla obteniendo el máximo rendimiento.

Existen diferentes tipos de interfaces como las líneas de comandos (usadas hasta hora) y las interfaces gráficas de usuario.

La línea de comandos es una interfaz que permite interactuar al usuario a través de la línea de comandos del sistema operativo. Este tipo de interfaz se recomienda ser usada para aquellos usuarios que tengan conocimientos de la línea de comandas, ya que un usuario básico, posiblemente no sepa interactuar con él.

Por otro lado, las interfaces gráficas (Graphic User Interfaces) de usuarios son las más usadas en la mayoría de los programas, debido a que permite interactuar de una forma sencilla al usuario sin necesidad de conocimientos informáticos no básicos.

Normas de diseño

Al desarrollar una interfaz gráfica es coherente seguir ciertas reglas de diseño que permita que la interacción programa-usuario sea lo más cómoda posible. Además, también se pretende conseguir que el número de errores cometidos por el usuario a la hora de interactuar sea el mínimo indispensable. Veamos algunas reglas básicas:

  • Consistencia: Se debe mantener un diseño coherente en toda la aplicación. Para ello, se recomienda usar patrones de diseños y estilos visuales.
  • Simplicidad: Es recomendable que la interfaz sea lo más simple posible. De esta manera, el usuario puede utilizarla de forma intuitiva sin necesidad de un conocimiento previo de la misma.
  • Feedback claro: Proporciona una retroalimentación perceptible, es decir, utiliza mensajes de confirmaciones o errores directos y concisos, animaciones, cambios visuales, etc.
  • Jerarquía visual: Organiza los elementos de la interfaz de manera que refleje su importancia y relación entre sí. Utiliza tamaño, color, contraste y espaciado para destacar los elementos más importantes y guiar la atención del usuario.
  • Facilidad de navegación: Diseña una estructura de navegación clara y coherente que permita a los usuarios moverse fácilmente por la aplicación. Utiliza menús, botones de navegación y elementos de control intuitivos.
  • Reconocimiento en lugar de memorización: Prioriza el uso de elementos reconocibles en lugar de elementos que requieran que el usuario memorice acciones o comandos. Utiliza iconos claros y universales, y proporciona descripciones o etiquetas cuando sea necesario.
  • Flexibilidad y personalización: Permite cierto grado de personalización para adaptarse a las preferencias individuales del usuario. Por ejemplo, opciones para cambiar el tamaño de la fuente, temas de color o disposición de la interfaz.
  • Pruebas de usabilidad: Realiza pruebas de usabilidad con usuarios reales para identificar y corregir problemas en el diseño de la interfaz. Observa cómo interactúan los usuarios con la interfaz y recopila comentarios para realizar mejoras.
  • Accesibilidad: Diseña la interfaz teniendo en cuenta la accesibilidad para usuarios con discapacidades. Utiliza estándares de accesibilidad web, como etiquetas alt en imágenes, contraste adecuado entre texto y fondo, y teclado accesible.

Diseño

Cuando se desea diseñar una GUI es altamente recomendable tener claro que tipo de aplicación se quiere realizar. Una vez que se sepa con exactitud el tipo de aplicación a realizar se recomienda diseñar la aplicación antes de programarla. De esta forma, cuando se comience a programar se conocerá de antemano los estilos, los componentes y las funcionalidades a usar. A este diseño previo se le conoce como mock up.

Una interfaz de experiencia de usuario (UX) es la parte de un sistema o aplicación que permite a los usuarios interactuar con él y realizar acciones para lograr sus objetivos. Aunque a menudo se confunde con el diseño de la interfaz gráfica de usuario (GUI), la UX abarca mucho más que solo la apariencia visual. La UX se centra en cómo se siente y se comporta una interfaz para los usuarios, y cómo se adapta a sus necesidades y expectativas.

Por ello, es recomendable realizar un mock up UX de la aplicación y posteriormente un mock up sobre la apariencia UI.

Info

Existen diferentes tipos de programas y webs que permiten realizar un diseño UX/UI:

Programación

Una vez tenido el diseño, se puede proceder a la programación de la interfaz gráfica del usuario. Para ello, en Java existen diferentes tecnologías como:

  • Abstract Window Toolkit
  • Swing
  • JavaFX