U2. Tarea 1

Datos del Alumno Fecha
Nombre completo Matrícula

15/11/2022
Frederick Guzmán Salas 20307015
Universidad Tecnológica de la Costa Grande de Guerrero
Ingenieria en Desarollo y Gestión de Software
Tarea 1 Unidad 2
Alumno: Frederick Guzmán Salas
Profesor: Mtro. José Denys Hernández Espinoza
15 de noviembre del 2022
Asignatura Carrera
Experiencia de Ingeniería en Desarrollo y Gestión de Software
Usuario Actividades de Investigacion y Tareas Digitales en Canvas
15/11/2022
Asignatura Carrera
15/11/2022
Índice
Efecto Eyetracking..............................................................................................................4
Objetivos del eye tracking para tu investigación..........................................................4
Ventajas del eye tracking.............................................................................................5
Patrones de seguimiento visual.........................................................................................7
Patrón de lectura Gutenberg........................................................................................7
Patrón Z (Z-pattern).....................................................................................................9
Patrón F (F-pattern)...................................................................................................11
Extensiones y barras de navegador web y aplicaciones web..........................................13
Color Oracle...............................................................................................................13
Tawdis (TAW).............................................................................................................13
WAT (Web Accessibility Toolbar)..............................................................................14
WAVE Web Accessibility Evaluation Tool.................................................................15
Derivados del Daltonismo de acuerdo a la visión cromática...........................................15
Deuteranopía:.............................................................................................................15
Protanopía:.................................................................................................................16
Tritanopía:..................................................................................................................16
Definiciones sobre Wireframes, Mockups y Prototype....................................................17
Wireframe...................................................................................................................17
Mockup.......................................................................................................................18
Asignatura Carrera
15/11/2022
Prototipo.....................................................................................................................19
¿Qué es el IxD (Diseño de Interacción - Interaction Design)?.........................................20
¿Qué te ofrece la UI y la UX respecto al IxD (Interaction Design)?................................21
Las cuatro dimensiones del Diseño de Interacción.........................................................21
Referencias.......................................................................................................................23
Asignatura Carrera
15/11/2022
Efecto Eyetracking
El eye tracking se refiere al proceso de medir dónde miramos, también conocido como
el punto donde se fija la mirada. Estas mediciones son llevadas a cabo por un
rastreador ocular, que registra la posición de los ojos y los movimientos que hacen.
El eye tracking utiliza una luz infrarroja cercana invisible y cámaras de alta definición
para proyectar la luz en el ojo y registrar la dirección en que se refleja en la córnea.
Posteriormente, se utilizan algoritmos avanzados para calcular la posición del ojo y

determinar exactamente dónde se enfoca. Esto hace posible medir y estudiar el
comportamiento visual y los movimientos oculares finos, ya que la posición del ojo
puede ser mapeada varias veces por segundo.
La rapidez con la que un eye tracking es capaz de capturar estas imágenes se conoce
como su frecuencia.
También se puede hacer una grabación de la escena que una persona está mirando, y
usando el software de seguimiento ocular es posible producir un mapa visual de cómo
la persona vio los elementos de la escena.
Objetivos del eye tracking para tu investigación
Al identificar los movimientos oculares comunes de los usuarios mientras ven el

contenido en línea, podemos abordar cuestiones de investigación como:
 ¿Qué es lo primero que ven los usuarios en nuestra página de inicio (o en cualquier
otra página)?
 ¿Observan inmediatamente los call to action de esta página?
 ¿Los usuarios están leyendo este contenido?
Asignatura Carrera
15/11/2022
 ¿Los usuarios están notando esta característica de la interfaz y, si es así, cuánto

tiempo tardan en verla?
 ¿Cuál de estos sistemas de navegación es el más detectable?
 ¿Qué elementos de la página están distrayendo a los usuarios de realizar

fácilmente una tarea?
 ¿Será nuestro nuevo diseño más efectivo que el actual?
El eye tracking nos da una valiosa información sobre cómo los usuarios perciben el
contenido en línea.
Combinar la información generada obtenida a través del uso de métodos de

investigación tradicionales, hace posible optimizar el diseño de la página y el diseño
visual, lo que conduce a una mejor experiencia del usuario y a mayores tasas de
conversión.
Los estudios de eye tracking también pueden ser una forma rentable para que los
clientes se aseguren de que están obteniendo un buen ROI en diseño y usabilidad.
Ventajas del eye tracking
Entre los beneficios más importantes del eye tracking se encuentra su capacidad para
registrar y analizar de forma detallada y objetiva el comportamiento visual.
Sería imposible pedirle a alguien que escudriñe los pasillos de un supermercado que
recuerde, y mucho menos que cuantifique, la cantidad de tiempo que pasó mirando
cada artículo, o incluso exactamente dónde miró o qué anuncios notó más.
El eye tracking tiene otros grandes beneficios para una investigación. A continuación, te
mencionamos cada uno de ellos:
 Revela el comportamiento subconsciente: Los investigadores pueden obtener

información sobre los comportamientos que llevamos a cabo instintivamente.
Asignatura Carrera
15/11/2022
 Proporciona datos imparciales, objetivos y cuantificables: Elimina la necesidad

de intentar recordar o explicar dónde se miró y evita que los participantes del
estudio asuman detalles y den información incorrecta.
 Permite un comportamiento natural: Los rastreadores oculares son discretos y

permiten que las tareas se lleven a cabo con normalidad.
 Es versátil y móvil: Puede ser usado en casi cualquier entorno y escenario.
 Proporciona un alto nivel de detalle: Dependiendo del dispositivo y el software, los

resultados pueden ofrecer un nivel muy alto de granularidad para un análisis
profundo.
 Ofrece información en tiempo real: Con la transmisión en vivo se puede ver la

mirada de la persona inmediatamente.
 Es explicativo: Puede representar procesos y acciones que son difíciles de

articular o explicar.
 Otorga una visualización gráfica: Utiliza mapas de calor y gráficos que muestran

los resultados del eye tracking y permite visualizar la interacción de las personas en
un entorno y su respuesta a diferentes estímulos.
 Añade valor a otros datos biométricos: El eye tracking puede mejorar el uso de
estos dispositivos al proporcionar información adicional sobre lo que condujo a las
respuestas fisiológicas.
Asignatura Carrera
15/11/2022
Patrones de seguimiento visual
La mayoría de los diseños tienen patrones que se generan por los elementos que
conforman dicho diseño (imágenes, botones, bloques de texto, etc). Esto hace que los
usuarios escaneen un diseño siguiendo dichos patrones, los cuales pueden ser
estudiados mediante técnicas de eye tracking (registro visual).
Aunque estos patrones están en constante evolución por los cambios tecnológicos y
culturales, podemos identificar los 3 más conocidos: Guttenberg, Patrón Z (z-pattern), y
Patrón F (f-pattern).
Patrón de lectura Gutenberg
Este patrón es generalmente asociado con avisos impresos y grandes bloques de texto
(de ahí su nombre). Dado que las páginas web tienen un tipo de lectura muy diferente al
del diseño impreso, este tipo de patrón no es tan común en formatos digitales. Sin
embargo, con el surgimiento de la tendencia de grandes imágenes de cabecera
(también conocidas como hero images), o páginas diseñadas para tabletas, este patrón
se vuelve a ver.
El patrón Gutenberg básicamente se explica por los ejes de orientación y la gravedad.

Dado que en Occidente leemos de izquierda a derecha y de arriba a abajo, nuestra
mirada se focaliza en puntos de atención que siguen esta dirección.
El patrón Gutenberg divide el área visual en 4 partes divididas por ejes de coordenadas.
Estas partes tienen distintos grados de interés, que se relacionan con el eje de
dirección de lectura izquierda-derecha y con el eje de gravedad (arriba a abajo). Sin
embargo, este eje de gravedad no cae verticalmente como lo haría una piedra, sino que
es influenciado por el eje de dirección. Imaginen una hoja que cae de un árbol y es a la
vez soplada por el viento, cayendo así en forma oblicua.
Asignatura Carrera
15/11/2022
Entonces, el patrón Gutenberg luce así:
Como decía más arriba, este patrón tuvo un resurgimiento en los últimos años. Veamos
la página de Uber:
Asignatura Carrera
15/11/2022
Aquí se puede ver como el logo y el slogan están ubicados en el área de énfasis
primario, las opciones más genéricas en el área de seguimiento fuerte, el área
de seguimiento débil está completamente vacía y el área terminal tiene el formulario y
el CTA, que es lo que le interesa a Uber: que los usuarios se registren.
Patrón Z (Z-pattern)
El patrón-Z es un patrón de lectura que forma una Z. Este patrón fue uno de los más
comunes por largo tiempo, y aún se sigue viendo constantemente. Como podrán
apreciar, es casi igual al Gutenberg, pero en este patrón los usuarios pasan por las
áreas de seguimiento débiles y fuertes.
Este patrón luce de la siguiente manera:
Y si se preguntan cómo se aplica en diseños reales, veamos la página web

de Evernote:
Asignatura Carrera
15/11/2022
Pero Evernote no se queda aquí, sino que luego utiliza una variación del Patrón-Z que
es el Patrón Zig-Zag, que no es otra cosa que el Patrón-Z repetido una y otra vez.
Veamos el ejemplo (dar clic para ver tamaño completo):
Asignatura Carrera
15/11/2022
Patrón F (F-pattern).
Finalmente el patrón-f es hoy por hoy el más común, y es aquel en que los usuarios
pueden percibir un patrón con forma de letra F o E. Este patrón fue descubierto
por Norman Nielsen Group (ver estudio aquí, en inglés) luego de estudiar miles de
casos por medio de la técnica de registro visual o eye tracking. Al analizar los
resultados, descubrieron que la gran mayoría de los usuarios escanean un sitio
formando este patrón de F. Veamos un ejemplo:
¿Alguien ve una F por ahí?
Para ver un ejemplo muy visible, fijémonos en el diario LA Times y su uso del patrón-f
(dar clic para imagen completa):
Asignatura Carrera
15/11/2022
Asignatura Carrera
15/11/2022
Extensiones y barras de navegador web y aplicaciones web
Color Oracle
Color Oracle es una herramienta gratuita para Mac (tiene versión beta para Windows y
Linux) para ayudarnos a saber como vería una persona con problemas de daltonismo
nuestro diseño.
Las personas que afortunadamente no tenemos este tipo de problemas no damos

mayor importancia a la hora de realizar diseños y mezclas de color, pero si nuestro
cliente o la persona a la que va dirigido nuestro trabajo los tiene, agradecerá el hecho
de que tengamos en cuenta esta situación y le facilitemos su visualización.
Tawdis (TAW)
TAW es una familia de herramienta para el análisis de la accesibilidad de sitios web,

alcanzando de una forma integral y global a todos los elementos y páginas que lo
componen. Esta familia la componen diversas herramientas, desde los más conocidos
analizadores de páginas a los sistemas de monitorización o una herramienta para la
realización de observatorios. El nexo común a todos son los motores de análisis, que
Asignatura Carrera
15/11/2022
han ido creciendo en funcionalidades desde el de accesibilidad a los de calidad web,

SEO o movilidad.
Objetivo
Comprobar el nivel de accesibilidad alcanzado en el diseño y desarrollo de páginas web

con el fin de permitir el acceso a todas las personas independientemente de sus
características diferenciadoras.
Destinatarios
Público en general y específicamente profesionales de campo como webmasters,

desarrolladores, diseñadores de páginas web etc.
Entendemos por accesibilidad el acceso a la información contenida en los sitios web sin
limitación alguna por razón de deficiencia, minusvalía o tecnología utilizada sin que
interfieran, por ejemplo:
 Problemas de oído, visión, movilidad.
 Dificultades de lectura o comprensión cognitiva.
 Imposibilidad de utilización del teclado o el ratón.
 Lector de sólo texto, pantalla pequeña o conexión lenta.
 La accesibilidad mejora el acceso a la web en general, no es de interés únicamente

para personas con discapacidad.
WAT (Web Accessibility Toolbar)
WAT (barra de herramientas de accesibilidad web) : es una barra de herramientas para

navegadores Internet Explorer y otros navegadores . Puede ayudar a evaluar el
cumplimiento de una página web con las Pautas de accesibilidad al contenido web
versión 2 (WCAG 2.0).
Asignatura Carrera
15/11/2022
WAVE Web Accessibility Evaluation Tool
Es una extensión gratuita para navegador web. Es específica para la evaluación de la

accesibilidad de un sitio web.
Entre las cosas que permite podemos destacar las siguientes:
 Realiza un análisis automático completo de la página, indicando los errores

encontrados, localizándolos visualmente en la web y mostrando el criterio por el que
fallan.
 Señala características, estructura…
 Dispone de una pestaña para visualizar los contrastes de color entre los diferentes
elementos de la web.
Derivados del Daltonismo de acuerdo a la visión cromática
Deuteranopía:
 Deficiencia para el color verde.
Asignatura Carrera
15/11/2022
Protanopía:
 Deficiencia para el color rojo. Tanto el color rojo como el color verde, parecen
amarillentes.
Tritanopía:
 Deficiencia severa para el color azul: si hay una ausencia total de pigmento
sensible al azul Para ellos, por ejemplo, un cielo azul claro se verá de color verde
brillante, y una flor amarilla les parecerá rosada.
Asignatura Carrera
15/11/2022
Definiciones sobre Wireframes, Mockups y Prototype.
Wireframe
Un wireframe es la primera representación de un diseño. En el caso de un sitio web se

muestran una serie de recuadros y líneas que indican qué tipo de contenido irá y donde
será localizado. Aunque es usual que los wireframes empiecen en papel, luego se
digitalizan para poder trabajar con medidas exactas. En el boceto en papel puedes
tener una idea general de dónde van los elementos, pero al mejorar y digitalizar el
boceto ya no se tratan con aproximados, sino de medidas exactas que deben seguirse
cuando se pase a la siguiente fase de diseño. Queda claro, entonces, que los
wireframes básicamente tienen dos objetivos:
 Mostrar el tipo de contenido que conforma el diseño del sitio
 Mostrar dónde se ubica ese contenido
Los wireframes son la primera representación que se tiene de la estructura del diseño.
Al mismo tiempo, también se representan los principales elementos, pero a un nivel
bastante básico. Es decir, se conoce qué tipo de elementos se colocarán, pero todavía
no se cuenta con una aproximación del aspecto visual de dicho elemento.
Asignatura Carrera
15/11/2022
Si bien es importante crear una representación fiel del diseño final, no se tiene detalle
de ciertos elementos. Son como una guía que ayuda a los miembros de equipo a
entender la estructura del sitio, pero aún se desconoce el aspecto de los elementos. Por
esta razón se suele representar con recuadros las zonas donde irán elementos o
botones, y con líneas los títulos y párrafos de texto.
Los wireframes son indispensables en las primeras fases del diseño ya que suelen
servir como bocetos, ya sea para intercambiar ideas con los miembros de tu equipo o
para explicar de manera más gráfica el concepto del diseño. Ya que se pueden crear en
papel, son excelentes herramientas al trabajar en equipo. Al digitalizarlos también
cumplen este propósito, aunque son igual de necesarios ya sea que trabajes en equipo
o por cuenta propia pues es una guía que debes seguir en las próximas fases del
diseño.
Mockup
Un mockup es una representación visual y estática de un diseño. En el campo del

diseño web los mockups se utilizan para que los miembros de equipo tengan una idea
más clara de cómo lucirá el sitio web. De hecho, más que ser cercana, es una idea
exacta de cómo se verá al sitio web una vez que se pase a la siguiente fase.
Asignatura Carrera
15/11/2022
Los mockups se realizan en base a las medidas y a la organización previamente

establecida en el wireframe, pero a diferencia de éste, un mockup ya tiene un sentido
mayor para el cliente pues es más visual. Se ven todos los elementos como texto,
iconos e imágenes.
Ya que es una representación visual estática, algunos elementos que quieras añadir
como videos deberán ser representados mediante una imagen y el icono de
reproducción. Asimismo, no existe interacción alguna entre los elementos de menú,
botones, enlaces, etc. Lo que suelen hacer muchos diseñadores es crear mockups
también de cómo lucirán los botones en sus diferentes modos, de esta manera el
desarrollador web puede saber con exactitud que modificaciones debe hacer. Sirven
también para explicar al cliente de manera más precisa cómo funcionan las
interacciones en el sitio web.
Como ya hemos mencionado, los mockups son de gran ayuda cuando se trabaja en
equipo, pues ayuda a visualizar mejor a todo el equipo el diseño final del sitio.
Asimismo, son de gran utilidad para mostrar el diseño al cliente sin necesidad de añadir
ningún tipo de interactividad. Son perfectos cuando quieres recibir comentarios o
revisiones por parte del cliente.
Prototipo
Asignatura Carrera
15/11/2022
Un prototipo es también un representación de la versión final de un diseño web que,

además, simula la interactividad. Se entiende que aunque es un prototipo, el diseño
debe ser cercano a la versión final del diseño. A menudo, se realiza en base al
wireframe y los mockups que proporciona el diseñador. Por esta razón, suele tener
medidas exactas y, por supuesto, la estructura también se mantiene. Si el diseño es
cercano a la versión final, las interacciones también deben ser desarrolladas con mucho
cuidado, teniendo en cuenta su semejanza con la versión final del sitio web. Entonces,
un prototipo sirve para examinar no sólo el contenido sino también la interactividad del
sitio.
Un prototipo se suele usar para poner a prueba ciertas funciones del sitio y verificar si
la usabilidad es la adecuada. En base a estas pruebas se puede proceder a realizar
cambios según convenga. Ya que un prototipo es una aproximación cercana al
producto final, tanto en diseño como en interacción, es un proceso que suele tomar más
tiempo, pero puede ser necesario en ciertas páginas web. Por ejemplo, si se trata de
una aplicación web, se deben realizar pruebas para verificar si ésta funciona
correctamente antes de ofrecer dicho producto a los clientes.
¿Qué es el IxD (Diseño de Interacción - Interaction Design)?
La IxDA (Interaction Design Association), lo define como:
El diseño de interacción (IxD) define la estructura y el comportamiento de

sistemas interactivos. Los diseñadores de interacción buscan crear relaciones
significativas entre las personas y los productos o servicios que estos usan,
desde computadoras hasta dispositivos móviles, aparatos y más…
Usability.gov lo define como:
El diseño de interacción se enfoca en crear interfaces bien pensadas en los

comportamientos. Entender cómo los usuarios y la tecnología se comunican
Asignatura Carrera
15/11/2022
entre sí es fundamental para esta disciplina. Con este entendimiento, se puede

anticipar cómo alguien interactúa con el sistema para corregir problemas de
manera temprana, así como inventar nuevas formas de hacer las cosas.
¿Qué te ofrece la UI y la UX respecto al IxD (Interaction

Design)?
Podríamos decir que UX es lo que un usuario siente acerca de las aplicaciones, UI es

qué, dónde y cómo funcionan los elementos en las aplicaciones, y IxD es cómo el
usuario y la aplicación interactúan entre sí.
Las cuatro dimensiones del Diseño de Interacción
Gillian Crampton Smith, introdujo el concepto de las cuatro dimensiones para el

lenguaje de diseño de interacción. Aunque cada dimensión funciona de manera
individual, es la suma de todas las que generan una mejor interacción entre el usuario y
la interfaz.
1º Dimensión – Palabras: las palabras deben de ser sencillas de entender y de

permitir la interacción.
2º Dimensión – Representaciones visuales: cada gráfico, ilustración, diagrama,

icono, foto, etc debe de ser usada con cautela, pero sobre todo debe de tener un
fundamento. Evita el uso como decoración.
3º Dimensión – Espacio: con lo que interactúa el usuario en el mundo real. Estos

pueden ser objetos físicos de hardware como un mouse, apuntador, teclado, joystick,
que son utilizados como herramientas de mando.
4º Dimensión – Tiempo: se refiere a la duración que el usuario pasa interactuando con

las palabras, representaciones visuales y el espacio.
Asignatura Carrera
15/11/2022
5º Dimensión (propuesta por Kevin Silver) – Comportamiento: en la que se

incluyen las emociones y reacciones que tiene el usuario al operar, presentar, utilizar o
realizar una acción en el sistema.
Asignatura Carrera
15/11/2022
Referencias
5 Dimensions of Interaction Design to Make your Product Thrill. (s. f.). https://www.hi-
interactive.com/blog/5-dimensions-of-interaction-design-to-make-your-product-
thrill
Carnero, D. (2019, 8 octubre). Color Oracle: diseños accesibles para personas con
daltonismo. El Blog de Cevagraf. https://www.cevagraf.coop/blog/color-oracle-
daltonismo/
Devin, F. (2017, 15 septiembre). Patrones de seguimiento visual y cómo usarlos en
Experiencia de Usuario. UXpañol.
https://uxpanol.com/experiencia-de-usuario/patrones-de-seguimiento-visual-y-
como-usarlos-en-experiencia-de-usuario/
Herramienta para el análisis y accesibilidad Tawdis. (s. f.).
https://platinoweb.com/servicios/posicionamiento/validacion-de-normas-
internacionales/219-validacion-tawdis.html
Just a moment. . . (s. f.). https://www.softwaretestinghelp.com/wat-web-accessibility-
toolbar/
Muñoz, E. M. S. (s. f.). WAVE – Web Accessibility Evaluation tool | Bloque II. Conceptos
básicos de la revisión de la accesibilidad.
https://espaciocompartir.inap.es/v3/pluginfile.php/5071/mod_resource/content/
20/wave__web_accessibility_evaluation_tool.html
Asignatura Carrera
15/11/2022
Parra, A. (2022, 27 abril). ¿Qué es el eye tracking? QuestionPro.
https://www.questionpro.com/blog/es/que-es-el-eye-tracking/
Publicado por: Andrea Cantú. (s. f.). Qué es: Diseño de Interacción (IxD). Andrea Cantú.
https://blog.acantu.com/que-es-diseno-interaccion/
SD, CX, UX, UI, IxD y sus diferencias. (2022, 17 junio). Thinkers Co.
https://thinkersco.com/comunidad/blog/diferencias-cx-ux-ui-sd-ixd/
Tipos de daltonismo | Optometristas.org. (s. f.). https://optometristas.org/tipos-de-
daltonismo
Asignatura Carrera

U2. Tarea 1

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

U2. Tarea 1

Cargado por

Copyright:

Formatos disponibles

Datos del Alumno Fecha

Nombre completo Matrícula

Universidad Tecnológica de la Costa Grande de Guerrero

Ingenieria en Desarollo y Gestión de Software

Alumno: Frederick Guzmán Salas

Profesor: Mtro. José Denys Hernández Espinoza

15 de noviembre del 2022

Objetivos del eye tracking para tu investigación..........................................................4

Ventajas del eye tracking.............................................................................................5

Patrones de seguimiento visual.........................................................................................7

Patrón de lectura Gutenberg........................................................................................7

Extensiones y barras de navegador web y aplicaciones web..........................................13

WAT (Web Accessibility Toolbar)..............................................................................14

WAVE Web Accessibility Evaluation Tool.................................................................15

Derivados del Daltonismo de acuerdo a la visión cromática...........................................15

Definiciones sobre Wireframes, Mockups y Prototype....................................................17

¿Qué es el IxD (Diseño de Interacción - Interaction Design)?.........................................20

¿Qué te ofrece la UI y la UX respecto al IxD (Interaction Design)?................................21

Las cuatro dimensiones del Diseño de Interacción.........................................................21

Posteriormente, se utilizan algoritmos avanzados para calcular la posición del ojo y

Objetivos del eye tracking para tu investigación

Al identificar los movimientos oculares comunes de los usuarios mientras ven el

 ¿Observan inmediatamente los call to action de esta página?

 ¿Los usuarios están leyendo este contenido?

 ¿Los usuarios están notando esta característica de la interfaz y, si es así, cuánto

 ¿Cuál de estos sistemas de navegación es el más detectable?

 ¿Qué elementos de la página están distrayendo a los usuarios de realizar

 ¿Será nuestro nuevo diseño más efectivo que el actual?

Combinar la información generada obtenida a través del uso de métodos de

Ventajas del eye tracking

 Revela el comportamiento subconsciente: Los investigadores pueden obtener

 Proporciona datos imparciales, objetivos y cuantificables: Elimina la necesidad

 Permite un comportamiento natural: Los rastreadores oculares son discretos y

 Es versátil y móvil: Puede ser usado en casi cualquier entorno y escenario.

 Proporciona un alto nivel de detalle: Dependiendo del dispositivo y el software, los

 Ofrece información en tiempo real: Con la transmisión en vivo se puede ver la

 Es explicativo: Puede representar procesos y acciones que son difíciles de

 Otorga una visualización gráfica: Utiliza mapas de calor y gráficos que muestran

Patrones de seguimiento visual

Patrón de lectura Gutenberg

El patrón Gutenberg básicamente se explica por los ejes de orientación y la gravedad.

Entonces, el patrón Gutenberg luce así:

Este patrón luce de la siguiente manera:

Y si se preguntan cómo se aplica en diseños reales, veamos la página web

¿Alguien ve una F por ahí?

Extensiones y barras de navegador web y aplicaciones web

Las personas que afortunadamente no tenemos este tipo de problemas no damos

TAW es una familia de herramienta para el análisis de la accesibilidad de sitios web,

han ido creciendo en funcionalidades desde el de accesibilidad a los de calidad web,

Comprobar el nivel de accesibilidad alcanzado en el diseño y desarrollo de páginas web

Público en general y específicamente profesionales de campo como webmasters,

 Problemas de oído, visión, movilidad.

 Dificultades de lectura o comprensión cognitiva.

 Imposibilidad de utilización del teclado o el ratón.

 Lector de sólo texto, pantalla pequeña o conexión lenta.

 La accesibilidad mejora el acceso a la web en general, no es de interés únicamente

WAT (Web Accessibility Toolbar)

WAT (barra de herramientas de accesibilidad web) : es una barra de herramientas para

WAVE Web Accessibility Evaluation Tool

Es una extensión gratuita para navegador web. Es específica para la evaluación de la

Entre las cosas que permite podemos destacar las siguientes:

 Realiza un análisis automático completo de la página, indicando los errores

 Señala características, estructura…