Narrattiva interactiva
guió interactiu multimèdia
Pràctica
Pràctica
2. Disseny de la interactivitat................................................ 5 3. Disseny de la nevagació................................................... 7
4. Disseny lògic..................................................................... 11
5. Recursos............................................................................ 16
-2-
índex
1. Presentació...................................................................... 3
guió interactiu multimèdia
Narrativa Interactiva
Jaume Villarreal Quintana - Grau en Multimèdia
-3-
3 són MULTITUD
Pràctica
presentació
Narrativa Interactiva
Jaume Villarreal Quintana - Grau en Multimèdia
Narrativa Interactiva
Pràctica
presentació
Us presentem el portal web de l’obra de teatre “3 són multitud“, basada en el guió realitzat per a la PAC2 de la matèria “Narrativa Interactiva“ impartida per la UOC dins del Grau en Multimèdia. L’obra condensa en una estona intensa la història d’en Max i el seu amor impossible per la Sara, que des de sempre ha dut una doble vida amb l’Àlex. Tots tres seran els puntals d’una història carregada de passió. Però la vida es pot viure des de moltes òptiques, un fet singular que passa al nostre voltant té tantes interpretacions com mirades l’observen. Per això l’aposta del director i la companyia ha estat crear un format que interactués directament amb el públic. Per aquest motiu han treballat la història sobre dos guions diferents: un guió que desenvolupa la història com un drama i un guió que explica la mateixa història des de la comèdia. El públic, des del seu singular punt de vista, serà qui decideixi quin serà el tractament de la història: un drama o una comèdia. Entre les diverses plataformes de difusió hi trobem el website de l’obra. Aquest lloc web es convertirà en un espai de presentació de tots els estrats de l’obra (el director, els actors, la història,...), en un espai multimèdia on poder interactuar amb la companyia i també en un espai d’informació i serveis (consulta de cartellera, venda d’entrades,...). Pensada d’entrada per al gran públic, aquesta pàgina web serà de gran interès per aquelles persones que es considerin amants del teatre i dels seus nous formats, així com de les moltes possibilitats que ofereixen les aplicacions interactives multimèdia.
-4-
Jaume Villarreal Quintana - Grau en Multimèdia
-5-
quina relació s’estableix entre l’usuari i l’aplicaició?
disseny de la interactivitat
Narrativa Interactiva Pràctica
Jaume Villarreal Quintana - Grau en Multimèdia
Narrativa Interactiva
Pràctica
La intenció primera del nostra projecte és oferir un suport multimèdia al desenvolupament de l’obra. El plantejament del director i la companyia parteix d’una presmissa: fer partícep a l’espectador del desenvolupament de la funció. Per això ofereixen
disseny de la interactivitat
dos plantejaments diferents, dramàtic i de comèdia, i tres possibles finals per a l’obra. L’espectador serà qui decideixi quin és el to i el final de cada funció a través de portal. Per això cal cuidar molt la relació entre l’usuari i l’aplicació a tots nivells. El nostre projecte ha de ser capaç d’oferir en primer terme una manifesta unitat comunicativa. Això permetrà a l’usuari accedir a la informació mitjançant l’harmonització de diversos elements a través de diferents codis dins la interfície. Es tindrà en compte:
• que el contingut tingui una integració harmònica. • que presenti una organització lògica dels continguts. Una de les principals finalitats del nostre projecte serà la gestió de la informació. Es vetllarà perquè els continguts siguin de qualitat, tant a nivell informatiu com a nivell d’accessibilitat d’intefície. Es tindrà en compte:
• l’organització dels continguts, com a elements estructurals. • el grau d’accessibilitat que presenten els continguts.
Es cuidaran les diferents combinacions que afectin al text, la imatge i el so en els seus diferents formats. Es treballarà per equilibrar:
• • • •
l’ús que es fa del text escrit. la presència d’arxius de so per reforçar la unitat informativa. la presència d’arxius de vídeo que complementin la informació. l’ús que es fa del material fotogràfic.
Es tindrà en compte la seva consistència, és a dir, la impressió que cada pàgina o part del contingut pertany a la mateixa web gràcies a la integració lògica i ordenada de la navegació, la paleta cromàtica, les formes, les icones i la tipografia. Es cuidarà:
• el nivell de sofisticació de la interfície. • el comportament racional i previsible de la web. • la consistència del portal en la seva globalitat. Nosaltres cerquem un producte que equilibri informació i interactivitat. Per això s’intentarà cuidar:
• les possibilitats d’interacció entre l’usuari i continguts. • la possibilitat de construcció de diferents itineraris d’informació.
-6-
Jaume Villarreal Quintana - Grau en Multimèdia
-7-
com es relacionen l’usuari i l’aplicació
Pràctica
disseny de la navegació
Narrativa Interactiva
Jaume Villarreal Quintana - Grau en Multimèdia
Narrativa Interactiva
Pràctica
La intenció primera del nostra projecte és oferir un suport multimèdia al desenvolupament de l’obra. El plantejament del director i la companyia parteix d’una presmissa: fer partícep a l’espectador del desenvolupament de la funció. Per això ofereixen
disseny de la navegació
dos plantejaments diferents, dramàtic i de comèdia, i tres possibles finals per a l’obra. L’espectador serà qui decideixi quin és el to i el final de cada funció a través del seu vot.
El nostre projecte es basa en un model d’organització mixt, establert a partir del disseny de navegació dels nostres menús. MODEL RETICULAR El menú superior recull totes les entrades de contingut amb què pot interactuar l’usuari. Aquestes entrades resten sempre disposició de l’usuari perquè aquest pugui accedir allà on vulgui independentment del bloc d’informació/interacció on es trobi. Sempre s’ha intentat evitar el que nosaltres hem anomenat “la Síndrome IKEA“: obligar a l’usuari a passar per allà on el dissenaydor vol que passi. MODEL INDEXAT Cada entrada de menú conté un bloc d’informació/interacció. Un cop accedit a aquest bloc l’usuari pot optar per accedir a qualsevol altre espai del projecte. NAVEGACIÓ EXTERNA El menú inferior permet a l’usuari accedir a altres recursos relacionats amb el projecte que resideixen fora del mateix, xarxes socials principalment. DIAGRAMES DE FLUX Podeu trobar els diagrames de flux en els següents enllaços:
DIAGRAMA_00 -8-
• DIAGRAMA_00 • DIAGRAMA_01 • DIAGRAMA_02
Jaume Villarreal Quintana - Grau en Multimèdia
Narrativa Interactiva
Pràctica
disseny de la navegació
DIAGRAMES DE FLUX Podeu trobar els diagrames de flux en els següents enllaços:
DIAGRAMA_01 -9-
• DIAGRAMA_00 • DIAGRAMA_01 • DIAGRAMA_02
Jaume Villarreal Quintana - Grau en Multimèdia
Narrativa Interactiva
Pràctica
disseny de la navegació
DIAGRAMES DE FLUX Podeu trobar els diagrames de flux en els següents enllaços:
DIAGRAMA_02 - 10 -
• DIAGRAMA_00 • DIAGRAMA_01 • DIAGRAMA_02
Jaume Villarreal Quintana - Grau en Multimèdia
- 11 -
descripció de la web clic a clic
Pràctica
disseny lògic
Narrativa Interactiva
Jaume Villarreal Quintana - Grau en Multimèdia
Narrativa Interactiva
Pràctica
introducció #1 DESCRIPCIÓ
S’obre el teló d’un teatre i apareixen dues màscares de teatre. A sobre s’hi emmarquen les cares d’en Max, la Sara i l’Àlex. A sota de cada marc hi ha els botons de reproducció de vídeo. A la part inferior de la interfície hi apareixen dos botons amb text: “La vida és un drama“ i “La vida és una comèdia“. CONTINGUT
Cada personatge explica alguns detalls sobre com va viure les situacions que es desenvolupen a l’obra, els seus sentiments, els seus records. Aquests arguments poden ajudar a l’usuari a triar entre les dues opcions. MULTIMÈDIA
Vídeo per a cada personatge. INTERACTIVITAT
L’usuari pot interactuar sobre dos elements:
• els vídeos, que pot reproduir, pausar, aturar i tornar a visionar. • els botons que donen accés a la interfície principal. A partir d’aquí l’usuari podrà optar per accedir a una interfície en què l’obra es tracta com un drama o bé com una comèdia. Ambdues interfícies (dramàtica i còmica) tenen la mateixa estructura i continguts, canvien els colors de fons, la tipografia i les imatges. Les posicions de les barres de navegació i el logotip de l’obra sempre es mantenen.
interfície principal #2 DESCRIPCIÓ
La interfície principal presenta la barra de navegació a la part superior i la barra de navegació externa a la part inferior dreta. El logotip de l’obra apareix a la part superior esquerra. A sota del logo sempre hi seràn visibles els botons [INICI] i [CANVIA]. Aquests elements es mantenen sempre inalterables en totes les configuracions.
• Int. Dramàtica: composició de fons sòlid negre més màscares de teatre en perfil blanc i semidegradat a l’esquerra (a partir d’ara “composició D”), foto central dels tres personatges en escala de grisos. A sota de la imatge hi apareix el text “LA VIDA ÉS UN DRAMA“.
• Int. Comèdia: fons sòlid blanc més màscares de teatre en perfil negre i semidegradat a l’esquerra (a partir d’ara “composició C”), foto central dels tres personatges en color. Sota la imatge hi apareix el text “LA VIDA ÉS UNA COMÈDIA“.
CONTINGUT
La interfície principal presenta una barra de navegació a la part superior i una barra de xarxes socials a la part inferior esquerra.
INTERACTIVITAT
L’usuari pot interactuar sobre dos elements:
• els botons de la barra de navegació: [l’obra] [la companyia] [galeria] [el teu final] [30’’] [agenda] [entrades]. • els botons de la barra de navegació externa: [Facebook] [Twitter] [Blog] [YouTube]. l’obra #3 DESCRIPCIÓ
Apareix la configuració bàsica establerta (logo i barres de navegació).
• Int. Dramàtica: composició C, foto lateral en blanc i negre d’una escena al costat de la sinopsi emmarcada. • Int. Comèdia: composició D, foto lateral en color d’una escena al costat de la sinopsi emmarcada.
- 12 -
Jaume Villarreal Quintana - Grau en Multimèdia
Narrativa Interactiva
Pràctica
CONTINGUT
Sinopsi de l’obra.
INTERACTIVITAT
L’usuari pot accedir a quasevol dels continguts indexats a les entrades dels menús.
la companyia #4 DESCRIPCIÓ
Apareix la configuració bàsica establerta (logo i barres de navegació).
• Int. Dramàtica: composició C, tira fotogràfica de “fotomaton“ amb la foto del director i els tres actors situada a la part esquerra. Fotografia en B/N a la part central d’un noment dels assajos.
• Int. Comèdia: composició D, tira fotogràfica de “fotomaton“ amb la foto del director i els tres actors situada a la part esquerra. Fotografia en B/N a la part central d’un noment dels assajos.
CONTINGUT
Breu biografia, fotografia i currículum de cada membre de la companyia. INTERACTIVITAT
L’usuari pot fer clic sobre les fotos per obrir una finestra amb la informació de cada membre de la companyia. L’usuari pot accedir a quasevol dels continguts indexats a les entrades dels menús.
galeria #5 DESCRIPCIÓ
Apareix la configuració bàsica establerta (logo i barres de navegació).
• Int. Dramàtica: composició C, matriu de 3x3 amb fotos miniatures en B/N (thumbnails). • Int. Comèdia: composició D, matriu de 3x3 amb fotos miniatures en color (thumbnails) .
CONTINGUT
Nou galeries d’imatges amb fotografies de diferents moments de la funció i de diverses escenes dels actors entre bambalines.
MULTIMÈDIA
Galeries d’imatges i visor de fotografies. INTERACTIVITAT
L’usuari pot fer clic sobre cadascuna de les miniatures per accedir a una galeria d’imatges. Un cop fet el clic s’obre a la part central un visor de fotografies que permet avançar, retrocedir, ampliar i tancar el visor. L’usuari pot accedir a quasevol dels continguts indexats a les entrades dels menús.
el teu final #6 DESCRIPCIÓ
Apareix la configuració bàsica establerta (logo i barres de navegació).
• Int. Dramàtica: composició D, fotografia dels tres personatges. Cada foto presenta a sota una frase curta del personatge. Sota la composició de les fotografies hi ha una aplicació amb tres opcions per votar en línia.
• Int. Comèdia: composició C, fotografia dels tres personatges. Cada foto presenta a sota una frase curta del personatge. Sota la composició de les fotografies hi ha una aplicació amb tres opcions per votar en línia.
CONTINGUT
Aplicació interactiva de selecció d’opcions. Fotografies i cites dels personatges. La bateria de cites es carrega aleatòriament en la caixa dinàmica que hi ha sota cada foto i varien en funció del tipus d’interfície escollida (interfície dramàtica o interfície de comèdia).
- 13 -
Jaume Villarreal Quintana - Grau en Multimèdia
Narrativa Interactiva
Pràctica
INTERACTIVITAT
La companyia ofereix la possibilitat d’escollir el final de l’obra que es veurà en la següent funció. Es pot escollir entre el final a partir d’una decisió d’en Max, de la Sara o de l’Àlex, però en cap cas s’explica quina és la decisió que prenen els personatges per no adelantar esdeveniments. L’usuari pot accedir a quasevol dels continguts indexats a les entrades dels menús. Aspectes a tenir en compte:
• per poder escollir el final cal assistir a la funció, per això només es pot votar si s’ha fet la compra de l’entrada on-line.
• l’aplicació interactiva inclou una caixa de validació on s’hi ha d’escriure el codi inclòs en l’entrada virtual. • l’aplicació interactiva conté un botó que redirigeix a la pàgina de compra d’entrades. 30 segons #7
DESCRIPCIÓ
Apareix la configuració bàsica establerta (logo i barres de navegació).
• Int. Dramàtica: composició C, matriu de 5x5 amb miniatures de vídeos (thumbnails). Formulari d’enviament. • Int. Comèdia: composició D, matriu de 5x5 amb miniatures de vídeos (thumbnails). Formulari d’enviament.
CONTINGUT
La interfície presenta una graella composada per vídeos enviats pels mateixos usuaris i espectadors. Els vídeos han de durar 30 segons i volen recollir sensacions, pensaments, intencions, qualsevol reflexió sorgida de la funció. Sota la composició de miniatures de vídeo hi ha un formulari d’enviament on els usuaris poden introduir l’adreça del seu vídeo per enviar-los als administradors del website. MULTIMÈDIA
Vídeos gravats pels usuaris i seguidors i pujats a la Xarxa. INTERACTIVITAT
L’usuari pot gravar un vídeo i pujar-lo al seu servidor, enviant la URL a través del formulari que hi ha a peu de pàgina. Els adminsitradors validaran l’enllaç, el contingut i la durada i aquest quedarà penjat a la pàgina. D’aquesta manera els espectadors també poden interactuar amb la companyia i la resta d’usuaris/espectadors retornant de manera pública el seu feedback. L’usuari pot accedir a quasevol dels continguts indexats a les entrades dels menús.
agenda #8
DESCRIPCIÓ
Apareix la configuració bàsica establerta (logo i barres de navegació).
• Int. Dramàtica: composició C, mapa de Catalunya. Agenda en format calendari. • Int. Comèdia: composició D, mapa de Catalunya. Agenda en format calendari.
CONTINGUT
La pàgina presenta al ccentre de la composicó un mapa de Catalunya en format d’infografia dinàmica. Passant el ratolí per sobre dels marcadors de localitat que apareixen al mapa s’obren finestres emergents que presenten la informació concreta sobre el lloc, els horaris i altres dades d’interès de cada funció. A la part dreta hi ha una agenda en format calendari on s’hi poden veure acolorides les dates de les següents funcions.
- 14 -
Jaume Villarreal Quintana - Grau en Multimèdia
Narrativa Interactiva
Pràctica
MULTIMÈDIA
Infografia dinàmica i calendari. INTERACTIVITAT
L’usuari pot accedir a la informació de dues maneres diferents:
• picant sobre les dates acolorides a l’agenda/calendari situada a la part dreta de la composició. Cada cop que es pica sobre una de les dates acolorides apareixen a la part inferior de l’agenda les dades de l’esdeveniment.
• interactuant directament amb la infografia dinàmica del mapa. El ratolí detecta les zones actives del mapa i fa visibles de les caixes emergents amb la informació corresponent. L’usuari pot accedir a quasevol dels continguts indexats a les entrades dels menús.
entrades #9
DESCRIPCIÓ
Apareix la configuració bàsica establerta (logo i barres de navegació).
• Int. Dramàtica: composició C, formulari de compra d’entrades on-line al centre de la mateixa. • Int. Comèdia: composició D, formulari de compra d’entrades on-line al centre de la mateixa.
CONTINGUT
La pàgina presenta una aplicació en línia que permet realitzar la compra d’entrades mitjançant un assistent. A sota de l’assistent de compra virtual hi ha un botó que conté la pregunta: “vols escollir el final?“. Aquest botó redirigeix a l’usuari a la pàgina [EL TEU FINAL]. INTERACTIVITAT
L’usuari interactua amb l’assistent de compra per adquirir el producte desitjat. L’usuari pot accedir a quasevol dels continguts indexats a les entrades dels menús.
xarxes socials #10
DESCRIPCIÓ
Apareixen dins de la barra inferior esquerra, tant a la interfície dramàtica com a la de comèdia. Responen al model de navegació externa. CONTINGUT
Aquests enllaços no ofereixen contingut propi dins del projecte, per aquest motiu queden agrupats en aquest espai. Cadascun dels enllaços de menú redirigeixen respectivament a continguts presents Facebook, Twitter, Wordpress i Youtube.
INTERACTIVITAT
L’usuari pot accedir a qualsevol dels continguts propis de la companyia i externs al projecte.
- 15 -
Jaume Villarreal Quintana - Grau en Multimèdia
Pràctica
recursos
Narrativa Interactiva
• Salaverría R. Aproximación al concepto de multimedia desde los planos comunicativo e instrumental [article en línia] WEB [data de consulta: 15 de maig de
2012] < http://www.ucm.es/info/perioI/Period_I/EMP/Numer_07/7-5-Inve/7-5-13. htm >
• Material docent - UOC
- 16 -
Jaume Villarreal Quintana - Grau en Multimèdia