A fuerza del uso intenso de todo tipo de interfaz de usuario, nos hemos vuelto expertos en su manejo y en capaces navegantes de internet. Tan variados son los mares a nuestra disposición, que nos hemos vuelto también expertos en torcer el rumbo ante el mínimo iceberg digital.

 

Interfaz de usuario

 

En un momento en el que todos los rankings están encabezados por empresas construidas sobre algún tipo de servicio digital, cabe esperar que el conocimiento e interés que tenemos en explotar lo digital crezca a la velocidad de la luz. Estos servicios a menudo son una compleja red de agentes (digitales y analógicos), que funcionan como un micelio invisible para la mayoría de sus usuarios (vamos, que no nos enteramos del mint, la mitad).

Desde el diseño, se centra la atención en entender y simplificar, sobre todo, los puntos en los que este servicio entra en contacto con el usuario; en esa especie de setas que llamamos touchpoints y que son simplemente la combinación en la que:

 

“Carlos (usuario) en el autobús (momento) busca desde el móvil (dispositivo) un regalo en la web (canal digital) de Amazon”.

Acaba de recordar que en menos de una semana su mujer cumple años y por el bien de su estabilidad matrimonial y su propia integridad física, ya puede hacerse premium.  

 

En los últimos diez años la dupla del diseño de interactivos «UI/UX» ha servido para agrupar todos los nuevos conceptos o maneras de trabajar que se abrían paso más allá del “usable” o “user-friendly”, que hasta entonces habían sido suficientes.

El diseño/desarrollo UI/UX son en realidad dos maneras de observar esos puntos de contacto, y como sabes que somos amantes empedernidos de las definiciones, ¡vamos a por ellas! Seguro que te ayudan a entender un poco mejor todo esto 😉

 

interfaz de usuario

 

Definición de conceptos: UI y UX

El diseño de la Interfaz de usuario (UI) es probablemente la visión más pragmática de las dos, y se centra en el dispositivo, en cómo el servicio se muestra en la pantalla. En definitiva, cuán sencillo y accesible es realizar una tarea en él.

Jared Spool, el creador de la empresa User Interface Engineering, cuenta la historia -ahora clavo ardiendo al que se aferra cualquier diseñador de interfaz– en la cual unos pequeños cambios en un botón supusieron 300 millones de dólares en beneficios durante el siguiente año.

 

Por otra parte, el diseño de la Experiencia de Usuario (UX) se centra en las intenciones y objetivos del usuario; y con qué nivel de satisfacción o frustración puede éste relacionarse con nuestro servicio. Si bien es un punto de vista más complejo, el UX es también el capaz de generar una relación duradera con el usuario.

El CEO de Airbnb, Joe Gebbia, está convencido de que los esfuerzos en generar una buena experiencia de usuario llevó a su empresa hasta los 10.000 millones de dólares. Ahí es nada.

Ambos términos se superponen a menudo en el diseño de la interacción con servicios digitales. Se podría decir que la experiencia de usuario engloba la interfaz de usuario, o que la interfaz de usuario es la manera en la que se puede articular una experiencia de usuario placentera.

 

 

 

Leer el Financial Times desde el váter: Ubicuidad y multi dispositivo

Los black mirrors han desubicado internet. Hoy podemos acceder a internet desde casi cualquier lugar y dispositivo– hay millones de alternativas mejores a leer la etiqueta del champú cuando uno está en el excusado-.

Si bien hay interfaces diseñadas de manera específica para un dispositivo concreto (como podría ser una app para el iWatch), otras pueden ser visitadas desde una variedad infinita de tamaños y proporciones de pantalla, incluso por un mismo usuario. Un ejemplo: una web o una app de Android.

 

interfaz de usuario

 

Para que la experiencia multi dispositivo sea homogénea de uno a otro, o al menos esté modulada correctamente, en los últimos años han aparecido varias estrategias con las que dar respuesta a esta problemática.

Y es que aún cuando uno de tus futuros clientes te visita desde la comodidad de su sofá, la verdad es que no tiene tiempo (y a veces, ni ganas) para nada. Es posible que la dificultad de llegar a ellos, o el esfuerzo que pones en generar un discurso claro y cautivador sean retos suficientes como para que puedas permitirte que la parte online de tus servicios les haga perder el tiempo o los confunda.

O aún peor, que al entrar en tu página web desde su móvil, al no ser responsive, huyan escopeteados pensando que un virus va a atentar en su teléfono móvil borrando de un plumazo todas sus fotografías de las últimas vacaciones. ¿Cómo diantres las enseñan a su familia en la próxima comida familiar?

Si bien el móvil proporciona un punto de acceso a nuestros usuarios casi omnipresente, también tiene una limitación obvia en cuanto a la información que podemos mostrar. Por esta razón, una de las aproximaciones más evidentes al diseño multi dispositivo es lo que se llama mobile first.

 

 

El síndrome de los dedos salchicha: Pantallas pequeñas

En los últimos años, muchas webs han tenido que adaptar su formato convencional para ser visualizadas en pantallas pequeñas. Muchas veces ha resultado en una limitación a las opciones de que el usuario disponía en el diseño original; o consistido en simplemente apilar todos los contenidos de cada página en una única columna, haciendo que opciones principales o llamadas a la acción clave quedaran relegadas a posiciones poco razonables en la pantalla.

 

Adiós, conversiones. ¡Fue bonito mientras duró!

 

Empezar el diseño de las páginas con una ley de mínimos, priorizando la distribución y aspecto que tendrán los elementos en condiciones poco favorables (una pantalla pequeña en la que nuestros usuarios tendrán que interactuar con su dedo gordo) es lo que se llama mobile first. Adaptar esa sencillez obligada a una pantalla de mayor tamaño es un proceso mucho más sencillo, menos crítico.

Esta estrategia es indiscutible para:

  • Webs corporativas sencillas;
  • Empresas que quieren usar la web como un canal complementario a su negocio;
  • Empresas que no pueden dedicar grandes esfuerzos a su desarrollo tecnológico.

 

Sin embargo, para otros servicios más complejos y aplicaciones web (Software as a Service o SaaS), que normalmente ofrecen al usuario gran cantidad de opciones, la estrategia mobile first puede ser demasiado limitante, y entonces hacer un diseño/desarrollo multi dispositivo en paralelo o asimétrico (que podría implicar también usos distintos según el dispositivo) sería mucho más conveniente.

 

Be water my friend: Responsive y adaptative

Supongamos que estás aquí porque eres del primer grupo: tienes una web sencilla, que te gustaría que fuera multi dispositivo y eficiente de mantener. Sea para una página web desde cero o para un rediseño, supongamos que hemos empezado a solucionar los problemas para pantallas pequeñas y tenemos un diseño que se ve genial en la pantalla de un iPhone 5c, que es particularmente estrecha. Pero…

¿Qué pasará cuando un usuario visite la web desde una pantalla de 30″ en lugar de 5″?

usuario de interfaz

 

Hay, principalmente, dos maneras de abordar el problema, aunque a efectos prácticos casi cualquier solución web acaba incorporando un poco de ambas según el tipo o apartado del contenido:

  • Diseño responsive. En esta opción, todos los elementos de la web están definidos en base a ciertas condiciones del dispositivo en el que se muestran (por ejemplo, la resolución de pantalla, el tamaño, o si es un dispositivo móvil), que se pueden combinar según las necesidades, y que entrarán en acción en cuanto alguna de ellas se cumpla. Es la opción más maleable y la recomendada por Google, aunque puede generar tiempos de carga un poco más lentos.

 

  • Diseño adaptativo. En esta opción se definen unos anchos de pantalla mínimos y máximos -o breakpoints- para los que se diseñarán pequeñas versiones de la web, y que entrarán en acción cuando el tamaño de pantalla del dispositivo con el que visitamos la web.

 

En definitiva, lo importante es tener en cuenta que independientemente del método que elijamos, el diseño de nuestra página web tendría que cubrir los touchpoints principales de nuestros usuarios o futuros clientes (si no todos los posibles).

 

#hagamoslascosasfáciles

 

** Recuerda: un touchpoint es un punto de contacto entre un servicio y un usuario o cliente. Si todo lo anterior te ha sonado a chino mandarín, invéntate uno: mándanos un email, llama, visítanos o haz señales de humo… ¡lo que quieras!