Usabilidad Convertibilidad 5

480 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
480
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Usabilidad Convertibilidad 5

  1. 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. 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. 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. 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. 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. 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. 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. 8. 31/03/2009 http://www.poynterextra.org/eyetrack2004/ multimediarecall.htm multimediarecall htm 153 8
  9. 9. 31/03/2009 http://www.poynterextra.org/eyetrack2004/ videos.htm# videos htm# 154 9
  10. 10. 31/03/2009 155 10
  11. 11. 31/03/2009 http://www.poynterextra.org/eyetrack2004/ heatmap.htm heatmap htm 156 11
  12. 12. 31/03/2009 157 12
  13. 13. 31/03/2009 http://www.poynterextra.org/eyetrack2004/FQ.htm 158 13
  14. 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. 15. 31/03/2009 Caso Práctico 15
  16. 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. 17. 31/03/2009 162 17
  18. 18. 31/03/2009 eyetracking http://crazyegg.com/ Modo de funcionamiento: Añadir etiqueta a nuestras páginas y luego lo  testea 18
  19. 19. 31/03/2009 Vischeck 19
  20. 20. 31/03/2009 165 20
  21. 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. 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. 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. 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. 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. 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. 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. 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

×