Prctica

Narrattiva interactiva

gui interactiu multimdia

Narrativa Interactiva

Prctica

1. Presentaci...................................................................... 3

2. Disseny de la interactivitat................................................ 5

3. Disseny de la nevagaci................................................... 7

4. Disseny lgic..................................................................... 11

5. Recursos............................................................................ 16

-2-

Jaume Villarreal Quintana - Grau en Multimdia

gui interactiu multimdia

ndex

Narrativa Interactiva

Prctica

presentaci
-3-

Jaume Villarreal Quintana - Grau en Multimdia

3 sn MULTITUD

Narrativa Interactiva

Prctica

presentaci

Us presentem el portal web de lobra de teatre 3 sn multitud, basada en el gui realitzat per a la PAC2 de la matria Narrativa Interactiva impartida per la UOC dins del Grau en Multimdia. Lobra condensa en una estona intensa la histria den Max i el seu amor impossible per la Sara, que des de sempre ha dut una doble vida amb llex. Tots tres seran els puntals duna histria 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 lobserven. Per aix laposta del director i la companyia ha estat crear un format que interactus directament amb el pblic. Per aquest motiu han treballat la histria sobre dos guions diferents: un gui que desenvolupa la histria com un drama i un gui que explica la mateixa histria des de la comdia. El pblic, des del seu singular punt de vista, ser qui decideixi quin ser el tractament de la histria: un drama o una comdia. Entre les diverses plataformes de difusi hi trobem el website de lobra. Aquest lloc web es convertir en un espai de presentaci de tots els estrats de lobra (el director, els actors, la histria,...), en un espai multimdia on poder interactuar amb la companyia i tamb en un espai dinformaci i serveis (consulta de cartellera, venda dentrades,...). Pensada dentrada per al gran pblic, aquesta pgina web ser de gran inters 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 multimdia.

-4-

Jaume Villarreal Quintana - Grau en Multimdia

Narrativa Interactiva

-5Prctica

Jaume Villarreal Quintana - Grau en Multimdia

disseny de la interactivitat

quina relaci sestableix entre lusuari i laplicaici?

Narrativa Interactiva

Prctica

La intenci primera del nostra projecte s oferir un suport multimdia al desenvolupament de lobra. El plantejament del director i la companyia parteix duna presmissa: fer partcep a lespectador del desenvolupament de la funci. Per aix ofereixen dos plantejaments diferents, dramtic i de comdia, i tres possibles finals per a lobra. Lespectador ser qui decideixi quin s el to i el final de cada funci a travs de portal. Per aix cal cuidar molt la relaci entre lusuari i laplicaci a tots nivells. El nostre projecte ha de ser capa doferir en primer terme una manifesta unitat comunicativa. Aix permetr a lusuari accedir a la informaci mitjanant lharmonitzaci de diversos elements a travs de diferents codis dins la interfcie. Es tindr en compte:

disseny de la interactivitat

que el contingut tingui una integraci harmnica. que presenti una organitzaci lgica 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 daccessibilitat dintefcie. Es tindr en compte:

lorganitzaci dels continguts, com a elements estructurals. el grau daccessibilitat 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:

ls que es fa del text escrit. la presncia darxius de so per reforar la unitat informativa. la presncia darxius de vdeo que complementin la informaci. ls que es fa del material fotogrfic.

Es tindr en compte la seva consistncia, s a dir, la impressi que cada pgina o part del contingut pertany a la mateixa web grcies a la integraci lgica i ordenada de la navegaci, la paleta cromtica, les formes, les icones i la tipografia. Es cuidar:

el nivell de sofisticaci de la interfcie. el comportament racional i previsible de la web. la consistncia del portal en la seva globalitat.
Nosaltres cerquem un producte que equilibri informaci i interactivitat. Per aix sintentar cuidar:

les possibilitats dinteracci entre lusuari i continguts. la possibilitat de construcci de diferents itineraris dinformaci.

-6-

Jaume Villarreal Quintana - Grau en Multimdia

Narrativa Interactiva

Prctica

disseny de la navegaci
-7-

Jaume Villarreal Quintana - Grau en Multimdia

com es relacionen lusuari i laplicaci

Narrativa Interactiva

Prctica

La intenci primera del nostra projecte s oferir un suport multimdia al desenvolupament de lobra. El plantejament del director i la companyia parteix duna presmissa: fer partcep a lespectador del desenvolupament de la funci. Per aix ofereixen dos plantejaments diferents, dramtic i de comdia, i tres possibles finals per a lobra. Lespectador ser qui decideixi quin s el to i el final de cada funci a travs del seu vot.

disseny de la navegaci

El nostre projecte es basa en un model dorganitzaci mixt, establert a partir del disseny de navegaci dels nostres mens. MODEL RETICULAR El men superior recull totes les entrades de contingut amb qu pot interactuar lusuari. Aquestes entrades resten sempre disposici de lusuari perqu aquest pugui accedir all on vulgui independentment del bloc dinformaci/interacci on es trobi. Sempre sha intentat evitar el que nosaltres hem anomenat la Sndrome IKEA: obligar a lusuari a passar per all on el dissenaydor vol que passi. MODEL INDEXAT Cada entrada de men cont un bloc dinformaci/interacci. Un cop accedit a aquest bloc lusuari pot optar per accedir a qualsevol altre espai del projecte. NAVEGACI EXTERNA El men inferior permet a lusuari 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 segents enllaos:

DIAGRAMA_00 -8-

DIAGRAMA_00 DIAGRAMA_01 DIAGRAMA_02

Jaume Villarreal Quintana - Grau en Multimdia

Narrativa Interactiva

Prctica

disseny de la navegaci

DIAGRAMES DE FLUX Podeu trobar els diagrames de flux en els segents enllaos:

DIAGRAMA_01 -9-

DIAGRAMA_00 DIAGRAMA_01 DIAGRAMA_02

Jaume Villarreal Quintana - Grau en Multimdia

Narrativa Interactiva

Prctica

disseny de la navegaci

DIAGRAMES DE FLUX Podeu trobar els diagrames de flux en els segents enllaos:

DIAGRAMA_02 - 10 -

DIAGRAMA_00 DIAGRAMA_01 DIAGRAMA_02

Jaume Villarreal Quintana - Grau en Multimdia

Narrativa Interactiva

Prctica

- 11 -

Jaume Villarreal Quintana - Grau en Multimdia

descripci de la web clic a clic

disseny lgic

Narrativa Interactiva

Prctica

introducci #1
DESCRIPCI Sobre el tel dun teatre i apareixen dues mscares de teatre. A sobre shi emmarquen les cares den Max, la Sara i llex. A sota de cada marc hi ha els botons de reproducci de vdeo. A la part inferior de la interfcie hi apareixen dos botons amb text: La vida s un drama i La vida s una comdia. CONTINGUT Cada personatge explica alguns detalls sobre com va viure les situacions que es desenvolupen a lobra, els seus sentiments, els seus records. Aquests arguments poden ajudar a lusuari a triar entre les dues opcions. MULTIMDIA Vdeo per a cada personatge. INTERACTIVITAT Lusuari pot interactuar sobre dos elements:

els vdeos, que pot reproduir, pausar, aturar i tornar a visionar. els botons que donen accs a la interfcie principal.
A partir daqu lusuari podr optar per accedir a una interfcie en qu lobra es tracta com un drama o b com una comdia. Ambdues interfcies (dramtica i cmica) 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 lobra sempre es mantenen.

interfcie principal #2
DESCRIPCI La interfcie principal presenta la barra de navegaci a la part superior i la barra de navegaci externa a la part inferior dreta. El logotip de lobra apareix a la part superior esquerra. A sota del logo sempre hi sern visibles els botons [INICI] i [CANVIA]. Aquests elements es mantenen sempre inalterables en totes les configuracions.

Int. Dramtica: composici de fons slid negre ms mscares de teatre en perfil blanc i semidegradat a
lesquerra (a partir dara 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. Comdia: fons slid blanc ms mscares de teatre en perfil negre i semidegradat a lesquerra (a partir
dara composici C), foto central dels tres personatges en color. Sota la imatge hi apareix el text LA VIDA CONTINGUT S UNA COMDIA.

La interfcie principal presenta una barra de navegaci a la part superior i una barra de xarxes socials a la part inferior esquerra. INTERACTIVITAT

Lusuari pot interactuar sobre dos elements:

els botons de la barra de navegaci: [lobra] [la companyia] [galeria] [el teu final] [30] [agenda] [entrades]. els botons de la barra de navegaci externa: [Facebook] [Twitter] [Blog] [YouTube]. lobra #3
DESCRIPCI Apareix la configuraci bsica establerta (logo i barres de navegaci).

Int. Dramtica: composici C, foto lateral en blanc i negre duna escena al costat de la sinopsi emmarcada. Int. Comdia: composici D, foto lateral en color duna escena al costat de la sinopsi emmarcada.

- 12 -

Jaume Villarreal Quintana - Grau en Multimdia

Narrativa Interactiva

Prctica

CONTINGUT

Sinopsi de lobra.

INTERACTIVITAT

Lusuari pot accedir a quasevol dels continguts indexats a les entrades dels mens.

la companyia #4
DESCRIPCI Apareix la configuraci bsica establerta (logo i barres de navegaci).

Int. Dramtica: composici C, tira fotogrfica de fotomaton amb la foto del director i els tres actors situada a
la part esquerra. Fotografia en B/N a la part central dun noment dels assajos.

Int. Comdia: composici D, tira fotogrfica de fotomaton amb la foto del director i els tres actors situada a la
CONTINGUT part esquerra. Fotografia en B/N a la part central dun noment dels assajos.

Breu biografia, fotografia i currculum de cada membre de la companyia. INTERACTIVITAT Lusuari pot fer clic sobre les fotos per obrir una finestra amb la informaci de cada membre de la companyia. Lusuari pot accedir a quasevol dels continguts indexats a les entrades dels mens.

galeria #5
DESCRIPCI Apareix la configuraci bsica establerta (logo i barres de navegaci).

CONTINGUT bambalines.

Int. Dramtica: composici C, matriu de 3x3 amb fotos miniatures en B/N (thumbnails). Int. Comdia: composici D, matriu de 3x3 amb fotos miniatures en color (thumbnails) .

Nou galeries dimatges amb fotografies de diferents moments de la funci i de diverses escenes dels actors entre MULTIMDIA

Galeries dimatges i visor de fotografies. INTERACTIVITAT Lusuari pot fer clic sobre cadascuna de les miniatures per accedir a una galeria dimatges. Un cop fet el clic sobre a la part central un visor de fotografies que permet avanar, retrocedir, ampliar i tancar el visor. Lusuari pot accedir a quasevol dels continguts indexats a les entrades dels mens.

el teu final #6
DESCRIPCI Apareix la configuraci bsica establerta (logo i barres de navegaci).

Int. Dramtica: 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 lnia.

Int. Comdia: composici C, fotografia dels tres personatges. Cada foto presenta a sota una frase curta del
CONTINGUT personatge. Sota la composici de les fotografies hi ha una aplicaci amb tres opcions per votar en lnia.

Aplicaci interactiva de selecci dopcions. Fotografies i cites dels personatges. La bateria de cites es carrega aleatriament en la caixa dinmica que hi ha sota cada foto i varien en funci del tipus dinterfcie escollida (interfcie dramtica o interfcie de comdia).

- 13 -

Jaume Villarreal Quintana - Grau en Multimdia

Narrativa Interactiva

Prctica

INTERACTIVITAT

La companyia ofereix la possibilitat descollir el final de lobra que es veur en la segent funci. Es pot escollir entre el final a partir duna decisi den Max, de la Sara o de llex, per en cap cas sexplica quina s la decisi que prenen els personatges per no adelantar esdeveniments. Lusuari pot accedir a quasevol dels continguts indexats a les entrades dels mens. Aspectes a tenir en compte:

per poder escollir el final cal assistir a la funci, per aix noms es pot votar si sha fet la compra de lentrada
on-line.

laplicaci interactiva inclou una caixa de validaci on shi ha descriure el codi incls en lentrada virtual. laplicaci interactiva cont un bot que redirigeix a la pgina de compra dentrades.
DESCRIPCI

30 segons #7

Apareix la configuraci bsica establerta (logo i barres de navegaci).

CONTINGUT

Int. Dramtica: composici C, matriu de 5x5 amb miniatures de vdeos (thumbnails). Formulari denviament. Int. Comdia: composici D, matriu de 5x5 amb miniatures de vdeos (thumbnails). Formulari denviament.

La interfcie presenta una graella composada per vdeos enviats pels mateixos usuaris i espectadors. Els vdeos han de durar 30 segons i volen recollir sensacions, pensaments, intencions, qualsevol reflexi sorgida de la funci. Sota la composici de miniatures de vdeo hi ha un formulari denviament on els usuaris poden introduir ladrea del seu vdeo per enviar-los als administradors del website. MULTIMDIA Vdeos gravats pels usuaris i seguidors i pujats a la Xarxa. INTERACTIVITAT Lusuari pot gravar un vdeo i pujar-lo al seu servidor, enviant la URL a travs del formulari que hi ha a peu de pgina. Els adminsitradors validaran lenlla, el contingut i la durada i aquest quedar penjat a la pgina. Daquesta manera els espectadors tamb poden interactuar amb la companyia i la resta dusuaris/espectadors retornant de manera pblica el seu feedback. Lusuari pot accedir a quasevol dels continguts indexats a les entrades dels mens. DESCRIPCI

agenda #8

Apareix la configuraci bsica establerta (logo i barres de navegaci).

CONTINGUT

Int. Dramtica: composici C, mapa de Catalunya. Agenda en format calendari. Int. Comdia: composici D, mapa de Catalunya. Agenda en format calendari.

La pgina presenta al ccentre de la composic un mapa de Catalunya en format dinfografia dinmica. Passant el ratol per sobre dels marcadors de localitat que apareixen al mapa sobren finestres emergents que presenten la informaci concreta sobre el lloc, els horaris i altres dades dinters de cada funci. A la part dreta hi ha una agenda en format calendari on shi poden veure acolorides les dates de les segents funcions.

- 14 -

Jaume Villarreal Quintana - Grau en Multimdia

Narrativa Interactiva

Prctica

MULTIMDIA

Infografia dinmica i calendari. INTERACTIVITAT Lusuari pot accedir a la informaci de dues maneres diferents:

picant sobre les dates acolorides a lagenda/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 lagenda les dades de lesdeveniment.

interactuant directament amb la infografia dinmica del mapa. El ratol detecta les zones actives del mapa i fa
visibles de les caixes emergents amb la informaci corresponent. Lusuari pot accedir a quasevol dels continguts indexats a les entrades dels mens. DESCRIPCI

entrades #9

Apareix la configuraci bsica establerta (logo i barres de navegaci).

CONTINGUT

Int. Dramtica: composici C, formulari de compra dentrades on-line al centre de la mateixa. Int. Comdia: composici D, formulari de compra dentrades on-line al centre de la mateixa.

La pgina presenta una aplicaci en lnia que permet realitzar la compra dentrades mitjanant un assistent. A sota de lassistent de compra virtual hi ha un bot que cont la pregunta: vols escollir el final?. Aquest bot redirigeix a lusuari a la pgina [EL TEU FINAL]. INTERACTIVITAT Lusuari interactua amb lassistent de compra per adquirir el producte desitjat. Lusuari pot accedir a quasevol dels continguts indexats a les entrades dels mens. DESCRIPCI

xarxes socials #10

Apareixen dins de la barra inferior esquerra, tant a la interfcie dramtica com a la de comdia. Responen al model de navegaci externa. CONTINGUT Aquests enllaos no ofereixen contingut propi dins del projecte, per aquest motiu queden agrupats en aquest espai. Cadascun dels enllaos de men redirigeixen respectivament a continguts presents Facebook, Twitter, Wordpress i Youtube. INTERACTIVITAT

Lusuari pot accedir a qualsevol dels continguts propis de la companyia i externs al projecte.

- 15 -

Jaume Villarreal Quintana - Grau en Multimdia

Narrativa Interactiva

Prctica

Salaverra R. Aproximacin al concepto de multimedia desde los planos comunicativo e instrumental [article en lnia] WEB [data de consulta: 15 de maig de htm > 2012] < http://www.ucm.es/info/perioI/Period_I/EMP/Numer_07/7-5-Inve/7-5-13.

Material docent - UOC

- 16 -

Jaume Villarreal Quintana - Grau en Multimdia

recursos