UI/UX 101 para Amateurs (porque, en serio, lo necesitan)
Para este mensaje quiero que me visualicen como los Volturi juzgando desde el palco. Será más divertido.
Hay que entender que estos consejos son agnósticos en el estilo que tengas para hacer tus cosas. Y no tienen por qué seguirlos. Yo a veces ignoro algunos y no exploto (principalmente el de contraste). Pero esta será el primer y único aporte de caridad que haré para esta comunidad que hace codes. Dado que con el reciente drama, lo mismo, algunos se interesan (lo más probable es que no).
Si alguien viene a contradecirme algo, que me enseñe su nómina primero.
Estructura
Dentro del concepto de estructura existen dos modelos, se les llama F y Z. Esto es de parvulario casi, y seguro que intuitivamente habéis llegado a lo mismo sin saberlo:
F es cuando un diseño tiene una columna.
Z es cuando un diseño no tiene una columna.
Ahora, sobre eso, os tenéis que preguntar una cosa: ¿Cómo leemos? Si vuestra respuesta es otra cosa que no sea «De izquierda a derecha y de arriba a abajo», ¡Felicidades por no ser de Occidente! Me sorprende que hayas encontrado esto. Para los demás, leéis de izquierda a derecha y arriba a abajo.
El cómo leemos influencia el cómo se estructuran las webs. Por eso, si por casualidad visitas una web asiática, te quieres pegar un tiro. Simplemente, su estructura no está pensada para como nos hemos educado desde Primaria.
Sobre eso, hay que tener en vital importancia como se presenta el contenido. Nuestra cabeza prioriza siempre el lado derecho porque, como ya hemos dicho, leemos en esa dirección. En el diseño en Z da igual, porque no hay columna. Pero en el F sí.
Así pues... ¿Qué es lo imporgtante en un foro? ¡El foro! Así que sí ponen una columna (por favor, nunca dos, no son una red social donde necesitan esa funcionalidad), siempre en el lado derecho.
Contrastes
Esta es una norma que me salto a veces. Quiero decir, en mi foro Brave New World me la salto. Pero hay que tenerla en cuenta.
La norma radica en que NO SE DEBEN USAR COLORES CLAROS SOBRE UN FONDO CLARO, NI COLORES OSCUROS SOBRE UN FONDO OSCURO. Es un poco de calle, pero sorprende la gente que lo ignora.
¿Que por qué lo hago yo? Quería poner la bandera Republicana (de Españita) en los grupos. Y para mí un meme vale más que mil palabras.
Sin embargo, el contraste es algo que varía mucho. Depende no solo de los colores (y lo estridentes que sean), sino de a fuente y su tamaño. Podría proporcionar checkeadores, pero es algo con lo que tendrán que ir a ojo. ¡Good luck!
Fuente
Aquí no hay debate. Mínimo 16px (o lo que es lo mismo, 1rem). Con un interlineado de 1.5 veces el tamaño de la fuente (24px o 1.5rem). Su vista lo agradecerá.
Puede haber elementos secundarios más pequeños. Y el punto anterior de Contraste influye. Así que deben ir un poco a ojo. Por norma general, si necesitan zoom para ver algo (EN ESPECIAL LOS MENSAJES DE UN FORO, QUE SON EL CONTENIDO PRINCIPAL), la fuente es demasiado pequeña.
Resolución
Sé que muchos de ustedes no han pasado de pantallas de 800px de alto. Sé que imponerles que atiendan a resoluciones más altas que 1080p les sonará a clasista. Pero no saben lo rotas que se ven sus skins cuando se las mira por otra pantalla que no sea la suya. Y desde luego, no saben lo horrible que son de visitar, incluso con 170% de zoom, en una pantalla 4K.
¿Cuál es la solución? Es un secreto que diseñadores de todo el mundo saben desde 2003, pero se lo voy a compartir: usen un cuerpo para el foro de 1280px de ancho (incluso se puede menos, yo hice una con 1100px) Y CÉNTRENLO. No es tan difícil.
Navegadores
Sé que hace unos años estaba muy de moda decir «Skin codificada para Chrome uwu» y quedarse tan anchos. A esa gente tengo que decirle: ¿OS HABÉIS FUMADO ALGO?
Entiendo que Chrome (y derivados) son el navegador más usado. Entiendo que targeteando a eso, en específico, se cubre el 90% de la userbase. PERO NO, GENTE, TENGAN UN MÍNIMO DE PROFESIONALIDAD. MIREN DE CUBRIR AL MENOS FIREFOX TAMBIÉN Y, SI PUEDEN, SAFARI.
Móviles
Honestamente, esto es algo de lo que pueden sudar. Yo lo hago con mis skins por flexear, pero no es necesario. He mirado mis Analytics y solo 4 usuarios en 4 foros (retirando duplicados, 30 en total) visitan foros en móvil. No renta el esfuerzo de pensar todo de 0 para eso.
Cabeceras
Voy a empezar esta sección con una skin que no peca tanto del error. Una de un foro de un... ¿semipana? De alguien con quien hablo semiregularmente, que me cae bien y no tiene una skin que me parezca fea.
Lo hago porque a veces me gusta pegar a mis amigos. Y porque no es NI DE LEJOS, un foro con un caso grave de lo que comento.
Ese foro es DC New Frontier. ¿Cuál es el problema? En principio nada. A fin de cuentas, si el foro va a tener tablón, la suma de este y la cabecera no debería ser más de una vista (vista es un scroll completo de la pantalla, 100vh en CSS). Y la skin lo hace. Sin embargo, lo hace en todas las vistas (subforos y temas). Y eso es un problema.
¿Por qué? Se preguntarán. Porque debes hacer scroll cada vez que vayas a lo que te interesa. La información. Ya sea el propio tema o el listado de temas. Y lo mismo, una vez no pasa nada, dos tampoco. Pero cada vez acumula al medidor de coñazo. Y eventualmente o te acostumbras, o navegar implica querer pegarte un tiro. ¡Miren qué cómodo queda si se quita en temas (y lo mismo pasará con subforos)! No es muy difícil implementar un js que elimine un elemento si la ruta no es "/". Pueden preguntar a ChatGPT incluso. Les dejo uno que furula con ese foro.
Y ojo, como he dicho. DC New Frontier lo hace bien. Solo un scroll. Hay foros donde la cabecera es un scroll entero y luego va el tablón. NO HAGAN ESO.
Contenido inaccesible
Llegamos al último punto. ¡Al fin! ¡Mi tortura termina! Por suerte, es lo más de calle. Incluso más que la parte de Navegadores. Y es, como dice el título, el contenido inaccesible.
Para ello, me remito a otro foro que tengo afiliado. Fragments of the Masks (@fom-rol).
¿A qué me refiero con «Contenido inaccesible»? Básicamente, que todo enlace en el foro no debería ser cubierto por un bloque invisible. Salvo que esa sea la intención. Cosa que, en este caso, no creo que lo sea.
¿Por qué no lo creo? Miren el tablón, con su lindo Últimos Temas. Intenten pulsar el primer enlace. No pueden, lo sé.
El motivo de eso es que una imagen lo cubre. La imagen de cabecera. Hipotéticamente, se podría apañar la imagen para arregarlo. Pero es un error causado por la confusión de z-index.
Idealmente, la solución más sencilla es pensando mejor la cosa antes de ponerte a codear, o testeando antes de publicar. Pero todo el mundo tiene errores, ¡incluso yo! Así que dejo un apaño guarro AQUÍ.
