Capitulo III: Diseño Web y Estándares (Guía para Desarrollo de

www.guiaweb.gob.cl > 45

Gua para Desarrollo de Sitios Web - Gobierno de Chile

3 Captulo III

Diseo Web y Estndares

Resumen

En este captulo se explica la importancia de realizar un diseo de las pginas delSitio Web de acuerdo a normas estndares y a la importancia que se le debe concedera la experiencia que tiene el usuario que lo visita.

Incluye adems informacin de buenas prcticas sobre accesibilidad y para administrarla retroalimentacin proporcionada por los usuarios, adems de metodologas pararealizar pruebas de usuarios orientadas a mejorar el sitio.

46 < www.guiaweb.gob.cl


Tabla de Contenidos

Diseo para el Acceso Rpido 47Buenas Prcticas 47

Normas Mnimas para Facilitar el Acceso Va Conexin Telefnica 471. Peso de las Pginas 472. Diagramacin de las Pginas 483. Uso de Presentaciones en Flash 504. Uso de Marcos o Frames 515. Uso de Imgenes de background 526. Uso de meta tags Adecuados 52

Normas para Incorporar Elementos Grficos y Multimediales 53Interoperabilidad 54

Estndares Internacionales 54Diseo para la Accesibilidad 55

Buenas Prcticas 57Estndares Tcnicos Recomendados 57Estndares Internacionales 58

Diseo de la Experiencia del Usuario 58Desarrollo de Diagrama de Interaccin 58Principales Actividades a Desarrollar en el Sitio 59Pruebas de Sistemas e Interfaces 60

Pruebas Heursticas 61Pruebas de Usabilidad 62

Cmo atender a los Usuarios 63Sistemas para Generar Feedback 63Formularios del Sitio 64Boletines de Noticias y Novedades 65Sistemas para Recibir y Administrar Mensajes de Usuarios 66

Oficina de Informacin, Reclamos y Sugerencias (OIRS) 67Oficina de Partes 68rea de Comunicaciones 68rea de Informtica 68

3 Captulo III




3

Diseo para el Acceso RpidoUna de las caractersticas que hace tan popular a la tecnologa web es su facilidad para mostrarcontenidos de manera grfica y para vincular de manera fcil documentos de diferentes orgenes.No obstante, para que esta simpleza pueda darse efectivamente, es necesario que quienes desarrollansitios y contenidos en esta plataforma, cumplan con ciertos estndares que aseguren que la mayorparte de los usuarios podrn ver lo que se publica.

Para ello, es de suma importancia que los sitios que se construyan cumplan efectivamente conciertas caractersticas de publicacin que permitan conseguir dos objetivos muy concretos:

Que las pginas se desplieguen rpidamente y sin dificultades tcnicas en los computadoresde los usuarios;

Que las pginas puedan ser visualizadas por los usuarios de la misma manera en que susautores las han construido.

Para conseguir ambos objetivos, es necesario que quienes construyan los sitios web hagan uso deun conjunto de buenas prcticas que se han obtenido de la experiencia en la construccin de estetipo de contenidos digitales, y tambin, que se aseguren de cumplir con estndares mundiales eneste mbito, los que sern presentados en este captulo.

Buenas PrcticasAgrupamos en esta rea una serie de recomendaciones extradas de la experiencia en el desarrollode sitios web de todo tipo, que permiten asegurar una buena experiencia de los usuarios que losvisitan.

> Normas mnimas para facilitar el acceso va conexin telefnicaLa visualizacin de los sitios web depende de la transmisin de datos entre dos computadores, porlo que es importante optimizar la cantidad de informacin que se enva entre ambos, de tal maneraque quien la recibe pueda verla adecuadamente.

Lo anterior se expresa en cinco reas de recomendaciones muy concretas:

1. Peso de las PginasLos sitios web deben tener un peso mximo permitido por pgina que no supere una cantidadrazonable de kilobytes (kb) que impidan su visualizacin. En este sentido, lo razonable dependerdirectamente del tipo de sitio que se est desarrollando y de la conexin con la que cuente lamayor parte de los usuarios.

Por ejemplo, si se trata de un sitio dedicado a usuarios de regiones extremas que tienen unaconexin muy lenta, 50 kb ser un tamao considerable, respecto de si se compara eso con usuariosque se conecten en una ciudad del centro del pas.




No obstante, se puede estudiar cunto se demora en que una pgina llegue completamente alcomputador de un usuario si se calcula lo siguiente:

A. Si un mdem transmite a 56 kbps (kilobits por segundo) significa que por cada segundode transmisin, en condiciones ideales, es capaz de enviar 7 kb (kilobytes) de informacin.

B. Si una pgina pesa 70 kb, en condiciones ideales demorar 10 segundos en aparecer completaen el computador del usuario.

C. Aunque no hay informacin tcnica consistente para establecer la velocidad promedio deun mdem, puesto que depende de diversas variables tcnicas, la experiencia indica questos se conectan habitualmente a la mitad de su valor declarado. Entre las variables queafectan la calidad de la conexin se cuentan la capacidad del computador, la congestin delas redes y el nivel de visitas del servidor, entre otras.

D. Dado lo anterior, la pgina de 70 kb sealada en el ejemplo anterior, tardara 20 segundosen desplegarse completamente.

Con esa evidencia, la pregunta que debe hacerse cualquier desarrollador de sitios, es si sus usuariosestarn dispuestos a esperar todo el tiempo que se demora una pgina web en bajar completamente.

Como lo ms probable es que la paciencia de los usuarios se agotar ms rpido que su deseo poracceder a la pgina que tarda en desplegarse, es necesario preocuparse de que el tamao de laspginas siempre tienda a bajar y no a aumentar.

Las normas internacionales al respecto indican que un usuario no esperar ms de:

5 segundos para que aparezca algo visible en la pantalla 10 segundos para que aparezca algo legible en la pantalla 30 segundos hasta hacer un click hacia otra parte del sitio o hacia otro sitio

Nota: El rendimiento de una conexin a Internet nunca es del 100%. Hay quetener en cuenta que en estos tipos de conexiones (Mdem analgico, RDSI, ADSL)se utilizan diversos protocolos (PPP, TCP/IP) que ocupan ancho de banda (entreun 2% y un 20% del 100% total, segn el tipo de conexin y protocolo utilizado),con lo que se reduce el ancho de banda til para la descarga de datos. El resultadoque se muestra en las pruebas de velocidad de conexin existentes (por ejemplo enhttp://testacceso.es.tdatacenter.com/) corresponde al ancho de banda til, esto es,equivale a la velocidad de transferencia de informacin, y no a la velocidad deacceso. Adicionalmente, existen otros factores que no pueden ser medidos y quecontribuyen a reducir la velocidad de la conexin, como son la congestin en lared, interferencias electromagnticas, etc., que tambin afectan al resultado final.

2. Diagramacin de las PginasAunque existen nuevas tecnologas para la diagramacin de las pginas web (como las Hojas deCascadas de Estilo o CSS), lo habitual es que los contenidos que se muestran se dispongan entablas con el fin de que cada elemento ocupe el lugar que se le ha asignado dentro de la pgina.

http://testacceso.es.tdatacenter.com/



Al respecto se recomienda construir una estructura de presentacin de los contenidos que sepueda fragmentar en varias tablas.

De esa manera, cuando el sitio se presente en el programa visualizador del cliente, siempre mostrarla primera tabla (que normalmente llevar el logotipo y la identificacin del sitio) de manerarpida, dando al usuario la sensacin de haber llegado al destino elegido. Luego en las siguientestablas se van poniendo los restantes elementos del sitio.

En la figura 1 se puede ver que el sitio est construido en tres tablas, de acuerdo al siguiente orden:

Tabla 1: Muestra el logotipo de la institucin, la fecha y el men del sitio.Tabla 2: Muestra las Secciones del Sitio ms los contenidos de diferente nivel.Tabla 3: Muestra el pie de la pgina con la identificacin corporativa de la institucin.

Figura 1: Ejemplo de tablas para separar contenidos y conseguir despliegue rpido.

Hay que recordar que los estudios sobre acceso a Sitios Web indican que el usuario espera que alprimer segundo despus de haber hecho clic sobre un enlace o haber ingresado una direccin enun programa visualizador, ya quiere ver alguna reaccin y notar que algo est ocurriendo.

Por lo anterior se debe evitar a todo lugar las tablas generales que incluyen en s mismas a otras(tablas anidadas), ya que el programa visualizador usar una parte del tiempo en calcular esarelacin de dependencia entre las tablas, antes de mostrar algo til en la pantalla.

En la figura 2 se puede ver que el sitio est construido en tres tablas interiores, que son agrupadaspor una tabla general; tambin en la zona de Contenido 1 se dispuso una tabla que permite incluiruna foto junto al contenido:



3. Uso de Presentaciones en FlashSi se desea hacer una presentacin en tecnologa Flash de Macromedia para la portada del sitio, serecomienda no hacerlo directamente en la portada. Un ejemplo concreto de hacerlo se muestra enla siguiente imagen:

Figura 2: Ejemplo de tablas anidadas que dificultan el despliegue rpido

Figura 3: Ejemplo de pgina inicial para evitar la Presentacin en Flash



La razn para evitar el uso de Flash en la portada es que su uso recarga la presentacin delsitio y si la presentacin no est bien hecha, puede impedir el acceso de los robots de bsquedaal interior del mismo. Si eso ocurre, los contenidos del sitio no sern indexados en losbuscadores que emplearn los usuarios para buscar informacin sobre los temas que lainstitucin desea comunicar.

La buena prctica en este sentido es ofrecer una portada con la identificacin de la instituciny dos enlaces: uno para ver la presentacin y otro para ingresar directamente al sitio.Adicionalmente se debe ofrecer la informacin que sea necesaria para que los usuarios puedanver el contenido sin experimentar problemas; dentro de esto se cuenta un enlace para obtenerel plug-in necesario.

Dado lo anterior y como pocos usuarios estarn dispuestos a ver repetidamente lapresentacin, se recomienda utilizar esos recursos en el interior del sitio, para mostrar conuna tecnologa de animacin aquellos contenidos en los que desee poner nfasis o paraexplicar procesos que grficamente resulten atractivos y que en texto sea difcil dar a conocer.

4. Uso de Marcos o FramesLa tecnologa de marcos o frames consiste en agrupar varios archivos para que se desplieguen demanera simultnea, permitiendo a los usuarios ver varios contenidos al mismo tiempo.

En el ejemplo siguiente se puede ver grficamente cmo se hace el despliegue de dichos archivos:

Figura 4: Ejemplo de uso de frames para desplegar contenidos simultneos



Esta tecnologa tiene aspectos positivos y negativos, que detallamos brevemente:

Positivos: Permite tener ciertos contenidos presentes todo el tiempo, como un cabezal omen. Facilita la navegacin ya que el usuario nunca pierde de vista dnde seencuentra.

Negativos: Impide que el usuario pueda marcar una pgina como favorita (bookmark)porque nunca se le muestra cul es su direccin web. Cuando un usuario llega a un contenido desde un enlace provisto por unbuscador, ver el sitio sin los otros marcos y no sabr cmo navegar en l. La existencia de varios archivos en uno genera una carga mayor para el usuarioque llega al sitio; eso lo obliga a esperar a que aparezcan todos los contenidos delos archivos para poder usarlo.

Debido a lo anterior y salvo que sea muy necesario, esta forma de organizar los sitios web debedesecharse para pasar a sitios de interfaz contenida en un solo archivo.

5. Uso de Imgenes de backgroundUna tecnologa muy popular que se puso de moda en el ao 1996 cuando el software NetscapeNavigator lo implement, fue el uso de imgenes como fondos o backgrounds de las pginasweb.

Salvo casos en que sea estrictamente necesario, esta prctica debe ser dejada de lado porque sunico efecto es el de agregar un paso excesivo a los sitios, afectando el tiempo de descarga y accesoa la informacin.

6. Uso de meta tags AdecuadosLos meta tags son marcas en lenguaje html que van en la parte superior del cdigo fuente decada pgina, a travs de las cuales se entrega a los sistemas de indexacin y bsqueda, la informacinmnima para hacer una correcta indexacin del contenido que incluye.

Los meta tags son un conjunto de elementos que obedecen a un estndar definido por el WorldWide Web Consortium (http://www.w3c.org) por lo que su uso est regulado y mediante loscuales redescribe informacin concreta sobre la pgina, tal como ttulo, autor, descripcin, idiomay otros. Los ms importantes, aunque no los nicos, son los siguientes:

Nombre del Sitio o Institucin

http://www.w3c.org



Adicionalmente sobre este tema se ha dado en los ltimos aos un trabajo de estandarizacin muyimportante a travs del grupo Dubln Core que ha definido los elementos meta tags a usar yque deben ser consultados en http://www.dublincore.org.

> Normas para Incorporar Elementos Grficos y MultimedialesCuando en un Sitio Web se incorporan elementos grficos y multimediales, se deben seguir normasmuy concretas para evitar que su peso afecte el desempeo de la pgina cuando sea solicitada porlos usuarios del Sitio Web.

A continuacin entregamos algunas recomendaciones tendientes a asegurar la correcta inclusinde dichos elementos:

Optimizar el peso de las imgenes: se debe bajar al mximo posible el peso de las imgenes;cuando esto no sea posible hacerlo por su tamao, se debe reducir el nmero de coloresdisponibles y la resolucin (72 dpi es la norma).

Elegir el formato adecuado: ante un mismo tamao de imagen, el peso vara dependiendode si son procesadas para desplegarse en formato GIF respecto del formato JPG.Normalmente una imagen con colores planos (como un icono) tendr un peso menor si seguarda en GIF respecto de si es guardada en JPG. Lo contrario ocurrir con una imagencon muchos colores diversos (como una foto). Se recomienda probar ambos formatos paradeterminar el ptimo.

Ubicacin de imgenes: se recomienda usar un solo directorio para almacenar las imgenesrepetidas, tales como los iconos y otros elementos grficos que son utilizados en diferentespginas del sitio. Al ubicarlos en un directorio nico se puede aprovechar la funcin decach del programa visualizador para mejorar el rendimiento de las pginas. Para efectosde seguridad, se recomienda impedir que un programa visualizador pueda ver el contenidode dicho directorio o cualquier otro dentro del sitio.

Usar el atributo ALT en imgenes: en el cdigo HTML se debe usar el atributo ALT(texto alterno) en las imgenes para que ste se despliegue antes que las imgenes y facilitede esta forma la comprensin del contenido a los usuarios.

Imgenes con alto y ancho: las imgenes (dibujos, fotos, iconos, botones) deben tenertamao para el ancho y el alto, para que el programa visualizador pueda dejar reservado elespacio para dicho contenido antes de que se realice su despliegue visual.

Ofrecer plug-ins: cuando se utilizan archivos multimediales que requieren el uso de plug-ins (programas visualizadores especiales) para revisarlos, se recomienda poner el programapara ser bajado u ofrecer un enlace a lugares donde obtenerlo. Esto es especialmente vlidoen sitios que ofrecen presentaciones de portada en tecnologa Flash, las cuales deben seranunciadas para que el usuario tenga la opcin de verlas o avanzar directo al sitio.

Indicar el peso de los archivos: cuando se ofrecen elementos grficos o audiovisuales paraque sean bajados al computador personal por el usuario (especialmente en Video, Audio,Flash u otros), se recomienda indicar el peso de los mismos, con el objeto de ofrecerleinformacin til para efectuar la operacin.

http://www.dublincore.org



> InteroperabilidadDado que los sitios web pueden ser accedidos sin problemas desde computadores que utilizandiferentes sistemas operativos, en un sitio de Gobierno Electrnico se debe cuidar ese aspecto dela diversidad. Para ello se debe asegurar de que desde la mayor parte de ellos las pginas puedenverse sin mayores contratiempos.

Para asegurar esto, las recomendaciones son las siguientes:

Utilizar cdigo html estndar, no mejorado para un visualizador en especial

Probar el sitio con las versiones para diferentes sistemas operativos de diversos visualizadoresde pginas (browsers); especialmente hacerlo con versiones de Microsoft Internet Explorer,Netscape Communicator, Mozilla, Opera y Safari.

Asegurarse de que el sitio puede ser visualizado de alguna forma cuando no se cumplenciertas condiciones mnimas, por ejemplo, cuando se usan versiones antiguas de un programavisualizador que no soporta las nuevas caractersticas del lenguaje html (por ejemploNetscape Navigator versin 4.6).

Estndares InternacionalesAdems de las buenas prcticas basadas en la experiencia, la tecnologa web cuenta con un conjuntode estndares que deben ser respetados para obtener la certificacin que acredita al sitio respectode su conformidad con ellos.

La entidad encargada del tema es el Word Wide Web Consortium (http://www.w3c.org/) que seencarga de velar por las mejoras en la tecnologa y por hacer avanzar los estndares y que losprogramas visualizadores cumplan efectivamente con mostrar lo que el lenguaje HTML permiteconstruir.Dentro de los estndares que ms interesa cumplir, se cuentan dos que tienen que ver con la formade hacer la presentacin de contenidos en un Sitio Web y que se detallan a continuacin:

Validacin de HTMLEs un sistema basado en Internet y presentado en el propio sitio del W3C (http://validator.w3.org/) y que permite detectar errores en la forma de utilizar el lenguajeHTML y XML en la construccin de un Sitio Web. Lo interesante del programaes que muestra en detalle los errores del cdigo en la pgina que se pruebe, con locual se puede llegar a una directa correccin de los problemas que se hayandetectado.

La importancia de tener un cdigo correctamente validado es que se asegura, apartir de esa certificacin, que la pgina web puede ser vista sin problemas, desdecualquier programa visualizador que cumpla con los estndares internacionalesen la materia.

http://www.w3c.org/



Validacin de CSSEs un sistema basado en Internet y presentado en el propio sitio del W3C (http://jigsaw.w3.org/css-validator/) mediante el cual se puede validar la sintaxis de unaHoja de Estilo en Cascada (Cascade Style Sheet o CSS, en ingls), mediante la cualse describe la forma de presentar contenidos en una pgina web.

Este programa muestra en detalle los errores del CSS en la pgina que se pruebe,con lo cual se pueden aislar los problemas y hacer la correccin correspondiente.Cabe indicar que la ventaja de usar la tecnologa CSS es que facilita la mantencinde un sitio mediante la separacin de la presentacin (diseo) del contenido.

Diseo para la AccesibilidadLa accesibilidad de un Sitio Web se refiere a su capacidad para presentar contenidos a personasque cuentan con discapacidades fsicas, que les impiden usar la informacin disponible de unamanera tradicional y por ello emplean ayudas tcnicas.

Un ejemplo de esto son el uso de un lector de voz o un magnificador de pantalla en el caso de losdiscapacitados visuales, que les permiten interpretar el texto que se muestra en la pantalla.

La accesibilidad corresponde a una de las tendencias que se ha impuesto con mucha fuerza en losltimos dos aos, gracias especialmente a los avances conseguidos en los sitios del Gobierno deEstados Unidos (pas que promulg la Act 508 para reglamentar esta forma de mostrar loscontenidos).

Esta tendencia se ha asociado mundialmente a la actividad de los sitios web de Gobierno Electrnico,debido a que, por el hecho de pertenecer a instituciones pblicas, deben asegurarse de que todoslos ciudadanos accedan a la informacin que se les ofrece por esta va, sin que existan barreras paraello.

Para comprobar que un Sitio Web cumple con las normas de accesibilidad, la iniciativa WAI(Web Accesibility Initiative) de la W3C (World Wide Web Consortium) propone la realizacinde las siguientes pruebas:

Verificar la accesibilidad con herramientas automticas y revisin humana. Los mtodosautomticos son generalmente rpidos y convenientes, pero no pueden identificar todoslos problemas de accesibilidad. La revisin humana puede ayudar a garantizar la claridaddel lenguaje y la facilidad de navegacin.

Utilizar los mtodos de validacin desde las primeras etapas del desarrollo. Los problemasde accesibilidad que se identifican temprano son fciles de corregir y de evitar. Entre dichosmtodos de validacin, se cuentan los siguientes:

http://



Utilizar una herramienta automatizada de validacin de la accesibilidad y lanavegacin. Se debe tener en cuenta que las herramientas o programas de revisinno contemplan todos los problemas de accesibilidad, como lo comprensible quepuede ser un enlace de texto, o el contenido de un texto alterno, etc.

Validar la sintaxis de programacin de las pginas con las herramientas ofrecidaspor el W3c; de esta manera se determinar si se utiliza apropiadamente el lenguajeque se haya elegido (Ej., HTML, XML, etc.).

Validar las hojas de estilo (Ej., CSS).

Utilizar un emulador o navegador solo-texto.- Utilizar varios navegadores grficos, con:- sonidos y grficos cargados- grficos no cargados- sonidos no cargados- sin mouse- marcos, scripts, hojas de estilo, y applets sin cargar.

Utilizar varios navegadores, antiguos y nuevos.

Utilizar un navegador con conversin texto-voz, un lector de pantalla, unprograma de magnificacin, una pantalla pequea, etc. Varios de esos softwarese pueden obtener desde el Sitio Web de Fonadis (http://www.fonadis.cl/index.php?seccion=25)

Utilizar un revisor gramatical y ortogrfico. Una persona que lee una pginacon un sintetizador de voz puede no ser capaz de descifrar la pronunciacin queemite ese dispositivo de una palabra que tiene un error ortogrfico. Eliminandolos problemas gramaticales se aumenta la comprensin.

Revisar el documento en cuanto a su claridad y simplicidad. Las estadsticas delegibilidad, como las que generan algunos procesadores de texto, pueden sertiles indicadores de la claridad y simplicidad. Mejor an, consulte con un editor(humano) experimentado para revisar el contenido escrito en cuanto a su claridad.Los editores pueden tambin mejorar la usabilidad de los documentos, alidentificar problemas potenciales de sensibilidad cultural que pueden presentarse,debido al uso del lenguaje o de los iconos.

Invitar a personas con discapacidad a revisar los documentos. Los usuarios condiscapacidad, noveles o expertos, proporcionan valiosa informacin sobre laexistencia de problemas de accesibilidad o usabilidad y la seriedad de la falla.

http://www.fonadis.cl/



Ms informacin del tema en: W3c.org: http://www.w3.org/TR/WAI-WEBCONTENT/ Sidar.org (Espaa): http://www.sidar.org/recur/desdi/wai/index.php Fonadis (Chile): http://www.fonadis.cl/index.php?seccion=25

Buenas PrcticasLas buenas prcticas en el tema de la accesibilidad consisten en aplicar las Directrices o Pautas deAccesibilidad para el Contenido de la Web, a travs de las cuales es posible garantizar que se estncumpliendo las normas correspondientes, las cuales se explican en los siguientes ttulos.

> Estndares Tcnicos RecomendadosLas normas a cumplir para conseguir la Accesibilidad de un sitio, y por lo tanto atender a este tipode audiencias, estn separadas en tres reas a las que se les asigna diferente nivel de Prioridad. Estasson consecutivas y pueden certificarse individualmente.

Prioridad 1:los puntos de verificacin de esta prioridad tienen que ser satisfechos, porque, delo contrario, uno o ms grupos de usuarios encontrarn imposible acceder a lainformacin del documento. Satisfacer este punto de verificacin es unrequerimiento bsico para que algunos grupos puedan usar estos documentosWeb.

Prioridad 2:los puntos de verificacin de esta prioridad deben ser satisfechos, porque, de locontrario, uno o ms grupos tendrn dificultades en el acceso a la informacindel documento. Satisfacer este punto de verificacin eliminar importantesbarreras de acceso a los documentos Web.

Prioridad 3:los puntos de verificacin de esta prioridad pueden ser satisfechos, porque, de locontrario, uno o ms grupos de usuarios encontrarn alguna dificultad paraacceder a la informacin del documento. Satisfacer este punto de verificacinmejorar la accesibilidad de los documentos Web.

Como se ve en la descripcin anterior, cada una de las prioridades lleva asociado un tipo deobligacin, siendo la primera la ms perentoria de todas.

Para revisar los elementos contenidos en cada una de las Prioridades, ver Anexo I - Estndarestcnicos de Accesibilidad.

http://www.w3.org/TR/WAI-WEBCONTENT/http://www.sidar.org/recur/desdi/wai/index.phphttp://www.fonadis.cl/index.php?seccion=25



> Estndares InternacionalesCon el fin de validar el cumplimiento de los estndares internacionales de accesibilidad reseadospreviamente, en Internet existe una serie de sitios que permiten validar el cumplimiento de stos.Dentro de ellos recomendamos usar los siguientes:

BobbyEs un revisor de accesibilidad desarrollado por el Centro de Tecnologa EspecialAplicada (Center for Applied Special Technology - CAST), ejecuta un testautomtico on-line de muchos de los puntos de verificacin que forman partede las Pautas de Accesibilidad al Contenido en la Web 1.0. Visitar en http://bobby.watchfire.com/bobby/html/en/index.jsp

TAWEs la primera herramienta de verificacin de la accesibilidad de las pginas Weben castellano. Se trata del Test de Accesibilidad a la Web TAW, desarrollado porel Fondo Formacin Asturias para el Centro Estatal de Autonoma Personal yAyudas Tcnica (CEAPAT) del Instituto de Migraciones y Servicios Sociales(IMSERSO) de Espaa. Visitar en http://www.tawdis.net.

Diseo de la Experiencia del UsuarioEn forma paralela al desarrollo de las interfaces, todo proyecto web debe tener en cuenta laexperiencia que vivir el usuario al navegar por sus pginas. A ese concepto se le denominaexperiencia del usuario y el objetivo siempre ser el de que cada persona que visite el sitioencuentre lo que est buscando de manera simple, de tal manera que regrese al sitio y le cuente aotros sobre su contenido y funcionalidades.

Para conseguir lo anterior, es necesario hacer un trabajo muy acabado en lo que serefiere a la planificacin y organizacin de los contenidos, como tambin definircmo se van a mostrar y operar las funcionalidades. Slo de esa manera habrcerteza de las operaciones que se pueden realizar en el sitio y los efectosadministrativos que ello generar en la institucin.

> Desarrollo de Diagrama de InteraccinUna de las metodologas ms concretas para asegurar que la experiencia del usuario se estresguardando adecuadamente, es la generacin los diagramas de interaccin mediante los cualesse representan grficamente las posibilidades de accin que tiene un usuario enfrentado a tomaruna decisin en un Sitio Web.

Por ejemplo, el siguiente diagrama muestra las posibilidades de reaccin que tiene un Sitio Webante el ingreso de un usuario registrado en un sitio:

http://http://www.tawdis.net



Como se puede apreciar, aparecen muy bien definidas en este esquema las acciones que puedarealizar un usuario que accede a un sitio y la forma en que el sistema reaccionar ante su presencia.Lo anterior conduce a preocuparse de manera concreta de las pantallas a desarrollar y los elementosque hacen falta para atender adecuadamente a dicho usuario.

De all que la existencia de estos diagramas, acompaados de las respectivas pantallas mediante lascuales se pueda describir grficamente lo que se espera que ocurra en un sitio, son herramientasmuy valiosas al momento de desarrollar los elementos de interaccin que se pretende abordar enun sitio.

> Principales Actividades a Desarrollar en el SitioEs importante considerar que de acuerdo al Instructivo Presidencial de Gobierno Electrnico(2001), los sitios tienen un ciclo de vida que va enfatizando en su interactividad, de acuerdo alsiguiente desglose:

Presencia: en esta fase se provee bsicamente informacin del Servicio al ciudadano.

Interaccin: considera comunicaciones simples entre el Servicio y el ciudadano y laincorporacin de esquemas de bsqueda bsicas.

Transaccin: incluye provisin de transacciones electrnicas al ciudadano por parte delServicio, en forma alternativa a la atencin presencial en las dependencias del rgano.

Transformacin: considera cambios en los Servicios para proveer aquellas prestacionesque componen su misin crtica en forma electrnica, y la introduccin de aplicacionesque administran la entrega de prestaciones a los ciudadanos.

Lo anterior implica que cada Sitio Web que desee avanzar en su vida til, como parte de la polticade Gobierno Electrnico, tiene que ofrecer capacidades de interaccin que sean cada vez msimportantes para el grupo de usuarios hacia los cuales se dirige.

Figura 5: Ejemplo de Diagrama de Interaccin



En este sentido, los sitios web deben ir incrementando su complejidad para ir hacindose cargo delas necesidades de comunicacin primero, y luego de las de atencin, con el fin de brindar a losusuarios la posibilidad de eliminar etapas burocrticas en su relacin con los servicios.

Las etapas que pueden ir marcando el avance de un Sitio Web podran ser lassiguientes:

Comunicaciones: corresponde al estado de Presencia y consiste en queel sitio ofrezca la posibilidad de que los usuarios enven correos electrnicosdesde el sitio; al principio, con el uso del software de correo que tenga elcomputador; posteriormente desde formularios del sitio; finalmente,conectando los formularios con algn sistema de gestin para hacer seguimientoa las respuestas que se enven a los usuarios.

Trmites: corresponde al estado de Interaccin y consiste en que el sitioofrezca la posibilidad de que los usuarios puedan obtener informacin y realizartrmites del servicio a travs del computador; al principio, recibiendo sloinformacin para hacer los trmites; finalmente, con la realizacin de latransaccin mediante el sistema.

Compras y Pagos: corresponde al estado de Transaccin y consiste enque el sitio cumpla actividades transaccionales, que permitan a los ciudadanosahorrar tiempo y dinero para realizar acciones ante los servicios.

Dado lo anterior, los sitios web de las instituciones pblicas deben tener metas muy concretas adesarrollar en sus planes de trabajo anuales y esto debe estar expresado en el presupuesto de lainstitucin, de tal manera que cuenten con los recursos necesarios para llevarlos adelante y darlesustentabilidad a la vida del proyecto.

> Pruebas de Sistemas e InterfacesCuando se han generado las interfaces de un Sitio Web y antes de hacer la puesta en marcha delmismo, es muy conveniente hacer una serie de pruebas que permita asegurarse, antes de laconstruccin del cdigo, que los usuarios van a entender la forma en que est organizada lainformacin y los contenidos y funcionalidades que se estn ofreciendo a travs del Sitio Web.Para ello, se cuenta con dos tipos de prueba, que se describen a continuacin y que son:

Pruebas Heursticas: consisten en anlisis hechos por expertos respecto de las pantallasque se estn ofreciendo en el sitio.

Pruebas de Usabilidad: revisan una serie de factores con el fin de establecer si cumplencon las necesidades de los usuarios del sitio.

Con esta informacin, es posible rehacer partes del sitio antes de la construccin o desarrollo delas piezas de software que lo integran, facilitando de esa forma la siguiente etapa de trabajo.



Pruebas HeursticasOriginalmente desarrolladas por Jakob Nielsen (http://www.useit.com/), las diez pruebas que seincluyen dentro de la heurstica han sido aplicadas universalmente y se entienden como el conjuntoms adecuado para medir las caractersticas de un Sitio Web.

La pauta de evaluacin es la siguiente: Visibilidad del estado del sistema: la prueba mide si el usuario siempre sabe qu est

haciendo el sistema. Se revisa si existen los diferentes elementos que ayudan a esto:- Indicacin grfica de donde se encuentra (ruta de acceso desde portada)- Indicacin de que ha visto (marcar los enlaces visitados)- Indiccin de que hay un proceso en marcha (anunciando estado de avance...)- Indicacin de cuntos pasos faltan para terminar (como en el caso de que ya a un

proceso de registro en el Sitio Web)

Similitud entre el sistema y el mundo real: la prueba mide si el sitio se expresa de unamanera comprensible para el usuario. Para ello se revisa si se emplean las convencioneshabituales y que le permiten operar en el Sitio Web.

Control y libertad del usuario: la prueba mide si los usuarios que se equivocan al haceralgo tienen forma de recuperarse de esos errores. Se revisa si existen formas de hacerlo. Porejemplo: Se puede deshacer una operacin? Se puede rehacer una operacin?

Consistencia y cumplimiento de estndares: la prueba mide si se cumplen los estndaresque se usan en la Internet en el Sitio Web. Para ello se debe validar y revisar el sitio con lasherramientas que se ofrecen en http://www.w3c.org para HTML y CSS.

Prevencin de errores: la prueba permite validar si se cuenta con mecanismos que asegurenque el ingreso de cualquier informacin, por parte del usuario, permite evitarle errores.Para ello, se verifica si en las reas en que los usuarios deben interactuar con el sistema, seles explica claramente lo que se espera de ellos. Por ejemplo:- Uso de Javascript para validar formularios: para que todos los campos obligatorios sean

llenados, para que el nmero de RUT sea ingresado correctamente, etc.- Uso de elementos destacados en los formularios: indicar los campos obligatorios con

asteriscos (*) o, bien, campos obligatorios marcados con color.

Preferencia al reconocimiento que a la memorizacin: la prueba permite revisar si el SitioWeb ayuda al usuario a recordar cmo se haca una operacin, o bien le obliga a aprenderselos pasos cada vez que ingresa. Para conseguir este objetivo se verifica la existencia de unalnea grfica uniforme en todo el Sitio Web (mediante la cual el usuario entiende lo que sele ofrece con slo mirarlos) y si se cuenta con un sistema de navegacin coherente.

Flexibilidad y eficiencia de uso: la prueba permite revisar si se ofrecen soluciones diferentesde acceso a los contenidos, a los usuarios novatos respecto de los expertos. Por ejemplo, sepuede contar con botones para los primeros y atajos de teclado para el experto. Tambin es

http://www.useit.com/http://www.w3c.org



importante medir en esta prueba la carga rpida de los sitios mediante una buenaconstruccin del cdigo.

Esttica y diseo minimalista: la prueba pide que los elementos que se ofrezcan en lapantalla tengan una buena razn para estar presentes. Se verifica la existencia deelementos irrelevantes (texto, sonido e imagen), que no aportan ni ayudan a que elusuario distinga lo importante de lo superfluo. Para ello se verifica la existencia de:- Jerarquas visuales: que permiten determinar lo importante con una sola mirada.- Tamao de imgenes: que no afectan la visin general de la informacin del Sitio

Web; se verifica tanto tamao como peso.

Ayuda ante errores: se verifica que el usuario sepa cmo enfrentar problemas en unapgina tanto online como offline; entre los elementos que se miden se cuentan:- Mensaje 404 personalizado, con el fin de ofrecer una informacin y navegacin

alternativa cuando una pgina no es encontrada.- Mensaje de falla ofrece una alternativa offline (telfono, mesa de ayuda) que

permite que el usuario mantenga su confianza en la institucin.

Ayuda y documentacin: se revisa que el Sitio Web ofrezca ayuda relevante de acuerdoal lugar en que el usuario est visitando; tambin se revisa la existencia de sistemas debsqueda que permiten al usuario encontrar los elementos de ayuda que sean relevantesde ofrecer (preguntas frecuentes; pginas de ayuda).

Pruebas de UsabilidadSe trata de pruebas efectuadas con usuarios, con el objetivo de determinar si la organizacinde los contenidos y las funcionalidades que se ofrecen desde el Sitio Web son entendidas yutilizadas por los usuarios de manera simple y directa.

Las pruebas tradicionales son:

Prueba Inicial: para ver cmo funciona la organizacin de contenidos y elementosiniciales de diseo (botones, interfaces). El material con que se prueba es una imagendibujada del Sitio Web.

Prueba de Boceto Web: para ver si se entiende la navegacin, si se pueden cumplirtareas y si el usuario entiende todos los elementos que se le ofrecen. El material conque se prueba es una maqueta web semi funcional

En ambos casos la prueba consiste en mostrar a un grupo de personas el Sitio Web y hacerlespreguntas sobre lo que ellos imaginan existe all. Hay que recordar que en esta etapa deldesarrollo las funcionalidades no existen como tales, aunque estn definidas. Por lo mismo,todo el trabajo tiene que ver con los aspectos visuales y de organizacin de los contenidos.



Los resultados de cada una de esas etapas permitirn adecuar los elementos con los que seest trabajando en esos momentos, con el fin de atender a los usuarios y ofrecerles unaexperiencia a la altura de sus expectativas.

Es importante enfatizar en estas pruebas, ya que generan insumos que sern muy tiles y permitirndarse cuenta a tiempo de errores conceptuales en la entrega de la informacin, que puedan serremediados de manera temprana y sin afectar el desarrollo total del proyecto.

Cmo Atender a los UsuariosDado que la interaccin y la comunicacin de los usuarios a travs del Sitio Web de la institucinestn entre los objetivos ms importantes de un Sitio Web del Gobierno, se ha diseado estaseccin para tratar directamente el tema.

En ese sentido hay que indicar que la tecnologa web est orientada a generar niveles decomunicacin muy avanzados, de los cuales se espera respuestas rpidas e interaccin permanente.Se puede indicar incluso que el uso del computador permite establecer nuevas formas de atenderla relacin entre personas.

Por lo anterior, es importante reconocer los diversos sistemas que puede utilizar un Sitio Web pararecibir feedback o retroalimentacin de parte del usuario, de las cuales nombramos a continuacinlas principales.

Sistemas de Correo Electrnico Sistemas de Encuestas o Votaciones Sistemas de Foros Sistemas de Chat Sistemas de Simulacin

Es importante considerar que cada uno de ellos genera ms informacin yconocimiento de la audiencia que visita el Sitio Web, por lo que siempre serinteresante ver cmo reaccionan a los temas que se les planteen y, asimismo,administrar positivamente el mayor flujo de trabajo que pueden generar en unSitio Web muy participativo.

> Sistemas para Generar FeedbackComo se plante antes, un Sitio Web tiene diversos sistemas para recibir feedback oretroalimentacin de parte del usuario, entre los que destacamos:

Sistemas de Correo Electrnico: permite enviar mensajes a los encargados del sitio sobretemas puntuales. La premisa bsica es que todo correo que llegue a la institucin debe serrespondido adecuadamente y en el menor plazo posible, evitndose slo las respuestasautomticas. En estos sistemas se debe asegurar el funcionamiento de los servidores decorreo electrnico asociado, con el fin de que los mensajes sean enviados exitosamente.



Sistemas de Encuestas o Votaciones: permite hacer sondeos rpidos entre los usuarios delsitio acerca de temas simples. En el caso de este sistema, la validacin obligatoria querequiere debe permitir que los usuarios voten slo una vez; que la pregunta y sus respuestasno contravengan disposiciones legales ni que generen una controversia, dado el carcterpblico del sitio. Asimismo se debe aclarar que las respuestas slo representan a quienesparticiparon y no tienen validez estadstica.

Sistemas de Foros: permite a los usuarios entregar opiniones sobre temas concretos enmodo asincrnico. En el caso de este sistema se debe tener especial cuidado con loscontenidos que generen los usuarios, puesto que en muchos casos el uso de interfacescomputacionales relajan la responsabilidad de quienes escriben en lo referido a formas deexpresarse y contenidos vertidos en este tipo de programas. Se aconseja, por lo mismo,mantener un seguimiento constante de las expresiones registradas en el sistema,recomendndose en todo caso el uso de software de foros que permitan moderar el contenidoe impidan la publicacin de imgenes.

Sistemas de Chat: permite establecer conversaciones escritas en tiempo real con otrosusuarios o con los encargados del sitio. En el caso de este sistema se debe cuidar la generacinde contenidos por parte de los usuarios, porque tal como en el caso de los Foros se puedellegar a hacer un mal uso de este tipo de sistemas. En el caso de los chats, se aconsejautilizar las herramientas que ofrece este tipo de sistemas para evitar la participacin deusuarios que tengan malos hbitos de comunicacin. Asimismo se recomienda su uso paraMesas de Ayuda que permitan apoyar a los usuarios de modo directo mientras visitan elsitio.

Sistemas de Simulacin: permite entender los escenarios que se pueden dar antedeterminadas situaciones, sin necesidad de acceder a ellos. Habitualmente este tipo desistemas es agregado a los Sitios Web como aplicaciones especiales, por lo que slo se debeasegurar su correcta operacin funcional.

Sistemas de Bsqueda: estos sistemas proveen una forma interesante de obtener feedbackde los usuarios. Al incorporar mecanismos de bitcora para las bsquedas que hacen en elSitio Web (en la medida que se cuente con un sistema buscador), se ir registrando lo queellos andan buscando; al revisar en forma peridica y obtener estadsticas de uso del sistema,se podr avanzar en comprender las necesidades del usuario y de esa manera enfatizar en lainformacin ms buscada por ellos. Adicionalmente, el control de bsquedas fallidas a suvez permite identificar ya sea errores de organizacin de contenidos o, simplemente, detectarel tipo de informacin que el usuario espera encontrar en el sitio.

> Formularios del SitioEn la creacin de los formularios para la generacin de comunicaciones del Sitio Web, es muyrelevante cumplir con ciertas prcticas de usabilidad, que hagan ms sencilla la operacin de losformularios. Como ejemplos de buenas prcticas podemos mencionar:



Validacin del RUT: se refiere a incorporar la programacin adecuada para que se valideinmediatamente el ingreso del Rol nico Tributario, de tal manera que tras escribir losdatos en el campo el usuario pueda saber si est bien o no ingresado.

Validacin de campos obligatorios: se refiere a que todos los campos en que sea obligatorioponer datos (que no sern todos los de formularios), estn marcados de alguna forma(puede ser un asterisco o sealar esos campos con un color diferente) de tal manera que losusuarios cumplan con ingresar los datos correspondientes. Adicionalmente, al pulsar elbotn de accin al final del formulario, se debe indicar un alerta si llegaran a faltar datos deese tipo.

Validacin del e-mail: se refiere a usar la programacin adecuada para validar que los datosque se ingresen en este campo, cumpla con la formalidad de estructura de un correoelectrnico (existencia del signo @ por ejemplo).

Valores por omisin: se refiere a que si hay campos con men drop-down para elegir una,entre muchas opciones, siempre se ponga en el primer lugar aquella que vaya a ser la msusada. Por ejemplo, si es el campo Pas, el primer registro debe ser para Chile.

Ejemplos de ingreso de contenidos: se refiere a que, al lado de donde el usuario debaingresar la informacin, debe aparecer escrita la forma en que se debe hacerse.Por ejemplo, al lado del campo RUT escribir un nmero de ejemplo, para que el usuariosepa si debe escribirlo con puntos y guin, sin puntos y guin o sin puntos ni guin.

Claridad de botones: los botones de accin al final de los formularios deben tener unapalabra clara, que no deje lugar a dudas sobre la accin a realizar. Si es un formulario paraEnviar informacin, debera tener la palabra Enviar. Si es para suscribirse a un servicio,deber decir Suscribirse. Asimismo, si se pone un botn para borrar el formulario, debequedar clara su funcin con un texto adecuado que indique esa accin. Se debe indicarBorrar Formulario y evitar palabras ambiguas para esta funcin, tales como Limpiar,Cancelar, Eliminar o similares.

> Boletines de Noticias y NovedadesCuando se empleen sistemas de suscripcin a boletines de noticias o difusin de novedades, sedebe dejar muy clara cul ser la poltica de suscripcin, envo y eliminacin de la base de datos denombres.

En este sentido, hay que poner siempre cerca de los formularios de suscripcin un enlace a laPoltica de Privacidad en la que se deje clara la informacin relativa a como realizar esas acciones.

Hay que recordar que el artculo 12 de la Ley N 19.628, del 28 de agosto de 1999, SobreProteccin de la Vida Privada plantea las obligaciones que existen para quienes guarden datos deterceros.



En el inciso tercero del artculo 12 se refiere al envo de e-mails y al derecho de cualquier persona de ser eliminadode una base de datos. Indica: Igual exigencia deeliminacin, o la de bloqueo de los datos, en su caso, podrhacer cuando haya proporcionado voluntariamente susdatos personales o ellos se usen para comunicacionescomerciales y no desee continuar figurando en el registrorespectivo, sea de modo definitivo o temporal.

> Sistemas para Recibir y Administrar Mensajes de UsuariosCuando se generan sistemas para que los usuarios enven informacin, es imprescindible queexista un procedimiento administrativo que le d tanta validez a un mensaje enviado por esta va,respecto de otro enviado por una va tradicional (carta, fax, etc.).

Adicionalmente hay que recordar que la ley de Silencio Administrativo (Ley N 19.880) requiereque se d respuesta a determinadas presentaciones en plazos concretos, con el objetivo de acelerarprocesos.

Para ello, una buena prctica sera contar con un sistema de seguimiento de mensajes, que permitair registrando las comunicaciones que llegan desde los formularios de contacto y ayuda del sitio enInternet. En ste se pueden asignar los siguientes estados a dichos mensajes, de acuerdo a latramitacin que se le otorgue:

Estado Pendiente: lo tiene todo mensaje que llegue al sitio y para el que slo se hayaenviado una respuesta de Acuse de recibo.

Estado En trmite: cuando se deriva el mensaje a terceros en busca de la respuesta enalguna reparticin de la institucin.

Estado Respondido: cuando se enva la informacin solicitada al usuario final. Estado Archivado: estado final para permitir el manejo de grandes cantidades de

informacin.

Es importante considerar que para hacer este tipo de seguimiento no se requiere necesariamenteun sistema computacional, puesto que tambin se puede hacer con los recursos tradicionales yuna buena organizacin.

En el siguiente diagrama se puede ver un escenario posible de manejo o flujo de actividad en tornoa un mensaje electrnico por parte de una Oficina de Informaciones, Reclamos y Sugerencias(OIRS).

Ver texto de la Ley N 19.628Proteccin de Datos Personaleswww.sernac.cl/derechos/pdf/Ley19628.pdf



Como se puede apreciar, la generacin de este tipo de grficas permite revisar todos los estadosposibles y asignar las responsabilidades que correspondan a cada una de las reas de trabajoinvolucradas.

A continuacin se revisa la actividad posible con cada una de las reas de la institucin que atiendenpblico:

Oficina de Informacin, Reclamos y Sugerencias (OIRS)Debe hacer la recepcin, mantencin y seguimiento de todas las comunicaciones que lleguen porel Sitio Web, asignndole a cada una de ellas el mismo valor que un mensaje llegado en formatotradicional. Su preocupacin debe ir desde la recepcin a la respuesta, por lo que, de contar conun sistema de gestin como el indicado en ttulos anteriores, debera ser su responsabilidad laoperacin del mismo.

Figura 6: Ejemplo de flujo de un mensaje electrnico recibido por cualquier OIRS.



Se sugiere incluso que cualquier mensaje de correo electrnico, que llegue por otra va distinta alos formularios del sitio, pueda ser atendido por esta oficina para contar con un nico punto deacceso y salida.

Oficina de PartesAl igual que la OIRS debe hacer la recepcin, mantencin y seguimiento de todas lascomunicaciones que lleguen por vas tradicionales y apoyar el trabajo de la OIRS. Tradicionalmenteen estas oficinas se concentra un gran conocimiento de la institucin, por lo que ser vital suapoyo en la derivacin de comunicaciones y en la atencin de mensajes.

rea de ComunicacionesEl rea de Comunicaciones debe mantener el discurso pblico de la institucin, por lo que esimportante que pueda entregar a la OIRS la informacin adecuada de cmo atender y respondera las consultas que lleguen, validar los formatos de respuesta y opinar cuando la respuesta estrelacionada con su propia rea.

rea de InformticaEl rea de Informtica debe ser un facilitador tecnolgico para la OIRS como para cualquiercomponente del equipo que tiene a cargo el desarrollo del Sitio Web, de manera que siemprereciban informacin adecuada y a tiempo.

Es necesario que el rea de Informtica est coordinada y pueda actuarpermanentemente coordinada como contraparte tcnica de cualquier proyectode este tipo.

Captulo III - Diseo Web y EstndaresResumenTabla de ContenidosDiseo para el Acceso RpidoBuenas PrcticasNormas mnimas para facilitar el acceso va conexin telefnica1. Peso de las Pginas2. Diagramacin de las Pginas3. Uso de Presentaciones en Flash4. Uso de Marcos o Frames5. Uso de Imgenes de background6. Uso de meta tags Adecuados

Normas para Incorporar Elementos Grficos y MultimedialesInteroperabilidad

Estndares Internacionales

Diseo para la AccesibilidadBuenas PrcticasEstndares Tcnicos RecomendadosEstndares Internacionales

Diseo de la Experiencia del UsuarioDesarrollo de Diagrama de InteraccinPrincipales Actividades a Desarrollar en el SitioPruebas de Sistemas e InterfacesSistemas para Generar FeedbackFormularios del SitioBoletines de Noticias y NovedadesSistemas para Recibir y Administrar Mensajes de Usuarios

Documents

Capitulo III: Diseño Web y Estándares (Guía para Desarrollo de