• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Atencio
 

Atencio

on

  • 362 views

 

Statistics

Views

Total Views
362
Views on SlideShare
180
Embed Views
182

Actions

Likes
0
Downloads
1
Comments
0

4 Embeds 182

http://www.lmi.ub.edu 147
https://campusvirtual2.ub.edu 24
http://www.lmi.ub.es 10
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Atencio Atencio Presentation Transcript

    • 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’entrada realçament relació figura-fons interferè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 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.
    • 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 construeix bellesa limbus.fr
    • 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 sendinsen en un fons. Aquesta percepció també depèn del grau de saturació dels colors, els colors brillants reforcen lapropament 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 datraure latenció 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 enfatitzar elements 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, enssubmergeix 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 dentorns interactius i al procés comunicatiu visual en general. Molts problemes dinterferències en un disseny dinterfície neixen d’un desconeixement o mala aplicació dels principis de disseny.
    • atenció visual · Interferència dStroop: un aspecte que semblava irrellevant dun estímul desencadena un procés que interfereix en el procés rellevant de lestímul. Lexemple més conegut és el temps que es triga a donar nom al color dunes paraules quan el seu significat no es correspon al color. · Interferència de Garner: una variació irrellevant dun estímul desencadena un procés mental que interfereix en els processos que impliquen un aspecte rellevant de lestímul. Trobar icones il·lògics, o que sutilitzen amb funcions que no són les comunes, ... · Interferència pro-activa: els records interfereixen en laprenentatge. Les convencions apreses inicialment pel costum ens porten a haver-nos de ressituar per aprendre noves formes daccedir a la informació, navegar o llegir una informació. · Interferència retroactiva: laprenentatge interfereix en els records. Una quantitat determinada de dades noves pot interferir en el record de dades que ja teníem. Laprenentatge de noves formes dinteracció 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 dentrada
    • atenció visual Punt dentrada: Espai o element datenció en un disseny. Totes les persones quan ens topem per primera vegada amb un objecte, fins i tot amb un objecte informatiu, centrem latenció en els elements que han estat dissenyats per atraure, ... les tapes dun llibre, els titulars del diari, la fotografia principal duna revista... És la nostra impressió inicial dun objecte. Un usuari web també té una impressió inicial davant una pantalla. I uns objectius de cerca d’informació.
    • atenció visual Punt dentrada 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 moltes opcions i poc clarament distribuides portalcomunicacion.com
    • atenció visual la distribució no funciona i els colors esdevenen barreres de percepció in3.uoc.edu
    • atenció visual Cal leliminació o reducció de barreres, evitant elements que dificulten latenció de lusuari, 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 latenció 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 dinformació, · oferir una bona orientació de navegació en pantalla, · els punts de visió han de poder ser inspeccionats per lusuari amb el mínim de distraccions possible. · reduir el nombre d’elements i opcions als necessaris
    • atenció visual
    • atenció visual
    • atenció visual Realçament persuabilidad.com
    • atenció visual Realçament: Sistemes per cridar latenció 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 dAlemanya del 1938. «Estàs dacord amb la consumada reunificació dÀustria a lImperi 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. Lexperiment de Benway (1998) va mostrar la ceguesa als banners quan en demanar a un grup dusuaris 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 linici 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). «efecte Von Restorff» Es manté el blau en totes les opcions i textos menys en aquells que indiquen la cerca i on es troba lusuari.
    • atenció visual
    • atenció visual Relació figura-fons
    • atenció visual Relació figura-fons: Els elements es perceben com a figures (centre datenció 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é, sesté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 sestableix 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 lusuari percebrà més ràpidament la funció del text emmarcat i amb relleu dins un botó, que lenllaç 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. Lorganització figura-fons es considera el tipus de percepció més bàsic. El positiu és allò que «domina la mirada en lexperiè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 dun fons. Un principi essencial és el de pregnància: planteja la tendència a percebre lorganització més simple possible dentre 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 sutilitzen 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 lun sense laltre, 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ó: lefecte 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 dinterfí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 dun 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 dinformació é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 despai i profunditat. · Transparència: sovint es fa servir la transparència delements en pantalla per emfatitzar lefecte dambivalència espaial, atès que visualment subiquen 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 confondres amb ella o a la inversa.
    • atenció visual la 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 daltre, així com el seu entorn. Interferències: Problema de disseny que implica soroll i provoca un ralentiment del procés mental. Punt dentrada: Espai o element datenció en un disseny. Realçament: Sistemes per cridar latenció sobre un element en pantalla. Relació figura-fons: Els elements es perceben com a figures (centre datenció 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