Guió i disseny d'interactius 2005-06

Tema 1.- L'hipertxet i les aplicacions multimèdia interactives. Tema 4.- Aproximacionsdiverses al guió i disseny d'interactius: eficàcia i estímul. Guió i disseny d'interactius 2005-06 Tema 3.- Tipologia de les aplicacions interactives.

Hipertext: algunes idees • Precedents: • Bush. Memex: estructura no lineal de documents corresponent a la naturalesa associativa de l’esperit humà • Engelbart. Millora de les capacitats intel·lectuals de l’home • Nelson. Hipertext: qualsevol peça d’escriptura no lineal (Xanadu) • Els ordinadors possibiliten la realització pràctica dels hipertexts. • Hipertext: una nova forma d’accedir a la informació, movent-s’hi a través a base d’associacions.

Hipertext: navegar per associació • Associacions de qualsevol tipus: • Jean-Pierre Balpe: “ ...les hypertextes ont mis en évidence la navigation libre et son imposés comme moyen original d’appréhender l’information en permettant des associations entre informations, associations non nécessairement guidées par des nécessités déductives – de cause à effet ou de tout autre nature logique – mais par des nécessités purement intuitives ou d’associations d’idées”. • José Antonio Marina: “Interpretamos las palabras desde nuestros conocimientos lingüísticos, y también desde nuestros prejuicios, y también – lo que supone una complicación añadida – desde nuestro estado afectivo.”

Hipertext, nodes i enllaços • Hipertext: xarxa de peces interconnectades d’informació textual. • Nodes: les peces bàsiques, els documents elementals, atòmics, de la xarxa. Són unitats semàntiques: cada node expressa una sola idea o concepte. El criteri per a aquesta diferenciació atòmica és el significat des del punt de vista característic del contingut. • Enllaços: (links) són els elements de la xarxa que connecten els nodes entre ells permetent l’usuari desplaçar-se node a node. El criteri per a la tria d’enllaços és característic de l’hipertext (del seu autor). • Ancoratge: la petita porció del node origen (paraula, frase, fragment d’imatge) a la qual l’enllaç està connectat.

Semàntica de l’hipertext • La tria de nodes és un procés amb criteris relativament “objectius”: semàntica pròpia del contingut, presentació (mida de pantalla), funcionals (arxiu informàtic diferenciat) • La tria d’enllaços és sempre subjectiva. S’hi troba la càrrega de significat, la semàntica procedent del fet d’estructurar la informació com hipertext. • Una manera força elegant de considerar els hipertextos és com a contenidors a l’hora d’informació i de coneixement. Els nodes són el suport de la informació, els enllaços el suport del coneixement, els ancoratges l’articulació entre tots dos. La idea original és de M. Nanard.

Hipertext i hipermèdia • Multimèdia: digitalització comuna i integració conseqüent en un mateix suport informàtic, de text, so, gràfics, fotografies i imatges animades. • Hipermèdia: multimèdia gestionat com hipertext. Xarxa de peces interconnectades d’informació multimèdia. • La homogeneïtat pròpia de la digitalització fa que sigui estructuralment irrellevant el contingut dels arxius. • Parlarem indistintament d’hipertext i hipermèdia. • George P. Landow: “Puesto que el hipertexto, al poder conectar un pasaje de un discurso verbal a imágenes, mapas, diagramas y sonido tan fácilmente como a otro fragmento verbal, expande la noción de texto más allà de lo meramente verbal, no haré la distinción entre hipertexto e hipermedia.”

Sistemes i aplicacions • Sistema hipermèdia: eina generadora d’aplicacions hipertextuals: • Exemples: Director, Hypercard, Dreamweaver • Aplicació hipermèdia: xarxa específica d’informació multimèdia interconnectada. • Exemples: “Moi Cézanne” (CD-ROM), www.iua.upf.es (web) • Sinònims “ad-hoc”: • Document, hiperdocument • Aplicacions interactives multimèdia • Interactius multimèdia • Interactius • etc.

Aplicacions estructurades amb una finalitat • “Núvols” informatius, grans bases de dades amb informació difosa. Recuperació d’informació no condicionada. Coneixement adquirit per exploració lliure. • Aplicacions amb una finalitat específica: adreçades a la resolució de problemes específics i per tant amb una més gran estructuració i constriccions de navegació. • Aquesta estructuració permet controlar el ritme, l’aprenentatge, el gaudi de l’usuari. • Brenda Laurel: “...a system in which people is encouraged to do whatever they want will probably not produce pleasant experiences.” • David Riordan: “Infinite choice equals a database. Just because you can make a choice doesn’t mean it’s an interesting one.”

Autor/ lector i la pragmàtica de l’hipertext • Autor/lector: eix clau per analitzar la interactivitat. • Sinònims: • Autor: dissenyador, guionista, emissor. • Lector: usuari, participant, aprenent, receptor. • L’autor tria els enllaços entre nodes amb una intenció. Crea la semàntica pròpia de l’hipertext. • El lector rep en funció d’unes intencions i un entorn o context. • Pragmàtica de la comunicació interactiva.

Hipertext i bases de dades • Peces discretes d’informació amb atributs concrets: base de dades. • La majoria d’autors defineixen inicialment l’hipertext com una base de dades. Ben Shneiderman: ” ...a database that has active cross-references and allows the reader to "jump" to other parts of the database as desired. This makes the reading (and writing) process nonsequential.” • La navegació permet una exploració lliure i informal de l’espai de la informació. La interrogació o recuperació ofereix un accés formal i analític a base de la formulació de preguntes successives. • Les dues aproximacions són complementàries. • Exemple: la combinació de totes dues a la World Wide Web.

Organització i anàlisi dels hipertextos: idees • Contingut (inventio): informació de què consta el document. Nodes i enllaços de contingut. • Estructura (dispositio): organització en una xarxa determinada. Nodes i enllaços estructurals. • Presentació (elocutio): intermediari amb el lector (interfície). • Global, local: els dos aspectes s’interrelacionen en la lectura i per tant en el disseny. Authoring-in-the-large versus authoring-in-the-small. (Franca Garzotto) • Models d’hipertext: sistemes de terminologies i mecanismes per analitzar i produir aplicacions hipertextuals de forma sistemàtica. • Exemples: HDM, RMM, RMDM, Dexter, Amsterdam.

Dos problemes clàssics de la relació amb un hipertext • Desorientació o pèrdua en l’hiperespai • Desorientació dins de l’estructura general • Incapacitat de trobar la informació desitjada • Saturació cognitiva • Sobresforç cognitiu inicial per aprendre les funcionalitats del sistema o aplicació hipertext • Sobresforç degut a la responsabilitat de controlar el flux • Solucions directes: millorar l’eficàcia • Solucions indirectes: estimular l’usuari

Acceptabilitat social Utilitat Fàcil Aprofitament d'aprendre Acceptabilitat Eficàcia d'ús del sistema Usabilitat Fàcil de Cost recordar Compatibilitat Pocs errors Acceptabilitat pràctica Subjectivament Confiança agradable Etc. Acceptabilitat d’un sistema informàtic (Nielsen)

Alguns conceptes de disseny interactiu • Nielsen: • Utilitat: la manera com les funcionalitats de l’aplicació compleixen els seus objectius. • Usabilitat: la manera com els usuaris fan servir les funcionalitats. • Eficàcia d’ús: grau de productivitat un cop aprés el sistema. • Satisfacció: sensació subjectiva agradable en usar l’aplicació. • Eficàcia: facilitat d’ús, de memorització, productivitat, etc. • Estímul: el gaudi més que la satisfacció com a mecanisme central per aconseguir els objectius de l’aplicació.

Desorientació i saturació: solucions adreçades a l’eficàcia • Solucions heurístiques per disminuir la desorientació • Solucions “generalistes” • Límitació estructural, linealització. • Anàlisi topològica d’estructures, patrons de simplificació • Eines d’ajut a la navegació • Eines de visualització • Eines de transició global / local • Ajuts a la navegació local • Recorreguts guiats i les seves variants • Cerques i filtratges preestablerts • Metàfores • Guies de disseny • Heurístiques • Basades en models cognitius

Eines d’ajut a la navegació: eines de visualització • Correspondència entre un espai físic i el de la informació per visualitzar trajectòries, estructura i dimensions. • Fullejadors gràfics o “browsers”: per avançar o retrocedir seguint qualsevol camí possible. Paradigma: rectangles units per fletxes. • Visualitzadors de jerarquia o estructura: per entendre l’organització general i també les dimensions. Paradigma: organigrama. • Mapes: visualitzadors amb una metàfora espacial. • Navegadors: mapes actius.

Navegadors: exemples Moi, Paul Cézanne Joan Miró. El color dels somnis

Eines d’ajut a la navegació: eines de transició global / local • Per relacionar de forma àgil els dos nivells. • Visualització local més comprensió del context. • Eines de tipus “zoom”, “ull de peix”, panoràmiques, etc. • Elisió o amagament de la informació no rellevant.

Navegador + transició global/local: exemple Navegador + panoràmiques + zoom Au cirque avec Seurat

Eines d’ajut a la navegació: ajuts a la navegació local • Ajuda immediata per a l’orientació en un punt concret. • Mecanismes de tornar enrera (backup): • Pas a pas • Per salts • Per nivells • Història: llista de nodes visitats per recòrrer-la en sentit invers o aleatòriament. • Marcadors (bookmarks): per tornar a un punt seleccionat. • Fites (landmarks): marcadors organitzats a priori per l’autor.

Ajuts a la navegació local: exemple Pas a pas, marcadors, història... Netscape Comunicator

Eines d’ajut a la navegació: recorreguts guiats i les seves variants • Recursos de linealització conceptual de l’hipertext. • Visita guiada: presentació seqüencial d’un subconjunt de la xarxa. • Personalització en funció de la “història” de l’usuari (enllaços “intel·ligents”) o del context (per exemple amb temes relacionats). • Evolució cap a “agents” intel·ligents. Orsay, visite virtuelle

Recorreguts guiats: exemple Microsoft Art Gallery

Eines d’ajut a la navegació: cerques i filtratges preestablerts • El més proper a la gestió d’informació en bases de dades i a la gestió documental escrita. • Índexos • Taules de contingut • Filtres preestablerts: • Per categories: nom, títol, lloc, etc. • Per temps: cronologies • Lligades o no explícitament al contingut

Cerques i filtratges preestablerts: exemples Le Louvre

Navegació per l’espai i navegació amb conceptes • Dues “capes” en la navegació per un hipertext: • Navegació per la geografia de l’hipertext. Possible pèrdua per la complexitat de la xarxa. • Navegació pel seu contingut. Possible desorientació per incomprensió de l’organització i presentació de l’hipertext. • Hi ha eines adreçades al primer tipus de desorientació (per exemple visualitzadors): diuen on són les coses. • Hi ha eines adreçades al segon tipus (per exemple visites guiades): diuen què són les coses. • Addició d’eines dels dos tipus. Terry Mayes: “ ...extending and tailoring basic hypertext facilities, not only with the fairly standard aids to access, such as browsers, but also with tools that help the user to explore the material conceptually, such as guided tours, indexes, and quizzes.”

Metàfores • Un element “real” com a referent d’algunes funcions de l’aplicació. • Pot permetre compartimentar i estructurar una informació extensa d’acord amb paràmetres reconeixibles. • Ajuda a l’usuari a decidir i recordar camins. • Ben Shneidermann: “Hipertext authors use metaphor in order to establish conventions readers can follow so they can ignore the interface they need to use to find information and just find the information” • Amb l’ús habitual, les metàfores poden deixar de ser-ho. • Exemples: paperera, finestra. • L’ús de metàfores en les interfícies pot trivialitzar i amagar característiques intrínseques de la comunicació interactiva.

Guies heurístiques de disseny. Un exemple: Nielsen • 1: Diàleg simple i natural. • 2: Parlar la llengua de l’usuari. • 3: Minimitzar la càrrega memorística de l’usuari. • 4: Mantenir la consistència. • 5: Retorn – “feedback” – de les accions de l’usuari. • 6: Sortides clarament marcades. • 7: Ús de trencalls o acceleradors. • 8: Bons missatges d’error. • 9: Prevenir els errors. • 10: Ajuda i documentació suficients.

Unes “guies” basades en psicologia cognitiva i teoria de l’acció (Donald A. Norman) • 1.- L'estat de l’acció i les seves alternatives han de ser visibles. • 2.- Ha d'haver un bon model conceptual amb una imatge consistent del sistema. • 3.- La interfície ha d'incloure bons "mappings" (traçats, cartografies) que revelin la relació entre els diversos estats. • 4.- L'usuari ha de rebre un retorn continu.

Solucions de disseny adreçades a l’estímul • Són solucions indirectes, adreçades a controlar a través d’estímuls l’interés de la persona que interactúa. • Solucions molt obertes. Per exemple, una desorientació controlada pot ser positiva. • Mark Bernstein: “...disorientation is not inherently wrong; indeed, a degree of disorientation, deliberately introduced and thoughtfully controlled and guided, can be a powerful tool for writers” • En general, es poden buscar idees en àmbits clàssics on la reacció del públic també és vital: teatre, narrativa. • La integració en entorns multimèdia dels diversos llenguatges audiovisuals és una altra línia a desenvolupar.

Desorientació i saturació: solucions adreçades a l’estímul • Control de la desorientació i transmissió de coneixements • Algunes estratègies de disseny interactiu per disminuir la desorientació: • Descoberta i creació d’estructura lligada a un contingut • Descobertes aleatòries, intuïtives • Reiteracions, segones visites • Saturació cognitiva i transmissió de coneixements • Algunes estratègies de disseny interactiu per disminuir la saturació cognitiva: • Escalonar esforços • Integrar navegació per l’estructura i navegació pel contingut • Interfícies “cognitivament invisibles”, que no augmenten - o que disminueixen - la saturació.

Els eixos Autor/Lector i Control/Descoberta: nivells d’interactivitat • La tensió entre autor i lector es materialitza en el nivell de control i descoberta que comparteixen. • Això origina una caracterització de diversos tipus d’interactivitat:

Autoria versus actuació • Janet Murray: “... el autor escribe las reglas que determinarán el texto además de escribir el texto en sí mismo.” • “El autor de narrativa electrónica es un coreógrafo que proporciona los ritmos, el contexto, y los pasos que se pueden bailar. El usuario, ya sea navegador, protagonista, explorador o constructor, simplemente utiliza este repertorio de pasos y ritmos posibles para improvisar un baile particular entre las muchas posibilidades que el autor ha preparado.” • “El usuario no es el autor de la narrativa digital, aunque puede experimentar uno de los aspectos más emocionantes de la creación artística: el poder de moldear materiales atractivos preexistentes. Esto no es autoria sino actuación.” p. 165

Els eixos Autor/Lector i Control/Descoberta: l’experiència del lector L’eix de l’experiència del lector entre el gaudi i la dificultat. (Elizabeth Boling) L’eix de tractament de l’aplicació entre informació i entreteniment (Timothy Garrand).

Plaer i gaudi • Mihaly Csikszentmihalyi: “Los sucesos capaces de hacernos disfrutar ocurren cuando una persona no solamente ha cumplido alguna expectativa anterior o satisfizo una necesidad o un deseo, sinó también cuando ha ido más allá de lo que él o ella se habían programado hacer y logran algo inesperado, tal vez algo que nunca habían imaginado. El disfrute está caracterizado por este movimiento hacia adelante: por un sentimiento de novedad, de realización.” • “En nuestros estudios encontramos que toda actividad de flujo que involucrase la competición, el azar o cualquier otra dimensión de experiencia, tenía esto en común: ofrecía una sensación de descubrimiento, un sentimiento creativo que transportaba a la persona a una nueva realidad.”

Gaudi / dificultat i l’experiència d’interactuar • Experiències de gaudi: • Novetat, sorpresa • Descoberta Csikszentmihalyi

Una “dinàmica” del disseny interactiu • 1: Minimitzar les dificultats negatives. • Solucions directes per evitar conflictes, errors, incoherències, violació indesitjada d’expectatives, etc. • 2: Generar dificultats positives. • Implicar l’usuari fent-lo intervenir, explorar, resoldre situacions, etc. • 3: Optimitzar el gaudi • Sorpresa o eixamplement d’expectatives. • Descoberta. Alguns recursos: Utilització d’elements narratius Integració de mitjans multimèdia: dels llenguatges “additius” als “expressius”

Epíleg: una història antiga • Els grecs ja consideraven l’admiració com a motor de la filosofia: • Plató: “... doncs l’admiració és allò propi del filòsof, i la filosofia comença amb l’admiració.” • Aristòtil: “... l’admiració impulsà els primers pensadors a especulacions filosòfiques.” • ... el principi de tots els sabers és l’admiració davant del fet que les coses siguin el què són.”

Wonder is not precisely Knowing And not precisely Knowing not de Emily Dickinson, poema 1331

Classificacions “ad-hoc”: revistes “gran públic” més o menys especialitzades en el tema (1) • Qué leer, especialitzada en llibres. Número 9, març 1997, “Los 40 CD-ROM imprescindibles”, Daniel Capella • Arte y Cultura • Infantil y Educación • Consulta (inclou enciclopèdies i atles) • Divulgación (inclou jocs culturals com “Versalles”, científics, jocs didàctics) • Prácticos (guies, cursos, etc.) • Otros (inclou poesia com “Dotze sentits”, enciclopèdies de cinema, “el Quijote”, esports, anglès, etc.)

Classificacions “ad-hoc”: revistes “gran públic” més o menys especialitzades en el tema (2) • Guia CD-ROM, especialitzada en CD-ROMs de tota mena. • Ciencia • Consulta • Deportes • Educación • Geografía • Historia • Juegos • Música • Niños

Classificacions “ad-hoc”: seus web de venda de CD-ROMs (1) • FNAC (http://www.fnac.fr/html/guide_cederoms.html) • Culture • Beaux Arts • Cinéma-Littérature • Histoire • Les Insolites • Musique • Loisirs (oci ) • Jeux • Ludo-éducatif

Classificacions “ad-hoc”: seus web de venda de CD-ROMs (2) • Planète CDROMhttp://www.planetecdrom.com/home.htm) • Jeux • Éveil • Culture • Loisirs • Dictionnaires / Encyclopédies • Formation / Soutien scolaire

Classificacions “ad-hoc”: premis de CD-ROMs culturals (1) • Europrix 98 MultiMediaArt (http://www.europrix.org/en_cat1.html) • First steps in Multimèdia • Improve Democracy with Multimèdia • Knowledge and Discovery • Students award • Support SME in the Market Place • Valorisation of European Culture • La definició que es fa de la categoria Knowledge and Discovery barreja culturals, educatius, enciclopèdies, aprenentatge per simulació, etc.

Classificacions “ad-hoc”: premis de CD-ROMs culturals (2) • Möbius 2000 (http://blues.uab.es/mobius/categori.htm) • Científico/Técnico • Cultural/Artístico • Educativo • CD-Rom o DVD de Autor y Net.Art

Art & Humanities (638) Culture (572) Fine art & antiques (181) Museums & Galleries (97) Paintings (227) Archeology (77) Architecture (164) Design (370) Catalogues (216) Enterteinment (789) Games (5163) Graphic arts (610) History (1557) Information Technology (69) Leisure & recreation (549) Media (78) Multimèdia (179) Music (837) Philosophy (85) Poetry (57) Radio & television (33) Classificacions “ad-hoc”: bases de dades o catàlegs de multimèdia i CD-ROMs(1) • The Multimèdia and CD-ROM Directory, Ed. Waterlow, 19ª edició (1998).

Classificacions “ad-hoc”: bases de dades o catàlegs de multimèdia i CD-ROMs(2) • Guide 1994 CD-ROM, CDI, LASERDISC. Ed. Marabout. • Professionnels • Didacticiel • Loisirs

Classificacions “ad-hoc”: catàlegs de productores o distribuïdores de CD-ROMs (1) • Catàleg en CD-ROM de la RMN (Réunion des Musées Nationaux) francesa Catàleg en CD-ROM, 1997. • Musées • Peinture • Art moderne et contemporain • Art et science • Art et histoire • Jeu et Jeunesse • Monographies • Récits

Classificacions “ad-hoc”: catàlegs de productores o distribuïdores de CD-ROMs (2) • Montparnasse Multimèdia (http://www.montparnasse-net.com/) • Culture • Ludo-éducatif • Jeux • Vie pratique

Classificacions més sistemàtiques (1) • Pognant, P.; Scholl, C. Les cd-rom culturels. Paris: Hermes, 1996 • Jeux • Culturels • Éducation • Éveil (estimulació ) / apprentissage: diccionaris, enciclopèdies, atles, títols escolars, d’ensenyament de llengües, de la música ... • Vie pratique: guies de tot tipus, receptes de cuina, codi de circulació, astrologia, etc. • Utilitaires: programaris, cliparts, imatges ... • Charme: eròtics i semblants • Presse: encartats als diaris • Magazines electroniques • Catalogues

Guió i disseny d'interactius 2005-06