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

2012

[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]
Lineamientos para una eficiente implementación de portales web de acuerdo a
la normatividad actual Peruana.

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 Transparencia

Contenido
INTRODUCCIÓN ................................................................................................. 4
CAPÍ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 ...................................... 17
CAPÍ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 ........................................................................................... 30
CAPÍ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 ..................................................................................... 40
CAPÍTULO IV: ACCESIBILIDAD PARA LOS USUARIOS DISCAPACITADOS ................. 42
CAPITULO V: INTERNACIONALIZACIÓN ............................................................... 45
CAPÍ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

Ilustraciones
ILUSTRACIÓN 1 - EJEMPLO DE APROVECHAR EL ESPACIO EN PANTALLA ...................................... 7
ILUSTRACIÓN 2 - PORTAL WEB CON CONTRASTE PARA RESALTAR EL CONTENIDO ........................ 10
ILUSTRACIÓN 3 - PORTAL CON FONDO CLARO Y LETRAS QUE HACEN CONTRASTE........................ 10
ILUSTRACIÓN 4 - VISTA PREVIA DE LA IMPRESIÓN DEL PORTAL MOSTRADO EN LA ILUSTRACIÓN
ANTERIOR .................................................................................................... 11
ILUSTRACIÓN 5 - COMBINACIÓN EQUIVOCADA. HTML Y CSS ............................................. 12
ILUSTRACIÓN 6 - HOJAS DE ESTILOS CON DIFERENTES PROPOSITOS, UNO PARA VISUALIZAR EN
PANTALLA Y EL OTRO PARA IMPRIMIR. .................................................................... 13
ILUSTRACIÓN 7 - INDICADOR DE CARGA DE IMÁGENES. ..................................................... 15
ILUSTRACIÓN 8 - MINIATURAS DE IMÁGENES ................................................................ 15
ILUSTRACIÓN 9 - INTERFAZ PARA LA REVISIÓN DE VÍNCULOS NO EXISTENTES. .......................... 17
ILUSTRACIÓN 10 - USO DE MARCOS QUE IMPIDEN REFERENCIAR EL CONTENIDO ........................ 18
ILUSTRACIÓN 11 - PUBLICACIONES EN DIVERSOS FORMATOS ESTANDAR. ................................ 19
ILUSTRACIÓN 12 - EJEMPLO DE REDACCIÓN DE CONTENIDO PARA LA WEB................................ 21
ILUSTRACIÓN 13 - EJEMPLO DE MALA REDACCIÓN PARA LA WEB ........................................... 22
ILUSTRACIÓN 14 - EJEMPLOS DE BUENOS TÍTULOS .......................................................... 23
ILUSTRACIÓN 15 - EJEMPLO DE UNA PÁGINA LEGIBLE ....................................................... 25
ILUSTRACIÓN 16 - EJEMPLO DE UNA PÁGINA DE DOCUMENTACIÓN DE AYUDA ............................ 26
ILUSTRACIÓN 17 - EJEMPLO DE CONTENIDO EN AUDIO ...................................................... 28
ILUSTRACIÓN 18 - IMÁGENES ESTÁTICAS EN LUGAR DE LOS VIDEOS. ..................................... 29
ILUSTRACIÓN 19 - SERVICIOS EXTERNOS PARA DISTRIBUCIÓN DE VIDEOS ............................... 29
ILUSTRACIÓN 20 - EJEMPLO DE TRANSICIONES .............................................................. 31
ILUSTRACIÓN 21 - EJEMPLO DE UNA BUENA PÁGINA DE INICIO............................................. 33
ILUSTRACIÓN 22 - EJEMPLO DE PÁGINA INTERIOR ........................................................... 35
ILUSTRACIÓN 23 - EJEMPLO DE NAVEGACIÓN................................................................. 37
ILUSTRACIÓN 24 - EJEMPLO DE SUBPORTAL DE MAESTROSDELWEB.COM.................................. 38
ILUSTRACIÓN 25 - EJEMPLO DE PÁGINA CON RESULTADOS DE BÚSQUEDA. ............................... 40
ILUSTRACIÓN 26 - EJEMPLO DE URL FÁCIL DE RECORDAR ................................................. 41
ILUSTRACIÓN 27 - EJEMPLO DE URL DIFÍCIL DE RECORDAR ................................................ 41
ILUSTRACIÓN 28 - PORTAL DE LA INICIATIVA WAI .......................................................... 44
ILUSTRACIÓN 29 - SOFTWARE QUE PUEDE LEER TEXTO EN WEB Y CONVERTIRLO A SIGNOS PARA
PERSONAS CON DISCAPACIDADES......................................................................... 44
ILUSTRACIÓN 30 - EJEMPLO DE INTERNACIONALIZACIÓN ................................................... 46
ILUSTRACIÓN 31 - EJEMPLO DE PORTAL WEB CON CONTENIDO ESPECIAL POR PAÍSES ................... 47
ILUSTRACIÓN 32 - EJEMPLO DE USO DE QR .................................................................. 49
ILUSTRACIÓN 33 - CUENTA EN TWITTER DE ONGEI ........................................................ 50

4

INTRODUCCIÓ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

 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

CAPÍ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

 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

1.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

 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

Ilustración 2 - Portal web con contraste para resaltar el contenido

Ilustración 3 - Portal con fondo claro y letras que hacen contraste

11

Ilustración 4 - Vista previa de la impresión del portal mostrado en la ilustración
anterior

1.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

 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

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

 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

Ilustración 7 - Indicador de carga de imágenes.

Ilustración 8 - Miniaturas de imágenes

1.5 Vinculación

16

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

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

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

Ilustración 11 - Publicaciones en diversos formatos estandar.

20

CAPÍ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

 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

Ilustración 13 - Ejemplo de mala redacción para la web

2.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

 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

2.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

Ilustración 15 - Ejemplo de una página legible

2.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

 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

2.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

 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

Ilustración 18 - Imágenes estáticas en lugar de los videos.

Ilustración 19 - Servicios externos para distribución de videos

30

2.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

Ilustración 20 - Ejemplo de transiciones

32

CAPÍ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

 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

3.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

Ilustración 22 - Ejemplo de página interior

3.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

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

Ilustración 23 - Ejemplo de navegación

3.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

Ilustración 24 - Ejemplo de subportal de maestrosdelweb.com

3.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

 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

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

 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

CAPÍTULO IV: ACCESIBILIDAD PARA LOS
USUARIOS 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

 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

Ilustración 28 - Portal de la iniciativa WAI

Ilustración 29 - Software que puede leer texto en web y convertirlo a signos para
personas con discapacidades

45

CAPITULO 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

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

Ilustración 31 - Ejemplo de portal web con contenido especial por países

48

CAPÍTULO VI: ADAPTACIÓN A NUEVOS MEDIOS DE
COMUNICACIÓ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

 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 QR

6.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

 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

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

Recomendados

Recomendados

Más contenido relacionado

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

Similar a Buenas prácticas para la implementación de portales web (20)

Último

Último (16)

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