Micro-interacciones multimedia. La diferencia está en los detalles

Podríamos definir a las micro-interacciones como acciones simples y pequeños momentos de intercambio entre el usuario y la interfaz. Provocan en el usuario una respuesta inesperada, poco intrusiva, le sorprenden, facilitan la comprensión y, en conjunto, mejoran su experiencia.

Beneficios:

  • Son útiles, funcionales. Es su objetivo principal, de no ser así, es mejor prescindir de ellas.
  • Sorprenden al usuario. Le tiene que producir una sensación agradable, nada molesto.
  • Mejoran el uso de la interfaz.
  • Animan al usuario a seguir navegando.
  • Deben de ser intuitivas y de fácil comprensión.

Su uso debe ser elegante, moderado y armonioso. No consiste en subir al usuario en una montaña rusa. Hay que concebirlas en conjunto, es decir, como pequeños elementos que funcionan en grupo y que buscan una experiencia de navegación optimizada y “diferente”.

Gracias a ellas podemos aportar el elemento diferenciador a nuestras aplicaciones y crear un vínculo con el usuario más allá de la utilidad.

“La diferencia entre un buen producto y un gran producto, son sus detalles”

Existe diferentes tipos de micro-interacciones: Gestuales, de navegación, de lectura, de conexión con el usuario, sociales, para formularios, persuasivos, hover, multimedia….

A continuación, podemos ver unos ejemplos de micro-interacciones multimedia, en los que el usuario descubrirá más información (texto, redes sociales, formatos para descarga, compartir) con un simple “hover” sobre la imagenUtilizando el mismo patrón para un elemento común, el usuario sabrá como proceder cada vez que vuelva a ver una imagen dentro de un mismo site.

Son micro-interacciones sutiles, sencillas, limpias y elegantes que aportan un plus al usuario. “Menos, es más” 

 

 

 

 

 

 

 

En los siguientes enlaces podemos ver recursos similares para inspirarnos:

BEMIT – Agregando funcionalidad a BEM

La nomenclatura BEM (Block, Element, Modifier) ofrece una manera de estructurar nuestro HTML de modo sencillo y claro:
Block (bloque) (Bloque: user)
Element (elemento) (Elemento dentro de bloque: user_ _bio)
Modifier (modificador) (Modificador del elemento: user_ _bio- -hightlighted)

Sólo viendo el código podemos establecer relaciones entre los elementos y estructurar mejor nuestro CSS.

Intentando mejorar la ya de por si útil BEM, Harry Roberts propone incluir el concepto de jerarquías de ITCSS (Inverted Triangle CSS). Las jerarquías ITCSS se aplican de mayor a menor especificidad en el DOM.

Sumaría a BEM + ITCSS = BEMIT.

HTML sin nomenclatura BEM

HTML con nomenclatura BEM

HTML con nomenclatura BEMIT

No se añade ningún elemento nuevo. Sigue existiendo sólo Bloques, Elementos o Modificadores, pero se añaden capas de significado:

c- : para Componentes
Es algo concreto, una parte de UI específica. Cambios en ellos suponen una modificación sólo en ese contexto. Modificarlos es seguro.

.c-modal {}
  .c-modal__title {}
.c-modal--gallery {}

o- : para Objetos
Puede utilizarse en diferentes contextos. Modificarlos puede suponer cambios en muchos sitios, no relacionados.

.o-layout {}
  .o-layout__item {}
.o-layout--fixed {}

u- : para Utilidades (Utilities).
Es una clase dada con un rol específico. No está ligada a ningún componente UI específicamente y por tanto puede ser reutilizada. Usada por librerías y metodologías como SUIT.

.u-clearfix {}

is- / has- : para Estados
El elemento tiene un estilo concreto debido a un estado o condición. Proviene de SMACSS.

.is-close {}
.has-dropdown {}

js- : para JS
Los elementos del DOM tienen una actuación sobre ellos, creada por JavaScript.

.js-modal {}

t- : para Temas
La apariencia del elemento se debe o se ve afectado a que está incorporado dentro de un Tema (theme).

.t-dark{}

s-: para un nuevo contexto (Scope).
Es similar a la usada con t-, pero no restringida a la mera apariencia.

.s-cms-content {}

qa- : para el equipo QA o testing.
Es una clase que se da para recalcar que se está haciendo una acción sobre el HMTL o los elementos del DOM, sin ninguna relación con el CSS.

.qa-error-login {}

_: para Hacks.
Lo ideal es su uso solo de manera temporal.

._c-footer-mobile {}

Enlaces de interés:

BEMIT
http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/

NAMESPACES (con más ejemplos sobre cómo llamar a las clases)
http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/

ITCSS – Primer paso hacia BEMIT

Simplificando mucho y a modo de corta introducción, un par de conceptos útiles para entender este post:
– BEM (Block, Element, Modifier): es una nomenclatura más estructurada del HTML y por tanto, del CSS.
– ITCSS (Inverted Triangle CSS): es una manera de organizar las CSS en función de su especificidad.
– BEMIT es la combinación de la nomenclatura BEM con la jerarquía de ITCSS.

BEM nos suena ¿cierto? No voy a profundizar en ello aquí. Solo diré que partimos de BEM para llegar a  BEMIT y que por el camino, nos conviene entender ITCSS. Pero ¿Qué es ITCSS?

ITCSS – Inverted Triangle CSS (Triángulo invertido CSS)

itcss

Ha sido desarrollado por Harry Roberts, siendo compatible con la nomenclatura BEM (y con casi cualquiera que estés usando a día de hoy en tus proyectos).

En su conferencia “Managing CSS Projects with ITCSS” explicó largo y tendido en que consiste, y os hago un breve resumen a continuación:

ITCSS es una manera de concebir el trabajo con CSS y HTML y organizarlo de una manera más óptima. No es una librería, no es una regla. Utiliza una jerarquía basada en el grado de especificidad del CSS, de menor concreción a mayor, creando un triángulo invertido. Arriba los elementos generales, en la última capa, los concretos, específicos.

ITCSS surge por la necesidad de:
– Desarrollar de una manera sana. Que nos permita escalar fácilmente el proyecto.
– Controlar y ‘domar’ la CSS y su cascada de herencias.
– Utilizar lo antiguo y lo nuevo, con un orden coherente.
– Reducir la redundancia.
– Acabar con las guerras de especificidad.

Ofrece:
– Una arquitectura escalable y limpia
– Es un meta framework: un framework para otros frameworks.
– Es muy simple.
– Es independiente de los preprocesadores. Lo puedes usar trabajando con lo que trabajes.

Si hiciésemos un estudio de Especificidad (‘Specificity Graph’) de la hoja de estilos de un proyecto cualquiera (especialmente si es de gran envergadura) nos encontraríamos algo parecido a la gráfica de la izquierda. Muchos picos asociados a alta concreción en nuestra CSS, seguido inmediatamente de un estilo mucho más general.

picos

Estos picos pueden darse por utilizar ID, !important, selectores anidados… Se salta continuamente de una regla específica, a una regla general, creando picos y valles de especificidad. Lo que provoca que las llamadas en nuestra CSS salten continuamente.

Para seguir una llamada sin saltos, lineal y más lógica, sería necesario agrupar nuestra CSS por especificidad.

llamadasCSS-d

Estos niveles de especificidad, ha llevado a la creación de las capas de ITCSS.

Se parte de 7 capas:

cssit-layers

1.- Settings – Se usa para las variables globales, elementos de configuración (Si usamos pre procesador, si no, podemos saltarnos esta capa)
2.- Tools – Mixins y Funciones (solo si usamos preprocesadores)
3.- Generic – Estilos CSS: reset, box-sizing, normalize.css…
4.- Base – Elementos HTML sin clases, selectores.
5.- Objects – Patrones de diseño, la estructura. Solo si usamos CSS dirigido a objetos (OOCSS)
6.- Components – Carruseles, calendarios… y sets de UI… Aquí metemos nuestros estilos concretos, para una lista concreta de un producto, por ejemplo.
7.- Trumps – Ayudas y lo que usamos para sobreescribir. La capa de los importants, la más específica de todas. Aquí habrá código muy concreto, para partes del DOM muy específicas.

No se trata de llamar de una manera específica a nuestras clases, para eso ya tenemos BEM. Es la manera en que vamos a llamar al archivo .css en función de a qué parte pertenece (y por tanto, que estilos hemos incluido en ella).

Todo el css que incluyamos en nuestro proyecto tiene que formar parte de alguna de estas capas. Nos obliga a pensar a qué pertenece cada línea de código antes de incluirla.

* Las media queries van incluidas en la css del elemento al que estamos dando estilos.

La nomenclatura para la css seguirá la pauta:

Nombre de la capa en la que nos hayamos + nombre de la css concreta:
· base .links.css
· components .carousel.css

El objetivo:
– Afectar al DOM de general a concreto.
– La especificidad aumenta de manera progresiva.
– Nunca se deshace, solo se añade.

No es un universo cerrado. En función de nuestra necesidades podemos añadir capas. Lo importante es seguir el orden de pirámide invertida:
– Escribir CSS en orden de especificidad
– Ser fieles al ‘Gráfico de especificidad’ evitando en la medida de lo posible, los picos.
– El orden en el que creamos las capas tiene que ser lógico. Por ejemplo, para una test AB podemos añadir la capa TEST entre Components y Trumps. O la capa THEME (también entre Components y Trumps).

Algunos documentos de interés:
PDF –  Conferencia – Managing CSS projects with ITCSS (todas las imágenes incluidas en este post, pertenecen a este PDF).

Hamburger Menu. ¿De verdad es la mejor solución?

4cace66e9cf326e23b428770233e5918

En numerosas ocasiones nos encontramos con el debate sobre la efectividad y universalidad del menú hamburguesa. Este debate se amplía aún más cuando empezamos a verlo en resoluciones desktop, donde el espacio ya no es tan limitado y el recurso a este tipo de menú suele darse por un tema más estético que operativo.

Os dejo dos interesantes enlaces sobre este tema:

Disfruten de sus hamburguesas 😉

 

Tutorial – Tipografía de iconos

En este tutorial me gustaría explicar un poco por encima cómo crear una tipografía con iconos para usar en nuestros proyectos web.

En este caso te enseñaré a añadir nuevos iconos a la tipografía Glyphicons que incluye Bootstrap, también nos vale para FontAwesome o para hacer una propia desde 0 :).

Qué necesitamos

– Un programa de diseño de tipografías, existen muchos (FontLab, Glyphs…), pero BirdFont es gratis, y aunque no es muy intuitivo, nos puede servir.

– Conversor de tipos como FontSquirrel, necesitaremos convertir el archivo resultante .ttf en formatos de fuente web: .eot, .woff y .svg.

– Los iconos que quieras meter en la tipografía en formato SVG: sin agrupar, sin trazados compuestos, todas las formas expandidas y fusionadas.

– Mucha paciencia! No desesperes, BirdFont tiene una interfaz un poco rara y poco intuitiva, así que intentaré simplificar y guiar al máximo los pasos.

Continue reading

La ‘curiosidad’ del viernes – Tipografías audibles, imágenes libres y frameworks

Una semana más empezamos el fin de la jornada laboral con un poco de inspiración:

TYPATONE

Últimamente estamos muy musicales, ya os enseñé qué divertido podía ser jugar con unas formas y unos cuantos sonidos en YUME en la entrada del viernes anterior.

Y ahora con TypaTone puedes convertir las letras en sonidos. Es muy creativo y siempre salen sonidos armónicos, por mucho que te empeñes en hacer cosas extrañas con las letras. Os animo a que lo probéis.

TYPASOUND

CODEPLY

¿Alguna vez has sentido deseos de poder acceder a diferentes Frameworks para elegir el mejor código para tu página sin tener que ir uno a uno? Pues bien, esto es exactamente lo que puedes conseguir con Codeply. Accedes a diferentes Frameworks a través de la página, y coges la parte que más te convenga: menús, acordeones, botones…

Lo bueno, es que el editor te deja copiar HTML, CSS, JS y es muy visual. Así que es bastante intuitivo.

codeply

En un principio tus búsquedas pueden ser algo erráticas. Pero, dadle una oportunidad, es una herramienta con potencial.

LIBRE STOCK

Como ya he visto que nadie se ha animado a tener unos cuantos “freebies” de ‘Halloween’ (cuanta animosidad contra esta fiesta) he tenido que cambiar el recurso gratuito que os quería aportar por este otro: ‘Libre Stock’.

Libre Stock‘ es una herramienta para buscar imágenes de stock gratuitas por la web. Te devuelve resultados en diferentes páginas de recursos de fotografía. Ahorraréis algo de tiempo. Me parece completa, aunque no vais a encontrar todas las que queráis. Algunas búsquedas tendrán que ser un poco más exhaustivas.

freestock

 

TIPOGRAFÍA Y MÁS TIPOGRAFÍA

Este viernes os estoy dejando recursos a mansalva ¿no?.

Si la tipografía es lo tuyo, te sonará la página Type Detail. Si no recuerdas haberla oído nombrar, tampoco te preocupes, ahora sí la conoces. Si utilizas su apartado de Recursos, tendrás acceso a cientos de recursos online, blogs y foros, que discuten, respiran y viven sólo para la tipografía. Qué ¿te das un vuelta?

type

PORTADAS ANIMADAS

Y por último y con esto os dejo ya, una curiosidad desde Vimeo. Portadas de libros clásicos, ilustradas y animadas. Muy trabajadas y muy ‘resultonas’ ¿cuál os gusta más?

vimeo

Consejos, trucos y ayudas para tus diseños y desarrollos Responsive

Aquí os dejo un enlace con 13 vídeos (duración total de una hora y media aproximadamente ) muy interesantes de Vitaly Friedman de Smashing Magazine sobre aspectos básicos a tener en cuenta en nuestros diseños e implementaciones Responsive. También si sois más de leer que de ver, os dejo una presentación también de Vitaly al respecto.

Espero que los disfrutéis

 

 

La ‘curiosidad’ del viernes – Aprende jugando y otros recursos animales

Cuándo te toca investigar durante muchas horas un tema que requiere código y más código, acabas exhausto. Si encuentras la respuesta fácilmente, te sientes poderoso. Pero si no das con ella tan rápidamente puedes: desesperarte, aburrirte, frustrarte o hundirte en la miseria.

Así que es de agradecer, cuándo se está comenzando a aprender alguna destreza nueva, que haya oportunidad de hacerlo de manera entretenida.

Y eso os presento hoy, aprender código con 5 juegos. Es cierto, queridos diseñadores, que son juego orientados a desarrolladores, si bien hay algunos que utilizan J-Query, así que… ahí lo dejo si queréis dedicarle un rato:

5 JUEGOS PARA APRENDER CÓDIGO.

code-combat

 

ANIMALES CON PURO CSS

Y para que no penséis, maquetadores del mundo, que me he olvidado de vosotros, os dejo un enlace a unas bonitas animaciones de animales solo con CSS. ¿No son motivadoras?

css-animales

 

 

365 PSD

Y como hoy es viernes, y en viernes siempre se agradecen los “Freebies” he aquí un recurso estupendo que me han pasado de archivos PSD.

Algunos gratuitos… otros no tanto. Pero buen recurso.

PSD

 

 

Nos vemos el próximo viernes.

La ‘curiosidad’ del viernes – Parallax y otras historias

Septiembre nos ha traído el recuerdo de que se acaba el verano, la jornada intensiva (para los afortunados que la hayan disfrutado)… pero para evitar que la tristeza nos sobrecoja, aquí un poco de inspiración “viernera”.

PARALLAX – STORY TELLING

Primero, en “Line25” han creado esta recopilación de 15 webs que usando Parallax te cuentan una historia.
Estas página llevan años circulando por la web, pero nunca está de más refrescarnos la memoria. Si sólo tenéis tiempo para ver alguna, os recomiendo encarecidamente “The hybrid graphic novel”. La propuesta gráfica es… en una palabra, brutal. Y otra que es muy diferente :”How far is it to Mars“, también es muy divertida.

pantallas-parallax

CARTAS 

Cambiando el tercio y volviendo a HTML5 y CSS3 ¿jugamos una partida de cartas?
El código de esta baraja de cartas está en Github.
Si, ya sé que sacar cartas una de tras de otra, puede parecer poco emocionante pero ¿qué queréis que os diga? Es muy entretenido. También se puede barajar automáticamente, distribuir las cartas…

baraja-cartas

CÍRCULOS CSS

Y por último, pero no por ello menos importante, Codepen. Ya sabéis, un clásico:
Círculos hipnóticos, ¡sólo con CSS! 

circulos-hipnoticos

¿Algún ruego, petición, pregunta? ¿No?… ¿Seguro? Bueno, pues hasta el próximo viernes.

La ‘curiosidad’ del viernes

Aquí os traigo una tontería muy curiosa y en definitiva, muy grande que no podía dejar de compartir. Y menos en un viernes tan festivo.

Crea tu propia ‘Medusa‘… con sus serpientes y su peinado ‘fashion’. En Codepen hay auténticas joyas, como ésta.

medusa

Le podéis echar un ojo al código, no tiene desperdicio.

Ahora solo falta que convierta las cosas en piedra, un Pegaso con su Perseo y ya tendríamos la historia completa.