DISEÑO DE

INTERFAZ
01. UI, GUI y UX

UI

User Interface

GUI

Graphical User Interface

Game User Interface

UX

User Experience

Diseño de videojuegos – Prof. Álvaro Anaya Marín

02. Game User Interface

Dispositivos

GUI

Menús

Interfaz gráfica Menús in-game

HUD
Head-Up Display

Diseño de videojuegos – Prof. Álvaro Anaya Marín

03. Diseño de la interfaz de juego

Transmitir
GUI Usuario
objetivo información centrada en

Un interfaz bien diseñada te comunica la información que

necesitas en el momento en el que la necesitas.

Diseño de videojuegos – Prof. Álvaro Anaya Marín

03. Diseño de la interfaz de juego

¿Comunica la información que el

Información Anticipación
jugador necesita en cada momento?

¿Esa información es fácil de encontrar Jerarquización y

Organización
y de entender? distribución

¿Queda claro su función sin necesidad Simplificación y

Legibilidad
de explicación? convenciones

¿La interacción es natural e intuitiva? Claridad y

Interacción
accesibilidad

Estética ¿Encaja artísticamente con el juego? Tema

¿Qué queremos transmitir o comunicar al jugador?

Diseño de videojuegos – Prof. Álvaro Anaya Marín
TIP. Percepciones y mecánicas

Cuando transmitas alguna de las percepciones del

personaje jugador a través de uno de los elementos de la
Percepciones interfaz gráfica, trata de que esta sea representada de la Simbología
forma más natural posible y tenga relación con lo que
está sucediendo en el juego.

Cuando una mecánica conlleva interactuar con alguno

de los elementos de la interfaz gráfica, intenta que la Reacción de
Mecánicas sensación que transmite esta interacción represente la
la interfaz
acción que el personaje jugador está realizando o el
cambio en el estado de juego que esta produce.

¿Qué queremos transmitir o comunicar al jugador?

Diseño de videojuegos – Prof. Álvaro Anaya Marín
04. Proceso de diseño de la interfaz

Flujo de ¿Qué interfaces gráficas contiene el juego? ¿Cómo recorremos estas?

pantallas

Información ¿Qué información ha de comunicar cada interfaz gráfica?

Wireframe ¿Cómo se ordenará esta información?

Usuario ¿Cómo interactúa el usuario con esta información?

Mockup ¿Cómo percibe el usuario esta información?

Diseño de arte ¿Cómo será la apariencia final de los elementos gráficos de interfaz?

¿Qué queremos transmitir o comunicar al jugador?

Diseño de videojuegos – Prof. Álvaro Anaya Marín
05. Elementos interactivos

Button Estados

Toggle
Disabled

Slider

Hover / Focused
Scrollbar

Dropdown Pressed

Input field Activated

¿Qué queremos transmitir o comunicar al jugador?

Diseño de videojuegos – Prof. Álvaro Anaya Marín
06. Acciones

Mando / Teclado Ratón Dispositivo táctil

Press Press Tap

Long press Long press Long press

Drag Drag

Swipe Swipe

Pinch

¿Qué queremos transmitir o comunicar al jugador?

Diseño de videojuegos – Prof. Álvaro Anaya Marín
07. Head Up Display

Diegético

HUD No-diegético

Meta-diegético

¿Qué queremos transmitir o comunicar al jugador?

Diseño de videojuegos – Prof. Álvaro Anaya Marín
07. Head Up Display

Plano /
Superpuesto

HUD

Espacial

¿Qué queremos transmitir o comunicar al jugador?

Diseño de videojuegos – Prof. Álvaro Anaya Marín
08. Dispositivos de visualización

Pantalla

Dispositivos de
Pantalla táctil
visualización

Dispositivo de VR

¿Qué queremos transmitir o comunicar al jugador?

Diseño de videojuegos – Prof. Álvaro Anaya Marín
08. Dispositivos de visualización

Lectura

Cómo lee el jugador la

información mostrada

Percepción visual

Cómo percibe la imagen

mostrada en pantalla

Háptica

Cómo interactúa físicamente

con el dispositivo

¿Qué queremos transmitir o comunicar al jugador?

Diseño de videojuegos – Prof. Álvaro Anaya Marín
+
+
P01. Analiza la interfaz gráfica de un videojuego

Escoge un videojuego que conozcas y

cuya interfaz de juego te haya llamado la
atención (sea por su calidad o por alguna
característica particular) y analiza esta.

Puedes escoger un juego que utilice

como interfaz algún dispositivo propio.
P02. Diseña la interfaz gráfica de un videojuego

Escoge uno de los videojuegos en cuyo

diseño has trabajado en clase y diseña su
interfaz gráfica de usuario. Para ello,
aplica los conceptos y sigue el proceso
que hemos visto en clase, lo que incluye:

- Flujo de pantallas
- Wireframe
- Mockup