Módulo 4 /
Usabilidad en la Web




                       “Algunos conceptos que todo
                          webmáster...
Usabilidad




Tipografía

    El tratamiento tipográfico para la
    Web es diferente al tradicional
    para impresos.

...
Usabilidad



        Tamaño tipográfico
Utilice en la hoja de estilos únicamente medidas
relativas, como em, para asignar...
Usabilidad




      Alineación de párrafos

Utilice para los párrafos de prosa alineación al
margen izquierdo y evite el ...
Usabilidad
Usabilidad




Tamaño tipográfico y retícula

Asigne medidas en em para el ancho y el alto de
las cajas de composición de ...
Usabilidad
Usabilidad
Usabilidad




Fuentes tipográficas comunes

Asigne únicamente fuentes tipográficas
comunes en la hoja de estilo para todo...
Usabilidad
Usabilidad




 Renglones de tamaño medio

Diseñe el texto de prosa para renglones de
tamaño medio 60-80 cpl (caracteres p...
Usabilidad
Usabilidad
Usabilidad
Usabilidad




Imágenes

   Además de textos, los sitios web
   transmiten en gran parte su
   información gracias a las
 ...
Usabilidad




                Pie de foto

Diseñe un estilo para los textos explicativos que
sirvan como pie de foto.
Usabilidad
Usabilidad




      Imágenes como textos

Evite el uso de textos falsos, es decir, imágenes
como textos.
Usabilidad
Usabilidad
Usabilidad




                  Favicon

Diseñe el icono de favoritos, conocido
comúnmente como favicon.
Usabilidad
Usabilidad




Audio

   El diseñador de interfaz deberá
   tener en cuenta que el audio para
   la web tiene un tratamien...
Usabilidad




        Botones con sonido

Evite programar botones con sonido.
Usabilidad
Usabilidad




           Sonido de fondo

Evite usar sonidos de fondo.
Usabilidad
Usabilidad




Estándares

    Asumir los estándares
    web, emitidos por el Consorcio
    W3C, generará para todos los
 ...
Usabilidad




       Estándares del W3C

Use los estándares de la W3C: XHTML para el
contenido y CSS para la presentación.
Usabilidad
Usabilidad




                Doctype

Declare el DOCTYPE o tipo de documento en
cada una de las páginas web del sitio.
Usabilidad
Usabilidad




        Convenciones web

Haga uso de las convenciones web.
Usabilidad
Usabilidad
Usabilidad
Usabilidad
Usabilidad




Independencia de dispositivo

Diseñe con independencia de dispositivo.
Usabilidad
Usabilidad




  Hojas de estilo para impresión

Desarrolle páginas que puedan imprimirse
correctamente, usando hojas de e...
Usabilidad
Usabilidad




Hipervínculos y navegación

    La web está constituida
    esencialmente por hipervínculos.
    Del buen t...
Usabilidad




        Falsos hipervínculos

Evite diseñar señales engañosas de hacer clic.
Usabilidad
Usabilidad




     Estado de hipervínculos

Realice un diseño diferencial para todos los
estados de hipervínculos.
Usabilidad
Usabilidad




      Ubicación del usuario

Proporcione información sobre la ubicación del
usuario a través de variaciones...
Usabilidad
Usabilidad




Hipervínculo a la página de inicio

Habilite el acceso a la página de inicio, mediante
hipervínculo en el l...
Usabilidad
Usabilidad




 Salto de bloques repetitivos

Habilite la posibilidad de saltar vínculos de
navegación repetitivos.
Usabilidad
Usabilidad




Interacción

    Los usuarios no únicamente leen,
    también interactúan con la
    interfaz, por ello es ...
Usabilidad



      Longitud del cuadro de
            búsqueda
Diseñe el cuadro de búsqueda para un máximo
de 30 caracter...
Usabilidad
Usabilidad




   Diseño GUI personalizado

Evite incluir en la página, elementos de Interfaz
Gráfica de Usuario (GUI) red...
Usabilidad
Usabilidad




Posicionamiento

    El posicionamiento orgánico en
    motores de búsqueda, SEO, debe
    empezar desde la...
Usabilidad




            URL complejos

Habilite un sistema de URL inteligentes para
cada página web: cortas y significa...
Usabilidad
Usabilidad




        Titulo de la ventana

Asigne el título de la página web al título de la
ventana y asegúrese que est...
Usabilidad
Usabilidad




    Mapa del sitio dinámico

Programe un mapa de sitio dinámico en XML y
regístrelo en las herramientas de ...
Usabilidad
Usabilidad




Bibliografía imprescindible

    Además de Internet, podemos
    encontrar mucha información en
    varios ...
Usabilidad
Usabilidad
Módulo 5 /
Evaluación heurística de la Usabilidad




                        “Realiza pruebas de usabilidad
             ...
Heurísticas




Qué es una evaluación heurística

    La evaluación heurística o
    evaluación del experto es una
    man...
Fin del curso


           ¡Muchas gracias!

  Sí, gracias por hacer un mundo más
accesible, usable, más cálido y agradabl...
Más info…


Mario Carvajal

mario@astrolabio.com.co
Skype: astromario
MSN: astromario@hotmail.com
Tel: +57 (1) 341948
Cel:...
www.astrolabio.com.co
Upcoming SlideShare
Loading in...5
×

Módulo 4: Usabilidad Web

8,018

Published on

Algunos tips para hacer tu sitio web más fácil de usar.

Published in: Technology, Design
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,018
On Slideshare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
509
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Módulo 4: Usabilidad Web

  1. 1. Módulo 4 / Usabilidad en la Web “Algunos conceptos que todo webmáster debe conocer”
  2. 2. Usabilidad Tipografía El tratamiento tipográfico para la Web es diferente al tradicional para impresos. 01
  3. 3. Usabilidad Tamaño tipográfico Utilice en la hoja de estilos únicamente medidas relativas, como em, para asignar tamaño a los textos.
  4. 4. Usabilidad Alineación de párrafos Utilice para los párrafos de prosa alineación al margen izquierdo y evite el uso de alineación justificada.
  5. 5. Usabilidad
  6. 6. Usabilidad Tamaño tipográfico y retícula Asigne medidas en em para el ancho y el alto de las cajas de composición de la retícula.
  7. 7. Usabilidad
  8. 8. Usabilidad
  9. 9. Usabilidad Fuentes tipográficas comunes Asigne únicamente fuentes tipográficas comunes en la hoja de estilo para todos los textos.
  10. 10. Usabilidad
  11. 11. Usabilidad Renglones de tamaño medio Diseñe el texto de prosa para renglones de tamaño medio 60-80 cpl (caracteres por línea).
  12. 12. Usabilidad
  13. 13. Usabilidad
  14. 14. Usabilidad
  15. 15. Usabilidad Imágenes Además de textos, los sitios web transmiten en gran parte su información gracias a las imágenes. 02
  16. 16. Usabilidad Pie de foto Diseñe un estilo para los textos explicativos que sirvan como pie de foto.
  17. 17. Usabilidad
  18. 18. Usabilidad Imágenes como textos Evite el uso de textos falsos, es decir, imágenes como textos.
  19. 19. Usabilidad
  20. 20. Usabilidad
  21. 21. Usabilidad Favicon Diseñe el icono de favoritos, conocido comúnmente como favicon.
  22. 22. Usabilidad
  23. 23. Usabilidad Audio El diseñador de interfaz deberá tener en cuenta que el audio para la web tiene un tratamiento que debe cumplir con criterios de usabilidad, que muy frecuentemente no son en tenidos cuenta. 03
  24. 24. Usabilidad Botones con sonido Evite programar botones con sonido.
  25. 25. Usabilidad
  26. 26. Usabilidad Sonido de fondo Evite usar sonidos de fondo.
  27. 27. Usabilidad
  28. 28. Usabilidad Estándares Asumir los estándares web, emitidos por el Consorcio W3C, generará para todos los proyectos actuales, continuidad en el futuro. 04
  29. 29. Usabilidad Estándares del W3C Use los estándares de la W3C: XHTML para el contenido y CSS para la presentación.
  30. 30. Usabilidad
  31. 31. Usabilidad Doctype Declare el DOCTYPE o tipo de documento en cada una de las páginas web del sitio.
  32. 32. Usabilidad
  33. 33. Usabilidad Convenciones web Haga uso de las convenciones web.
  34. 34. Usabilidad
  35. 35. Usabilidad
  36. 36. Usabilidad
  37. 37. Usabilidad
  38. 38. Usabilidad Independencia de dispositivo Diseñe con independencia de dispositivo.
  39. 39. Usabilidad
  40. 40. Usabilidad Hojas de estilo para impresión Desarrolle páginas que puedan imprimirse correctamente, usando hojas de estilo para impresión.
  41. 41. Usabilidad
  42. 42. Usabilidad Hipervínculos y navegación La web está constituida esencialmente por hipervínculos. Del buen tratamiento que se les dé, dependerá el éxito de la navegación de los usuarios y una muy buena parte de la usabilidad del sitio. 05
  43. 43. Usabilidad Falsos hipervínculos Evite diseñar señales engañosas de hacer clic.
  44. 44. Usabilidad
  45. 45. Usabilidad Estado de hipervínculos Realice un diseño diferencial para todos los estados de hipervínculos.
  46. 46. Usabilidad
  47. 47. Usabilidad Ubicación del usuario Proporcione información sobre la ubicación del usuario a través de variaciones tipográficas o recursos gráficos.
  48. 48. Usabilidad
  49. 49. Usabilidad Hipervínculo a la página de inicio Habilite el acceso a la página de inicio, mediante hipervínculo en el logotipo y con un vínculo de texto rotulado como “inicio”.
  50. 50. Usabilidad
  51. 51. Usabilidad Salto de bloques repetitivos Habilite la posibilidad de saltar vínculos de navegación repetitivos.
  52. 52. Usabilidad
  53. 53. Usabilidad Interacción Los usuarios no únicamente leen, también interactúan con la interfaz, por ello es importante tener en cuenta las siguientes recomendaciones, para hacer una web más fácil de usar. 06
  54. 54. Usabilidad Longitud del cuadro de búsqueda Diseñe el cuadro de búsqueda para un máximo de 30 caracteres.
  55. 55. Usabilidad
  56. 56. Usabilidad Diseño GUI personalizado Evite incluir en la página, elementos de Interfaz Gráfica de Usuario (GUI) rediseñados y personalizados.
  57. 57. Usabilidad
  58. 58. Usabilidad Posicionamiento El posicionamiento orgánico en motores de búsqueda, SEO, debe empezar desde la misma arquitectura de información de un sitio, seguir con el diseño de interfaz y codificación, y por supuesto en la escritura de contenidos. 07
  59. 59. Usabilidad URL complejos Habilite un sistema de URL inteligentes para cada página web: cortas y significativas.
  60. 60. Usabilidad
  61. 61. Usabilidad Titulo de la ventana Asigne el título de la página web al título de la ventana y asegúrese que este título sea el encabezado de primer nivel
  62. 62. Usabilidad
  63. 63. Usabilidad Mapa del sitio dinámico Programe un mapa de sitio dinámico en XML y regístrelo en las herramientas de webmáster de Google.
  64. 64. Usabilidad
  65. 65. Usabilidad Bibliografía imprescindible Además de Internet, podemos encontrar mucha información en varios libros sobre el tema de usabilidad. Aquí te mostraremos algunos de ellos. 08
  66. 66. Usabilidad
  67. 67. Usabilidad
  68. 68. Módulo 5 / Evaluación heurística de la Usabilidad “Realiza pruebas de usabilidad como un experto”
  69. 69. Heurísticas Qué es una evaluación heurística La evaluación heurística o evaluación del experto es una manera muy rápida, eficaz y económica de descubrir los errores de usabilidad de un sitio web. 01
  70. 70. Fin del curso ¡Muchas gracias! Sí, gracias por hacer un mundo más accesible, usable, más cálido y agradable para tus semejantes, hermanos en la vida.
  71. 71. Más info… Mario Carvajal mario@astrolabio.com.co Skype: astromario MSN: astromario@hotmail.com Tel: +57 (1) 341948 Cel: +57 (315) 4109020 Bogotá, Colombia
  72. 72. www.astrolabio.com.co
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×