1) El documento presenta los resultados de una investigación sobre el diseño y formato de páginas web utilizando eye-tracking. 2) Los hallazgos incluyen que la navegación superior es más efectiva, los párrafos cortos y las imágenes grandes atraen más la atención y los anuncios de texto son más efectivos. 3) También se encontró que los gráficos multimedia son mejores para presentar conceptos no familiares.

1. 31/03/2009
la navegación
• La navegación ubicada en la parte superior de la
página de inicio funcionó mejor esto es, fue vista
página de inicio funcionó mejor –esto es fue vista
por el mayor porcentaje de sujetos de prueba y
mirada por la más larga duración.
• En un sondeo de los 25 sitios de noticias más
importantes:
– 11 usaban navegación en la posición superior.
– 14 usaban navegación en la izquierda.
– 7 de los 25 sitios sondeados usaban elementos de
navegación a la izquierda y parte superior.
– Ninguno usaba navegación al lado derecho
Ninguno usaba navegación al lado derecho.
146
1

2. 31/03/2009
diseño del artículo, el estilo de escritura
• La longitud promedio del párrafo. La mayoría de
sitios publican artículos con párrafos de longitud
sitios publican artículos con párrafos de longitud
media –entre 40 y 50 palabras, o dos o tres frases–.
• En un sondeo de 25 sitios principales, sin embargo,
En un sondeo de 25 sitios principales, sin embargo,
encontramos 7 que rutinariamente editaban los
artículos para hacer más cortos los párrafos –con
frecuencia solo una frase por párrafo–.
• Los párrafos más cortos funcionan mejor que los
más largos en la investigación del Eyetrack.
147
2

3. 31/03/2009
• El formato estándar de una columna se
desempeñaba mejor en términos del número de
desempeñaba mejor en términos del número de
fijaciones de ojo –en otras palabras, la gente miraba
más–.
• Existe el uso de descripciones resumidas –sumarios‐
(titulares extendidos de la longitud de un párrafo)
que llevan a los artículos. Sumarios en negrita, el 95
de ellos lo miraron todo o parte de él.
148
3

4. 31/03/2009
Publicidad
• Cuando de verdad se quedan mirando un aviso es
solo durante 0,5 o 1,5 segundos. La buena ubicación
solo durante 0 5 o 1 5 segundos La buena ubicación
y el formato correcto pueden mejorar estas cifras.
• Encontramos que los avisos en las porciones
Encontramos que los avisos en las porciones
superior e izquierda de una página de inicio recibían
más fijaciones de ojo.
• La estrecha proximidad al contenido principal del
sitio ayudó a que los avisos fueran vistos.
149
4

5. 31/03/2009
• Los avisos de texto fueron vistos más atentamente,
de todos los tipos que evaluamos. duración de 7
de todos los tipos que evaluamos duración de 7
segundos; el mejor ‘banners’ logró solo 1,6
segundos, en promedio.
• El tamaño importa. Avisos más grandes tuvieron
una mejor oportunidad de ser vistos. los avisos de
‘media página’ (‘half‐page’ ads) fueron los más
intensamente vistos por nuestros sujetos.
150
5

6. 31/03/2009
Imagenes
• Aprendimos que a mayor tamaño de la imagen, la
gente se tomaba más tiempo para mirarla.
gente se tomaba más tiempo para mirarla
• Nuestra investigación también demostró que caras
Nuestra investigación también demostró que caras
claras y limpias en imágenes atraen más fijaciones
de ojo sobre las páginas de inicio.
j pg
151
6

7. 31/03/2009
Textos para hechos; gráficas multimedia para
los conceptos no familiares
los conceptos no familiares
• Era más probable que los participantes recordaran
correctamente hechos, nombres y lugares cuando eran
yg
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.
g
• La información de historias sobre procesos o procedimientos
parecía ser comprendida bien cuando era presentada
usando animación y texto.
• http://www poynterextra org/eyetrack2004/multimediarecall
http://www.poynterextra.org/eyetrack2004/multimediarecall.
htm
152
7

8. 31/03/2009
http://www.poynterextra.org/eyetrack2004/
multimediarecall.htm
multimediarecall htm
153
8

9. 31/03/2009
http://www.poynterextra.org/eyetrack2004/
videos.htm#
videos htm#
154
9

10. 31/03/2009
155
10

11. 31/03/2009
http://www.poynterextra.org/eyetrack2004/
heatmap.htm
heatmap htm
156
11

12. 31/03/2009
157
12

13. 31/03/2009
http://www.poynterextra.org/eyetrack2004/FQ.htm
158
13

14. 31/03/2009
eyetracking
• Feng‐GUI, una herramienta que simula un experimento de
eye‐tracking mediante inteligencia artificial y teoría de visión
y g g y
por computador (heatMap). Feng‐GUI se basa en un
algoritmo llamado ViewFinder desarrollado por los mismos
creadores que Feng‐GUI.
creadores que Feng‐GUI
• La herramienta es totalmente gratuita y nos permite analizar
cualquier página web o imagen simplemente subiéndola a su
servidor.
14

15. 31/03/2009
Caso Práctico
15

16. 31/03/2009
http://www.rumbo.es/alojamientos/hoteles/buscadorHoteles.do?utm_m
edium=affiliates&utm_source=tradedoubler&WT.mc_id=tradedoubler&or
g=TD‐noreferer
161
16

17. 31/03/2009
162
17

18. 31/03/2009
eyetracking
http://crazyegg.com/
Modo de funcionamiento: Añadir etiqueta a nuestras páginas y luego lo
testea
18

19. 31/03/2009
Vischeck
19

20. 31/03/2009
165
20

21. 31/03/2009
Las imágenes marcan el camino.
•
Los encabezados y negritas son importantes.
bd
•
Evitar párrafos largos.
•
Los listados son atractivos.
•
Los menús son protagonistas
Los menús son protagonistas
•
21

22. 31/03/2009
Web developer tools
Revisión ortográfica y gramatical
•
Fundéu Vademécum http://www.fundeu.es/esurgente/Lenguaes
–
Fotos
•
– 1. Adobe Photoshop
– 2. GIMP
Diseñar, desarrollar y mantener de forma rápida Websites
Diseñar desarrollar y mantener de forma rápida Websites
•
– 3. Adobe Dreamweaver
Captura de colores (http://www.colorcop.net/)
•
– 4 Color Cop
4. Color Cop
Web developer toolbar
•
– 5. Firefox web developer toolbar
• Diseñado para Firefox Flock Mozilla ySeamonkey y plataformas que
Diseñado para Firefox, Flock, Mozilla ySeamonkey, y plataformas que
soportan estos browsers Windows, Mac OS X y Linux.
Web developer tool
•
– 6. Internet Explorer Toolbar
6. Internet Explorer Toolbar
22

23. 31/03/2009
Web developer tools
– 7. Firebug
• Editar, debug, y monitorizar CSS, HTML, y JavaScript live
Editar, debug, y monitorizar CSS, HTML, y JavaScript live
en web page.
Web accessibility desktop testing tool
•
– 8. Watchfire Bobby
• Watchfire Bobby es una herramienta de escritorio para
testeo de accesibilidad Web
de accesibilidad Web.
– 9. JsUnit
• Unit Testing framework (en el client‐side (in‐browser))
Unit Testing framework (en el client‐side (in‐browser))
JavaScript. Incluye una plataforma para automatizar la
ejecución de tests en multiples browsers y máquinas
ejecutando dif
j d diferentes S O
S.O.
23

24. 31/03/2009
Web developer tools
10. Xenu
•
– Xenu’s Link Sleuth (TM) chequea Web sites para links rotos. (verificación de
links, imágenes, frames, plug‐ins, backgrounds, mapas de imágenes locales,
li k i á f l i bk d diá ll
style sheets, scripts y java applets. Muestra continuamente actualizada la lista
de URLs que puedes orednar por diferentes criterios. Permite realizar informes
de ello.
11. Vischeck
•
– Vischeck muestra las Web como las ven los discapacitados visuales
(daltónicos). Se puede ejecutar online con ficheros de imágenes o en una
página web. También se puede descargar y ejecutar en PC.
12. Feng GUI
•
13. Fiddler
•
Fiddler es un HTTP Debugging Proxy que permite registrar todo el tráfico HTTP
•
entre tu PC e Internet.
24

25. 31/03/2009
Web developer tools
14. BrowserCam
•
Browsercam proporciona “Cross‐Browser Screen Captures and Instant
•
Remote Access”, los desarrolladores pueden testear la apariencia y
R A ”l d ll d d l ii
funcionalidad completa de websites a través de multiples web browsers
(Ej: Internet Explorer 7, Firefox etc) y sistemas operativos (Ej: Windows XP,
Windows Vista etc) asegurándo que la calidad de nuestros sitios sea la
Windows Vista etc) asegurándo que la calidad de nuestros sitios sea la
mejor posible.
Ofrece 3 servicios principales:
• Screen Capture Service
Screen Capture Service
• Remote Access Service
• DeviceCam
15. RegexBuddy
15. RegexBuddy
• Permite crear expresiones regulares que encajan con lo que quieres.
Entiende regexes complejas escritas por otros. Testea rápidamente
cualquier regex con ejemplos de strings y ficheros, evitando errores en los
cualquier regex con ejemplos de strings y ficheros, evitando errores en los
datos.
25

26. 31/03/2009
Libros Recomendados
• Nielsen Jacob, Hoa Loranger. “Usabilidad
Prioridad en el diseño Web Ed Anaya 2007
Prioridad en el diseño Web”. Ed. Anaya 2007.
ISBN: 84‐415‐2092‐2006
• Nielsen Jacob. “Usabilidad: diseño de sitios
l b“ bld d d ñ d
Web”. Ed. Prentice Hall, 2000. ISBN:
8420530085
8 20 3008
• Louis Rosenfeld y Peter Morville. “Arquitectura
de la información para la WWW”, Ed.
McGraw‐Hill,2000. ISBN‐10: 9701026284
26

27. 31/03/2009
Links
• Forms
– Starling, A. Usability and HTML Forms.
Starling, A. Usability and HTML Forms.
Artículo que aporta una visión general sobre los
formularios y contiene recomendaciones prácticas.
Jarret, C. y Miller, S. Four steps for choosing form elements
on the Web.
(PDF: 58Kb/9 pág.). Excelente artículo para saber que
control escoger
Nielsen, J.Drop‐Down Menus: Use Sparingly.
Recomendaciones sobre el uso de combos y menús
desplegables.
desplegables
27

28. 31/03/2009
Web Developers http://erkcm.wordpress.com/2009/01/28/15‐
must‐have‐web‐developer‐tools‐for‐beginners/
p f g
eyetracking
• http://crazyegg.com/
• http://www.feng‐gui.com/default.aspx
– http://www.acagamic.com/research/eyetracking/top‐ten‐
eye‐tracking‐blogs/
eye tracking blogs/
Usabilidad
• www.inteco.es/file/1000185992
28