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

1. 40 IDEES DESORDENADES QUE ET PODEN AJUDAR EN EL DISSENY I EN LA PRODUCCI Ó D’UN ENTORN INTERACTIU emaf 2010 - 2011

2. Coses que s’aprenen fent i no llegint ni estudiant. Últimes idees i recordatoris de disseny i producció per als alumnes d’EMAF. Comunicació Audiovisual. Universitat de Barcelona.

3. l’usuari és la clau del disseny La primera norma de la usablitat és: CONEIX ELS TEUS USUARIS

4. 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.

5. 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.

6. no 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, has de dissenyar un entorn que potencii l’aprenentatge. I a vegades el disseny comunicatiu queda supeditat al disseny formatiu.

7. 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?

8. elabora continguts de qualitat Els textos, les imatges, les activitats, els videos, les fotos, les animacions … són continguts. Cuida els continguts, fes que siguin de qualitat, s ón la base.

9. dissenya la composici ó Disposa els elements en la pantalla de forma equilibrada. Evidencia la distribuci ó. Dissenya la pantalla com una globalitat. No pensis cada element per separat.

10. visualitza Assegura un contrast adient i visible entre la figura i el fons. Destaca visualment aquells elements essencials. Desactiva els desactius, visibilitza els actius.

11. Venera la senzillesa visual Deixa espai en blanc a la pantalla per respirar. Dissenya el buit en pantalla com dissenyes les formes. No recarreguis.

12. 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.

13. la simplicitat en la interacci ó és clau Controla la c àrrega de la tasca en les interaccions. Limita les accions. Busca l’equilibri entre la flexibilitat i l’efic àcia.

14. escriu amb claredat Utilitza un llenguatge objectiu, planer i senzill. Sigues breu, i sigues precís: un paràgraf = una idea Parla de tu, no de jo.

15. fes els textos llegibles i visibles Utilitza tipografia de sistema i Sans Seriff 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.

16. 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, …

17. no oblidis el feedback L'acció de l'usuari té unes consecuències al sistema, ... i a la inversa.

18. pensa en l’accessibilitat El disseny ha de permetre que tothom el percebi de forma molt similar. Un entorn ha de ser operatiu per a tots els usuaris. Ha de ser prou simple per ser compr ès per tots. Cal evitar els errors dels usuaris des de la indulgència del sistema.

19. utilitza el color És l’element visual més important en la percepció. Afecta a la bellesa, l’atenció de l’usuari, l’organització dels elements, l’agrupació d’apartats, la demarcació per temàtiques, …

20. 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 bé les convencions en navegaci ó (links, menús, breadcrumbs, …)

21. mant é la consist ència en el disseny de tot l’entorn Dissenya totes les pantalles conjuntament, i crea estils comuns per imatges, audiovisuals, icones, botons, textos i pantalles. No canviis de lloc els elements essencials i de navegaci ó. Assegura la coher ència interna de funcionament del sistema, all ò que l’usuari no veu però utilitza.

22. 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.

23. 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.

24. 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ó.

26. 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.

27. 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.

30. mira, mira, mira i torna a mirar Mira centenars de webs abans de tancar 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).

31. no tots els usuaris veuran la web amb el teu ordinador 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.

32. 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, …)

33. 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.

34. el llenguatge audiovisual també forma part del disseny Si crees materials en suport vídeo, 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.

35. 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

36. 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.

37. assegura la qualitat La qualitat no es controla es dissenya. 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.

38. 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.

39. 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 originals i totes les versions (sobretot de les definitives) · estigues preparat/da pels desatres

40. 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” , l’equip hi va junt

41. 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.

42. passa per la 1104 els dimecres 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