La forma en que un usuario percibe e interactúa con un sistema o aplicación.
Evaluada en términos de facilidad de uso, accesibilidad y satisfacción.
// Principios de buena UX // 1. Feedback inmediato <button disabled={loading}> {loading ? ( <><Spinner /> Guardando...</> ) : ( 'Guardar' )} </button> // 2. Estados de carga {isLoading ? ( <Skeleton /> // Placeholder visual ) : ( <Contenido /> )} // 3. Manejo de errores amigable {error && ( <Alert type="error"> {error.message} <button onClick={retry}>Reintentar</button> </Alert> )} // 4. Accesibilidad (a11y) <button aria-label="Cerrar modal" aria-pressed={isActive} role="button" tabIndex={0} > <CloseIcon /> </button> // 5. Responsive design <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> {items.map(item => <Card key={item.id} {...item} />)} </div> // 6. Optimistic updates const agregarTodo = async (texto) => { // Mostrar inmediatamente setTodos([...todos, { id: 'temp', texto }]); // Luego sincronizar con servidor await api.createTodo(texto); };
