1

Licenciatura en Tecnologías e información

Web Dinámica
Act.2 Usabilidad y accesibilidad en la planeación de un sitio de web dinámica

Asesora: Equipo B:

Diana Gutiérrez Muñoz Abel Langarica López

Gerardo Rodríguez Loza
Jesús Adrián Ruezga Carranza
Arnulfo Miguel Reyes Hurtado
Rubén Guzmán Dimas
 2

INDICE

TEMA PÁG.
Objetivos………………………………………………………………………. 3
Usabilidad y accesibilidad…………………………………………………… 3
Usabilidad del sitio web……………………………………………………… 4
Accesibilidad del sitio web…………………………………………………… 7
Sitio web accesible…………………………………………………………… 8
Posibles limitaciones de acceso a la web………………………………… 9
Hacer un sitio web accesible………………………………………………... 10
Análisis con navegador gráfico……………………………………………... 11
Características de la página de inicio……………………………………… 11
Orientación a tareas y funcionalidad del sitio……………...……………… 12
Navegabilidad y arquitectura de la información…………...……………… 13
Formularios y entradas de datos…………………………………………… 13
Confianza y credibilidad (seguridad)………………………………………. 14
Calidad del contenido y escritura…………………………………………… 14
Diagramación y diseño gráfico……………………………………………. 15
Búsquedas…………………………………………………………………… 15
Ayuda, retroalimentación y tolerancia a errores…………………………. 15
Indica lo que se espera y cómo se actuará una vez que se aplique el 16
mismo
Bibliografía……………………………………………………………………… 17
 3

OBJETIVO.

OBJETIVO GENERAL.

Aplicar los conceptos básicos de usabilidad y accesibilidad en el diseño de un

proyecto para satisfacer las necesidades del cliente y la navegación adecuada
del sitio.

OBJETIVOS ESPECIFICOS.

 Facilitar lo que el usuario desea encontrar.

 Hacer que la información sea relevante y comprensible
 Hacerle saber dónde se encuentra en el sitio.
 Navegabilidad dentro del sitio.
 Conservar su privacidad (cliente).

USABILIDAD Y ACCESIBILIDAD.

La definición del caso de uso a analizar y evaluar será el caso 3, “El Secreto del
Éxito”, el cual requerirá una página WEB que permita dar a conocer el programa
total del evento a realizar, es importante que el sitio cuente con un área de
registros y acceso a información de conferencias y actividades.

Los factores principales que deben considerarse al hablar de usabilidad son la

facilidad de aprendizaje, la efectividad de uso y la satisfacción con que las
personas son capaces de realizar sus actividades en el uso del sitio Web, factores
los cuales se centran el diseño del proyecto con que se está trabajando.

El diseño del sitio consistirá en la planificación, diseño e implementación de sitio

web sus páginas. No es simplemente una aplicación del diseño convencional, ya
que requiere tener en cuenta cuestiones tales como navegabilidad, interactividad,
usabilidad, arquitectura de la información y la interacción de medios como el
audio, texto, imagen, enlaces y vídeo.

Se lo considera dentro del diseño multimedia. La unión de un buen diseño con

una jerarquía bien elaborada de contenidos aumenta la eficiencia de la web como
canal de comunicación e intercambio de datos, que brinda posibilidades como el
contacto directo entre el productor y el consumidor de contenidos, característica
destacable del medio.

 Facilidad de aprendizaje: La facilidad de aprender la funcionalidad y

comportamiento del sistema. definir en cuánto tiempo un usuario, que nunca
 4

ha visto una interfaz, puede aprender a usarla bien y realizar operaciones

básicas.
 Eficiencia de uso: Involucrar y alcanzar el nivel de productividad requerido,
una vez que el usuario ha aprendido a usar el sistema. Determina la rapidez
con que se pueden desarrollar las tareas.
 Retención sobre el tiempo: Retención de la curva de aprendizaje en el uso
del sitio.
 Tasas de error: Minimizar la capacidad del sistema para ofrecer una tasa
baja de errores, apoyar a los usuarios a cometer pocos errores durante el
uso del sistema.
 Satisfacción: Cubrir las necesidades del cliente y cumplir el objetivo de
desarrollo y diseño del sitio.

Para este evento, que ha llamado Futuro Europa-México que durará 4 días
presentará 7 conferencias magistrales, 16 talleres y actividades nocturnas de
entretenimiento para los asistentes. El Sr. Guillart tiene pensado tener un sitio
web en el que los visitantes puedan conocer el programa de actividades para ser
consultado por temas y días, las semblanzas de cada uno de sus conferencistas
y talleristas, además de un formato de registro de los asistentes al evento. Ellos
contarán con equipo de voluntarios que se encargarán de operar el sitio.

USABILIDAD DEL SITIO WEB.

El sitio web requiere como perfiles de uso a:

Administrador: La definición para este perfil es el administrador del sistema o

sitio WEB, el será el encargado de crearlo, realizar el diseño asi como de
mantener el sitio accesible y usable.

Usuario: Sera la persona que ofrecerá servicios de conferencias y/o actividades

como los mismos talleres, se encargara de entregar los contenidos al
administrador para que los integre en el sitio WEB y se encargara de revisarlos y
validarlos.

Voluntarios: Personal que ofrece sus servicios en las actividades sin algún lucro
o esperando algún beneficio, más que el personal, será quien de apoyo a los
asistentes en el uso del sitio y la navegación del mismo.

Asistentes: Personal que ingresa al sitio con el interés de conocer el evento y

participar en él, realizara un registro y solicitara un usuario y password para
accesar y navegar en el sitio.
 5

Para el sitio WEB se realizará una página de registro que permitirá al usuario
ingresar y navegar al contenido de cada página, o bien si es el administrador
poder realizar cambios y/o actualizaciones en el mismo, el objetivo es realizar un
sitio interactivo de fácil uso y con un diseño amigable que permita una navegación
ágil sin confusiones.

Alcanzar el objetivo en el que el producto puede ser utilizado por usuarios

específicos para obtener las metas específicas con efectividad, eficiencia y
satisfacción en un contexto específico de uso.

Pueda ser utilizado en forma adecuada, eficiente y satisfactoria por la mayoría de

los posibles usuarios.
 Sea tan fácil de aprender a usar que no requiere manuales.
 Pueda ser utilizado por personas con diferentes habilidades o
discapacidades.
 Cualquier persona, sin importar su edad o cultura, pueda usarlo.
 Evita que el usuario cometa errores.
 Amigable con el usuario
 Fácil de usar.
 Fácil de aprender.

Los wireframes creados en MockFlow son la base de nuestro sitio, simulan la

navegación del usuario a través de las páginas web y pueden ser llevados a cabo
de forma compartida por varias personas de equipo que se integra pasa su
desarrollo.
6
 7

 El sitio debe de contener páginas con el contenido necesario de los talleres

y actividades que se realizaran en el evento.
 En el registro deber de contener un formulario no únicamente para la creación
del usuario sino también para guardar los datos de su visita
 Posterior al registro el usuario podrá ingresar con el usuario y password
creado
 La primera página incluirá una portada con las generalidades del evento y el
menú de navegación a los contenidos
 El mayor contenido tendrá que ser multimedia, imágenes, videos.

ACCESIBILIDAD DEL SITIO WEB.

El sitio WEB deberá de mantener su disponibilidad para ofrecer la accesibilidad

que se requiere por lo tanto la página deberá:
 Ofrecer compatibilidad con dispositivos incluidos móviles
 Ofrecer compatibilidad con cualquier navegador
 El contenido de tipo multimedia deberá ser compatible con players o
aplicaciones necesarias para su reproducción.
 El sitio deberá de ser ágil en su acceso y de fácil navegación.

La navegabilidad web del sitio tendrá la facilidad y la libertad en la que el

usuario puede desplazarse por todas las páginas que componen el sitio web.
Para lograr este objetivo, el sitio web proporcionará un conjunto de recursos y
 8

estrategias de navegación diseñados para conseguir un resultado óptimo en la

localización de la información y en la orientación para el usuario.

ANALICEN CÓMO SERÍA SU EXPERIENCIA SI TUVIERAN UNA

DISCAPACIDAD PARA NAVEGAR POR ESTOS SITIOS.

SITIO WEB ACCESIBLE

La accesibilidad web hace referencia a la capacidad de acceso a la web y a sus

contenidos por todas las personas, independientemente de las limitaciones propias
del individuo (discapacidades, idioma, conocimientos, experiencia, etc.) o de
características de su equipo de navegación o el entorno ambiental desde donde
accede a la web.

La idea más importante en la accesibilidad web consiste en mostrar dentro de las

páginas web todas las alternativas y herramientas disponibles para hacer que la
página sean legibles y comprensibles para el mayor número de usuarios, de forma
que todas las personas puedan navegar por la web en cualquier condición.

web accesible

-Es muy importante que la web sea accesible para así proporcionar un acceso
equitativo e igualdad de oportunidades a las personas con discapacidad.
 9

-Una página web accesible puede ayudar a personas con discapacidad a que
participen más activamente en la sociedad.

-Hacer la web más accesible también nos beneficiará a nosotros, puesto que es
más probable que los visitantes vuelvan a una página de fácil acceso que a otra que
no lo es, por lo que estarás fidelizando visitas.

Por otro lado, la accesibilidad está muy relacionada con la usabilidad web,
que consiste en facilitar la navegación a tus visitantes para que les sea más
sencillo acceder a los contenidos que les ofreces.

Tanto desde el punto de vista humano como desde una visión práctica (captación
de más visitas para la página web), es importante que las páginas web sean
realizadas teniendo en cuenta los criterios de accesibilidad que permitan que todas
las personas puedan acceder de la mejor forma a los contenidos que ofrecemos.

La W3C presenta las Pautas de Accesibilidad al Contenido en la Web (WCAG), que

son una serie de reglas que indican como deben ser los contenidos de una web
(textos, imágenes, formularios, sonidos, etc.) para que sea considerado
accesible y resulte de verdadera utilidad a las personas que cuentan con algún
grado de discapacidad.

A GRANDES RASGOS, HAY QUE TENER EN CUENTA LO SIGUIENTE EN LOS

DOS CASOS:

Imágenes: usa el atributo alt para describir la función de cada elemento visual.
Multimedia: pon subtítulos y transcripción del sonido, y descripción del vídeo.
Enlaces: usa texto que tenga sentido leído fuera de contexto. Por ejemplo, no
utilices expresiones como “click aquí”.
Organización de las páginas: usa encabezados, listas y estructura consistente.
Usa CSS para la maquetación donde sea posible.
Gráficos y diagramas: puedes optar por explicarlos brevemente en la página o bien
usar el atributo longdesc.
Tablas: Facilita la lectura línea a línea. Resume los contenidos en textos
comprensibles y sencillos.

POSIBLES LIMITACIONES DE ACCESO A LA WEB

Discapacidades:
 10

Deficiencias visuales: ceguera, visión reducida y problemas en visualización de

color entre otros.
Deficiencias motrices: hacen referencia a la capacidad de movilidad del usuario.
Estos usuarios no suelen ser capaces de interactuar con el sistema a través de
dispositivos de entrada tradicionales, por lo que utilizan dispositivos alternativos. Por
ejemplo, basados en voz o pulsadores.
Deficiencias auditivas: aunque si bien es cierto que son menos limitadoras en el
acceso y uso de contenidos web, puesto que el canal sonoro es mucho menos
usado que el visual, aun así, conviene tener presentes las limitaciones y barreras
derivadas de esta discapacidad, como es el caso del lenguaje.
Deficiencias cognitivas y de lenguaje: las personas con estas deficiencias tienen
problemas en el uso del lenguaje, la lectura, percepción, memoria, etc. Como norma
general, procura usar lenguaje sencillo.

HACER UN SITIO WEB ACCESIBLE

Hacer un sitio web accesible puede ser algo sencillo o difícil, depende de muchos
factores como por ejemplo, el tipo de contenido, el tamaño y la complejidad del sitio,
así como de las herramientas de desarrollo y el entorno.

Esto incluye no sólo la utilización de un lenguaje claro y simple, sino también

proporcionar mecanismos comprensibles para navegar dentro de cada página y
entre las páginas del sitio web.

Al proporcionar herramientas de navegación e información orientativas en las

páginas se maximizará la accesibilidad y la usabilidad del sitio web.

Si, por otro lado, todas las ventajas propuestas hasta ahora no son suficientes para
convencerte de que la accesibilidad es importante, tal vez sí lo haga el decirte que
la accesibilidad web afecta al posicionamiento en los buscadores.

Parece extraño en un principio, pero suele decirse que el robot de Google es el

usuario ciego más activo de Internet, y la razón para decir esto es que muchas de
las optimizaciones necesarias para conseguir una buena accesibilidad, lo son
también para conseguir una indexación correcta por parte de los buscadores.

Componentes esenciales de accesibilidad web

Contenido: información presente en una página o aplicación web. Esto incluye

texto, imágenes y sonidos, código que define la estructura, etc.
Navegadores web, reproductores multimedia y otros “agentes de usuario”.
Lectores de pantalla, teclados alternativos, software de escaneo, etc.
 11

Conocimiento de los usuarios y experiencia en la utilización Web.

Desarrolladores – diseñadores, codificadores, autores, etc.
Software para crea páginas web, para evaluar la accesibilidad web, validadores
de HTML, validadores de CSS, etc.

ANÁLISIS CON NAVEGADOR GRÁFICO

Este primer análisis incluye varios pasos:

-Desactivación de imágenes, para comprobar que todas cuenten con textos

alternativos que resulten útiles.
-Verificación de que los contenidos audiovisuales que se encuentren en la
página cuenten con textos equivalentes, de forma tal que las personas que no
puedan acceder a este tipo de contenidos, puedan recibir la información necesaria.
-Aumentar el tamaño de las fuentes de la página mediante el uso de las
herramientas correspondientes del navegador, para verificar que la página continúe
siendo funcional con el uso de este tipo de herramientas.
-Utilizar algún medio que permita ver la página en escala de grises (puede ser
mediante la impresión de la misma), de forma de ver la incidencia de los colores en
el acceso a los contenidos.
-Utilizar el teclado para navegar por la página y utilizar las diferentes funciones
que ofrece, de forma de observar si este tipo de navegación es posible.
-Utilizar diferentes resoluciones de pantalla, para verificar que aún en caso de
que los usuarios tengan resoluciones de pantalla pequeñas puedan acceder a los
contenidos de la página sin necesidad de utilizar desplazamientos horizontales.

PRUEBA DE USABILIDAD DEL DISEÑO SELECCIONADO

Características de la página de inicio.

Como parte fundamental en la adecuada usabilidad del sistema web, se consideran

las siguientes características de la ventana inicial, así como el puente o menú de
selección para la ejecución de actividades particulares dentro del sitio:
¿Cuál es tu opinión respecto al diseño de la ventana de seguridad así como
de la ventana principal del sistema?
 12

El acceso a la aplicación está perfectamente controlado a través de la

ventana inicial de solicitud de usuario y contraseña.

Se consideran diferentes niveles de usuario para acceder a secciones

considerando el tipo de privilegios del perfil diseñado.

Contiene botones de acción que permiten elegir la acción de acceso o salida

del sistema.

Se podría considerar alguna elemento media como fotografía o logotipo de

la empresa.

Al ingresar usuario o contraseña incorrecta el sistema muestra ventana

emergente con mensaje de error para posterior reset de las casillas de texto
para el ingreso de la información nuevamente.

Una vez introducida la información correcta la aplicación permite interactuar

con la pantalla de Inicio de la aplicación.

La ventana principal de control de acceso presenta los tres posibles

escenarios de registro a través de botones de acción que, al solo hacer clic
sobre alguno de estos, permite acceder a la siguiente ventana del sistema.

Se podría mejorar la presentación incluyendo contenido medio como iconos

relacionados a la palabra clave del botón de acceso

Orientación a tareas y funcionalidad del sitio.

¿Qué aspectos consideras son funcionales o no de la aplicación, así como de

las tareas a realizar?

Posterior a la elección del tipo de visitante que desea registrarse en la

aplicación a través de los botones de acción permite acceder a la información
particular y compartida “Nuevo Registro y Buscar Registro” del menú.
 13

El personaje “Recepción” puede elegir fácilmente que acción desea generar,

ya sea crear un nuevo registro (Cualquier tipo de visita) o buscar un registro
pre cargado en la base de datos.

Las tareas básicas son mínimas lo que facilita ubicar los elementos dentro
de la ventana del menú.

Existe un botón denominado Menú anterior que es funcional de manera alta

ya que es posible corregir posibles acciones no deseadas.

Navegabilidad y arquitectura de la información.

¿Cómo consideras tu experiencia al utilizar la aplicación sobre su navegación

entre enlaces?

El uso reducido de elementos en las ventanas de navegación como botones

de acción, cajas de texto, etiquetas y descripciones del sistema son objetivas
lo que permite llevar a cabo tareas únicas.

Es fácil el continuar o retroceder en las diversas ventanas del sistema

evitando estancamiento dentro de la aplicación.

La distribución de los elementos en la pantalla o ventana es adecuado,

pertinente y ordenado, dando una apariencia limpia y profesional del
contenido.

Formularios y entradas de datos.

¿Consideras los formularios para la entrada de datos suficientes para la
obtención de la información de visitantes?

Los formularios existentes contienen información objetiva, resultado del

análisis de requerimientos a través de la observación en campo durante la
etapa de recolección de información del proyecto.

Los campos para relleno de información muestran aquellos con solicitud de

datos de tipo horaria, así como de fecha indicando el tipo de formato de dato
a ingresar de manera correcta.
 14

Las entradas de datos son comprensibles y fáciles de identificar ya que son

clasificadas por tipo de visita y su correspondiente conjunto de campos
propios de la clasificación.

Confianza y credibilidad (seguridad).

¿Cuál es tu percepción de la seguridad ofrecida por el sistema?

El contenido presenta un adecuado mecanismo de seguridad al solicitar la

pre identificación del usuario mediante la solicitud de “Nombre de Usuario y
contraseña” que previamente el administrador de la aplicación cargo en el
sistema.

Al implementar el bloqueo de la aplicación después de haber realizado más

de tres intentos fallidos, reduce altamente el intento de acceso no autorizado.

La aplicación no está exenta de errores tipográficos y de errores ortográficos

Sería importante adicionar algún tipo de captcha para incrementar el filtro de

seguridad.

Calidad del contenido y escritura.

¿Encontraste alguna desviación o no comprensible las acciones que se

pueden realizar a través de los textos de la aplicación?
El contenido del uso de palabras refleja las acciones de cada elemento
considerado en los formularios, así como en las etiquetas y botones de
acción distribuidos en las diferentes ventanas.

Recomendable incluir en el contenido de los botones de acción comandos

cortos (uso de teclas especiales) que permitan agilizar las acciones además
de considerar el resaltar la primera letra de la palabra.
 15

Diagramación y diseño gráfico.

¿Cuál es tu valoración respecto al diseño del sistema?

Las ventanas del sistema no se encuentran bloqueadas con respecto al evitar
que el usuario amplié o reduzca el tamaño de la ventana, lo que afecta al
diseño estético de la aplicación.

Las ventanas del sistema no presentan una gama de color que permita al
usuario sentirse atraído por el diseño.

La falta de iconos representativos minimiza el impacto del diseño de la

aplicación

Búsquedas.

¿Consideras que la herramienta de búsqueda del sistema cumple con su

objetivo?
La sección de búsqueda de registros para cada uno de los escenarios del
tipo de visitante es fácil de localizar.

Las búsquedas de información son ágiles ya que permite introducir uno o

más datos para la búsqueda en la base de datos del sistema.

Los resultados de búsqueda no aparecen listados en la ventana de

Búsqueda, importante implementar una sección donde se reflejen las
coincidencias de datos para poder elegir el registro correcto.
Ayuda, retroalimentación y tolerancia a errores.

¿Cómo consideras la sección de ayuda del sistema?

La aplicación no presenta alguna sección de ayuda que permita al usuario
acceder de manera rápida ante cualquier tipo de falla o duda sobre la
operación de este.
 16

Indica lo que se espera y cómo se actuará una vez que se aplique el mismo.

Como se puede apreciar en la sección anterior, la aplicación de las preguntas base

durante el test de usabilidad al candidato de la muestra, fue en su mayoría
alentadora ya que las áreas de oportunidad detectadas resultado de la prueba de
escritorio permitieron que el usuario interactuara con el prototipo del proyecto por lo
que la actuación siguiente es trabajar en la corrección de dichas oportunidades
detectadas, así como en la mejora continua del producto.
Posterior a las correcciones y mejoras, lo que se espera de la nueva aplicación del
test de usabilidad será mejorar la ponderación evaluativa del usuario objeto.
 17

REFERENCIAS BIBLIOGRÁFICAS

Alexandra Ruiz, Maria L. Villegas, Hamilton A. Hernández. (2005). 1 Estudio de

Usabilidad en Aplicaciones de Comercio Electrónico B2C – Amazon – Dell –
MercadoLibre.. 12-10-2019, de ResearGate Sitio web:
https://www.researchgate.net/publication/228890721_Estudio_de_Usabilidad_e
n_Aplicaciones_de_Comercio_Electronico_B2C-Amazon-Dell-MercadoLibre

Leapfrog Soluciones Web . (Desconocido). Estudios de usabilidad. 12-10-2019,

de LeapFrog Sitio web: https://leapfrog.cl/es/estudios-de-usabilidad

Perurena Cancio. (2013). Usabilidad de los sitios Web, los métodos y las
técnicas para la evaluación. 13-10-2019, de ACIMED Sitio web:
http://www.acimed.sld.cu/index.php/acimed/article/view/405/306

María Luna. (2015). Recopilación de Métodos de Usabilidad. 13-10-2019, de

SIDAR Sitio web:
https://www.sidar.org/recur/desdi/traduc/es/visitable/inquiry.htm

Luis Bermello Crespo. (2005). Los estudios de usabilidad en sitios webs de

bibliotecas universitarias. 13-10-2019, de Instituto de Información Científica y
Tecnológica Cuba Sitio web: http://www.redalyc.org/pdf/1814/181417874002.pdf

Pérez M. (2010). Capítulo 7. Metodología para la arquitectura de

información. Arquitectura de la información en entornos web. Editorial
TREA. (P.p. 353-381).

Bevan, N.; Kirakowski, J.; Maissel, J. (1991). What is Usability?. Proceedings of

the 4th International Conference on HCI, Stuttgart, September 1991. Elsevier.

Copper, A. (1999). The Inmates Are Running the Asylum: Why High-Tech
Products Drive Us Crazy and How to Restore the Sanity. SAMS. ISBN: 0-67231-
649-8.

ISO 9241-11. (1998). Ergonomic requirements for office work with visual display
terminals (VDT)s - Part 11 Guidance on usability, 1998.

Folmer, E., Bosch, J. (2004). Architecting for usability: a survey. En: Journal of
Systems and Software. Febrero 2004, v. 70, n. 1-2. pp. 61-78.
 18

Hartson, H.R. (1998). Human-computer interaction: Interdisciplinary roots and

trends. En: Journal of Systems and Software, Noviembre 1998, v. 43, n. 2, pp.
103-118.

Hassan Montero, Y. et al. (2004). Arquitectura de la Información en los entornos

virtuales de aprendizaje. Aplicación de la técnica de Card Sorting y análisis
cuantitativo de los resultados. En: El Profesional de la Información, 2004,
marzo-abril, v. 13, n. 2, pp. 93-99.

Rosenfeld, L.; Morville, P. (2002). Information Architecture for the World Wide
Web. 2nd edition. ISBN 0-596-00035-9. 2002.