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.
A la hora de diseñar un formulario, siempre tenemos que tener en cuenta que se trata de la parte más tediosa para un usuario, por eso mismo tenemos que facilitarte al máximo la tarea. Desde no pedir campos que no sean necesarios a intentar simplificar al máximo lo que pedimos, es decir, si le pido código postal ya me evito población y provincia porque lo puedo sacar internamente con ese código. Además de esto hay numerosos aspectos que veremos en mayor profundidad en otro post. Hoy vamos a ver cómo colocar los literales de los imput para que la experiencia sea más cómoda para el usuario y en particular un jQuery que además nos va a dar como resultado un formulario que además de usable va a sorprender a nuestros usuarios.
Tenemos varias opciones a la hora de colocar el nombre de cada imput.
NOMBRE EN LA MISMA FILA
Podemos colocar el nombre delante de cada imput, a mi no me gusta esa solución, ya que cada nombre va a tener una longitud y eso va a provocar un desorden visual que repercutirá notablemente en la usabilidad del formulario. Además y más importante, el desplazamiento horizontal que tiene que hacer el usuario con la vista es mucho mayor que en los demás casos, dificultando mucho la usabilidad.
NOMBRE SOBRE EL IMPUT
La segunda opción y más generalizada, es colocar los nombres encima de la caja, nos permite hacer un diseño amigable y cumple perfectamente los estándares de usabilidad. Todo queda en un mismo bloque, nombre e imput.
NOMBRE DENTRO DEL IMPUT
La tercera opción es colocar los nombres dentro del imput, colocándolo como» value». Ahorras espacio vertical, es más elegante, pero tiene un problema, y es que una vez que pinchas dentro del imput el nombre desaparece, por lo que si no has estado atento, no sabes qué te está pidiendo el formulario. Existe la solución, mediante código, de hacer que vuelva a aparecer el nombre cuando pinchamos fuera de la caja. En este caso, es fundamental que el color del texto sea muy suave para que no parezca que está rellenado el imput.
CSS + JQUERY
Esta opción que os traigo hoy es una mezcla entre la segunda y la tercera. Visualmente no puede ser más limpio y además hace «algo» que sorprenderá al usuario y le hará ser más receptivo en la aburrida tarea que es siempre rellenar un formulario.
Esta opción te muestra dentro de la caja su nombre, al pinchar sobre la caja para rellenar el dato, el nombre «salta» y se coloca encima de la caja, de modo que siempre será visible en el formulario. Particularmente me parece muy original, divertido y usable 100%
Aquí os dejo esta opción funcionando y con la posibilidad de que podáis coger todo el código y usarlo en vuestro sitio. Pincha dentro de cada imput para ver la animación.
See the Pen jqmLOw by Omar Benyakhlef Domnguez (@gloobs) on CodePen.
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.
Un sprite es el resultado de juntar varios fotogramas para crear una animación.
En este ejemplo lo que hacemos es crear la animación con una única imagen.
He cogido una imagen de 400×400 px y la he dividido en 4 columnas y 4 filas de 100×100 px. En cada una de las celdas he colocado un frame de la animación, el orden, de izquierda a derecha y de arriba a abajo.
Esta es la imagen utilizada, con medidas 400x400px
Con la CSS, lo que hacemos es marcar un área visible, coincidente con el tamaño de cada frame (100x100px) e ir sustituyendo lo que aparece en ese área moviendo la imagen grande. El resultado es una animación perfecta.
Aquí puedes ver el resultado, copiar el código HTML y el CSS
See the Pen oxWwRV by Omar Benyakhlef Domnguez (@gloobs) on CodePen.
Pulsa en 0.25x para ver bien la imagen
El código moveSpritesheet 1s indica el tiempo en el que se tiene que desarrollar el loop, es decir a más tiempo la animación será más lenta y viceversa.
Como podéis ver, el código es mínimo, por lo tanto poco peso y carga rápida, lo ideal !!!
Los SVG (del inglés Scalable Vector Graphics), son formatos gráficos vectoriales muy útiles por su flexibilidad y la capacidad de mostrar imágenes en web, sin perder calidad al cambiar de resolución.
Los SVG se definen en formato XML. Esto nos permite, además de dibujarlos, realizar acciones y animaciones sin necesidad de cargar la página. Es muy parecido al funcionamiento del HTML. Se definen diferentes elementos geométricos que se pueden ir alterando mediante órdenes.
Ventajas de utilizar SVG
Si los comparamos con los gif, png o jpg, las ventajas son:
Podemos crearlo y editarlo en cualquier editor de texto, no hace falta tener un photoshop o un illustrator por ejemplo.
Es escalable, esto significa que no tendremos problemas de calidad sea cual sea la resolución de pantalla y dispositivo, incluso podemos imprimirlos en alta calidad.
Podemos hacer animaciones como las que hacíamos con flash, pero en este caso, con permiso de la W3C.
Crear imágenes SVG con Adobe Illustrator
Existen numerosos programas para generar archivos SVG, incluso crearlos desde cero con código (soy diseñador y no llego a tanto), así que los creo con Illustrator. El procedimiento es el siguiente:
Una vez creado el gráfico, salvamos como SVGZ comprimido.
Opciones de guardado
Perfiles SVG – Deja la opción que viene por defecto.
Fuentes – En la opción de texto, te da la opción de trazarlo desde nuestro SVG o convertirlo en contorno.
Opciones – Podemos incrustar la imagen en el archivo SVG (aumentando el tamaño), o enlazar, que incluirá una etiqueta image que vinculará la imagen a nuestro SVG. Yo utilizo esta última.
Opciones Avanzadas – Selecciono elementos de estilo Illustrator que lo que hace es crear unos estilos CSS que gestionan el color de relleno y del borde. Para que el archivo pese menos, en decimales, dejo marcado 1 decimal
Flexible hará que los archivos se adapten al tamaño de la web (responsive) .
Código SVG abre el editor de texto y nos muestra el código generado por nuestro SVG.
Crear SVG en código
El mismo código que nos genera el Illustrator, podemos escribirlo nosotros directamente. En este ejemplo vemos cómo se pinta un círculo rojo con borde negro y situado en una posición determinada (coordenadas cx y cy) y con un radio r
<svg width="800" height="100">
<circle cx="500" cy="50" r="40" stroke="black" stroke-width="4" fill="red" />
Sorry, your browser does not support inline SVG.
</svg>
Tenéis toda la información para dibujar formas, atributos, etc… en W3Schools.com
Una de las reglas fundamentales y que tenemos que tener siempre en cuenta, es que los elementos que estén en una línea posterior, se pintarán por encima, es decir, si queremos hacer un gráfico en el que la base es un cuadrado rojo, encima hay un círculo negro y este a su vez contienen un texto, el código sería así:
Para empezar a pintar, tenemos que hablar del parámetro «d» cuya misión es definir la forma de un elemento. Este atributo contiene una serie de comandos que a su vez utilizan más parámetros.
Comencemos por un punto, el x,y (10,10). El comando «Mover a» se llama con la letra M. Cuando se empieza a leer el código llegamos a esa letra acompañada de dos coordenadas, sabemos que vamos a movernos a ese punto, es decir para pasar al punto (10, 10) escribiríamos «M 10 10«.
Todos los comandos tienen dos variantes, cuando los escribimos en mayúscula los referimos a coordenadas absolutas y en minúscula coordenadas relativas. Si estamos en el punto (20,20) y aplicamos M 10 10, le estamos diciendo que desde el punto en el que está se mueva hasta el punto 10, 10, si por el contrario escribimos m 10 10, le estamos diciendo que tome como referencia el punto en el que está, para desde ahí, desplazarse 10 en horizontal y 10 en vertical, es decir, en este caso acabaría en el punto 20,20
Comandos de línea
Hay cinco comandos de línea para <path>.
M (mover a), se necesitan dos parámetros para moverse, las coordenadas, x,y. Este comando no pinta, lo que hace es desplazar el cursor donde lo definamos.
En el siguiente código puedes ver cómo primero colocamos el cursor en el punto 10,10 para una vez ahí, pintar un círculo con coordenadas 10,10 (las hacemos coincidir con nuestro cursor) con un radio 2 y de color rojo
L (línea), dibuja una línea recta desde la posición actual a la siguiente que definimos. Se escribe L x y (or l dx dy) siendo dx dy los desplazamientos en horizontal y vertical. Este desplazamiento se puede también escribir definiendo cada desplazamiento por separado: H x (or h dx) V y (or v dy)
<path d="M 10 10 H 90 V 90 H 10 L 10 10"/> en este código se combinan las dos, primero definimos el cursor en el punto 10,10, luego hacemos un desplazamiento en horizontal de 90 (H 90), otro vertical de 90 (V 90) y luego mediante con el comando L le decimos que regrese en horizontal a la coordenada 10 10. Acabamos de dibujar un cuadrado negro
También podemos utilizar el parámetro Z para cerrar el dibujo (volver al origen definido con M), de este modo el código sería:
<path d="M 10 10 h 80 v 80 h -80 Z"fill="transparent"stroke="black"/>
La ruta se moverá al punto (10,10) y luego se moverá horizontalmente 80 puntos hacia la derecha, luego 80 puntos hacia abajo, luego 80 puntos hacia la izquierda y luego de regreso al inicio. Fill define el color de relleno y stroke el borde.
Comandos de curva
Son bastante más complejos, para empezar tenemos tres comandos diferentes que pueden definir curvas. Dos de ellas están basadas en Bezier y la tercera en arcos de círculo.
Curvas Bezier
La curva cúbica, C, se crea mediante Beziers cúbicos con dos puntos de control para cada punto. Por lo tanto, para crear un Bezier cúbico, debemos especificar tres coordenadas. C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
Las últimas coordenadas (x, y) definen dónde queremos que termine la línea. Los otros dos son puntos de control. (x1, y1) es el punto de control para el inicio de su curva, y (x2, y2) es el punto de control para el final.
Los puntos de control describen esencialmente la pendiente de su línea que comienza en cada punto.
Es un poco complejo, vamos a ver si puedo explicarlo con un gráfico.
Pongamos el siguiente ejemplo: <path d=»M 10 10 C 20 20, 40 20, 50 10″ stroke=»black» fill=»transparent»/>
Os pongo aquí la explicación de cómo pinta, relacionando cada punto con sus coordenadas en el mismo color.
Para unir varias curvas de Bezier, podemos utilizar el comando S o s, lo que hace es prolongar la pendiente última que hemos creado, utilizarla como otra pendiente y desde ahí seguir dibujando. Vemos el ejemplo a continuación, en el que vemos que el proceso es el mismo que el anterior, pero después del cuarto punto hay una S y lo que ha hecho ha sido prolongar la recta pendiente (la que baja y no acaba en un punto, para luego seguir con la pendiente creada por los puntos 150,150 y 180,80
Otro tipo de curva de Bezier es la curva cuadrática Q, que es bastante más simple que la cúbica.
Mediante un punto controla la pendiente de la curva tanto en el punto inicial como en el punto final. Y al igual que con la curva de Bezier cúbica, podemos unir múltiples Beziers cuadráticos, en este caso, con el parámetro T.
Os recomiendo si os interesa este tema, que acudáis al Developer de Mozilla, ahí podréis encontrar toda la documentación necesaria para controlar los SVG.
Una utilidad muy útil que tiene el SVG es que se puede animar, seguramente hayáis visto logotipos que se van creando en una animación. Podéis ver varios ejemplos en SVGATOR, que además es una web donde podéis animar online vuestros SVG.
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.
