3. principis de disseny interactiu
Atenció visual
Els elements focalitzadors:
punt d’entrada
realçament
relació figura-fons
interferències
Un element transversal amb un clar objectiu informatiu:
el color
4. atenció visual
William James (1890): l’atenció permet portar a terme processos elementals
d’activitat mental com:
percebre, concebre, distingir, recordar i accelerar les nostres respostes motores.
Per a James, l’atenció és un procés central que dirigeix tota l’activitat mental.
5. atenció visual
L’atenció és una força, un mecanisme per l’accés a la informació.
6. atenció visual
Tudela (1992): l’atenció és fonamental en la cerca i la comprensió.
La cerca ve donada per la càrrega, la pràctica i les característiques dels estímuls.
7. atenció visual
L’atenció és un mecanisme amb funcions concretes
per dirigir el processament de la informació.
10. atenció visual
És el més visual de tots els elements del llenguatge perquè només es pot apreciar amb
el sentit de la vista que només funciona si hi ha llum.
És un fet continuat.
Atlas of Munsell Color System el 1915
11. atenció visual
Els sistemes de treball de color a la web es
base en els
sRGB color space = Standard Red Green Blue
Des dels inicis de la web, l’aplicació directa del
scolors a la web via CSS s’ha fet mitjançant el
sistema Hexadecimal
Actualment es fan servir també sistemes HSL i
HSLA, presnetacions del RGB a partir de Hue,
Saturation & Lightness.
12. atenció visual
És essencial en infografia i
visualització de dades.
felixheinen.de
13. atenció visual
El color és un fet transversal per la seva funció en el disseny d’entorns web, ja que
afavoreix la bellesa estètica, la determinació de l’atenció i la percepció de la
distribució dels elements de la pantalla directament, i alhora té una influència clau en
aspectes de llegibilitat i visibilitat de la informació.
14. atenció visual
El color distribueix, i destaca els elements en pantalla directament, fa visibles les
relacions.
17. atenció visual
El color afecta a les sensacions
davant un disseny. Els colors
brillants transmeten alegria i els
foscos por, soledat, tristor, ...
El color és una propietat que sempre
depen de la percepció humana.
Albers, 1963.
18.
19.
20.
21. atenció visual
Més importants i menys subjectius són els efectes òptics provocats per combinacions de
colors.
Els colors clars tendeixen a expandir-se i els foscos a contraure’s.
22.
23. atenció visual
Poden produir sensacions de proximitat o de llunyania, els colors càlids sembla que
avancen i en canvi els colors freds sembla que s'endinsen en un fons.
Aquesta percepció també depèn del grau de saturació dels colors, els colors brillants
reforcen l'apropament i els colors apagats semblen ser més lluny.
24.
25.
26.
27. atenció visual
Cal l'ús de colors més càlids per als elements de figura o de primer pla i tons més freds
i suaus per als fons.
28.
29. atenció visual
Els colors més saturats ajuden alhora d'atraure l'atenció sobre un apartat o objecte de
la pantalla, però en canvi, els colors no saturats aporten eficàcia a un entorn web i
destaquen els resultats qualitatius.
32. atenció visual
essencial per enfatitzar
elements en pantalla
33. atenció visual
Treballar amb una paleta de colors en el disseny web.
https://kuler.adobe.com
34. atenció visual
Crear un estil amb una paleta concreta o crear diversos estils amb paletes diferents
35.
36.
37. atenció visual
L’absència de color s’utilitza també amb funcions estètiques i de creació d’un estil
propi.
38.
39. atenció visual
Molt utilitzat el fet de treballar amb un sol color en contrast amb blanc i negre
40.
41.
42. atenció visual
La rellevància dels grisos que permeten crear entorns basats en un o dos colors,
desenvolupant una funció organitzadora de la pantalla.
43.
44.
45.
46.
47.
48. atenció visual
Una tendència actual d’ús de colors molt potents visualment (sovint molt saturats)
implica un protagonisme clau i una imatge de marca.
49.
50.
51. «El color fabrica tot un univers imaginari. Ens fa viatjar a les illes, ens
submergeix al mar o ens manté a dalt del cel» Janiszewski i Moles (1992)
53. atenció visual
Interferències: Problema de disseny que implica soroll i provoca un ralentiment del
procés mental.
Les interferències es produeix quan dos o més processos de percepció entren en
conflicte. Són un fenomen estudiat des de la psicologia de la percepció i les disciplines
relatives a la comunicació.
Stroop (1935), Garner i Pomerantz (1977), han estudiat aquest fenòmen i les seves
conclusions poden ser aplicades sota el punt de vista dels factors humans al disseny
d'entorns interactius i al procés comunicatiu visual en general.
Molts problemes d'interferències en un disseny d'interfície neixen d’un desconeixement
o mala aplicació dels principis de disseny.
54. atenció visual
· Interferència d'Stroop: un aspecte que semblava irrellevant d'un estímul
desencadena un procés que interfereix en el procés rellevant de l'estímul. L'exemple
més conegut és el temps que es triga a donar nom al color d'unes paraules quan el
seu significat no es correspon al color.
· Interferència de Garner: una variació irrellevant d'un estímul desencadena un
procés mental que interfereix en els processos que impliquen un aspecte rellevant de
l'estímul. Trobar icones il·lògics, o que s'utilitzen amb funcions que no són les
comunes, ...
· Interferència pro-activa: els records interfereixen en l'aprenentatge. Les convencions
apreses inicialment pel costum ens porten a haver-nos de ressituar per aprendre
noves formes d'accedir a la informació, navegar o llegir una informació.
· Interferència retroactiva: l'aprenentatge interfereix en els records. Una quantitat
determinada de dades noves pot interferir en el record de dades que ja teníem.
L'aprenentatge de noves formes d'interacció afecten al nostre accés de sistemes
anteriors perquè ens acostumen a nous formats.
59. atenció visual
Punt d'entrada: Espai o element d'atenció en un disseny.
Totes les persones quan ens topem per primera vegada amb un objecte, fins i tot amb
un objecte informatiu, centrem l'atenció en els elements que han estat dissenyats per
atraure, ... les tapes d'un llibre, els titulars del diari, la fotografia principal d'una
revista...
És la nostra impressió inicial d'un objecte.
Un usuari web també té una impressió inicial davant una pantalla.
I uns objectius de cerca d’informació.
60. atenció visual
Punt d'entrada
Dissenyar el punt d’entrada i d’atenció en un entorn web implica:
· eliminar barreres que impedeixein un bon accés a la informació
· destacar i realçar els elements més rellevants
61. atenció visual
moltes opcions i poc
clarament distribuides
portalcomunicacion.com
62. atenció visual
la distribució no
funciona i els
colors esdevenen
barreres de
percepció
in3.uoc.edu
63. atenció visual
Cal l'eliminació o reducció de barreres, evitant elements que dificulten l'atenció de
l'usuari, per exemple:
· massa quantitat d’informació en una sola plana
· elements de soroll no pertanyents
· publicitat massa exagerada
· finestres flotants
· espais desestructurats, poc organitzats
· entorns amb elements mal distribuïts
Les barreres en una web poden ser funcionals de manera que impedeixen accedir a
la informació, però també poden ser estètiques, evitant que els usuaris hi
accedeixin.
66. atenció visual
Cal:
· dissenyar uns bons punts de visió per permetre als usuaris centrar l'atenció en
aquelles opcions que busquen, escanejar la informació de la pantalla, detectar els
elements rellevants i les opcions de què disposa..., etc.
· dissenyar una bona disposició dels objectes, els colors, el realçament de les
opcions, les relacions entre els formats d'informació,
· oferir una bona orientació de navegació en pantalla,
· els punts de visió han de poder ser inspeccionats per l'usuari amb el mínim de
distraccions possible.
· reduir el nombre d’elements i opcions als necessaris
71. atenció visual
Realçament: Sistemes per cridar l'atenció sobre un element en pantalla.
L’objectiu és destacar elements per sobre de la resta.
Cal destacar o bé un màxim del 10% dels elements per no anul·lar l’efecte
realçament; o bé utilitzar tècniques diferents per destacar de manera diferenciada
objectes diversos.
Utilitzem:
el color,
la mida,
les transparències,
la inversió,
les intermitències,
el contrast, ...
72. atenció visual
Les tècniques de realçament provenen dels principis de disseny visual més universals.
Papereta per votar al
referèndum d'Alemanya
del 1938.
«Estàs d'acord amb la
consumada reunificació
d'Àustria a l'Imperi
Alemany el 13 de març
de 1938 i votes per la
llista del nostre cabdill
Adolf Hitler? Si, No».
74. atenció visual
La inversió del color pot afavorir el realçament d’elements en pantalla, per exemple en
menús.
És una tècnica eficient i que fa variar considerablement un disseny.
75. atenció visual
La inversió de color en icones afavoreix especialment la seva detecció, el contrast i el
color ajuda a reforçar la percepció de les formes.
L’emmarcar els icones encara ho força més.
76. atenció visual
Una tècnica que pot ser eficient és l’animació d‘objectes a destacar. Sense oblidar
que el costum a un fet determinat pot fer que l’usuari acabi per ignorar-lo.
L'experiment de Benway (1998) va mostrar la ceguesa als banners quan en demanar a un grup
d'usuaris que busquessin uns cursos en una web concreta, els usuaris van trigar molta estona a
trobar-los movent-se entre apartats i jerarquies de la web, malgrat que a l'inici de la pantalla
central un banner publicitari indicava els cursos, hi haguessin accedit en un segon fent un click.
77.
78. atenció visual
Finalment en el realçament cal tenir en compte les característiques físiques dels objectes
i elements per a diferenciar-los de la resta i promoure el seu realçament.
(Arnheim, 1954; Dondis, 1976).
«efecte Von Restorff»
Es manté el blau en
totes les opcions i
textos menys en
aquells que indiquen
la cerca i on es troba
l'usuari.
82. atenció visual
Relació figura-fons: Els elements es perceben com a figures (centre d'atenció visual) o
com a fons (resta del camp de percepció).
La idea de la percepció de la figura i el fons, en la seva aplicació en el disseny neix
des de la teoria de la Gestalt.
Rubin (1915)
· La figura té caràcter de cosa, el fons té naturalesa de substància.
· La figura té forma, el fons no la té, s'estén, aparentment, sense interrupció.
· La figura té color de superfície i el fons és menys dens.
· La figura es localitza davant del fons.
· La diferència entre dos estímuls s'estableix més fàcilment quan els camps
que es comparen són figures que quan són fons.
· La figura es connecta més fàcilment amb significats que el fons.
83. atenció visual
La percepció de la forma dependrà de les característiques de la forma a percebre,
però també de la llum i del subjecte.
copa de Rubin
84. atenció visual
Per enviar un missatge l'usuari percebrà més ràpidament la funció del text emmarcat i
amb relleu dins un botó, que l'enllaç que no està separat del fons perquè trigarà més a
percebre per profunditat i per tant a descobrir la seva funció.
85. atenció visual
Per a una persona que mira, la forma és aquell objecte positiu que apareix en primer
pla, i el fons esdevé el negatiu que queda al darrera.
L'organització figura-fons es considera el tipus de percepció més bàsic.
El positiu és allò que «domina la mirada en l'experiència visual», Dondis (1976).
86. atenció visual
Existeixen molts estudis de percepció de les formes que ens poden ajudar a decidir
dissenys en entorns web per evidenciar elements o objectes per sobre d'un fons.
Un principi essencial és el de pregnància:
planteja la tendència a percebre
l'organització més simple possible d'entre
totes les possibles alternatives.
També Arnheim ens planteja que tendim
apercebre les formes de la manera més
definida possible, és la bona continuació.
87. atenció visual
En anglès s'utilitzen dues paraules diferents: “shape” que fa referència a la forma
material i visible, i “form” que fa referència a la concepció més estructural.
Arnheim cita aquesta frase del pintor Ben Shahn:
«Form is the visible shape of content»
La forma és la forma visible del contingut
Per a nosaltres aquesta idea és rellevant, perquè plantegem que la forma i el contingut
no existeixen l'un sense l'altre, i són dependents, especialment en el disseny de
continguts i informacions en pantalla.
88. atenció visual
Principis de qualitat en disseny de pantalla que afecten a la percecpió de figura i fons:
· Contrast: clarament com a element determinant de la figura i el fons, en una web
entre el fons i els elements actius.
· Fusió: l'efecte contrari al contrast, quan la figura es confon amb el fons degut a les
seves qualitats per crear una sensació de globalitat.
91. atenció visual
· Fons simple - figura complexa: és la forma més comunament utilitzada en disseny
visual i també en el disseny d'interfícies web, on el fons presenta un color sòlid o un
disseny global i simple, i en canvi la informació positiva en primer pla és complexa,
segons el que es vulgui mostrar.
· Fons complexe - figura simple: la opció inversa és poc utilitzada en entorns web que
plantegin una rellevància del contingut més enllà del disseny, i implica situar la
complexitat al fons de forma que la informació rellevant es destaca a partir d'un
exercici de simplicitat visual.
· Reversibilitat: situació visual que fa complicat saber què és el fons i què és la forma
degut a una situació competitiva entre ambdues. La reversibilitat en entorns dissenyats
per a la comunicació visual i textual d'informació és en realitat una dificultat per
accedir a les dades.
95. atenció visual
· Ambigüitat: es produeix en imatges que són dissenyades per tal que hi hagi la
possibilitat de diferents interpretacions d'espai i profunditat.
· Transparència: sovint es fa servir la transparència d'elements en pantalla per
emfatitzar l'efecte d'ambivalència espaial, atès que visualment s'ubiquen les
transparències en diferents plans, i al davant en una estructura web
· Transició: també lligat al disseny gràfic de manera que el fons evoluciona cap a la
figura per confondre's amb ella o a la inversa.
96. atenció visual
la figura s’obre i
evoluciona sobre el
fons
99. atenció visual ... resum
Color: El color és llum. Tot el que veiem al voltant nostre és per efecte de la llum, que
ens permet de distingir un objecte d'altre, així com el seu entorn.
Interferències: Problema de disseny que implica soroll i provoca un ralentiment del
procés mental.
Punt d'entrada: Espai o element d'atenció en un disseny.
Realçament: Sistemes per cridar l'atenció sobre un element en pantalla.
Relació figura-fons: Els elements es perceben com a figures (centre d'atenció visual) o
com a fons (resta del camp de percepció).
Veure és comprendre (Arnheim, 1954)
100. principis de disseny interactiu
LEER NO MATA
Arnheim, R. (1979). Arte y percepción visual. Madrid: Alianza Editorial.
Dondis, D.A. (1976). La sintaxis de la imagen. Barcelona: Gustavo Gili.
Grané, M. (2012). El disseny interactiu a la xarxa. Barcelona: Edicions UB.
Maeda, J. (2010). Las leyes de la simplicidad. Barcelona: Gedisa.
