Claude vs Gemini: Un mini-caso real en UX
Un problema. Un prompt. Múltiples resultados.
El problema: Para el sitio web de un cliente pidieron unificar dos páginas en una sola sección. Actualmente son dos páginas distintas, con una URL única para cada una y que apunta a dos públicos diferentes, aunque ambas orientadas a aprender.
The situeishon: unificar dos páginas en una no es difícil, lo difícil es apuntar a dos públicos diferentes en una misma sección. Mi propuesta mental apuesta a un storytelling orientado al contenido gratuito que ofrece la academia como unificador, y disparador del sitio.
Pero quise ir más allá, y ver que tal responde Claude y Gemini frente a este pedido. El prompt, o mi pedido para la herramienta, fue directo y al grano, sin tanta vuelta, hablado como de par a par, sin tener un Master en Prompt Engineering de la universidad de Promptuania.
Disclaimer: Me resulta difícil contar el sitio sin poder mostrarlo, asi que voy a describir el wireframe que armé. Un nav ya definido en el sitio madre, una hero, un módulo de join, un h2 y un cta), una sección de stats, un módulo de "free content" (que no es más un h1, luego un módulo de tres videos, un formulario para suscribirse al newsletter y un footer.
"Tengo el siguiente sitio, donde hay 2 ideas entre Talks y Academy que quieren unir en una sola sección del sitio web. Quiero organizarla estructuralmente mejor, cual es la mejor forma de mostrar el contenido y que se entienda cada parte de la sección. A su vez, tengo que mantener la estética y la identidad. Como podría mejorar? Que cambios debería hacer y/o tener en cuenta?" Y le adjunté el wireframe.
Let's go
Primero Claude: analizó la situación y me un diagnóstico básico indicando el problema. Bastante choto porque me dijo lo mismo que le puse yo en el prompt. Luego continuó con una propuesta de estructura, acá sacó la varita del mago y no hizo magia, hizo refritos. Sugirió la idea de crear un Hub, y no está mal en el entorno educativo, podría ser una sugerencia válida, pero el cliente no tienen el contenido suficiente. Entiendo que Claude podría no saberlo, pero en el screenshot que le adjunté estaba toda la información que tiene el cliente. Donde me sugiere lo que hay que mantener parece un chiste, es justamente "mantener la estética y la identidad" que agregué en el prompt.
Por último, los cambios concretos: me dió una numbered list de 5 elementos, donde en algunas cosas me resultaron útiles, como mejorar la jerarquía (acertado), usar títulos en bold (duh, eso lo define la identidad) pero no estoy de acuerdo con hacer tabs para dicho contenido, es muy literal. Básicamente me dijo que divida el contenido en dos tabs horizontales. Además, con los CTAs del screenshot, entendió lo que quiso, el lenguaje visual dispone de dos tipos de botones, pero creyó que los tags del video eran botones y me sugirió tener 2 y no 6.
Ah y por último me preguntó si quería un “mockup html/react”. Nunca se lo pedí, ni mucho menos quiero usar React. No Claude, no voy a gastar créditos.
Ahora el turno de Gemini: fue lo más parecido a un “humano”, más directo y sin embellecer la respuesta. O tal vez fue más lo que esperaba ya que mi prompt también fue directo. Apuntó a un Hub de Conocimiento, al igual que Claude. En cuanto a la reestructuración, sugirió filtros según el tipo de contenido, me parece una idea acertada también, pero el cliente no tiene tanta información, no es amigable agregar un filtro para solo dos opciones.
La optimización estética sugerida es variada, sugirió separar la sección de los números y “reordenarlos”, mientras que sugirió cambiar el formulario por uno de pasos. Para un newsletter, poner pasos es extremadamente tedioso para el usuario.
La clavó al ángulo cuando dijo la palabra mágica: Storytelling. En UX, el storytelling es clave para organizar correctamente los módulos del sitio. Esto es lo que rescaté de todo esta respuesta y que Claude ni me tiró.
Ahora, dame un JPG
“Generame un JPG con esa idea así yo después lo replico en Figma”. Ese fue el prompt que le tiré a los dos. Quería ver de una manera visual lo que comentaban, no por vago, si no para ver sus capacidades y de qué manera me podría ayudar en el diseño.
Claude parece que está más orientado a lenguajes de programación. Y aunque no se lo haya pedido, me escupió un HTML para luego sacarle un Screenshot. Tardó unos 6 minutos en todo el circo para que el resultado sea: mediocre con ganas. Cambió la imagen que le di en el prompt, y usó un lenguaje visual genérico, el mismo que usan en todos los frameworks de esas IAs que generan sitios. Cambió totalmente la información, cambió el rubro del cliente, y eliminó todo uso de imágenes ya establecidas. Inventó también información, pero eso me agrada, yo también lo hago con tal de rellenar.
Ah pero Gemini, como dije antes, es más directo. Me tiró un JPG como le pedí, no quiso embellecerlo, ni vender su framework, ni tragar créditos. Simplemente hizo lo que pudo manteniendo mejor la estética, al menos respetó colores, fondos, y hasta entendió sobre las jerarquías ya establecidas.
Teniendo ya mi idea previa, este JPG se acerca bastante mejor, y me fue suficiente para ir al Figma y diseñar.
Mi veredict-opinión
Ambas herramientas son interesantes. Yo creo que Gemini acierta mejor al ser de contenido más general, mientras que Claude apunta más a un público de código, y aún así, se olvidó que una UI va de la mano con el UX. En este caso, analizando la resolución del problema, siento que Gemini fue mucho mas directo, no me hizo perder el tiempo, me disparó una idea más acorde a lo que yo ya tenía en mente.
Entiendo también que estuve usando la cuenta gratuita de Claude, pero dos prompts y ya no me dejó iterar más, no es suficiente como para poder analizar pagar la herramienta para un caso real, viendo que el resultado no es lo esperado, además de dar muchas mas vueltas para resolver el problema (y eso que es un problema simple, no hace falta simular tanto Einstein) es una pérdida de tiempo mayor vs Gemini.
Por mi parte, Gemini me ayudó mejor, me sirve la herramienta para resolver, para entender y hasta para disparar ideas como dije antes.
Mi intervención final
Tomé de Claude como referencia visual la caja de videos, ya que el cliente maneja desde YouTube los videos y no tienen un thumbnail ni saben como hacerlo. Ojo que también pude visitar sitios webs para tomar la referencia. Pero en este caso prioricé resolver dos problemas: manejar la imagen independientemente de los videos y no depender del cliente para tener un thumbnail decente en el sitio.
Por otro lado, ninguna IA me lo sugirió, pero los módulos de join y free resources los “unifiqué” en una misma línea horizontal, es natural invitar al usuario a unirse a la comunidad, mientras que le ofreces el contenido gratuito mediante un CTA.
Dentro del storytelling que se pensó para el sitio, los números son importantes para captar la atención, por eso los mandé al frente luego del Hero.