Estructura y
Maquetación con Diseño Adaptativo para Sitios Web sobre Autismo

Structure
and Mock-Up with Responsive Design for Websites about Autism

Victoria Salcedo

Escuela
Superior Politécnica del Litoral

Guayaquil,
Ecuador

[email-masked]

Orcid: 0000-0001-8519-768X

Nayeth Solórzano Alcívar

Escuela
Superior Politécnica del Litoral

Guayaquil,
Ecuador

[email-masked]

Orcid: 0000-0002-5642-334X

Lourdes
Pilay

Escuela
Superior Politécnica del Litoral

Guayaquil,
Ecuador

[email-masked]

Orcid: 0000-0002-9496-1149

Resumen— En la actualidad, el internet es una
de las principales fuentes de información que acceden los padres de niños y
niñas con Trastorno del Espectro Autista (TEA), o que sospechan que sus hijos lo
puedan tener. Esta situación hace relevante la existencia de sitios web que
ofrecen información a los padres y brindan ayuda en el proceso de
acompañamiento de su familiar con TEA. En este artículo se analiza una
propuesta de diseño de un sitio web para Autismo Ecuador, una organización que
trabaja en beneficio de las personas con TEA y sus familias. Esta organización
es una de las pocas en el país que cuenta con una página web, sin embargo, no
está actualizada. La propuesta, presenta un estudio del diseño gráfico y su
aplicación en el desarrollo de un sitio web estructurado y adaptativo para
poblaciones involucradas con TEA, con el fin de otorgar mayor visibilidad e
imagen comunicacional a Autismo Ecuador. La investigación ofrece un enfoque
pragmático a través del diseño, se aplican herramientas cualitativas para el
análisis y recolección de datos, con estrategias de Diseño Centrado en el
Usuario. Inicia con técnicas como Design Thinking, etnografía y antropología visual, entrevistas y
grupos focales, para recopilación de la información. Los resultados del
análisis se toman como base para la maquetación y obtención de un diseño bien
estructurado y pensado en el usuario. Un diseño previo a su implementación
muestra la funcionalidad de un sitio web visualmente atractivo, con un elevado
nivel comunicacional y aspectos adaptativos para su uso hasta en dispositivos
móviles.

Palabras Clave: Diseño Web,
Diseño Responsivo, Trastorno del Espectro Autista, TEA, Usabilidad.

Enviado: 30/09/2020                                     Aceptado:
28/10/2020                                   Publicado:
30/12/2020

Sumario: I Introducción, II Metodología, III Procesos de Diseño y
Desarrollo, IV Presentación de Resultados y Discusión, V Conclusiones y
Trabajos Futuros.

Como
citar: Salcedo, Victoria., Solórzano, Nayeth., &
Pilay, Lourdes. (2020). Estructura y Maquetación con Diseño Adaptativo para
Sitios Web sobre Autismo. Revista Tecnológica - Espol, 32(2).
Recuperado a partir de
http://www.rte.espol.edu.ec/index.php/tecnologica/article/view/775

http://www.rte.espol.edu.ec/index.php/tecnologica/rte/article/view/775

https://doi.org/10.37815/rte.v32n2.775

Abstract— Nowadays, the
Internet is one of the primary sources of information for parents of children
diagnosed with the Autism Spectrum Disorder (ASD), or those who suspect that
their children have it. This situation makes relevant the existence of websites
that offer information to parents and provide help in the process of
accompanying their family member with ASD. This article analyzes a proposal for
the design of a website for Autism Ecuador, an organization that works for the
benefit of people with ASD and their families. This organization is one of the
few in the country with a website; however, it is not updated. This proposal
presents a study of the graphic design and its application to develop a
structured and adaptative website for populations involved with ASD, seeking to
grant greater visibility and communicational image to Autism Ecuador. This
research offers a pragmatic approach through design; qualitative tools are
applied for data analysis and collection, with User Centered
Design strategies. It begins with Design Thinking techniques, ethnography,
visual anthropology, interviews, and focus groups, for data collection. The
analysis results are taken as a basis for the layout and obtaining a
well-structured and user-oriented design. A design before its implementation
shows the functionality of a visually attractive website, with a high
communicational level and adaptative aspects to be used even in mobile
devices.

Keywords: Web Design, Responsive Design, Autismo Ecuador, Autism Spectrum Disorder.

I. INTRODUCCIÓN

El internet es una de las principales
fuentes de información para los padres que reciben el diagnóstico de sus hijos
con Trastorno del Espectro Autista (TEA) o que sospechan que lo puedan tener, por tanto, se
vuelve relevante para estas familias la existencia de sitios web que les
permitan encontrar información confiable y que les brinde ayuda en el proceso
de acompañamiento de su familiar con TEA. En este contexto, es indispensable
que el contenido de los sitios web relacionados con TEA sea de calidad y
confiable ya que de ello depende, en gran medida, las acciones a tomar por
parte de quienes están relacionados o tienen responsabilidades de seguimiento y
control de las personas diagnosticadas [1].

Hoy en día es común escuchar hablar del término “autismo”, sin embargo, el
desconocimiento aún persiste. López-Chávez and
Larrea-Castelo [2], afirman que este grupo social
sigue a la espera de reconocimiento y atención en todos los ámbitos; inclúyase
el de la salud, social, educativo e, inclusive, el económico. Su investigación
pone en evidencia las dificultades que atraviesan las familias en Ecuador para
acceder a un proceso de evaluación y diagnóstico.

Existen varias asociaciones en Ecuador que tienen como propósito informar y
apoyar de alguna manera a las personas con TEA y a sus familias. Aunque muchas
de las organizaciones en el país buscan brindar ayuda y servicios a este grupo
social, muy pocas cuentan con un sitio web. Al realizar una búsqueda en
internet acerca de sitios web sobre autismo en Ecuador, se encontraron pocos
sitios. Entre ellos, se puede mencionar a la Fundación Entra a mi Mundo y
Autismo Ecuador. Estas
fundaciones, en sus páginas web, presentan el uso de plantillas
preestablecidas y muestran una
deficiencia en el proceso de diseño para su interfaz, respectivamente.
Otras organizaciones como la Federación Ecuatoriana del Espectro Autista
(FEDEA) y Fundación Asperger Ecuador redirigen a la red social Facebook,
presentando sus contenidos con
el uso de fan pages.

En el caso de Autismo Ecuador, organización sin fines de lucro, en el año
2013 crea un sitio web que busca sensibilizar a la comunidad. Para ello,
difunde contenidos con información relevante acerca de esta condición. Sin
embargo, el diseño de su sitio web se ha mantenido sin modificaciones desde su
creación, por lo que no muestra contenido actualizado ni está
sujeto a las tendencias que se manejan actualmente para el desarrollo de
interfaces para sitios web. Por otro lado, Autismo Ecuador no se enlaza con otras
redes sociales, lo que beneficiaría a la visibilidad del sitio, tampoco cuenta
con un diseño responsivo. Quiere decir, que no se adapta a dispositivos móviles
lo que, hoy en día, es muy importante para cualquier organización que desee
difundir ampliamente sus contenidos.

La necesidad de sitios web actualizados y con diseño responsivo se revisa a
través de este caso, pues a pesar de que la página de Autismo Ecuador
aparentemente se encuentra posicionada entre los primeros lugares en su género
en visualización de búsqueda local con 9349 visitas entre el año 2019 a junio
del 2020, se tiene como resultado que el sitio es visitado, pero abandonado
casi inmediatamente. Esta información se puede constatar por medio de las
estadísticas que arroja el servidor y que indican que el 81,3% de los usuarios
abandona el sitio en menos de 30 segundos de haber ingresado.

En su página web, Autismo Ecuador declara que su
misión es convertirse en la agrupación social más importante del país con el
propósito de velar y mejorar las condiciones de vida de las personas con
autismo y su familia. De esta
forma se busca apoyar el logro de su objetivo. Se toma este caso para
constatar que el efecto de maquetación de un sitio estructurado, intuitivo y
con diseño adaptativo, sirve como estrategia fundamental para obtener mayor
visibilidad y tiempo de visita en una página web.

El presente artículo guía
el proceso de un nuevo diseño para el sitio web de Autismo Ecuador cuyo fin es
lograr un mayor posicionamiento, ampliando su visibilidad para continuar con su
objetivo de difusión y sensibilización sobre la condición del TEA. Al mismo
tiempo, brinda a los padres y familiares de personas con TEA información y
orientación oportuna.

A.
Estado del arte

Se ha demostrado que los padres tienen como principal fuente de información
el internet, sin embargo, es importante recalcar que revisar información de
varias fuentes puede resultar confuso y poco confiable [3]. Por lo que se considera que el
sitio actualizado, bien estructurado e intuitivo, con contenidos apropiados y
según las necesidades de los padres y comunidad en general relacionados con
niños, jóvenes y adultos diagnosticados con TEA, puede convertirse en una
herramienta de apoyo informativo muy relevante para este grupo social. Para
ello, previo al desarrollo del sitio web, se debe considerar los siguientes
aspectos: Identificar el público objetivo para el cual estará dirigido el
proyecto, analizar los temas relevantes que se investigarán según el contexto
para su elaboración, determinar los diseños y elementos visuales a desarrollar,
utilizar según un análisis preliminar y organizar la información pertinente a presentar
en el sitio web.

1)
El Trastorno del Espectro
Autista y su difusión en Ecuador: La American Psychiatric Association
(APA) en el 2013, por medio del Manual de Diagnóstico y Estadístico de los
Trastornos Mentales Quinta Edición (DSM-5) agrupa en un solo concepto los
criterios de los trastornos generalizados del desarrollo: Trastorno del
Espectro Autista, y lo define como “un déficit persistente en la comunicación
social y la interacción social en distintos contextos, no explicable por un
retraso general en el desarrollo” [4] (p. 684).

Autores como Salvadó, Palau,
Clofent, Montero and Hernández [5] y McPartland, Reichow and Volkmar [6] coinciden en que, si bien el TEA se
manifiesta de diversas maneras y con conductas diferentes en cada individuo,
esta condición presenta algunas características precisas que lo identifican.
Entre ellas tenemos: la dificultad para comunicarse y socializar, dificultad
para desarrollar el lenguaje y, además, los intereses focalizados y
comportamiento repetitivo, tal como se especifica en la última edición del
DSM-5.

Cualquier indicio
sobre las características mencionadas puede ser observado durante los primeros
tres años de vida, lo que da grandes posibilidades para tomar acción y mejorar
la calidad de vida de una persona con TEA[7]. Esta identificación se logra a través de intervenciones idóneas y
adaptadas a las necesidades de cada sujeto. No obstante, como dice la
Asociación Psiquiátrica Americana (American Psychiatric
Association) [8], el TEA “puede no ser detectado hasta más tarde debido a las
mínimas demandas sociales y al apoyo en los primeros años de los padres” [7] (p. 244).

Salvadó, Palau, Clofent, Montero and Hernández [5], destacan tres grandes grupos en los que se dividen estos
tratamientos: Las prácticas basadas en la evidencia, las prácticas basadas en
la intervención y las terapias bajo los modelos globales de tratamiento. Sin
embargo, Prizant, Wetherby and Rydell [9], sugieren la integración de las intervenciones en un solo grupo
que contengan dos extremos: uno de tratamientos conductuales rigurosos, y en el
otro los tratamientos que se enfocan en el desarrollo social, ya que se
considera que de esta manera se obtienen mejores resultados.

En el 2007, Naciones Unidas declaró el 2 de
abril como el Día Mundial de la
Concienciación sobre el Autismo [10]. Según los padres y familiares de personas con TEA, durante
los últimos años se ha adoptado en el país, con el apoyo de algunos organismos
públicos, la iniciativa de “pintar” o “encender” este día de azul, que es el
color que representa al TEA a nivel mundial, con la finalidad de dar notoriedad
en la sociedad sobre esta condición. Por medio de concentraciones de algunas
organizaciones del país y el encendido de luces azules en edificios o
monumentos de algunas ciudades se busca, de alguna manera, recordarle a la
sociedad que existen personas con esta discapacidad.

Entre
estas organizaciones se encuentran FEDEA, Fundación Entra a Mi Mundo, Fundación
Asperger Ecuador, Centro Psicoeducativo Integral Isaac, Asociación de Padres
APADA del Ecuador, Fundación Comunicar y Autismo Manabí. Tomando en cuenta la
referencia anterior, si hacemos un recorrido en un buscador de internet,
la gran mayoría de organizaciones no cuenta con un sitio web; en su lugar,
tienen como medio principal de difusión la red social Facebook por medio de fan pages.

2)     Sitios
web relacionados con TEA: Coincidiendo con
varios autores, [Reichow, Halpern, Steinhoff, Letsinger, Naples and
Volkmar [3]], afirman que el
internet es el medio por el cual la mayoría de las personas obtienen
información y que entre los principales motores de búsqueda se encuentra
Google. Así mismo, los padres o familiares de personas con TEA también tienen
como principal fuente de información el internet para realizar búsquedas sobre
este tema [11].

A
pesar de esto, estudios como el realizado por Eysenbach and Köhler [12] demostraron que, al ejecutar búsquedas relacionadas con
temas de salud en internet, accedían a la información rápidamente, pero solía
no ser de una calidad confiable. En relación con lo anterior, Scullard, Peacock and Davies [13], manifiestan en su estudio que, al hacer una búsqueda en
Google sobre autismo, se produjeron muchos resultados, aunque carentes de
exactitud.

Reichow, Halpern, Steinhoff,
Letsinger, Naples and Volkmar [3], hicieron un experimento rápido para demostrar el
incremento del interés por los temas relacionados con el autismo en el año
2010. Referente a este experimento, al realizar una prueba en Google utilizando
como palabra clave “autismo”, en julio de 2020, el motor de búsqueda arrojó un
resultado de 22,600,000 enlaces relacionados con el tema, lo que confirma que
al pasar de los años sigue aumentando el interés por el TEA.

Entonces,
si bien es cierto que se muestra un incremento en el interés por los temas
relacionados con el autismo, no hay mucha información respecto a los sitios web
sobre el TEA, como aseguran Reichow, Halpern, Steinhoff, Letsinger, Naples and
Volkmar [3].
Su afirmación se basa en estudios realizados por Chowdhury, Drummond, Fleming and Neitfeld [11], entre los cuales destaca que se hizo una revisión de 145
páginas web, de las cuales un 80% mostraban contenido que no era verificable.
Con relación a esto, Bernstam, Shelton, Walji and Meric-Bernstam [14], afirman que no hay una guía adecuada para dar con sitios
web que contengan temas sobre TEA de buena calidad.

Dado que es difícil acceder a información relacionada con autismo
por los medios tradicionales y que es el internet la mayor fuente de contenido,
en el estudio realizado por Chowdhury, Drummond, Fleming and Neitfeld [11], se reunieron sitios web que podrían resultar de utilidad
para padres de infantes con TEA, sugiriendo que la calidad de los mismos pueda
ser sometida a una evaluación, dado que “coloca a las familias en riesgo de
sacar conclusiones sospechosas con respecto a las opciones de tratamiento” (p.
158).

3)     Diseño y desarrollo de sitios web: Pedraza-Jiménez, Blanco, Codina and Cavaller [15], sugieren que para
el desarrollo o modificación de cualquier sitio web, se debe detallar las
características que va a tener en el documento de Especificación de
Requerimientos (ER). Esto garantiza que se cumpla el proceso de implementación
según lo establecido previamente. También manifiestan que es necesario tomar en
cuenta los aspectos funcionales, es decir, los objetivos del sitio web, su
público objetivo y las tareas que se van a realizar dentro del sitio. Además,
hay que prestar importante atención a los aspectos técnicos, ya que son los que
pueden afectar directamente al diseño.

Otro
aspecto a tomar en cuenta, como afirma Veloz [16], es que los sitios web deben adaptarse a diversos medios,
dado el continuo uso de los teléfonos inteligentes, tabletas e incluso
televisores para visualizarlos. “La navegación, utilizando un tipo u otro de
dispositivo, cambia de forma radical la experiencia del usuario y por lo tanto
los sitios web deben adaptarse a todos estos formatos” (p. 60).

De
esta forma surge el término “Responsive Web Design”
en el año 2008. Su autor, Ethan Marcotte, formó parte
del equipo encargado del rediseño de sitio web de The Boston Globe bajo el término “web para todos”, siendo uno
de los primeros en adaptarse a estos cambios, lo que permitió el acceso al
sitio desde varios dispositivos [16]. Para los diseños responsivos en sitios web para clientes
corporativos, Harrell
[17]
sugiere que se “muestre el mismo contenido a los usuarios, independientemente
del dispositivo que estén usando. La única diferencia entre pantallas y
plataformas es que se tiene que diseñar para varios tamaños de pantalla” (p.
77).

De
la mano con el diseño responsivo está la usabilidad, que se mide en factores
como eficacia, eficiencia y satisfacción. Como sostiene Krug [18], en el diseño todo tiene que ver con factores que
determinen compensaciones, debido a que siempre existen limitaciones. Estos son
factores muy importantes a considerar, ya que pueden repercutir directamente en
la experiencia del usuario dentro de un sitio web.

Con
respecto al acceso a la web, Egri y Bayrak [19] afirman que un usuario generalmente utiliza primero ciertos
motores de búsqueda para dirigirse a un sitio web, incluso, sabiendo la
dirección de este; siendo Google el más popular. Esta es una de las razones por
lo que en la actualidad técnicas como SEO (Search
Engine Optimization)
son tomadas en consideración como parte del proceso de desarrollo de un sitio
web para contribuir a su visibilidad, ya que permiten ubicarlo, mediante su
correcta configuración, entre los primeros lugares de búsqueda.

En
general, se determinan aspectos relacionados con la necesidad de sitios web
bien informados sobre áreas específicas de interés de sus usuarios. Las
necesidades de   actualizar y utilizar diseño responsivo se revisan a través
del caso de rediseño propuesto para la página de Autismo Ecuador la cual, a
pesar de ubicarse como posicionada entre los primeros lugares de visualización
en su género a nivel local, su tiempo de permanecía por visita de parte de los
usuarios es mínimo.

II. METODOLOGÍA

Partiendo
del conocimiento del tema, el proyecto se definió con parámetros de
investigación de nivel exploratorio. Se basó en paradigmas interpretivistas
utilizando un método cualitativo como estrategias relacionadas con este enfoque
desde el punto de vista del investigador [20]. Esto permitió delimitar la problemática según los
antecedentes, la justificación del problema planteado y la definición
del objetivo del proyecto, buscando resultados útiles y bien justificados
respecto al diseño del nuevo sitio web, relevantes y representativos para el
público objetivo.

Por
medio de la revisión de la literatura y el análisis de otros sitios web bajo
una investigación exploratoria y descriptiva sobre el tema de estudio, y llevando
a cabo entrevistas a padres y expertos en el tema, se analizó la información
recolectada aplicando métodos cualitativos.

Como resultado se desarrolló un
cuestionario semiestructurado que sirvió como guía para las entrevistas
relacionadas al caso sobre “cómo esperan los usuarios ver el sitio web” (ver
Anexo A). Posteriormente, se realizaron procesos interpretativos de
codificación abierta organizando los datos por códigos axiales, categorías,
hasta llegar a temas de interés, logrando realizar un diseño estructurado de
las necesidades e intereses planteados por los entrevistados con respecto a los
actores involucrados en este caso.

Dada la naturaleza aplicativa de
este proyecto, se elaboró un diseño estructural para la investigación del nuevo
diseño del sitio web para Autismo Ecuador, siguiendo estrategias sugeridas por Hassan and Martín [21] sobre procedimientos para el diseño de sitios accesibles.

Este nuevo sitio tuvo como punto de
partida estrategias de análisis cualitativo que definieron los procesos
metodológicos a seguir y las herramientas que fueron de utilidad para identificar
los requerimientos funcionales en cuanto al público objetivo y las tareas que
este realizará dentro del sitio. Considerando que todo proyecto de diseño pasa por tres etapas
principales: Inspiración, ideación e implementación, se aplicaron métodos
etnográficos y antropológicos, Design Thinking y estrategias de grupos focales y entrevistas
para recolección y análisis de datos buscando empatizar con el usuario e
identificando sus verdaderas necesidades referentes al sitio web (ver Fig. 1)

Bajo este concepto se definieron
esquemas etnográficos y antropológicos que se deben tomar en consideración para
desarrollar las características del sitio web. También, se aplicaron
estrategias con Design Thinking
considerando en el proceso los insights (revelaciones)
de los autores o partes interesadas, basados en la recolección de datos
primarios como parte del proceso de investigación aplicado al diseño que
corresponde para el desarrollo de la propuesta. Inicia con el diseño de un
prototipado hasta lograr el producto final acorde a las necesidades de los
usuarios.

Fig. 1. Diseño de la metodología de investigación para la
generación del nuevo sitio web de Autismo Ecuador

III. PROCESOS DE DISEÑO Y DESARROLLO

Para
el proceso de
diseño y desarrollo de un sitio web de calidad sobre autismo, se deben
considerar aspectos relacionados con el Diseño Centrado en el Usuario (DCU), dado
que esto permite la accesibilidad a un mayor rango de usuarios [21].

A.
Design Thinking

La metodología escogida para
determinar las necesidades del usuario fue Design Thinking, definida como “una disciplina que usa la
sensibilidad y los métodos del diseñador para hacer coincidir las necesidades
de las personas con lo que es tecnológicamente factible” [22] (p. 4). Para la recolección y análisis de la información, se
utilizó herramientas con un enfoque interpretivista y
estrategias de métodos cualitativos.

B.
Etnografía y antropología
visual

Bajo un esquema observacional, se identificaron
características que definen a los miembros de la comunidad TEA. Se utilizó la
combinación de las herramientas moodboard y coolboard, lo que permitió establecer
coincidencias en el estilo de vida de las familias de personas diagnosticadas
con TEA, como podemos ver en la Fig. 2 se determinó que el público objetivo
abarca un rango amplio de tipologías que coinciden en varios aspectos que giran
en torno al diagnóstico de su familiar. Además, las personas diagnosticadas con
TEA también forman parte de este grupo objetivo.

Así mismo, se aplicaron estas herramientas para el
proceso de observación y análisis de las tendencias en cuanto a criterios de
diseño y estructura utilizados en los sitios web existentes relacionados con
TEA en varios países del mundo, como vemos en la Fig. 3.

Fig.
2. Familias de personas con Trastorno del Espectro Autista

Fig.
3 Tendencias y
diseño de sitios web relacionados con TEA

C.
Entrevistas y
herramienta Personas

Utilizando un modelo semiestructurado, se realizaron
entrevistas a padres de niños, niñas y jóvenes con TEA con diferentes niveles
de funcionamiento. Estas permitieron determinar el contexto y las dificultades
que enfrenta la mayoría de los padres en cada etapa del diagnóstico de sus
hijos o hijas. Además, se confirmó que la principal fuente de información para
un padre o familiar que sospecha o que ya ha recibido el diagnóstico es el
internet; así mismo, que es por este medio que los involucrados buscan recursos
que les permitan ayudar a sus familiares con autismo.

Adicional a lo anterior, los padres
de familia coincidieron en que sería importante contar con un sitio web que les
brinde herramientas y les permita compartir experiencias con otros padres o
familiares de personas con autismo. Al mismo tiempo que es de gran ayuda para
sobrellevar de mejor manera las diferentes etapas que se atraviesan en el
acompañamiento de una persona con TEA.

Con base en las entrevistas, se
desarrolló un perfil ficticio para la creación de un protagonista para la
herramienta Personas (ver Fig. 4), que representa a todo un grupo objetivo. Este proceso
permitió explorar a este público, lo que ayudó a empatizar e identificar más
claramente cuáles son los aspectos en común que comparten los potenciales
usuarios del sitio.

Fig.
4. Personaje
ficticio basado en entrevistas (herramienta Personas)

D.   Grupos focales y mapa de experiencias

Utilizando estrategias de focus group, se realizó
un experimento en el que los participantes contaban sus experiencias luego de
visitar el sitio actual de Autismo Ecuador. Estudiantes de diseño gráfico,
comunicación social, profesionales en psicología y familiares de personas con
TEA dieron sus impresiones en cuanto a aspectos positivos, negativos y
sugerencias sobre el contenido y diseño, coincidiendo en que el sitio debía
mejorar. Luego del experimento realizado con el focus
group, se trazó la representación de su “Mapa de
experiencias” dentro del sitio. Los resultados, según cómo percibieron su
visita al sitio, se pueden observar en la Fig.
5.

Fig.
5 Mapa de
experiencias resultado del focus group

E.
Insights y concepto del proyecto

Para llegar a la determinación del concepto, se
revisaron los resultados obtenidos del uso de los recursos metodológicos
señalados anteriormente. En primer lugar, se codificaron y categorizaron los
datos recolectados y en última instancia se contrastó la información obtenida.
Durante este proceso se encontraron similitudes marcadas en los intereses y
necesidades de los involucrados, con las que se logró identificar
los siguientes insights:

·    Padres
desesperados en busca de respuestas al detectar anormalidades en el desarrollo
de sus hijos en edades tempranas.

·    Los
padres de niños con TEA están en constante búsqueda de ayuda e información para
el acompañamiento en todas las etapas de sus hijos.

·    Los
padres o familiares de una persona con TEA esperan encontrar toda la
información que necesita en un solo sitio web y rápidamente.

·    Los
padres de las personas diagnosticadas con TEA necesitan sentirse comprendidos,
buscan empatía y la inclusión de sus hijos en todos los ámbitos.

·    Los
padres de los niños y niñas con TEA están sumergidos en constante estrés y
agotamiento.

A partir de los insights identificados, se concluyó que la principal
necesidad de los padres de niños y niñas con TEA es tener acceso a herramientas
que brinden información confiable y ayuda oportuna para sobrellevar la
condición de sus hijos dentro de un entorno empático y agradable. Como
resultado se determinó el siguiente concepto aplicable al presente proyecto:

·
Herramienta amigable que te brinda ayuda durante todo el
proceso de acompañamiento de desarrollo de tu hijo o hija con TEA para mejorar
la calidad de vida.

F.
Propuesta de diseño
y desarrollo del nuevo sitio web

Esta sección inicia realizando un análisis
del sitio web actual de Autismo Ecuador a nivel de composición, contenido y
diseño como base para presentar la propuesta de un nuevo diseño, una vez
identificadas las falencias visuales y comunicacionales de este sitio.
Asimismo, se describen los criterios en cuanto a elementos de diseño,
comunicación y experiencia de usuario que se han tomado en cuenta para el
desarrollo del prototipado y maquetación del nuevo sitio web de Autismo
Ecuador.

1)
Análisis del sitio
actual de Autismo Ecuador:  El sitio web de Autismo
Ecuador[1]  se creó en el año 2013 y hoy en día continúa
con el diseño inicial, por lo que el sitio web de la asociación necesita un
rediseño que le permita captar el interés de los usuarios para la difusión
sobre el TEA. No obstante, los directivos de Autismo Ecuador no desean hacer
cambios en el logotipo que los identifica desde entonces.

Un aspecto que llama la atención es
que la dirección del sitio sugiere que abarca mucha información relacionada con
el TEA en el Ecuador. Además, como afirma D'Auria
[23], su extensión “.org”, le otorga al sitio un alto grado de
confiabilidad, por lo que el usuario ingresa con grandes expectativas de
encontrar lo que busca y al final, esto no sucede, ya que es muy poco lo que el
sitio puede ofrecer. Por otro lado, se observó que el sitio no se vincula con
las redes sociales de Autismo Ecuador, lo que es un gran desacierto, ya que
gran parte de la información que difunde la asociación es por esta vía. De la
misma forma, no cuenta con un diseño responsivo, es decir, no se adapta de
manera adecuada a dispositivos móviles y deja al sitio aún menos funcional.

En cuanto a diseño, se nota una gran
cantidad de espacios sin utilizar, lo que se evidencia aún más si se ingresa
desde un dispositivo móvil. Además, por la falta de optimización del uso de los
espacios, la estructura de la página de inicio se corta, lo que provoca
que la información de interés no quede visible. Es evidente que el logo de
Autismo Ecuador ha sido utilizado en baja resolución, lo que no debe suceder.

Para analizar la disposición de los elementos dentro
de la página de inicio, se trazó una media estructural, es decir, una línea a
lo largo de la composición que la divide en dos partes iguales. Así como se
observa en la Fig. 6, fue evidente notar que existe una mayor cantidad de
elementos dispuestos sobre el lado izquierdo, produciendo un desbalance. De ahí
que la composición no es equilibrada y no guarda armonía visual. Se observó también que no se demuestra el uso de una
cuadrícula guía, dejando espacios en blanco, con elementos que no se encuentran
alineados; mientras que otros, ocupan espacios excesivos.

Fig.
6 Media
estructural aplicada a la página de inicio del sitio

En cuanto a contenido, el menú tiene
pocos enlaces y ninguno de ellos muestra información acerca de los servicios
que Autismo Ecuador ofrece. Tampoco cuenta con un buscador que permita al
usuario encontrar información de interés de forma más directa. A más de ello, se
ha colocado en esta página un enlace de “Inicio”, lo que es redundante y no
aporta en funcionalidad.

Con respecto a la cromática, no se
determinó una paleta de colores en el sitio, sino más bien ha sido una elección
de colores al azar, dado que no guardan relación con la identidad gráfica de
Autismo Ecuador. Los títulos se han utilizado en color negro, al igual que en
los cuerpos de texto, sin embargo, utilizar la tipografía en cursivas no es
acertado. Por otro lado, a pesar de que es correcta la elección de la
tipografía para los cuerpos del texto, el tamaño de la letra es pequeño y el
interlineado no es el adecuado, lo cual dificulta la lectura.

Otro detalle negativo que se observó en el sitio web actual
es el poco cuidado en la redacción y escritura, evidenciándose faltas
ortográficas y errores gramaticales en algunos de los textos dispuestos dentro
del sitio.

2)
Logotipo de Autismo
Ecuador: Uso y Variantes: Como se mencionó anteriormente, por pedido del cliente, se
consideró el logotipo actual de Autismo Ecuador como elemento obligatorio
dentro del nuevo diseño del sitio web. Por todo lo expresado, se lo tomó como
punto de partida del proceso creativo que generó los elementos que componen el
nuevo diseño, de manera que se mantenga la armonía visual y el concepto del
proyecto. Como parte de este proceso, se determinó cuáles serían las variantes
del logotipo para el presente y futuros proyectos de diseño, como vemos en la Fig.
7.

Fig.
7 Uso del
logotipo de Autismo Ecuador

3)
Estructura del nuevo
sitio web: Para iniciar con el proceso de diseño de interfaz para un sitio web, es
fundamental desarrollar la estructura que formará parte de su Arquitectura de Información
(AI). Se elaboró una propuesta para la nueva estructura del sitio con la
disposición de los contenidos sugeridos y a partir de la cual se diseñaron las
interfaces de la página de inicio o home y páginas internas. A medida
que avanzaba el desarrollo del proyecto, esta estructura se fue modificando con
el fin de mejorar la experiencia del usuario, quedando como resultado final la
que vemos en la Fig. 8.

Fig.
8 Propuesta
para la estructura del nuevo sitio web

A
partir de esta estructura, y por medio de un proceso de bocetaje, se
desarrollaron plantillas de diagramación, ya que, como afirma Harrell
[17], se considera el esbozo y
la maquetación como elementos esenciales del proceso del diseño web. Se
definió un formato vertical delimitando los espacios para los elementos de la
página de inicio, tomando en cuenta los principios de equilibrio y jerarquía
visual y además que el diseño debe adaptarse a dispositivos móviles quedando
definida la plantilla que vemos en la Fig.
9.

Fig. 9 Plantilla de
diagramación para la página de inicio

4)
Paleta de colores: En función de las herramientas moodboard y coolboard
elaboradas previamente, se conoce que el color por excelencia de la comunidad
TEA es el azul, no obstante, se optó por el uso de una paleta de colores que
identifique a Autismo Ecuador. Esto permitió mantener la armonía visual dentro
del sitio y, además, son tonalidades que evocan el entorno amigable y cálido
que se busca transmitir al usuario. Para complementar este concepto, se
incorporó una tonalidad gris, como se observa en la Fig.
10, que se utilizó principalmente en textos. Dado que es un
color que contrasta y a la vez equilibra y neutraliza los tonos brillantes y
que le otorga sobriedad al sitio.

Fig. 10 Paleta de
colores para el sitio

5)
Tipografía: Se escogió Lato, una
tipografía sans serif
o de palo seco, con características que se adaptan a las necesidades de la
propuesta, como la legibilidad y versatilidad. Tiene una gran variedad dentro
de su familia tipográfica, como se observa en la Fig. 11, por lo que no fue necesario combinarla con otra tipografía
y aportó armonía visual al diseño. Cabe destacar que, además de ser empleada
para los textos, la tipografía también será tomada como un elemento para el
diseño en algunos casos.

Fig.
11 Familia
tipográfica utilizada en el nuevo diseño del sitio

6)
Pop-up o intro de bienvenida: La propuesta de estructura del nuevo
diseño tiene como punto de partida un pop-up de bienvenida, es decir, el
usuario no ingresa directamente a la página de inicio; en su lugar, a través de
una ventana de recibimiento, debe elegir la tarea que va a realizar dentro del
sitio web a modo de accesos directos. Para este fin se diseñó un menú flotante
en el que el usuario puede escoger entre cinco opciones según sus necesidades.

Esto permite el uso de atajos de
navegación (shortcuts) llevando
directamente al usuario a los contenidos de su interés o continuar con una
navegabilidad completa por el sitio. Para ejemplificar, si el usuario escoge la
opción 1, como se observa en la Fig. 12, se dirige a la página de inicio del sitio y puede comenzar
a navegar.

Fig. 12 Pop-up
de bienvenida al sitio web

Para las opciones 2 y 3
respectivamente, se diseñaron los pop-ups que corresponden al acceso al
sitio por medio de una cuenta ya creada o al registro de una en caso de no
tenerla, como se puede observar en la Fig.
13.

Fig.
13 Pop-ups
para inicio de sesión al sitio y registro de cuenta

Estas opciones se implementaron con
la finalidad de otorgar al usuario una experiencia grata y un sentido de
pertenencia a la comunidad. Al tener el usuario una cuenta, no solo accede a
contenidos exclusivos, sino que pasa a formar parte de una comunidad.

7)     Prototipo para la página de inicio o home: De todas las fases, esta
es la que suele recibir más atención y también se considera la más divertida [17], ya que es aquí donde se desarrollan los diseños de la
interfaz visual, los esquemas de navegación y los patrones de diseño iniciales
para la experiencia general y donde se prepararon los escenarios para el resto
del proceso.

Fig. 14 Diseño de Página de inicio o home y media
estructural

De
acuerdo con el concepto del proyecto, se diseñó una interfaz que recibe y da la
bienvenida al usuario en un entorno cálido y amigable. Por otro lado, si bien
se buscó que el sitio presente un sistema de usabilidad sencillo, esto no
significó alejarse de las tendencias que hoy en día se utilizan para el diseño
de sitios web.

En principio se estableció que se
aprovecharía todo el espacio de la pantalla para implementar el diseño, por lo
que, según la opinión de expertos, se eligió el flat design.
Esto consiste en el uso de imágenes que ocupen todo el ancho de la pantalla
para lograr un alto impacto visual, complementado con el uso de formas
geométricas, imágenes vectoriales, íconos y botones fantasma. Además, se
consideró un menú fijo que se mantendrá visible en la parte superior, haciendo
al sitio web más accesible. A esto se le suma el uso de parallax,
con el que se le dio relevancia a la fotografía mediante el movimiento en
capas, dando una sensación de profundidad. Las características antes
mencionadas podrán ser visualizadas a lo largo de la página de inicio a medida
que el usuario utilice el sistema de scrolling
o desplazamiento hacia abajo.

En la Fig.
15 se puede observar, por medio de una media estructural, que
la disposición de los elementos se percibe dentro de una composición simétrica
y equilibrada. Siguiendo las recomendaciones de expertos en cuanto a cómo los
usuarios miran los elementos de un sitio web, se hizo el correcto uso de la
jerarquía visual de estos elementos ubicándolos acorde a los espacios
dispuestos en el diseño de la plantilla estructural y se logró una armonía
visual en la página de inicio del sitio.

8)
Prototipo para
páginas internas del sitio web: Bajo la misma estructura y proceso de desarrollo de la página de inicio, se
elaboró una plantilla de diagramación para las páginas internas, como se
observa en la Fig. 15; esta puede estar sujeta a pequeñas variaciones
según el contenido que se vaya a presentar en cada sección del sitio, sin que
afecte al diseño propuesto.

Fig. 15 Diseño de plantilla
para páginas internas

Como se observa en la Fig. 16, se diseñó la página interna “¿Quiénes somos?”,
bajo los criterios de diseño establecidos en el proceso creativo para el
desarrollo de la composición del diseño de interfaz planteado para la página de
inicio o home, con el fin de mantener la misma línea gráfica dentro del
sitio.

Para aportar accesibilidad a las páginas
internas, se mantienen la barra de menú, el footer
y la sección de redes sociales. Otro aspecto que se tomó en consideración con
respecto a la composición es el ancho de los cuerpos de texto, debido a que los
expertos recomiendan no exceder los 500 pixeles, para efectos de no abrumar al
usuario con grandes bloques de texto. En su lugar, se da al usuario la opción
de escoger si sigue leyendo o no el texto de acuerdo a sus intereses. Esto se logró
mediante la incorporación de botones fantasma a los que el usuario puede
reaccionar intuitivamente dando clic sobre estos.

Fig.
16 Ejemplo de
diseño de páginas internas del sitio

9)
Diseño responsivo
para el sitio web de Autismo Ecuador: Como se especificó al inicio de este
artículo, esta propuesta de rediseño debía contar con un diseño adaptativo a
varios dispositivos, en especial, móviles. Para ello se elaboró una plantilla
de diagramación inicial cuya estructura y diseño debían tener dentro de sus
características principales, la capacidad de adaptarse a un formato vertical de
tal forma que pueda ajustarse al ancho de pantallas más pequeñas, sin que se
vea afectado el concepto de diseño determinado para el sitio.

Como
se observa en la Fig. 17, se adaptó tanto la estructura como el diseño a un formato
menor, en este caso 400 pixeles, que es la medida comúnmente utilizada en estos
casos.

El
cambio más evidente para esta adaptación es el uso de un menú hamburguesa, lo
que ayuda a suprimir el uso del espacio y aporta a la usabilidad del sitio en
móviles. De igual manera, se incorporaron elementos intuitivos como flechas,
los textos se acortaron en algunos casos y se le dio más espacio entre
elementos de manera que no interfieran en la navegabilidad del usuario al
pulsar sobre alguno de los enlaces.

Fig.
17 Plantilla y
estructura para el diseño adaptativo

IV. PRESENTACIÓN DE
RESULTADOS Y DISCUSIÓN

Como resultado del proyecto, se presenta un sitio web renovado
que, además de ser funcional, cuenta con un diseño de mejor nivel
comunicacional y atractivo visual. El sitio se enlaza con sus redes sociales y
se adapta a diferentes dispositivos, lo que le dará a Autismo Ecuador mayor
visibilidad. (Ver Fig. 18)

Fig. 18 Mockups del prototipo del
sitio en diferentes dispositivos

En esta propuesta, además del diseño
y desarrollo de prototipos de una nueva interfaz para el sitio web, se hizo la
implementación como resultado final del diseño. Para ello, se realizó el
proceso de maquetación bajo el gestor de contenidos o Content Management System (CMS) WordPress 5.5.

Al tener como resultado un sitio web
con diseño responsivo, la visualización de la propuesta del nuevo diseño del
sitio web de Autismo Ecuador implementada, la página de inicio y varias páginas
internas, se puede realizar a través de computadoras de escritorio, laptops y
dispositivos móviles ingresando a la dirección temporal:
www.autismoecuador.org/nuevo-sitio/

A.
Usabilidad del nuevo sitio de
Autismo Ecuador

En caso de que llegue
a implementarse este nuevo diseño del sitio, hay que recalcar los aspectos en
cuanto navegabilidad que se tomaron en cuenta para el desarrollo del prototipo,
ya que uno de los objetivos del sitio es que utilizarlo resulte sencillo e
intuitivo para todo tipo de usuarios, de manera que se amplíe su accesibilidad.
En este caso, se consideró la amplia diversidad del público objetivo
establecido, del que incluso forman parte las mismas personas diagnosticadas
con TEA.

Con este antecedente
se determinó que al momento de haber ingresado el usuario a la página de inicio
pueda navegar desplazándose hacia abajo y hacia arriba intuitivamente por medio
del scrolling. Así mismo, puede realizar su navegación
a través de la barra de menú, ubicada en la parte superior del home, dando clic
sobre los enlaces que lo dirigirán a las secciones de la página de inicio o a
las páginas internas, según lo requiera.

De igual manera, en
su recorrido dentro de la página de inicio, el usuario se encontrará con más
enlaces, sean estos en forma de texto o como íconos, a los que puede acceder
dando clic sobre ellos. Este sistema de navegación se aplica también a la
versión adaptada para los dispositivos móviles.

B.
Manual de usuario para el nuevo
sitio web de Autismo Ecuador

Por medio de este
manual se presenta el detalle de los resultados obtenidos del desarrollo e
implementación del prototipo realizado en este proyecto para el nuevo diseño
del sitio web de Autismo Ecuador, siguiendo los criterios de diseño
establecidos durante el proceso creativo y bajo la validación de profesionales
y expertos relacionados con diseño gráfico, diseño web y TEA.

C.       Acceso al sitio web

A continuación, se explica cómo acceder al sitio web a
través de un navegador:

1.
En el explorador, se ingresa la
dirección del sitio web: www.autismoecuador.org, como se muestra en la Fig. 19.

2.
Una vez escrita la dirección de Autismo
Ecuador, se presiona el botón “enter” o “entrar” de su teclado e inmediatamente se dirigirá
al sitio en donde aparecerá un pop-up o intro
de bienvenida.

Fig.
19 Ingreso al
sitio web de Autismo Ecuador

D.       Pop-up de bienvenida al usuario

Antes de ingresar a la página de inicio
aparece un menú flotante con varias opciones. A continuación, se detalla a
dónde dirige cada una de ellas.

1)     Quiero navegar por el sitio: Esta primera opción,
como se observa en la Fig. 20, dirige al usuario a la página de inicio o home del sitio web.

Fig. 20 Primera
opción del menú pop-up.

2)
Quiero ingresar con mi cuenta: La segunda opción del
menú es para el usuario que ya ha creado su cuenta en el sitio por lo que, al
dar clic, aparece un pop-up en el que se le pide
ingresar con su usuario y contraseña, de esta forma el usuario accede a los contenidos
que son exclusivos para los miembros de la comunidad Autismo Ecuador. En el
caso de que un usuario presione esta opción sin tener una cuenta, el botón
“Registro” le permite acceder al formulario para crear una cuenta. (Ver Fig. 21)

3)     Quiero ser parte de Autismo Ecuador: Esta opción le permite al
usuario nuevo crear su cuenta para formar parte de la comunidad de Autismo
Ecuador por medio de su sitio web. Para esto, se solicitan algunos datos de
registro, como su nombre completo, un usuario, el correo electrónico y
contraseña. (Ver Fig. 21)

En el caso de que un usuario que ya tiene cuenta ingrese
por error a esta opción, por medio del botón “Iniciar sesión” puede ingresar
con su usuario y contraseña.

Fig. 21 Opción 2 y 3 del menú pop-up

4)
Quiero hacer una evaluación: Este
enlace está dirigido a los usuarios que deseen acceder directamente a una
consulta para realizar una evaluación psicológica especializada al niño, niña,
joven o adulto para confirmar o descartar un diagnóstico relacionado con los
trastornos del espectro autista. (ver Fig. 22)

Fig. 22 Opción 4 del menú pop-up

5)
Quiero descargar material de
apoyo: Por medio de esta opción el
usuario puede acceder a material de apoyo, tips y
guías prácticas para aplicar durante el acompañamiento de su familiar con TEA
desde casa. Este enlace corresponde a “Padres TEA” y es contenido exclusivo
para quienes hayan creado una cuenta. En caso de ser un usuario nuevo y dar
clic en esta opción, el sitio web inmediatamente le solicita ingresar con su
cuenta y, en caso de no tenerla, crear una.

E.
Página de inicio o home

El usuario puede navegar por el home utilizando el
scroll, desplazándose hacia abajo y también
por medio de los enlaces del menú. En la parte superior, tenemos: el logo de
Autismo Ecuador sobre el lado izquierdo, seguido de los enlaces Últimas
noticias, y redes sociales. Luego, la barra de menú, que incluye los enlaces y
la opción de búsqueda dentro del sitio, como vemos en la Fig. 23.

Fig.
23 Página de
inicio de Autismo Ecuador

1)
Banners principales: Tenemos tres banners
que se presentan a manera de sliders. Estos se mostrarán automáticamente
cada tres segundos o presionando las flechas que están ubicadas a los extremos
de las imágenes. Asimismo, si el cursor se encuentra sobre la imagen, esta se
mantiene, permitiendo la lectura de los textos al usuario. Cada una de estas sliders
dirigen al usuario a páginas internas.

El primero, como se observa en la Fig. 23, es el que da
la bienvenida al usuario y el botón de registro lo dirige a un formulario donde
podrá ingresar los datos de su familiar con autismo a la base de datos.

El segundo, como se observa en la Fig. 24, invita al
usuario nuevo que aún no es miembro de la comunidad Autismo Ecuador a
registrarse y crear su cuenta, es decir, al presionar el botón “Regístrate
aquí”, lo redirige al formulario de registro.

Fig.
24 Banner “Crea
tu cuenta”

El tercer banner, como vemos en la Fig. 25, es un enlace
al contenido correspondiente al material de apoyo. Es decir, al dar clic en el
botón “Más información”, si el usuario ya tiene su cuenta, accede directamente
a este contenido. Caso contrario lo invita a crear su cuenta de Autismo Ecuador
para poder hacerlo.

Fig.
25 Banner
“Estamos para ti”

2)
Sección ¿Qué es
TEA?: Si el usuario continúa su navegabilidad por medio del scroll, se encuentra con este espacio en donde, con
una breve descripción, se lo introduce a la definición del TEA, como observamos
en la

Fig. 26. Si el usuario
desea ver más información, accede a la página interna correspondiente a este
enlace por medio del botón en la parte inferior de esta sección.

Fig. 26 Sección
“¿Qué es TEA?”

3)
Sección nuestros servicios:
Al seguir navegando hacia abajo, en esta sección, el usuario puede acceder
a la información acerca de los servicios que ofrece Autismo Ecuador al dar clic
en cada uno de los íconos, como vemos en la Fig. 27.

Fig. 27 Sección “Nuestros
servicios”

4)
Sección varios: En este bloque se invita
al usuario a acceder a algunos enlaces de la página. En cada uno de los enlaces
se presenta un botón de “Leer más” que redirige al usuario al contenido que
escoja, como se puede observar en la Fig. 28.

Fig. 28 Sección “Varios”

5)
Sección ¡Síguenos
en redes sociales!: El sitio web tiene como objetivo la permanente difusión de
contenidos sobre el TEA. Por lo que se hace énfasis en los enlaces a las redes
sociales, invitando al usuario a interactuar en ellas. (Ver Fig. 29)

Fig.
29 Sección “Redes
sociales”

6)
Pie de página o footer: En el pie de página o footer,
el usuario puede encontrar información de contacto de Autismo Ecuador y enlaces
relevantes (ver Fig. 30). El usuario puede regresar al inicio de la página por medio
de la flecha en la parte inferior derecha.

Fig. 30 Pie de
página o footer

F.
Páginas internas del sitio

El
enlace “Nosotros” es el primero que el usuario encuentra dentro de la barra de
menú. Al dar clic sobre este, la etiqueta se vuelve de color amarillo y se
despliega el menú que muestra los enlaces de las páginas internas, como se
puede observar en la Fig. 31.

1)
¿Quiénes Somos?: El usuario ingresa a esta página por medio de la
barra de menú dando clic en el enlace “Nosotros” y escogiendo la primera
opción. En esta página se muestra información de Autismo Ecuador y se maneja el
mismo esquema de navegabilidad que en la página de inicio.

Fig. 31 Menú
Nosotros

V. CONCLUSIONES Y
TRABAJOS FUTUROS

Este
trabajo se
enfoca en la estructura y maquetación de páginas web con diseño adaptativo, el
caso se orienta al desarrollo de un sitio web para un público involucrado a
personas con TEA. Se ha logrado mostrar la funcionalidad y navegabilidad del
sitio, confirmando la viabilidad del proyecto como un estudio bien informado
siguiendo un proceso metodológico de investigación sobre el diseño, que soporta
técnica y estéticamente lo propuesto. El diseño propuesto para el desarrollo e
implementación del sitio web es responsivo, logrando que se adapte sin
problemas a otros dispositivos, como teléfonos móviles y tabletas, lo que
potencializa enormemente su alcance. Otro aspecto por resaltar es que se toman
en cuenta funcionalidades que le permiten al sitio ser más accesible.

En el diseño de un sitio web, gran
parte del avance y el éxito de su desarrollo, depende de la información
proporcionada por el cliente y nuevas ideas o requerimientos que surgen en el
proceso. En ocasiones, esto causa que los plazos de entrega puedan extenderse. Las
sugerencias de nuevas ideas podrían continuar generalmente hasta obtener la
aprobación de la información con la que se registren los contenidos para el
sitio web (copywriting). Por lo que se hace
relevante indicar que no todos los contenidos presentados en una propuesta de
diseño se consideran como definitivos hasta su completa implementación. En el caso del proyecto
presentado con enfoque en un diseño comunicacional y visual para TEA, se
enfatiza que, para completar su implementación, se debe contar además con la
colaboración de un programador web. Este debe realizar un trabajo conjunto con
el diseñador y cliente para la puesta en marcha del sitio en tiempo real y
probar todas sus funcionalidades.

Durante el desarrollo de un sitio
web, se deben definir los protocolos de implementación y los contenidos que se
van a mostrar en cada uno de los enlaces en un documento de Especificación de Requerimientos
(ER). Se toma el desarrollo de la propuesta del diseño del sitio como marco
previo para establecer las restricciones iniciales que pueda presentar su
implementación.

A.      Trabajos futuros

Se indicó que en la actualidad el
sitio web de Autismo Ecuador se registra entre los primeros lugares de acceso a
nivel local, evidenciado en el motor de búsqueda de Google, pero las visitas
son efímeras. Con el diseño propuesto, se busca la permanencia del usuario
dentro del sitio. Este diseño se enfoca en buscar que el usuario se sienta bien
informado y cómodo en su manejo y navegación de fácil uso. Sin embargo, en su
futuro proceso de implementación se debe considerar complementar la
programación e implementación del sitio con la aplicación de SEO, ya que este
puede aportar enormemente a su visibilidad.

El proyecto presentado en este
artículo fue desarrollado en el marco de una pandemia mundial, lo que impulsó
la adaptación a la virtualidad con un modelo investigativo y metodológico que,
junto con la creatividad, permitió el desarrollo de una propuesta que cumple
con los objetivos planteados. Sin embargo, hay que señalar que las restricciones
ocasionadas por la emergencia limitaron parcialmente las ideas que surgieron
para el desarrollo de la propuesta, como, por ejemplo, el caso de sesiones
fotográficas nuevas en las que participen activamente los miembros de Autismo
Ecuador interactuando con los niños, niñas, jóvenes y padres de manera que
estas formen parte de los banners principales del nuevo diseño del sitio
web. Por tanto, se recomienda la realización de futuras sesiones fotográficas
para añadir imágenes actualizadas y reales, ya que esto otorgará mayor
credibilidad al sitio y generará confianza. A su vez, este repositorio se debe considerar
como un banco de imágenes disponible para uso del cliente.

También, es importante realizar
validaciones al sitio web en cuanto a la accesibilidad para personas con diferentes
discapacidades, lo cual puede complementar a futuro la ampliación de opciones
en diseño para este tipo de páginas web.

RECONOCIMIENTOS

El presente artículo estructura y
describe en detalle, como caso aplicativo de diseño de sitios web, el resultado
de un trabajo de grado correspondiente a la carrera de Licenciatura en Diseño
Gráfico de la Facultad de Arte y Comunicación Audiovisual de la Escuela Superior
Politécnica del Litoral. Expresamos un especial agradecimiento a la comunidad
relacionada con el Trastorno del Espectro Autista la cual fue parte fundamental
para el proceso de investigación sobre el que se basó este proyecto de
titulación.

REFERENCIAS

[1]       N.
Grant, S. Rodger, and T. Hoffmann: "Evaluation of autism‐related
health information on the Web," Journal of Applied Research in
Intellectual Disabilities, 2015, 28, (4), pp. 276-282

[2]       C. López-Chávez
and M.-d.-L. Larrea-Castelo: "Autismo en Ecuador: Un grupo social en
espera de atención," Revista Ecuatoriana de Neurología, 2017, 26,
(3), pp. 203-214

[3]       B. Reichow,
J.I. Halpern, T.B. Steinhoff, N. Letsinger, A. Naples, and F.R. Volkmar: "Characteristics
and quality of autism websites," Journal of autism and developmental
disorders, 2012, 42, (6), pp. 1263-1274

[4]       J. Artigas-Pallarés
and I. Paula: "El autismo 70 años después de Leo Kanner y Hans Asperger,"
Revista de la Asociación Española de Neuropsiquiatría, 2012, 32, (115),
pp. 567-587

[5]       B.S. Salvadó,
M.B. Palau, M.T. Clofent, M.C. Montero, and M.A.L. Hernández: "Modelos de
intervención global en personas con trastorno del espectro autista," © Revista
de Neurologia, 2012, vol. 54, núm. Supl 1, p. 63-71,
2012

[6]       J.C. McPartland,
B. Reichow, and F.R. Volkmar.: "Sensitivity and specificity of proposed
DSM-5 diagnostic criteria for autism spectrum disorder," Journal of the
American Academy of Child & Adolescent Psychiatry, 2012, 51, (4), pp.
368-383

[7]       M.d.S. Fortea
Sevilla, M.O. Escandell Bermúdez, and J.J. Castro Sánchez: “Nuevas formas de
abordaje del proceso diagnóstico del TEA después del DSM-5,” International
Journal of Developmental and Educational Psychology, 2014

[8]       American-Psychiatric-Association:
“Diagnostic and statistical manual of mental disorders (DSM-5®)” (American
Psychiatric Pub, 2013. 2013)

[9]       B.M. Prizant,
A.M. Wetherby, and P.J. Rydell: “Communication intervention issues for children
with autism spectrum disorders”, 2000

[10]    M.C. Pons
Pons and J. Cardona Llorens: “Boletín ONUBIB: Enero 2015”, 2015

[11]    J. Chowdhury,
J. Drummond, D. Fleming, and S. Neitfeld: “Content analysis of online autism
specific sites”, Journal on Developmental Disabilities, 2002, 9, (2),
pp. 157-165

[12]    G. Eysenbach
and C. Köhler: “How do consumers search for and appraise health information on
the world wide web? Qualitative study using focus groups, usability tests, and
in-depth interviews”, Bmj, 2002, 324, (7337), pp. 573-577

[13]    P. Scullard,
C. Peacock, and P. Davies: “Googling children's health: reliability of medical
advice on the internet”, Archives of disease in childhood, 2010, 95,
(8), pp. 580-582

[14]    E.V. Bernstam,
D.M. Shelton, M. Walji, and F. Meric-Bernstam: “Instruments to assess the
quality of health information on the World Wide Web: what can our patients
actually use?”, International journal of medical informatics, 2005, 74,
(1), pp. 13-19

[15]    R. Pedraza-Jiménez,
S. Blanco, L. Codina, and V. Cavaller: “Diseño conceptual y especificación de
requerimientos para el desarrollo y rediseño de sitios web”, El profesional
de la información, 2013, 22, (1), pp. 74-79

[16]    A.E.A. Veloz: “De
la interfaz del usuario al responsive web design”, Revista AUC, 2016,
(37), pp. 59-66

[17]    A. Harrell:
“Creative Direction in a Digital World: A Guide to Being a Modern Creative
Director” (CRC Press, 2017. 2017)

[18]    S. Krug: “Don't
make me think!: a common sense approach to Web usability” (Pearson
Education India, 2000. 2000)

[19]    N.I. Solorzano,
L. Sanzogni, and L. Houghton: “Effectiveness of using Pluralist Methodology in
Information System Adoption Studies”, in Editor (Ed.)^(Eds.): (IEEE,
2014, edn.), pp. 1-6

[20]    Y.M. Hassan and F.J.F.
Martín: “Propuesta de adaptación de la metología de diseño centrado en el
usuario para el desarrollo de sitios web accesibles”, 2013

[21]    T. Brown: “Design
thinking. harvard business review”, Harvard Business Review, 2008

[22]    J.P. DAuria:
“Autism On the Web: Oh, the Places You'll Go!”, Journal of Pediatric Health
Care, 2010, 24, (6), pp. e11-e15

ANEXO

A.
Cuestionario
semiestructurado para entrevistas a padres de niños, niñas y jóvenes
diagnosticados con Trastorno del Espectro Autista (TEA)

1.      ¿Cómo llegó al profesional que evaluó y finalmente le dio el diagnóstico de
TEA de su hijo/a?

2.      Una vez recibido el diagnóstico, ¿por qué medios obtuvo usted información
con respecto al TEA y las posibles opciones de tratamiento?

3.      Dentro de su experiencia, ¿fue fácil encontrar herramientas para
sobrellevar la etapa de duelo luego de recibir el diagnóstico de TEA de su
hijo/a? Explique.

4.      Como padre/familiar de una persona con autismo, ¿qué contenidos considera
que serían de utilidad encontrar dentro de un sitio web como herramientas para
el acompañamiento de su familiar?

5.      ¿De qué manera obtiene usted el material de apoyo necesario para la guía
terapéutica diaria de su hijo/a?

6.      ¿Conoce usted cuáles son los beneficios a los que tiene derecho su familiar
al tener una discapacidad? Menciónelos.

7.      ¿Le parece que sería de gran ayuda poder compartir experiencias con otros
padres o familiares? ¿Por qué?

[1] www.autismoecuador.org