Tecnologías y Aplicaciones Web
Interacción
Humano–Computadora
Introducción a la HCI
Unidad 1
Bachillerato / Universidad
Ciclo 2025–2026
Propósito

¿Qué aprenderemos
en esta unidad?

🧠
Comprender HCI
Entender cómo las personas y las computadoras se comunican e interactúan.
🖥️
Conocer las Interfaces
Identificar los elementos de una interfaz de usuario efectiva y accesible.
🔗
Hardware y Software
Explorar cómo colaboran el hardware y el software para hacer posible la interacción.
🎯
Evaluar Interfaces
Aprender criterios para analizar si una interfaz es buena o necesita mejorar.
Definición

¿Qué es la HCI?

La Interacción Humano–Computadora (HCI, por sus siglas en inglés) es la disciplina que estudia cómo las personas usan, diseñan y evalúan sistemas computacionales para que sean útiles, eficientes y agradables.

— ACM SIGCHI, Association for Computing Machinery

💡 En pocas palabras: es el puente entre las personas y las máquinas.
Ejemplos reales

HCI en tu vida diaria

📱
Smartphone
Tocar la pantalla para abrir una app en iOS o Android.
🗣️
Asistentes de voz
Hablarle a Siri, Alexa o Google Assistant.
🎮
Videojuegos
Controlar personajes con botones, joystick o movimiento.
💳
Cajero automático
Interactuar con una pantalla táctil para retirar dinero.
🌐
Sitios web
Navegar por Google, YouTube o redes sociales con clics.
Conceptos clave

¿Qué es una
Interfaz de Usuario?

La Interfaz de Usuario (UI) es el espacio donde ocurre la interacción entre el ser humano y el sistema. Es todo lo que el usuario puede ver, tocar, escuchar o leer para comunicarse con la computadora.

Visual
Táctil
Sonora
Textual
Vocal
Componentes

Elementos de una UI

Elementos Visuales
  • Botones, íconos y menús
  • Tipografía y colores
  • Imágenes y videos
  • Animaciones y transiciones
Elementos Interactivos
  • Formularios y campos de texto
  • Barras de navegación
  • Notificaciones y alertas
  • Gestos táctiles (swipe, pinch)
📱 Ejemplo: La pantalla de inicio de tu smartphone es una UI completa.
Historia

Evolución de la HCI

50s
Años 1950
Las computadoras usaban tarjetas perforadas. No había pantallas ni teclados.
70s
Años 1970
Nació la primera interfaz gráfica (GUI) en el Xerox PARC. Aparecen ventanas e íconos.
80s
Años 1980
Apple Macintosh populariza el ratón y las interfaces visuales para el público general.
Hoy
Siglo XXI
Pantallas táctiles, voz, realidad aumentada, inteligencia artificial e interfaces adaptativas.
Objetivos

¿Para qué sirve la HCI?

✅
Usabilidad
Que los sistemas sean fáciles de aprender y usar por cualquier persona.
♿
Accesibilidad
Diseñar para personas con distintas capacidades físicas o cognitivas.
😊
Satisfacción
Que la experiencia sea agradable y reduzca la frustración del usuario.
⚡
Eficiencia
Ayudar a las personas a completar tareas más rápido y con menos errores.
Interdisciplinariedad

HCI es un campo
multidisciplinario

Se nutre de varias disciplinas para entender y mejorar la interacción:

Psicología cognitiva
Ciencias de la computación
Diseño gráfico
Diseño UX
Ergonomía
Lingüística
Sociología
Medicina / Salud
Educación
Componentes

Hardware y Software
en la interacción

Hardware
  • Teclado y ratón (entrada de datos)
  • Pantalla o monitor (salida visual)
  • Altavoces y micrófonos (audio)
  • Pantallas táctiles (entrada + salida)
  • Cámara, sensores, joystick
Software
  • Sistema operativo (Windows, macOS)
  • Aplicaciones web y móviles
  • Controladores de dispositivos
  • Frameworks de interfaz (React, Flutter)
  • Inteligencia artificial conversacional
Ejemplo práctico

¿Cómo ocurre
la interacción?

mi-app.com
Entrada:
El usuario hace clic en un botón.
Procesamiento:
El sistema interpreta la acción.
Salida:
El sistema muestra el resultado.
Evaluación

¿Cómo evaluar
una interfaz?

Criterio ¿Qué evalúa? Importancia
Facilidad de uso ¿Puede cualquiera usarla sin instrucciones? Alta
Claridad visual ¿Son legibles los textos y visibles los botones? Alta
Consistencia ¿Los elementos se comportan igual en toda la app? Media
Velocidad ¿El sistema responde rápido a las acciones? Media
Accesibilidad ¿Funciona para personas con discapacidades? Alta
Actividad en clase

¡Analiza una interfaz
real! 🔍

  1. 1
    Elige una app que uses frecuentemente (WhatsApp, TikTok, YouTube, Instagram, etc.).
  2. 2
    Identifica al menos 3 elementos de UI (botones, menús, íconos, colores).
  3. 3
    Evalúa la app usando la tabla de criterios: facilidad, claridad, velocidad y accesibilidad.
  4. 4
    Escribe 1 cosa que está bien diseñada y 1 mejora que propondrías.
  5. 5
    Comparte tu análisis con el grupo en 2 minutos. 🎤
Conclusión

Ideas clave
de hoy

🔗
HCI = Puente
Conecta a las personas con los sistemas digitales de forma intuitiva.
🎨
UI = Capa visual
Es todo lo que el usuario ve e interactúa en un sistema.
🌍
Multidisciplina
La HCI combina tecnología, psicología, diseño y más.
📐
Diseño centrado
El usuario siempre es el centro del diseño de cualquier interfaz.
💻

"El diseño no es solo cómo se ve o cómo se siente.
El diseño es cómo funciona."

— Steve Jobs, cofundador de Apple

Tecnologías y Aplicaciones Web
HCI – Unidad 1
¡Gracias por su atención!