Buenas prácticas para la implementación de portales web

580 views

Published on

UNA GUÍA DE BUENAS PRÁCTICAS PARA LA IMPLEMENTACIÓN DE LOS PORTALES WEB DE LAS ENTIDADES PÚBLICAS DE ACUERDO A LA LEY DE TRANSPARENCIA

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
580
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Buenas prácticas para la implementación de portales web

  1. 1. 2012[UNA GUÍA DEBUENAS PRÁCTICASPARA LAIMPLEMENTACIÓNDE LOS PORTALESWEB DE LASENTIDADESPÚBLICAS DEACUERDO A LA LEYDE TRANSPARENCIA]Lineamientos para una eficiente implementación de portales web de acuerdo ala normatividad actual Peruana.
  2. 2. Una Guía de Buenas Prácticas para la implementación de los portales 2 web de las entidades públicas de acuerdo a la Ley de TransparenciaContenidoINTRODUCCIÓN ................................................................................................. 4CAPÍTULO I: DISEÑO DE PÁGINA ......................................................................... 6 1.1 Espacio en pantalla ................................................................................. 6 1.2 Diseño de plataforma cruzada .................................................................. 8 1.3 Semántica y estética ............................................................................. 11 1.4 Tiempos de respuesta ........................................................................... 13 1.5 Vinculación .......................................................................................... 15 1.6 Marcos, impresiones y distribución de contenido ...................................... 17CAPÍTULO II: DISEÑO DE CONTENIDO ................................................................ 20 2.1 Contenido escrito para la web ................................................................ 20 2.2 Títulos ................................................................................................ 22 2.3 Legibilidad ........................................................................................... 24 2.4 Documentación de ayuda ...................................................................... 25 2.5 Multimedia .......................................................................................... 27 2.6 Animación ........................................................................................... 30CAPÍTULO III: DISEÑO DEL SITIO ...................................................................... 32 3.1 Página de inicio .................................................................................... 32 3.2 Páginas interiores ................................................................................. 34 3.3 Navegación.......................................................................................... 35 3.4 Subportales ......................................................................................... 37 3.5 Búsqueda ............................................................................................ 38 3.6 Diseño de URL ..................................................................................... 40CAPÍTULO IV: ACCESIBILIDAD PARA LOS USUARIOS DISCAPACITADOS ................. 42CAPITULO V: INTERNACIONALIZACIÓN ............................................................... 45CAPÍTULO VI: ADAPTACIÓN A NUEVOS MEDIOS DE COMUNICACIÓN Y ACCESO ....... 48 6.1 Dispositivos móviles ............................................................................. 48 6.2 Redes Sociales ..................................................................................... 49
  3. 3. Una Guía de Buenas Prácticas para la implementación de los portales 3 web de las entidades públicas de acuerdo a la Ley de TransparenciaIlustracionesILUSTRACIÓN 1 - EJEMPLO DE APROVECHAR EL ESPACIO EN PANTALLA ...................................... 7ILUSTRACIÓN 2 - PORTAL WEB CON CONTRASTE PARA RESALTAR EL CONTENIDO ........................ 10ILUSTRACIÓN 3 - PORTAL CON FONDO CLARO Y LETRAS QUE HACEN CONTRASTE........................ 10ILUSTRACIÓN 4 - VISTA PREVIA DE LA IMPRESIÓN DEL PORTAL MOSTRADO EN LA ILUSTRACIÓN ANTERIOR .................................................................................................... 11ILUSTRACIÓN 5 - COMBINACIÓN EQUIVOCADA. HTML Y CSS ............................................. 12ILUSTRACIÓN 6 - HOJAS DE ESTILOS CON DIFERENTES PROPOSITOS, UNO PARA VISUALIZAR EN PANTALLA Y EL OTRO PARA IMPRIMIR. .................................................................... 13ILUSTRACIÓN 7 - INDICADOR DE CARGA DE IMÁGENES. ..................................................... 15ILUSTRACIÓN 8 - MINIATURAS DE IMÁGENES ................................................................ 15ILUSTRACIÓN 9 - INTERFAZ PARA LA REVISIÓN DE VÍNCULOS NO EXISTENTES. .......................... 17ILUSTRACIÓN 10 - USO DE MARCOS QUE IMPIDEN REFERENCIAR EL CONTENIDO ........................ 18ILUSTRACIÓN 11 - PUBLICACIONES EN DIVERSOS FORMATOS ESTANDAR. ................................ 19ILUSTRACIÓN 12 - EJEMPLO DE REDACCIÓN DE CONTENIDO PARA LA WEB................................ 21ILUSTRACIÓN 13 - EJEMPLO DE MALA REDACCIÓN PARA LA WEB ........................................... 22ILUSTRACIÓN 14 - EJEMPLOS DE BUENOS TÍTULOS .......................................................... 23ILUSTRACIÓN 15 - EJEMPLO DE UNA PÁGINA LEGIBLE ....................................................... 25ILUSTRACIÓN 16 - EJEMPLO DE UNA PÁGINA DE DOCUMENTACIÓN DE AYUDA ............................ 26ILUSTRACIÓN 17 - EJEMPLO DE CONTENIDO EN AUDIO ...................................................... 28ILUSTRACIÓN 18 - IMÁGENES ESTÁTICAS EN LUGAR DE LOS VIDEOS. ..................................... 29ILUSTRACIÓN 19 - SERVICIOS EXTERNOS PARA DISTRIBUCIÓN DE VIDEOS ............................... 29ILUSTRACIÓN 20 - EJEMPLO DE TRANSICIONES .............................................................. 31ILUSTRACIÓN 21 - EJEMPLO DE UNA BUENA PÁGINA DE INICIO............................................. 33ILUSTRACIÓN 22 - EJEMPLO DE PÁGINA INTERIOR ........................................................... 35ILUSTRACIÓN 23 - EJEMPLO DE NAVEGACIÓN................................................................. 37ILUSTRACIÓN 24 - EJEMPLO DE SUBPORTAL DE MAESTROSDELWEB.COM.................................. 38ILUSTRACIÓN 25 - EJEMPLO DE PÁGINA CON RESULTADOS DE BÚSQUEDA. ............................... 40ILUSTRACIÓN 26 - EJEMPLO DE URL FÁCIL DE RECORDAR ................................................. 41ILUSTRACIÓN 27 - EJEMPLO DE URL DIFÍCIL DE RECORDAR ................................................ 41ILUSTRACIÓN 28 - PORTAL DE LA INICIATIVA WAI .......................................................... 44ILUSTRACIÓN 29 - SOFTWARE QUE PUEDE LEER TEXTO EN WEB Y CONVERTIRLO A SIGNOS PARA PERSONAS CON DISCAPACIDADES......................................................................... 44ILUSTRACIÓN 30 - EJEMPLO DE INTERNACIONALIZACIÓN ................................................... 46ILUSTRACIÓN 31 - EJEMPLO DE PORTAL WEB CON CONTENIDO ESPECIAL POR PAÍSES ................... 47ILUSTRACIÓN 32 - EJEMPLO DE USO DE QR .................................................................. 49ILUSTRACIÓN 33 - CUENTA EN TWITTER DE ONGEI ........................................................ 50
  4. 4. Una Guía de Buenas Prácticas para la implementación de los portales 4 web de las entidades públicas de acuerdo a la Ley de TransparenciaINTRODUCCIÓN Es importante considerar la legislación peruana en la implementación de portales web, pero la legislación peruana sólo brinda las bases, hay que considerar las buenas prácticas mundialmente usadas para implementar portales web, de tal manera que es posible evitar errores como:  En el modelo de negocio, dejar de ver a la web como un simple folleto.  En la gestión de proyecto, un portal web no puede ser tratado como un proyecto tradicional, sino como un proyecto de interfaz de usuario.  En la arquitectura de la información, en lugar de estructurar un portal web de manera similar a la entidad, estructurarlo acorde a las tareas de los usuarios y sus puntos de vista  En el diseño de página, para no crear páginas solamente atractivas internamente, sino para que el usuario tenga una experiencia óptima en circunstancias reales  En la creación de contenido, para no seguir escribiendo en el estilo lineal tal cual un diario o un boletín informativo, sino para escribir óptimamente para usuarios de internet: claro, conciso y directo.
  5. 5. Una Guía de Buenas Prácticas para la implementación de los portales 5 web de las entidades públicas de acuerdo a la Ley de Transparencia  En la estrategia de vinculación, y dejar de pensar que los portales web son islas, para pensar en interconexión de servicios y recursos. La web es un medio en constante cambio, por lo tanto no se pueden implementar como si fueran proyectos tradicionales. Está guía pretende remarcar las buenas prácticas usadas internacionalmente, probadas en portales web con enormes cantidades de usuario, y siguiendo la sapiencia de algunos expertos en temas web como Jakob Nielsen, Steve Krug y Susan M. Weinschenk, para asociar sus conocimientos con la normatividad actual peruana, específicamente con la ley de transparencia.
  6. 6. Una Guía de Buenas Prácticas para la implementación de los portales 6 web de las entidades públicas de acuerdo a la Ley de TransparenciaCAPÍTULO I: DISEÑO DE PÁGINA La apariencia superficial de un portal web, necesita ciertos lineamientos a tener en cuenta para poder captar la atención del usuario y tener alta eficiencia en la entrega de contenidos. Un portal web debe estar estructurado en función a las necesidades del usuario, y debe poseer un sistema de navegación que facilite las búsquedas de contenido por parte del usuario. Estas consideraciones con respecto al diseño se desarrollaran con mayor amplitud en los siguientes capítulos.1.1 Espacio en pantalla Las páginas deben poseer contenidos que despierten la atención del usuario. Lamentablemente observamos que muchos sitios dedican más espacio a la navegación que al contenido en sí, lo que produce incomodidad al usuario. La navegación es un mal necesario y no es un fin, por lo que se debe atenuar sus efectos. Las buenas prácticas en este aspecto son las siguientes:  Dedicar como mínimo el 50% del espacio en pantalla para mostrar el contenido.
  7. 7. Una Guía de Buenas Prácticas para la implementación de los portales 7 web de las entidades públicas de acuerdo a la Ley de Transparencia  Un porcentaje adecuado para el contenido está entre 75% y 80%.  Usar espacios en blanco para agrupar la información, evitando aglomeraciones y confusiones en las secciones de la página.  Evitar el uso de líneas gruesas y dar preferencia a los espacios en blanco.  La navegación debe mantenerse por debajo del 20% del espacio.  La publicidad de ser necesaria en el portal debe estar muy integrada al sitio, para evitar destinar un porcentaje para publicidad. Ilustración 1 - Ejemplo de aprovechar el espacio en pantalla
  8. 8. Una Guía de Buenas Prácticas para la implementación de los portales 8 web de las entidades públicas de acuerdo a la Ley de Transparencia1.2 Diseño de plataforma cruzada En la web no es posible controlar el software o hardware con que el usuario visualizara los portales, no es se debe obligar al usuario a usar un sistema de navegación propio, ya que se puede llegar al sitio desde múltiples orígenes, y salir de él de varias formas. Las buenas prácticas con respecto a la plataforma cruzada, están orientadas hacia la libertad de movimiento, estas son:  Colocar un logotipo vinculado a la página de inicio, para guiar a los usuarios que ingresaron a una página interna al portal web  Usar fuentes genéricas, para evitar palabras no legibles en diversos navegadores web.  En caso de necesitar un tipo de fuente específico, asegurarse de distribuir la fuente también, no todos los dispositivos que se usarán para ingresar al portal, tienen la misma fuente.  Se debe adaptar para la navegación vía dispositivos móviles, como celulares, tablets, netbooks y demás. Evitar recrear exactamente el mismo aspecto visual para todos los usuarios.  Diseñar los portales independientemente de la resolución.  Evitar incluir texto en las imágenes, ya que a diversas resoluciones este texto, puede quedar distorsionado o no legible.
  9. 9. Una Guía de Buenas Prácticas para la implementación de los portales 9 web de las entidades públicas de acuerdo a la Ley de Transparencia  Los iconos deben verse claramente, como mínimo a una resolución de 100 dpi  Desarrollar hojas de estilos para las páginas que van a imprimirse, de tal forma que el usuario que necesite imprimir algún contenido obtenga una versión óptima para su uso.  Usar la codificación de caracteres UTF-8, para evitar que existan errores con algunos caracteres especiales.  Usar colores o imágenes de fondo claros con letras o contenido de colores oscuros, para que exista contraste y se pueda leer fácilmente desde cualquier dispositivo.  Usar HTML5 y CCS3 para adaptarse a las nuevas funcionalidades de los navegadores, sin embargo se debe usar programas para adaptar estas tecnologías a los navegadores antiguos, es muy importante hacerlo, ya que permitirá no discriminar a los usuarios que aún no actualizan sus navegadores.
  10. 10. Una Guía de Buenas Prácticas para la implementación de los portales 10 web de las entidades públicas de acuerdo a la Ley de Transparencia Ilustración 2 - Portal web con contraste para resaltar el contenido Ilustración 3 - Portal con fondo claro y letras que hacen contraste
  11. 11. Una Guía de Buenas Prácticas para la implementación de los portales 11 web de las entidades públicas de acuerdo a la Ley de Transparencia Ilustración 4 - Vista previa de la impresión del portal mostrado en la ilustración anterior1.3 Semántica y estética Actualmente muchos portales web, presentan el problema de no usar un etiquetado semántico, y peor aún usar etiquetas HTML obsoletas para ahorrarse trabajo en crear una hoja de estilos apropiada. Estos problemas ocasionan fallas en navegadores al visualizar el portal web, fallas en posicionamiento en buscadores, fallas en accesibilidad al no poder usar lectores para invidentes, fallas en adaptación a otras tecnologías, entre muchas más. Las buenas prácticas correspondientes a este punto son:
  12. 12. Una Guía de Buenas Prácticas para la implementación de los portales 12 web de las entidades públicas de acuerdo a la Ley de Transparencia  Trabajar con etiquetas HTML5 que son orientadas a contenido altamente semántico.  No combinar las etiquetas HTML con las propiedades CSS en un mismo documento, para evitar un mantenimiento engorroso, y una falta de significado al contenido. Para ello se deben usar archivos por separado.  Evitar usar etiquetas HTML para dar estética a la presentación, tales como saltos de línea, alineaciones al centro, o usar tablas para ordenar el contenido.  Preparar varias hojas de estilo de ser necesaria la adaptación de la página en distintos dispositivos de acceso a la web. Ilustración 5 - Combinación equivocada. HTML y CSS
  13. 13. Una Guía de Buenas Prácticas para la implementación de los portales 13 web de las entidades públicas de acuerdo a la Ley de Transparencia Ilustración 6 - Hojas de estilos con diferentes propositos, uno para visualizar en pantalla y el otro para imprimir.1.4 Tiempos de respuesta En estos últimos años los usuarios han demostrado que desean mayor velocidad en sus procesos, tramites, transacciones y demás actividades. Esta necesidad de mayor rapidez también se ve reflejada en la web, en donde es sumamente importante que un portal web cargue rápidamente y muestre la información requerida lo más rápido posible. Las buenas prácticas para mejorar los tiempos de respuesta son:  Si es necesario, colocar vínculos para la descarga de archivos, se recomienda indicar el tamaño de la descarga al lado, de tal manera que ayuda al usuario a calcular el tiempo necesario para la descarga.  Usar de manera moderada la cantidad de imágenes a cargar por página.  Las imágenes a usar no deben exagerar en su tamaño o resolución, a mayor resolución será más lenta la carga de la página.  Usar miniaturas de imágenes en el caso de que necesite mostrar varias imágenes, estas miniaturas luego pueden ser vinculadas a las imágenes en su tamaño real, de esa manera se hace más rápida la carga de la página también.
  14. 14. Una Guía de Buenas Prácticas para la implementación de los portales 14 web de las entidades públicas de acuerdo a la Ley de Transparencia  En caso de necesitar cargar archivos muy grandes, se debe usar un indicador de carga, de manera que el usuario pueda evidenciar que los datos están en pleno proceso de carga.  La parte superior de la página debe tener sentido, aunque aún no se hayan mostrado las imágenes, en otras palabras más texto y menos imágenes.  Se debe usar atributos ALT en las imágenes, a fin de que los usuarios entiendan de que trata la imagen en el caso de que su carga demore.  Usar WIDTH y HEIGHT para poder definir adecuadamente el espacio que va a ocupar las imágenes, de esta manera no se incomodara al usuario con cambios de tamaño repentinos mientras visualiza la página que está en pleno proceso de carga.  Usar JavaScript para mejorar los tiempos de respuesta, mientras se va mostrando el contenido importante, JavaScript puede ir cargando otras partes del portal que estarán listas cuando el usuario prosiga con la navegación.
  15. 15. Una Guía de Buenas Prácticas para la implementación de los portales 15 web de las entidades públicas de acuerdo a la Ley de Transparencia Ilustración 7 - Indicador de carga de imágenes. Ilustración 8 - Miniaturas de imágenes1.5 Vinculación
  16. 16. Una Guía de Buenas Prácticas para la implementación de los portales 16 web de las entidades públicas de acuerdo a la Ley de Transparencia Los vínculos son una parte importante de todo portal web, permite conectar información, permiten mostrar otras partes del portal. Una mala implementación de estos vínculos, causa una incomodidad al usuario y por lo tanto una apreciación negativa hacía el portal. Las buenas prácticas con respecto a la vinculación son:  Evitar el uso de “Haga clic aquí”, reemplazar por un enlace más significativo.  Usar el subrayado de vínculos moderadamente.  Usar en promedio 4 palabras para un vínculo, acompañado de palabras adicionales para dar una mejor explicación a su contenido.  Evitar vínculos iguales, para no confundir al usuario  Usar el atributo TITLE de los vínculos, esto ayuda al usuario a saber el destino del vínculo.  Emplear colores diferentes para resaltar los vínculos.  Usar un color para los vínculos ya visitados, de manera que el usuario pueda diferenciar entre el vínculo nuevo y el ya leído. Los usados de manera general son rojo o morado.  Se recomienda usar mensajes desplegables para mayor información cuando los vínculos no se puedan explicar en pocas palabras.  Se debe revisar constantemente el destino de los vínculos, ya que pueden hacer referencia a contenido no existente,
  17. 17. Una Guía de Buenas Prácticas para la implementación de los portales 17 web de las entidades públicas de acuerdo a la Ley de Transparencia esto produciría una confusión y probablemente dudas con respecto a la transparencia de la información.  No se debe abusar de los vínculos publicitarios, pueden ocasionar malos entendidos y perspectivas incorrectas con respecto a un portal web. Ilustración 9 - Interfaz para la revisión de vínculos no existentes.1.6 Marcos, impresiones y distribución de contenido Las buenas prácticas con respecto a los marcos, impresiones y distribución de contenido son las siguientes:  Evitar el uso de marcos, ya que el usuario no puede hacer referencia exacta al tipo de contenido necesita, y si lo quiere distribuir no será posible, ya que el marco no enlaza a un solo contenido, sino a varios.  La impresión de contenido del portal web suele ser una parte importante, para ello es necesario controlar el formato de impresión mediante una hoja de estilos apropiada para
  18. 18. Una Guía de Buenas Prácticas para la implementación de los portales 18 web de las entidades públicas de acuerdo a la Ley de Transparencia esta tarea, evitar brindar información impresa que el usuario no usara.  Los contenidos distribuidos en un portal web, deben poseer un formato estándar, que pueda ser usado por cualquier dispositivo, se recomienda usar PDF para todo tipo de contenido, es un formato mundialmente usado y existen muchas maneras de acceder a este tipo de contenido. Ilustración 10 - Uso de marcos que impiden referenciar el contenido
  19. 19. Una Guía de Buenas Prácticas para la implementación de los portales 19 web de las entidades públicas de acuerdo a la Ley de Transparencia Ilustración 11 - Publicaciones en diversos formatos estandar.
  20. 20. Una Guía de Buenas Prácticas para la implementación de los portales 20 web de las entidades públicas de acuerdo a la Ley de TransparenciaCAPÍTULO II: DISEÑO DE CONTENIDO La parte realmente importante de un portal web, es el contenido que ofrece a sus usuarios, una distribución eficiente de contenido refleja transparencia en los actos de la organización y genera confianza por parte de los visitantes. 2.1 Contenido escrito para la web La experiencia del usuario con respecto al contenido determina su confianza en el portal web. No solamente es necesario tener en cuenta la ortografía o gramática, sino también importa la presentación. Las buenas prácticas son las siguientes:  Ser sucinto, escribir la mitad del texto que se hubiera usado en una publicación impresa.  No obligar a los usuarios a leer bloques de texto extensos; usar párrafos cortos, subtítulos y listas.  Dividir la información extensa en múltiples páginas.  Contratar de preferencia especialista en contenido web que tengan experiencia en publicación en la web.  Estructurar los artículos con dos o incluso tres niveles, usar títulos y subtítulos.
  21. 21. Una Guía de Buenas Prácticas para la implementación de los portales 21 web de las entidades públicas de acuerdo a la Ley de Transparencia  Usar títulos significativos en lugar de grandilocuentes o atractivos  Usar listas con diseños similares, para evitar la confusión de los usuarios  Usar resaltado y énfasis para que las palabras importantes retengan la atención del usuario.  Usar un lenguaje claro, evitar en lo posible los tecnicismos.  Evitar el uso de metáforas, los usuarios se pueden tomar literalmente lo escrito.  El sentido del humor debe ser utilizado con mucha precaución, para evitar confusiones y molestias al usuario.  Usar el principio de la “pirámide invertida”, empezar con una conclusión que permita al usuario saber de qué trata lo que va a empezar a leer, para luego agregarle los detalles que complementen y amplíen la conclusión. Ilustración 12 - Ejemplo de redacción de contenido para la web.
  22. 22. Una Guía de Buenas Prácticas para la implementación de los portales 22 web de las entidades públicas de acuerdo a la Ley de Transparencia Ilustración 13 - Ejemplo de mala redacción para la web2.2 Títulos Cuando se escribe para la web, se debe orientar a la facilidad de búsqueda, a que el contenido sea rápidamente ubicado mediante buscadores, por esta razón un elemento a considerar es el título, un buen título es un buen factor. Las buenas prácticas con respecto a los títulos son las siguientes:  Evitar el uso de títulos largos, ya que ralentizan a los usuarios.  De preferencia usar títulos que tengan como máximo 6 palabras  Entre 40 a 60 caracteres deben ser suficiente para poder escribir un título.
  23. 23. Una Guía de Buenas Prácticas para la implementación de los portales 23 web de las entidades públicas de acuerdo a la Ley de Transparencia  Evitar el uso de la palabra “Bienvenidos”, es una palabra redundante en la web.  El título debe ser lo suficientemente explicativo para captar la atención del usuario.  Escribir sin hacer uso de juegos de palabras  Evitar escribir títulos que sólo seduzcan a hacer clic, sin estar relacionados al contenido que va dentro de él.  Evitar en lo posible el uso de artículos.  No poner títulos que empiecen con la misma palabra, son difíciles de diferenciarlos. Ilustración 14 - Ejemplos de buenos títulos
  24. 24. Una Guía de Buenas Prácticas para la implementación de los portales 24 web de las entidades públicas de acuerdo a la Ley de Transparencia2.3 Legibilidad Es necesario permitir que los usuarios puedan leer todo el texto disponible en el portal web, para ello es necesario seguir las siguientes buenas prácticas:  Usar colores que tengan mucho contraste entre el texto y el fondo, la legibilidad óptima requiere texto negro sobre fondo blanco.  Usar fondos de colores claros o patrones muy sutiles, ya que los fondos interfieren con la capacidad visual de ver las líneas en los caracteres y de reconocer las formas de las palabras.  Usar fuentes grandes como para que los usuarios puedan leer cómodamente el contenido.  Usar fuentes pequeñas para pies de página o notas que los usuarios no suelen leer.  El texto debe estar quieto, no se debe mover el texto, ya que al hacer que este sea intermitente dificulta mucho la lectura.  Alinear el texto a la izquierda, eso facilita la lectura.  Evitar la justificación del texto, para no tener ríos tipográficos y dificultar la lectura.  El texto que sea menor a 9 puntos, debe ser de la familia “sans-serif”.  El texto grande puede usar una tipografía tipo “serif”.
  25. 25. Una Guía de Buenas Prácticas para la implementación de los portales 25 web de las entidades públicas de acuerdo a la Ley de Transparencia Ilustración 15 - Ejemplo de una página legible2.4 Documentación de ayuda Muchos portales web elaboran documentación de ayuda, para que los usuarios consulten como deben ser usados, sin embargo, muy pocas veces los usuarios leen esta documentación. Sin embargo en algunas ocasiones si es necesaria la consulta a la documentación, sobre todo cuando son portales muy grandes. Las buenas prácticas para una buena documentación de ayuda son:
  26. 26. Una Guía de Buenas Prácticas para la implementación de los portales 26 web de las entidades públicas de acuerdo a la Ley de Transparencia  Las páginas de documentación de ayuda deben ser fácilmente localizadas  Deben abundar los ejemplos, los usuarios aprende más cuando hay casos que pueden imitar.  Las instrucciones deben estar orientadas a tareas, no por capítulos.  Es aconsejable mostrar modelos conceptuales o esquemas para explicar cómo funcionan algunas partes  Los vínculos deben ser usados cuando existan términos cuyos conceptos sean difíciles de explicar.  Ser breve. Ilustración 16 - Ejemplo de una página de documentación de ayuda
  27. 27. Una Guía de Buenas Prácticas para la implementación de los portales 27 web de las entidades públicas de acuerdo a la Ley de Transparencia2.5 Multimedia Todo portal web hace uso de contenido multimedia (audio, video), este tipo de contenido requiere una disciplina de por medio, el uso no restringido de estos recursos produce interfaces de usuario que son confusas y que dificultan la compresión de la información. Todo contenido multimedia suele tardar considerablemente en cargar, para que la gestión de este tipo de contenido sea eficiente, se deben de tener en cuenta las siguientes buenas prácticas:  Considerar incluir el tamaño del archivo al lado de cada contenido, para que el usuario sepa cuanto tiempo tardara en aparecer el contenido.  Incluir en los videos, imágenes estáticas que describan el contenido del mismo  Considerar usar servicios externos para la transmisión de video, para evitar sobrecargar el portal y dificultar la carga de todo el portal  Se puede considerar la transmisión en vivo de algunos eventos o actos, en estos casos de la misma manera deben ser gestionados por servicios externos al portal web.  El audio no debe cargarse automáticamente al momento de visualizar la página de inicio del portal, esto puede producir molestias en el usuario y ser contraproducente.  Considerar la música para comunicar eventos o asuntos relacionados.
  28. 28. Una Guía de Buenas Prácticas para la implementación de los portales 28 web de las entidades públicas de acuerdo a la Ley de Transparencia  Las grabaciones de voz también son buenos recursos, que pueden ser empleados para comunicar rápidamente una información extensa.  La voz también puede ser usada para la documentación de ayuda al usuario  Invertir en sonido de alta calidad, para mejorar la experiencia de usuario.  Considerar el contenido multimedia para los usuarios con discapacidades. Ilustración 17 - Ejemplo de contenido en audio
  29. 29. Una Guía de Buenas Prácticas para la implementación de los portales 29 web de las entidades públicas de acuerdo a la Ley de Transparencia Ilustración 18 - Imágenes estáticas en lugar de los videos. Ilustración 19 - Servicios externos para distribución de videos
  30. 30. Una Guía de Buenas Prácticas para la implementación de los portales 30 web de las entidades públicas de acuerdo a la Ley de Transparencia2.6 Animación Las animaciones son buenas para enriquecer las representaciones gráficas y atraer la atención. Las buenas prácticas para una animación adecuada son:  Mostrar continuidad en las transiciones  Aprovechar el cambio de dimensiones (reducir o aumentar) para resaltar algún contenido, imágenes o texto.  Ilustrar los cambios en el tiempo  Activar diversas secciones  Enriquecer las representaciones gráficas, para captar la atención del usuario y entregar la información rápidamente  Si se anima texto, considerar un tiempo prudencial para que el usuario pueda captar la información, evitando que el usuario presente dificultades en leerlo.
  31. 31. Una Guía de Buenas Prácticas para la implementación de los portales 31 web de las entidades públicas de acuerdo a la Ley de Transparencia Ilustración 20 - Ejemplo de transiciones
  32. 32. Una Guía de Buenas Prácticas para la implementación de los portales 32 web de las entidades públicas de acuerdo a la Ley de TransparenciaCAPÍTULO III: DISEÑO DEL SITIO Los usuarios que llegan a un portal web, no les resulta difícil imaginar que es lo que pueden hacer en el portal si es que invierten algo de su tiempo en ello, sin embargo muchos usuarios no dedican tiempo y usan su intuición para llegar a la información rápidamente, sin embargo llevar al usuario a la página adecuada no es un tarea fácil. Para ayudar en este aspecto se deben considerar las siguientes buenas prácticas dividas por secciones:3.1 Página de inicio La página de inicio es la presentación del portal, por lo que debe ser diseñada de forma distinta al resto de páginas. Las buenas prácticas para la página de inicio son:  No debe tener un botón inicio, puesto que ya se está en el inicio.  Debe tener un logotipo más grande y una mejor colocación del nombre del portal
  33. 33. Una Guía de Buenas Prácticas para la implementación de los portales 33 web de las entidades públicas de acuerdo a la Ley de Transparencia  Debe poseer entradas que permitan conocer todo el contenido del portal, esto se le conoce como navegación  Presentar las noticias en la página de inicio  Presentar los anuncios a eventos o actos públicos en la página de inicio.  Incluir opciones de búsqueda de contenido.  Evitar el uso de pantallas de bienvenida, ya que lo único que causan es ralentizar al usuario en su intento de llegar a la página de inicio.  La página de inicio debe tener como su elemento más importante el nombre de la entidad pública y este debe estar ubicado en la parte superior izquierda.  Evitar los párrafos de bienvenida, que son molestos y pocas veces leídos. Ilustración 21 - Ejemplo de una buena página de inicio.
  34. 34. Una Guía de Buenas Prácticas para la implementación de los portales 34 web de las entidades públicas de acuerdo a la Ley de Transparencia3.2 Páginas interiores Las páginas interiores deben de tener un diseño distinto al de la página de inicio, y deben ser bien estructuradas para poder entregar la información adecuada y rápidamente a los usuarios. Las buenas prácticas son:  El nombre de la entidad pública debe estar disponible en todas las páginas interiores.  Las páginas interiores deben ser estructuradas para darle mayor importancia al contenido, dejando de lado la estructura general del portal.  Colocar enlaces a la página de inicio en todas las páginas interiores.  Vincular el logotipo o nombre a la página de inicio  Evitar el uso de símiles ya que desvían la atención del usuario, e incluso se puede perder el objetivo del portal web.
  35. 35. Una Guía de Buenas Prácticas para la implementación de los portales 35 web de las entidades públicas de acuerdo a la Ley de Transparencia Ilustración 22 - Ejemplo de página interior3.3 Navegación Las interfaces de navegación están elaboradas para responder las siguientes preguntas del usuario: ¿Dónde estoy?, ¿Dónde he estado? y a ¿Dónde puedo ir? Las buenas prácticas son:  Indicar donde se encuentra actualmente el usuario, se puede usar un color distinto a los demás enlaces de la navegación para identificar la ubicación.  Evitar el uso del valor _blank en los vínculos de navegación, ya que borran el estado anterior y el usuario deberá
  36. 36. Una Guía de Buenas Prácticas para la implementación de los portales 36 web de las entidades públicas de acuerdo a la Ley de Transparencia consultar el historial de navegación para retroceder, haciendo molesta la experiencia.  No tratar de mostrar todos los destinos posibles, eso conllevará a un esfuerzo innecesario  Usar vínculos incrustados, representado en texto subrayado que indica que hay más cosas acerca de algún tema.  Usar vínculos estructurales, para subir y bajar niveles  Usar vínculos asociativos para indicar a los usuarios contenidos relaciones o similares.  Usar el color azul para vínculos no visitados y el color morado para vínculos visitados. Los usuarios ya se han acostumbrado a esta convención.  No abusar del uso de menús desplegables.  No abusar de los gráficos para la navegación.  La estructura de navegación no debe reflejar la estructura organizacional de la entidad pública, sino debe orientarse a la experiencia del usuario y a las acciones que puede realizar en el sitio.  Determinar la navegación por tareas  Categorizar el contenido por tareas  Usar navegación por migas cuando existan arquitecturas jerárquicas de información tales como reglamentos, leyes, resoluciones, entre otros.  No usar navegación con animaciones en tres dimensiones, ya que no resulta natural para el usuario, es más fácil aprender a moverse en una superficie (dos dimensiones) , que un volumen (3 dimensiones)
  37. 37. Una Guía de Buenas Prácticas para la implementación de los portales 37 web de las entidades públicas de acuerdo a la Ley de Transparencia Ilustración 23 - Ejemplo de navegación3.4 Subportales Es necesario entender que en algunas ocasiones las entidades públicas poseen tanta información que debe ser publicada en subportales. Las buenas prácticas complementarias para los subportales son las siguientes:  Usar subportales cuando el contenido abarcaría cientos de páginas.  Usar los subportales como mecanismos de estructuración adicional.  Incluir vínculos al portal principal, para notar de que este subportal es parte de uno mayor.  Los subportales no deben aspirar a ser independientes y no guardar relación alguna con el portal principal.
  38. 38. Una Guía de Buenas Prácticas para la implementación de los portales 38 web de las entidades públicas de acuerdo a la Ley de Transparencia Ilustración 24 - Ejemplo de subportal de maestrosdelweb.com3.5 Búsqueda Las opciones de búsqueda son muy necesarias en todo portal de una entidad pública, ya que permite que el usuario pueda dirigirse rápidamente al contenido que necesita. Las buenas prácticas con respecto a la búsqueda son las siguientes:  Se debe elaborar una estructura para comprender la página buscada y su relación con respecto al portal en general.  Mostrar páginas relacionadas al término de la búsqueda, no solamente el término como tal, ya que pueden existir muchas coincidencias para un solo término.  Debe existir en todas las páginas la opción de buscar.  Indicar en la página de resultado el contexto en el cual se está buscando.
  39. 39. Una Guía de Buenas Prácticas para la implementación de los portales 39 web de las entidades públicas de acuerdo a la Ley de Transparencia  Depurar los términos de búsqueda, para evitar que se busque con las palabras “y”,”de”,”el”,”la”, entre otras que son comunes, y que dificultarán encontrar el contenido adecuado.  Ofrecer opciones de búsqueda avanzada, para que usuarios experimentados eviten perder tiempo en encontrar una información específica.  Eliminar las coincidencias de una misma página, para evitar obtener resultados que muestren la misma página.  Implementar un sistema de preguntas frecuentes o conocidas también como FAQ, esto puede ayudar a resolver algunas consultas de los usuarios.  Resaltar el título de la página que contiene el resultado de la búsqueda.  Es bueno considerar la posibilidad de usar un servicio externo de búsqueda de contenidos que sea especialista en búsquedas.
  40. 40. Una Guía de Buenas Prácticas para la implementación de los portales 40 web de las entidades públicas de acuerdo a la Ley de Transparencia Ilustración 25 - Ejemplo de página con resultados de búsqueda.3.6 Diseño de URL Las URL deben también considerarse como parte de las buenas prácticas de implementación, permiten que el usuario recuerde fácilmente la ubicación del contenido, e incluso permite su fácil difusión en otros medios de publicación, como redes sociales, blogs, entre otros. Las buenas prácticas son las siguientes:  Asegurarse que los portales web puedan estar disponibles escribiendo www. o sin estas tres letras, muchos usuarios solamente escriben la parte principal del nombre.  El nombre de dominio debe ser fácil de recordar.  El nombre de dominio no debe tener términos que puedan confundirse al ser oído.  Las URL de los portales web deben ser fáciles de recordar  Tratar de que las URL sean cortas
  41. 41. Una Guía de Buenas Prácticas para la implementación de los portales 41 web de las entidades públicas de acuerdo a la Ley de Transparencia  Usar palabras comunes, ya que los usuarios sabrán cómo escribirlas y por lo tanto recordara fácilmente  Usar solo letras minúsculas  Evitar los caracteres especiales Ilustración 26 - Ejemplo de URL fácil de recordar Ilustración 27 - Ejemplo de URL difícil de recordar
  42. 42. Una Guía de Buenas Prácticas para la implementación de los portales 42 web de las entidades públicas de acuerdo a la Ley de TransparenciaCAPÍTULO IV: ACCESIBILIDAD PARA LOSUSUARIOS DISCAPACITADOS Como parte del cumplimiento de la ley de transparencia, la información debe estar disponible para todos los usuarios, sin considerar si son discapacitados o no. Las discapacidades que se abarcan en este capítulo están relacionadas al manejo de computadoras o dispositivos móviles. Las buenas prácticas con respecto a este crucial punto son las siguientes:  La buena práctica más importante con respecto a la accesibilidad, es consultar y guiarse de las directrices WAI publicadas por el Consorcio World Wide Web en la siguiente dirección http://www.w3.org/WAI/  Implementar por fases la directiva WAI, haciéndolo incremental y evolutivamente.  Codificar siempre semánticamente, para ello usar la etiquetación HTML 5 , junto con JavaScript para su soporte en navegadores antiguos que no soporten el estándar en desarrollo.  Usar atributos ALT en las imágenes, estos atributos se pueden leer con software especializado para invidentes.
  43. 43. Una Guía de Buenas Prácticas para la implementación de los portales 43 web de las entidades públicas de acuerdo a la Ley de Transparencia  Si el sitio contiene contenido importante en un archivo de audio, el contenido de este audio, también debe estar disponible para leerse, de esta manera se respeta a los usuarios con problemas auditivos.  Evitar el uso del habla en la interacción del usuario con el portal, esto evitaría incomodidades con usuarios con problemas en el habla.  Estructurar correctamente el portal web, para permitir la navegación a través del teclado, esto ayudaría a usuarios con problemas motrices. Se recomienda usar un navegador en modo texto, para probar el diseño del portal.  El nivel de lectura del portal debe ser medio y una navegación simplificada, para evitar problemas con usuario con discapacidades cognitivas.  Evitar considerar signos ortográficos en los términos de búsqueda, ya que algunos usuarios con problemas cognitivos tienen problemas con su ortografía.  Incluir un corrector ortográfico en caso de que sea necesaria el aporte de contenidos por parte del usuario.
  44. 44. Una Guía de Buenas Prácticas para la implementación de los portales 44 web de las entidades públicas de acuerdo a la Ley de Transparencia Ilustración 28 - Portal de la iniciativa WAIIlustración 29 - Software que puede leer texto en web y convertirlo a signos para personas con discapacidades
  45. 45. Una Guía de Buenas Prácticas para la implementación de los portales 45 web de las entidades públicas de acuerdo a la Ley de TransparenciaCAPITULO V: INTERNACIONALIZACIÓN Las entidades públicas distribuyen información no solamente a los ciudadanos peruanos o residentes extranjeros en Perú, también cierto tipo de contenido es útil para los usuarios que viven fuera de nuestro país, ya sean peruanos o extranjeros. Por esta característica, es necesario considerar ciertas buenas prácticas para la internacionalización del portal web.  No usar iconos que puedan ser ofensivos en otras culturas  No emplear juego de palabras visuales (imágenes que no corresponden al contenido)  No usar maquetaciones con un ancho exacto en pixeles para el contenido, ya que este puede crecer al ser traducido a otros idiomas.  Las horas que se usen en el sitio deben dejar en claro en el sistema usado (AM/PM o el de 24 horas), adicionalmente se debe incluir la información UTC (hora universal).  La fecha no debe escribirse en un formato dd/mm/aa , de preferencia se debe escribir el nombre del mes para cualquier notación.  Considerar las unidades de medida o monetarias para los datos que necesiten ser publicados, tener precaución con las comas o puntos decimales, así como el separador de miles.  Evitar el uso de banderas para referirse a idiomas, ya que puede generar incomodidad en los usuarios que no se ven
  46. 46. Una Guía de Buenas Prácticas para la implementación de los portales 46 web de las entidades públicas de acuerdo a la Ley de Transparencia representados con la bandera, pero que si hablan determinado idioma.  Usar palabras en lugar de imágenes para referirse a los idiomas, y ordenarlos alfabéticamente para evitar inferir en que existen preferencias. Ilustración 30 - Ejemplo de internacionalización
  47. 47. Una Guía de Buenas Prácticas para la implementación de los portales 47 web de las entidades públicas de acuerdo a la Ley de Transparencia Ilustración 31 - Ejemplo de portal web con contenido especial por países
  48. 48. Una Guía de Buenas Prácticas para la implementación de los portales 48 web de las entidades públicas de acuerdo a la Ley de TransparenciaCAPÍTULO VI: ADAPTACIÓN A NUEVOS MEDIOS DECOMUNICACIÓN Y ACCESO Internet y las comunicaciones están en constante cambio, es imposible predecir el futuro, sin embargo es necesario estar atentos a los cambios que se perciben y adaptar el diseño e implementación de portales web a esta realidad.6.1 Dispositivos móviles En la actualidad muchos de los usuarios que acceden a los portales públicos lo hacen a través de dispositivos móviles como celulares inteligentes (conocidos también como smartphones), tablets, portátiles pequeños (pantallas de menos de 11 pulgadas), consolas portátiles de videojuegos. Las buenas prácticas para este tipo de dispositivos son:  De preferencia elaborar interfaces dedicadas a este tipo de dispositivos en lugar de adaptar el mismo diseño, se pueden usar subdominios para esto.  Usar librerías JavaScript que permitan la construcción de estas interfaces.  El contenido debe ser mas sucinto, ya que el usuario móvil busca contenido especifico  Usar códigos QR para promocionar eventos o contenido de mucha importancia.
  49. 49. Una Guía de Buenas Prácticas para la implementación de los portales 49 web de las entidades públicas de acuerdo a la Ley de Transparencia  Complementar el contenido del portal con una aplicación móvil que pueda ser distribuido en los principales clientes móviles. Ilustración 32 - Ejemplo de uso de QR6.2 Redes Sociales En los últimos años el uso de redes sociales por parte de los usuarios de internet se ha incrementado exponencialmente, es una forma de participar de internet sin censura, ni prejuicios. Para este tipo de redes sociales las entidades públicas no deben estar aisladas, sino por el contrario deben participar activamente para generar confianza en la población. Las buenas prácticas para este caso son:  Incluir iconos en el portal para compartir rápidamente determinado contenido en las redes sociales más comunes
  50. 50. Una Guía de Buenas Prácticas para la implementación de los portales 50 web de las entidades públicas de acuerdo a la Ley de Transparencia  Establecer una sección que permita incluir el contenido que publica la entidad (en caso de que lo haga) y/o los usuarios en sus redes sociales y que tengan que ver con la entidad pública.  Considerar a las redes sociales como un medio de comunicación bidireccional, no como un simple medio de publicación, y trasladar ese comportamiento al portal web, de manera que los usuarios perciban una integración, transparencia y efectividad por parte de la entidad pública. Ilustración 33 - Cuenta en Twitter de ONGEI

×