El socio general de Y Combinator, Aaron Epstein, estuvo acompañado por Raphael Schaad, fundador de Cron que se vendió a Notion, para discutir los errores comunes que se cometen con los sitios web diseñados con IA. Identificaron siete errores comunes que los codificadores de vibraciones cometen en sus sitios web y que deben evitarse.
Positivos y negativos
El podcast comenzó reconociendo que poder codificar un sitio web es algo positivo que no tiene por qué resultar mal solo porque no eres diseñador. Luego comenzaron a visitar sitios web codificados por vibración y encontraron múltiples problemas que encajan en las siguientes siete categorías.
1. Tendencias de diseño genéricas
El primer problema que destacaron es la tendencia de dejar que la IA decida la apariencia. Una discusión reciente en Twitter llamó la atención sobre las personas que recurren a la IA y preguntan: “dame algo moderno” y lo que terminan obteniendo es algo genérico. Y eso no debería sorprender porque si deja las opciones a un LLM obtendrá el 100% de las opciones de diseño más comunes.
El diseño puede parecer moderno de forma aislada, pero pierde valor de marca porque carece de singularidad, resulta familiar, genérico y poco original. Uno de los ejemplos es una cuadrícula de diseño que se asemeja a una caja bento (un almuerzo japonés cuidadosamente empaquetado), que, según dijeron, se veía bien pero tampoco era original.
Otro ejemplo fue el panel de software genérico, centrándose en su aspecto genérico. Este tipo de error puede aparecer en cualquier momento, cuando algo parece profesional pero es genérico.
Aaron Epstein comentó:
“Vuelva a la pestaña de ingenieros aquí.
Ahora, si este es su producto, una de las otras cosas que me llama la atención es este tipo de tablero que tiene, ya sabes, señales como rojas, verdes, azules y moradas aquí arriba.
Esa es una de las cosas clásicas distintivas que muchas herramientas de diseño de IA realmente crearán”.
Captura de pantalla del panel de software genérico
Rafael respondió:
“Sí, cada tablero falso se parece básicamente a algo así”.
Aarón Epstein:
Tienen íconos que son una versión más oscura del color de fondo más claro. Generalmente son como los colores de Google, ya sabes, son como rojo, amarillo, verde, azul.
Rafael Schaad:
“Las primarias de Fisher-Price…”
Aarón Epstein:
“Así que… tendemos a ver mucho”.
Citaron cinco ejemplos de tendencias de diseño genéricas:
- Uso excesivo de degradados morados
- Repetir patrones genéricos de diseño de IA
- Usar diseños de cajas bento sin originalidad
- Elementos visuales genéricos como el ejemplo del panel de software.
- Depender de íconos estándar o elementos similares a emojis
Todas esas tendencias de diseño en las que se apoyan los LLM terminan creando una experiencia visual que se parece a otros sitios creados por IA.
Rafael explicó:
“Todo esto comenzó cuando tuve un pensamiento nocturno y tuiteé que veo muchos efectos de desplazamiento tontos en las páginas de destino de las nuevas empresas en estos días, presumiblemente codificados por vibración. Así que tenía un poco de curiosidad por quitar la capa allí.
Es como, ¿cómo surgieron estos, lo que pensé que eran efectos tontos, cómo llegaron a los LLM y por qué están en todas partes ahora?
Un par de tendencias más que teníamos entonces eran como degradados morados. De repente, todos los sitios web de startups tenían degradados morados en todas partes. O estas secciones que se desvanecen a medida que avanzas, a medida que te desplazas, y aparecen y desaparecen”.
Aaron señaló que todas esas tendencias de diseño no son intrínsecamente malas. Lo que los hace malos ahora es que los LLM los están volviendo comunes, quitándoles así cualquier originalidad que solían tener.
Rafael estuvo de acuerdo con la evaluación de Aaron y explicó cómo sucede esto:
“Y una de las cosas clave fue que cuando había un buen sitio web que establecía una tendencia, en el viejo mundo les tomaba un tiempo a otros copiar estas tendencias.
Pero ahora con los LLM, si hay un buen sitio web con un degradado morado, se incluye en el LLM porque el LLM se entrena como los buenos ejemplos a los que se vincula mucho. Y luego, de repente, como la semana siguiente, todos los sitios web de startups tienen el mismo aspecto”.
2. Comentarios inesperados sobre la interacción del usuario
La retroalimentación de la interacción del usuario es importante porque elimina la incertidumbre al reconocer que un clic hizo algo. Los comentarios de interacción del usuario indican que se puede hacer clic en algo. Todas esas cosas son parte de un lenguaje de diseño que los visitantes del sitio esperan ver.
Los comentarios de interacción inesperados son una mala experiencia para el usuario porque rompen el patrón que un usuario espera cuando visita un sitio web. Es como caminar por un vestíbulo y chocar contra una pared de cristal en medio de la habitación. Se supone que no debería estar ahí y distrae y desorienta, lo que supone una mala experiencia para el usuario.
El podcast recomendó evitar estas siete interacciones:
- Líneas que siguen al usuario por la página
- Luces que siguen el cursor
- Efectos de animación de fondo superfluos.
- Fundidos automáticos
- Mover botones o cambiar elementos de la interfaz de usuario
- Efectos de desplazamiento que mueven elementos sin un propósito claro
- Animaciones que llaman más la atención que el producto.
3. Patrones de UX rotos o confusos
Estos son errores en los que la página se vuelve más difícil de usar porque el modelo de interacción no está claro.
- elevación de desplazamiento
- Navegación no estándar
- Menús que saltan o se comportan de manera inconsistente
- Elementos en los que se puede hacer clic y que no se comportan claramente
- Botones que se mueven o avanzan automáticamente
- Interacciones solo al pasar el mouse
- Funcionalidad oculta detrás del desplazamiento
- Comportamiento de encabezado fijo duplicado o incómodo
El secuestro de desplazamiento fue uno de los problemas más comunes que encontraron, deteniéndose cuatro veces para comentar sobre otro sitio que estaba secuestrando el desplazamiento del navegador.
En un momento, Rafael comentó:
“Pero todavía se siente como si estuvieras repasando melaza… como secuestrando el… desplazamiento nativo real del navegador para hacer algo sofisticado con JavaScript y tener los ganchos para hacer todas estas animaciones”.
Otro caso de secuestro de desplazamiento fue el subproducto de una animación que se cargaba e impedía que el usuario progresara.
Aaron Epstein comentó mientras se desplazaba hacia abajo en una página:
“¿Qué pasa cuando bajamos más?
…Valorados y confiados por, bueno, tenemos un montón de líneas en todas partes. Muy bien, entonces tenemos esa línea siguiéndote a lo largo del patrón de página nuevamente”.
Captura de pantalla: “Y ahora estamos secuestrados”
En ese momento la página dejó de responder debido a todas las animaciones y Raphael dijo:
Y ahora estamos enganchados.
Estamos encerrados en esta posición aquí del sitio web para poder crear esta animación.
Y me pregunto qué quiere decirme, por ejemplo, ¿por qué es importante capturarme aquí en este punto para crear esta animación? ¿Dónde es como mostrarla ya en el estado de construcción?
Aaron notó que la animación y el desplazamiento del desplazamiento lo distraen de lo que la página intenta comunicar.
Observó:
“Y encuentro que la animación está captando toda mi atención, en lugar de lo que dice aquí en el lado izquierdo. Así que ni siquiera me doy cuenta de nada de esto.
Y esto no es que, en el lado derecho, no me brinde suficiente información visual para comunicar algo valioso sobre lo que hacen o cómo funciona el producto.
Así que extraño todo lo que hay aquí al lado.
La animación distrae demasiado”.
El principal problema aquí es que el sitio deja de comportarse como esperan los usuarios. Eso genera fricciones, confusión y a veces desconfianza, pero ciertamente confusión, que es lo contrario de lo que debería hacer un sitio web: ofrecer claridad y comunicar.
4. Mensajes débiles y explicación del producto
Se trata de errores en los que el diseño parece impresionante, pero el visitante aún no comprende el producto.
- Propuesta de valor poco clara
- Explicación faltante o vaga de lo que hace el producto.
- No dejar claro para quién es el producto
- No explicar por qué a la audiencia debería importarle
- Muy poca información útil en la mitad superior de la página
- Demostraciones o ejemplos de productos sin suficiente contexto
Veo mucho este tipo de cosas en sitios de tipo B2B donde lees el contenido y nada en la página se conecta con la explicación de cuál es el producto o servicio, y mucho menos comunica por qué debería importarme. En el pasado, era basura humana escrita por alguien que está más preocupado por sonar tecnológico y avanzado. Pero hoy en día es un desastre de IA donde el contenido carece de propósito y es propenso a usar palabras ambiguas que tienen más de un significado o palabras que básicamente son vagas porque no hacen ningún trabajo, no logran nada, no logran mover la pelota por el campo.
Una página de destino es un canal de adquisición de clientes. Si los visitantes no pueden comprender rápidamente el producto y su valor, el diseño ha fracasado.
5. Jerarquía y estructura de la información deficientes
Estos son errores en los que la página tiene demasiados elementos visuales o textuales en competencia. La clave aquí son los elementos visuales o de texto que compiten por la atención del visitante del sitio.
- Demasiados estilos de texto
- Etiquetas extra que no añaden significado
- Jerarquía débil entre logotipo, título, subtítulo y texto de respaldo
- Secciones que se sienten visualmente sobreconstruidas
- Elementos decorativos que añaden espacio vertical sin mejorar la claridad
La IA puede agregar una estructura que parezca diseñada, pero es posible que la estructura no ayude al lector a procesar la página. Tenga siempre en cuenta que la IA tiende a generar elementos de contenido que parecen estar ocupados haciendo su trabajo pero que no están haciendo ningún trabajo en absoluto. Y cuando digo trabajo, me refiero a hacer algo con un propósito, por una razón. Cada palabra y elemento visual debe funcionar, lograr algo. Esto es algo a tener en cuenta al diseñar con IA.
6. Marca y sistema visual inconsistentes
Estos son errores en los que el sitio carece de una identidad unificada. El sitio puede contener recursos de imágenes atractivos, pero no se sienten como parte de una marca o estilo visual coherente. Estas son características de una IA a la que se le pide que haga algo moderno, moderno o elegante, pero sin tener un lenguaje o sistema visual establecido.
- Lenguaje visual inconsistente en todas las secciones.
- Colores que no se sienten coordinados con el logo o la marca.
- Imágenes del producto que no coinciden con el estilo de la página de destino.
- Secciones que parecen generadas por separado
- Elecciones de marca que se sienten heredadas de los valores predeterminados de la IA en lugar de intencionales
7. Falta de juicio basado en la experiencia y dependencia excesiva de la IA
Este es el problema subyacente detrás de cada categoría de problemas con sitios web mal codificados. La IA permite a cualquiera diseñar un sitio y crear recursos de imágenes y texto. Pero necesita una dirección firme por parte de alguien con experiencia y conocimientos. La calidad del resultado depende completamente de la calidad del mensaje, de lo que se ingresó.
El problema no es que la IA haga que la IA decaiga. La falta de experiencia y de conocimientos es lo que lleva al fracaso.
Estos son los problemas que conducen a sitios web mal diseñados y codificados por vibración:
- Aceptar todos los cambios de IA
- Subcontratar el gusto al LLM
- Dejar que la IA decida la dirección de la marca
- Partir de resultados de IA en lugar de estrategias de marca
- Dedicar el tiempo ahorrado a más efectos en lugar de pensar con más claridad
- Olvidar que el humano ahora es el editor
La idea y la conclusión de revisar sitios web mal codificados es que la IA elimina la fricción técnica, pero no reemplaza el juicio que proviene de la experiencia y los conocimientos. La persona que codifica un sitio web todavía tiene que decidir qué sirve mejor al visitante del sitio y al objetivo comercial.
Mire el podcast: Errores comunes con los sitios web codificados en Vibe
Imagen destacada de Shutterstock/FabrikaSimf
