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

limbus.fr

El color construeix bellesa

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

tocinalosrosales.com

atenció visual

sindicat.net

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