5 pasos para planificar un sitio web exitoso

El reloj marca la 1:30 am y solo quiere irse a la cama. Estás trabajando desde casa , sentado en su computadora, dibujando formas, editando filtros y experimentando con la tipografía, pero el diseño simplemente no funciona. Mueves un cuadro a la derecha. Lo mueve hacia atrás. Has construido una carrera en la creación de sitios web hermosos y fáciles de usar, entonces, ¿por qué el diseño siempre es una lucha?

Es un problema con el que la mayoría, si no todos, nos hemos enfrentado muchas veces en nuestras carreras. Lo llamamos bloqueo creativo. Y ahí radica el problema. Porque crear sitios web que las personas encuentren fáciles de usar, sitios web que animen a las personas a realizar conversiones, no se trata de creatividad. Se trata de planificar. Y la investigación. Y poner al usuario final por delante del diseño.

Fui diseñador web y desarrollador frontend durante varios años antes de comenzar a comprender realmente la importancia del proceso. He observado a diseñadores web, ya sean autónomos, trabajando para una gran agencia o en algún punto intermedio, seguir la misma secuencia general de eventos una y otra vez. Tienen una especie de reunión inicial y luego regresan a sus computadoras y trabajan en los diseños del sitio.



A pesar de la popularidad de este enfoque, nunca funciona realmente. Incluso si logra crear algo visualmente atractivo, existe una garantía del 100% de que está perdiendo oportunidades para conectarse y convertir usuarios. Al implementar procesos reales a partir de los cuales informar decisiones mientras trabaja en un sitio web, puede crear productos superiores, mejorar la experiencia del usuario y aumentar las conversiones. La próxima vez que se golpee la cabeza contra la pared en un esfuerzo por convocar un hermoso diseño web de su mente de genio creativo, intente seguir los cinco pasos cruciales descritos aquí.

01. Mapa del sitio y flujo de usuarios

La famosa opinión de Steve Jobs sobre la definición de diseño

La famosa opinión de Steve Jobs sobre la definición de diseño

Tuviste tu reunión inicial. Ha realizado una investigación de la industria, ha realizado un análisis de la competencia y ha desarrollado perfiles de usuario. Está listo para comenzar, pero hay dos preguntas importantes que siempre debe hacer a los clientes primero.

Primero, pídales que identifiquen sus principales prioridades de una a tres para el sitio web. Esto le da una buena idea de lo que es importante para ellos. Requiere que comiencen a pensar en términos de prioridades, lo que ayuda a desarrollar y mantener el enfoque. También abre la puerta a la discusión sobre lo que significan esas prioridades y si tiene sentido ajustarlas.

Lo segundo que debe preguntar es lo siguiente: ¿Cómo le parece un sitio web exitoso? Esta pregunta es de enorme importancia a medida que comienza a planificar el flujo de usuarios y los objetivos de conversión. Una vez que tenga esa información, puede comenzar a crear un plan para el sitio web: el mapa del sitio.

Un plan para el sitio web

Un mapa del sitio es la primera visualización del contenido que se incluirá en un sitio web y cómo se organizará. Es el primer paso hacia un producto centrado en el contenido y centrado en el usuario. Hay dos perspectivas para examinar. Primero, observe los objetivos de la empresa para la que trabaja. ¿Qué es lo que están tratando de lograr? A continuación, determine lo que buscan sus clientes. Es la unión de estas dos perspectivas lo que finalmente significará el éxito.

Empiece a pensar en los tipos de información que deben estar presentes para adaptarse a los objetivos del usuario final y de la empresa. Ponga los objetivos del usuario en primer lugar: nunca está de más recordarles a las empresas que lo que es mejor para sus usuarios también es lo mejor para su negocio.

Por ejemplo, si la Compañía ABC ha inventado una nueva tecnología, tiene más sentido priorizar la información sobre el problema del usuario que la tecnología resuelve que liderar con la declaración de misión e historia de la Compañía ABC. Probablemente también desee incluir información de contacto y un blog específico de la industria como recurso para los usuarios. De repente, tienes los inicios de un mapa del sitio.

Navegando por la información

A medida que comience a responder preguntas sobre la jerarquía general de la información en el sitio web, también comenzará a anticipar cómo los usuarios podrían navegar a través de esa información. Este es su flujo de usuarios.

Al crear un flujo de usuarios teórico al comienzo de un proyecto, puede comenzar a ver cómo interactúan las secciones de información para crear la experiencia de usuario ideal. ¿Quiénes son sus usuarios? ¿Tiene sentido la jerarquía de información para varios casos de uso? ¿Los usuarios, naturalmente, podrán moverse por el sitio web para encontrar contenido que sea relevante para ellos?

En la parte superior de una página en blanco, identifique las personas de sus usuarios. Debajo de cada uno, comience a pensar en cómo podrían moverse por el sitio. Considere lo que podrían estar buscando y cómo una sección de información podría llevarlos a través del sitio al siguiente.

02. El embudo de adquisición de clientes

Userflow patterns.com es una colección de videos cortos de flujo de usuarios para referencia e inspiración

Userflow patterns.com es una colección de videos cortos de flujo de usuarios para referencia e inspiración

En este punto, ya ha comenzado a teorizar sobre el viaje que realizará un usuario a través del sitio web y probablemente haya comenzado a pensar en cómo eso lo llevará a realizar una conversión. Este es su embudo de adquisición de clientes.

Con el diagrama de flujo de usuarios que creó en el paso uno, considere cómo podría dirigir a los usuarios a través del sitio a un punto de conversión. Para crear un embudo de adquisición de clientes, póngase en el lugar del usuario. Utilice personas específicas en lugar de una audiencia amplia y oriente su embudo a una persona en particular. Cuales son sus metas? ¿Cómo puede ayudarlos a lograr esos objetivos?

Imagina que estamos creando un sitio web para una zapatería. Si un usuario llega a nuestro sitio web con el objetivo de comprar un par de zapatos, nuestro objetivo es facilitarle al máximo la tarea. Una tienda de zapatos en línea debe canalizar a los usuarios de manera rápida y eficiente a través del proceso de compra hasta el pago.

Cree un plan para atraer a los usuarios con contenido relevante, pídales que conviertan con un llamado a la acción convincente, facilite el proceso de conversión y haga un seguimiento con regularidad. Cree un enfoque para ayudar a guiar al usuario. El desarrollo del embudo de adquisición de clientes es lo que hace que un sitio web sea una herramienta comercial en lugar de una imagen bonita. El diseño que no genera resultados no es un buen diseño.

03. Desarrollo de contenido

Las cinco fases del viaje de un usuario hacia la conversión

Las cinco fases del viaje de un usuario hacia la conversión

El contenido es el corazón del sitio web. Así es como te conectas con la gente. Así es como vendes. Es en lo que basas el diseño. Diseñar un sitio sin contenido es como intentar armar un rompecabezas sin piezas de rompecabezas; solo está agarrando elementos aleatorios cercanos (un tenedor, una bombilla, tal vez una taza de café) y tratando de que encajen.

Comprenda que el diseño es la parte divertida para el cliente. El contenido es la parte difícil. En gran parte debido a esto, también es la cosa número uno que puede retrasar un proyecto. Estas son las razones por las que se debe desarrollar una versión completa del contenido del sitio web antes de que comiencen los diseños.

Entonces, ¿cómo generamos contenido? La manera perfecta de comenzar es echar un vistazo a su mapa del sitio. Aquí es donde ha identificado los tipos de contenido que desea presentar a los usuarios. Utilice las páginas o secciones que describió aquí para crear un documento de copia en blanco. Para cada sección, incluya el título de la página, el objetivo del contenido, las palabras clave que le gustaría apuntar, los titulares y el texto del cuerpo. Incluya los tipos de contenido que anticipa vivir allí y cómo espera que se divida para facilitar la lectura y la digestión mental.

las mejores laptops económicas para diseño gráfico

Tenga en cuenta que el nivel de lectura ideal para el contenido del sitio web es bastante bajo. El contenido de la página de inicio no debe exceder el nivel de lectura de sexto grado (alrededor de los 11-12 años), y el contenido de la subpágina debe rondar el nivel de octavo grado (13-14 años). Las palabras de un millón de dólares no ganan puntos aquí, pierden usuarios. Puede probar su copia con la fórmula de legibilidad de Flesch-Kincaid para asegurarse de que será fácil de comprender para los usuarios rápidamente.

Simplifica y optimiza

Otra excelente manera de hacer que su copia sea más fácil de leer es con contenido de fácil digestión. Usar párrafos más pequeños e incluir íconos e imágenes para dividir su contenido hace que su sitio web sea infinitamente más legible. En lugar de presentar grandes volúmenes de texto que requieran un compromiso de atención que no es probable que obtengas de los usuarios, simplifica el contenido y haz que sea fácil de leer.

cómo hacer una forma de lágrima en ilustrador

Una vez que haya terminado de escribir, revise y recorte cada palabra o frase no esencial para una claridad óptima. Una vez que haya completado este proceso, vuelva atrás y hágalo de nuevo; hay más que puede eliminar. El brillante Antoine de Saint Exupéry, autor de El Principito (un libro para niños que todo el mundo debería leer) dijo: 'Parece que la perfección no se alcanza cuando no hay nada más que añadir, sino cuando no hay nada más que quitar'.

El último y más importante consejo para crear contenido en un sitio web es este: si no es un redactor, contrate uno. Es lo que hacen todos los días. Pueden hacerlo mejor y más rápido que tú. Pueden crear una copia optimizada para los motores de búsqueda, atractiva y gramaticalmente correcta.

04. Wireframes

Una plantilla simple para un documento de contenido. Es una manera fácil de comenzar a desarrollar contenido basado en su mapa del sitio.

Una plantilla simple para un documento de contenido. Es una manera fácil de comenzar a desarrollar contenido basado en su mapa del sitio.

Ahora que el contenido está completo, es hora de empezar a pensar en el diseño. Donde el mapa del sitio es un plan para la arquitectura general del sitio que informa el contenido; los wireframes representan la arquitectura de ese contenido.

Una estructura alámbrica no debe incluir ningún color, elección de fuente o elementos de diseño. Es una herramienta para organizar el contenido desde un punto de vista estructural, para garantizar que se presente de una manera que tenga sentido para el usuario. Los wireframes ya no se tratan de representaciones perfectas en píxeles de diseños de página. Se trata de adoptar un enfoque más detallado del plan que ha estado elaborando hasta este momento. En este paso, está descubriendo cómo se debe organizar la información y solidificando la jerarquía desde un punto de vista visual.

¿En qué orden se debe presentar el contenido? ¿Cómo se presentará la jerarquía en el móvil? ¿Escritorio? ¿Intermedio o superior? El diseño web receptivo ha requerido que los wireframes, junto con todos los demás pasos de nuestro proceso, se vuelvan menos concretos y un poco más flexibles.

Creando jerarquía

La forma de generar sus wireframes depende totalmente de usted. Hay una gran cantidad de herramientas de creación de prototipos y wireframing, pero un simple lápiz y papel pueden funcionar igual de bien. El objetivo del wireframing es utilizar las decisiones que hemos tomado en los pasos anteriores para establecer un orden para la presentación del contenido.

Si observa el contenido que ya ha creado, debería ser un proceso intuitivo. ¿Existe una jerarquía clara inherente a su contenido? Mire titulares, párrafos, leyendas y barras laterales. Haga un balance de qué tipo de información debería aparecer y dónde debería estar el foco. Pregunte: ¿Cuál es el punto principal de esta información?

Es fácil omitir el wireframing. A menudo, no significan mucho para el cliente y pueden parecer un esfuerzo superfluo, especialmente después de completar todos los pasos con tanta diligencia. ¿No puedes lograr el objetivo de la estructura alámbrica mientras creas los elementos de diseño? En resumen, no. Los wireframes son el puente entre el contenido y el diseño. Son tan importantes para el éxito general de un sitio web como cada uno de los pasos del proceso.

05. Diseño

Los diseños deben optimizarse para mostrar el contenido con la mayor claridad posible en todos los dispositivos.

Los diseños deben optimizarse para mostrar el contenido con la mayor claridad posible en todos los dispositivos.

Ahora viene la parte divertida. La parte para la que ha estado trabajando y su cliente ha estado esperando. Y estás listo. Está entrando en la fase de diseño armado con un plan de ataque que se basa en decisiones informadas, no solo en preferencias estéticas. Sabes dónde deben colocarse los elementos para obtener el máximo efecto. ¡Ahora está preparado para diseñar una máquina de conversión!

Pero, ¿cómo está diseñando para la web receptiva? Cada diseñador tiene un flujo de trabajo diferente y debes encontrar lo que más te convenga. Aún así, existen algunas metodologías y herramientas que son efectivas y fáciles de adoptar en todos los ámbitos.

Metodologías receptivas

Si su sitio web funcionará en dispositivos móviles, debe diseñar dispositivos móviles primero. Esto simplemente significa comenzar con un diseño móvil y construir desde allí. Es mucho más fácil hacer esto que intentar apilar elementos en una pantalla que es una fracción del tamaño de aquella para la que fueron diseñados.

También debería utilizar una biblioteca de patrones. Esta es una colección de patrones de diseño que aparecen en su interfaz. Puede moverse hacia adelante y hacia atrás entre su biblioteca y diseños; cuando agrega un nuevo elemento a su diseño, lo agrega a su biblioteca de patrones y viceversa. Con este enfoque, independientemente de las variables, un botón es un botón; tanto en código como en su apariencia.

Esto establecerá una consistencia en los detalles que marcará una diferencia notable en el nivel percibido de profesionalismo de la empresa. La coherencia genera confianza y mejora la usabilidad. También hay un beneficio de eficiencia, porque podemos ajustar elementos y actualizar estilos fácilmente.

Plan de acción

La biblioteca de patrones de MailChimp se puede ver en línea en ux.mailchimp.com/patterns

La biblioteca de patrones de MailChimp se puede ver en línea en ux.mailchimp.com/patterns

Al seguir esta guía, llegará un paso tras otro con un plan de acción completamente formado. Cada paso está informado por los pasos anteriores. Todo el proceso se centra en entregar el contenido más útil y relevante de la mejor manera posible.

Es posible que necesite volver a visitar partes de su plan durante el proceso o después del lanzamiento del sitio. Dwight D. Eisenhower dijo: 'Al prepararme para la batalla, siempre encontré que los planes son inútiles, pero la planificación es indispensable'. Es este sentimiento exactamente el que resume la importancia del proceso: está planificando un resultado exitoso. No estás adivinando. Ha establecido una base sobre la cual puede crear un sitio web que funcione.

Este artículo fue publicado originalmente en revista net número 286. Cómpralo aquí.

Artículos relacionados: