Genial formulario con CSS y jQuery !!!

Genial formulario con CSS y jQuery !!!

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.dark

 

 

Diseño de interfaz, menú hamburguesa. Animaciones gratis !!!

Diseño de interfaz, menú hamburguesa. Animaciones gratis !!!

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.

 

UI – Guía de tamaños de fuente

UI – Guía de tamaños de fuente

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.

Densidad de pixel, tamaño de diseños para HTML, Android e iOS

Densidad de pixel, tamaño de diseños para HTML, Android e iOS

A la hora de diseñar para múltiples dispositivos, tanto en dispositivos iOS como Android, corremos el peligro de no tener en cuenta las a veces enormes diferencias entre estos y que lo que en un dispositivo se ve bien, en otro aparezca muy pequeño o muy grande. En este artículo, intento abordar de una manera global el diseño tanto en apps como en html para dispositivos móviles, dado que en ambos casos tenemos que tener en cuenta varios aspectos para que la experiencia usuario sea óptima. Para ello es fundamental conocer varios conceptos que vamos a tratar a continuación.

Para empezar, sabemos que un pixel es un punto que emite un único color o escala de grises en una pantalla. Es obvio que cuanto mayor sea el número de pixels, más detalle y nitidez tendrá la imagen que estemos viendo, aquí es donde entra en juego la densidad de pixel.

Las pantallas se miden en pulgadas (1 pulgada = 2,54 centímetros), y cuando damos la medida de una pantalla, lo hacemos tomando como referencia su diagonal, cuando nos dicen que una pantalla es de 25 pulgadas, nos están diciendo que su diagonal mide 25 pulgadas, es decir, 25×2,54 cm

La densidad de píxeles es la cantidad de pixels que hay en una pulgada de una pantalla. Cuanto mayor sea este número, más nítida será la imagen y con más detalle. Esta cantidad de pixels que hay en una pulgada, se mide en pixels por pulgada ppp o en ppi (pixels per inch) o dpi  (Dots per Inch). Con lo cual una pantalla de alta densidad será aquella que más ppp tenga, esto significa que si hablamos de tamaños, cuando hacemos un botón por ejemplo de 100x60px, se verá más grande en una pantalla de baja densidad que en una de alta densidad.
Para calcular la densidad de una pantalla; densidad de pantalla = anchura de la pantalla en pixels / anchura de la pantalla en pulgadas

En el siguiente gráfico, podéis ver dos botones, los dos con las mismas dimensiones, 10 x 4px. El de la izquierda sería el resultado de mostrarlo en una pantalla de más densidad que el de la derecha, concrétamente 4 veces más pixels por pulgada que la de la derecha.

DP, pixeles de densidad independiente para Android

Para evitar este problema y que cualquier gráfico o imagen se pueda ver igual en cualquier pantalla, tenemos los DP, pixels de densidad independiente.

Los píxeles de densidad independiente son una unidad de píxeles virtual, que nos permiten definir las dimensiones de disposición o posición, de una manera independiente a la densidad de pantalla.

Un pixel independiente equivale a un pixel en una pantalla de 160 ppp.

  • px = dp * (dpi / 160)
  • dp = (ancho en píxeles * 160) / densidad de la pantalla

Se toma una pantalla de densidad «media» 160 ppp. En tiempo de ejecución, el sistema escala las unidades dp, según sea necesario, en función de la densidad real de la pantalla en la que se esté mostrando el contenido.

  • Para una pantalla de 160 dpi, 1 dp equivale a 1 px
  • Para una pantalla de 240 dpi, 1 db equivale a 1,5 px  — px=dp * (240/160); dp=px/(240/160); dp= 1,5px
  • 320 dpi, 1db=2px
  • 480 dpi, 1db=3px

En esta imagen podemos ver cómo si queremos mantener el aspecto de un botón en la pantalla, deberemos de hacer varios tamaños aplicando el factor que acabamos de ver, de ese modo siempre se verá en igual proporción dentro de las distintas pantallas. La escala no es real, pero si nos creemos que el botón que he dibujado en la resolución de 160dpi mide 10x10px, este botón habrá que guardarlo en 15×15, 20×20, ….

@1x, @2x, @3x, factores de escala para iOS

Cuando se trata de un iphone, los múltiplos que utilizamos son @1x, @2x y @3x que corresponden a las siguientes resoluciones:

Dispositivo Factor de escala
iPhone XS Max (1242x2688px)  – 458 dpi @3x
iPhone XS (1125 x 2436px)  – 458 dpi @3x
iPhone XR (828x1792px)  – 326 dpi @2x
iPhone X (375x812px) @3x
iPhone 7 Plus (414x736px) – 401 dpi @3x
iPhone 7 (375x667px) – 326 dpi @2x
iPhone 6s Plus, 8 Plus (414x736px) – 401 dpi @3x
iPhone 6s, 8 (375x667px) – 326 dpi @2x
iPhone SE (320x568px) – 326 dpi @2x
iPhone 4 (320x480px) – 326 dpi @1x

 

Tamaños mínimos

Teniendo en cuenta que deberemos adaptar nuestras imágenes a los distintos, o al menos, a las pantallas más habituales, otro factor a tener en cuenta es el tamaño mínimo que debe tener un elemento en pantalla, con el que el usuario vaya a interactuar, como por ejemplo un botón.

Cuando colocamos un enlace en un texto, el interlineado e incluso el tamaño del texto, hace en ocasiones muy difícil accionarlo, lo más aconsejable siempre es colocar botones, y estos botones también deben ser lo suficientemente grandes como para que cualquier usuario pueda accionarlo sin dificultad con el dedo. Para ello se establece que todo botón debe al menos ser 42 px y no más de 72px. Diversos estudios han dado como resultado, que el tamaño preferido por los usuarios es de 60px

Cuando tenemos varios botones en una página, en ocasiones hay que priorizar o dar más importancia entre unos y otros, esta prioridad se establece también con estos tres tamaños, baja prioridad para un 42x42px, prioridad media para un 60x60px y alta prioridad para un 72x72px.

NOTA: Estas medidas son aplicables a botones rectangulares, siendo estas medias la altura mínima de dichos botones.

Los espacios entre botones, también están estandarizados, se ha comprobado que cuando los botones estaban demasiado separados, los usuarios se movían al objetivo táctil mucho más lentamente, y cuando los botones estaban demasiado juntos, los usuarios tenían menor precisión a la hora de pulsarlos, así pues se establece o se recomienda, que el espacio entre botones sea el siguiente:

  • Separación entre botones de 42px: entre 36 y 48px
  • Separación entre botones de 60px: entre 24 y 36px
  • Separación entre botones de 72px: entre 12 y 24px

Encontraréis varias referencias y opiniones en cuanto a los tamaños, después de consultar varios estudios, creo que estos son los más aceptados, Android por ejemplo, recomienda que los objetivos táctiles sean al menos 48 x 48dp, con al menos 8dp (o más) entre ellos.

¿Cómo establecer en tu CSS las distintas imágenes-tamaño según la resolución de pantalla?

No voy a entrar en programación iOS y Android, porque no tengo ni idea 😉 Pero si os dejo a continuación el cómo abordar este tema en HTML. Lo que hacemos, es indicarle al navegador, mediante nuestra CSS que muestre una u otra imágen según sea la pantalla del dispositivo en el que se está mostrando nuestro diseño. Para ello usamos los llamados breakpoints o puntos de corte.

Según densidad:

@media
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
.miclase {}
}

Según ancho de pantalla:

@media 
only screen and (min-width: 320px) {  
.miclase {} 
}

Podemos ser incluso más específicos a la hora de determinar un punto corte en la CSS. En este caso, definimos ancho tanto mínimo como máximo, densidad e incluso orientación del dispositivo:

@media 
only screen and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (-webkit-min-device-pixel-ratio: 2) 
and (orientation: portrait) { 
.miclase {}
}

Los breakpoints más comunes son:

  • @media all and (min-width:1200px){ … }
  • @media all and (min-width: 960px) and (max-width: 1199px) { … }
  • @media all and (min-width: 768px) and (max-width: 959px) { … }
  • @media all and (min-width: 480px) and (max-width: 767px){ … }
  • @media all and (max-width: 479px) { … }

Salvar nuestro diseño en distintos tamaños lleva tiempo, además del tiempo de programación, por eso, antes de volverse loco y empezar a hacer todo tipo de versiones, lo recomendable es considerar nuestro proyecto, incluso si se trata de una actualización de un diseño viejo, consultar Analytics y ver qué especificaciones de pantalla son las  más habituales entre nuestros usuarios, y en función de eso, determinar qué puntos de corte tenemos en cuenta.

Hoy en día ya es imposible pensar en un diseño online y no tener en cuenta que será visto en dispositivos móviles, tablets, etc. Los diseñadores debemos estar preparados para asumir este desafío y seguir siempre las innovaciones, pero siempre teniendo en cuenta la usabilidad de nuestros diseños. ¡Innova con sentido común!

Tipografía digital. Guía rápida y descargas gratis.

Tipografía digital. Guía rápida y descargas gratis.

La tipografía siempre ha ocupado un lugar preferente en el diseño gráfico. Además de ser básica para destacar el mensaje que queremos comunicar, también nos sirve para establecer una jerarquía dentro de ese mensaje.

Esta guía pretende dar indicaciones básicas para poder hacer un uso correcto enfocado al diseño web y de web Apps.

(más…)

La importancia del rendimiento en una web o webApp

La importancia del rendimiento en una web o webApp

Cada vez son mayores las exigencias de las páginas web que diseñamos. Imágenes más grandes y pesadas o  efectos que hacen más atractiva la experiencia usuario, hacen que sea indispensable comprobar si esa experiencia  que estamos buscando no nos devuelva justo lo contrario, es decir, una página que tarda mucho en cargar y que como resultado nos da una tasa de abandono cada vez mayor. Nos gusta navegar y la oferta es inmensa, si un sitio nos hace esperar acabamos por abandonarlo antes de que cargue.

(más…)