interactive interface

Diseño interactivo para todos

7 August, 2013

Recientemente me vi envuelto en un proyecto web donde la pieza clave era la experiencia de usuaria. Debíamos crear una interfaz web repleta de opciones, interacciones y imágenes. Nada fuera de lo normal solo que nos encontramos en un tiempo de expansión y cambio; de dispositivos móviles diminutos a proyectores de alta resolución.

Nuestra intención principal era la de dar el máximo de posibilidades al usuario pero ¿a que coste?.

  • ¿Quien usa la interfaz?
  • ¿Como la va a usar?
  • ¿Como mostrar la información?
  • ¿Como mostrar la interactividad?
  • ¿Que dispositivos usaran la interfaz?
  • Este dispositivo; ¿Como procesará las imágenes de gran definición?
  • ¿Tiene gran capacidad de proceso de datos?

Después de un exhaustivo análisis y estudio, explicaré aquí unas ideas básicas para que la programación de todos sea más adecuada a los tiempos cambiantes en que nos encontramos; cada día salen nuevos terminales móviles al mercado, con pantallas de tamaño reducido e dispositivos interactivos incrustados. A la misma vez también aparecen pantallas más grandes de alta resolución conectadas a super-ordenadores. A todo esto debemos dar una solución, debemos estar preparados.

Pero antes de continuar debería explicar lo que entiendo por interfaz interactiva. Se trata del marco interactivo al usuario para enriquecer su experiencia de uso. En este marco podemos hacer uso de todos aquellos dispositivos y elementos que nos proporcione el terminal de conexión a la información digital.

Estructuro este conjunto de escritos de la siguiente manera:

  1. Servidor, red, código y ficheros.
  2. Dispositivo.
  3. Interfaz.
  4. Usuario.
  5. Contexto y ambiente.

Creo que esta es la mejor forma de explicar lo que debemos tener en cuenta a la hora de diseñar una interfaz interactiva y llegar de la mejor forma posible al usuario…y al más allá.

Empezaré por el primero…

1. Servidor, red, código y ficheros.

Aquí no entraré en detalle en cual es el mejor lenguaje de programación para dispositivos ni el tipo de información a procesar. Lo que sí debemos tener en cuenta es todo aquello que enviamos al usuario, todo aquello que procesa la parte cliente. Basaré mis explicaciones en una interfaz web interactiva por lo que considero estos los conocimientos necesarios:

  • Datos (HTML)
  • Estilo (CSS)
  • Interacción (JavaScript)
  • Ficheros/información (imágenes, librerías,…)

Cuando un usuario navega por nuestra web, recibe todos (o algunos) de los puntos anteriormente mencionados, pero nosotros sabemos nada del usuario; ¿que conectividad tiene? ¿que dispositivo usa? ¿que pantalla utiliza este dispositivo? ¿de que memoria dispone? ¿que procesador usa?

La mejor manera de responder las dudas anteriores es a partir de la idea que el usuario tiene el dispositivo más lento y la peor conectividad posible. Podemos asegurar esto siguiendo estos puntos;

  • Recordar minimizar y/o comprimir los ficheros CSS y JavaScript para ahorrar ancho de banda.
  • Usar imágenes en el formato correcto para web; PNG, SVG, GIF o JPEG.
  • Unir imágenes en una sola imagen bidimensional (sprites) para reducir las esperas entre descarga de ficheros.
  • Limitar las dependencias a librerías (jquery = 93kb, emberjs = 56kb, …).
  • Priorizar el uso de CSS3 por encima de ficheros extra como imágenes de esquinas curvadas.
  • Usar correctamente las cabeceras HTTP para asegurar el debido uso del cache del navegador.
  • Usar Appcache de HTML5 cuando sea posible.
  • Sustituyendo iconos por fuentes reducimos descarga de información.

Recordar también que de servidor a cliente podemos hacer envio selectivo de ficheros. Esta técnica merece una entrada nueva pero como ejemplo, esta técnica nos permite enviar al cliente una imagen de baja/media/alta resolución con una sola consulta; ¿que resolución permite la pantalla cliente? Recomiendo el conocimiento de herramientas como Adaptative Images, una librería para la detección del tamaño de la pantalla del cliente desde el servidor.

En la siguiente entrada hablaré de los dispositivos y sus componentes; componentes que nos dan mucha información pero debemos saber tratarla para ayudar al usuario y no entorpecer su proceso de uso.

    Etiquetas: , ,

    Dejar un comentario