USABILIDAD WEB


PRODUCCION DE MULTIMEDIA


         SENA
DERLY KATERIN ALDANA NOVA
BRENDA TATIANA ARAGÓN RIAÑO
OLGA LUCÍA GONZÁLEZ HUERTAS
 GISSELLE CRISTINA LÓPEZ PEÑA
MARIA LUCILA MUÑOZ SALCEDO
 JOHANNA QUIROGA ROMERO
USABILIDAD WEB

        Llamamos usabilidad
        a la experiencia que
        tiene un usuario
        cuando interactúa con
        páginas de un web.
Un sito web   • Es claro y el usuario
                entiende el contenido y
                navega por el web de una
                forma cómoda y sencilla.

              • webs claros y fácilmente
                navegables por el usuario

              • Disponga de la información
                que le queremos hacer
                llegar de una manera clara y
                sencilla.

              • La    usabilidad   es    la
                combinación de los factores
                que afectan al usuario
                cuando interactúa con las
                páginas web, estos pueden
                ser entre otros:
Por qué es importante la usabilidad
       La aplicación correcta de los sitios de la usabilidad en un sitio
        web, permitirán que sus visitantes encuentren rápidamente la
         información que buscan y sientan que su sitio merezca ser
                             visitado nuevamente

        Lo normal es que un visitante no lea con detalle ni siquiera la
        mínima parte de una página web. En su lugar, por economía de
        tiempo, él realiza un rápido barrido visual buscando elementos
                             que llamen la atención.

         Es interesante que las animaciones publicitarias (banners)
           generalmente son pasadas por alto. Nuestro cerebro se
        acostumbra al hecho de que animación significa publicidad, lo
                   que lleva a obviar este tipo de publicidad.
En qué momento se ha de considerar
            la usabilidad

 La usabilidad debe ser considerada en todo momento, desde el mismo comienzo
  del proceso de desarrollo hasta las últimas acciones antes de hacer el sistema,
  producto o servicio disponible al público.



 Antes de iniciar el proyecto es esencial tener una idea acerca de las características
  de los usuarios y de los aspectos del producto de mayor interés y necesidad. Una
  vez que el producto está en el mercado se debería preguntar a los usuarios acerca
  de sus necesidades y actitud respecto del mismo.
HOJAS DE ESTILO
Es el lenguaje usado para definir la presentación de un documento
estructurado escrito en HTML o XML.

Su objetivo es separar lo que es el contenido de las paginas web de su
propia presentación o formato, de este modo se obtiene una Web
mucha más flexible a cambios y mucho más estándar evitando errores
en el código HTML.
VENTAJAS:
-Asegura la continuidad visual a medida que el usuario navega por el
sitio.
-Control centralizado de la presentación de un sitio web completo
con lo que se agiliza de forma considerable la actualización del
mismo.

-Separación del contenido de la presentación, lo que facilita que
muestre la página, la modificación de la visualización del documento
sin alterar el contenido del mismo.

-Nos permite definir aspectos concretos de un documento,
facilitando el diseño de los documentos. Para usuarios con
discapacidades esos trucos hacen muy difícil la comprensión de los
documentos
LIMITACIONES
*Dificultad para el alineamiento vertical; así como el centrado
horizontal se hace de manera evidente en CSS2.1, el centrado vertical
requiere de diferentes reglas en combinaciones no evidentes, o no
estándares.

* Los selectores no pueden usarse en orden ascendente según la
jerarquía del DOM (hacia padres u otros ancestros) como se hace
mediante xpath. La razón que se ha usado para justificar esta carencia
por parte de la W3C, es para proteger el rendimiento del navegador,
que de otra manera, podría verse comprometido
REGLAS
-Visibilidad del estado del sistema: El sistema debe siempre
mantener a los usuarios informados del estado del sistema, con una
realimentación apropiada y en un tiempo razonable.

-Utilizar el lenguaje de los usuarios: El sistema debe hablar el
lenguaje de los usuarios, con las palabras, las frases y los conceptos
familiares, en lugar de que los términos estén orientados al sistema.
Utilizar convenciones del mundo real, haciendo que la información
aparezca en un orden natural y lógico.
-Consistencia y estándares: Los usuarios no deben tener que
preguntarse si las diversas palabras, situaciones, o acciones significan la
misma cosa. En general siga las normas y convenciones de la plataforma
sobre la que está implementando el sistema.

-Prevención de errores: Es importante prevenir la aparición de errores
que mejor que generar buenos mensajes de error.
-Minimizar la carga de la memoria del usuario: El usuario no debería
tener que recordar la información de una parte del diálogo a la otra. Es
mejor mantener objetos, acciones, y las opciones visibles que
memorizar.

-Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de los
errores: Que los mensajes de error se deben expresar en un lenguaje
claro, se debe indicar exactamente el problema, y deben ser
constructivos.
ACCESO PARA DISCAPACITADOS
Acceder a la información en Internet
• Para los usuarios con discapacidad, Internet tiene un
   mayor significado. Mucha gente con discapacidad utiliza
   un ordenador con tecnología adaptada para navegar por
   la red, software de reconocimiento de voz como si fuera
   un periódico diario en línea.

•   Por ejemplo, un web que consiste enteramente en
    gráficos y acoplamientos de imágenes puede parecer
    bonita y agradable a un usuario sin discapacidad, pero los
    "recreadores de voz" no pueden traducir gráficos. Por lo
    tanto, alguien que es ciego y con software
    "screenreading" para tener acceso a la página, la
    información es totalmente inaccesible a menos que el
    autor de la página haya realzado los gráficos y los mapas
    de imagen con alternativas del texto.
•   La inhabilidad de una persona no tiene que ser tan
    extrema como la ceguera, pero la que tenga puede
    afectar su capacidad de utilizar la red con eficacia.
•   Algunos usuarios pueden tener acceso a páginas que se
    han diseñado incorrectamente por lo que un usuario
    discapacitado nunca podrá accerder al 100 % del
    contenido de nuestra página.
ACCESIBILIDAD PARA DISCAPACITADOS
                 VISUALES
• Las paginas demasiado largas son mas duras de
  asimilar para un usuario con problemas visuales.
• Para facilitar estos problemas es recomendado
  usar HTML.
• Para satisfacer a estos usuarios es bueno usar
  tamaños relativos. EJ: Hoja de estilo
• Para mostrar imágenes es bueno utilizar el
  atributo ALT. Este sirve para poder oír el texto
  alternativo o lo podrán ver mejor.
TAMAÑO DE UNA PAGINA WEB
• Los Web deben ser de un tamaño menor a 150KB.
• El uso de imágenes debe ser moderado ya que las imágenes
  distraen mucho
• También es porque las imágenes pesan bastante y esto
  ayudara al ordenador a estar mas lento.
• Siempre es bueno utilizar el formato mas eficiente
• Es bueno el reducir el tamaño de estas ya que nos sirve
  bastante para que el archivo sea mas rápido.
• Las animaciones son valiosas pero no en toda clase de Pág.
  Web queda bien así que hay que saber escoger
LOS MENUS Y EL USUARIO
Muchos o casi todas las webs utilizan menú.
Los menús ayudan a los usuarios a no perder el
contenido de nuestra web; puede ser utilizado
también conjuntamente con otras ayudas.
                      .
debe disponerlos en la parte superior.
TITULADOS DEL MENU
• Los títulos del menú deben ser cortos.
• Se debe ajustar a un formato definido
  usando letras mayúsculas o minúsculas.
• Utilice un separador para distinguir una
  categoría de otra.
• Intente no utilizar los menús de varios niveles
  de cascada.
COLORES Y SUS APLICACIONES
       NATURALES
• El verde es positivo, sugiere naturaleza
  bosques, plantas, vida, estabilidad.
• El azul seriedad, espiritualidad y elegancia.
• El violeta es le color de las fantasía, alegría y
  en el ámbito negativo puede sugerir pesadillas
  y locura.
• El color mas aconsejable es el blanco este
  actúa como equilibrio entre los colores, hace
  las paginas agradables.
• La gama de colores debe tener de 2 a 3.
QUÉ ES UN LINK?


Un LINK es un soporte que nos permite acceder
a otros contenidos relacionados con el tema
que estamos tratando ya sea en el mismo sitio
ó en uno relacionado.
EJEMPLOS DE
LINKS
APARIENCIA
ESCRIBIR PARA LA
      WEB
oAl escribir para la web debemos ser
 claros y concisos
Cuál de las
      dos es
      preferible
• v
      leer?
El formato debe ser
agradable, debe
facilitar al usuario
la lectura.
Si utiliza como formato una tabla,
recuerde que las tablas complejas
tardan más en descargar, así que si
divide el contenido en tablas múltiples
será más simple.
Finalmente, la redacción y la ortografía son
fundamentales al momento de escribir para la web
CONSEJOS
Una web debe permitir al usuario resolver sus
 requisitos de una forma eficaz y eficiente
El diseño y la interfaz deben ser fáciles para
 el usuario, deben permitirle navegar de una
 manera intuitiva
El diseño de una página no debe crear
 distracción en los usuarios

Usabilidad Web

  • 1.
  • 2.
    DERLY KATERIN ALDANANOVA BRENDA TATIANA ARAGÓN RIAÑO OLGA LUCÍA GONZÁLEZ HUERTAS GISSELLE CRISTINA LÓPEZ PEÑA MARIA LUCILA MUÑOZ SALCEDO JOHANNA QUIROGA ROMERO
  • 3.
    USABILIDAD WEB Llamamos usabilidad a la experiencia que tiene un usuario cuando interactúa con páginas de un web.
  • 4.
    Un sito web • Es claro y el usuario entiende el contenido y navega por el web de una forma cómoda y sencilla. • webs claros y fácilmente navegables por el usuario • Disponga de la información que le queremos hacer llegar de una manera clara y sencilla. • La usabilidad es la combinación de los factores que afectan al usuario cuando interactúa con las páginas web, estos pueden ser entre otros:
  • 5.
    Por qué esimportante la usabilidad  La aplicación correcta de los sitios de la usabilidad en un sitio web, permitirán que sus visitantes encuentren rápidamente la información que buscan y sientan que su sitio merezca ser visitado nuevamente  Lo normal es que un visitante no lea con detalle ni siquiera la mínima parte de una página web. En su lugar, por economía de tiempo, él realiza un rápido barrido visual buscando elementos que llamen la atención.  Es interesante que las animaciones publicitarias (banners) generalmente son pasadas por alto. Nuestro cerebro se acostumbra al hecho de que animación significa publicidad, lo que lleva a obviar este tipo de publicidad.
  • 6.
    En qué momentose ha de considerar la usabilidad  La usabilidad debe ser considerada en todo momento, desde el mismo comienzo del proceso de desarrollo hasta las últimas acciones antes de hacer el sistema, producto o servicio disponible al público.  Antes de iniciar el proyecto es esencial tener una idea acerca de las características de los usuarios y de los aspectos del producto de mayor interés y necesidad. Una vez que el producto está en el mercado se debería preguntar a los usuarios acerca de sus necesidades y actitud respecto del mismo.
  • 7.
    HOJAS DE ESTILO Esel lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML. Su objetivo es separar lo que es el contenido de las paginas web de su propia presentación o formato, de este modo se obtiene una Web mucha más flexible a cambios y mucho más estándar evitando errores en el código HTML.
  • 8.
    VENTAJAS: -Asegura la continuidadvisual a medida que el usuario navega por el sitio. -Control centralizado de la presentación de un sitio web completo con lo que se agiliza de forma considerable la actualización del mismo. -Separación del contenido de la presentación, lo que facilita que muestre la página, la modificación de la visualización del documento sin alterar el contenido del mismo. -Nos permite definir aspectos concretos de un documento, facilitando el diseño de los documentos. Para usuarios con discapacidades esos trucos hacen muy difícil la comprensión de los documentos
  • 9.
    LIMITACIONES *Dificultad para elalineamiento vertical; así como el centrado horizontal se hace de manera evidente en CSS2.1, el centrado vertical requiere de diferentes reglas en combinaciones no evidentes, o no estándares. * Los selectores no pueden usarse en orden ascendente según la jerarquía del DOM (hacia padres u otros ancestros) como se hace mediante xpath. La razón que se ha usado para justificar esta carencia por parte de la W3C, es para proteger el rendimiento del navegador, que de otra manera, podría verse comprometido
  • 10.
    REGLAS -Visibilidad del estadodel sistema: El sistema debe siempre mantener a los usuarios informados del estado del sistema, con una realimentación apropiada y en un tiempo razonable. -Utilizar el lenguaje de los usuarios: El sistema debe hablar el lenguaje de los usuarios, con las palabras, las frases y los conceptos familiares, en lugar de que los términos estén orientados al sistema. Utilizar convenciones del mundo real, haciendo que la información aparezca en un orden natural y lógico.
  • 11.
    -Consistencia y estándares:Los usuarios no deben tener que preguntarse si las diversas palabras, situaciones, o acciones significan la misma cosa. En general siga las normas y convenciones de la plataforma sobre la que está implementando el sistema. -Prevención de errores: Es importante prevenir la aparición de errores que mejor que generar buenos mensajes de error. -Minimizar la carga de la memoria del usuario: El usuario no debería tener que recordar la información de una parte del diálogo a la otra. Es mejor mantener objetos, acciones, y las opciones visibles que memorizar. -Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de los errores: Que los mensajes de error se deben expresar en un lenguaje claro, se debe indicar exactamente el problema, y deben ser constructivos.
  • 13.
    ACCESO PARA DISCAPACITADOS Accedera la información en Internet • Para los usuarios con discapacidad, Internet tiene un mayor significado. Mucha gente con discapacidad utiliza un ordenador con tecnología adaptada para navegar por la red, software de reconocimiento de voz como si fuera un periódico diario en línea. • Por ejemplo, un web que consiste enteramente en gráficos y acoplamientos de imágenes puede parecer bonita y agradable a un usuario sin discapacidad, pero los "recreadores de voz" no pueden traducir gráficos. Por lo tanto, alguien que es ciego y con software "screenreading" para tener acceso a la página, la información es totalmente inaccesible a menos que el autor de la página haya realzado los gráficos y los mapas de imagen con alternativas del texto. • La inhabilidad de una persona no tiene que ser tan extrema como la ceguera, pero la que tenga puede afectar su capacidad de utilizar la red con eficacia. • Algunos usuarios pueden tener acceso a páginas que se han diseñado incorrectamente por lo que un usuario discapacitado nunca podrá accerder al 100 % del contenido de nuestra página.
  • 14.
    ACCESIBILIDAD PARA DISCAPACITADOS VISUALES • Las paginas demasiado largas son mas duras de asimilar para un usuario con problemas visuales. • Para facilitar estos problemas es recomendado usar HTML. • Para satisfacer a estos usuarios es bueno usar tamaños relativos. EJ: Hoja de estilo • Para mostrar imágenes es bueno utilizar el atributo ALT. Este sirve para poder oír el texto alternativo o lo podrán ver mejor.
  • 16.
    TAMAÑO DE UNAPAGINA WEB • Los Web deben ser de un tamaño menor a 150KB. • El uso de imágenes debe ser moderado ya que las imágenes distraen mucho • También es porque las imágenes pesan bastante y esto ayudara al ordenador a estar mas lento. • Siempre es bueno utilizar el formato mas eficiente • Es bueno el reducir el tamaño de estas ya que nos sirve bastante para que el archivo sea mas rápido. • Las animaciones son valiosas pero no en toda clase de Pág. Web queda bien así que hay que saber escoger
  • 18.
    LOS MENUS YEL USUARIO
  • 19.
    Muchos o casitodas las webs utilizan menú. Los menús ayudan a los usuarios a no perder el contenido de nuestra web; puede ser utilizado también conjuntamente con otras ayudas. . debe disponerlos en la parte superior.
  • 20.
  • 21.
    • Los títulosdel menú deben ser cortos. • Se debe ajustar a un formato definido usando letras mayúsculas o minúsculas. • Utilice un separador para distinguir una categoría de otra. • Intente no utilizar los menús de varios niveles de cascada.
  • 22.
    COLORES Y SUSAPLICACIONES NATURALES
  • 23.
    • El verdees positivo, sugiere naturaleza bosques, plantas, vida, estabilidad. • El azul seriedad, espiritualidad y elegancia. • El violeta es le color de las fantasía, alegría y en el ámbito negativo puede sugerir pesadillas y locura. • El color mas aconsejable es el blanco este actúa como equilibrio entre los colores, hace las paginas agradables. • La gama de colores debe tener de 2 a 3.
  • 25.
    QUÉ ES UNLINK? Un LINK es un soporte que nos permite acceder a otros contenidos relacionados con el tema que estamos tratando ya sea en el mismo sitio ó en uno relacionado.
  • 26.
  • 27.
  • 28.
  • 29.
    oAl escribir parala web debemos ser claros y concisos
  • 30.
    Cuál de las dos es preferible • v leer?
  • 31.
    El formato debeser agradable, debe facilitar al usuario la lectura.
  • 32.
    Si utiliza comoformato una tabla, recuerde que las tablas complejas tardan más en descargar, así que si divide el contenido en tablas múltiples será más simple.
  • 33.
    Finalmente, la redaccióny la ortografía son fundamentales al momento de escribir para la web
  • 34.
  • 35.
    Una web debepermitir al usuario resolver sus requisitos de una forma eficaz y eficiente
  • 36.
    El diseño yla interfaz deben ser fáciles para el usuario, deben permitirle navegar de una manera intuitiva
  • 37.
    El diseño deuna página no debe crear distracción en los usuarios