Resumen de Alfabetización Digital y Ecosistemas de Medios

## Introducción La **interfaz de usuario (IU)** es el conjunto de elementos visuales y de interacción que permiten a las personas comunicarse con sistemas digitales. En el contexto universitario y profesional, comprender la IU implica analizar diseño, usabilidad, accesibilidad y patrones de interacción para crear experiencias eficientes y agradables. > **Definición:** La interfaz de usuario es el punto de contacto entre el usuario y el sistema, formado por elementos visuales, interacción y comportamiento que facilitan la realización de tareas. ## Componentes básicos de la IU ### Elementos visuales - **Botones**: accionan tareas concretas. - **Campos de entrada**: permiten introducir texto o valores. - **Menús y barras de navegación**: organizan funciones y rutas. - **Iconos y tipografía**: comunican significado y jerarquía. > **Definición:** Un componente visual es cualquier elemento de la IU que transmite información o permite interacción directa. ### Patrones de interacción - **Click/tap**: acción primaria en mouse o pantallas táctiles. - **Hover**: información adicional al pasar el cursor. - **Arrastrar y soltar**: reorganizar o manipular objetos. - **Atajos de teclado**: aceleran tareas repetitivas. ### Layout y jerarquía - La organización espacial guía la atención: cabeceras, contenido principal, barras laterales. - Uso de contraste, tamaño y espaciado para marcar prioridad. ## Principios de diseño de IU 1. **Visibilidad del estado del sistema**: el usuario siempre debe saber qué está pasando. 2. **Correspondencia entre el sistema y el mundo real**: usar lenguaje y metáforas comprensibles. 3. **Control y libertad del usuario**: permitir deshacer acciones y navegar libremente. 4. **Consistencia y estándares**: interfaces coherentes reducen la carga cognitiva. 5. **Prevención de errores**: diseñar para evitar errores y ofrecer mensajes claros. 6. **Accesibilidad**: garantizar uso por personas con distintas capacidades. > **Definición:** Usabilidad es la medida en que un producto puede ser usado por usuarios específicos para alcanzar objetivos específicos con eficacia, eficiencia y satisfacción. ## Usabilidad y evaluación ### Métodos de evaluación - **Pruebas con usuarios**: observar tareas reales y medir éxito y tiempo. - **Heurísticas de evaluación**: revisión experta basada en principios (por ejemplo, Nielsen). - **Análisis de métricas**: tasas de conversión, tiempo en tarea, errores. - **Test A/B**: comparar variantes para optimizar resultados. ### Ejemplo práctico Imagina una aplicación de notas con dos diseños de lista. En la prueba con usuarios, la Variante A muestra botones de acción visibles y la Variante B los oculta en un menú. Se mide tiempo medio por tarea y tasa de errores. Si la Variante A reduce tiempo de 60s a 35s y disminuye errores de 12% a 4%, tiene mejor usabilidad. ## Accesibilidad - Usar contraste suficiente entre texto y fondo. - Proveer etiquetas claras y estado para lectores de pantalla. - Diseñar para navegación por teclado. - Evitar depender solo del color para transmitir información. > **Definición:** Accesibilidad es la práctica de diseñar productos que puedan ser usados por la mayor cantidad de personas posible, incluidas aquellas con discapacidades. ## Interfaz visual vs. Interacción | Aspecto | Interfaz visual | Interacción | |---|---:|---:| | Enfoque | Estética y disposición | Comportamiento y flujo | Mide | Consistencia visual, legibilidad | Tiempo de tarea, errores, eficiencia | Ejemplos | Colores, tipografías, iconos | Animaciones, respuestas a acciones, atajos ## Prototipado y herramientas - Wireframes: bocetos de estructura sin estilo. - Prototipos de alta fidelidad: simulaciones interactivas que reflejan la experiencia final. - Herramientas comunes: Figma, Adobe XD, Sketch, InVision. ### Flujo típico de trabajo 1. Investigación y definición de requisitos. 2. Wireframing y arquitectura de información. 3. Prototipado interactivo. 4. Pruebas de usuario y refinamiento. 5. Imp