Interfaces de Usuario (UI), Experiencia de Usuario (UX) y Diseño de Interacción (IxD)
La Interfaz de Usuario (UI) del sistema UTyPCB fue diseñada siguiendo principios de diseño moderno, priorizando la claridad visual, la jerarquía de información y la consistencia en todos los elementos.
La Experiencia de Usuario (UX) se enfocó en facilitar el proceso de descubrimiento, evaluación e inscripción a cursos, minimizando la fricción y maximizando la confianza del usuario.
Diseño centrado en las necesidades del estudiante potencial: información clara, proceso simple, confianza.
Información presentada gradualmente: resumen → detalles → inscripción → confirmación.
Elementos de confianza: garantía, datos bancarios visibles, proceso transparente.
1. Descubrimiento
Página de inicio
2. Exploración
Catálogo cursos
3. Evaluación
Detalle curso
4. Decisión
Checkout
5. Confirmación
Pago registrado
| Heurística | Implementación |
|---|---|
| Visibilidad del estado | Indicadores de proceso en checkout, estados de carga, confirmaciones visuales |
| Coincidencia sistema-mundo real | Lenguaje natural, iconos reconocibles, metáforas familiares (carrito, inscripción) |
| Control del usuario | Navegación clara, botón "volver", posibilidad de modificar datos antes de confirmar |
| Consistencia y estándares | Mismos patrones de diseño en todas las páginas, ubicación consistente de elementos |
| Prevención de errores | Validación de formularios, campos requeridos marcados, formatos de email/teléfono |
| Reconocimiento vs memoria | Menú siempre visible, breadcrumbs, resumen del curso en checkout |
| Flexibilidad y eficiencia | Formularios optimizados, autocompletado, navegación directa |
| Diseño estético y minimalista | Información esencial visible, detalles en pestañas/acordeones, espaciado generoso |
| Reconocer y recuperar errores | Mensajes de error claros, indicación del campo con problema, sugerencias |
| Ayuda y documentación | Tooltips en formularios, textos explicativos, sección de contacto accesible |
| Acción Usuario | Trigger | Feedback Sistema |
|---|---|---|
| Hover sobre card de curso | Mouse over | Elevación (translateY), sombra aumentada, cursor pointer |
| Click en "Ver Curso" | Click/tap | Navegación a página de detalle con scroll al inicio |
| Click en "Inscribirme Ahora" | Click/tap | Redirección a checkout con datos del curso precargados |
| Envío de formulario | Submit | Validación → Spinner de carga → Mensaje de éxito/error |
| Click en tab de temario | Click/tap | Cambio de contenido con transición suave, tab activo resaltado |
| Scroll en página | Scroll | Navbar cambia de transparente a sólido con sombra |
| Focus en campo de texto | Focus | Borde cambia a color primario, glow effect sutil |
| Error de validación | Submit con errores | Campo resaltado en rojo, mensaje descriptivo, ícono de error |
Animación "pulse" infinita que llama la atención sin ser intrusiva
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(37,99,235,.6); }
70% { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
Desplazamiento horizontal al hover para indicar interactividad
.temario-item:hover {
transform: translateX(5px);
background: #f0f7ff;
transition: 0.2s ease;
}
Elevación y sombra aumentada para indicar clickeabilidad
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,.15);
transition: 0.3s ease;
}
| Campo | Tipo | Validación | Mensaje Error |
|---|---|---|---|
| Nombre | text | required, min:2, max:100 | "El nombre es obligatorio" |
| required, email format, unique | "Ingresa un email válido" | ||
| Teléfono | tel | required, pattern: 10 dígitos | "Teléfono de 10 dígitos" |
| Mensaje | textarea | required, min:10, max:1000 | "Mínimo 10 caracteres" |
| Método pago | radio | required (una opción) | "Selecciona un método" |