Rediseño Web - Página Municipalidad de la Calera

De Casiopea



TítuloRe-diseño página web de la Municipalidad de la Calera
Tipo de ProyectoProyecto de Curso
Palabras Clavediseño web diseño codigo
Período2018-2018
CarrerasDiseño
Alumno(s)Tomás Vergara, Constanza Maldonado, Felipe Arancibia, Silvana Sarrocchi


Introducción

Este proyecto consiste en el rediseño de la página web oficial de la municipalidad de la Calera, implementando mejoras en el sitio. Para lograr esto,fue necesario analizar el sitio, donde se tomó como caso de estudio 4 páginas; Inicio, eventos, trámites y ordenanzas. Cada página fue analizada según los criterios de accesibilidad y optimización para buscadores, como también criterios del diseño gráfico respecto a la legibilidad, visualización de los contenidos, proporciones de la página, tamaños de letra, entre otros.

Análisis del sitio

Accesibilidad

Como se mencionaba anteriormente, utilizando los cuatro parámetros de accesibilidad, tales como perceptible, operable, comprensible y robusto, se realizó un estudio de cada página. Los problemas de accesibilidad captados son transversales en cada página.

  1. Perceptible: Según este criterio, los componentes de la interfaz de usuario y la navegación deben ser operables.

    1. Accesible por el teclado: El sitio si permite acceder a las funciones desde el teclado
    2. Convulsiones: No tiene animaciones sobrecargadas o dañinas para usuarios.
    3. Navegable: Posee un menú de navegación, es posible regresar a la página principal en cualquier momento. Sin embargo hay secciones que se encuentran obsoletas o sin contenido

  2. Comprensible: La información y el manejo de la interfaz de usuario deben ser comprensibles.

    1. Legible:En general el texto tiene buen contraste, salvo por el texto en imágenes, donde el tamaño es un inconveniente, se recomienda aumentar el tamaño de los textos para poder mejorar el contraste
    2. Predecible: El sitio es predecible ya que sus páginas operan bajo una misma ley.
    3. Entrada de datos asistida:No tiene un método de corrección, de modo que los usuarios puedan re-direccionar al sitio correcto.

  3. Robusto: En el caso del celular, es directamente accesible y visualizable, pero en un sistema directo como es el caso de un computador, la visualización entra en caos, cuesta ubicarse y entender el sitio ya que hay quiebres en los menús. Se recomienda mejorar la responsividad del Sitio, añadiendo un punto de quiebre intermedio entre la version escritorio y la version para móviles.

SEO

El SEO es una disciplina que permite cumplir con los requisitos de los buscadores para mostrar resultado de búsquedas relevantes a sus usuarios. Si bien existen al menos 200 criterios, se han escogido 5 considerados importantes.


  1. Palabras Clave: Para el caso de este sitio, si se utilzan palabras claves como "la calera", "calera municipalidad" o directamente "municipalidad de la calera" El sitio se posiciona de forma orgánica en el primer lugar en la lista de google.

  2. Encontrabilidad de Imágenes: Uno de los principales problemas del sitio (y el más recurrente) es el hecho de que las imágenes no poseen un texto alternativo, por lo que el buscador no las puede catalogar como un posible resultado en el caso de que el usuario esté buscando imágenes respecto del tema. Se recomienda incluir un texto alternativo para las imágenes.

  3. Tiempo de Carga: Otro gran problema es el tiempo de carga, (alrededor de 30 segundos según el test realizado en GTMetrix), lo cual se debe principalmente a la gran cantidad de imágenes no optimizadas y al sobre redireccionamiento. La principal mejora que se puede realizar en este punto es la optimización de imágenes, reducir su peso/tamaño para poder agilizar el tiempo de carga.

  4. URL de sub-menús: Salvo la página principal, todas las demas URL del sitio, terminan en "page_id + número" ej: lo que podría ser http://lacalera.cl/alcaldesa se muestra como http://lacalera.cl/?page_id=305. Para mejorar la encontrablilidad del sitio se aconseja corregir este aspecto, y que el usuario pueda ver una URL más elocuente con el sitio que en el que se encuentra.

  5. Metadatos:El sitio no presenta problemas en cuanto a estructura de datos según el Test de Google.

Críticas al diseño web

I. Estructura y diagramación

La página en primera instancia, presenta demasiada información visual, la cual obstruye la mirada sin favorecer a la comprensión del recorrido de las secciones, ni menos, hallar lo que se está buscando. En otras palabras, la página es poco intuitiva para el usuario.

  • Márgenes y el sidebar

El sitio en su página de inicio contiene márgenes laterales regulares, sin embargo, en las otras secciones revisadas como alcaldesa, trámites y ordenanzas, esto a menudo que se hace scroll y se dirige a la sección inferior, los márgenes se tornan irregulares; el margen izquierdo se transforma en un gran vacío sin texto y por el margen derecho se mantiene igual. Esto es debido a la presencia del sidebar, que proporciona información diversa e innecesaria, además de ser muy extenso hasta el footer.

  • El sidebar

Este elemento que contiene muchos sub-elementos de imágenes y links de descarga genera una obstrucción visual, que en vez de ayudar al usuario en encontrar su objetivo lo confunde aún más.

  • Colores de los elementos

El color de los elementos horizontales (a excepción del menú y el footer) consiste en un rojo vivo #F91D04, que genera ruido a la vista por su saturación del color.

  • Tipografía del cuerpo de texto

La tipografía del cuerpo de texto se aprecia regularmente pequeña, lo cual para el adulto mayor y una persona con discapacidad visual es no resulta muy legible.

Re-diseño de las páginas

Inicio

Eventos

Trámites

Ordenanzas