Saltar al contenido principal

Principios de UX/UI

Aunque UX y UI están profundamente relacionados, no son lo mismo. UX se enfoca en cómo se siente y fluye la experiencia, mientras que UI se centra en cómo se ve y se comporta visualmente la interfaz.

  • UX (User Experience): es la experiencia completa que un usuario tiene al interactuar con un producto. Abarca usabilidad, accesibilidad, satisfacción, eficiencia, etc.
  • UI (User Interface): es el conjunto de elementos visuales, estéticos e interactivos con los que el usuario interactúa: botones, tipografía, colores, diseño visual.

Principios clave de UX (User Experience)​

Principio UXDescripción
UsabilidadFacilidad para aprender, usar y recordar cómo funciona una app.
AccesibilidadGarantizar que personas con discapacidad puedan usar el sistema.
ConsistenciaPatrones similares para acciones similares (botones, menús, flujos).
Feedback inmediatoEl sistema debe reaccionar visual o sonoramente a las acciones del usuario.
Jerarquía visualOrganización clara de lo importante (colores, tamaños, posiciones).
Carga cognitiva bajaNo sobrecargar al usuario con decisiones o información innecesaria.

Flujo UX simplificado​

Principios clave de UI (User Interface)​

Principio UIDescripción
Claridad visualTextos legibles, íconos entendibles, espacios adecuados.
Color con propósitoUsar colores con función: advertencia, éxito, error, etc.
Tipografía jerárquicaDiferenciar títulos, subtítulos y cuerpo de texto.
Responsive DesignInterfaces que se adaptan a cualquier dispositivo.
Consistencia estéticaÍconos, botones, estilos y animaciones coherentes.

Ejemplo técnico en Angular​

Implementación de un formulario de inicio de sesión accesible, claro y responsive:

HTML (Angular Template)
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="login-form">
  <h2>Iniciar Sesión</h2>

  <label for="email">Correo electrónico</label>
  <input
    id="email"
    formControlName="email"
    type="email"
    aria-describedby="emailHelp"
    required
  />
  <div *ngIf="loginForm.get('email')?.invalid && loginForm.get('email')?.touched">
    <small id="emailHelp">Ingresa un correo válido.</small>
  </div>

  <label for="password">Contraseña</label>
  <input id="password" formControlName="password" type="password" required />

  <button type="submit" [disabled]="loginForm.invalid">Ingresar</button>
</form>
CSS (estilos base con enfoque UI)
.login-form {
  max-width: 400px;
  margin: auto;
  padding: 2rem;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.login-form h2 {
  margin-bottom: 1rem;
  text-align: center;
}

.login-form label {
  display: block;
  margin-top: 1rem;
}

.login-form input {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.25rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

Principios aplicados:

  • Feedback visual en errores.
  • Contrastes adecuados.
  • Accesibilidad básica (uso de aria-describedby).
  • Diseño limpio y centrado.

Buenas prácticas aplicadas​

Principio aplicadoImpacto en el producto final
Feedback inmediatoReduce frustraciones
Consistencia visualAumenta la confianza del usuario
AccesibilidadAumenta la inclusión y usabilidad
Responsive designAsegura uso en dispositivos móviles
Jerarquía visualFacilita navegación y comprensión

Referencias​