Buenas prácticas para sitios web
Usabilidad
Facilidad de uso del sistema para que las personas logren sus objetivos con eficacia, eficiencia y satisfacción en un contexto específico.
El sitio debe diseñarse y desarrollarse de modo que sus elementos, lenguaje y propuesta gráfica sean coherentes y consistentes en todas sus secciones y páginas.
Además, debe establecer una identidad y un estándar visual claros, que faciliten a las personas usuarias reconocer los contenidos y desplazarse por el sitio de forma intuitiva, fluida y sin dificultades.
Recomendación
- Seguir los lineamientos del sistema de diseño Midesof
Simplicidad y limpieza de las interfaces, las que no deben contener información que sea irrelevante o que rara vez se necesite.
No debe presentar información de poca relevancia para el usuario o que no cumpla una función u objetivo real.
Recomendación
- No agregar publicidad comercial a sitio de Gobierno.
- No publicar información desactualizada u obsoleta.
- Seguir los lineamientos del sistema de diseño Midesof
Mostrar un mensaje de confirmación o advertencia para comunicar a la persona usuaria que está a punto de ejecutar una acción irreversible o crítica.
Redacción de los mensajes de error en un lenguaje sencillo (sin códigos de error), indicando con precisión el problema y sugerir una solución de manera constructiva."
Recomendación
Antes de ejecutar una tarea crítica, advertir al usuario explicándole el objetivo y las consecuencias de la misma.
Ejemplo
- El usuario desea eliminar un trámite y hace clic en un botón para ello.
- Aparece un mensaje “¿Estás seguro que deseas eliminar este trámite? Esta acción no se puede revertir.”
No dejar a la persona sin opciones para avanzar o volver a un contenido. Al habilitar la opción de retroceder o cerrar un modal, se evita la frustración y se refuerza la percepción de que el sitio es flexible, adaptable y no “obliga” al usuario a seguir pasos que no desea completar.
Recomendación
- En un formulario de varias etapas, incluir un botón “Volver” y en los modales, un botón para cerrar la ventana.
Navegación simple y consistente en todo el sitio que mantenga la coherencia en menús, etiquetas y disposición de elementos, reduzca la curva de aprendizaje y mejore la experiencia, especialmente en sitios con múltiples secciones o servicios.
Recomendación
Menú principal debe estar siempre visible en la misma posición durante todos los flujos de navegación.
Evitar el uso de más de un botón primario o secundario dentro del mismo módulo o sección, para no generar confusión.
Cuando existen múltiples llamados a la acción de igual jerarquía en un mismo espacio, el usuario puede confundirse respecto a qué opción es la más importante. Para ello, es preciso limitar a un botón principal y, en caso necesario a uno secundario, asegurando claridad en la toma de decisiones y aumentando la tasa de conversión.
Recomendación
Identificar jeraquías de los botones para que el usuario identifique la acción principal y la secundaria
Ejemplo
En un formulario debe existir un único botón primario con la etiqueta “Enviar”. Si es necesario permitir al usuario cancelar o borrar el contenido del formulario, esta acción debe implementarse mediante un botón secundario con la etiqueta correspondiente.
Los botones y enlaces deben presentarse claros, directos y reflejar la acción que ejecutarán. Su lenguaje debe ser inclusivo evitando etiquetas relacionadas con posibles discapacidades. Evitamos palabras como "Ver" o "Revisar" que no favorecen a personas usuarias con problemas visuales.
Recomendación
Etiquetar los botones para que reflejen la acción:
- Evitar: "Haga clic aquí"
- Usar: "Ingresar a mis trámites"
Etiquetas que sean inclusivas:
- Evitar: "Ver más noticias"
- Usar: "Ir a historial de noticias" (una persona ciega, no puede "ver más noticias")
Cada vez que un usuario ejecuta una tarea (enviar un formulario, guardar cambios, realizar un pago), el sistema debe ofrecer retroalimentación clara, ya sea mediante mensajes en pantalla o señales visuales. Esta práctica refuerza la sensación de éxito y confianza en la plataforma.
Ejemplo
El mensaje "Tu solicitud se envió con éxito" después de enviar un formulario, refuerza la realización exitosa del trámite.
Mantener al usuario informado sobre el estado del sistema o del sitio en todo momento.
Los tiempos de carga, procesos en ejecución o errores deben comunicarse de forma inmediata y comprensible. Un usuario que desconoce qué está ocurriendo puede abandonar el sitio por inseguridad o frustración. La transparencia del sistema favorece la retención y mejora la credibilidad.
Recomendación
Mostrar un mensaje para informar lo que está sucediendo
Ejemplo
- Al procesar o cargar datos:
- “Cargando…”
- Si hubo un error o si el servicio no está disponible:
- “Error temporal, inténtalo más tarde”
Los íconos deben servir de apoyo o refuerzo a la información presentada, por lo que nunca deben presentarse solos o con una función meramente decorativa.
Recomendación
Incluir texto explicativo junto a los íconos para evitar lecturas equívocas de la información.
Ejemplo
Ícono de menú hamburguesa acompañado de la palabra "Menú"
Se debe implementar paginación (o scroll controlado) para facilitar la navegación, mejorar la legibilidad y optimizar el rendimiento general.
Recomendación
Presentar una lista de elementos con paginación en lugar de scroll extensos.
En páginas extensas, la ausencia de un acceso rápido al inicio genera fricción innecesaria. Por lo tanto, es importante incluir un botón visible para “volver arriba”, a manera de mejorar la accesibilidad, reducir el esfuerzo de navegación y agilizar la experiencia de uso.
Los mensajes breves y temporales (snackbars) son útiles en pantallas pequeñas, pero en entornos de escritorio pueden pasar desapercibidos, dejando al usuario sin la confirmación oportuna de sus acciones. Limitar su uso a móviles asegura que la retroalimentación sea efectiva y visible.
Recomendación
Cuando se entrega un mensaje de éxito utilizar el snackbar en mobile y en desktop un modal con el botón "Aceptar"
Entregar instrucciones precisas y visibles para reducir errores, evitar abandonos y acelerar el proceso de llenado. También deben ser eficientes, solicitando solo la información necesaria y evaluando cuál es la mejor manera de recopilar la información del usuario.
Desarrollar formularios con validaciones, que permitan evaluar y comunicar al usuario si ha ingresado un dato de manera incorrecta o si hay campos que debe completar. La comunicación de estas validaciones debe ser claras y oportunas."
Recomendación
Evaluar en qué casos es mejor utilizar una forma de captura de información en relación a otras: a veces un checkbox o radio es mejor que selector para campos de selección.
Describir con bajada de texto lo que se debe responder o las limitaciones del campo. Indicar formato esperado en el campo o advertir cantidad máxima de caracteres para los campos de texto.
Prestar especial cuidado de no utilizar excesiva o innecesariamente ventanas modales y emergentes (pop-up).
Recomendación
Verificar que el sitio permita navegar sin interrupciones, evitando modales o ventanas emergentes como anuncios, mensajes de marketing o formularios de suscripción, que bloqueen el contenido o la interacción.
Un tiempo de carga superior a 3 segundos aumenta considerablemente la tasa de abandono. Optimizar el rendimiento técnico es prioritario para asegurar una buena experiencia usuaria.
Una buena práctica, es establecer un tamaño máximo para las images dentro del sitio web (200kb y formato).
Recomendación
Emplear formatos de imagen WebP y AVIF por su alta compresión y calidad, JPEG para fotos (por su compatibilidad) y PNG o SVG para gráficos, logotipos e íconos que requieren transparencia o escalabilidad.
Opcionales
En flujos extensos como inscripciones o postulaciones, las interrupciones pueden provocar la pérdida de datos ingresados. Implementar guardado automático progresivo asegura la información en cada etapa, reduce la frustración y refuerza la confianza del usuario en la plataforma.
Recomendación
Cuando el usuario retoma el formulario, la información previamente ingresada se mantiene, permitiéndole continuar el proceso sin pérdida de datos.
Las indicaciones del mensaje de error permiten que el usuario realice la acción correctamente sin que se repita el error.
Recomendación
Monitorear si existe una interrupción generada por el sistema, al informar a la persona usuaria de un flujo o proceso incompleto, incompatible o indeseable durante la navegación.
Semántica y arquitectura
La Web Semántica es una evolución de la World Wide Web actual, en la que la información se organiza con significados claros y definidos, lo que permite que las máquinas la interpreten y procesen de manera más eficiente, facilitando la interacción entre personas y sistemas
El contenido debe organizarse empleando etiquetas de estándar HTML5 semánticas, de manera jerárquica y organizada.
Elementos tales como cabecera, el menú , las secciones, los contenido laterales, artpítulos, etc pueden ser eiquetados de diversas formas, para permitir que el tipo de contenido sea fácil de identificar y jerarquizar.
Los buscadores y tecnologías de asistencia (como lectores de pantalla para usuarios con discapacidad visual) también pueden entender mejor el contexto y contenido de tu sitio web, lo que significa una mejor experiencia para los usuarios.
<header><nav><main><section><aside><article><footer>Recomendación
Puedes revisar mas detalles en el siguiente artículo sobre semántica web
Ejemplo de cómo la estrcutura semántica debería verse plasmada en la estructura del sitio.
Las URLs deben ser claras, cortas y descriptivas del contenido que representan, evitando parámetros innecesarios o cadenas incomprensibles.
Recomendación
Evitar: midominio.gob.cl/site/node23/65/index.html
Usar: midominio.gob.cl
Mantener una estructura jerárquica de URLs que refleje la organización del sitio
Ejemplo
midominio.gob.cl/beneficios/subsidio-electricidad
Aplicar una sola etiqueta "h1", siendo el título de todo el contenido. El resto de los subtítulos pueden enumerarse y repetirse como subtítulos ("h1" a "h6") dependiendo de su relevancia pero manteniendo su jerarquía.
Recomendación
Una sección que es titulada con "h3", no puede tener títulos "h3" o "h2" en su contenido, siempre debe ser inferior jerárquicamente.
Ejemplo
<h1>Titulo de la web o de la sección</h1>
<h2>Titular 1</h2>
<h3>Titular 1.1</h3>
<h2>Titular 2</h2>
<h3>Titular 2.1</h3>
<h4>Titular 2.1.1</h4>
<h4>Titular 2.1.2</h4>
<h4>Titular 2.1.3</h4>Los contenidos deben ser fácilmente indexables por motores de búsqueda, evitando el uso exclusivo de tecnologías que dificulten la lectura automática.
Recomendación
Implementar contenido crítico en imágenes sin descripción o en iframes sin contexto.
Todos los sitios deben declararse en el idioma correspondiente utilizando el atributo lang en HTML.
Recomendación
El atributo lang en HTML, para una página en español, sería lang="es"
<html lang="es" ">Opcionales
Se recomienda implementar datos estructurados mediante estándares como Schema.org (preferentemente en formato JSON-LD) para describir explícitamente información relevante, como la organización, artículos, eventos, beneficios o datos de contacto, y facilitar su comprensión e indexación por parte de los motores de búsqueda.
Ejemplo
Responsividad móvil
Cualidad que posee un sitio web para adaptarse a todos los dispositivos y tamaños de pantalla, sin perder calidad ni información esencial.
El sitio web debe construirse bajo principios de diseño responsivo, utilizando hojas de estilo CSS y técnicas como media queries, que permitan la correcta visualización en diversos dispositivos.
Recomendación
Planifica tu sitio en secciones y módulos que sean fáciles de agrupar, alinear o acomodar pantallas con menor espacio (tablets o celulares).
Planifica tu sitio con enfoque mobile-first; el cual consiste en desarrollar y diseñar el sitio primero para dispositivos móviles y luego trabajar la versión para escritorio.
El menú principal debe ser accesible en todo momento y adaptarse mediante menús desplegables
Recomendación
Al visualizar el sitio en una pantalla más pequeña, el menú debe ocultarse, y se debe acceder a él por medio de un botón con la iconografía del tipo "hamburguesa" (u otros equivalentes) y la palabra "Menú" a su lado.
Ejemplo
Vista escritorio, con menú desplegado
Vista mobile, con menú oculto
El sitio debe minimizar el uso de recursos pesados (imágenes grandes, scripts innecesarios) para garantizar una carga rápida en redes móviles.
Recomendación
Imágenes: Se recomiendan formatos SVG para logotipos y marcas, y formatos PNG y WEBP para fotografías u otras gráficas.
Código PHP, JS y CSS: Limpiar los archivos de código no utilizado y/o comentado.
Los contenidos deben presentarse en tamaños legibles sin necesidad de hacer zoom. Del mismo modo, los encabezados y bloques de texto deben mantener una jerarquía clara y uniforme en todos los dispositivos.
Recomendación
Definir dimensiones y peso óptimos para que la imagen se visualice correctamente en todos los tamaños de pantalla, evitando resoluciones o archivos innecesariamente grandes que afecten el rendimiento.
Las imágenes deben ser escalables y adaptarse proporcionalmente al ancho del dispositivo. Por su parte, los videos y elementos multimedia deben ajustarse mediante players responsivos, evitando el desbordamiento de la pantalla.
Opcionales
Los formularios deben estar optimizados para dispositivos móviles, utilizando campos y teclados adecuados al tipo de dato.
Recomendación
Es una buena práctica declarar por código que se active el teclado numérico en campos de teléfono o cualquier otro campo que requiera solo ingresar números.
Se recomienda el uso de técnicas como lazy loading para imágenes y recursos externos.
SEO y promoción
Recomenaciones técnicas para que tu sitio web y su contenido se posicione de manera correcta y eficiente en motores de búsqueda y toda la red de internet.
Archivos de indexación
Implementar el archivo sitemap.xml en la carpeta raíz del sitio.
El sitemap facilita a los motores de búsqueda la indexación del contenido, garantizando que todas las páginas relevantes estén correctamente reconocidas y aparezcan en los resultados de Google. Su implementación es un requisito básico de optimización técnica.
Ejemplo
Revisa el archivo sitemap.xml de la Ventanilla Única Social.
Implementar el archivo robots.txt en la carpeta raíz del sitio para orientar a los motores de búsqueda sobre qué secciones deben rastrear y cuáles no. Su correcta configuración mejora la eficiencia del rastreo, evitando que Google gaste recursos en páginas innecesarias o duplicadas.
Recomendación
Revisar el archivo robots.txt de la Ventanilla Única Social.
Permitir que Google y otros motores de búsqueda accedan a los recursos clave del sitio asegura que puedan interpretar correctamente el diseño, la estructura y las funcionalidades.
Bloquear estos elementos puede generar errores de indexación y afectar negativamente el posicionamiento.
SEO técnico
Añadir etiqueta en páginas que deben ser indexadas.
<meta name="robots" content="index, follow">Esta etiqueta indica a los motores de búsqueda qué páginas del sitio deben rastrear e indexar. Su correcta implementación asegura que el contenido estratégico aparezca en Google y contribuya al posicionamiento orgánico.
Páginas como “Gracias por contactarnos”, accesos de login o filtros de búsqueda no aportan valor en los resultados de Google.
Etiquetarlas con noindex, nofollow evita que se indexen innecesariamente, optimizando el rastreo hacia páginas relevantes y estratégicas.
<meta name="robots" content="noindex, nofollow">Aplicar una etiqueta canónica a cada enlace interno del dominio.
La etiqueta canónica orienta a Google sobre qué versión de una página debe considerarse como la principal. Esto previene problemas de contenido duplicado, optimiza la indexación y asegura que la autoridad SEO se concentre en una única URL por contenido.
Ejemplos
Para la URL: https://www.ejemplo.gob.cl
Se configura la canónica:
<link rel="canonical" href="https://www.ejemplo.gob.cl">Para la URL: https://www.ejemplo.gob.cl/contenido/page-1
Se configura la canónica:
<link rel="canonical" href="https://www.ejemplo.gob.cl/contenido">Inclusión de metaetiquetas sociales (Open Graph, Twitter Cards) para mejorar la difusión en redes sociales.
Ejemplos:
Velocidad con la que un sitio web puede procesar y responder a las solicitudes de las personas usuarias, proporcionando una experiencia de navegación ágil y eficiente.
Realizar pruebas de rendimiento en Google Page Speed, para determinar la velocidad de carga del sitio web, un factor relevante en el éxito del posicionamiento orgánico.
El ideal es que el sitio web cargue en menos de tres segundos. Para realizar una prueba de velocidad, ingresa a Pagespeed
SEO de contenidos
Optimizar metatitle y metadescription a todos los enlaces del sitio web.
Los títulos y las descripciones son la carta de presentación del sitio en los motores de búsqueda. Una correcta optimización mejora la visibilidad y atrae más clics (CTR), reforzando la relevancia del contenido para las personas y para Google.
El metatitle debe tener entre 56 y 60 caracteres. El metadescription entre 150 y 155 caracteres.
Metatítulo: Apoyo situación calle - Ventanilla Única Social
<meta name="title" content="Apoyo situación calle - Ventanilla Única Social">Metadescripción: Apoyo y acompañamiento psicosocial y sociolaboral a personas que se encuentren en situación de calle, en un contexto vulnerable de desprotección.
<meta name="description" content="Apoyo y acompañamiento psicosocial y sociolaboral a personas que se encuentren en situación de calle, en un contexto vulnerable de desprotección">Aplicar una etiqueta alternativa a cada imagen alojada en el sitio web.
Las etiquetas ALT no solo mejoran la accesibilidad al describir el contenido de la imagen, sino que también favorecen la indexación en Google Imágenes y otros buscadores. Esto amplía las oportunidades de tráfico orgánico y mejora la experiencia inclusiva.
Ejemplo
<img alt="Resultados Subsidio Eléctrico" src=".../img/subsidio_electrico.jpg">
Evitar contenido duplicado o repetido en landings internas.
La duplicidad de contenido confunde tanto a las personas como a los motores de búsqueda, lo que puede afectar negativamente el posicionamiento del sitio. Garantizar que cada página tenga contenido único fortalece la relevancia del dominio y evita penalizaciones en SEO.
Herramientas
Implementar metaetiqueta de Google Analytics en la carpeta raíz del sitio.
Una vez verificado, vincularlo con Search Console.
La integración de ambas herramientas ofrece una visión amplia del rendimiento. Analytics entrega información de las personas al usar el sitio y Search Console entrega datos de posicionamiento y tráfico orgánico.
Una vez vinculado Google Analytics, enviar la url del sitemap del sitio a Google a través de Search Console. Este paso es vital para mantener la visibilidad del sitio actualizada.
Esta herramienta permite detectar problemas de rendimiento y usabilidad en dispositivos móviles. Sin embargo, deben complementarse con otras pruebas para evaluar la experiencia real de las personas usuarias, garantizando un sitio ágil y accesible en cualquier dispositivo.
Para usar Google Lighthouse, puedes descargar e instalar la extensión para Google Chrome.