por Omar Benyakhlef | Diseño Web, UX
Cualquier interacción realizada por un usuario será siempre más efectiva cuanto más se aproxime a un aprendizaje ya obtenido. Por ejemplo, el desplazamiento vertical se basa en el aprendizaje que tenemos todos de llevar años leyendo, por eso este desplazamiento funciona en general, siempre mejor que el horizontal.
El desplazamiento horizontal es el más complejo, se utiliza rara vez por eso mismo, aunque para mostrar información se lleva utilizando hace mucho tiempo en forma de sliders. La complejidad radica en que el movimiento en una página resta valor a cualquier otro mensaje de la página porque atrae la mirada, además, resulta extraño que haya tenido tanto tiempo de vida, porque está probado por numerosos estudios UX, que tienen una tasa de clics verdaderamente ridícula para todo el espacio en página que consumen, llevándose casi todos los clics el primer elemento del carrusel.
Si os fijais en la página de Apple, hace tiempo que prescindieron de esta fórmula, muestran esos mismo contenidos uno debajo del otro, siendo el resultado mucho más eficaz.
Sin embargo, dado que es muy difícil convencer a un cliente de no ponerlo, aquí van unas pautas para que funcionen de la mejor manera:
- No usar sólo el movimiento programado para acceder a cada diapositiva o banner, permitir que el usuario tenga la forma de controlar el slider accediendo al contenido que le interese. Lo ideal sería no dejar un movimiento programado, de tal modo que sea el propio usuario el que si está interesado en ver más ofertas sea él quien decida desplazarlas para verlas.
- En caso de movimiento programado, los intervalos han de ser lo suficientemente lentos, para dar tiempo a leer todo el contenido y por supuesto que no suponga un mareo en la página. La velocidad más rápida recomendada es de 10 segundos.
- El contenido de cada imagen ha de ser directo y breve, de tal modo que en ese tiempo al usuario le de tiempo de sobra para conocer todo el contenido.
- Los controles manuales han de ser siempre visibles y no perderse sobre las imágenes.
- El usuario tiene que conocer en todo momento la posición actual del slider, normalmente esto se muestra gráficamente con unos círculos huecos y uno macizo que indica el frame actual, es un sistema que de tanto verse ya se ha convertido en familiar y el usuario lo tiene perfectamente conocido, al igual que las flechas en ambos lados del slider.
- La animación entre imagen e imagen es mejor si la hacemos horizontal, de ese modo estamos dejando claro a cualquier usuario, que se trata de una lista en la que van a ir apareciendo más imágenes.
- Las animaciones han de ser sin fin, es decir, debemos evitar que después de llegar al último, regrese a toda velocidad al primero, eso produce estrés a la vista, es un movimiento muy brusco, por lo que después del último, mostraremos el primero con la misma velocidad que los anteriores.
- Aunque personalmente hago que toda la imagen sea enlace, si es recomendable que exista un botón que sea perfectamente identificable con mensajes claros y cortos, como «Más información» o «Comprar ahora».
- Hay que tener muy presente, que la información que mostramos en desktop va a llevar más contenido que en móvil. Si simplemente lo escalamos, seguramente será tan pequeño que no se leerá, por eso es mejor optar por mostrar una versión especial para dispositivos móviles. Por este motivo, es casi más práctico crear los banners no como imágenes, si no como elementos HTML, de tal modo que cada elemento se escale y coloque en su lugar más óptimo.
- Imágenes a medio mostrar. Si os fijáis en los sliders que tienen en Netflix, HBO… Veréis que las imágenes se cortan, tanto el primer como el último elemento cuando ya estamos hemos interactuado, y cortada la de la derecha en la primera pantalla, de este modo sin necesidad de flechas ni círculos, queda claro al usuario que hay más detrás, entenderá que es un carrusel desplazable e interactuará sobre él.

por Omar Benyakhlef | Diseño Web, UI, Usabilidad, UX
El menú hamburguesa es un botón que suele estar en la parte superior de la web, que muestra o esconde el menú en pantalla.
Lo que en un principio nace para la versión mobile, por la falta de espacio, se ha convertido en un recurso habitual también en los diseños desktop.
Tiene muchos detractores que alegan que ocultar accesos de contenidos perjudica la usabilidad, porque obliga al usuario a hacer un clic más, e incluso que es sólo un capricho de los diseñadores.
Personalmente, no puedo estar más en desacuerdo, os explico por qué.
Hace años quizás podría ser arriesgado, hoy en día cualquier usuario lo tiene perfectamente identificado, todos sabemos que ahí accionamos el menú.
En cuanto al hacer un clic más, creo que hay demasiado «gurú» que se ha aprendido un guión y ha dejado de lado el sentido común. La usabilidad efectivamente se ve favorecida cuantos menos clics necesites para acceder a un contenido, pero creo que tenemos que ver todo en conjunto y no pararnos en pequeños detalles.
En mis diseños siempre tengo en cuenta que el usuario haga los menos clics posibles para llegar al contenido que está buscando, pero tenemos que tener también en cuenta, que esta máxima de la usabilidad viene de cuando para pasar de una vista a otra tenías que cargar una nueva página, con una conexión lenta un solo clic podía suponer varios segundos de espera. Hoy podemos utilizar CSS por ejemplo para mostrar y ocultar ese menú, accediendo de forma instantánea a ese contenido. Así pues, no tengas miedo de lo que dice el «gurú», nadie se marchará de tu web por pulsar en la hamburguesa 😉
En cuanto a que el diseñador busca más la estética que la usabilidad, le pese a quien le pese, el diseño es fundamental sobre todo en la primera impresión, no hay nada más agobiante que una web con una barra repleta de enlaces, iconos de redes, banners,… Los espacios limpios también juegan un papel importantísimo en la usabilidad, una cabecera repleta de enlaces, produce más estrés que el tener que hacer un clic más para llegar a un contenido.
Al tener más espacio para mostrar los enlaces del menú, podemos distribuirlos de un modo que sean más legibles y más grandes que en un menú tradicional, ¿acaso el tamaño de letra no influye en la usabilidad?. Podemos meter textos grandes, acompañados de iconos, …. mil posibilidades que en una barra no es posible. Por supuesto que agradezco encontrarme un menú hamburguesa, incluso porque me apetece ver qué ha pensado el diseñador para sorprenderme.
Una vez acabado este alegato en favor de la hamburguesa, pasamos a animarlo, cosa que seguro que también leeréis por ahí que no es usable…
Aquí podéis ver varias muestras de animación. Simplemente copiad los códigos que necesitéis, es gratis 😉
See the Pen SVG Hamburger Menu Icon Animation Collection by Matthew Main (@matthewmain) on CodePen.dark
Pulsa en los menús para ver la animación.
Si no podéis verlo bien, seguid este enlace.
por Omar Benyakhlef | Diseño para móviles, Diseño Web, Fuentes, UI, Usabilidad, UX
Cuando hablamos de diseñar para web o app, una de las preguntas que me suelen hacer es ¿cuál es el tamaño correcto que debo usar?.
La proliferación de pantallas HD lleva tiempo dándonos dolor de cabeza a los diseñadores. Lo que en un principio sólo era un simple «Pixel (px)» ahora se ha convertido en «puntos (pt)», «píxeles escalables (sp)» o «píxeles independientes de la densidad (dp)» como para no preocuparse !!
En este post no nos vamos a meter en temas de programación, vamos a enfocarlo sólo desde el punto de vista del diseñador, si se te escapan estos términos o la densidad de pantalla, o los factores de escala, lee este post de Densidad de pixel, tamaño de diseños para HTML, Android e iOS
Pues bien, para definir el tamaño correcto de fuentes, como es evidente, habrá que diferenciar si se trata de web, de web-mobile, de iOS o de Android, vamos a ello:
NOTA: Todas estas pautas están definidas por Google y Apple developer.
Pautas de tipografía de iPhone
Títulos de página, títulos modales (el mayor tamaño para título será de 34pt) |
17pt |
Texto de párrafo, enlaces |
17pt |
Texto secundario |
15pt |
Texto terciario, subtítulos, botones segmentados |
13pt |
Botones, entradas de texto |
17pt |
Barra de acciones (leyenda de iconos de acción) |
10pt |
Pautas de tipografía de Android
En este caso tomamos como referencia la fuente roboto
Títulos de página |
20sp |
Texto de párrafo, enlaces |
14sp |
Lista de títulos |
14sp |
Lista de títulos de elementos, fragmentos de texto importantes |
16sp |
Texto secundario, subtítulos |
14sp |
Botones, pestañas |
14sp |
Entradas de texto |
16sp |
Pautas de tipografía para Web
Títulos de página |
20px – |
Texto de entrada |
16px |
Tamaño de cuerpo |
16px |
Texto secundario |
13 – 14px |
Los títulos a partir de 20px, luego ya queda a criterio del diseñador si quiere usar títulos extra grandes.
Equivalencias entre pt, px, em, %, sp
Para ver la equivalencia de sp o dp con px, accede aquí: Equivalencias px dp
Pt |
Px |
Em |
Porcentaje |
6pt |
8px |
0.5em |
50% |
7pt |
9px |
0.55em |
55% |
7.5pt |
10px |
0.625em |
62.5% |
8pt |
11px |
0.7em |
70% |
9pt |
12px |
0.75em |
75% |
10pt |
13px |
0.8em |
80% |
10.5pt |
14px |
0.875em |
87.5% |
11pt |
15px |
0.95em |
95% |
12pt |
16px |
1em |
100% |
13pt |
17px |
1.05em |
105% |
13.5pt |
18px |
1.125em |
112.5% |
14pt |
19px |
1.2em |
120% |
14.5pt |
20px |
1.25em |
125% |
15pt |
21px |
1.3em |
130% |
16pt |
22px |
1.4em |
140% |
17pt |
23px |
1.45em |
145% |
18pt |
24px |
1.5em |
150% |
20pt |
26px |
1.6em |
160% |
22pt |
29px |
1.8em |
180% |
24pt |
32px |
2em |
200% |
26pt |
35px |
2.2em |
220% |
27pt |
36px |
2.25em |
225% |
28pt |
37px |
2.3em |
230% |
29pt |
38px |
2.35em |
235% |
30pt |
40px |
2.45em |
245% |
32pt |
42px |
2.55em |
255% |
34pt |
45px |
2.75em |
275% |
36pt |
48px |
3em |
300% |
Nielsen sugería un tamaño mínimo de 10 puntos correspondiente a 13px o bien 12 puntos que corresponde a 16 px si el público objetivo eran personas mayores.
Si nos fijamos en alguno de los sitios más visitados, Twitter, Amazon o Wikipedia, utilizan 14px y Google 13px
Todas estas tablas y medidas significan más tiempo a la hora de desarrollar un trabajo, pero son indispensables si queremos que el resultado de nuestros diseños sea perfecto en cualquier pantalla. Pero además de los tamaños de fuente, hay otros factores que son muy importantes y que ayudan a que la usabilidad sea mejor, un ejemplo es el interlineado, de nada sirve utilizar buenos tamaños si luego hacemos denso el texto. Como norma general se usa un mínimo del 120% del tamaño de la fuente para el interlineado, siendo 1.5em, 150% lo ideal- Tenemos que hacer que la lectura sea fluida, que no cueste diferenciar el renglón, pero que tampoco haya que pegar grandes saltos de una línea a otra.
Otra de las recomendaciones, se refiere a la cantidad de texto por línea. El ancho óptimo va de los 45 a 75 caracteres, estableciéndose que una línea de 66 caracteres se puede considerar ideal para obtener una buena experiencia de lectura.
Si lo que te preocupa es el contraste, hay una herramienta muy útil que nos indica si es o no correcta la elección que hemos designado a nuestro fondo y tipografía. Contraste fondo-tipografía
Más abajo tienes más artículos que te pueden ayudar también a la hora de elegir la fuente correcta.