• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
40idees
 

40idees

on

  • 810 views

40 idees desordenades per al disseny interactiu d'entorns web d'us educatiu

40 idees desordenades per al disseny interactiu d'entorns web d'us educatiu

Statistics

Views

Total Views
810
Views on SlideShare
731
Embed Views
79

Actions

Likes
2
Downloads
0
Comments
0

4 Embeds 79

http://campusvirtual.ub.edu 61
http://ioclabs.xtec.cat 16
http://ioc.xtec.cat 1
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    40idees 40idees Presentation Transcript

    • 40 IDEES DESORDENADES QUE ET PODEN AJUDAR EN EL DISSENY I EN LA PRODUCCI Ó D’UN ENTORN INTERACTIU emaf 2008 - 2009
    • Últimes idees i recordatoris de disseny i producció per als alumnes d’EMAF. Comunicació Audiovisual. Universitat de Barcelona.
    • l’usuari és la clau del disseny La primera norma de la usablitat és: CONEIX ELS TEUS USUARIS 40 IDEES DESORDENADES PER EL DISSENY I LA PRODUCCI Ó D’UN ENTORN ONLINE INTERACTIU 40 IDEES DESORDENADES PER EL DISSENY I LA PRODUCCI Ó D’UN ENTORN ONLINE INTERACTIU
    • les experiències d’un usuari es poden dissenyar Tot el que fa l’usuari …, el que pot fer, és perquè s’ha dissenyat. Cap part del disseny pot quedar en el buit sense cap ra ó. Cada element de la pantalla: el llenguatge, les imatges, les animacions, el fons i les formes, els sons, els botons … TOT s’ha de projectar.
    • la creativitat i la usabilitat van juntes La creativitat no és enemiga de la usabilitat. Només un disseny dolent és enemic d’un bon disseny. Pensa de forma usable i pensa de forma creativa.
    • oo oblidis els objectius reals del disseny La creativitat és molt important, però recorda que no estàs fent una obra d’art, sinó un … ENTORN D’APRENENTATGE ONLINE Has de formar a un grup de persones, el teu disseny és una eina per arribar a una informació i a unes activitats que promouen l’aprenentatge. A vegades el disseny comunicatiu queda supeditat al disseny formatiu.
    • segueix el teu instint Si a tu t’encanta el teu disseny, arribarà al públic. Si no t’agrada ni a tu … a qui podrà atraure?
    • elabora continguts de qualitat Els continguts del teu entorn d’aprenentatge online no són només els textos. Les imatges, les activitats, els videos … son continguts. Cuida els continguts, fes que siguin de qualitat, en s ón la base.
    • dissenya la composici ó Disposa els elements en la pantalla de forma equilibrada. Evidencia la distribuci ó. Emmarca, apropa, separa els apartats, elements i objectes per visualitzar l’organitzaci ó. Dissenya la pantalla com una globalitat. No pensis cada element per separat.
    • pensa on centra l’atenci ó l’usuari Assegura un contrast adient i visible entre la figura i el fons. Destaca visualment aquells elements essencials. Estudia i controla l’atenci ó de l’usuari, i dissenya tenint en compte els seus hàbits.
    • adora la senzillesa visual Deixa espai en blanc a la pantalla per respirar. No tinguis por del buit, dissenya’l com dissenyes les formes. No recarreguis ni amb imatges, ni amb colors ni amb paraules. “ La simplicitat consisteix en sostreure allò que és obvi i afegir allò que és específic”. Maeda, 2006
    • tot el que no és senyal és soroll No donis a l’usuari informació que no necessita. No creis activitats irrellevants. No compliquis els camins per assolir els objectius. Desactiva els desactius, visibilitza els actius. Hick … les alternatives necess àries Ockham … la més simple és la millor opció Pareto … destaca allò important i rellevant
    • la simplicitat en la interacci ó és clau Controla la c àrrega de la tasca en les interaccions. Limita les accions que es poden portar a terme segons el que es necessita i segons els usuaris. Busca l’equilibri entre la flexibilitat i l’efic àcia.
    • escriu amb claredat
      • Utilitza un llenguatge objectiu, planer i senzill, un text s'ha de poder entendre a la primera lectura.
      • Tracta les idees de forma específica i contextualitzada.
        • "un paràgraf = una idea”
      • Sigues breu, i sigues precís.
      • Parla de tu, no de jo,
      • Evita la veu pasiva, i utilitza verbs forts enlloc de perífrasis verbals.
      • Manté un estil objectiu, evita llenguatges molt publicitaris.
      • Utilitza una narrativa amb una estructura deductiva, segueix l'estratègia de piràmide invertida.
    • fes els textos llegibles i tamb é visibles Utilitza tipografia de sistema i Sans Seriff en textos llargs. Usa un tamany adient, llegible. Assegura un contrast òptim entre el fons i el text. Utilitza llistes, negretes i destacats, capçaleres, t itols i subtítols, … separa continguts. Que l’usuari pugui llegir visualment la pantalla.
    • tingues en compte els referents i models mentals Recorda qui i com s ón els teus usuaris potencials, adequat als seus costums i referents culturals i visuals. Les imatges i sobretot les icones, procura que siguin el màxim d’intuitives, l ógiques, comunes, imitadores, … i el màxim de simples possible. Utilitza met àfores organitzacionals, funcionals, visuals, … "La forma en com veiem el món afecta quasi sempre a allò que veiem.” Dondis, 1976
    • no oblidis el feedback L'acció de l'usuari té unes consecuències al sistema, ... i a la inversa. L’acci ó dels formadors, dinamitzadors, tutors, … ha de recolzar els usuaris i els seu ús satisfactori del sistema i els continguts.
    • pensa en l’accessibilitat La perceptibilitat del disseny ha de permetre que tothom (o una gran majoria) el percebi de la mateixa manera o de forma molt similar. Un entorn ha de ser operatiu per a tots els usuaris potencials. Ha de ser prou simple per ser compr ès per tots. Cal assegurar la indulgència del sistema, evitar els errors dels usuaris a partir d’un bon disseny.
    • utilitza el color És l’element visual més important en la percepció d’un disseny i per tant d’un contingut. Afecta a la bellesa, l’atenció de l’usuari, l’organització dels elements, l’agrupació d’apartats, la demarcació per temàtiques, … Preparat una paleta de colors amb els que treballaràs en gradaci ó . Utilitza pocs colors (2 aprox) i combina amb blanc, negre i grissos.
    • estructura la navegaci ó Mostra sempre on és l’usuari. Si tens estructura lineal, mostra on és i que li queda per veure. Si tens estructura hipertextual que quedin marcats els llocs visitats. Si fas servir estructura jer àrquica fes visibles les relacions. Utilitza les convencions en navegaci ó (links, menús, breadcrumbs, …)
    • mant é la consist ència en el disseny de tot l’entorn Manté un estil visual comú a totes les pantalles, dissenya totes les pantalles conjuntament, i crea estils comuns per imatges, audiovisuals, icones, botons i textos. No canviis de lloc els elements essencials i de navegaci ó. I assegura la coher ència interna de funcionament del sistema, all ò que l’usuari no veu però utilitza.
    • no t’oblidis de l’est ètica La bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa importa, la bellesa és important .
    • organitza els continguts Utilitza sistemes clars d’organitzaci ó dels continguts (alfabetic, temporal, sequenciació, categoria, jerarquia, ubicació, …). Si és possible presenta la informació per capes, amb diferents nivells d’aprofundiment. No mostris tota la informació de cop, utilitza una revelació progressiva. Fragmenta i modula els continguts. Utilitza la pir àmide invertida.
    • el tamany si que importa Per aprendre, a vegades cal utilitzar més d’un programa i m és d’una pantalla alhora. La pantalla no ha d’ocupar tot el monitor, deixa espai per veure’n altres. Dissenya pensant en m àxim 900 pixels d’amplada aproximadament encara que les pantalles ara siguin m és grans i de bona ressolució.
    • cuida les imatges
      • Pensa per a qu è vols les imatges fixes en pantalla, quina funció tenen en cada cas.
        • Il·lustrar
        • Motivar
        • Donar contingut
        • Reforçar
        • Avaluar
        • Presentar
    • no siguis “cutre” No utilitzis elements de clipart , word art, … o altres imatges cutres per els teus espais web. Crea el teu propi estil. Crea les teves pròpies imatges. Treballa les imatges fins a fer-les teves.
    • sigues original Crea, inventa, pensa, idea, …. Pensa en els destinataris i els objectius, i crea els continguts a mida. No et limitis a copiar coses que ja existeixen, i cita les teves fonts. Evita els plagis en gràfics i textos sobretot si estan a la web. Si tu els has trobat jo també ho puc fer …
    • no oblidis les emocions
      • Provoca el teu usuari encara que treballis amb continguts molt estructurats:
        • · planteja activitats que siguin un repte
        • · utilitza l’humor
        • · dissenya casos interessants
        • · troba estils visuals motivadors
        • · presenta an ècdotes clarificadores
        • · busca una aplicabilitat del contingut
    • experimenta amb les eines
      • L’única manera de conèixer com funciona un programa de creació de video, audio, gràfic, web, animació, …etc
        • … és utilitzar-ho una i una altre i una altre i una altre i una altre i una altre i una altre vegada.
        • … llegir els manuals quan no te’n surts
        • … i equivocar-se i tornar-ho a intentar … i tornar-ho a intentar … i tornar-ho a intentar … i preguntar … fins que trobis la solució.
    • mira, mira, mira i torna a mirar Mira centenars de webs abans de decidir el teu disseny, analitza el que veus, fixa’t en els detalls, observa com és la interficie, la navegació, les interaccions, … I mira el que fan els teus companys … són la teva competència directa, (o els teus col·laboradors directes).
    • no tots els usuaris veuran la web amb el teu ordinador No serveix de res dir : “ en el meu ordinador SI que funciona” Hi ha molts usuaris, amb ordinadors diferents, sistemes diferents, navegadors diferents, conexions diferents, …. Fes el testeig des diferents navegadors i sistemes Assegura uns mínims adients.
    • integra eines a l’entorn Pensa un espai espec í fic per les eines de comunicaci ó i autogestió a la interficie. Assegurat de dissenyar les eines també. No trenquis el disseny amb els recursos de comunicaci ó i treball (email, foros, calendaris, missatges, xats, …)
    • una web no és un cartell Una web no és un material imprès i inamovible. Pensa en digital, pensa en interacció. Apren a conèixer el medi. Utilitza les possibilitats del mitjà per potenciar l’aprenentatge de l’usuari.
    • el llenguatge audiovisual també forma part del disseny Si crees materials en suport video, assegura’t que mantenen l’estil de l’entorn web. Que les sensacions que es transmeten amb el ritme, el color, la llum, … no s’allunyen de tot el conjunt dissenyat. Fes que es puguin integrar coherentment a la interficie. Utilitza sistemes audiovisuals c òmodes per l’usuari.
    • pregunta als teus companys que opinen Mostra els teus esbossos Demana opinions Assegura’t que es compren tot Fes les preguntes oportunes Tingues la ment oberta i canvia el que calgui
    • quan una idea no acabi de fluir … canvia radicalment A vegades el disseny implica més temps del previst. Quan una idea no acaba de funcionar, et sembla que falten coses, o que no quadra, … el millor és tancar i començar un nou disseny completament diferent. Trobar às el que busques.
    • assegura la qualitat La qualitat no es controla es dissenya. Revisa, o millor fes revisar, tota la producci ó: imatges, textos, programacions, maquetacions, … Els que escriuen, programen, maqueten, … no han de revisar la seva feina. Organitza tasques d’avaluaci ó, revissió i testeig dins l’equip.
    • cuida els més petits detalls Els detalls donen valor afegit a un producte. Els detalls diuen qui ets, com treballes i quina cura tens de les coses que fas. I això és el que veu el client.
    • tingues una bona planificació En qualsevol moment tot se’n pot anar “ a la merda”, és la llei de Murphy. · procura tenir-ho tot ben planificat · assegura’t de tenir temps per rectificar · assegura’t de tenir temps per repetir-ho tot si cal · guarda totes les proves de disseny · guarda els PSD de totes les versions (sobretot de les definitives) · estigues preparat/da pels desatres
    • el treball en equip és la part més dura d’un projecte, i tamb é en pot ser la millor · apren a veure el millor de cadascun dels teus companys · valora cada opinió · promou la participació · no t’oblidis del bon humor · recorda que quan tot se’n va “a la merda” hi anem junts, … (a la merda vull dir)
    • llegeix - Almenys els apunts de l’assignatura … que són el m ínim del mínim mínim . - Un bon llibre de disseny i gesti ó de projectes multimèdia, (o tres). - I manuals o tutorials de les eines que no coneguis quan et facin falta.
    • passa per la 1104 els dijous a la tarda Pregunta Envia missatges pesats amb dubtes Demana ajuda si et cal i passa per tutories Demana consells si dubtes Apren tot el que puguis i sobretot all ò que t’interessi
    •