Sobre el diseño de menéame

Esta semana comenzó una fuerte polémica por el nuevo rediseño de Meneame.net. Desde hace unos años menéame es uno de los sitios más visitados, con una ferviente comunidad que le da una actividad sin igual. Dicha participación hace que las opiniones estén a flor de piel sobre cualquier tema y, cuando se trata de la decoración de la casa de todos, siempre hay peleas.

Sin caer en los grupos que componen la comunidad de meneame, he visto que el nuevo rediseño en general, no está bien recibido. Existen, claro, los que están a favor, los que les da exactamente igual y, por último, en gran mayoría, los que están en contra. Creo que es un tema super-interesante de comentar, ya que, este tipo de reacciones tan populares siempre han tenido un efecto colateral en la historia de internet. Ejemplos han habido a patadas, pero este lo viviremos en directo.

Mi opinión, si es que vale de algo

Yo me encuentro en el grupo de los que no les gusta el nuevo menéame. Pero antes de que me salten al cuello, he de decir que soy un profundo admirador de la gente que está detrás del proyecto. Mi postura, mi forma de ver las cosas quizás difiera bastante pero nunca, nunca, me consideréis un anti-menéame, al contrario.

Por donde empiezo, creo que el grave problema de menéame es que ha sufrido un cambio notable a nivel estructuras. Sin caer en la descalificación de gusto personal, creo que el sitio no está gráficamente bien equilibrado. Puede gustar o no, el estilo personal de alguien, pero en diseño sabemos muchos que existe y se persigue un cierto “balance”. Esto hace que aunque un diseño no guste en lo personal, no pueda ser calificado de desequilibrado.

La elección de la paleta de colores

El nuevo sitio es muy naranja. A diferencia del anterior, el nuevo contiene muchas áreas naranjas que impregnan el campo de visión. Creo que esto dificulta bastante la idealización del sitio en sí. Prácticamente no tiene “aire” por donde respirar, y esto se nota mucho cuando se mira en los costados. El sitio se puede leer mejor cuando no supera cierto ancho pero al visualizarse en anchos de pantalla grande aparecen unas franjas naranjas que rellenan el área haciendo empalagosa la lectura. Sólo se pueden identificar dos colores en el sitio: naranja y azul. No está mal, pero se nota el desequilibrio, el naranja está impregnado en varias tonalidades lo cual se torna una gran masa igualitaria de color, por ende, más trabajo para identificar cosas a simple vista.

El otro punto crítico es la cabecera. Creo que el logo de menéame queda muy desmerecido, al igual que las opciones de navegación, que están distribuidas de forma irregular. Noto que la publicidad tiene mucho que ver en esta decisión, y creo que es el primer fallo grande. La cabecera es donde la gente opera con el sitio, y no necesariamente el mejor lugar donde poner un banner de semenjante tamaño. Si miramos otros sitio, como Digg, podremos ver que la cabecera es un lugar sagrado y luego, se vuelca la publicidad suelta, sin más en un área blanca. Siguiendo con el tema del logo, creo que ahora está dividido, la mascota creo que ocupa un lugar demasiado importante, y la palabra menéame, queda recluida. Además, la palabra menéame está sobre un fondo naranja sobre unas letras grisáceas, restándole importancia y contraste, quedando así sólo a buena vista el isologo. Creo que lo mejor es adoptar un modelo como el antiguo, o bien, si voy a mi opinión personal: cargarse el elefante –tengo fantasías con ello– ya que no existe una forma amena de ubicarlo en una grilla. Menos importancia al isologo y más a la palabra “menéame.net”.

Las opciones principales (puestas al lado del isologo del elefante) no se leen bien. Se podrán ver bien en algún que otro monitor pero como todo es naranja sobre naranja no hay constraste alguno, además, a simple vista se parecen más elementos de decoración y las pestañas pasan menos desapercibidas que estas opciones.

Para resumir: una buena cabecera sería ordenar linealmente todas las opciones principales, y luego, en una franja con bastante aire, sin elementos a los costados, el banner. Para los que usan bloqueadores de banners esto les supondría un problema visual menos y no quedaría algo vacío como se ve ahora. Todas las opciones de usuario (cerrar sesión, tu cuenta, buscador) las haría más visibles y grandes, porque es increíble que todavía en el año 2008 utilicemos tamaños 11px para monitores de 800×600 o menos.

El resto del sitio

El resto del sitio no ha cambiado tan radicalmente, igualmente hay algunas cosas que sí mejoraría. La barra de acciones (portada, populares y menear pendientes) creo que está desmerecida. Las líneas oblicuas de las pestañas me parece que no van con el diseño actual. Imagínense una persona vestida de traje con unas chanclas de piel y cara de osito, así las veo. Las haría rectas, alineadas junto a otros márgenes y, si me apuran, le daría algunos detalles pero sobre esa base, y le daría más contraste a las opciones, todo es tan naranja que a simple vista no se lee nada (soy un usuario con anteojos) así que os podéis imaginar el trabajo de contraste que haría en este sitio. Leer textos de color naranja sobre blanco para subir una noticia no hace más que marearme, y creo que llegado un momento no diferencio entre un título y una letra de cuerpo. Sería interesante realizar un trabajo de coloración más ordenado, dando detalles de colores a títulos, palabras en negrita y dejando el texto del cuerpo en un color negro, gris oscuro o bien, en otro color.

Me llama la atención algo, y son las categorías, puestas en esta letra tan pequeñita, en la parte superior ocupando un puesto interesante. Para mí es un parto leerlas, pero bueno, tengo el poder de subir el tamaño de las tipografías. Yo entiendo que, estos tamaños son ideales para textos que dan un tipo de explicación innecesaria, pero aplicar semejante tamaño de letra para navegar categorías no me parece correcto. Por otro lado, creo también que lo mejor sería ubicarlas en un lateral y no en la parte superior. Dejemos la parte superior para opciones de navegación más concretas, más orientadas a la acción como la que cumplen las opciones que se muestran por pestañas.

Igual montando todo esto, no entiendo lo básico: ¿qué diferencia hay entre tecnología y amigos? Al hacer clic en estas opciones no tengo idea alguna de lo que pasa, ni qué hace el sitio, si me da información sobre algo relacionado con categorías o bien me arma una lista de amigos, en fin, es como que está todo mezclado. En realidad, esas opciones filtran según unos parámetros, pero como yo no tengo amigos en menéame, me sale una página en blanco, creo que esto también es un problema, tienes que aprender cómo agregar a gente que conozcas para leer noticias que ellos publican. La funcionalidad me parece estupenda, pero como está montada me parece que no. Yo quitaría la opción de amigos de ese nivel y lo movería al arriba, y al acceder por primera vez a esa opción me encontraría una breve explicación sobre esa sección y cómo puedo empezar a aprovecharla.

El cuerpo del sitio (zona donde salen las noticias) sigue igual, quizás se hayan cambiado cosas pero mi mente ahora procesa una imagen muy similar a la antigua, y no me pierdo. De todas formas, me intriga algo: y ese algo es la pequeña estrella. No sé dónde están las noticias que marco como favoritas. Resulta que, a los 20 minutos caí en la cuenta que estaban en mi perfil. No está mal, pero estaría bien tener un acceso directo siempre a mano de mis notas favoritas.

Notas finales

Menéame es un excelente sitio, uno de los pocos que visito escribiendo yo mismo la URL en el navegador. Pero creo que menéame falla en comunicar a sus usuarios determinadas herramientas clave, y eso hace que se note un desorden gráfico y de opciones. Lo bueno es que menéame es un proyecto libre y, cualquiera puede ayudar a mejorarlo, tanto modificando el código fuente como realizando críticas constructivas, sin caer en las descalificaciones personales, ni profesionales.

¿Os gusta el nuevo diseño? ¿qué le cambiarían?

12 Respuestas a la entrada “Sobre el diseño de menéame”

Excelente post, es raro ver hoy en dia a alguien hacer una crítica sin irse por las ramas o apasionarse desmesuramente por su punto de vista. Igual ya tendrás tiempo porque los comentarios a cualquier post que implique fijar una postura van acompañados de grandes dosis de intolerancia y ese mismo apasionamiento que menciono.

Por mi lado, y hablando de Menéame, no me gusta el nuevo diseño. No entiendo por qué tantas lineas diagonales en la cabecera (las de los menús), y es cierto lo que dices del logo, queda bastante desmerecido.

Un saludo para ti!

Me parece extraño que un sitio de ese tamaño no tomen en serio el diseño. Tal vez deberian de contratar una agencia externa como happy cog o que se yo. A mi tampoco me gusto, y yo uso adblock y me quedan dos cuadros blancos gigantes.

Los ads en el header tienen mucha visibilidad, pero tambien le resta valor al sitio. Da la sensacion de que para los dueños es mas importante hacer negocio que dar ofrecer un buen servicio.

Mi opinion, saludos!

Hola Diego, gracias por las críticas constructivas.

A muchos de los puntos que tocas aunque sea indirectamente, están contestados en http://meneame.net/story/meneame-deberia-poner-mas-esmero-diseno-interfaz/1#comment-32

Es verdad que hay un problema de contraste en el menú, en las maquetas con el inkscape se veían muy distintas, incluso parecían más grandes (tuvimos que agrandar luego al usarlo unas pocas horas). Como ya dijimos, el menú estructura de esa manera es experimental y donde más riesgos corríamos, la diagonal de las pestañas es para hacerlo uniforme).

La intención era concentrar todas las opciones importantes para navegar por el sitio en una zona pequeña y relevante ya que lo quitábamos de la barra lateral izquierda. A pesar del cambio importante no recibimos quejas de nadie porque no haya encontrado cómo enviar una noticia (que es lo más importante que hay arriba).

Si comparas esta versión con la más antigua (http://v2.meneame.net) verás que a igualdad de tamaño de ventana muestra más información la última. Además funciona mejor con monitores pequeños (800×600 y 1024×768, salvo un detalle que descubrimos con los tooltips).

Por lo que respecta a las letras pequeñas de las categorías, lo pusimos así para que su consumo de espacio sea proporcional a su improtancia y uso: muy bajo.

Bueno, eso la justificación, hay que mejorar el contraste del menú, y la barra horizonatl de las metas (todoas, actualidad…) tendrá un degradado del color actual (igual que las pestañas) hacia el blanco del listado inferior.

Lo demás ha cambiado casi nada, salvo el más gordo de eliminar la inútil barra lateral izquierda.

Gracias por comentar Ricardo, quería enlazar la nota de menéame pero pegué la del blog en sí.

A mi personalmente no me gustó el diseño nuevo. Lo más chocante fue el encabezado con estas diagonales que propagaron hacia las “pestañas” del menú principal (tal vez secundario).

La ubicación de las opciones que aparecen al lado del logo es desafortunada. Más que nada para el “Enviar Noticia” que creo que es la herramienta más importante de Menéame, que debería tener su propio protagonismo en la interfase.

Coincido con lo que dijo Elías de IsoPixel:

Menéame es para mi el típico caso de un proyecto realizado casi enteramente por programadores, que cumplieron bien su cometido en lo que a líneas de php se refiere, pero que de diseño saben más bien poco

Yo visito Menéame a diario, y ya el diseño anterior me molestaba. Pero con Stylish lo adapté a mi gusto, eliminando todo aquello que me generaba ruído, cambiándolo a un ancho fijo porque en mi monitor de 22 pulgadas es realmente molesto leer líneas tan grandes, y por último agregando espaciados que tanta falta le hacen para no sentirte como bien decís: ahogado.

Yo apostaría por limpiarlo más. Manejar el color naranja con un poco más de sutileza o delicadeza. No es cuestión de hacer un sitio “maricón”, simplemente en algo más tranqui que no te haga tanto ruído cuando lo vez por primera vez. Por ahí algunos bordes redondeados (aunque más no sea utilizando los estilos de Firefox para no cargar imágenes) ayudaría.

No deja de ser un gran sitio, pero podría ser mucho mejor. El diseño no lo es todo, pero … ayuda… y mucho.

Un verdadero placer ver como el debate se está extendiendo por sitios del calado de Minid con reflexiones tan profundas como las expuestas en este artículo. Ese era mi objetivo prioritario, crear debate para ayudar al sistema, que se lo merece por muchas razones, la principal por ser libre y estar a disposición de quien lo quiera usar o modificar.

Al principio “pasé miedo” de que se convirtiera en un “toma y daca” entre los usuarios exacerbados pro-meneame y anti-meneame, pero no, al final se está generando mucho contenido verdaderamente interesante.

Un saludo.
Elías Notario.

Y en monitores con una resolución muy alta, se ven las letras muy pequeñas y molesta leer.

Excelente análisis Diego. No tengo más que añadir, sólo aprender.

Un abrazo.

Buena crítica Diego, sí señor

Da gusto leer críticas de diseño de esta calidad.

Creo que el anterior era más atractivo, parece que ha dado un paso atrás.

Escrito por Arturo
Agosto 2nd, 2008 at 3:30 pm

Bueno, creo que el rediseño de delicious, que personalmente me encanta, viene que ni pintado para esto; webs de enlaces, de paletas monocromáticas, etc… La comparación actual del rediseño de ambas dejan perfectamente claro que la de meneame.net, como mínimo, se ha quedado coja.

http://meneame.net
http://delicious.com

Paz.

Escribe tu comentario

Puedes utilizar algunos elementos de XHTML en los comentarios.