1. Grau en Multimèdia Curs 2011/12 – 2n
Semestre
Narrativa interactiva
Pràctica: "Centre de emergències mèdiques"
Autor
Jordi Zango Novell
jzango@uoc.edu
Data de lliurament
23/05/2012
2. Índex
1. Justificació.........................................................................................................3
2. Descripció del producte.................................................................................... 4
3. Disseny de la interactivitat................................................................................ 5
4. Disseny de la navegació...................................................................................7
5. Disseny lògic.....................................................................................................8
6. Fonts de consulta............................................................................................12
7. Llicència.......................................................................................................... 12
Narrativa interactiva - Pràctica
per Jordi Zango Novell (jzango@uoc.edu) 2
3. 1. Justificació
1. Justificació
Després de considerar diferents opcions, com que l'enunciat demana que el
producte es basi en alguna cosa que tingui a veure amb la PAC2, he agafat la idea
principal que sostenia la història: un servei d'emergències mèdiques.
En aquest cas però, l'argument no té res a veure. El motiu d'aquest nou
plantejament ha estat una reflexió personal provocada per algunes notícies que
vaig poder escoltar fa uns dies respecte a la desconeixença de la majoria dels nens
d'alguns aspectes que tenen a veure amb la salut, els primers auxilis i la prevenció
d'accidents o situacions de risc. Hi ha una gran quantitat de productes multimèdia
(pel·lícules, vídeos, anuncis, jocs,...) que semblen empènyer a la gent jove a
prendre una actitud irresponsable davant d'algunes situacions en la vida, com si
això fos el més divertit.
En la meva opinió, s'haurien d'aprofitar més les noves tecnologies i les eines que
aquestes ens proporcionen per a generar productes lúdics que ajudin a formar als
nens i nenes, entre d'altres moltes coses, en aspectes útils com els primers auxilis
i la prevenció de riscos.
Narrativa interactiva - Pràctica
per Jordi Zango Novell (jzango@uoc.edu) 3
4. 2. Descripció del producte
2. Descripció del producte
El producte consisteix en una aplicació web educativa en forma de joc programat
amb Flash, pensada per a nens i nenes de 1r d'ESO (aproximadament de 12 o 13
anys d'edat). L'objectiu és que aprenguin alguns conceptes bàsics de primers
auxilis. Per a fer-ho, es simula un centre d'emergències on es reben trucades de
casos concrets i l'usuari, com si fos la persona encarregada del centre, ha de
solucionar uns tests que se li presentaran en cada cas amb una sèrie de preguntes
verdader/fals que representen actuacions a fer per a poder solucionar la situació
plantejada. Un cop finalitzat el test, es comprovaran les respostes i es donarà una
puntuació en funció de l'encert que el nen o la nena hagi tingut.
Per ajudar a resoldre els tests, es disposarà d'un manual de primers auxilis i d'una
sèrie de vídeos educatius on es mostraran alguns aspectes bàsics d'actuació en cas
d'emergència mèdica com poden ser la reanimació cardiopulmonar, la maniobra
de Heimlich, com fer una immobilització en cas de fractura, etc.
A més, s'oferirà informació complementària en forma de petits manuals que tenen
a veure amb nocions bàsiques d'anatomia, les vacunes, hàbits alimentaris
saludables, què ha de contenir una farmaciola o quin és l'equipament d'una
ambulància medicalitzada.
L'estructura de la pàgina ha de ser senzilla per assegurar-nos que la seva
complexitat és assumible per la majoria dels nens i nenes a qui està destinada1
.
També s'ha de procurar oferir un alt grau d'interactivitat per a fomentar la
participació dels usuaris2
, i aquesta interactivitat ha d'oferir el màxim grau de
llibertat3
possible.
Un aspecte a tenir també en compte és que l'aplicació resulti atractiva, afegint
elements que cridin l'atenció de l'usuari i el convidin a participar4
.
1 Segons Guillem Bou,tal i com explica als “Principis de la múltiple entrada” en la seva obra “El guion
multimedia”, l'estructura de la informació ha de tenir la complexitat adequada per a que pugui ser
assumida per l'usuari en funció de la seva capacitat cognitiva.
2 Una de les idees principals de la citada obra de Bou és que “sempre que pugui haver-hi interacció s'ha
de poder interactuar”, i que aquesta no s'ha de limitar a una simple repetició gestual. L'autor també
explica que el fet que la interacció estigui ben dissenyada és fonamental per a que aquesta aconsegueixi
el seu principal objectiu: reforçar el missatge.
3 Seguint amb el que exposa Bou a la seva obra, és important que l'usuari tingui la sensació de que
disposa de molta llibertat en la utilització del producte, encara que aquesta sensació no es correspongui
del tot amb la realitat ja que, per tal que la obra sigui consistent, en realitat l'usuari està fortament
guiat i condicionat en les seves eleccions.
4 Això compliria un dels aspectes descrits per Guillem Bou quan parla del “Principi de vitalitat”, en què
proposa la utilització de diferents elements que ajudin a crear la il·lusió que el producte té vida pròpia,
fent que s'augmenti la immersió de l'usuari en l'ambient proposat.
Narrativa interactiva - Pràctica
per Jordi Zango Novell (jzango@uoc.edu) 4
5. 3. Disseny de la interactivitat
3. Disseny de la interactivitat
La interfície d'usuari representa un hipotètic lloc d'atenció de trucades en un
centre d'emergències mèdiques (veure esbós). La idea és facilitar la immersió en la
història i que el disseny estimuli la participació de l'usuari.
El nucli de la interfície és l'escriptori, des d'on es té accés a totes les opcions de
l'aplicació.
El monitor, en el centre de la pantalla, és l'element principal. En ell, l'usuari pot
accedir a la relació de casos que ja ha atès i veure el percentatge completat del test
que correspon a cada cas, així com el nivell d'encert de les respostes donades. Fent
clic als casos que hi apareixen, es pot accedir de nou a la trucada que origina el cas
i completar el test o canviar les respostes.
El telèfon sona quan es rep una trucada d'emergència i, a més, també s'hi encén
una petita llum. Al clicar damunt, apareix una finestra amb una llista dels títols de
tots els casos d'emergència disponibles. Cada cas té una petita marca que indica si
ha estat activat o no (si ja s'ha vist). L'usuari pot clicar damunt de cada cas de la
llista per a activar-lo. Quan s'activa el cas es pot veure el text corresponent a la
trucada que, com si fos una trucada real, es pot escoltar al respondre al telèfon.
Narrativa interactiva - Pràctica
per Jordi Zango Novell (jzango@uoc.edu) 5
Iŀlustració 1: Esbós dels elements principals de la interfície d'usuari, amb una proposta de la seva possible distribució en
la pantalla.
6. 3. Disseny de la interactivitat
Quan es respon a una trucada, l'estat del cas queda registrat com en procés i ja
apareix en la llista de casos visibles al monitor. Les trucades poden ser activades
per l'usuari i també es produeixen aleatòriament cada cert temps, per a estimular
la interactivitat.
Des de la pantalla que descriu una emergència es pot accedir als vídeos i apartats
dels manuals que estiguin relacionats amb l'emergència plantejada.
En la part superior de la pantalla es pot veure el marcador amb la puntuació
acumulada per l'usuari en xifres grans, envoltat per un fonendoscopi.
Cada cert temps, també de forma aleatòria, es poden veure diferents clips de
vídeo al petit televisor. En cas de clicar al televisor, s'obre una nova finestra en la
que es pot veure el vídeo actiu (cas que n'hi hagi algun en el moment de clicar) i
una llista dels vídeos disponibles, per a que puguin ser triats.
Hi han diferents ítems que donen accés a diferents manuals divulgatius:
• El llibre de “Manual de primers auxilis”.
• El cartell de l'ambulància que activa un manual que mostra l'equipament
d'una ambulància medicalitzada i la tasca que s'hi desenvolupa.
• El cartell amb un esquelet humà que dóna accés a un petit manual
d'anatomia.
• El llibre “Les vacunes” que explica les principals malalties que poden
provocar epidèmies i com es fa la seva prevenció.
• El llibre “Una dieta saludable”, amb les característiques d'alguns aliments i
consells per a menjar de forma saludable.
• La farmaciola, que mostra un llistat del que ha de contenir una farmaciola
domèstica ben equipada.
A la part inferior pot trobar-se un control que permet augmentar o disminuir el
volum del so.
Narrativa interactiva - Pràctica
per Jordi Zango Novell (jzango@uoc.edu) 6
7. 4. Disseny de la navegació
4. Disseny de la navegació
S'ha procurat que la navegació sigui el més senzilla possible5
.
5 Tal i com s'ha explicat anteriorment, s'ha de procurar que la complexitat del producte sigui adequada
per a la majoria dels usuaris a qui està destinada l'aplicació (en aquests cas nens o nenes de 10 a 12
anys).
Narrativa interactiva - Pràctica
per Jordi Zango Novell (jzango@uoc.edu) 7
8. 5. Disseny lògic
5. Disseny lògic
Pantalla d'inici: “La centraleta”
Es mostra una taula, a mode d'escriptori, amb una pantalla d'ordinador, un
telèfon, un petit televisor i d'altres elements que conformen un hipotètic lloc
de treball d'un operador o operadora en un centre d'emergències.
BMP: centraleta.png
SCO: punts acumulats per l'usuari .
IDLE1: FLI-P: llum_telèfon.fli, WAV: timbre.mp3 (el telèfon sona i s'encén la
llum).
IDLE2: AVI-P: vídeo_XX.avi (es mostra un vídeo al televisor, de forma
aleatòria).
IDLE3: FLI-P: sirena.fli, WAV: sirena.mp3 (s'activa la sirena de l'ambulància en
el cartell).
IDLE4: FLI-P: boca.fli, WAV: clac-clac.mp3 (la boca de l'esquelet del cartell
s'obre i tanca).
Zones sensibles:
1) RAT: Monitor de l'ordinador
ROL: ETI: “Obrir cas d'emergència”
CLIC: Monitor de l'ordinador->Pantalla 2 -
“Emergència”[emergència_seleccionada] (C) (Hi ha emergència seleccionada).
2) RAT: Telèfon
ROL: ETI: “Activar cas d'emergència”, WAV: beep.mp3
CLIC: Telèfon->Pantalla 3 - “Llista d'emergències”
3) RAT: Manual de primers auxilis.
ROL: ETI: “Consultar manual de primers auxilis”
CLIC: Manual de primers auxilis->Pantalla 4 -
“Manuals”[nocions_bàsiques_primers_auxilis].
4) RAT: Control de volum.
ROL: ETI: “Puja o baixa el volum”.
CLIC: Controlar volum.
5) RAT: Televisor.
ROL: AVI-P: neu_televisor.avi (En la pantalla del televisor es mostra i s'escolta
la neu característica quan es sintonitza un televisor).
CLIC: Televisor->Pantalla 5 - “Vídeos” [video_actiu].
6) RAT: Cartell ambulància.
ROL: ETI: “Veure interior d'una ambulància”.
CLIC: Cartell ambulància->Pantalla 4 - “Manuals“[interior_ambulància].
7) RAT: Cartell esquelet.
Narrativa interactiva - Pràctica
per Jordi Zango Novell (jzango@uoc.edu) 8
9. 5. Disseny lògic
ROL: ETI: “Veure manual d'anatomia”.
CLIC: Cartell esquelet->Pantalla 4 - “Manuals”[anatomia].
8) RAT: Farmaciola.
ROL: ETI: “Què ha de contenir una farmaciola”.
CLIC: Farmaciola->Pantalla 4- “Manuals“[contingut_farmaciola].
9) RAT: Llibre “Una dieta saludable”.
ROL: ETI: “Què i com hem de menjar”.
CLIC: Llibre “Una dieta saludable”->Pantalla 4 - “Manuals“[dieta_saludable].
10) RAT: Llibre “Les vacunes”.
ROL: ETI: “Què són les vacunes?”.
CLIC: Llibre “Les vacunes”->Pantalla 4 - “Manuals“[vacunes].
Pantalla 2: “Emergència”
(Aquesta és una descripció genèrica de l'aspecte de la finestra utilitzada per a
mostrar els casos d'emergència. Existeixen 10 casos d'emergència a resoldre.)
En una finestra emergent, apareix el títol del cas de l'emergència, acompanyat
d'una foto que ajuda a descriure la situació. Es mostra el text de la trucada, i
també una sèrie de 10 preguntes tipus verdader/fals que l'usuari ha de
completar i que li donaran una o altra puntuació en funció de l'encert de les
respostes.
BMP-P: (imatge descriptiva de l'emergència)
TXT0: (reproducció del que diu la persona que truca al servei d'emergència).
TXT1: (enunciat de la pregunta 1, a determinar per l'especialista en primers
auxilis).
..
TXT10: (enunciat de la pregunta 10, a determinar per l'especialista en primers
auxilis).
Zones sensibles:
1) RAT: Control verdader/fals (per a pregunta 1).
CLIC: Canvia estat del control.
... ... (definició de zona sensible similar per a la resta dels controls, per a les
preguntes 2 a 9)
10) RAT: Control verdader/fals (per a pregunta 10).
CLIC: Canviar estat del control.
11) RAT: Llibre.
ROL: ETI: “Consultar manual”.
CLIC: Llibre->Pantalla 4 - “Manuals”(veure manual relacionat amb
l'emergència).
12) RAT: Càmera de vídeo.
Narrativa interactiva - Pràctica
per Jordi Zango Novell (jzango@uoc.edu) 9
10. 5. Disseny lògic
ROL: ETI: “Veure vídeo”.
CLIC: Càmera de vídeo->Pantalla 5 - “Vídeos”(veure vídeo relacionat amb
l'emergència) (C) (hi ha vídeo relacionat).
13) RAT: Botó tancar.
CLIC: EXE: Valorar respostes i actualitzar marcador de punts aconseguits i
percentatge completat, Botó tancar->Pantalla d'inici “La centraleta”
Pantalla 3: “Llista d'emergències”
En una finestra semitransparent que emergeix, apareixen els títols de tots els
casos de emergències, com si fos una mena d'índex. A cada títol l'acompanya
una senyal que indica si ja ha estat activat.
TXT: “Casos d'emergència” (títol)
Zones sensibles:
1) RAT: TXT: “Ofegament piscina” ICN: emergència_activada.png (C) (ja ha estat
activada)
CLIC: TXT: “Ofegament piscina”->Pantalla “Emergències”[Ofegament].
... ... (títols d'emergències del 2 al 9)
10) RAT: TXT: “Accident de trànsit en moto”
CLIC: TXT: “Accident de trànsit en moto”->Pantalla
“Emergències”[Accident_moto].
11) RAT: Botó tancar.
CLIC: Tanca finestra.
Pantalla 4: “Manuals”
En una finestra emergent, apareix el text global d'ajuda, encapçalat pels títols
dels diferents apartats, com si fos una mena d'índex. Clicant damunt de
cadascun dels títols, el text es desplaça a l'apartat corresponent. Els manuals
contenen text i imatges.
També es pot accedir als manuals indicant a quin apartat ha de desplaçar-se
el focus quan s'obre la finestra.
TXT: “Manuals” (títol)
Zones sensibles:
1) RAT: TXT: “Nocions bàsiques de primers auxilis”
CLIC: TXT: “Nocions bàsiques de primers auxilis”->Apartat “Nocions bàsiques
de primers auxilis”.
... ... (títols de manuals del 2 al 5)
Narrativa interactiva - Pràctica
per Jordi Zango Novell (jzango@uoc.edu) 10
11. 5. Disseny lògic
6) RAT: TXT: “Contingut d'una farmaciola”
CLIC: TXT: “Contingut d'una farmaciola”->Apartat “Contingut d'una
farmaciola“.
7) RAT: Botó índex.
CLIC: Botó índex->Apartat “Índex”.
8) RAT: Botó tancar.
CLIC: Tancar finestra.
Pantalla 5: “Vídeos”
Apareix una finestra emergent dividida bàsicament en dues parts. Una part
més gran, de proporcions 4:3, destinada a mostrar els vídeos. A la dreta, en
una divisió més estreta, es mostren tots els títols dels vídeos disponibles, per
a poder seleccionar-los.
Si s'accedeix a sense especificar cap vídeo, no n'hi haurà cap d'actiu. Si s'ha
accedit des del televisor quan aquest n'està reproduint un, llavors es veurà el
vídeo que estava en reproducció.
TXT: “Vídeos” (títol).
AVI-P: (vídeo seleccionat).
Zones sensibles:
1) RAT: (els controls de reproducció del vídeo).
CLIC: (les funcions habituals).
2) RAT: TXT: “La recuperació cardiopulmonar”.
CLIC: TXT: “La recuperació cardiopulmonar”->Vídeo “La recuperació
cardiopulmonar”.
... ... (títols d'altres vídeos disponibles)
6) RAT: TXT: “La maniobra de Heimlich”.
CLIC: TXT: “La maniobra de Heimlich”->Vídeo “La maniobra de Heimlich“.
7) RAT: Botó tancar.
CLIC: Tanca finestra.
Narrativa interactiva - Pràctica
per Jordi Zango Novell (jzango@uoc.edu) 11
12. 6. Fonts de consulta
6. Fonts de consulta
• Bou Bauzá, Guillem. El guion multimedia (1997). Ed.Anaya Multimedia.
7. Llicència
Aquest treball és obra de Jordi Zango Novell, amb llicència Creative Commons
Atribució-NoComercial-CompartirIgual BY-NC-SA 3.0 Unported.
Narrativa interactiva - Pràctica
per Jordi Zango Novell (jzango@uoc.edu) 12