Hoy toca repasar algunas cosas que NO hay que hacer en diseño web. Y para ello, nada mejor que utilizar 3 webs terribles como ejemplo que están publicadas y operativas. Aunque en un primer momento nos podamos desternillar de risa al verlas (de verdad, son MUY GRACIOSAS) si analizamos cómo y por qué nos hacen reír, obtendremos unas lecciones muy instructivas sobre lo que NO debemos hacer a la hora de diseñar una web.
Este artículo explora tres ejemplos en vivo: la página de Berkshire Hathaway, un museo dedicado a James Bond en Suecia y el sitio de la ¡Yale School of Art! (en fin…).
De cada uno desentrañamos por qué estas webs son un manual de malas decisiones y cómo no repetir sus torpezas.
Berkshire Hathaway
Por si alguien no lo sabe, Berkshire Hathaway es un gigante financiero global fundado por Warren Buffett y Charlie Munger, con participaciones en empresas tan conocidas como Coca-Cola, Duracell y GEICO, y con más de 310.000 millones de euros en efectivo. En fin, que se podían haber currado una web mejor, vaya.
Sin embargo su web oficial parece salida de la prehistoria de Internet. La home presenta un bloque de texto plano, sin imágenes, sin estructura visual y con tipografía monoespaciada. No hay elementos que guíen la mirada: ni jerarquías cromáticas, ni iconos, ni fotos. Solo un muro de palabras que asusta al usuario antes de que lea siquiera la primera línea.
Más allá de la estética, la web de Berkshire Hathaway ignora por completo principios básicos de usabilidad y diseño responsivo. No escala bien en móviles, carece de menú hamburguesa y obliga al visitante a hacer zoom y paneo constantes. El contraste entre texto y fondo es mínimo, lo que provoca fatiga visual. No hay CTA (call to action) claros, ni breadcrumbs para orientarse, ni separación de contenidos. En un sector tan competitivo, ofrecer al usuario una experiencia rudimentaria es un sin sentido absoluto.
En materia de SEO, esta web tampoco brilla. El contenido es casi todo texto sin formato: ni encabezados adecuados (H1, H2), ni meta tags optimizados, ni alt text en imágenes (porque no hay). Su velocidad de carga es sorprendentemente lenta para lo simple que es: el código está obsoleto y sin minificar. Google valora la accesibilidad, el marcado semántico y el rendimiento, pero aquí no se cumple ninguno de esos factores. En definitiva, un retrato de lo que no debe ser un portal corporativo moderno.
Si queréis ver el ejemplo claro de que el dinero no siempre lo compra todo, os dejo el enlace a su web: https://www.berkshirehathaway.com/
Museo-Tienda de James Bond 007
La James Bond Shop es un museo-tienda, o tienda-museo dedicado al elegante y estiloso James Bond en Nybro, Suecia. Y si el agente 007 destacaba por su elegancia y distinción, la tienda es una especie de basurero en lo que a diseño se refiere. Su catálogo incluye gadgets, pósters y ediciones de coleccionista, pero en cuanto a diseño web, hay más espionaje de errores que encanto británico. Al acceder, el usuario se topa con un slider que ocupa toda la pantalla, repleto de imágenes de baja resolución y sin indicadores de navegación. Los enlaces están escondidos bajo overlays opacos, y no existe un filtro de productos efectivo: todo aparece amontonado.
El caos visual continúa en sus fichas de producto. Fotografías minúsculas, descripciones comprimidas en bloques de texto, botones de “Comprar” que cambian de color al pasar el ratón (pero no de forma coherente). La tipografía es inconsistente: combina serif, sans serif y monospace en un mismo párrafo. Además, al añadir un artículo al carrito, la página recarga en lugar de usar pop-up o carrito dinámico, generando fricciones innecesarias. En fin, que al iniciar un proceso de compra, te metes de lleno en una de esas complicadísimas tramas de espías que caracterizan las películas de 007, que nunca sabes cómo van a acabar. Pues aquí, igual.
En cuanto a SEO, la James Bond Shop presenta títulos genéricos (“Product Page”), URLs llenas de parámetros sin limpiar y meta descripciones idénticas en decenas de productos. No se aprovechan datos estructurados para e-commerce, a pesar de tratarse de una tienda digital. Como resultado, la indexación es pobre y el posicionamiento orgánico prácticamente invisible. Un ejemplo flagrante de cómo no gestionar la visibilidad online de un negocio.
No obstante, si os queréis echar unas risas, os recomiendo que la visitéis antes de que la cambien :-).
Aquí os dejo el enlace: https://jamesbond-shop.com/
Yale School of Art
Y como en las películas más emocionantes, el final debe ser grandioso.
Para ponernos en contexto, os diré que la Yale School of Art es una institución académica de prestigio internacional, parte de la Universidad de Yale, que forma a artistas en disciplinas como diseño gráfico, pintura, fotografía y escultura. Con un legado que incluye algunos de los creadores más influyentes del siglo XX, brutal, ¿verdad?.
Sin embargo, su web es un experimento colaborativo que sacrifica usabilidad en favor de un formato wiki, o friki, como queráis llamar a esa aberración visual:
- El menú principal carece de jerarquía, las páginas tardan en cargar y los enlaces cambian sin previo aviso.
- El sitio padece de violencia tipográfica: párrafos justificados, textos superpuestos y tamaños de letra que oscilan sin criterio.
- La navegación por eventos y noticias es un ejercicio de paciencia, con calendarios interminables y enlaces de texto diminuto.
- No existe un buscador eficiente ni un índice temático; cada visita se convierte en un rastreo manual. Además, se abusa de animaciones automáticas que distraen e incluso bloquean la lectura.
Visualmente es una experiencia traumatizante.
Desde la perspectiva SEO, este portal universitario no desperdicia ni una oportunidad para hacerlo MAL: no hay jerarquización de contenido ni de heading tags, las URL no están optimizadas y carece de meta datos en gran parte de su contenido. La estructura es inexistente, por lo que los buscadores no interpretan correctamente la relevancia de cada sección.
Para un centro de arte de tal magnitud, ofrecer un entorno digital tan caótico resulta incomprensible.
Os dejo su enlace para que entendáis lo que es masoquismo visual: https://www.art.yale.edu/
En fin, que si queréis diseñar bien una web sólo tenéis que hacer lo contrario de estas webs.