21 errores comunes de diseño de la interfaz de usuario (UI) que le están costando mucho a su empresa

Publicado: 2022-10-10

Los consumidores de hoy son más exigentes que nunca, especialmente cuando se trata del mundo digital. Esperan una interfaz intuitiva y de diseño atractivo que se cargue en segundos cuando navegan por un sitio web y votarán con sus ojos si encuentran algo que no cumpla con sus exigentes estándares.

De hecho, las estadísticas recopiladas en una amplia gama de industrias sugieren que:

  • El 38% de los visitantes abandonarán un sitio web si encuentran poco atractivo el diseño básico o el contenido.
  • El 47% de las personas espera que una página web se cargue en menos de dos segundos;
  • La gran mayoría (95%) de las personas cree que el elemento más importante de cualquier sitio web es la experiencia del usuario (UX); y
  • Si la calidad del diseño web se ha degradado, el 94 % de las personas dejarán de confiar o de utilizar un sitio web por completo.

Es posible que muchas empresas que consideran su sitio web como un elemento integral de su estrategia de marketing en línea no se den cuenta de que un diseño deficiente de la interfaz de usuario podría estar costándoles mucho en términos de visitas a la página, clics y tasas de conversión.

Tabla de contenido

Aquí hay 21 errores comunes de diseño de interfaz de usuario

#1. Diseño desordenado

Los usuarios encuentran que los sitios web que están demasiado desordenados son muy frustrantes. Carecen de orden visual y pueden abrumar a las personas en su lucha por comprender cuáles son los elementos más importantes y dónde deben centrar su atención. Por lo general, la página de un sitio web puede parecer desordenada si:

• Hay demasiado contenido, especialmente texto, en la pantalla;
• No aparece ninguna lógica ni orden en cómo se muestra el contenido; y
• El diseño visual no es atractivo o los colores y las fuentes chocan demasiado estridentemente.

[Tweet ““El diseño web no se trata solo de crear diseños bonitos. Se trata de comprender el desafío de marketing detrás de su negocio. ― Mohamed Saad ””]

No saber dónde o qué buscar en una página puede hacer que los visitantes se desvíen, lo que significa una venta perdida o una conversión potencial.

Diseño desordenado
Ejemplo de diseño desordenado (Fuente de la imagen: http://art.yale.edu/)

“Un error que veo a menudo es no usar contenido auténtico durante la fase de diseño. El texto (como ejemplo) juega un papel importante en los diseños modernos, pero una vez que se lanza el producto, los ejemplos de texto perfectos se reemplazan con contenido real. Ahí es donde termina la armonía y surgen varios problemas: oraciones largas que no encajan, etiquetas desalineadas, espacios entre filas y desorden (y eso es incluso antes de los desafíos de localización)".
– Gil Bouhnick es el CTO y cofundador de Missbeez y propietario de Mobile Spoon. Síguelo en Twitter @GilBouhnick

#2. Llamadas a la acción (llamadas a la acción) que no invitan

Podría decirse que los botones CTA (Llamado a la acción) son el elemento más importante en cualquier página de destino. Son el dispositivo que convierte a un visitante aleatorio de un sitio web en un cliente potencial. Por lo tanto, es vital que los botones de CTA sean prominentes, atractivos y fáciles de usar para que los visitantes puedan realizar directamente las acciones que usted desea que realicen, ya sea para dirigirlos a la página de un producto, al carrito de compras o al servicio de pago. .

[Tweet ""Obedecer un llamado profético a la acción trae beneficios positivos". ― Sherry K. White, Caminar en las riquezas del padre: la prosperidad de la filiación”]

Al evaluar si sus botones de CTA son efectivos, las empresas deben hacerse las siguientes preguntas:

  • ¿La CTA es clara e inequívoca? ¿Está orientado a la acción e induce un sentido de urgencia por parte del visitante?
  • ¿Está el botón colocado en el lugar correcto de la página? ¿Se puede localizar fácilmente? y
  • ¿Qué tan fácil es de usar? ¿Se destaca del resto de la página y capta la atención del visitante?
Ejemplos de llamadas a la acción-min
Ejemplo de buenos CTA (Llamado a la acción) (Fuente de la imagen: www.krabisunsetcruises.com/en/)

#3. Navegación poco intuitiva

Un sitio web debe ser organizado y fácil de navegar. Eso significa que debe tener una jerarquía y un orden lógico que sea fácil de seguir, con títulos y subtítulos que se relacionen claramente entre sí, y que estén redactados de forma clara y sin ambigüedades.

[Tweet ""La brújula moral humana aún no funciona en mundos donde el instinto navega por la vida". ― Toba Beta, mi antepasado fue un antiguo astronauta”]

Proporcione siempre un menú y ubíquelo donde los usuarios esperan encontrarlo, ya sea verticalmente en el lado izquierdo de la página como una barra lateral u horizontalmente en la parte superior de la página. Y no incluya demasiados artículos en su menú: seis o menos es la cantidad recomendada.

La navegación tiene que ser intuitiva para el usuario medio: si la encuentra demasiado complicada o no sabe dónde buscar, simplemente se irá a otra parte.

fácil de navegar-min
Ejemplo de buena navegación (fuente de la imagen: thefairchildgrove.com)

#4. Imágenes genéricas

Las imágenes genéricas son el uso de fotos de archivo y otras imágenes obviamente falsas para vender o promocionar productos o servicios. Los problemas con este tipo de imágenes son dobles: no solo las imágenes en sí no son genuinas, sino que son genéricas: las mismas imágenes se pueden encontrar en varios sitios web.

Una imagen vale más que mil palabras, y una buena imagen llamativa puede ser una poderosa herramienta de marketing, generando un sentimiento de confianza e incluso bienestar en un cliente. Pero una imagen genérica solo socava esa confianza de inmediato.

imágenes de marca

#5. Sin prueba social

La prueba social es la idea de que las personas se ajustarán a las normas para gustar o ser aceptadas por la sociedad. Los consumidores compran productos que los hacen sentir bien consigo mismos, pero buscan razones por las que lo que están haciendo es lo correcto. Eso significa que buscan reseñas de productos en línea, testimonios e íconos de confianza para guiarlos al tomar una decisión de compra.

prueba social
Ejemplo de una buena prueba social (fuente de la imagen: www.yelp.com)

Las investigaciones han demostrado que el 85 % de las personas leerán reseñas en línea antes de tomar una decisión de compra. Actúan como una parte valiosa del proceso de compra.

[Tweet ““El hombre es un ser social; no es de extrañar que nos encanten las pruebas sociales, vende marcas rápido” ― Bernard Kelvin Clive”]

Si su sitio web no tiene reseñas en línea o testimonios de clientes anteriores o existentes, no hay prueba social y es mucho menos probable que los visitantes procedan con una venta.

#6. La ausencia de una guía de estilo

Una guía de estilo es un conjunto de estándares visuales para el formato y el diseño de un sitio web. Garantizan la uniformidad del diseño en un sitio, lo que ayuda a evitar incoherencias, como fuentes y tamaños de texto diferentes, colores o tamaños, o el uso de estilos diferentes.

ausencia de una guía de estilo
Ejemplo de un mal estilo de diseño (Fuente de la imagen: www.roverp6cars.com)

Las mejores prácticas sugieren que un diseñador de UI debe crear su Guía de estilo una vez que haya entendido el resumen de un sitio web, pero antes de comenzar a diseñar las páginas individuales. Esto no solo garantiza la coherencia, sino que les ahorra mucho tiempo: muchos de los elementos gráficos ya existirán y no es necesario crearlos desde cero.

#7. Relación texto y gráficos/imagen

Demasiado texto y muy pocas imágenes o contenido gráfico pueden perjudicar la experiencia del usuario de un sitio web. No existe una fórmula exacta de cuál es el equilibrio adecuado, aunque algunos expertos sugieren un mínimo de 60 % de texto y un máximo de 40 % de gráficos o imágenes.

Relación de imagen de gráficos de texto
(Fuente de la imagen: www.att.com)

Las mejores prácticas sugieren:

  • Encuentre el equilibrio que tenga sentido para su negocio;
  • Use suficiente texto en el cuerpo de su mensaje para que los espectadores puedan entender todos los puntos clave sin abrumarlos;v
  • Adopte un mayor uso de imágenes para las personas que visitan sitios web en dispositivos móviles, ya que son más fáciles de ver que montones de texto;
  • Pruebe las proporciones de texto a imagen de forma continua para determinar la configuración óptima para el negocio.

#8. Velocidad de carga de página lenta

Por muy bueno que sea el resto de su diseño, si sus páginas web tardan demasiado en cargarse, automáticamente perderá mucho tráfico. La investigación ha demostrado que el 47% de las personas esperan que una página web se cargue en dos segundos o menos. El mismo estudio también demostró el costo para las empresas de solo un segundo de retraso en los tiempos de carga de la página: 11 % menos de visitas a la página y 7 % menos de conversiones.

carga de pagina

Además, la velocidad de carga de la página también afecta las clasificaciones en Google y otros motores de búsqueda.

[Tweet "73% de los usuarios de Internet móvil dicen que han encontrado un sitio web que era demasiado lento para cargar". ― Neil Patel”]

#9. Hacer pensar al usuario

El propósito de un sitio web para una empresa es principalmente actuar como una herramienta de marketing. Debe explicar lo que está vendiendo, cuánto cuesta y cómo obtenerlo de la manera más simple y concisa posible. El objetivo final es convertir a un visitante del sitio web en un cliente de la manera más rápida y sencilla posible.

Hacer pensar al usuario

Sin embargo, si un usuario tiene que pensar en la decisión o tiene que resolver algo por sí mismo, es probable que cambie de opinión y se vaya a otro lado. Haga que la experiencia del usuario sea fluida y sin inconvenientes para que no tengan que pensar por sí mismos.

#10. Diseñando para ti mismo

Un error común que cometen muchos diseñadores web es diseñar para ellos mismos sin tener en cuenta al usuario final. Esto puede ser simplemente autocomplaciente y no cumplir con las necesidades y requisitos que tendrá el visitante potencial de un sitio. En cambio, un diseñador web debe trabajar en estrecha colaboración con los equipos de marketing y ventas para garantizar que el diseño esté optimizado desde la perspectiva del usuario en primer lugar. Y los sitios web deben probarse en usuarios reales y modificarse de acuerdo con sus comentarios.

Diseñando para ti mismo

#11. Los estados vacíos demasiado vacíos

En términos de interfaz de usuario, un estado vacío es lo que ve un visitante de un sitio web cuando no hay datos para mostrar en la pantalla. Esto podría deberse a una variedad de razones: un usuario acaba de registrarse; ellos mismos han borrado los datos, o ha habido un error.

Los estados vacíos demasiado vacíos
(Fuente de la imagen: www.amazon.com)

Un estado vacío en sí mismo no es algo malo: se pueden usar para decirle al espectador para qué sirve, por qué lo está viendo y cómo puede llenarlo.

Sin embargo, también pueden ser frustrantes para los espectadores si no se proporciona una guía sobre lo que debería suceder a continuación. Por eso se recomienda que no se dejen demasiado vacíos sino que se llenen con una ilustración, icono o bloque de texto que sugiera los próximos pasos.

#12. Falta de jerarquía tipográfica

En cualquier proyecto de diseño, la jerarquía visual es importante: le dice a la gente dónde mirar y qué cosas en una pantalla. La jerarquía en tipografía organiza y ordena los elementos de texto en un diseño. Le dice al lector lo que es importante y hace que la lectura sea mucho más fácil. Sin él, los visitantes pueden perderse o distraerse y perder mensajes clave o frustrarse y hacer clic fuera de un sitio.

Tipografía
(Fuente de la imagen: dribble.com)

[Tweet ““La tipografía debe ser audible. La tipografía necesita ser sentida. La tipografía necesita ser experimentada”. — Helmut Schmid, diseñador gráfico y tipógrafo”]

#13. demasiado de todo

Cuando se trata de diseño web, a veces menos es mejor que más. Esto es especialmente cierto en el caso de grandes bloques de texto, pero también puede aplicarse a las imágenes. Si hay demasiada información para absorber, la gente no se molestará en leerla. Mantenga la información simple y concisa, use imágenes y gráficos en lugar de palabras siempre que sea posible, y trate de no exprimir demasiado en ninguna página.

demasiado de todo

#14. Diseñar para una audiencia demasiado amplia

Si bien desea que sus productos o servicios atraigan a la audiencia más amplia posible, existe el peligro de que pueda hacer que su mensaje sea demasiado amplio y no atraiga a ningún grupo o segmento específico. Antes de diseñar su sitio web, investigue a su audiencia potencial y adapte el material y los mensajes de marketing que puedan atraerlos directamente. Adaptar el contenido a un público objetivo es una forma de marketing mucho más efectiva y garantizará muchas más conversiones que adoptar un enfoque aleatorio.

Diseñar para un público demasiado amplio

#15. Diseño para un solo tamaño de pantalla

Un error común que cometen muchos diseñadores web es que diseñan sus sitios web solo para pantallas completas, sin verificar primero si se pueden ver primero en pantallas más pequeñas o dispositivos móviles. Esto es un gran error. Casi el 70% de los consumidores de hoy consumen medios o ven páginas web primero en sus teléfonos inteligentes, incluso si luego realizan sus compras en una computadora portátil o de escritorio. Si su sitio web no está optimizado para todas las pantallas, entonces potencialmente está desechando una gran cantidad de conversiones potenciales.

Diseño para un solo tamaño de pantalla

#dieciséis. Saltarse las pruebas de usuario

Las pruebas de usuario son vitales para las altas tasas de conversión. Si bien los diseñadores web, el personal de marketing y ventas de una organización pueden tener una buena idea de lo que los visitantes pueden querer o cómo será la experiencia del usuario, no hay sustituto para hacer que los usuarios reales prueben su sitio web y su rendimiento, e incorporen sus comentarios.

conocimientos de prueba de usuario
(Fuente de la imagen: www.usertesting.com)

De hecho, las pruebas de usuario deben ser un proceso continuo, incluso cuando un sitio se ha puesto en marcha para que el rendimiento de su sitio web siempre se optimice.

#17. Demasiadas ventanas emergentes

Las ventanas emergentes funcionan. Los estudios de investigación han demostrado que los sitios que usan ventanas emergentes pueden experimentar un aumento de hasta el 400 % en las conversiones. Son efectivos porque captan la atención de las personas y pueden entregar mensajes clave en una forma fácilmente digerible.

Demasiadas ventanas emergentes
(Fuente de la imagen: dribble.com)

Sin embargo, el problema es que se interponen en el camino de los diseñadores y les impiden diseñar sitios web accesibles y atractivos. Ocupan espacio y pueden interferir con el contenido de la página. Sin embargo, el principal problema con las ventanas emergentes es que pueden ser muy irritantes. Muchas personas prefieren leer por sí mismas o disfrutar de la experiencia del usuario sin que les recuerden constantemente estas imágenes o indicaciones.

Si se van a utilizar ventanas emergentes, se deben utilizar de forma responsable y con moderación, de modo que informen a los visitantes sin abrumarlos ni bombardearlos.

Hay otra razón por la que se deben evitar demasiadas ventanas emergentes. Desde enero de 2017, Google comenzó a penalizar los sitios que tenían demasiadas ventanas emergentes intrusivas en sus clasificaciones de búsqueda global.

#18. Usar copia de formato largo

Una copia de formato largo es la versión de Internet de una antigua tradición de redacción de textos publicitarios y, a menudo, se usa como una herramienta de marketing para tratar de presionar a los visitantes para que compren utilizando técnicas como el resaltado amarillo, los titulares rojos a medio galope y las flechas parpadeantes. Puede tener éxito en determinadas circunstancias, como vender a prospectos fríos que necesitan resolver un problema en particular, porque destaca el producto sin distracciones.

Usar copia de formato largo

Sin embargo, estas técnicas están asociadas con campañas de pago por clic que no solo son más caras de lo que eran antes, sino que también han hecho que los visitantes de la web desconfíen de hacer clic en ellas, debido a la mayor prevalencia de malware y virus en la web. Y, lo más importante de todo, la copia de formato largo es una forma agresiva de publicidad, y es probable que aliene a más visitantes de los que atrae.

#19. Fuentes difíciles de leer y contraste de color deficiente

Desafortunadamente, no todos tienen una vista perfecta y pueden distinguir tonos y colores sutiles. De hecho, las personas con problemas de visión tienen problemas para leer un texto que no contrasta con su fondo. Y los hombres, en particular, a menudo sufren de una deficiencia de color, particularmente para distinguir los rojos de los verdes. Eso significa que si usa fuentes difíciles de leer o contrastes de color deficientes en su sitio, puede hacer que las páginas sean difíciles de leer y verá que la tasa de rebote de su página comienza a aumentar.

carece de contraste

#20. Derecho del usuario a la privacidad

Los sitios web piden constantemente a las personas que les confíen información personal confidencial. Pero, cuanto más se requiera que un usuario revele, mayor será la importancia que el diseñador y propietario del sitio web debe otorgar a la protección de datos. Por lo tanto, al diseñar un sitio web o cualquier formulario en línea que recopile información privada y patentada, las empresas deben contar con políticas y procedimientos claros sobre cómo se recopilarán y almacenarán los datos de los usuarios. Esto también debe comunicarse a los visitantes en forma de política de privacidad y términos y condiciones del sitio web.

Derecho del usuario a la privacidad
(Fuente de la imagen: www.vocso.com)

Esto tampoco es solo un requisito legal. El incumplimiento de sus obligaciones en virtud de la legislación como GDPR (Reglamento general de protección de datos) puede costar a las empresas, miles o incluso cientos de miles de dólares en multas y cargos penales contra los propietarios de las empresas.

#21. Proporcionar demasiadas opciones

Diseñar un sitio web con demasiadas opciones, demasiados botones para hacer clic o alternar puede llevar a la parálisis del usuario. No saben qué hacer a continuación, por lo que a menudo terminan sin hacer nada. El principio de oro con el diseño de sitios web es que menos es más.

Proporcionar demasiadas opciones

Conclusión

Puede ser difícil apreciar el valor de un sitio web bien diseñado para su empresa, hasta que se da cuenta de que un sitio mal diseñado o que no funciona bien puede costarle mucho a su empresa u organización en lo que respecta a la pérdida de ventas y conversiones.

Eso significa que su sitio debe ser limpio, atractivo, bien diseñado y organizado, y fácil de leer y navegar. También debe ser rápido, fácil de cargar y visible en todos los dispositivos o tamaños de pantalla. Tenga en cuenta a su público objetivo, valore la prueba social y recuerde el precepto general de que menos es más.

Por último, pero ciertamente no menos importante, no asuma que una vez que haya lanzado un sitio web, su trabajo habrá terminado. Lejos de ahi. Un sitio web debe estar en constante evolución, incorporando comentarios continuos de clientes y usuarios para tratar de garantizar que esté optimizado en la medida de lo posible y que se logren la mayor cantidad de clics y conversiones.