Daniel Torres BurrielUsabilidad web para PYMES y autónomos9 de noviembre de 2009                         www.torresburriel...
Daniel Torres Burriel           Índice de contenidos●   Qué es la usabilidad●   Contexto●   Objetivo: rentabilidad > ganar...
Daniel Torres Burriel              Qué es la usabilidad●   Definición●   Principios relacionados    –   Estándares web    ...
Daniel Torres Burriel               Definición de usabilidadLa usabilidad (del inglés usability) es la medida de la facili...
Daniel Torres Burriel            Definición de usabilidadConceptos que aparecen:● Medida● Facilidad de uso● Software● Hard...
Daniel Torres Burriel          Definición de usabilidadLa clave de un sitio usable es que quien navega por él consigaenten...
Daniel Torres Burriel              Estándares web (I)Los estándares web son un conjunto de recomendaciones dadaspor el Wor...
Daniel Torres Burriel         Estándares web (II)● HTML   (HyperText Markup Language)● CSS    (Cascading Style Sheets)
Daniel Torres BurrielEstándares web (III)
Daniel Torres BurrielEstándares web (IV)
Daniel Torres BurrielEstándares web (V)
Daniel Torres BurrielEstándares web (VI)
Daniel Torres BurrielEstándares web (VII)
Daniel Torres Burriel                  Errores más comunes ●    Top 10 de los errores en diseño web de 2005*      ➔   Prob...
Daniel Torres Burriel    Back to Basics in Web Design➔   Que el texto sea legible➔   Que los contenidos respondan a sus ex...
Daniel Torres Burrielorigen de estas conclusiones     scientific web design: 23 actionable lessons               from eye-t...
Daniel Torres Burrielconclusión #1el texto atrae más la atención que las imágenesobservado desde estudios de 1994 (nielsen...
Daniel Torres Burrielconclusión #2inicialmente, el ojo fija su atención en la partesuperior izquierda de la pantallacontext...
Daniel Torres Burrielconclusión #3los usuarios se fijan en la partesuperior izquierda de lapantalla y posteriormente en laz...
Daniel Torres Burrielconclusión #4los usuarios ignoran los banners                                   www.torresburriel.com
Daniel Torres Burrielconclusión #5el texto con formato “divertido” es menos atrayenteque el texto convencionalse confunde ...
Daniel Torres Burrielconclusión #6los usuarios se fijan más en los números escritoscon números que con textolos números se ...
Daniel Torres Burrielconclusión #7el tamaño del texto influye en la conducta de losusuariosel texto grande invita a escanea...
Daniel Torres Burrielconclusión #8los usuarios sólo se fijan en el tagline si les interesasi el tagline es un formalismo pe...
Daniel Torres Burrielconclusión #9los usuarios escanean pequeñas porciones de lapáginapuede ser una ventaja: seccionemos l...
Daniel Torres Burrielconclusión #10los párrafos cortos son más adecuados que loslargoshay que diseñar para comunicar peque...
Daniel Torres Burrielconclusión #11los textos a una columna proporcionan una mejorfijación visual que los multi-columnano p...
Daniel Torres Burrielconclusión #12la publicidad situada en la parte superior izquierdaes la que recibe mayor atención vis...
Daniel Torres Burrielconclusión #13la publicidad situada junto al mejor contenido es laque se visualiza más a menudoel con...
Daniel Torres Burrielconclusión #14la publicidad textual es la que más se ve de formaintencionadala gente no pasa mucho ti...
Daniel Torres Burrielconclusión #15las imágenes grandes son las que más llaman laatención del usuariosi vamos a usar imáge...
Daniel Torres Burrielconclusión #16las imágenes con caras son las que atraen másfijación de la miradalas imágenes artística...
Daniel Torres Burrielconclusión #17los titulares deben permanecer limpios, claros eimpolutoslos titulares son lo primero q...
Daniel Torres Burrielconclusión #18los usuarios ocupan mucho tiempo mirando losmenús y los botonesmerecen una atención esp...
Daniel Torres Burrielconclusión #19los listados aumentan la atención visual del usuarioson un aliadoson un elemento de cre...
Daniel Torres Burrielconclusión #20los bloques largos de texto son evitados por elusuariono importa lo relevante de la inf...
Daniel Torres Burrielconclusión #21dar algún formato al texto hace que se le presteatención, pero con medidaaliados: negri...
Daniel Torres Burriel  conclusión #22   el espacio en blanco es nuestro amigoBote de Zamora, obra de arte califal cordobés...
Daniel Torres Burrielconclusión #23las herramientas de ayuda a la navegación son másefectivas en la zona superior de la pa...
Daniel Torres Burriel       gracias ;-)torresburriel@gmail.com                    www.torresburriel.com
Próxima SlideShare
Cargando en…5
×

Networking de Usabilidad - Daniel Torres Burriel. SATi pyme

742 visualizaciones

Publicado el

Presentación del Networking sobre Usabilidad Web a cargo de Daniel Torres Burriel, consulto de SATi pyme Zaragoza.

0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
742
En SlideShare
0
De insertados
0
Número de insertados
2
Acciones
Compartido
0
Descargas
7
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Networking de Usabilidad - Daniel Torres Burriel. SATi pyme

  1. 1. Daniel Torres BurrielUsabilidad web para PYMES y autónomos9 de noviembre de 2009 www.torresburriel.com
  2. 2. Daniel Torres Burriel Índice de contenidos● Qué es la usabilidad● Contexto● Objetivo: rentabilidad > ganar dinero● Evaluación de la usabilidad: test de usuarios● Aspectos prácticos: conclusiones eyetracking
  3. 3. Daniel Torres Burriel Qué es la usabilidad● Definición● Principios relacionados – Estándares web – Vista en pantalla – Ayuda contextual
  4. 4. Daniel Torres Burriel Definición de usabilidadLa usabilidad (del inglés usability) es la medida de la facilidad de uso de un producto oservicio, típicamente una aplicación software o un aparato (hardware)WikipediaLa usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usadoy ser atractivo para el usuario, en condiciones específicas de usoOrganización Internacional para la EstandarizaciónUsabilidad es un atributo de calidad que mide lo fáciles de usar que son las interfaces webJakob NielsenDesarrollo de sistemas fáciles de usar y de aprenderJenny PreeceFacilidad de uso y la aceptabilidad de un sistema o producto para una clase particular deusuarios que llevan a cabo tareas específicas en un entorno específicoNiegel BevanDefinimos Usabilidad de un sistema o herramienta como una medida de su utilidad, facilidadde uso, facilidad de aprendizaje y apreciación para una tarea, un usuario y un contexto dadoEduardo Mercovich
  5. 5. Daniel Torres Burriel Definición de usabilidadConceptos que aparecen:● Medida● Facilidad de uso● Software● Hardware● Aplicación web● Comprender● Aprender● Usar● Atracción● Calidad● Aceptabilidad● Usuarios● Tareas● Entorno
  6. 6. Daniel Torres Burriel Definición de usabilidadLa clave de un sitio usable es que quien navega por él consigaentender su estructura y realizar con satisfacción aquello quepretendía realizar.J. C. García (www.usalo.es)
  7. 7. Daniel Torres Burriel Estándares web (I)Los estándares web son un conjunto de recomendaciones dadaspor el World Wide Web Consortium (W3C) acerca de cómo crear einterpretar documentos para la Web.
  8. 8. Daniel Torres Burriel Estándares web (II)● HTML (HyperText Markup Language)● CSS (Cascading Style Sheets)
  9. 9. Daniel Torres BurrielEstándares web (III)
  10. 10. Daniel Torres BurrielEstándares web (IV)
  11. 11. Daniel Torres BurrielEstándares web (V)
  12. 12. Daniel Torres BurrielEstándares web (VI)
  13. 13. Daniel Torres BurrielEstándares web (VII)
  14. 14. Daniel Torres Burriel Errores más comunes ● Top 10 de los errores en diseño web de 2005* ➔ Problemas de legibilidad ➔ Enlaces alejados de su formato estándar ➔ Flash ➔ Contenido no escrito para la web ➔ Búsquedas deficientes ➔ Incompatibilidades entre navegadores ➔ Formularios incómodos ➔ Ausencia de vías de contacto con los responsables del sitio web ➔ Maquetación con ancho fijo ➔ Ampliación inadecuada de las imágenes* Top Ten Web Design Mistakes of 2005 - http://www.useit.com/alertbox/designmistakes.html
  15. 15. Daniel Torres Burriel Back to Basics in Web Design➔ Que el texto sea legible➔ Que los contenidos respondan a sus expectativas➔ Que los sistemas de navegación y búsqueda les ayuden a encontrar lo que buscan➔ Formularios más cortos y simples➔ Que no haya cosas que no funcionen, enlaces que no lleven a ninguna parte, contenido desactualizado
  16. 16. Daniel Torres Burrielorigen de estas conclusiones scientific web design: 23 actionable lessons from eye-tracking studies www.torresburriel.com
  17. 17. Daniel Torres Burrielconclusión #1el texto atrae más la atención que las imágenesobservado desde estudios de 1994 (nielsen)es un tema recurrente: aparece en sucesivos estudioslos usuarios van en busca de información (asociada a texto,no a imágenes) www.torresburriel.com
  18. 18. Daniel Torres Burrielconclusión #2inicialmente, el ojo fija su atención en la partesuperior izquierda de la pantallacontexto occidental (sistema de escritura)lectura en “f”lectura en “l” www.torresburriel.com
  19. 19. Daniel Torres Burrielconclusión #3los usuarios se fijan en la partesuperior izquierda de lapantalla y posteriormente en lazona superior de la misma,para después fijar su atenciónprogresivamente hacia abajo yhacia la derecha www.torresburriel.com
  20. 20. Daniel Torres Burrielconclusión #4los usuarios ignoran los banners www.torresburriel.com
  21. 21. Daniel Torres Burrielconclusión #5el texto con formato “divertido” es menos atrayenteque el texto convencionalse confunde con bannersdificultad para localizar información en bloques de textomulticolorimplica una pérdida de información para el usuario www.torresburriel.com
  22. 22. Daniel Torres Burrielconclusión #6los usuarios se fijan más en los números escritoscon números que con textolos números se identifican rápidamente escaneandolos números, escritos, no se localizan escaneando www.torresburriel.com
  23. 23. Daniel Torres Burrielconclusión #7el tamaño del texto influye en la conducta de losusuariosel texto grande invita a escanear la páginael texto pequeño invita a leerlo www.torresburriel.com
  24. 24. Daniel Torres Burrielconclusión #8los usuarios sólo se fijan en el tagline si les interesasi el tagline es un formalismo perderá relevanciael tagline se lee de forma muy rápidasi no es comprensible, se obviará www.torresburriel.com
  25. 25. Daniel Torres Burrielconclusión #9los usuarios escanean pequeñas porciones de lapáginapuede ser una ventaja: seccionemos la interfaz¿qué información es la importante? destaquémosla www.torresburriel.com
  26. 26. Daniel Torres Burrielconclusión #10los párrafos cortos son más adecuados que loslargoshay que diseñar para comunicar pequeñas porciones deinformaciónla atención del usuario se centra en esas pequeñas porcionesde informaciónminimizar siempre que el contexto lo permita www.torresburriel.com
  27. 27. Daniel Torres Burrielconclusión #11los textos a una columna proporcionan una mejorfijación visual que los multi-columnano proporcionar demasiada información a la vezla simplicidad facilita la lecturaposibilidad de que el usuario ignore mucha información www.torresburriel.com
  28. 28. Daniel Torres Burrielconclusión #12la publicidad situada en la parte superior izquierdaes la que recibe mayor atención visualel ojo es ahí donde fija su atencióncontexto occidental (sistema de escritura)atención visual no implica ‘click’ www.torresburriel.com
  29. 29. Daniel Torres Burrielconclusión #13la publicidad situada junto al mejor contenido es laque se visualiza más a menudoel contexto puede proporcionar publicidad más efectivasi lo añadimos a #12 puede ser una buena opción www.torresburriel.com
  30. 30. Daniel Torres Burrielconclusión #14la publicidad textual es la que más se ve de formaintencionadala gente no pasa mucho tiempo mirando cosas queaparentan ser publicidadlos anuncios textuales lo aparentan menos www.torresburriel.com
  31. 31. Daniel Torres Burrielconclusión #15las imágenes grandes son las que más llaman laatención del usuariosi vamos a usar imágenes, el tamaño sí importala imagen tiene más valor para el usuario cuando tiene muchainformación (detalles)la imagen debe ser, siempre, relevante en el contexto www.torresburriel.com
  32. 32. Daniel Torres Burrielconclusión #16las imágenes con caras son las que atraen másfijación de la miradalas imágenes artísticas o las abstractas, si bien pueden serconsistentes con el diseño, no atraen la atenciónlas fotos de gente real atraen la atención más que las demodelos www.torresburriel.com
  33. 33. Daniel Torres Burrielconclusión #17los titulares deben permanecer limpios, claros eimpolutoslos titulares son lo primero que se leeevitar los obstáculos para su lecturaes la primera impresión (que es la que cuenta) www.torresburriel.com
  34. 34. Daniel Torres Burrielconclusión #18los usuarios ocupan mucho tiempo mirando losmenús y los botonesmerecen una atención especial a la hora de su diseñocaptan una gran fijación de la atenciónes una de las partes más importantes de una web www.torresburriel.com
  35. 35. Daniel Torres Burrielconclusión #19los listados aumentan la atención visual del usuarioson un aliadoson un elemento de creación de porciones de contenidose llevan muy bien con el escaneadodestacan la información importantefacilitan la localización de contenidos www.torresburriel.com
  36. 36. Daniel Torres Burrielconclusión #20los bloques largos de texto son evitados por elusuariono importa lo relevante de la información o lo bien escritosque están: se evita su lecturanecesidad de romper ese esquema, hacia bloques máscortosnecesidad de destacar la información relevante dentro deesos bloques de texto www.torresburriel.com
  37. 37. Daniel Torres Burrielconclusión #21dar algún formato al texto hace que se le presteatención, pero con medidaaliados: negrita, cursiva, highlighttener presente que un abuso de formato hace perder lafacilidad de escaneado www.torresburriel.com
  38. 38. Daniel Torres Burriel conclusión #22 el espacio en blanco es nuestro amigoBote de Zamora, obra de arte califal cordobés www.torresburriel.com
  39. 39. Daniel Torres Burrielconclusión #23las herramientas de ayuda a la navegación son másefectivas en la zona superior de la pantalla www.torresburriel.com
  40. 40. Daniel Torres Burriel gracias ;-)torresburriel@gmail.com www.torresburriel.com

×