Los fundamentos del rediseño de sitios web: un estudio de caso

No es raro terminar un proyecto de rediseño de un sitio web solo para mirar hacia atrás y pensar: "Habría hecho las cosas de manera diferente si hubiera sabido lo que sé hoy".

Todos hemos estado allí. Nos emocionamos con un nuevo proyecto, bromeamos con el cliente, firmamos contratos y empezamos a maquetar prototipos. La vida se ve bien, pero los cimientos del proyecto son inestables.

Inevitablemente, las revisiones y el aumento del alcance comienzan a colarse tan pronto como se presenta el primer concepto de diseño, y todo va cuesta abajo a partir de ahí. La comunicación se desmorona, nada sale según lo planeado y, en última instancia, el sitio web recién diseñado se parece a la monstruosidad que te contrataron para arreglar.

El diseño de clase mundial y la experiencia del usuario no comienzan con una bonita maqueta: se basan en la planificación estratégica y una visión de diseño que se centra en los objetivos de la empresa. El objetivo principal no puede ser: “Hagamos un sitio web más bonito”.

Los diseñadores de sitios web son responsables de la experiencia del usuario (UX) y la interfaz de usuario (UI). Es nuestro trabajo asegurarnos de que los usuarios tengan una experiencia óptima al interactuar con las interfaces que diseñamos. Esto requiere una planificación minuciosa desde la concepción de un proyecto.

Este artículo describe un proceso confiable que ayudará a garantizar que el próximo rediseño de su sitio web se construya sobre una base sólida.

El valor de la investigación previa al proyecto de rediseño de sitios web

Para demostrar el proceso, repasemos las fases del rediseño de un sitio web completado para Archaeology Southwest, una organización sin fines de lucro que explora y protege sitios arqueológicos en el suroeste de los Estados Unidos.

Después de una investigación preliminar del campo del cliente y la competencia, inspeccione de cerca todos los activos del sitio web que están disponibles. Este análisis se factura por separado y se lleva a cabo antes de que se escriba una cotización del proyecto. Trabajar de esta manera evita estimaciones ambiguas o infladas que resultan cuando los diseñadores web intentan tener en cuenta los problemas que podrían salir a la superficie más adelante en un proyecto.

En el caso de Archaeology Southwest, me enfrenté a un sitio que necesitaba urgentemente atención: montañas y montañas de contenido desordenado dentro de un antiguo portal de CMS. Estaba mal, así que me dispuse a crear orden.

Paso 1: familiarícese con el contenido

Al remodelar una casa, es importante intentar recuperar materiales valiosos antes del día de la demolición. El mismo principio se aplica al diseño de sitios web. Debe recorrer el sitio página por página y extraer todo el contenido. Como diseñadores, debemos averiguar qué contenido merece ser un tipo de publicación único y qué páginas son estáticas.

Una vez que se logre esto, elabore una estrategia sobre cómo organizar todo, pero no decida qué contenido debe permanecer y qué contenido debe eliminarse. ¿Por qué no?

Cuando se trata de empresas y organizaciones del mundo real, hay varias personas responsables del contenido de un sitio, y la cantidad de contenido que existe puede ser asombrosa. El mejor enfoque es clasificar todo primero.

Normalmente empiezo con la navegación principal y voy página por página. De esta manera, tendré la arquitectura de la información y el mapa del sitio listos antes de la primera reunión con el cliente.

Desafortunadamente, el sitio de Archaeology Southwest no era típico. La mayoría de los enlaces no eran accesibles a través de la navegación superior y estaban ocultos dentro del contenido. Me habría llevado una desagradable sorpresa si hubiera citado el proyecto basado únicamente en la navegación.

Al hablar con varias personas del equipo del cliente, pude obtener una mejor idea del alcance del proyecto y, después de una reunión con el cliente, pude identificar el enfoque, el flujo de trabajo, el contenido y las características de su sitio web. A partir de ahí, creamos los siguientes tipos básicos de contenido (algunos nuevos, otros existentes):

Paso 2: Crear Foco. Simplificar. Organizar.

Una vez que todo el contenido está organizado en cuadros etiquetados, es hora de desarrollar el plan para una nueva estructura, una que muestre el contenido en su mejor forma. Pero primero, necesitamos crear enfoque.

Según Archaeology Southwest, las personas visitan su sitio web para buscar información sobre proyectos en curso, aprender sobre próximos eventos y leer una revista mensual. Estas actividades responden a la pregunta: " ¿Qué hace la gente en el sitio?" pero no revele por qué la gente visita el sitio en primer lugar.

El “ por qué ” es el enfoque del sitio web. Para encontrar el foco, mire al núcleo de la organización.

En este caso, identifiqué "ubicación" como el corazón de Archaeology Southwest. Sin ubicación, no habría sitios arqueológicos, ni ruinas, y ciertamente tampoco museos o exhibiciones. Todo en arqueología se relaciona con la ubicación.

Con un enfoque identificado, podemos simplificar y organizar. Para Archaeology Southwest, comencé dividiendo el contenido en categorías que no estaban relacionadas con las ubicaciones, como páginas de equipos e informes anuales. Después de ordenar un poco, terminé con este mapa aproximado:

La imagen de arriba representa las dos áreas centrales que surgieron: Cosas para hacer y Ubicaciones . Things to Do (izquierda) cubre actividades que un visitante del sitio puede aprender y hacer. Ubicaciones (derecha) se enfoca en el contenido del sitio relacionado con ubicaciones específicas. ¿Por qué estructurarlo de esta manera?

La idea es que un usuario promedio no sepa el nombre de un video o proyecto, pero probablemente sepa el nombre de una ubicación. De esta manera, los visitantes pueden encontrar contenido relacionado con la ubicación.

Además, cada bloque de color en Ubicaciones representa un tipo de publicación único. Desde una perspectiva organizativa, las exhibiciones, las clases y las exhibiciones en línea son eventos de naturaleza diferente.

En el antiguo sitio de Archaeology Southwest, había páginas estáticas separadas para una revista y una tienda en línea donde los visitantes podían comprar la revista. Para simplificar las compras, integré una opción de compra dentro de la plantilla de la revista.

La estructura organizativa restante era sencilla:

• Una página "Acerca de" para obtener más información sobre la organización.
• Un enlace directo a la página "Tienda"
• Una página de "Donación"
• Una nueva página de "Actualizaciones"

Las páginas de tiendas y donaciones son generadoras de dinero, por lo que era esencial que se incluyeran en la navegación principal.

Una vez que se completa el plan organizativo, es hora de conectar el contenido real.

Paso 3: Involucrar al cliente

El mapa del sitio incluye tipos de página, pero no incluye el mapeo de contenido. Los diseñadores web experimentados saben que la mayoría de los problemas ocurren cuando un cliente comienza a agregar contenido a su sitio. Para evitar este problema, mantenga al cliente conectado desde el principio.

Para Archaeology Southwest, creé un documento de Google que incluía el mapa del sitio y le pedí al cliente que mapeara su contenido antiguo con la nueva estructura.

Si algo no encajaba del todo, lo abordamos más tarde. Este es un paso crítico. ¿Por qué? Además de involucrar al cliente en el proceso, descubre problemas con la estructura antes de que comience la implementación.

En este caso, se cambiaron algunos de los elementos del menú del mapa del sitio y, dado que el cliente tenía varias páginas de donación, tenía sentido crear un tipo de publicación único solo para eso.

Cree una estructura visual a través de wireframing

En este paso, empiezo a darle a la obra una estructura visual. Para que el sistema funcione bien e integre con éxito la noción de que "todo está relacionado con la ubicación", creé una relación bidireccional entre los tipos de publicaciones.

Esta es la idea básica: cuando los visitantes ingresan al sitio web de Archaeology Southwest y seleccionan el Gran Cañón, verán información sobre esa ubicación, pero también encontrarán información relacionada con proyectos, eventos, exhibiciones y todo lo demás que los administradores del sitio marcan como ubicación. específico.

Dado que el enlace es bidireccional, los visitantes también pueden llegar al Gran Cañón visitando una página del proyecto. Al final terminé con esto:

La página de índice de ubicaciones muestra todas las ubicaciones con la más reciente en la parte superior. La barra de búsqueda es lo primero que ve el usuario al llegar a la página. El mapa de Google ocupará alrededor del 80 por ciento de la pantalla. Esto permite a los usuarios elegir puntos en el mapa y, a medida que se desplazan o buscan, aparecerá la cuadrícula de la lista.

En una página de ubicación única, el cuerpo principal está a la izquierda, ya que es la información más importante. La metainformación relacionada es secundaria, por lo que está a la derecha. Para lograr un diseño bien equilibrado, es crucial tener una jerarquía distinta entre los bloques de elementos primero, segundo y tercero. Esto permite que el ojo se mueva sin esfuerzo entre las secciones.

En el diseño de Archaeology Southwest, el ojo del usuario comienza con el encabezado, luego se mueve al bloque de contenido y finalmente sigue a la barra lateral derecha. Cada pieza de contenido relacionado se muestra en orden de relevancia. Por ejemplo, si el usuario está leyendo sobre el Gran Cañón, este contenido probablemente irá seguido de fotos y un mapa.

Dado que este es principalmente un sitio educativo, es importante tener una opción "Relacionado con esta ubicación". Sin embargo, no hay mucho contenido que se asocie de forma única con cada ubicación, por lo que combiné contenido rara vez usado (pero relacionado) en un solo bloque debajo del cuerpo.

Colocar miniaturas de revistas y videos debajo del contenido relacionado agrega elementos visuales adicionales y dirige a los usuarios a la página "Comprar". La página se completa mostrando ubicaciones relacionadas. Esta es una excelente manera de atraer a los usuarios para que exploren más el sitio. El siguiente paso es continuar con esta estructura para otros tipos de publicaciones.

Proporcione la página de inicio con un objetivo claro

Con un modelo general para los tipos de publicaciones, puedo concentrarme en la página de inicio. El primer paso es definir el objetivo de la página de inicio: esta es una parte importante del diseño de la interfaz de usuario. La investigación del cliente mostró que muchos usuarios tropiezan con el sitio sin entender completamente qué es. Por lo tanto, una introducción y un texto de bienvenida deben ser lo primero que vean los usuarios.

El nuevo enfoque central gira en torno al bloque secundario de ubicaciones. Esto es seguido por todo lo que sucede en archaeologysouthwest.org (la revista actual, blog, eventos, boletín informativo, etc.). Aquí está la iteración del proceso de diseño:

Con V1 (izquierda), diseñé un diseño básico que se parece a la página de inicio original. No hay mucha jerarquía. Lo primero que ven los usuarios es la ubicación destacada, pero a partir de ahí, es probable que se pierdan en las columnas.

Para V2 (centro), creé una columna separada que es más fácil de seguir para el ojo. Sin embargo, todavía se puede mejorar. Aquí es donde el conocimiento del contenido juega un papel importante. Sé que Archaeology Southwest nunca tiene más de dos eventos a la vez, por lo que no tiene sentido tener espacio para varios eventos en la página de inicio.

En V3 (derecha), me concentré en los próximos eventos. Si, por alguna razón, hay más de dos eventos, el usuario puede hacer clic en el botón "Más" y ver el resto. También puse énfasis adicional en la revista actual, ya que es la fuente de ingresos del cliente. Los usuarios comienzan en la parte superior y avanzan hacia abajo en un patrón F. El flujo ocular es:

Ubicación Destacada > Bienvenida > Revista > Eventos > Noticias

Con un wireframe visual y la estructura del sitio en su lugar, es mucho más fácil solidificar las funciones y cómo funcionarán las cosas. En este punto, tengo otra reunión con el cliente para repasar la funcionalidad y el flujo de la interacción del usuario, los cuales están mucho más claros en esta etapa.

¿Seguirá habiendo revisiones más adelante en el camino? Sí, pero serán ajustes, no cambios en todo el proceso. Lo más importante, no habrá sorpresas.

Incorporar la Guía de Estilo de Marca

Ahora viene la parte emocionante: convertir los wireframes en algo que la gente usará y experimentará. Para este proyecto, mi objetivo era hacer que el contenido escrito fuera fácil de digerir mediante la implementación de colores y tipografías de marca.

Experimenta con combinaciones tipográficas

La tipografía es integral para un buen diseño web, por lo que debemos descubrir nuestro esquema tipográfico temprano. La mayor parte de la identidad de Archaeology Southwest utiliza la fuente Univers Condensed Light y Adobe Caslon. No había reglas sobre cuándo se usaría Adobe Caslon, pero me di cuenta de que no se usaba con tanta frecuencia como Univers.

Realicé un pequeño estudio de fuentes para ver qué combinaciones crean la mejor sensación para una organización profesional sin fines de lucro. Sin embargo, tampoco quería que mi esquema tipográfico se viera muy diferente del material de marketing del cliente.

Después de hacer comparaciones de fuentes, quedó claro que Adobe Caslon debería ser la fuente del título y Univers se usaría para los subtítulos. Establecer los títulos principales en mayúsculas le da a la marca una sensación más personal, mientras que todo en mayúsculas crea un ambiente más corporativo.

Pulir la apariencia del sitio web

Me propuse crear una experiencia liviana y abierta para que los usuarios sintieran que Archaeology Southwest es accesible y altamente competente. Según los datos analíticos, la mayoría de los visitantes usan navegadores de escritorio (probablemente porque la mayoría de las personas visitan el sitio para investigar). Por lo tanto, mi enfoque inicial fue diseñar para usuarios de escritorio.

Cuando venía de computadoras de escritorio, quería que los visitantes vieran inmediatamente la ubicación destacada, el texto de bienvenida y los próximos eventos seguidos de parte del título de la revista. De esta manera, las personas primero ven de qué se trata la empresa y qué están promocionando.

En los dispositivos móviles, las prioridades son un poco diferentes. Dado que los usuarios acceden a la información sobre la marcha, los eventos son más importantes, por lo que se colocan más arriba en la lista.

También actualicé el botón de donación en el pie de página para que sea más amigable cambiándolo de un botón a una oración.

Terminar con fuerza: cuidar los detalles

Hay dos razones por las que los usuarios acceden a la página de detalles: quieren obtener más información sobre un punto de referencia o ya conocen una ubicación y buscan información adicional (direcciones, números de teléfono, etc.). Por lo tanto, es importante presentar ambas opciones de inmediato para que los usuarios no tengan que buscar.

Decidí separar la columna de detalles del área de contenido para darle más peso y hacer la página más interesante. Esto ayuda a crear una jerarquía de composición, por lo que cuando un visitante llega a la página, primero verá el título de la página seguido de una pequeña galería de imágenes y luego la columna de detalles.

Este tipo de diseño garantiza que los usuarios noten los detalles adicionales de una ubicación de inmediato. Un poco de relleno adicional alrededor de la columna mantiene los ojos enfocados y facilita el escaneo de la información.

La vista móvil colapsa como era de esperar. El contenido se borra primero y sigue la metainformación. Coloqué videos y revistas en último lugar en la página móvil, ya que son menos importantes para los usuarios de dispositivos móviles. Otras páginas siguen la misma estructura para crear un flujo y una experiencia consistentes.

El rediseño web se basa en una base de planificación cuidadosa

Mirando hacia atrás en el proceso de rediseño del sitio web, es evidente que la mayor parte del tiempo se dedicó a la organización y planificación. Solo el 30 por ciento del proyecto se dedicó al diseño del sitio.

A menudo, cuando los diseñadores muestran su trabajo, no logran transmitir cuánto tiempo se dedica a los aspectos prácticos de la comunicación, lo que lleva a los diseñadores sin experiencia a saltar directamente a las maquetas. ¿El resultado? Proyectos descarrilados y clientes insatisfechos.

Se debe realizar una planificación detallada para que el rediseño de un sitio web tenga éxito. Tomarse el tiempo para realizar una investigación previa al proyecto, familiarizarse con el contenido existente e involucrar al cliente son pasos cruciales.

En última instancia, no hay forma de evitarlo; el camino hacia sorprendentes rediseños de sitios web y confianza profesional está allanado por un enfoque metódico para la organización de proyectos.