Diseño Web – Qué hacer y qué no hacer

El diseño web es una disciplina realmente compleja. Hay un montón de factores a tener en cuenta a la hora de ponerse a crear un sitio web de calidad. Con el fin de ayudar a simplificar un poco esta tarea, he preparado una lista de principios muy sencillos que puedan servir de pauta de lo que hacer y de lo que no hacer para conseguir la mejor experiencia de usuario posible.

Qué Hacer

Proporcionar una experiencia homogénea, independientemente del dispositivo

Los visitantes llegan a tu sitio usando diferentes tipos de dispositivos: pueden visitar tu sitio en su PC de escritorio o portátil, tableta, teléfono, reproductor de música o incluso a través de sus relojes. Una gran parte del diseño UX es garantizar que no importe cómo llega a tu sitio un visitante, deben tener una experiencia similar, independientemente del dispositivo que estén utilizando.

 

Diseña una navegación fácil de usar y clara

La navegación es la piedra angular de la usabilidad. Recuerda: no importa lo bueno que sea tu sitio web si los usuarios no pueden encontrar el contenido deseado navegando por él. Es por eso que la navegación en tu sitio debe ser:

• Simple (cada sitio debe tener la estructura más simple posible)
• Clara (las opciones de navegación deben ser evidentes para los visitantes)
• Consistente (el sistema de navegación para la página de inicio debe ser el mismo en cada página)

Diseña la navegación de manera que los visitantes puedan ir de una página a otra realizando el menor número posible de clics y consigue que sea fácil de buscar y localizar todos los contenidos que puedan necesitar.

 

Cambiar el color de los enlaces visitados

Los enlaces son un factor clave en el proceso de navegación. Cuando los enlaces visitados no cambian de color, los usuarios pueden volver a visitar las mismas páginas de forma repetida.

 

Conocer las ubicaciones pasadas y las presentes hace más fácil decidir a dónde ir después.

Facilita la exploración de tus páginas

Cuando los usuarios visitan tu sitio son más propensos a escanear la pantalla rápidamente que a leer todo. Por lo tanto, si un visitante quiere encontrar un contenido específico o quiere completar una tarea, va a escanear visualmente hasta que encuentre a donde necesita ir. Y tú, como diseñador, puedes ayudarles diseñando una buena jerarquía visual.

La jerarquía visual se refiere a la disposición o presentación de los elementos de una manera que implique diferentes grados de importancia, y nos indica que los ojos se mueven de arriba abajo y de izquierda a derecha (el cerebro humano lee este tipo de contenido en forma de Z).

 

Haz que las cosas importantes como títulos de página, formularios de inicio de sesión, elementos de navegación u otro contenido importante sean un punto focal para que los visitantes lo vean de inmediato.

 Esto significa que tendrás a la mayoría de los usuarios con los ojos puestos en el botón de la esquina superior izquierda de tu sitio, y esos ojos podrían muy bien significar más clics. Recuerda: solamente incluye tu contenido más importante en estos espacios. Si pones demasiado en un solo lugar el visitante se sentirá abrumado y no obtendrás el resultado que andas buscando.

 

Comprueba todos los enlaces

Un usuario puede frustrarse fácilmente cuando hace clic en un enlace en tu sitio y recibe la página de error 404 como respuesta. Cuando los visitantes están buscando contenido, esperan que cada enlace los lleve a donde dice que lo hará y sin un error 404 o que se les envíe a otro lugar que no esperaban.

 

Haz que tu texto sea fácil de leer

El texto es importante. Está ahí para proporcionar información y responder a las preguntas incluso antes de haberlas hecho.

No hagas que tus lectores tengan que entrecerrar los ojos para leer. Hay algunas reglas simples que harán que tu texto sea claro.

• Asegúrate de que los colores combinan. Una mala combinación puede provocar a los visitantes de tu sitio un dolor de cabeza, los hará darse por vencidos y quizás lo abandonen. Asegúrate de comprobar que todo el texto sea de fácil lectura.
• No utilices un tamaño de fuente muy pequeño. Si bien puede parecer bonito y “cool” asegúrate de que tus lectores no necesitan una lupa para entender el mensaje.
• Mantén equilibradas tus fuentes. Tu sitio web no puede tener más de tres tipos de fuentes (si son dos mejor).

 

Asegúrate de que los elementos cliqueables lo parezcan

La apariencia de un objeto indica a los usuarios cómo deben usarlo. Los elementos visuales que parecen ser vínculos o botones, pero no son cliqueables (es decir, palabras subrayadas que no son vínculos, elementos que tienen una llamada a la acción pero no están vinculados) pueden confundir fácilmente a los usuarios. Los visitantes de tu sitio necesitan saber qué áreas son contenido estático normal y qué áreas son las susceptibles para hacer clic (o pulsables).

 

Haz que los elementos en los que se pueda hacer clic sean evidentes para los usuarios

 

Caja de búsqueda

Está comprobado que uno de los primeros elementos con los que interactúan los usuarios en un sitio web es la caja de búsqueda, siendo una útil alternativa cuando el visitante, después de escanear rápidamente la información, no encuentra lo que busca.

En muchos casos puede ser la ruta más corta y efectiva para que tu contenido sea encontrado y el visitante permanezca en la página.

Las principales características que debe cumplir esta caja de búsqueda son:

• Cuida la ubicación, la parte superior derecha es la ideal.
• Tamaño. El ancho recomendado es de 27 caracteres.
• Debe ser reconocible a simple vista y esto se dará gracias a lograr un buen contraste entre la caja de búsqueda y el fondo del sitio web.
• Botón de Búsqueda. Haz que el botón no sea un icono, sino un botón con la palabra “buscar” porque será más accionable.

 

No hagas

Que tus visitantes esperen a que se cargue el contenido

Retener a los visitantes en tu sitio web es una tarea muy complicada ya que su paciencia es muy pequeña. Según la investigación de NNGroup:

 

10 segundos suele ser el límite para mantener la atención del usuario centrado en una tarea

 

Si los visitantes tienen que esperar a que tu sitio se cargue, se frustrarán y probablemente lo abandonarán si no se carga lo suficientemente rápido para ellos. Incluso el indicador de carga más bellamente diseñado no podrá disuadir a los usuarios de que abandonen el sitio si la carga lleva demasiado tiempo.

Ten cuidado con los siguientes aspectos que suelen hacer un sitio más lento:

• Uso excesivo de animaciones o transiciones
• Imágenes pesadas
• Uso de medios externos como diapositivas, audios o vídeos
• Exceso de spam en el sitio
• Hosting de baja capacidad

 

Abrir enlace en una pestaña nueva

Este tosco comportamiento deshabilita el botón Atrás, que es la forma habitual para volver a contenidos anteriores.

Dejar que las promociones roben todo el protagonismo

Las promociones y los anuncios pueden eclipsar el contenido al que están próximos y dificultar que los usuarios realicen tareas. Por no decir que cualquier cosa que se parezca a un anuncio es generalmente ignorada por los usuarios (este fenómeno se conoce como ceguera de banner).

 

Hijack scrolling

Hijack scrolling es cuando los diseñadores/desarrolladores manipulan la barra de scroll del navegador para que se comporte de manera diferente en su sitio web. Esto puede incluir efectos animados, puntos de desplazamiento fijos e incluso un rediseño de la barra de scroll. Secuestrar el scroll es una de las acciones más molestas para muchos usuarios, ya que toma el control del movimiento natural que realizamos con el dedo de nuestro ratón al navegar. Al diseñar un sitio web o una interfaz de usuario, permite siempre que el usuario controle su navegación y movimiento natural a través del sitio o de la aplicación.

 

Reproducción automática de vídeos con sonido

La reproducción automática de vídeos, música o sonidos de una forma descontrolada puede llegar a irritar a los usuarios. Estos elementos deben utilizarse con moderación y sólo cuando sea apropiado y esperado.

 

Sacrificar la usabilidad por el diseño

El diseño de un sitio o una interfaz de usuario nunca debe interferir con la capacidad que tiene el usuario para consumir el contenido que aparece en la pantalla. Es importante evitar tener fondos complicados y recargados detrás del contenido, los esquemas de color pobres que dificultan la legibilidad del sitio o un contraste de color insuficiente (como en el siguiente ejemplo).

 

Utilizar texto y anuncios intermitentes

El contenido que brilla o parpadea rápidamente puede desencadenar convulsiones en individuos susceptibles y es probable que sea molesto o distraiga a todos usuarios en general. Evítalo.

 

 

Pop-ups intrusivos

Un “Pop-up” es el tipo de mensajes que aparecen cubriendo la pantalla y obstaculizando la lectura. Cualquier pop-up que aparezca antes de 30 o 60 segundos de navegación y bloquee la lectura será intrusivo.

Analiza después de cuánto tiempo de navegación es conveniente que se muestre un pop-up. De esta manera tendrás el control de dónde y cuándo saldrá sin entorpecer la experiencia del usuario, y ofrecerá información sobre lo que la gente está leyendo.

 

Publicado originalmente aquí