Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

UI in Videogames

No description
by

Marjorie Figueroa

on 2 August 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of UI in Videogames

Introducción

La usabilidad esta comprendida por :
Efectividad, interacción en cada menú.
Eficiencia, indica exactamente lo que es.
Satisfacción, el usuario progresa mas rápido, se divierte.
Mas los videojuegos :
Una mejor y profunda experiencia
Menos Interrupciones
Mejor Impresión, juegos mas fluidos
Experiencia

Usabilidad: Concepto
ISO/IEC 9126:

"La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso"
ISO/IEC 9241:

"Usabilidad es la eficacia, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico"
Usabilidad en los Videojuegos
Agenda
Introducción
Conceptos Básicos
Usabilidad en los Videojuegos
Importancia de la usabilidad en los videojuegos.
HUD (Head-up Display)
Tipos de IU en los videojuegos
Evolución de las IU en los videojuegos
Interfaces en juegos móviles
Guías para el diseño de IU en juegos móviles
Comparación interfaces buenas y malas
Lo que nos enseñan los videojuegos
Ejemplo en vivo
Conclusiones
Referencias
Fuente: http://games.wiki.staffs.ac.uk/@api/deki/files/1027/=Screen_Flow_2.JPG
Usabilidad: Videojuegos

En los videojuegos la usabilidad trata de brindar una mejor experiencia sin necesidad de tener interrupciones o retos que no hayan sido creados por los diseñadores.
Importancia de la Usabilidad en los Videojuegos
HUD: "Head-up Display"
Es la información que se muestra al jugador en la pantalla durante la partida.
Se muestran diferentes tipos de información simultáneamente
La información mostrada varia dependiendo del juego.
Vida, Puntos, Tiempo, Armas, Menús, Mini mapa, "Quests", entre otros.
Tipos de IU en los videojuegos
Diegética

Meta

Espacial

No-diegética
Accesibilidad: Concepto
Se refiere a la capacidad de acceso de un producto, servicio o contenido por el mayor número posible de personas, independientemente de las limitaciones propias del individuo que presenten o de las que se deriven del contexto de uso (tecnológicas o ambientales)
Sociabilidad: Concepto
Tipos de IU en los videojuegos
La interfaz es un componente de el mundo del juego?
?
Si
No
Si
No
Diegética
La interfaz de usuario existe en el mundo del juego
El jugador puede interactuar con la interfaz
Los elementos de la interfaz pueden ser vistos o escuchados por el jugador
Proveen de una experiencia mas interactiva e inmersiva
No son parte del mundo del juego
Solo los jugadores del mundo real pueden interactuar con la interfaz
Están situados en un plano 2D
Este tipo de elementos pueden ser difíciles de incorporar a un juego con poca narrativa (Deportes, Carreras).
Generalmente son efectos renderizados sobre la pantalla (Sangre, Vidrios, etc)
Meta
Espacial
Los elementos se visualizan dentro del mundo del juego pero no son parte de él
El personaje dentro del juego no se percata de estos elementos
Se usan para dar información extra sobre de algún componente del mundo
La interfaz está totalmente fuera del mundo del juego
Solo puede ser vista por el jugador del mundo real
Un ejemplo de esto son los HUD's
Si se crea de forma correcta, puede pasar desapercibida para el jugador
No-Diegética
La sociabilidad es el valor que nos impulsa a buscar y cultivar las relaciones con las personas compaginando los mutuos intereses e ideas para encaminarlos hacia un fin común, independientemente de las circunstancias personales que a cada uno rodean
Evolución de las IU en los videojuegos
1961
1972
1980
Tenis for Two
Pong
Spacewar
Space Invaders
1978
Pacman
1958
Fuente: http://retrogamerschool.blogspot.com/2013/02/evolucion-tennis-for-two-el-primer.html
Fuente: http://videojuegosantiguos.blogspot.com/2011/04/comienzo.html
Fuente: http://lacquerorleaveher.blogspot.com/2013/03/before-after-space-invaders-twinpost.html
Fuente: http://castilloruthwen.blogspot.com/2010_05_01_archive.html
1981
1985
Colossal Cave Adventure
Super Mario Bros
Donkey Kong
The Legend of Zelda
1986
1975
Fuente: http://www.strangehorizons.com/2008/20080804/newheiser-a.shtml
Fuente: http://xd-play.blogspot.com/2008/05/donkey-kong-1981-nintendo-plataformas.html
Fuente: http://www.juegosclasicosportables.com/2010/06/super-mario-bros-portable.html
Fuente: http://www.emuparadise.me/Nintendo_Gameboy_Advance_ROMs/Classic_Nes_-_The_Legend_of_Zelda_(U)(TrashMan)/44750
Mortal Kombat
1992
Fuente: http://en.wikipedia.org/wiki/File:Fatality.png
1987
Final Fantasy
Fuente: http://www.lafortalezadelechuck.com/2012/12/final-fantasy-25-aniversario-de-fantasia.html
1996
Tomb Raider
Fuente: http://ru.tombraider.wikia.com/wiki/%D0%A4%D0%B0%D0%B9%D0%BB:TR1_Screenshot_03.jpg
Doom
1993
Fuente: http://es.ign.com/feature/367/La-importancia-de-ser-Doom
1997
GTA
Fuente: http://pcarena.pl/uploads/images/przeglad_kk/gta_1_1.jpg
Sims
2000
Fuente: http://www.gamefaqs.com/pc/917885-the-sims-makin-magic/images/gs_screen-1
2001
Halo
Fuente: http://thegamershub.net/2012/04/blast-from-the-past-halo-combat-evolved/
Guitar Hero
2005
Fuente: http://musichub.ign.com/images/34281/PlayStation-2/Guitar-Hero-Game-Guitar-Controller/Screenshots/Guitar-Hero-Screenshot
2006
Wii Sports
Fuente: http://www.libertaddigital.com/fotos/ranking-videojuegos-historia-1002461/2006-wii-sports.jpg.html
Just Dance (Xbox 360)
2011
Fuente: http://2.bp.blogspot.com/-LC4thW0Lfkw/TpCED-khUzI/AAAAAAAABWI/6VAdvTRDCZw/s1600/just-dance-3-solo-player.jpg
No Diegética: Ejemplos
Diegética: Ejemplos
Meta: Ejemplos
Espacial: Ejemplos
Fuente: http://zurb.com/article/121/dead-on-data-display
Fuente: http://www.thewanderlust.net/blog/2010/03/29/user-interface-design-in-video-games/
Fuente: http://www.thewanderlust.net/blog/wp-content/uploads/2010/03/callofduty.jpg
Fuente: http://www.thewanderlust.net/blog/wp-content/uploads/2010/03/callofduty.jpg
Fuente: http://www.rockpapershotgun.com/2012/08/14/league-of-legends-guide/
Fuente: http://3.bp.blogspot.com/-w4AYRwEKIho/TkGII2AJOOI/AAAAAAAAA9w/qQ6VQV2L7mU/s320/Age_Of_Empires_2+juego%255B3%255D.jpg
Fuente: http://www.fanpop.com/clubs/the-sims-3/images/19837802/title/marriage-proposal-photo
Fuente: http://www.rockpapershotgun.com/2012/08/14/league-of-legends-guide/
Referencia de los componentes visuales del juego (metáforas, accesos directos, etc)
La guía de diseño influye en la calidad del juego
El uso de una buena carga cognitiva, en elementos básicos
Elementos de accesibilidad
Aprender y no memorizar
Interfaces en Juegos Móviles
Tiempo atrás se encontraban flechas y "joysticks" en las interfaces.
Ahora, la interfaz se convierte en un elemento del juego
El jugador es enviado al juego de una vez
Fuente: http://crackerpie.com/wp-content/uploads/2013/05/subway_surfers6.jpg
Fuente: http://www.epimundo.com/wp-content/upLoads/Temple-Run-2-for-iOS-iPhone-screenshot-001.jpg
Interfaces en Juegos Móviles
Para aumentar la usabilidad del juego se pueden eliminar los joysticks, poner los detalles en la pantalla y minimizar los toques.
Fuente: http://www.insidemobileapps.com/wp-content/uploads/IMG_1369.png
Subway Surfers
Temple Run 2
Hay Day
Guías para el diseño de IU en juegos móviles
Determinar las plataformas en las que estará disponible.
Hacer una lista con las resoluciones de pantallas.
Decidir la orientación de la pantalla
Guías para el diseño de IU en juegos móviles
Buscar referencias de otros juegos
Usar las referencias como inspiración
No copiar, aprender de ellas
No hay necesidad de reinventar la rueda
Guías para el diseño de IU en juegos móviles
Angry Birds, Heroes of Kalevala, Squids, y Tiny Wings.
Hacer una lista de las distintas pantallas
Hacer un diagrama con el "Screen Flow"
Esto permite ver como todo se conecta
Elegir las funcionalidades de cada pantalla
Crear un prototipo en papel de cada pantalla
Decidir que va y que no
Menos es más
Fuente: http://i0.wp.com/www.paladinstudios.com/wp-content/uploads/2012/04/photo-8.jpg
Guías para el diseño de IU en juegos móviles
Diseña la interfaz
Implementa la interfaz y pruébala
Itera, Itera, Itera.
Fuente: http://i2.wp.com/www.paladinstudios.com/wp-content/uploads/2012/04/Momonga-Menus-Interaction-Design-3k.jpg
Guías para el diseño de IU en juegos móviles
Interfaces Buenas y Malas
Bueno!
Malo!
Controles inapropiados
Espacio malgastado
Escalas inapropiadas
Avisos mal posicionados
Elementos que estorban la vista del usuario

Aprovechar el espacio de la pantalla
Rapidez y accesibilidad
Entradas de texto sencillas
Indicadores visuales
Pocos clicks o "taps"
No sobrecargar la pantalla
Interfaces Buenas y Malas
Lo que nos enseñan los Videojuegos
Mostrar en vez de decir
Closure
Lo que nos enseñan los Videojuegos
Usa las limitaciones de manera efectiva
El NES tiene 48 colores, 256x240 de resolución, 1 color de fondo, 4 sets de 3 colores para personajes, entre otros.
Tetris, Final Fantasy
Lo que nos enseñan los Videojuegos
Las reglas convencionales no tienen que aplicarse siempre
Super Mario Bros 2
Lo que nos enseñan los Videojuegos
No confíes solo en los gráficos
Liar
Lo que nos enseñan los Videojuegos
Todo es sobre la experiencia
Fuente: http://www.telegraph.co.uk/news/uknews/1563076/Elderly-addicted-to-Nintendo-Wii-at-care-home.html
Zelda skyward Sword
Halo
Interfaces Buenas y Malas
Dungeon Defenders
Deus Ex Human Revolution
Interfaces Buenas y Malas
Monster Hunter
Sims 3
Evolución de las IU en los videojuegos
IU PlayStation 4
Conclusiones
Referencias
La interfaz es un componente de la historia del juego?
?
Fuente: http://pixel.valdaris.com/post/historia-de-los-videojuegos-spacewar/
Marjorie Figueroa
Juan A. González T.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
A pesar de lo que muchas personas creen, los videojuegos son mas que un "juego".
El diseño de la interfaz de un juego es un proceso tan importante como cualquier otro
Al analizar un videojuego podemos obtener muchos conocimientos
http://www.gamasutra.com/view/feature/2333/better_games_through_usability_.php
http://www.gamasutra.com/view/feature/2085/crossplatform_user_interface_.php?page=2
http://frankcurzi.hubpages.com/hub/How-HUD-Ruins-Your-Gaming-Experience
http://devmag.org.za/2011/02/02/video-game-user-interface-design-diegesis-theory/
http://www.gamasutra.com/blogs/OlgaCherkashina/20130624/194889/The_tendencies_of_the_mobile_art_on_the_example_of_topgrossing_games.php
http://gamedev.tutsplus.com/tutorials/aesthetics/game-ui-by-example-a-crash-course-in-the-good-and-bad/
http://spyrestudios.com/what-8-bit-video-games-can-teach-us-about-design-and-ux/

51
Fuente: http://devmag.org.za/blog/wp-content/uploads/2011/02/far_cary_2_compass.png
Fuente: http://devmag.org.za/blog/wp-content/uploads/2011/02/world_of_war.png
Fuente: http://devmag.org.za/blog/wp-content/uploads/2011/02/warcraft3_selection.png
Fuente: http://devmag.org.za/blog/wp-content/uploads/2011/02/killzone_blood.png
Fuente: http://3.bp.blogspot.com/-lG9yAp5iXt0/TgqL7BfKs5I/AAAAAAAAA3c/Fr3Wd0FP9o8/s400/the_magical_quest_starring_mickey_mouse_profilelarge.jpg
Fuente : http://8bitgeeks.com/wp-content/uploads/2013/02/4855-944-550-680x396.jpg
Fuente : http://www.gamegui.net/?filter=&p=1
Full transcript