diseño y eyetrack

19
Eyetracking Diseño Web

Upload: rubens-yanes

Post on 13-Jun-2015

427 views

Category:

Education


2 download

TRANSCRIPT

Page 1: Diseño y Eyetrack

Eyetracking

Diseño Web

Page 2: Diseño y Eyetrack

Sus páginas

YouTube

eluniversal

BBCMundo

ElMundo.es

espn

kiosko.net

La Patilla

NYTimes

adidas.com

apple.com

avn.info.ve

bancomercantil

camionetica.com

caracasciudaddelafuria.blogspot.com

mlb

MOMA

noticias24.com

nuevoherald

rollingstones

stanford.edu

starwars

sumitoestevez.com

tecnomagazine.net

thefwa.com

tucine

Videocopilot.net

wakulodge

Wikipedia

espanol.babycenter.com

eugeniorecuenco.comfashiongraphic.com

Flickrfriki.net

guardian.co.ukhbo.com

labuenaprensa.blogspot.com

laroche-posay.commarca.com

mercadolibre

clarksoriginalsCNN Expansioncorriere.itdespegar.comdivxonline.infoEFE Verde

elchiguirebipolarelclarin.com

elpais.com

Page 3: Diseño y Eyetrack
Page 4: Diseño y Eyetrack
Page 5: Diseño y Eyetrack
Page 6: Diseño y Eyetrack
Page 7: Diseño y Eyetrack
Page 8: Diseño y Eyetrack
Page 9: Diseño y Eyetrack
Page 10: Diseño y Eyetrack
Page 11: Diseño y Eyetrack
Page 12: Diseño y Eyetrack

Eyetracking

> Poynter Institute +

Estlow Center for

Journalism and New

Media + Eyetool

> 46 personas x 1

hora

> Sitios de noticias

simulados

> Homepage: titulos,

sinopsis, avisos,

multimedia

Page 13: Diseño y Eyetrack

Ruta ocular

Los ojos escanean, no leen

Los ojos marcan un recorrido desde la

parte superior izquierda de la página

hacia abajo

Page 14: Diseño y Eyetrack

Prioridad

Titulares grandes llaman la atención

Ojos suelen fijarse primero en el logo / Id

de la página

Page 15: Diseño y Eyetrack

Titulares

Tipografía grande =

escaneo.

Tipografías más

pequeñas = lectura

1 segundo por titular

Títulos en negrita y

sinopsis incentivan

lectura

Títulos subrayados,

desincentivan lectura

sinopsis

Sinopsis cortas

funcionan mejor

Las rupturas visuales –como una línea o regla– desaniman a la gente a mirar los ítems más allá de la ruptura

Page 16: Diseño y Eyetrack

Navegación

La navegación ubicada en la parte

superior de la página de inicio se

desempeñó mejor

Page 17: Diseño y Eyetrack

Noticias

El formato estándar de una columna

se desempeñaba mejor en términos

del número de fijaciones de ojo

Los párrafos más cortos se

desempeñaron mejor que los más

largos

Cuando nuestros sujetos de prueba

encontraron una historia con un

párrafo de introducción en negrita, el

95 de ellos lo miraron todo o parte de

él.

Page 18: Diseño y Eyetrack

Imágenes

A mayor tamaño de la imagen, la gente

se tomaba más tiempo para mirarla.

Áreas claras y limpias en imágenes

atraen más fijaciones de ojo

Page 19: Diseño y Eyetrack

Multimedia

Mejor recall de hechos, nombres y

lugares cuando eran presentados con la

información en formato texto. Sin

embargo, la información conceptual, no

familiar, era más exactamente

recordada cuando los participantes la

recibían en un formato gráfico

multimedia.

La información de historias sobre

procesos o procedimientos parecía ser

comprendida bien cuando era

presentada usando animación y texto.