Post on 29-Jun-2015
Atenció visualMariona Grané. Laboratori de Mitjans Interactius. @CAVUB
principis de disseny interactiu
Grané, 2009
principis de disseny interactiu
Atenció visual
Els elements focalitzadors:
punt d’entradarealçamentrelació figura-fonsinterferències
Un element transversal amb un clar objectiu informatiu:
el color
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.
atenció visual
L’atenció és una força, un mecanisme per l’accés a la informació.
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.
atenció visual
L’atenció és un mecanisme amb funcions concretes per dirigir el processament de la informació.
atenció visual
Color
atenció visual
Color: El color és llum.
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
atenció visual
Els sistemes de treball de color a la web es base en elssRGB 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.
atenció visual
És essencial en infografia i visualització de dades.
felixheinen.de
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ó.
atenció visual
El color distribueix, i destaca els elements en pantalla directament, fa visibles les relacions.
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.
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.
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.
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.
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.
atenció visual
atenció visual
essencial per enfatitzarelements en pantalla
atenció visual
Treballar amb una paleta de colors en el disseny web.
https://kuler.adobe.com
atenció visual
Crear un estil amb una paleta concreta o crear diversos estils amb paletes diferents
atenció visual
L’absència de color s’utilitza també amb funcions estètiques i de creació d’un estil propi.
atenció visual
Molt utilitzat el fet de treballar amb un sol color en contrast amb blanc i negre
atenció visual
La rellevància dels grisos que permeten crear entorns basats en un o dos colors, desenvolupant una funció organitzadora de la pantalla.
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.
«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)
atenció visual
Interferències
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.
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.
atenció visual
estil visual poc lligat a la temàtica
atenció visual
ús d’icones poc comuns que no ajuden a identificar la seva funció.
atenció visual
symmetrylab.com el senyal < és per back no per tancar finestra
atenció visual
Punt d'entrada
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ó.
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
atenció visual
portalcomunicacion.com
moltes opcions i poc clarament distribuides
atenció visual
in3.uoc.edu
la distribució no func iona i e l s colors esdevenen b a r r e r e s d e percepció
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.
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
atenció visual
atenció visual
atenció visual
persuabilidad.com
Realçament
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, ...
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 'Àu s t r i a a l ' Impe r i Alemany el 13 de març de 1938 i votes per la llista del nostre cabdill Adolf Hitler? Si, No».
atenció visual
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.
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.
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.
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).
Es manté el blau en totes les opcions i t e x t o s m e n y s e n aquells que indiquen la cerca i on es troba l'usuari.
«efecte Von Restorff»
atenció visual
atenció visual
Relació figura-fons
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.
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
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ó.
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).
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: p l a n t e j a l a t e n d è n c i a a p e r c e b r e 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ó.
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.
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.
atenció visual
atenció visual
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.
atenció visual
atenció visual
atenció visual
fons complexe i figura complexe
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.
atenció visual
l a figura s ’obre i evoluciona sobre el fons
atenció visual
atenció visual
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)
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.
Mariona Grané. Laboratori de Mitjans Interactius www.lmi.ub.es