Diseño de Interfaces y Experiencia de Usuario
TUS en Diseño de Videojuegos
Ayose Lomba Pérez (LinkedIn)
(Universidad del Atlántico Medio). Segundo Bloque.
Presentación
Ayose Lomba Pérez (LinkedIn)
(Universidad del Atlántico Medio)
Asignatura del primer semestre.
Información de interés en el Espacio Web del TUS en Diseño de Videojuegos
Introducción
Horario de la asignatura: Todos los martes y jueves de 15:00 a 16:45
Evaluación:
- 14/enero/25 Entrega TFA
- 30/enero/25 Examen Convocatoria Oficial
- 16, 21 y 23/enero/24 Defensa TFA
Sistema de Evaluación
| Sistema | Calificación |
|---|---|
| Asistencia y participación activa | 10% |
| Realización de trabajos y prácticas | 50% |
| Pruebas de evaluación teórico prácticas | 40% |
Examen
El examen tendrá dos partes. Una teórica y otra práctica.
La parte teórica será tipo test (10 cuestiones) de única respuesta que saldrá de los contenidos teórico/prácticos abordados en clase y cinco cuestiones cortas (CORTAS).
La parte práctica constará de un ejercicio de desarrollo que hará uso del motor utilizado en clase (UNITY).
Diseño de Interfaces y Experiencia de Usuario
Docente: Ayose Lomba Pérez
eMail: ayose.lomba@pdi.atlanticomedio.es
DATOS ASIGNATURA
- Nombre: DISEÑO DE INTERFACES Y EXPERIENCIA DE USUARIO
- Curso: 2º CURSO
- Créditos: 6 CRÉDITOS ECTS
- Modalidad: OBLIGATORIA
- …
DATOS ASIGNATURA
- Horario: 1:45 HORAS CLASE DIARIAS (15:00 A 16:45)
- Evaluación: EVALUACIÓN CONTINUA
- Presencialidad: 60 HORAS
- Faltas: 20% DE FALTAS SIN JUSTIFICAR -> PÉRDIDA EVALUACIÓN CONTINUA (12 HORAS | < 7 sesiones)
Guía Docente
Explicación sobre el diseño y su aplicación en la asignatura
Diseño de Interfaces Vs Diseño de Experiencias
- Ética, tipología y particularidades del Diseño y diseñador de UI/UX.
- ¿Qué es una experiencia satisfactoria?
- Productos de entrada/expertos; Productos de nicho/generalistas.
- Satisfacer a los fans o crear nuevos fans…
Principios del Diseño Centrado en el Usuario (DCU) y Diseño Orientado a Tareas (DOT)
- Nielsen: Visibilidad del estado del sistema, Coincidencia con el mundo real, Control y libertad del usuario, etc.
CRITERIOS DE EVALUACIÓN
- Sistema de evaluación:
- Realización de trabajos y prácticas: 50%
- Pruebas de evaluación teórico-prácticas: 40%
- Asistencia y participación activa: 10%
EVALUACIÓN
- Fecha de Examen: 30 enero 2025
- Teoría (10 preguntas tipo test + 5 cuestiones cortas)
- Práctica (desarrollo de un ejercicio con UNITY®)
- Entrega de Trabajos: 14/01/2025
- Fecha de Defensas/Corrección TFA: 16, 21 y 23 enero 2024
Resumen contenido Asignatura
CONTENIDO DE LA ASIGNATURA: Principios y Conceptos Básicos
- Diseño de interfaces Vs Diseño de experiencias
- ¿Experiencia Satisfactoria?
- Conceptos de diseño UI/UX: Interfaz, Usabilidad, Accesibilidad, Arquitectura de la Información, DCU/DOT
CONTENIDO DE LA ASIGNATURA: Metodología, Tecnología y Herramientas
- Proceso de Diseño: Fases, planificación, métodos y técnicas
- Necesidades de usuario vs negocio
- Cultura de Proyecto: Documentos técnicos, roles, diseño en capas
Diseño Visual de Interfaces
- Uso de herramientas digitales
- Buenas prácticas
- Workflow
- Control de Versiones
- Prototipado de bajo y alto nivel
Interfaz de Usuario y GUI
- UI significa interfaz de usuario
- GUI significa interfaz gráfica de usuario
- Diferencias y aplicaciones en diseño
Definiciones
UI: Interfaz de usuario. Conjunto de dispositivos que permiten a un jugador interactuar con un juego. El ratón, el teclado, la pantalla táctil, etc.
GUI: Interfaz Gráfica de Usuario. Subconjunto de la UI representado por gráficos como botones, los menús desplegables, los íconos, etc.
Tipos de UI
- Diégesis: ¿Forma parte de la historia?
- Espacial: ¿Está en el entorno del juego?
- Meta y No-Diégetico: Ejemplos y usos
UI No Diégetico
- Información para el jugador, no para personajes
- Ejemplos en juegos y aplicaciones
UI Diegético
- Parte del mundo del juego, reconocido por personajes
- Ejemplos y técnicas de diseño
UI Meta y Espacial
- Meta: conocida por personajes, no mostrada físicamente
- Espacial: en la escena, no reconocida por personajes
Ejercicios básicos de interfaces
Este contenido se enfoca a comenzar a familiarizarnos con el uso de las herramientas de UI de Unity
Herramientas de IU en Unity
Arrancando Motores
Tenemos que abrir un nuevo proyecto en Unity
Relaciones de aspecto en los diseños
Al diseñar una interfaz de usuario, la resolución y la relación de aspecto juegan un papel importante en el aspecto de la misma.
A tener en cuenta…
Conocer la resolución y la relación de aspecto del dispositivo objetivo será un primer paso importante en el diseño por dos motivos:
- Determinará el diseño de su interfaz de usuario.
- La forma en que construyes la interfaz de usuario dentro de Unity estará determinada por la cantidad de resoluciones y relaciones de aspecto que se deseen incluir.
¿Cómo hacer esto en Unity?
Recordemos que podemos cargar la resolución que queramos en este mismo menú.
Utilidad interesante para dispositivos móviles
Un paquete interesante para Unity y la simulación de dispositivos es “Device Simulator Devices” os dejo un ejemplo de como instalarlo en el motor…
El tamaño importa
De cara a nuestros diseños escoger bien las dimensiones de los elementos gráficos como los botones es vital. Los tamaños que usamos para dispositivos móviles pueden no ser los adecuados si copiamos los usados en un proyecto ejecutado en sobremesa.
Existen otras similares para Apple
Unidades en las guías o documentación
Recordemos que son las siguientes unidades:
pt: 0.3528 mm. Se usa para tipografías y elementos de impresión. Siempre en base a 72ppp
dp: pixeles independientes de la densidad (ppp) de la pantalla. Aparecen para evitar modificaciones de dimensiones si este último valor cambia entre dispositivos.
mm: medida internacional de longitud. Es una medida física y no tan digital.
¿Y esto para que?
Esto de controlar las unidades es importante porque influye en el diseño dependiendo de si el juego se juega con unos dedos u otros.
Diseño de UI para XR
por desarrollar
Diseño de UI y GUI
Diseño universal y accesibilidad
En la etapa de diseño debemos tener presente:
- tipos de jugadores
- datos sociodemográficos
- dispositivos en que se utilizará
- movilidad de los usuarios
- etc
Diseño Universal
“El diseño de productos y entornos para que sean utilizables por todas las personas, en la mayor medida posible, sin necesidad de adaptación o diseño especializado”. Ronald Mace
Para que un diseño sea eficaz, se deben tomar decisiones decididas para garantizar que sea funcional y útil para todo tipo de personas.
Al diseñar una interfaz de usuario, se debe considerar cómo hacerla utilizable y accesible para todas las personas desde el comienzo del proceso de diseño.
Principios del diseño universal
Existen 7 principios de diseño universal
- Uso equitativo
- Flexibilidad de uso
- Uso sencillo e intuitivo
- Información preceptible
- Tolerancia al error
- Bajo esfuerzo físico
- Tamaño y espacio de aproximación y uso
Uso equitativo
Un diseño debe ser igualmente utilizable y atractivo para todos.
Una interfaz debe diseñarse para atraer a todos los usuarios y no debe estigmatizar ni segregar a los usuarios.
Flexibilidad de uso
El principio de flexibilidad en el uso establece que el diseño debe acomodar a personas con una amplia gama de preferencias y habilidades y que se les debe dar a las personas la posibilidad de elegir cómo utilizar el diseño.
Normalmente se implementa permitiendo al usuario colocar elementos con diferentes configuraciones o lugares.
Uso sencillo e intuitivo
El principio de uso simple e intuitivo establece que un diseño debe ser fácil de entender para las personas, independientemente de sus conocimientos, experiencia, habilidades o nivel de idioma anteriores.
Evitemos diseños complicados de entender. Si tienes que explicar lo que hace, posiblemente esté mal diseñado.
Información preceptible
El principio de información perceptible establece que la información debe transmitirse a los usuarios de forma perceptible independientemente del entorno en el que se encuentren o de sus capacidades sensoriales.
Colores que destaquen el contenido, texto de alto contraste, voz en off, ajustes de brillo, contraste
Tolerancia al error
El principio de tolerancia al error establece que se deben minimizar las consecuencias adversas de la interacción con el diseño.
Un ejemplo claro las ventanas emergentes de confirmación de evento.
Bajo esfuerzo físico
El principio de bajo esfuerzo físico establece que el diseño debe ser cómodo de usar y se deben minimizar la fatiga y la incomodidad.
Tamaño y espacio de aproximación y uso
El principio de tamaño y espacio para el acercamiento y uso establece que las interfaces deben permitir a los usuarios interactuar con ellas independientemente de su movilidad, tamaño, postura o posición.
Permitir múltiples tipos de dispositivos de entrada es clave para este principio, ya que permitirá a las personas utilizar dispositivos de entrada diseñados para su tamaño y movilidad específicos.
Interfaces de usuario de Unity
Los sistemas de interfaz de usuario de Unity
Interfaces en el juego: Unity UI (uGUI) o el UI Toolkit
Interfaces para el Editor de Unity: UI Toolkit o IMGUI
Unity UI (uGUI)
Sistema que está integrado en Unity de fábrica y no requiere descargas adicionales.
Basado en GameObjects y Componentes.
Es la opción más sólida para juegos y aplicaciones.
IMGUI
Basado en código que se utiliza para crear interfaces dentro del editor. No es objeto de esta asignatura.
UI Toolkit
UI Toolkit es un nuevo sistema de interfaz de usuario que se encuentra en desarrollo.
Debe instalarse como un paquete extra
(Referencia) en documentación de Unity
Input systems de Unity
Unity tiene actualmente dos sitemas de gestión de entradas.
- Input Manager
- Input System
¿Cuál se usa?
Depende de varios factores, principalmente de: 1. que queramos una amplia personalización de dispositivos de entrada 2. estabilidad del sistema a utilizar, el Input System está en desarrollo y aún no es tan fiable
UI básico en Unity
Pilares esenciales de UI en Unity
- Lienzos, paneles y diseño básico
- Profundizando en lienzos automáticos
- Event System y programación de UI
¿Dónde trabajaremos?
