Usabilidad web y diseño de interfaces con Adobe Experience Design

Cuando hace un par de años entré en un aparcamiento de pago y ví muchas lucecitas rojas en el techo, me extrañé. Al momento, vislumbré que entre todas ellas destacaba alguna verde. Entendí a la primera que allí habría un sitio libre; y no sólo me alegré por no tener que buscar (y dudar entre bajar otro piso para seguir buscando), sino que sentí un pequeño placer por entender aquel mensaje del sistema.

Lo interesante es que no hay que ser muy listo para entenderlo; es evidente y no necesita instrucciones; es muy útil, es fácilmente visible y, además, no debe ser un sistema carísimo de implementar.

Bueno, pues esto es puro “User Experience“: sensaciones que se producen en una persona cuando interactúa con un sistema. Resultado del conjunto formado por la comunicación con el mismo, el diseño, la funcionalidad y la usabilidad que le ofrece.

User Experience para Interfaces

Cada vez está más en boga tener en cuenta estos factores básicos a la hora de lanzar un proyecto web con éxito. Es decir: no solo tiene que funcionar, o no sólo tiene que ser bonito.

Una interfaz tiene que ser “agradable, funcional, entendible e intuitiva”.

O bueno, todos los adjetivos del mundo que se te ocurran para expresar sensaciones, y que, se pueden resumir en “ofrecer una experiencia positiva al usuario“.

Pronto entraremos en detalle de los métodos para conseguir buenos diseños de interfaces, o cómo hacer testeos de usuarios para eliminar toda la incertidumbre posible si estás metido en un proyecto de este tipo. De momento, os propongo una herramienta que facilita mucho el ofrecer a los usuarios una experiencia de navegación, que ya es algo: ADOBE EXPERIENCE DESIGN.

Adobe Experience Design

Desde hace un año, Adobe nos invita a usar Adobe Experience Design, el nuevo programa de la plataforma Creative Cloud. No es una herramienta para diseñar, pero sí nos sirve para presentar nuestros borradores (sketches, wireframes, prototipos) de manera online y que además permitan una navegación que simule la interacción real del usuario con el sistema.

Esta herramienta requiere que tengas que comenzar tu proyecto por plantear una estructura clara de tu sitio o aplicación. Podrás empezar a testear tu trabajo con otras personas desde un punto muy temprano del proyecto. También juzgar si la jerarquía de contenidos es coherente con los posibles viajes de los usuarios. Lo más probable es que descubras errores, nazcan sugerencias frescas o te des cuenta que la dimensión del proyecto no es la que creías. Y todo, con unas pocas cajas y algunos textos.

Esto es un método de trabajo al fin y al cabo. Lo principal es que analices al máximo las estructuras y pantallas sobre papel (que es lo más rápido), que trabajes lo mínimo posible en el ordenador y que testees lo antes posible para poder evaluar resultados. Así, creando borradores y probándolos con diferentes usuarios, seguramente consigas que la forma del producto sea mucho más redonda antes de meterte con tipografías, colores, etc.

Es interesante decir que este programa no es para diseñar, pues a nivel de herramientas de diseño es bastante espartano. Aquí se trata de probar que la navegación es coherente y ágil. Con rápidos test puedes descubrir caminos incoherentes o errores en la arquitectura que pueden ser claves para su posterior diseño.

En Adobe Experience Design hay dos pestañas principales: Diseño y Prototipo.

Herramientas de diseño de UI

Mesas de trabajo: la vista de diseño te permitirá abrir “mesas de trabajo” con tamaños de pantallas predefinidas (para diferentes dispositivos móviles o tamaños de pantalla de ordenadores de escritorio). Luego simplemente añade los elementos que te interesen para tu composición.

Cajas: como casi todos los programas de CC tienes las herramientas básicas para crear cajas con formas poligonales. Luego podrás volcar imágenes directamente sobre estas cajas, como en Adobe Indesign. Las imágenes se adaptarán de manera automática.

Texto: una simple herramienta de texto, con lo mínimo para que puedas hacer tu caja, cambiar la tipo, tamaño y poco más. Recuerda el espíritu espartano: simple y robusto.

Grid: La herramienta más interesante del programa a nivel de crear prototipos de interfaz. Te permite la clonación de un bloque de contenido y su posterior edición inteligente en cualquier momento. Es perfecto para cuadrículas de elementos, como entradas de post, recepción de notificaciones, miniaturas de imágenes, etc.

Herramientas de interacción de UX

La otra pestaña principal, “Prototype”, te permitirá crear la navegación entre las diferentes mesas de trabajo o pantallas. Cada elemento es susceptible de enlazar a otra página. Es un sistema muy simple, donde con arrastrar una flechita desde un elemento del diseño, se creará el enlace a otra página para su posterior prueba de navegación.

Lo malo es que monta un buen guirigay con las interrelaciones. Aquí os dejo un ejemplo de un trabajo que estamos haciendo ahora …

Además, puedes variar el efecto de navegación para simular una interacción tipo móvil. Con paso de páginas en horizontal, cambio en la velocidad de ejecución, etc.

Publicación del diseño de tu interfaz

Esta es una de las grandes armas de Adobe Experience Design: la interactividad con otros usuarios. Podrás publicar su proyecto en tu cuenta de Creative Cloud y compartirlo mediante enlace con quien tú quieras.

Si realizas cualquier modificación, podrás actualizar tu publicación con sólo un clic.

También te permite un chat de comentarios con puntero de localización, para comentar y discutir puntos clave del diseño. Es un poco raro que, para poder ver los comentarios, tienes que activar previamente la ventana de chat; pero bueno, así tampoco molesta estéticamente si te forran el diseño de comentarios.

Bueno, poco más, ¡a probarlo y disfrutar!!