SlideShare a Scribd company logo
1 of 74
Download to read offline
L’efecte de l’estètica
Mariona Grané. Laboratori de Mitjans Interactius. @LMIUB @CAVUB
principis de disseny interactiu
principis de disseny interactiu
Estètica
Estètica i emocions
L'efecte de l'estètica
La forma i la funció
Secció àuria
Simetria
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.
estètica
Els problemes estètics són detonants de molts problemes d'usabilitat i actuen com un
filtre per a l'usuari.
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.
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
estètica
Estètica i emocions: la bellesa importa.
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)
estètica
«Aesthetics matter: attractive things work better»
(Norman, 2002).
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ó.
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).
estètica
L'efecte de l'estètica: les coses boniques funcionen millor.
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.
estètica
La bellesa té significatives implicacions en l'acceptació, l'ús i els resultats d'un disseny.
estètica
L'estètica permet el processament visceral de la informació, (Norman, 2004)
estètica
pangea.org/dim
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.
estètica
I té regles pròpies ...
estètica
La forma i la funció: la forma segueix a la funció.
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)
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.
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.
estètica
Secció àuria: Proporció entre els elements d'una forma d'aproximadament 0,618.
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...).
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.
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.
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).
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.
estètica
Aplicacions visuals en objectes de les regles àuries.
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
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.
estètica
estètica
estètica
estètica
lt2.fr
estètica
Simetria: Equivalència visual entre els elements d'una forma.
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)
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.
estètica
estètica
estètica
estètica
vangogh-creative.it
estètica
natl.tv
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.
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.
Mariona Grané.
Laboratori de Mitjans Interactius www.lmi.ub.edu

More Related Content

Viewers also liked

Distribució visual
Distribució visualDistribució visual
Distribució visualiMona06
 
Simplicitat interactiva
Simplicitat interactivaSimplicitat interactiva
Simplicitat interactivaiMona06
 
Llegibilitat
LlegibilitatLlegibilitat
LlegibilitatiMona06
 
Simplicitat visual
Simplicitat visualSimplicitat visual
Simplicitat visualiMona06
 
Evolucio interface
Evolucio interfaceEvolucio interface
Evolucio interfaceiMona06
 
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 interactivoiMona06
 
pla-pres
pla-prespla-pres
pla-presiMona06
 
Briefing interactivo
Briefing interactivoBriefing interactivo
Briefing interactivoiMona06
 
Disseny formatiu
Disseny formatiuDisseny formatiu
Disseny formatiuiMona06
 

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
 

Recently uploaded

ELLUCHINFORME_BAREM_DEFINITIU_BAREM (1).pdf
ELLUCHINFORME_BAREM_DEFINITIU_BAREM (1).pdfELLUCHINFORME_BAREM_DEFINITIU_BAREM (1).pdf
ELLUCHINFORME_BAREM_DEFINITIU_BAREM (1).pdfErnest Lluch
 
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptxXARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptxCRIS650557
 
MECANISMES I CINEMÀTICA 1r DE BATXILLERAT
MECANISMES I CINEMÀTICA 1r DE BATXILLERATMECANISMES I CINEMÀTICA 1r DE BATXILLERAT
MECANISMES I CINEMÀTICA 1r DE BATXILLERATLasilviatecno
 
Menú maig 24 escola ernest Lluch (1).pdf
Menú maig 24 escola ernest Lluch (1).pdfMenú maig 24 escola ernest Lluch (1).pdf
Menú maig 24 escola ernest Lluch (1).pdfErnest Lluch
 
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,Lasilviatecno
 

Recently uploaded (7)

ELLUCHINFORME_BAREM_DEFINITIU_BAREM (1).pdf
ELLUCHINFORME_BAREM_DEFINITIU_BAREM (1).pdfELLUCHINFORME_BAREM_DEFINITIU_BAREM (1).pdf
ELLUCHINFORME_BAREM_DEFINITIU_BAREM (1).pdf
 
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptxXARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
XARXES UBANES I LA SEVA PROBLEMÀTICA.pptx
 
HISTÒRIES PER A MENUTS II. CRA Serra del Benicadell.pdf
HISTÒRIES PER A MENUTS II. CRA  Serra del Benicadell.pdfHISTÒRIES PER A MENUTS II. CRA  Serra del Benicadell.pdf
HISTÒRIES PER A MENUTS II. CRA Serra del Benicadell.pdf
 
MECANISMES I CINEMÀTICA 1r DE BATXILLERAT
MECANISMES I CINEMÀTICA 1r DE BATXILLERATMECANISMES I CINEMÀTICA 1r DE BATXILLERAT
MECANISMES I CINEMÀTICA 1r DE BATXILLERAT
 
Menú maig 24 escola ernest Lluch (1).pdf
Menú maig 24 escola ernest Lluch (1).pdfMenú maig 24 escola ernest Lluch (1).pdf
Menú maig 24 escola ernest Lluch (1).pdf
 
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
SISTEMA DIÈDRIC. PLANS, PAREL·LELISME,PERPENDICULARITAT,
 
itcs - institut tècnic català de la soldadura
itcs - institut tècnic català de la soldaduraitcs - institut tècnic català de la soldadura
itcs - institut tècnic català de la soldadura
 

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