A la hora de diseñar un sitio web debes ser capaz de ver tu página a través de los ojos de tus visitantes. La navegación debe resultar clara e intuitiva a la vez que rápida para conseguir que los usuarios se queden en tu sitio sin salir frustrados a los pocos segundos.
Reglas y consejos básicos para diseñar una buena página web
Diseña una página web fácilmente legible y agradable a la vista. Para ello usa fondos de un color sólido preferiblemente claro con texto oscuro. El fondo de color negro resulta mucho mas molesto para la vista sobre todo si contiene gran cantidad de texto. Una excepción para esta norma podría ser una página que incluya una galería de fotos con apenas texto. El fondo negro contribuirá a que resalten las fotos.
Cualquier imagen que uses como fondo dificultara la correcta lectura del texto, si aun así decides usar una imagen con fondo para tu página procura que sea de una sola tonalidad diluida en vez de múltiples colores más llamativos.
El color del texto debería contrastar con el color de fondo para facilitar su lectura, por lo que si el fondo de la página es claro el texto debería ser oscuro y al revés utilizaremos un texto claro para un fondo oscuro.
Si diseñas páginas web, sabes que hacer que tus diseños sean útiles y agradables es tu máxima prioridad. Incluso con los mejores software de diseño web al alcance de la mano puede ser una tarea abrumadora para quien acaba de empezar a crear sitios web, así que para simplificarlo, he creado una sencilla lista de lo que hay que hacer y lo que no hay que hacer para tener en cuenta a la hora de diseñar tu próximo proyecto de diseño web.
Primero, lo que hay que hacer para diseñar una buena web
1. Mantenga la coherencia de su interfaz
Uno de los principales principios de una buena UX es mantener la interfaz consistente en todo el producto. El aspecto general de su sitio web debe ser coherente en todas sus páginas. La coherencia de la navegación, los esquemas de color, los tipos de letra y el estilo de escritura pueden tener un impacto positivo en la usabilidad y la UX.
Consejo práctico: Haz que el diseño sea utilizable en primer lugar. La coherencia es un arma de doble filo. Si su sitio web no está diseñado correctamente al principio, entonces hacer que otras partes del mismo sean consistentes resultará en un diseño consistentemente pobre. Por lo tanto, primero hay que hacer que el diseño sea utilizable y luego que sea consistente.
2. Diseñar una navegación fácil de usar
La navegación es la piedra angular de la usabilidad. Es la principal técnica de interacción en Internet. Tener una buena navegación en su sitio es crucial para garantizar que los visitantes puedan encontrar lo que buscan.
Utilizar etiquetas claras para las opciones de navegación. Utilice palabras conocidas para las opciones del menú para ayudar a los visitantes a entenderlas mejor.
Reducir el tiempo necesario para que los usuarios lleguen al destino. Diseñe su navegación de forma que los visitantes lleguen a su destino con el menor número de clics posible. Cuando diseñe un sitio web, recuerde la regla de los tres clicsque dice que sus espectadores nunca deben estar a más de tres clics de lo que buscan.
Incluya opciones de navegación en el pie de página de su sitio web. El pie de página es el lugar donde los visitantes esperan encontrar las opciones de navegación y la información de contacto.
3. Cambiar el color de los enlaces visitados
Los enlaces juegan un papel vital en el proceso de navegación. Cuando los enlaces visitados no cambian de color, los usuarios podrían volver a visitar las mismas páginas repetidamente sin querer. Conocer sus ubicaciones pasadas y presentes facilita la decisión de dónde ir a continuación.
Hacer. Diferenciar visualmente los enlaces visitados.
4. Facilite el escaneo de sus páginas
Cuando los usuarios visitan su sitio, es más probable que escaneen rápidamente la página en lugar de leer todo lo que hay en ella. Por ejemplo, cuando los visitantes quieren encontrar un contenido específico o completar una determinada tarea, escanearán las páginas de un sitio web hasta encontrar lo que buscan. Y usted, como diseñador, puede ayudarles a hacerlo diseñando una buena jerarquía visual. La jerarquía visual se refiere a la disposición o presentación de los elementos de forma que implique importancia ━ por ejemplo, dónde deben centrar los ojos primero, segundo, etc.
Consejos prácticos:
Evite los muros de texto. Divida la información en grupos para que sea más fácil de digerir visualmente. Rompe los muros de texto con encabezados o viñetas.
Poner más peso visual en los elementos importantes. Haz que los elementos importantes, como los botones de llamada a la acción o los formularios de acceso, sean puntos focales para que los visitantes los vean de inmediato. Puede resaltar los elementos utilizando diferentes tamaños o colores.
Haz. Mailchimp hace que la información más importante de una página ━ botones de llamada a la acción ━ destaque.
Ten en cuenta los patrones naturales de escaneo. Los occidentales suelen leer de izquierda a derecha y de arriba a abajo. Un diseño que va en contra de este patrón presentará una curva de aprendizaje para sus visitantes. Los sitios web bien diseñados suelen presentar su contenido en forma de “F” o “Z” de lectura.
Sigue un diseño de cuadrícula. A diseño de la rejilla le permite organizar la información de manera que facilite a los visitantes la lectura y comprensión de la información presentada en la página.
Hazlo. Utilizar un diseño de rejilla al diseñar experiencias web.
5. Tómate el contenido en serio
El contenido es tan importante como el diseño de su sitio web. Más de 95 por ciento de la información en la web está en forma de lenguaje escrito. Aunque su sitio web tenga un diseño bonito, no es más que un marco vacío sin un buen contenido; un buen sitio web tiene tanto un gran diseño como un gran contenido. El trabajo de un diseñador es asegurarse de que el diseño ayude y complemente el contenido.
Consejos prácticos:
Asegúrese de que el texto de la página web es relevante. Un texto irrelevante no aporta ningún valor a tus visitantes y puede confundirlos fácilmente. Esfuérzate por crear un texto en el que cada línea sea valiosa para tus visitantes.
Evite la jerga. La información escrita en su sitio web debe ser lo más simple y sencilla posible para facilitar su comprensión. Una apuesta segura es escribir para todos los niveles de lectores eligiendo palabras que sean claras y fácilmente comprensibles para todos.
6. Revise su sitio web en busca de errores
Un gran trabajo puede verse fácilmente empañado por un pequeño error. He aquí algunos problemas comunes que hay que tener en cuenta:
Cuidado con los enlaces muertos. Un usuario puede frustrarse fácilmente cuando hace clic en un enlace de un sitio y recibe como respuesta una página de error 404.
Revise su sitio web en busca de errores tipográficos.
Asegúrese de que todo el contenido multimedia se carga correctamente ━ no hay imágenes o vídeos rotos.
7. Minimizar el número de opciones
El número de opciones que tiene la gente afecta a sus decisiones; cuantas más opciones tienen, menos acciones realizan. Cuando presentas a tu usuario demasiadas opciones, le haces pensar demasiado. Para aumentar las posibilidades de interacción, es mejor minimizar el número de opciones.
Hazlo. Facebook utiliza un proceso paso a paso cuando pide información personal.
8. Atraer a los usuarios para que se desplacen
El desplazamiento hace que los usuarios se adentren más en la página y que inviertan más tiempo en la experiencia, y esto aumenta la posibilidad de que los usuarios conviertan ━ por ejemplo, que compren algo, se suscriban a un boletín de noticias o se pongan en contacto con usted. A pesar de que la gente suele empezar a desplazarse en cuanto se carga la página, el contenido de la parte superior sigue siendo muy importante. Lo que aparece en la parte superior establece la impresión y la expectativa de calidad para los visitantes. La gente se desplaza, pero sólo si lo que está por encima del pliegue es lo suficientemente prometedor.
Consejo práctico: El contenido de la parte superior de la página establece las expectativas iniciales. Si una página ofrece a los usuarios un contenido de alta calidad, estos estarán dispuestos a buscar más contenido.
9. Etiquetar los botones en función de su función
La etiqueta de cualquier elemento accionable de la interfaz debe estar siempre relacionada con lo que hará el usuario. Los usuarios se sentirán más cómodos si entienden qué acción desencadena un botón. Las etiquetas vagas, como “Enviar”, o abstractas, como en el ejemplo siguiente, no proporcionan suficiente información sobre la acción.
No lo hagas. Hacer que la gente se pregunte qué hace un elemento de la interfaz. Acreditado por UXMattersHacer. Deja claro lo que ocurrirá cuando los usuarios hagan clic en un elemento de la interfaz de usuario. “Reclame su prueba gratuita” es una etiqueta clara para un formulario de registro. Acreditado por Treehouse
10. Hacer que las cosas parezcan funcionar
Con los botones y otros elementos interactivos, piensa en cómo el diseño comunica la asequibilidad. Recuerda el viejo adagio “la forma sigue a la función”: el aspecto de un objeto indica a los usuarios cómo utilizarlo. Los elementos visuales que parecen enlaces o botones, pero que no son clicables ━ como las palabras subrayadas que no son enlaces, o los elementos que tienen un fondo rectangular pero no son botones ━ pueden confundir fácilmente a los usuarios.
No. ¿La caja naranja en la esquina superior izquierda de la pantalla es un botón? No, pero la forma y la etiqueta hacen que el elemento parezca uno.
11. Haz que tu sitio web sea responsivo
Hoy en día hay más de 5.000 millones de dispositivos con navegadores web. Esto significa que los visitantes pueden llegar a su sitio desde varios dispositivos, como un ordenador de sobremesa, una tableta, un teléfono, un reproductor de música o incluso un reloj. Una gran parte del diseño de UX es garantizar que, independientemente de cómo vea el visitante su sitio, toda la información vital se mostrará correctamente en los diferentes tamaños de pantalla.
Hazlo. Los diseñadores tienen que adaptar sus diseños a varios tamaños de pantalla. No importa el tamaño de la pantalla -desde un teléfono hasta un reloj, o desde una tableta hasta un ordenador de sobremesa-, el sitio debe presentar la información de forma clara.
Consejos prácticos:
Haga que la información esencial sea fácilmente localizable. A diferencia de los usuarios de ordenadores de sobremesa, cuando navegan por el móvil, los usuarios buscan algo específico, como la información de contacto o el coste de un producto que quieren comprar. Haga que esta información sea imposible de pasar por alto.
Dimensiona los elementos interactivos en función de la pantalla. Dado que los usuarios de móviles se desplazan y tocan con los dedos, puede ser necesario aumentar el tamaño de los elementos interactivos, como los botones.
12. Pruebe su diseño
Puede que tengas un diseño que te parezca fantástico, pero sin el feedback de los usuarios reales, nunca sabrás lo efectivo que es. Tienes que ver cómo reaccionan los usuarios. Incluso si consigues que uno o dos usuarios reales e imparciales interactúen con tu sitio web y compartan sus opiniones contigo, eso te proporcionará muchas ideas útiles que no tendrías de otra manera.
Consejo práctico: Vigile análisis. La analítica web es una herramienta poderosa que puede ayudarle a encontrar áreas de su sitio web que requieren atención adicional.
Ahora, lo que no hay que hacer
1. No hagas que los usuarios esperen a que se cargue el contenido
El tiempo de carga es extremadamente importante para la experiencia del usuario. A medida que la tecnología avanza, nos volvemos más impacientes, y hoy en día, 47 por ciento de los usuarios esperan que una página web se cargue en dos segundos o menos. Si una página web tarda más en cargarse, los visitantes pueden sentirse frustrados y abandonar el sitio. Por eso la velocidad debe ser una prioridad a la hora de crear una aplicación web.
Cuanto más rápido sea su sitio, mejor será la experiencia. Imagen de Google.
Consejos prácticos:
Evite las páginas en blanco durante la carga. Si la carga tarda un poco, considere la posibilidad de mostrar una parte del contenido junto con alguna forma de retroalimentación visual ━ como un indicador de carga.
Optimizar las imágenes. Las imágenes, especialmente las de fondo de gran tamaño, pueden tardar mucho en cargarse. Puede reducir significativamente el tiempo de carga si optimizando tus imágenes.
Mida el rendimiento actual de su sitio web. Google’s PageSpeed Insights y Piensa con Google no sólo le ayudarán a identificar los problemas de rendimiento de su sitio web, sino que también le propondrán soluciones a determinados problemas.
2. No abra los enlaces internos en nuevas pestañas
Los usuarios esperan un comportamiento diferente de los enlaces internos y externos. Todos los enlaces internos deberían abrirse en la misma pestaña; de este modo, permitirás a los usuarios utilizar el botón “atrás”. Si decide abrir los enlaces externos en una nueva ventana, debería proporcionar una advertencia avanzada antes de abrir automáticamente una nueva ventana o pestaña. Esto puede adoptar la forma de un texto añadido al texto del enlace que diga “se abre en una nueva ventana”.
3. No utilice demasiados tipos de letra
Cuando empiezas a construir un sitio, siempre es tentador utilizar un montón de tipos de letra diferentes ━ cinco o seis fuentes distintas o incluso subir las tuyas propias. Pero es mejor evitar esa tentación. Demasiadas variaciones en los tipos de letra pueden distraer, confundir y rozar la molestia.
No lo hagas. Demasiadas fuentes pueden entrar en conflicto entre sí y abrumar a tus visitantes.
4. No utilices demasiados colores en tu página web
Al igual que los tipos de letra, es mejor evitar el uso de demasiados colores en el diseño. Aplicar el color a un diseño tiene mucho que ver con el equilibrio y, cuantos más colores utilices, más difícil será lograr el equilibrio. Utilizar demasiados colores en el diseño es como intentar transmitir un millón de sentimientos y mensajes a la vez, lo que puede confundir a la persona que ve tu diseño.
No. Utilizar demasiados colores en el diseño. Imagen de Pine-Sol.
Siempre es mejor mantener el esquema de color limitado a unos pocos colores y mantenerlo consistente en todo tu sitio, a menos que quieras destacar alguna sección importante usando color.
Consejo práctico: Piensa en las emociones que quieres evocar en tus visitantes. Saber qué sentimientos quieres transmitir puede ayudarte a elegir la combinación de colores adecuada. Por ejemplo, si promocionas productos de meditación en tu sitio web, no querrás una combinación de colores brillantes y chillones.
5. No muestre ventanas emergentes automáticas demasiado pronto
Muchos sitios web muestran cajas emergentes con una solicitud de suscripción tan pronto como llegas a la página. Como diseñador, mostrar ventanas emergentes es probablemente una de las cosas más molestas que puedes hacer a alguien que visita tu sitio web. Las ventanas emergentes interrumpen por naturaleza y, como suelen utilizarse para mostrar anuncios, los usuarios suelen cerrarlas incluso antes de leer el contenido.
No lo hagas. Lo primero que la gente ve cuando visita el sitio web de The New York Times es una ventana emergente con un anuncio promocional.
Consejo práctico: Cronometre sus ventanas emergentes. Antes de pedir a los visitantes que hagan algo, tienes que mostrar cómo puedes aportar valor. Evite que la caja aparezca hasta que los visitantes lleguen al final de la página ━ es decir, que lean todo el contenido ━ o permanezcan en el sitio durante algún tiempo.
6. No utilices fotos genéricas de personas
Las imágenes con rostros humanos son una forma muy efectiva de hacer que tus usuarios se comprometan. Nuestros cerebros son predispuesto a prestar atención a las caras. Cuando vemos las caras de otros seres humanos nos hace sentir que realmente conectamos con ellos, y no sólo con un producto.
Sin embargo, muchos sitios corporativos son famosos por su uso excesivo de fotografías poco sinceras, que se emplean para “generar confianza”. Pruebas de usabilidad muestran que las fotos puramente decorativas rara vez aportan valor al diseño y a menudo perjudican la experiencia del usuario.
No. Las imágenes no auténticas dejan al usuario con una sensación de falsedad superficial.
7. No dejes que la promoción te robe el protagonismo
Tener demasiadas promociones o anuncios en una página puede eclipsar fácilmente el contenido principal y dificultar la realización de tareas por parte de los usuarios. Si tienes demasiados anuncios en la página, todos competirán para que tus lectores los miren. Esto dará lugar a una sobrecarga sensorial que, en última instancia, aumentará sus tasas de rebote. También es importante reconocer que todo lo que parece un anuncio suele ser ignorado por los usuarios ━ el fenómeno se conoce como ceguera a los banners.
No. Los anuncios pueden distraer a los visitantes del contenido principal y socavar el diseño.
8. No reproduzcas música de fondo ni vídeos con música.
Si bien la música de fondo puede funcionar en casos específicos, como un sitio web de promoción, es simplemente una mala idea para la mayoría de los sitios web. La música o el sonido inesperados pueden molestar y potencialmente causar problemas ━ la gente podría estar visitando su sitio en el trabajo, en un lugar público, o cerca de alguien que está durmiendo, y la música inesperada podría enviar a esos visitantes en un instante.
Al igual que la música de fondo, los vídeos de reproducción automática incorporados a un bloque de contenido también irritan a los usuarios. Deben utilizarse con moderación y sólo cuando sean apropiados y esperados.
Consejo práctico: Pon a los usuarios en control. Configura la música para que se silencie por defecto, pero permíteles encenderla si hacen clic en los botones de ━ diseño de reproducción/pausa de tu contenido de audio.
Hazlo. Los vídeos de Facebook están configurados para que se reproduzcan automáticamente, pero no se reproduce el sonido a menos que los usuarios demuestren que están viendo el vídeo ━ es decir, interactuando con el vídeo.
9. No secuestrar el desplazamiento
El secuestro del desplazamiento es cuando los diseñadores manipulan la barra de desplazamiento para que se comporte de forma diferente en su sitio web. El desplazamiento secuestrado es muy molesto para muchos usuarios, ya que les quita el control y hace que el comportamiento del desplazamiento sea completamente impredecible. Cuando se diseña un sitio web, es mejor evitar el secuestro de la barra de desplazamiento y dejar que el usuario controle su navegación y movimiento a través del sitio.
No lo hagas. La página de registro de Tumblr utiliza el secuestro de scroll.
10. No utilices el scroll horizontal
Para destacar, algunos diseñadores utilizan el desplazamiento horizontal en sus sitios. Por desgracia, el desplazamiento horizontal es una de las pocas interacciones que genera sistemáticamente respuestas negativas por parte de los usuarios. Los usuarios a menudo no tienen idea de que pueden descubrir el contenido desplazándose horizontalmente – la mayoría de los usuarios están acostumbrados a desplazarse hacia abajo en los sitios web y no suelen mirar a la izquierda y a la derecha. Como resultado, simplemente ignoran el contenido accesible a través del desplazamiento horizontal.
No lo haga. Los visitantes no tienen ni idea de que deben desplazarse horizontalmente, especialmente cuando no hay señales visuales. Imagen de axelwyart.
11. No sacrifiques la usabilidad en aras de la belleza
Por muy bonito que sea un diseño, nunca debería interferir en la capacidad del usuario para consumir el contenido o interactuar con un sitio web. Un ejemplo típico de decisiones de diseño que suelen crear una UX terrible en aras de la belleza es el uso de texto gris claro sobre fondos claros. Esta combinación afecta a la legibilidad del contenido. Es mejor evitar tener fondos cargados detrás del contenido o un contraste de color insuficiente, como en el ejemplo siguiente.
Consejo práctico: Compruebe la relación de contraste. Las relaciones de contraste representan la diferencia entre un color y otro. Herramientas como Comprobador de contraste de color le ayudará a comprobar si tiene un contraste de color suficiente en unos pocos clics.
12. Utilizar texto y anuncios parpadeantes
Cuando crees anuncios y animaciones, ni se te ocurra utilizar efectos parpadeantes. Los contenidos que parpadean o titilan pueden provocar convulsiones en personas susceptibles, y es probable que resulten molestos o distraigan a los usuarios habituales.
Conclusión
Cuando la gente interactúa con los sitios web, espera una experiencia de usuario excelente. Si no consigues satisfacer sus necesidades, simplemente se irán a tu competencia, que puede estar a un solo clic. Por eso, con cada decisión de diseño, debes pensar en lo mejor para el visitante e intentar que la experiencia sea lo más agradable posible.
