Principios de Diseño de Interfaz de Aplicaciones en Acción: UI del Rastreador de Torneos de Tim Corey
En esta lección, Tim Corey nos guía a través de la fase de diseño de la interfaz de usuario de construcción de una aplicación de seguimiento de torneos. Tim explica que este es el momento en que empezamos a visualizar cómo se verá la aplicación, incluso antes de que se escriba cualquier código. Él enfatiza que el diseño de la interfaz de usuario nos ayuda a "consolidar ideas" y entender cómo debería funcionar la aplicación en general.
En este artículo, profundizaremos en el proceso de diseño de la interfaz de usuario del video de Tim para que podamos entender su proceso de pensamiento y la forma en que planea la interfaz antes de comenzar a codificar. Siguiendo el enfoque de Tim, podemos aprender a crear una interfaz de aplicación que sea clara, intuitiva y alineada con las necesidades de los usuarios y desarrolladores.
Comenzando el Diseño de la IU
Tim comienza diciendo que el paso de diseño de la interfaz de usuario es una parte divertida del desarrollo de aplicaciones porque nos permite ver una versión aproximada de cómo se verá la aplicación. Él señala que usa una pizarra o un bloc de notas para bosquejar los formularios, a pesar de que admite que no es un artista. Tim insiste en que los dibujos no necesitan ser perfectos o proporcionales; solo necesitan mostrar la idea básica de lo que deben incluir los formularios y cómo deben funcionar.
El punto principal de Tim aquí es que la fase de diseño de la IU es sobre planificación, no sobre belleza. Él enfatiza que el objetivo es identificar qué formularios/páginas son necesarias y qué debe contener cada uno. Este enfoque es crucial para la claridad y ayuda a los desarrolladores y diseñadores a mantenerse alineados durante el proceso de diseño.
¿Por Dónde Comenzar el Diseño?
Tim aborda una pregunta común: "¿Dónde comienzo?" Él explica que no importa por dónde empieces. Si no estás seguro sobre una parte de la aplicación, comienza con la parte de la que estás seguro. Una vez que completes las partes claras, a menudo tendrás una mejor idea de las secciones inciertas.
También observa que crear impulso ayuda: después de diseñar algunos formularios, te sentirás confiado y listo para continuar. Con esta mentalidad, Tim elige comenzar con el Formulario de Visualización del Torneo.
Este método favorece buenos flujos de usuario, ya que fomenta que los diseñadores y desarrolladores se concentren en cómo los usuarios navegarán de una pantalla a otra.
¿Por Qué No Diseñar Primero en Visual Studio?
Tim explica que no deberías comenzar a diseñar en el Constructor de Formularios de Windows dentro de Visual Studio. Advierte que hacerlo causa dos problemas principales:
-
Pierdes tiempo ajustando la disposición y los controles en lugar de planificar el diseño.
- Acortas el proceso de diseño, lo que significa que puedes perder mejores opciones o dejar problemas ocultos porque no quieres rehacer tu trabajo.
Tim dice que diseñar en papel te permite borrar, probar nuevas ideas e incluso probar conceptos "tontos" que podrían convertirse en grandes soluciones. Este es un principio crucial en el diseño de la IU porque mantiene el enfoque en lo que la aplicación debe hacer, en lugar de cómo se ve en el primer borrador.
Formulario de Visualización del Torneo
Tim revela su primera IU aproximada: el Formulario de Visualización del Torneo. Explica que este formulario mostrará toda la información sobre un torneo específico.
Nombre del Torneo
Tim coloca el nombre del torneo en la parte superior, mostrando qué torneo está viendo el usuario (por ejemplo, "Torneo de Baloncesto Femenino"). Este es un simple ejemplo de una jerarquía visual clara, donde la información más importante se coloca en la parte superior.
Desplegable de Rondas y Enfrentamientos
Tim discute cómo sería difícil mostrar un cuadro de torneo en una pantalla, especialmente si es grande. En su lugar, propone un menú desplegable para las rondas y una caja de lista para los enfrentamientos. La caja de lista mostrará solo los partidos de la ronda seleccionada.
Tim también añade una característica importante: sólo juegos no jugados. Explica que en un torneo con muchos juegos, los usuarios no quieren desplazarse a través de enfrentamientos completados para encontrar los que quedan. Así que añade una casilla de verificación para mostrar solo juegos no jugados, lo que haría que la lista sea más corta a medida que se completan los juegos. Este es un gran ejemplo de diseño para facilidad y eficiencia, lo cual es crucial para la satisfacción del usuario.
Auto-Seleccione la Ronda Actual
Tim también sugiere que el desplegable de rondas debería por defecto mostrarse en la ronda actual. Admite que aún no sabe cómo lo implementará, pero lo nota como una fuerte idea de diseño. Esta característica mejoraría la experiencia del usuario (UX) al reducir el tiempo necesario para acceder a la información relevante.
Sección de Puntuación
En el lado derecho del formulario, Tim diseña una sección donde los usuarios pueden ingresar puntuaciones para un enfrentamiento. Explica que el formulario mostrará los dos equipos competidores y sus puntuaciones. Si el juego no se ha jugado, las cajas de puntuación estarán vacías. Después de ingresar las puntuaciones, el usuario hará clic en un botón "Calificar" para completar el enfrentamiento.
Tim nota que el botón de calificación podría necesitar una etiqueta o disposición mejorada para que quede claro cómo funciona. Este es un ejemplo de cómo los elementos de diseño deben comunicar el propósito claramente a los usuarios.
Formulario de Creación de Torneo
Luego Tim se dirige al Formulario de Creación de Torneo, que dice que probablemente sea necesario después del visor de torneos.
Nombre del Torneo y Cuota de Inscripción
El formulario comienza con campos básicos: nombre del torneo y cuota de inscripción. Tim explica que la cuota de inscripción es el costo que cada equipo paga para participar.
Agregar Equipos
A continuación, Tim diseña un desplegable de equipos y un botón de Agregar Equipo. Esto permite a los usuarios seleccionar equipos existentes y agregarlos al torneo.
También incluye un enlace Crear Nuevo Equipo, para cuando el equipo aún no existe. Tim explica que quiere que la acción "Crear Nuevo Equipo" sea visualmente diferente para que los usuarios comprendan claramente que están creando un equipo, no solo agregando uno. Esta es una práctica de diseño importante para asegurar que los usuarios puedan navegar fácilmente y evitar confusiones.
Premios
Tim señala que los torneos también necesitan premios, por lo que agrega un botón de Crear Premio. Explica que los premios son únicos por torneo, por lo que se crearán nuevos cada vez en lugar de reutilizados.
Eliminar Botones Seleccionados
Junto a cada caja de lista (equipos y premios), Tim agrega un botón de Eliminar Seleccionados. Explica que los usuarios necesitan una forma de eliminar equipos o premios sin reiniciar el formulario. Esto apoya un mejor flujo de usuario y hace que la aplicación sea más fácil de usar.
Rondas Faltantes
Tim nota un elemento que falta: las rondas. Explica que las rondas se generan en el código basándose en el número de equipos, por lo que el usuario no necesita ingresarlas. Por lo tanto, las rondas no están incluidas en el formulario.
Formulario de Creación de Equipo
Luego Tim diseña el Formulario de Creación de Equipo, que incluye:
-
Nombre del Equipo
-
Seleccionar Miembros del Equipo
- Agregar Nuevo Miembro
Tim destaca la importancia de la consistencia entre formularios. Dice que la disposición del nombre del equipo debería coincidir con la disposición del nombre del torneo para crear un diseño cohesivo.
También explica que este formulario permite a los usuarios agregar miembros del equipo existentes desde una lista, o crear nuevos miembros directamente en el formulario. Tim dice que prefiere mantener la creación de miembros dentro del mismo formulario para evitar capas de navegación profundas (es decir, abrir múltiples formularios).
Explica que agregar múltiples capas sería confuso y lento. Por lo tanto, elige mantener el diseño compacto y fácil de usar. Esto apoya una interfaz de aplicación simple e intuitiva que reduce el tiempo que los usuarios necesitan para completar tareas.
Formulario de Creación de Premio
El Formulario de Creación de Premio de Tim es simple. Incluye:
-
Número de Lugar
-
Nombre del Lugar
-
Cantidad del Premio
- Porcentaje del Premio
Tim nota que solo se debe usar uno de los dos últimos campos a la vez (ya sea cantidad o porcentaje). Él dice que el formulario necesitará lógica de validación más tarde, pero para propósitos de diseño, la disposición es sencilla. Este es un buen ejemplo de cómo los principios de diseño ayudan a crear una interfaz pulida y funcional.
Formulario de Panel de Torneos
Finalmente, Tim discute el Formulario de Panel de Torneos, con el cual admite que no está completamente satisfecho. Él explica el desafío: las aplicaciones de Windows Forms típicamente tienen un formulario principal que permanece abierto. Si el formulario principal se cierra, la aplicación termina.
Esto crea un problema para un seguimiento de torneos porque los usuarios pueden querer varios torneos abiertos a la vez. Tim inicialmente consideró abrir automáticamente el formulario de creación de torneo si no existen torneos. Pero se dio cuenta de que cerrar el formulario de creación de torneo terminaría la aplicación.
Así que Tim diseña un formulario de panel central que permanece abierto en todo momento. Este panel permite a los usuarios:
-
Ver torneos existentes
-
Cargar un torneo
- Crear un nuevo torneo
Tim explica que el panel permanecerá abierto incluso si otros formularios están cerrados. Actúa como el punto de navegación central de la aplicación. Aunque admite que puede parecer "estúpidamente simple", dice que funciona, y que más adelante podría agregar elementos de diseño o animaciones para hacerlo más atractivo visualmente.
Conclusión
Tim concluye el video enfatizando que el objetivo es simplemente identificar los formularios necesarios y decidir qué debe mostrar cada formulario. Dice que una vez diseñado el UI, el siguiente paso es la planificación lógica, donde planificará cómo los elementos de la IU se conectan al modelo de datos y al back-end.
El proceso de diseño de IU de Tim muestra que diseñar una interfaz de aplicación se trata de planificación, consistencia y claridad, no de crear visuales perfectos desde el principio. Este enfoque ayuda a los desarrolladores y diseñadores a mantenerse alineados y asegura que la aplicación final sea fácil de navegar y usar para los usuarios.
Comience gratis
Comience gratis
Reserve demostración en vivo gratis
No se requiere tarjeta de crédito ni creación de cuenta
