Rediseño de sitio web

Evaluación Heuristica

En este proyecto rediseñe un sitio web de abogados usando figma para el rediseño, WordPress y Elementor.
 Como diseñador UX, mi enfoque se centra en la mejora continua, elevando la usabilidad y la estética para proporcionar a los usuarios una experiencia más intuitiva y satisfactoria. Acompáñame en este viaje de transformación, donde cada elemento y detalle se reimagina con el objetivo de ofrecer un sitio web que no solo impresiona visualmente, sino que también maximiza la eficiencia y la conexión con los usuarios. ¡Prepárate para descubrir un nuevo nivel de excelencia en el diseño web!
 
 
La evaluación heurística es un método de evaluación de usabilidad que implica evaluar un sitio web según principios heurísticos o pautas predefinidas.
Los principios heurísticos en el diseño de experiencia de usuario (UX) son pautas generales que los diseñadores y evaluadores utilizan para evaluar la usabilidad de una interfaz.
 
Familiarización con el Sitio Web
 
 Evaluación Heurística
En este ejemplo, se evaluaría si el estilo de los botones es consistente en todo el sitio, según el principio de “Consistencia”.
 
Recuerda que la evaluación heurística es subjetiva y los resultados pueden variar según los evaluadores. Es una buena práctica combinarla con pruebas de usuario para obtener una comprensión más completa de la usabilidad del sitio web.
 
Los principios heurísticos en el diseño de experiencia de usuario (UX) son pautas generales que los diseñadores y evaluadores utilizan para evaluar la usabilidad de una interfaz. A continuación, se presentan algunos principios heurísticos comúnmente utilizados:
 
Visibilidad del Estado del Sistema: SI
   – Proporciona retroalimentación clara sobre lo que está sucediendo en el sistema en todo momento.
   – Informa a los usuarios sobre el estado actual y cualquier cambio en la interfaz.
 
Coincidencia entre el Sistema y el Mundo Real: SI
   – Utiliza términos y conceptos familiares para los usuarios.
   – Alinea la interfaz con la forma en que los usuarios piensan y hablan sobre la tarea que están realizando.
 
Control y Libertad del Usuario: SI 
   – Permite a los usuarios deshacer acciones y salir de situaciones no deseadas.
   – Brinda opciones claras para que los usuarios tengan control sobre su experiencia.SI
 
 
 
Consistencia y Estándares: NO
   – Mantiene una apariencia y comportamiento coherentes en todo el sistema.
   – Sigue estándares y convenciones de la industria para que los usuarios puedan anticipar cómo funcionará la interfaz.
Es coherente con algunos estandares para que que los usuarios puedan anticipar como como funciona la interfaz pero no hay una coherencia en la apariencia general del sitio.
 
Prevención de Errores: NO
   – Diseña interfaces que eviten que los usuarios cometan errores. SI
   – Proporciona confirmaciones y alertas antes de realizar acciones irreversibles. NO
 
Reconocimiento: SI
   – Minimiza la carga cognitiva al mostrar opciones y funciones de manera visible, en lugar de requerir que los usuarios recuerden información.
 
Flexibilidad y Eficiencia de Uso: NO
   – Ofrece atajos y opciones para usuarios experimentados que deseen acelerar sus acciones.SI
   – Permite a los usuarios personalizar su experiencia según sus preferencias.NO
 
Diseño Estético y Minimalista: NO
   – Mantiene una interfaz limpia y simple, eliminando elementos innecesarios o distracciones.NO
   – Utiliza diseño visual para facilitar la comprensión y la navegación.NO
 
Ayuda y Documentación: SI
   – Proporciona información de ayuda y documentación cuando sea necesario.NO
   – Diseña interfaces de manera que la mayoría de los usuarios puedan comprender y utilizar el sistema sin consultar la documentación.SI
 
Reconocimiento, Diagnóstico y Recuperación de Errores: NO
    – Facilita a los usuarios la identificación de errores cuando ocurran.NO
    – Proporciona mensajes de error claros y soluciones para corregir problemas.NO

Accesibilidad

 
Pautas de diseño web accesible
 
El diseño debe ser:
1. Perceptible
2. Operable
3. Comprensible
4. Robusto
 
 
Perceptible: 
La información y los componentes de la interfaz se deben presentan en una forma que todas las personas puedan percibir.
El sitio no tenia imagenes, por lo tanto no era necesario colocar texto alternativo.
 
Las secciones se encontraban bien delimitadas.
Diseño operable:
 
Comprensible
Las palabras y textos que se utilizan en la interfaz  reflejan las acciones, poder identificarse y leerse fácilmente, para garantizar una buena experiencia de usuario.
La apariencia y la forma de utilizar las interfaces digitales son predecibles.
 
 La entrada de datos es asistida en el formulario de contacto se encuentran los campos descriptos correctamente.
 
Tanto el diseño como el contenido debe ser robusto. Lo suficientemente firme y consistente para ser bien interpretado.
 
 
 
 
 
 

Rediseño

 
Luego de haber realizado la evaluación heuristica del sitio y de accesibilidad comencé con el rediseño del sitio.
Primero definí una nueva paleta de colores para el sitio, una tipografía y un tamaño adecuado para la lectura accesible.
Teniendo en cuenta que el sitio web es de abogados y que se especializan en medicina prepaga el grupo etario objetivo del sitio es un rango etario de 45 años en adelante, por lo que tuve en cuenta esto al momento de rediseñar. 

Paleta de colores

Elegí colores sobrios y delicados para el sitio, ya que se trata de un estudio jurídico. Tratando de reducir el contraste para generar una armonía de color.

Color Palette

Tipografia

Para la tipografia elegi fuentes clasicas san serif como son Monteserrat y Inter.

El tamaño y el color de la tipografia se elegio pensando en la facil lectura para el usuario.

Tipografia

BOTONES

Hice botones con un tamaño grande pero mas equilibrado respecto al contenido general del sitio. 
Realice un botón con dos diseños cuando esta sin seleccionar y cuando se pasa el cursor.

Grillas

Elegí un diseño responsive con una grilla de 8px. Margenes de 16px.
En su versión de escritorio diseñe dos columnas principales, en su versión móvil se trabaja en una sola columna donde toda la estructura se adapta al dispositivo.
grillas

Rediseño

En el rediseño se genero un menú superior y se añadieron imágenes al sitio con su correspondientes atributos.



REDISEÑO1

¿Queres trabajar conmigo?