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:

5 WAI ARIAS estáticas que mejorarán la accesibilidad de un sitio web

aria-label

Identificar menús:

<nav  aria-label=”Menú Principal”>

<nav  aria-label=”Menú Secundario”>

<nav  aria-label=”Menú de idiomas”>

 

role=”presentation”

Para eliminar la semántica nativa de elementos. Por ejemplo una tabla usada para estructurar contenidos o una imagen decorativa que no queramos que sea percibida por los lectores de pantalla.

<img src=”separador.jpg” role=”presentation” alt=””>

 

aria-live=”polite”

Indicar cuando un contenido se ha actualizado mediante un aviso al usuario, pero sin interrumpir su actividad dentro del sitio. Regiones activas como widgets de redes sociales.

<article  role=”article” aria-live=”polite”></article>

 

role=”button”

Identificar botones en elementos que funcionan como tal pero no son etiquetas semánticas de manera nativa.

<span role=”button” id=””> cerrar </span>

 

aria-required=”true”

Incluir en todos los campos obligatorios de un formulario.

<input type=”text” aria-required=”trueid=””>

 

 

10 criterios fundamentales a cumplir para crear una web accesible

1.ESTÁNDARES Y SEMÁNTICA APROPIADOS

Hay que maquetar los elementos siguiendo un etiquetado válido y una semántica correcta. Maximizaremos la compatibilidad con las aplicaciones de usuario y obtendremos un código robusto.

No hagas de un span un botón pudiendo incluir un button o un input type=”button”. Evitarás tener que forzar el foco y describir la semántica del elemento.

EVITAR:

<span tabindex=”0” role=”button”> </span>

USO APROPIADO:

<button></button>

<input type=”button”>

 

2.ACCESIBLE MEDIANTE TECLADO

El sitio debe ser accesible mediante el teclado. El usuario debe poder tabular entre enlaces e inputs.

¿Qué hacemos si un elemento no adquiere el foco de manera natural?

Podemos forzarlo incluyendo el atributo tabindex=”0″, directamente en el código o dinámicamente.

Ejemplo de un foco forzado con tabindex:

<span tabindex=”0” role=”button”> Cerrar menú </span>

 

3.ORDEN DEL FOCO

El foco debe mantener un orden coherente cuando tabulamos por sus enlaces e inputs. El orden es de izquierda a derecha y de arriba hacia abajo.

Para no tener que forzar el orden natural se debe maquetar con coherencia organizando los elementos en el html en el mismo orden en el que se van a tabular.

 

4.VISIBILIDAD DE FOCO

El foco debe ser visible.

Incluir en la hoja de estilos la clase :focus para hacer visibles enlaces e inputs.

Ejemplo muy visual de esta pauta: https://www.gov.uk/

 

5.PLAY / PAUSE

Todo el contenido dinámico debe poder pararse. Hay que incluir un play / pause en slider, carruseles o contenido multimedia. No olvidemos que esos botones deben poder activarse o desactivarse con teclado y adquirir el foco.

 

6.DESCRIBIR IMÁGENES…. O NO.

Es bien sabido que las imágenes en una web deben contener una etiqueta alt descriptiva pero, si dicha imagen tiene una finalidad puramente decorativa, no tiene por qué describirse y será ignorada por los lectores de pantalla . En este caso la etiqueta alt se mantendría, pero vacía.

Ejemplo:

<img src=”coche.jpg” alt=””>

 

7.NUEVA VENTANA

Si una página o un documento se abre en una nueva ventana hay que indicarlo, o con texto, o visualmente con un icono y un alt.

Ejemplo con texto:

<a href=””>

Ver enlace (Nueva ventana)

</a>

Ejemplo con imagen:

<a href=””>

Ver enlace <img src=”nueva.png” alt=”Nueva ventana” />

</a>

8.FORMATO DE UN FICHERO

Es importante informar adecuadamente sobre los ficheros alojados en el portal. Indicar el formato, el tamaño y  si se va abrir en una ventana nueva.

Se debe incluir como texto y visible o con imágenes en el alt. Evitar dar la información únicamente en el title.

También deberíamos indicar un enlace a un software gratuito que permita visualizar los archivos (por ejemplo Adobe Reader para formatos PDF). Podemos añadirlo en la misma página donde se descargan los documentos o en la sección de accesibilidad.

Ejemplo:

Nombre del fichero.  Formato PDF, 161 KB  (Nueva ventana)

 

9.OCULTAR CON CSS

Usar display y visibility en la clase para ocultar visualmente y a los lectores de pantalla.

.none{

display:none;
visibility:hidden;

}

Ocultar desplazando el elemento fuera de pantalla para ocultar visualmente pero NO a los lectores de pantalla.

Ejemplo:

.oculto {

clear: none !important;
float: none !important;
font-size: 0em;
left: -999999px !important;
line-height: 0px;
margin: 0px !important;
padding: 0px !important;
position: fixed !important;
width: 100%;

}

Ejemplo con la clase de Bootstrap

.sr_only {

position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}

10.LABEL O TITLE

Relacionar label y su campo mediante for e id.

Si no existen labels, sustituirlo por un atributo title descriptivo dentro del campo.

Ejemplo:

<select title=”Idiomas”></select>