Dise?o y psique

Persona y el uso del color: la importancia de la interfaz en los videojuegos

Contactamos con un profesional en dise?o gr¨¢fico y de UX/UI como Juan Tejerina para ahondar en el papel que juega la interfaz en el ocio electr¨®nico.

Persona y el uso del color: la importancia de la interfaz en los videojuegos

Podemos definir usabilidad como ¡°capacidad que tiene un sistema de ser comprendido y utilizado con ¨¦xito¡±. Por tanto, en los videojuegos una interfaz no solo debe ser usable para el jugador; tambi¨¦n debe hacer que ese uso sea entretenido, divertido.

La saga Persona es especialmente particular a este respecto por un motivo evidente, nunca mejor dicho, al entrar por los ojos. Hayamos jugado o no a la IP de Atlus, es inevitable que llame nuestra atenci¨®n alguna captura, alg¨²n men¨², alg¨²n dise?o.

Cada entrega de la saga se ha ido preocupando hist¨®ricamente por tener varios elementos que formen parte de su idiosincrasia, denominadores comunes que sean a su vez un s¨ªmbolo identificativo para cada t¨ªtulo. M¨¢s all¨¢ del dise?o de interfaz, el color juega tambi¨¦n un papel fundamental en Persona. No hay excepciones.

Un dibujo interactivo donde las acciones circundan alrededor del personaje.
Ampliar
Un dibujo interactivo donde las acciones circundan alrededor del personaje.

UX y UI no son lo mismo, pero son indispensables

Para entender el concepto de UX (la experiencia de usuario; lo que una persona percibe al interactuar con un producto) y UI (interfaz de usuario, lo que permite al usuario interactuar de forma efectiva con un sistema), hemos contactado con un experto en la materia como Juan Tejerina, dise?ador gr¨¢fico experto en UX/UI y director de la revista GTM, para que responda a varias de nuestras preguntas y nos aclare por qu¨¦ la interfaz de Persona tiene tanto significado.

?Por qu¨¦ es importante el dise?o de una interfaz en un videojuego?

¡°La interfaz en un videojuego tiene pr¨¢cticamente la misma relevancia que el mando de control. Ambos cumplen la misma funci¨®n y sirven como mediador entre jugador y videojuego¡±, comienza diciendo.

Solo as¨ª se establece una relaci¨®n bidireccional entre el jugador y el videojuego. El sistema nos habla a trav¨¦s de su interfaz; nosotros respondemos a trav¨¦s de la misma. Por ello, una interfaz bien dise?ada ¡°hace de la interacci¨®n con el usuario algo natural, intuitivo y sencillo de utilizar¡±.

De perfil, de frente, de espaldas.
Ampliar
De perfil, de frente, de espaldas.

De este modo se garantiza el entendimiento, se elimina la barrera entre el juego y el jugador. Tejerina apunta, adem¨¢s, que una buena interfaz es aquella en la que no reparamos, la que no se manifiesta; cuando el jugador no se percata de su presencia. Lo mismo sucede en caso contrario: si una interfaz est¨¢ mal dise?ada y se ponen trabas al jugador, ¡°es capaz de generar un nivel de frustraci¨®n que puede llevar al abandono del juego¡±, matiza. Un ejemplo de ello es Xenoblade Chronicles X, considera.

Todo esto es tambi¨¦n importante en otros ¨¢mbitos. De hecho, el dise?o de la revista que dirige tambi¨¦n precisa de un dise?o que debe ser amigable a la vez que impactante, que se renueve y que no dificulte ¡ªen ese caso¡ª la legibilidad de los art¨ªculos y dem¨¢s cuerpo de texto, sea un titular, cabecera o un p¨¢rrafo est¨¢ndar.

?Qu¨¦ debe tener una interfaz para ser adecuada en un videojuego?

Pero volvamos a los videojuegos. En el caso del ocio interactivo, es importante que en una UI (User Interface) exista un buen ejercicio de UX (User Experience). ¡°La UX es el apartado que estudia el flujo del propio usuario. De qu¨¦ manera puede acceder de una secci¨®n a otra, de una opci¨®n a otra¡±, explica Tejerina.

Porque no sirve que sea una interfaz vistosa. Hay videojuegos donde los men¨²s entran por los ojos, pero la experiencia de usuario (UX) es nefasta, por lo que se rompe esa sinergia que favorece en la atracci¨®n para con el usuario. Una UX debe ofrecer una experiencia ¡°medida, estudiada y natural¡±, resume en tres claves.

Esta tarea, en los videojuegos, la asume el equipo de dise?o, que se encarga de estudiar previamente qu¨¦ es lo que est¨¢ funcionando; estudiar tanto a su comunidad de jugadores como a la competencia, aquellos que hagan un buen trabajo para hacerlo t¨² a¨²n mejor.

La ¡°familiaridad¡± es tambi¨¦n un elemento imprescindible en esta particular ecuaci¨®n. ¡°Cuando estamos construyendo una interfaz, es importante observar los ejemplos m¨¢s relevantes dentro del sector¡±.

No se trata de ¡°copiar¡±, insiste Juan. Para ello pone como ejemplo la saga The Legend of Zelda. ¡°Si estamos trabajando en un juego tipo Zelda, es importante observar a sus jugadores y ver c¨®mo plantea su interfaz y c¨®mo los jugadores interact¨²an con ella [¡­] hay que saber interiorizar los principios usables que plantea para asemejarlos en nuestro juego¡±.

Y es que no se puede obviar que el p¨²blico objetivo ser¨¢ aquel que esta jugando a videojuegos similares al ejemplo en que nos fijemos; por ello es importante ofrecerles una experiencia ¡°familiar¡± en cuestiones de usabilidad.

Persona 3 y el azul. El azul y Persona 3.
Ampliar
Persona 3 y el azul. El azul y Persona 3.

¡°Si rompemos el concepto de familiaridad, es posible que generemos frustraci¨®n en nuestro usuario¡±. Una muy buena interfaz ser¨¢, por tanto, aquella que mejore a sus referentes y que no repita los errores ya cometidos.

Para finalizar, su apartado est¨¦tico debe ser ¡°agradable y acorde con el esp¨ªritu del juego¡±.

Sobre la saga Persona y la priorizaci¨®n de un color para cada entrega

El ¨²ltimo apartado de este art¨ªculo nos hace regresar a la saga Persona, que seg¨²n un dominador de la materia como Tejerina, es un caso en el que fijarse y tomar ejemplo.

Shigenori Soejima es uno de los m¨¢ximos responsables de que estemos aqu¨ª y ahora hablando de la saga del P Studio. Adem¨¢s de ser un total dominador del pincel en el campo de la ilustraci¨®n, su habilidad con el uso de colores y dotar a sus obras de una gran personalidad son la gota que colma el vaso para suscitar un inter¨¦s fuera de lo com¨²n.

¡°En el mundo del dise?o, se habla mucho del concepto de la ¡°psicolog¨ªa del color¡±, un concepto que no se conoce demasiado pero que en su ¨¢mbito profesional es de lo m¨¢s habitual.

¡°Cada color tiene asociado un componente psicol¨®gico¡±, a?ade. ¡°Por irnos al ejemplo m¨¢s claro, el color ¡°rojo¡± es un color que nos indica ¡°alarma¡±, ¡°prohibido¡±, e incluso ¡°sangre¡± y ¡°violencia¡±. Es un color muy asociado al ¨ªmpetu. Si pensamos en el color ¡°verde¡±, r¨¢pido vienen a nuestra mente im¨¢genes de ¡°salud¡±, ¡°correcto¡± y ¡°vida¡±.

Ampliar

La habilidad de Soejima es, por tanto, la capacidad de asociar sus obras a colores concretos y generar en el camino una coherencia visual.

En Persona 3, por ejemplo, el azul era el color predominante. Persona 4 tuvo el amarillo como gran protagonista. El ¨²ltimo caso, Persona 5, tuvo el rojo como tono crom¨¢tico escogido por Soejima, todo un riesgo por las connotaciones negativas que puede suscitar. ¡°Podr¨ªamos hablar tambi¨¦n de Catherine, que se inclina por los magentas vibrantes¡±.

Ahora bien, ?qu¨¦ comunican cada uno de estos colores? ¡°Eso es algo que depender¨¢ de nuestra propia psicolog¨ªa¡±, apunta Tejerina. Se trata de un elemento muy presente en las obras del P¡¤Studio, donde ¡°el dise?o est¨¦tico de los Persona de cada protagonista es ya una comunicaci¨®n directa con nuestra psique¡±.

No nos marchamos de Jap¨®n sin citar un ¨²ltimo caso que tambi¨¦n es importante para Tejerina: Resident Evil 6, que a pesar de su mala fama ¡°hace un alarde de buen gusto a la hora de presentarnos distintas interfaces (en su apartado est¨¦tico) dependiendo del personaje que estemos controlando. Algo que no se ve en muchos juegos¡±.

Con todo, llegaos a la conclusi¨®n de que el dise?o de una buena interfaz es, en efecto, aquel que es capaz de pasar desapercibido. No es un aspecto que se suela valorar con mucho detalle en los an¨¢lisis de videojuegos por parte de la prensa; solo cuando nos han provocado alg¨²n problema o desafecci¨®n. De acuerdo con Tejerina, mientras siga sucediendo lo primero algo deben estar haciendo bien los equipos de dise?o.

Persona 5

  • PS3
  • PS4
  • RPG

Persona 5, desarrollado por P Studio y editado por Atlus para PlayStation 3 y PlayStation 4, es la quinta entrega de la celebrada saga de rol y combates por turnos Persona. Sum¨¦rgete en la vida extraordinaria de un grupo normal de ingenieros sociales en potencia y usa las habilidades sobrenaturales de la Persona para cambiar el mundo que te rodea.

Car¨¢tula de Persona 5
10
universo-virtual.com
buytrendz.net
thisforall.net
benchpressgains.com
qthzb.com
mindhunter9.com
dwjqp1.com
secure-signup.net
ahaayy.com
soxtry.com
tressesindia.com
puresybian.com
krpano-chs.com
cre8workshop.com
hdkino.org
peixun021.com
qz786.com
utahperformingartscenter.org
maw-pr.com
zaaksen.com
ypxsptbfd7.com
worldqrmconference.com
shangyuwh.com
eejssdfsdfdfjsd.com
playminecraftfreeonline.com
trekvietnamtour.com
your-business-articles.com
essaywritingservice10.com
hindusamaaj.com
joggingvideo.com
wandercoups.com
onlinenewsofindia.com
worldgraphic-team.com
bnsrz.com
wormblaster.net
tongchengchuyange0004.com
internetknowing.com
breachurch.com
peachesnginburlesque.com
dataarchitectoo.com
clientfunnelformula.com
30pps.com
cherylroll.com
ks2252.com
webmanicura.com
osostore.com
softsmob.com
sofietsshotel.com
facetorch.com
nylawyerreview.com
apapromotions.com
shareparelli.com
goeaglepointe.com
thegreenmanpubphuket.com
karotorossian.com
publicsensor.com
taiwandefence.com
epcsur.com
odskc.com
inzziln.info
leaiiln.info
cq-oa.com
dqtianshun.com
southstills.com
tvtv98.com
thewellington-hotel.com
bccaipiao.com
colectoresindustrialesgs.com
shenanddcg.com
capriartfilmfestival.com
replicabreitlingsale.com
thaiamarinnewtoncorner.com
gkmcww.com
mbnkbj.com
andrewbrennandesign.com
cod54.com
luobinzhang.com
bartoysdirect.com
taquerialoscompadresdc.com
aaoodln.info
amcckln.info
drvrnln.info
dwabmln.info
fcsjoln.info
hlonxln.info
kcmeiln.info
kplrrln.info
fatcatoons.com
91guoys.com
signupforfreehosting.com
faithfirst.net
zjyc28.com
tongchengjinyeyouyue0004.com
nhuan6.com
oldgardensflowers.com
lightupthefloor.com
bahamamamas-stjohns.com
ly2818.com
905onthebay.com
fonemenu.com
notanothermovie.com
ukrainehighclassescort.com
meincmagazine.com
av-5858.com
yallerdawg.com
donkeythemovie.com
corporatehospitalitygroup.com
boboyy88.com
miteinander-lernen.com
dannayconsulting.com
officialtomsshoesoutletstore.com
forsale-amoxil-amoxicillin.net
generictadalafil-canada.net
guitarlessonseastlondon.com
lesliesrestaurants.com
mattyno9.com
nri-homeloans.com
rtgvisas-qatar.com
salbutamolventolinonline.net
sportsinjuries.info
topsedu.xyz
xmxm7.com
x332.xyz
sportstrainingblog.com
autopartspares.com
readguy.net
soniasegreto.com
bobbygdavis.com
wedsna.com
rgkntk.com
bkkmarketplace.com
zxqcwx.com
breakupprogram.com
boxcardc.com
unblockyoutubeindonesia.com
fabulousbookmark.com
beat-the.com
guatemala-sailfishing-vacations-charters.com
magie-marketing.com
kingstonliteracy.com
guitaraffinity.com
eurelookinggoodapparel.com
howtolosecheekfat.net
marioncma.org
oliviadavismusic.com
shantelcampbellrealestate.com
shopleborn13.com
topindiafree.com
v-visitors.net
qazwsxedcokmijn.com
parabis.net
terriesandelin.com
luxuryhomme.com
studyexpanse.com
ronoom.com
djjky.com
053hh.com
originbluei.com
baucishotel.com
33kkn.com
intrinsiqresearch.com
mariaescort-kiev.com
mymaguk.com
sponsored4u.com
crimsonclass.com
bataillenavale.com
searchtile.com
ze-stribrnych-struh.com
zenithalhype.com
modalpkv.com
bouisset-lafforgue.com
useupload.com
37r.net
autoankauf-muenster.com
bantinbongda.net
bilgius.com
brabustermagazine.com
indigrow.org
miicrosofts.net
mysmiletravel.com
selinasims.com
spellcubesapp.com
usa-faction.com
snn01.com
hope-kelley.com
bancodeprofissionais.com
zjccp99.com
liturgycreator.com
weedsmj.com
majorelenco.com
colcollect.com
androidnews-jp.com
hypoallergenicdogsnames.com
dailyupdatez.com
foodphotographyreviews.com
cricutcom-setup.com
chprowebdesign.com
katyrealty-kanepa.com
tasramar.com
bilgipinari.org
four-am.com
indiarepublicday.com
inquick-enbooks.com
iracmpi.com
kakaschoenen.com
lsm99flash.com
nana1255.com
ngen-niagara.com
technwzs.com
virtualonlinecasino1345.com
wallpapertop.net
nova-click.com
abeautifulcrazylife.com
diggmobile.com
denochemexicana.com
eventhalfkg.com
medcon-taiwan.com
life-himawari.com
myriamshomes.com
nightmarevue.com
allstarsru.com
bestofthebuckeyestate.com
bestofthefirststate.com
bestwireless7.com
declarationintermittent.com
findhereall.com
jingyou888.com
lsm99deal.com
lsm99galaxy.com
moozatech.com
nuagh.com
patliyo.com
philomenamagikz.net
rckouba.net
saturnunipessoallda.com
tallahasseefrolics.com
thematurehardcore.net
totalenvironment-inthatquietearth.com
velislavakaymakanova.com
vermontenergetic.com
sizam-design.com
kakakpintar.com
begorgeouslady.com
1800birks4u.com
2wheelstogo.com
6strip4you.com
bigdata-world.net
emailandco.net
gacapal.com
jharpost.com
krishnaastro.com
lsm99credit.com
mascalzonicampani.com
sitemapxml.org
thecityslums.net
topagh.com
flairnetwebdesign.com
bangkaeair.com
beneventocoupon.com
noternet.org
oqtive.com
smilebrightrx.com
decollage-etiquette.com
1millionbestdownloads.com
7658.info
bidbass.com
devlopworldtech.com
digitalmarketingrajkot.com
fluginfo.net
naqlafshk.com
passion-decouverte.com
playsirius.com
spacceleratorintl.com
stikyballs.com
top10way.com
yokidsyogurt.com
zszyhl.com
16firthcrescent.com
abogadolaboralistamd.com
apk2wap.com
aromacremeria.com
banparacard.com
bosmanraws.com
businessproviderblog.com
caltonosa.com
calvaryrevivalchurch.org
chastenedsoulwithabrokenheart.com
cheminotsgardcevennes.com
cooksspot.com
cqxzpt.com
deesywig.com
deltacartoonmaps.com
despixelsetdeshommes.com
duocoracaobrasileiro.com
fareshopbd.com
goodpainspills.com
kobisitecdn.com
makaigoods.com
mgs1454.com
piccadillyresidences.com
radiolaondafresca.com
rubendorf.com
searchengineimprov.com
sellmyhrvahome.com
shugahouseessentials.com
sonihullquad.com
subtractkilos.com
valeriekelmansky.com
vipasdigitalmarketing.com
voolivrerj.com
zeelonggroup.com
1015southrockhill.com
10x10b.com
111-online-casinos.com
191cb.com
3665arpentunitd.com
aitesonics.com
bag-shokunin.com
brightotech.com
communication-digitale-services.com
covoakland.org
dariaprimapack.com
freefortniteaccountss.com
gatebizglobal.com
global1entertainmentnews.com
greatytene.com
hiroshiwakita.com
iktodaypk.com
jahatsakong.com
meadowbrookgolfgroup.com
newsbharati.net
platinumstudiosdesign.com
slotxogamesplay.com
strikestaruk.com
trucosdefortnite.com
ufabetrune.com
weddedtowhitmore.com
12940brycecanyonunitb.com
1311dietrichoaks.com
2monarchtraceunit303.com
601legendhill.com
850elaine.com
adieusolasomade.com
andora-ke.com
bestslotxogames.com
cannagomcallen.com
endlesslyhot.com
iestpjva.com
ouqprint.com
pwmaplefest.com
qtylmr.com
rb88betting.com
buscadogues.com
1007macfm.com
born-wild.com
growthinvests.com
promocode-casino.com
proyectogalgoargentina.com
wbthompson-art.com
whitemountainwheels.com
7thavehvl.com
developmethis.com
funkydogbowties.com
travelodgegrandjunction.com
gao-town.com
globalmarketsuite.com
blogshippo.com
hdbka.com
proboards67.com
outletonline-michaelkors.com
kalkis-research.com
thuthuatit.net
buckcash.com
hollistercanada.com
docterror.com
asadart.com
vmayke.org
erwincomputers.com
dirimart.org
okkii.com
loteriasdecehegin.com
mountanalog.com
healingtaobritain.com
ttxmonitor.com
bamthemes.com
nwordpress.com
11bolabonanza.com
avgo.top