Disseny d'Interfícies. Dissenys Intuïtius

Diem que un interactiu és intuïtiu quan hem de fer poc esforç per entendre com funciona. Però aquesta intuïció, en què es basa?

Segons el diccionari, la intuició és aquell "coneixement directe i immediat, sensible o intel·ligible, d'una realitat o una veritat, sense recórrer a inferència o raonament". L'ús d'una interfície interactiva pot ser més o menys intuïtiu i la intuïció es podrà produir en 3 nivells diferents:

• -Nivell visual (veure)
• -Nivell lector (llegir)
• -Nivell analític (pensar)

Tots tres nivells es combinen i interactuen permanentment entre ells i l'usuari no té per què ser conscient de quina dada ha arribat per quin mitjà.


La intuïció visual

El primer nivell, el visual,  es pot resumir com “l’usuari mira i entén”..
És un nivell que pot ser totalment inconscient. Sense fer cap esforç, l’usuari es pot fer una idea de l’estructura de la pàgina i de els possibilitats d’interacció.
Això és possible pel seu bagatge com a espectador d'audiovisuals en general i com a usuari d’interactius, per la seva experiència anterior.

La intuïció visual es pot aconseguir amb:

• Agrupació visual
• Efectes cromàtics
• Espais entre elements
  
• Posicions dels elements
  
• Proporcions

Exemple:
La intuïció visual, ens permet entendre quin és el títol de la pàgina i on és el menú.


La intuïció lectora

És un segon nivell d’interactivitat. És més potent, però cal que l’usuari faci cert esforç. Té lloc quan l’usuari llegeix les etiquetes o textos. Les paraules parlen per elles soles.

A vegades, però, la capacitat de compendre el text dependrà de l’entorn. Ens hem d’assegurar que el text serà comprensible tot i que l’usuari s’acabi d’incorporar a l’aplicació i no hagi entrat per l’inici, especialment si estem desenvolupant una pàgina web.


La intuïció analítica

Per poder arribar a aquest nivell d’interacció, l’usuari ha de fer més esforç. Ha de recòrrer a conceptes, idees i relacions que no es troben a pantalla. És important conèixer el públic objectiu, per saber quines relacions podrà fer i quines no.

L’usuari ha de fer un esforç i, per tant, hem d’estar segurs que està disposat a fer-ho. Això dependrà de que percebi un benefici.

Per exemple: la interfície d’un programa informàtic pot permetre's introduir icones desconegudes per l’usuari. Perquè si el programa és útil, l'usuari farà l’esforç d’aprendre.

Un interfície serà més intuïtiva com menys analítica sigui la experiència. Això dependrà sobretot de la familiaritat amb el sistema icònic, l’element més analític de la interfície. Si l’usuari està familiaritzat amb les icones, les percebrà clarament a nivell visual i passaran a formar part de la intuïció visual.

Exercici:

Analitza el programa "Premiere" des del punt de vista de la Inuïtivitat:

-Quins elements permeten un ús intuïtiu a nivell visual?

-Quins elements permeten un ús intuïtiu a nivell lector?

-Quins elements permeten un ús intuïtiu a nivell analític?

Il·lustra els 3 nivells amb imatges del programa.
A classe es va comentar que AVID és un programa poc intuïtiu? Com podria millorar?

Redacta una entrada en el teu blog i fes-la pública abans del dia 12 de novembre.







Analitza els 3 nivells d'intuïció a:
http://www.bcn.es/firmament/
http://www.bcn.es/barcelogramas
http://www.lavanguardia.es/servicios/index.html
http://parrilla-tv.lavanguardia.es/
http://horoscopo.lavanguardia.es/
Photoshop

Photoshop. Treball amb capes.

El resultat de l'exercici serà aquest:

A continuació trobaràs el material que podràs fer servir

Fases d'un projecte multimèdia. Pre-producció. El disseny de prototips

Basat en el guió interactiu i el llibre d’estil, es crearan prototips de la interfície gràfica del producte. Aquests prototips només hauran de mostrar l’essència de la interfície gràfica i auditiva.

Caldrà elaborar una sèrie de prototips, per poder així provar i seleccionar el que més faciliti obtenir els resultats desitjats. Els diferents prototips, han d’observar diferents solucions per el disseny i la navegació.

Normalment es treballa la pantalla principal i algunes pantalles secundàries. Amb això n'hi haurà prou per determinar:

• diagramació del text (mides i proporcions dels diferents nivells d’informació)
• colors de fons i  color de text
• tipus de gràfics estàtics i animats.
• mides i estils de imatges gràfiques i en moviment (videos i animacions)
• tipus de sons.
• efectes visuals i transicions

Característiques de la interfície

Un disseny correcte de la interfície permetrà que l’usuari entengui com arribar a la informació i la trobi.

• Tindrà els elements bàsics per guiar l’usuari, però en la quantitat justa per no saturar-lo d’informació.
• Tindrà els elements que permetin a l’usuari saber on és i on pot anar
• Permetrà a l’usuari estar informat sobre els processos de l’aplicació (s’estan carregant les dades, no respon,...)

En resum, podem dir que el disseny permetrà fer usable el producte. Per tant, la seva funció principal és asegurar la USABILITAT.

Un primer pas per afrontar el disseny d’un interactiu és definir la METÀFORA. La metàfora és un recurs expressiu molt important al multimèdia. Permet que l’usuari entengui les possibilitats de l’aplicació, perque aquest fa servir un element que li és familiar: un mapa, una galeria, un escriptori,... La metàfora es representa amb elemets gràfics, però també amb la organització de la informació que seleccionem.

L’ús de metàfores permet més o menys creativitat. Podem fer servir metàfores més comuns o experimentar amb elles.

Exemples:
http://www.lanalandis.com/ 
http://www.youngindy.com/adventures/vol1/myfirstadventure/index.html
http://www.777run.com/run777.htm
http://acidtwist.com/gallery/
http://www.curatingthecity.org
http://www.easylife.org/desktop
http://kids.discovery.com/
http://www.erikotten.nl/7/
http://www.yumfactory.com/eyecandy/index.html
http://www.7designers.com/main.htm

Proves amb els prototips
Aquests prototips han de passar a avaluació: primer del client, després l’equip i els usuaris.

El client pot decidir quin dels prototips s’ajusta a les seves intencions. O pot decidir que cap és bo per els seus objectius. Si és així, caldrà revisar la planificació del projecte i els guions.

L’objectiu de les proves amb l’equip i els possibles usuaris és determinar la capacitat de comunicar correctament la informació i com arribar-hi. S’hi avaluaran els possibles errors i les seves solucions.

Abans de començar amb les proves cal que ens plantegem:

• Qui farà la prova?
• Quina experiència tindrà en l’ús d’ordinadors
• Quin coneixement del mitjà volem que tingui? (per exemple en l’ús d’internet)
• Quina relació tindrà amb el projecte? I amb el tema?
• Quines idees aportarà? Com ens les farà saber? Què estem disposats a canviar?
  

Hem de ser conscients abans de començar de que aquestes proves poden obligar-nos a replantejar el projecte i crear nous prototips.


Les proves poden fer-se individualment o en grup. Abans d’iniciar la prova, informarem a qui seleccionem de:

• Caràcter voluntari de la prova
• Confidencialitat de les respostes
• Anotacions que realitzarem sobre el seu comportament i les seves preguntes
• Possibilitat d’abandonar la prova quan ho desitgin

Fases d'un projecte multimèdia. Pre-producció. Guionatge

El guió del projecte, permetrà tenir un document de treball comú a tot l’equip.
Es composa de diferents blocs:

1-descripció de la idea:
Escriure les conclussions obtingudes durant la planificació, pel que fa a:

• condicionants bàsics 
• Informació 
• Suport informàtic

2-Guió literari:
Descriu l’aplicació de forma senzilla, sense tecnicismes o acotacions específiques (no cal parlar d’aspectes tècnics).

3-Guió interactiu:
Divideix la informació en nòduls i subnòduls i mostra com accedeix l’usuari a cada punt. Es representa visualment amb el mapa de navegació: un dibuix esquemàtic dels diferents nodes, la seva jerarquia i rutes i vies d’accés.

El mapa de navegació és un dibuix esquemàtic dels diferents nodes,la seva jerarquia i les rutes i vies d’accés. És el resultat de dividir la informació en nòduls i subnòduls i mostra com accedeix l’usuari a cada punt.

4-Guió tècnic
És l’equivalent a l’escaleta d’una producció audiovisual convencinal.
Representació de les diferents pantalles i la informació relevant a cadascuna:

• efectes de so 
• diàlegs 
• textos 
• tipus de continguts 
• necessitats de programació 
• ...

5-Guió gràfic, llibre d’estil. 
Es defineixen els elements gràfics que permetran transmetre el missatge al públic adequat amb el to desitjat:

• colors 
• tipografies 
• tipus d’imatges 
• tipus d’il·lustracions 
• com s’indicaran els elements de navegació 
• necessitats iconogràfiques

Exercici:
VISITA L'EXPOSICIÓ EFECTE SOUVENIR I DIBUIXA EL MAPA DE NAVEGACIÓ DE L'APLICACIÓ INTERACTIVA QUE ACOMPANYA L'EXPOSICIÓ.

 -PER DIJOUS 4 DE NOVEMBRE: Escriu al teu blog un post amb el guió literari de l'aplicació (descriu l'aplicació de forma sencilla, sense tecnicisme, explicant què pot fer l'usuari).

-PER DIJOUS 11 DE NOVEMBRE: Amb l'ajuda de photoshop, dibuixa el mapa de navegació de l'aplicació i penja'l al teu blog.

Dhub 
Sala Montcada
c/ Montcada, 12
08003 Barcelona
Tel. 93 256 23 00
dhub@bcn.cat
+ informació: http://www.dhub-bcn.cat/ca/info
 

Fases d'un projecte multimèdia. Pre-producció. Planificació II (el disseny de producció)

Determinar l’equip humà necessari:

Per la coordinació: 

• Productor executiu: Qui inicia el projecte. És el responsable de l'administracio i gestió de tot l'equip humà que desenvoluparà l'aplicació. També és el responsable de mantenir el contacte amb el client i el director comercial encarregat de la campanya. Es responsabilitzarà dels contractes i de les gestions de drets. Perfil tipus: persona amb experiència en el treball en equip. Capacitat d'organitzar i manar. Coneixement de tots els processos que tindran lloc en l'elaboració del projecte.  Perfil acadèmic: empresarials, informàtica, enginyeria.
  
• Project manager: Qui s’assegura que el projecte es porta a terme. Acostuma a només treballar en un projecte al mateix temps. Procurarà un equilibri entre els membres de l'equip i en facilitarà la comunicació. Perfil tipus: Experiència en el treball en equip.  Capacitat per organitzar i manar. Coneixement directe dels membres de l'equip. Coneixement del mitjà i els processos. Perfil acadèmic: Empresarials, relacions públiques, publicitat, informàtica, enginyeria, comunicació audiovisual.
  
• Director creatiu: Defineix el tractament formal del producte i s’assegura de la  unitat de tots els elements del projecte. Haurà de conèixer bé el mitjà digital. Determinarà, per exemple, el tipus de botons, cursors, tipus de transicions, distribució dels elements,... Perfil tipus: Experiència en el treball en equip. Creatiu. Capacitat de gestionar equips. Coneixement del software gràfic i d'autor. Coneixement del mitjà.   Perfil acadèmic: disseny gràfic, belles arts, publicitat, comunicació audiovisual.

Per el disseny visual:

• disenyadors gràfics: Domina les eines d’edició gràfiques i crea el material visual d’acord a les directrius del director creatiu.
• animador: Expert en la generació d’animacions (3D o 2D), manuals o informàtiques.
• cineasta: Expert en l’ús d’equips de video i cinema. Pot treballar amb un equip al seu càrrec (càmeres, editors,...) o assumir tot l’encàrrec.
• fotògraf: Captarà i crearà imatges fotogràfiques i les digitalitzarà i tractarà.

Per la comunicació:

• Guionista: Expert en redactar i comunicar idees de forma escrita.Es documentarà amb la informació necessària per el projecte. Perfil tipus: Creatiu. Experiència en treball en equip. Coneixement del mitjà. Experiència en proves i evaluació de resultats. Perfil acadèmic: documentació, periodisme, comunicació audiovisual, filologia.
• Dissenyador multimèdia: Coneix el mitjà i els mètodes i tècniques que caldrà implementar. Enten el llenguatge no lineal i pot definir un sistema de navegació per la informació. Determinarà l'estructura de la navegació i els enllaços del projecte. És el responsable de la interactivitat. Perfil tipus: Experiència en el treball en equip. Creativitat. Coneixement profund del mitjà. Experiència en la prova i evaluació de resultats. Perfil acadèmic: documentació, periodisme, comunicació audiovisual, disseny gràfic

Per la programació

• Programador. Perfil tipus: Experiència en el treball en equip. Resolutiu (capaç de reaccionar davant d'imprevistos amb solucions ràpides i efecties. Coneixements de software i de llenguatges de programació. Coneixement de les possibilitats tècniques del mitjà i del mercat. Perfil acadèmic: Informàtica, programació, enginyeria.
  

Per el so:

• Compositor musical: serà ideal que conegui el mitjà informàtic i les seves possiblitats
• Tècnic de so: Produeix el so.
• Supervisor d’àudio: s’assegura que la música i la veu s’adapten a l’estil definit pel director creatiu.

Per la gestió comercial:

• Departament comercial: Grup que s'encarregarà de la venta, difusió, publiciat i distribució de l'aplicació. Perfil acadèmic: empresarials, relacions públiques i publicitat.
  

 Altres:

• col·laboradors (maquilladors, atrezzistes, dobladors, músics...)     
  

Com a característiques comuns, tot l'equip haurà de ser capaç d'adaptar-se als plaços d'entrega. Per això serà necessari que conegui les seves limitacions.              

Determinar les gestions necessàries:                       

• Drets d’autor del material extern usat.
• Drets d’autor de l’obra resultant
• Normes i lleis aplicables
• Dipòsits legals.

Determinar els recursos materials necessaris:

• Instal·lacions
• Eines informàtiques (software i hardware)

Preveure l’agenda del projecte:

• dates d’inici, finalització i diferentes fites a assolir.

Preveure possibles marges d’error

Preveure el cost aproximat del projecte i, si escau, de manteniment:

• Pressupost màxim total
• Solvència econòmica
• Cost de manteniment i reparacions possibles.

Fases d'un projecte multimèdia. Pre-producció. Planificació

Un projecte multimèdia, com tot procés creatiu, busca respondre a un problema. L’èxit del projecte dependrà de plantejar correctament quin és el problema que es vol resoldre. Aquesta és la primera tasca de tot project: planificar.


La planificació consta de 3 fases inicials:

• Identificar els condicionants bàsics
• Seleccionar la informació a transmetre
• Decidir el suport informàtic de l'aplicació.

Això permetrà:

• Determinar l'equip humà
• Determinar les gestions necessàries
• Determinar els recursos materials necessaris
• Preveure l’agenda del projecte
• Preveure possibles marges d’error
• Preveure el cost del projecte i, si escau, de manteniment
  

Els blocs...

Durant el curs Realització Multimèdia, cada alumne mantindrà un blog personal de treball. Aquí teniu el llistat de blogs creats.

Fases d'un projecte multimèdia. La pre-producció.

Com qualsevol producte audiovisual, un projecte multimèdia necessita de diferents fases de producció. Podríem dividir-les en:

• PRE-PRODUCCIÓ
• PRODUCCIÓ
• POST-PRODUCCIÓ

La pre-producció és la part més important de qualsevol projecte audiovisual. És la part de la feina que es desenvolupa sobre paper.
Podem dividir la pre-producció en :

• planificació
• guionatge
• disseny de prototips i proves
  

A http://www.mixpod.com podeu trobar reproductors de música com aquest.

Consulteu el llistat d'enllaços en aquest bloc per més recursos.

La web 2.0

Podríem dividir la evolució d'internet en 2 fases: web 1.0 i web 2.0.

A l'etapa web 1.0 es van crear milers de pàgines web basades en el llenguatge d'etiquetes HTML. Es tractava de pàgines estàtiques que, un cop creades, poques vegades eren actualitzades. Per crear aquestes pàgines calia comptar amb ajuda d'especialistes, persones capaces de crear els codis necessaris.

En aquesta fase van aparéixer poc a poc serveis que permetien a l'usuari fer servir internet per transmetre informació més fàcilment, però la participació del públic en la creació de continguts només era visible als fòrums.

La segona etapa va ser definida per primera vegada el 2004. Va ser aleshores quan la web es va omplir de pàgines que més que informació oferien serveis, permetent que la gent es comuniqués i compartís coneixements sense haver de ser un expert en la matèria.