El diseño web es un tema complejo. Los diseñadores y desarrolladores tienen que tener en cuenta tanto el aspecto visual (cómo se ve la página web) como el diseño funcional (cómo funciona la página web). Con tantas cosas que hay que tener en cuenta, el proceso de diseño puede ser complicado. Para simplificar la tarea, hemos preparado esta guía.

En esta guía, nos centraremos en los principales principios, heurísticos y enfoques que le ayudarán a crear una gran experiencia de usuario para su sitio web. Empezaremos con cosas globales, como los flujos de usuarios (cómo definir la estructura del sitio web), y luego trabajaremos hasta la página individual (qué considerar durante el diseño de la página web). También cubriremos otros aspectos esenciales del diseño, como las consideraciones móviles y las pruebas.

Diseñar los flujos de usuarios

Lo primero que hay que tener en cuenta es el flujo de usuarios, es decir, el camino por el que el visitante navegará por la página web. Al fin y al cabo, el diseño de páginas web no consiste en crear una colección de páginas individuales, sino en crear flujos. Este camino es una serie de pasos que el visitante realiza desde el punto de entrada (la primera página en la que aterriza) hacia la acción específica que usted quiere que realice (normalmente una acción de conversión, como un registro, una compra, etc.). Lo siguiente le ayudará a determinar sus flujos de usuarios cuando diseñe su sitio web.

Arquitectura de la información
La arquitectura de la información (AI) es una disciplina que le permite organizar la información de forma clara y lógica para sus visitantes. Los arquitectos de la información analizan cómo los usuarios estructuran la información y crean una jerarquía que se ajusta a las expectativas del usuario. Una buena AI es el resultado de una sólida investigación del usuario y de pruebas de usabilidad.

Hay varias formas de investigar las necesidades de los usuarios. A menudo, un arquitecto de la información participa activamente en entrevistas con los usuarios, en la clasificación de tarjetas y en pruebas de usabilidad moderadas en las que observa cómo la gente interactúa con el diseño existente y comparte sus opiniones al respecto.

Navegación global
La navegación es la piedra angular de la usabilidad. Si los visitantes no pueden navegar por su sitio web, lo más probable es que lo abandonen. Por eso la navegación de su sitio web debe ajustarse a unos cuantos principios:

Simplicidad. Su navegación debe ayudar a los visitantes a entender cómo moverse por su sitio con el menor número de clics posible.
Claridad. No hay que adivinar qué significa cada opción de navegación.
Coherencia. El sistema de navegación debe ser el mismo para todas las páginas del sitio web.
Tenga en cuenta algunas cosas al diseñar la navegación:

Seleccione un patrón de navegación basado en las necesidades del usuario. La navegación debe adaptarse a las necesidades de la mayoría de los visitantes de su sitio web. Por ejemplo, es mejor evitar la navegación en forma de menú hamburguesa si la mayoría de tus usuarios no están familiarizados con el significado del propio icono.

Priorizar las opciones de navegación. Un buen equipo de diseño priorizará las opciones de navegación en función de las tareas habituales de los usuarios, teniendo en cuenta tanto la prioridad como la frecuencia de las tareas.

Hazlo visible. Minimice la carga cognitiva del usuario haciendo que las opciones de navegación importantes estén permanentemente visibles. Cuando ocultamos las opciones de navegación nos arriesgamos a que los visitantes no sean capaces de encontrarlas.
Comunicar la ubicación actual. No indicar la ubicación actual del visitante es un problema común en muchos sitios web. Si los visitantes tienen que preguntar «¿Dónde estoy?», es un claro indicio de que su navegación necesita algo de trabajo. Para los sitios web grandes, ofrezca indicadores de ubicación como las migas de pan.
Diseño visual y funcional de los enlaces web
Los enlaces son un elemento clave en la navegación web. Su diseño visual y funcional tiene un impacto directo en la usabilidad. Siga algunas reglas con estos elementos interactivos:

Reconozca la diferencia entre enlaces internos y externos. Los usuarios esperan un comportamiento diferente para los enlaces internos y externos. Todos los enlaces internos deben abrirse en la misma pestaña para que los visitantes puedan utilizar el botón «atrás».
Cambiar el color de los enlaces visitados. Si los enlaces visitados no cambian de color, los usuarios podrían volver a visitar las mismas páginas varias veces sin querer.
Compruebe dos veces todos los enlaces. Es frustrante llegar a una página de error 404. Utilice herramientas como Dead Link Checker para encontrar cualquier enlace roto en su sitio web.

Botón «Atrás» del navegador
El botón «atrás» es quizás el más utilizado en el navegador, así que asegúrese de que funciona de acuerdo con las expectativas del usuario. Cuando un usuario sigue un enlace en una página y luego hace clic en el botón «atrás», espera volver al mismo punto de la página original. Evite situaciones en las que al hacer clic en «atrás» el usuario vuelva al principio de la página inicial, en lugar de donde lo dejó, especialmente en páginas largas. Perder su lugar obliga al usuario a desplazarse por el contenido que ya ha visto, lo que conlleva un coste de interacción innecesario.