SlideShare a Scribd company logo

More Related Content

Viewers also liked (9)

Distribució visual
Distribució visualDistribució visual
Distribució visual
 
Simplicitat interactiva
Simplicitat interactivaSimplicitat interactiva
Simplicitat interactiva
 
Llegibilitat
LlegibilitatLlegibilitat
Llegibilitat
 
Simplicitat visual
Simplicitat visualSimplicitat visual
Simplicitat visual
 
Evolucio interface
Evolucio interfaceEvolucio interface
Evolucio interface
 
Los diseños del diseño interactivo
Los diseños del diseño interactivoLos diseños del diseño interactivo
Los diseños del diseño interactivo
 
pla-pres
pla-prespla-pres
pla-pres
 
Briefing interactivo
Briefing interactivoBriefing interactivo
Briefing interactivo
 
Disseny formatiu
Disseny formatiuDisseny formatiu
Disseny formatiu
 

Estetica

  • 1. L’efecte de l’estètica Mariona Grané. Laboratori de Mitjans Interactius. @LMIUB @CAVUB
  • 2. principis de disseny interactiu
  • 3. principis de disseny interactiu Estètica Estètica i emocions L'efecte de l'estètica La forma i la funció Secció àuria Simetria
  • 4. estètica L'estètica se centra en la natura de la bellesa, l'art i el gust i l'apreciació de les coses belles.
  • 5. estètica Els problemes estètics són detonants de molts problemes d'usabilitat i actuen com un filtre per a l'usuari.
  • 6.
  • 7. estètica Mukarosky (1975), la bellesa no està només en aquell que la percep sinó que és una qualitat d'un objecte o d'una obra, té una funció comunicativa, i manté el lligam entre l'autor, el receptor i la comunitat o l'entorn que l'interpreta, mira, utilitza..., etc.
  • 8. La funció estètica, per Mukarosky, és important en tota activitat humana perquè ... apropa o allunya fets o objectes, destaca o amaga, mostra o invisibilitza, reforça altres funcions d'una imatge o objecte, i s'integra en el procés d'adquisició dels nostres referents. estètica
  • 9. estètica Estètica i emocions: la bellesa importa.
  • 10. estètica «Les relacions personals i positives amb un disseny provoquen sentiments d'estima, lleialtat i paciència, factors significatius en la utilitat a llarg termini i en l'èxit global d'un disseny. Aquestes relacions positives tenen implicacions pel que fa referència a l'eficàcia de les interaccions entre les persones i els dissenys. Les relacions positives amb un disseny funcionen en una interacció que ajuda a catalitzar el pensament creatiu i la resolució de problemes. Pel contrari, les relacions negatives provoquen una interacció que estreny el pensament i paralitza la creativitat. Això resulta especialment rellevant en entorns estressants, atès que l'estrès augmenta la fatiga i redueix el rendiment cognitiu». (Butler, Holden & Lidwell, 2005)
  • 11. estètica «Aesthetics matter: attractive things work better» (Norman, 2002).
  • 12.
  • 13. estètica Dos estudis claus de relació de la bellesa amb la usabilitat. Kurosu i Kashimura, Apparent Usability vs. Inherent Usability, (1995) Bellesa i usabilitat dels caixers automàtics de Tokio La percepció d’usabilitat d’un sistema que tenen els usuaris és millor amb la usabilitat aparent i no real que amb la real (inherent) però estèticament pitjor. Tractinsky (1997) va repetir l'experiment adaptat als caixer al seu entorn d'Israel Contra tot pronòstic els resultats que va obtenir a Israel al 1997 van resultar ser encara més determinants que al Japó.
  • 14. estètica «les emocions canvien la forma en què la ment humana resol els problemes: el sistema emocional és capaç de canviar la modalitat operativa del sistema cognitiu». (Norman, 2004).
  • 15. estètica L'efecte de l'estètica: les coses boniques funcionen millor.
  • 16. estètica Mentres que Norman (2004) inclou l'efecte de l'estètica en el marc de les emocions; ... els experts en HCI i GUI que treballen des del camp del disseny, plantegen l'estètica com un ítem essencial en les característiques d'una interfície que promogui una positiva experiència d'usuari.
  • 17. estètica La bellesa té significatives implicacions en l'acceptació, l'ús i els resultats d'un disseny.
  • 18. estètica L'estètica permet el processament visceral de la informació, (Norman, 2004)
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38. estètica La bellesa es crea en el domini de les regles del disseny que anem desgranant, en la simetria de les formes, l'equilibri, la composició, l'alineació dels elements, el color, els textos coordinats amb el disseny, les agrupacions, les adequacions, ... etc.
  • 39. estètica I té regles pròpies ...
  • 40. estètica La forma i la funció: la forma segueix a la funció.
  • 41. estètica Les 3F: form follows function. Descripció de la bellesa o condició per assolir-la ??? «Un objecte seria bell si, per un costat, es manifestés en ell algun tipus de bellesa de la intel·ligència i, per un altre, si l'ús al que ha de servir fos perfectament i clarament expressat en el seu senyal, i els materials amb els que estigués fet fossin adequats pel seu ús». Plató, (350 ac)
  • 42. estètica Perquè el disseny visual d'una interfície, en el nostre cas, el disseny d'una interfície web, influeix directament en com la utilitzem, per navegar, per informar-nos per interactuar, etc.
  • 43.
  • 44. estètica La forma segueix a la funció s’adopta per als objectes i no per a les seves representacions visuals, ... però la percepció de les funcions sobre les seves imatges és real, ... per exemple un gràfic d’un botó no es pot pressionar però els usuaris saben que aquesta és la seva funció i li atribueixen.
  • 45. estètica Secció àuria: Proporció entre els elements d'una forma d'aproximadament 0,618.
  • 46. estètica L'escala i les proporcions són aspectes clau en les representacions visuals. El concepte que hi ha darrere de tota escala és la creença que uns nombres ordenats representen millor alguns fets naturals, i poden ser reproduïts en disseny. Amb aquesta idea s'han anat creat moltíssimes escales en la vida q u o t i d i a n a ( m ú s i c a , c o l o r , temperatura...).
  • 47. estètica El punt i la línia, considerats en disseny l'inici de tot, utilitzen aquesta proporció per relacionar-se i crear formes, és el nupero Phi (= ø=1,6180339…), que és el número al qual tendeix la divisió entre dos números qualsevols de la sèrie de Fibonanci. El punt en moure’s es transforma en línia que té un ritme que es va repetint fins a cargolar-se en punts concrets del recorregut, formant un cargol.
  • 48. estètica Aquestes proporcions es troben arreu a la natura (animals i vegetals) i l'home s'ha encarregat de traslladar-ho en les seves creacions de disseny al llarg de la humanitat.
  • 49. estètica La secció àuria és la proporció entre dos segments, de forma que el més petit (bc) és al més gran (ab), el que el més gran (ab) és gairebé la suma dels dos segments (ac).
  • 50. estètica A "Le Modulor" Le Corbusier (1950) recupera la idea de les proporcions, en el seu cas aplicada a l'home i l'arquitectura.
  • 51. estètica Aplicacions visuals en objectes de les regles àuries.
  • 52. estètica En entorns webs les regles àuries s’apliquen per a la composició de pantalla inicial o global de tot el site per realçar la percepció de qualitat estètica. Es fa a partir de la diagramació en graelles. esquema de grids de la wikipedia
  • 53. estètica En les guies GUI per al disseny d’apps pels dispositius mòbils amb sistema IOS l’organització visual a partir de les proporcions àuries és una constant.
  • 55.
  • 59.
  • 60.
  • 61. estètica Simetria: Equivalència visual entre els elements d'una forma.
  • 62. estètica Retorn a les idees de Dondis sobre la composició de la pantalla. «La simetria sempre s'ha associat a la bellesa», (Butler et altri, 2005)
  • 63. estètica Un disseny simètric suggereix estabilitat, equilibri, qualitat estètica, ordre, regularitat, centralització, repetició, etc. Per al disseny de la informació en pantalla aquestes qualitats són un suport per a l'usuari, la seva orientació, la navegació entre les dades i la satisfacció en l’experiència web.
  • 64.
  • 65.
  • 68.
  • 72. estètica Estètica i emocions: la bellesa importa. L'efecte de l'estètica: les coses boniques funcionen millor. La forma i la funció: la forma segueix a la funció. Secció àuria: Proporció entre els elements d'una forma d'aproximadament 0,618. Simetria: Equivalència visual entre els elements d'una forma.
  • 73. principis de disseny interactiu LEER NO MATA Alberich, J. (2003). En trànsit 7.0. Apunts per a una estètica dels entorns digitals. Artnodes, nº2. Recuperat el 12 de juny de 2006, de http://www.uoc.edu/ artnodes/cat/art/jalberich1002/jalberich1002.html Butler, J; Holden, K & Lidwell, W. (2005). Principios universales de diseño. Barcelona: Blume. Heller, D. (2005). Aesthetics and Interaction Design - Some Preliminary Thoughts. [Online version]. Interactions, XII,5, 48-50. ACM. Norman, D.A (2004). El diseño emocional. Por qué nos gustan (o no) los objetos cotidianos. Barcelona: Paidós. Tractinsky,N. (2004.) A few notes on the study of beauty. [Online version]. HCI, Human-Computer Interaction, v.19 n.4, p.351-357, December 2004.
  • 74. Mariona Grané. Laboratori de Mitjans Interactius www.lmi.ub.edu