REAL UXEL SECRETO PARA HACER DE TUS APLICACIONES UN ÉXITO

SKILLSWHITEPAPER

JUNIO2016

ABOUT RAONA

Cristina Torné es UX Architect en Raona. Lidera uno de los equipos de UI/UX encargados de conceptualizar, diseñar y desarrollar soluciones ad hoc para importantes compañías internacio-nales. Su principal foco es traducir los objetivos de negocio en experiencias digitales tangibles y usables.

Òscar Oto es UX Architect en Raona. Conceptualiza , diseña y desarrolla experiencias digitales para aplicaciones de escritorio , móviles y web a través de plataformas y dispositivos. Sus áreas de especialización incluyen la dirección de arte , diseño web y de aplicaciones , la experiencia del usuario , diseño de interacción , pruebas de usuario y Design thinking. Está especializado en aplicaciones de negocio.

Consultora en nuevas tecnologías especializada en el desarrollo de soluciones tecnológicas a medida que aportan valor al negocio y que ofrece soluciones de intranets sociales, desarrollo de software, SharePoint, Touch&Mobility, portales web, Cloud integration y user experience.

Nace en 2003 en Barcelona y cuenta con oficinas en Madrid, Londres, Andorra y Argentina. Con más de 120 ingenieros, es Gold Partner de Microsoft y una de las empresas líderes en el desarrol-lo de soluciones en el mercado español con fuerte presencia internacional.

Sobre nosotros

REAL UXWHITEPAPER

Photo comment: Ude­

mus omplinv eniquesa

conduciordi, cantur.

Basar el diseño de una solución en aplicar una serie de patrones universales, heurísticas, es-tándares, y las últimas tendencias de diseño visual no garantiza que el resultado final tenga una buena experiencia de usuario (UX). Ni siquiera garantiza que sea usable.

Una buena experiencia de usuario depende de que el diseño resuelva los problemas adecuados de la forma en qué sus usuarios esperan. Y eso no se consigue contando con un gran diseñador y confiando en su intuición o bagaje, sino con un equipo y un proceso centrado en conocer las experiencias y el contexto del usuario, y modelando la solución en base a ello. Es por eso, que lo mejor es “matar al genius designer”.

El camino a la mediocridad está plagado de estándares, buenas prácticas y guías de diseño. Os queremos contar las claves que, después de años de proyectos exitosos, creemos que permiten desarrollar la aplicación que el usuario necesita y que esté alineada con los objetivos de negocio.

Kill the genius designer

4

User & Business Centered Design

El campo de la user experience y los procesos de UX es suma­

mente teórico y se ha escrito y se sigue escribiendo muchísimo

sobre ello. Pero lejos de la literatura lo cierto es que la experi­

encia durante estos últimos diez años nos ha demostrado que

para diseñar una solución de éxito es necesario involu-crar a los usuarios, al negocio y al equipo en construir ese diseño único y tangible. Es lo que llamamos Real UX.

En Raona trabajamos con clientes que necesitan diseñar o re­

diseñar una aplicación o un software a medida.

Desde el departamento de UX nos encargamos de definir el

modelo de interacción, cómo los usuarios interactúan con la

solución, y su presentación visual y diseño.

Nuestra responsabilidad es identificar con precisión cuál es la necesidad que quieren solventar usuarios y empresa, así

como saber de qué manera resolverla para adecuarla a lo que

ambos esperan. Disponiendo de esta información podemos

modelar la mejor solución posible. Una solución que a lo largo

del proceso de UX se irá validando y refinando.

REAL UXWHITEPAPER

5

Para asegurarnos una buena experiencia de usuario necesitamos, por tanto, averiguar

qué les preocupa y cómo resolverlo, y en este punto de nada sirven las grandes ideas o

las teorías del mundo de la usabilidad. Las hipótesis en este inicio del proceso no son

válidas, necesitamos la user evidence que obtenemos a través de workshops, entrevis­

tas y otras técnicas.

El diseño centrado en usuario es una idea muy presente en el corazón de la UX,

pero en paralelo también tenemos que trabajar para conocer los objetivos de ne­

gocio y alinear estos dos mundos, en muchas ocasiones divergentes, en una solu­

ción adecuada para ambos. Es lo que llamamos User & Business Centered Design.

Para descubrir lo que realmente necesitan usuarios y negocio es habitual plantear en­

trevistas o rondas de preguntas abiertas, pero nosotros apostamos desde hace tiempo

por un proceso que reúne una serie de técnicas, modelos y patrones focalizadas en obtener resultados eficaces para poder diseñar una solución.

REAL UXWHITEPAPER

PRODUCT THINKING

Llamada a ser la “next big thing” dentro del mundo de la UX, el product thinking va más allá del concepto de la UX como el conjunto de características de un producto diseñadas de tal forma para hacer la experiencia del usuario fácil y satisfactoria. Las funcionalidades son solo una pequeña parte del producto y centrar la UX solo en ellas hace que perdamos el objetivo esencial: ¿para qué sirve?

El product thinking propone un proceso para que esto no pase. Piensa en el usuario y se pregunta qué problemas resuelve el producto, quién tiene estos problemas (define al público objetivo), por qué lo hacemos (visión) y cómo lo hacemos (estrategia). Tener respuesta a estas preguntas ofrece la orientación necesaria para crear ahora sí las características y los objetivos de un producto de éxito. Porque los productos cobran sentido cuando la solución aportada se ajusta a un problema no cubierto, y que es la esencia de la UX.

Pensar en los productos favorece a que los diseñadores construyan las características adecuadas para las personas adecuadas y se den soluciones a los problemas reales que tiene la gente.

6

El problema está en que si empezára­

mos a desarrollar nuestra aplicación en

este punto no estaría para nada alineada

con el negocio ni con los usuarios. Oper­

ar de esta manera conlleva entrar en una

dinámica incómoda para todas las par­

tes implicadas con pérdidas de tiempo,

frustración y cambios de reque rimientos

de forma frecuente.

En Raona hemos introducido varios el­

ementos en nuestro proceso de UX que

nos ayudan a reducir y mucho este ries­

go. Por un lado, establecer una fase de análisis, la User & Business Centered Design, en la que a grandes rasgos ex­

traemos toda la información válida del

cliente, los usuarios y el equipo de Ra­

ona mediante workshops, sesiones con

usuarios, técnicas de análisis y Design

Thinking. Una segunda etapa en la que

creamos soluciones usables e intuiti-vas a través de Creative Briefs, en los

que se trabaja el modelado del concep­

to, para posteriormente iterar, validar y

evolucionar esta idea.

REAL UXWHITEPAPER

El primer paso en el proceso de UX es la confección de la visión. Es el punto de salida

antes de poner en marcha el modelado de la aplicación. Cuando uno explica su visión

o idea, asume que todos entienden los mismo que él, y esto raramente ocurre. Cada persona crea su propia visión en base a experiencias y conocimientos previos, lo que en Raona llamamos abanico de visión.

El abanico de visión

AGILE UX La Agile UX surgió como tentativa para integrar la metodología Agile con los métodos de los diseñadores de UX, es decir, para unir a desarrolla-dores y diseñadores en un proceso de desarrollo de producto Agile. El problema está en que los diseñadores de UX necesitan un tiempo y unas dinámicas de trabajo diferentes a la de los desarrolladores, los cuales me-diante la metodología scrum pueden hacer sprints de dos o tres semanas para trabajar las funcionalidades de la aplicación. Sin embargo, los diseñadores de UX por las características intrínsecas de su proceso no pueden realizar sus etapas de análisis y validación en unos períodos de tiempo ajustados. Por eso, la mejor manera de integrar la UX dentro de empresas que hacen servir Agile es que la UX parta de un sprint cero, es decir, antes que los desarrolladores empiecen su trabajo se necesita tener listo el proceso de visión. Una práctica que se va repitiendo en todas las fases del proceso, por tanto, antes de desarrollar vendría siempre una etapa de validación.

7

Y en la tercera y última fase donde se

define, valida y evoluciona el diseño visual de la solución.

El resultado es un concepto que da res­

puesta a los problemas reales, validada

y alineada. De esta manera consegui mos

ir reduciendo al mínimo el abanico de vi­

siones y que todos estemos foca lizados

en una solución muy parecida.

a. Workshops. Son sesiones con grupos

de usuarios en las que se llevan a cabo

una serie de técnicas para descubrir los

principales puntos de dolor de una solu­

ción, definir la estrategia de crecimiento

de un entorno, encontrar soluciones a

aspectos concretos, o para validar con­

ceptos o incluso el diseño visual.

b. Design thinking. Utilizamos una se­

rie de técnicas de pensamiento visual

para encontrar, junto con los usuarios,

soluciones reales a problemas exis­

tentes.

c. Mapeo de objetivos. Utilizamos

técnicas de goal mapping como “job

stories” para identificar los objetivos de

usuario y de negocio.

d. Sesiones individuales con usuarios. Son idóneas para validar el

concepto con tests de usabilidad y en­

trevistas individuales y ver si se ajusta a

los requerimientos iniciales de los usu­

arios para seguirlo adecuando.

e. Business alignment. Como he­

mos mencionado, lo más habitual es

que las necesidades de usuarios y de

negocio no estén alineadas. En es­

tas sesiones aparecen las métricas de

negocio que modelarán la solución.

f. Entrevistas funcionales. Se­

siones individuales (o en grupos re­

ducidos) con expertos o respons­

ables funcionales que nos aportan

el detalle y contexto técnico para po­

der ofrecer una solución adecuada.

Puede dar la sensación que todo este

proceso de investigación conlleva un

largo periodo de tiempo. Nada más lejos

de la realidad, ya que todos los modelos

de análisis que realizamos no compor­

tan más de una semana de trabajo. En

siete días sabemos qué necesitan los

usuarios, el negocio, tenemos las métri­

cas para medirlo y ya podemos modelar

el concepto. Llegados a este punto te­

nemos un diagnóstico real de lo que los

usuarios y el negocio necesitan.

REAL UXWHITEPAPER

User & Business Evidence

Uno de los grandes problemas que acu­

sa el mundo de la UX es que existe mu­

cha teoría y grandes palabras sobre ella,

pero pocos aspectos prácticos sobre

qué técnicas utilizar.

Desde el departamento de experiencia

de usuario de Raona bajamos al mun-do real la UX con métodos específicos para recoger datos de valor de los usuarios y del negocio.

8

9

10

Crear soluciones intuitivas y usables

En esta etapa ya disponemos de todos los datos relevantes para

proponer un concepto de solución. Es hora de trabajar a fondo

la idea.

Pero, ¿cómo hacerlo? Poner toda la solución en manos de un

único diseñador (por muy cualificado y experimentado que sea)

no suele ser una gran idea. La inspiración es caprichosa y no

siempre aparece a tiempo, especialmente cuando hay dead-lines próximos.

En Raona creemos que el mejor modo de obtener una gran solución es a través de los Creative Briefs.

Estos son reuniones internas de desarrollo y modelado del con­

cepto en base a todo el compendio de información recogida en

la fase de Business User Evidence & User Research.

En ellas se dan lugar una serie de actividades dirigidas a generar

soluciones y a fomentar la creatividad. De hecho, están orienta­

das a que el proceso creativo no dependa de la inspiración, sino

que se genere a partir del consenso y trabajo en equipo.

REAL UXWHITEPAPER

11

El primer creative brief es una sesión con profesionales de UX,

pero en los siguientes se suele incorporar perfiles de negocio

y expertos funcionales para que aporten otras visiones y en­

riquezcan el proceso. El objetivo es que se produzca una generación de ideas amplia para poder entrar en la fase de refinar y validar la idea.

El resultado final es definir el modelo de interacción y la arqui­

tectura de la información de la solución en la que se detalla

cómo estará estructurada y como se dispondrán los elementos,

además del comportamiento responsive & fluid o el aspecto vi­

sual, entre otros.

Después ya podemos representar visualmente el concepto en

un wireframe, que nos permite obtener feedback y evoluciona­

rlo. En este proceso utilizamos herramientas para conse-guir que el diseño, desde el wireframe hasta el resultado final, siempre esté compartido con clientes y usuarios para recibir feedback focalizado.

En la siguiente etapa se define, valida y evoluciona el diseño vi­

sual, trabajamos ya en las pantallas de la aplicación a nivel más

estético. Primero se elige el diseño, y se produce la evolución del

concepto hacia un mockup interactivo y, después, se realizan las

sesiones de design review con el equipo de UX, a la vez que se

recoge feedback de clientes y usuarios con el objetivo de mejo­

rar el resultado.

Photo comment: Ro inulpa

doloritio magnatur aut

excepro dolendamusae

iminctium ea con ea.

REAL UXWHITEPAPER

COREOGRAFÍA VISUAL

Se ha empezado a hablar de este concepto hace poco más de un año. La coreografía visual o UX Choreography es un punto intermedio entre la UX y la animación, y en la que el cómo, el dónde y el porqué de cada elemento se combinan.

Se trata de utilizar las técnicas necesarias para hacer que los elementos de la interfaz se muevan, aparezcan y desaparezcan con movimientos, transiciones y reacciones naturales y fluidas.

Esto tiene un gran impacto en que el usuario obtenga una experiencia positiva, realista y emocional al interactuar con la aplicación y que se pueda establecer un diálogo entre ambos.

12

Diseño visual"el no va más"

Una de las cosas que más valoran nuestros clientes es que todo lo que diseñamos en la etapa de conceptualización, muchas veces con retos que parecen inalcanzables, al lle­gar al desarrollo es realizable.

De manera que el resultado final responde a lo que se ha diseñado. Es completamente fiel.

Al contar dentro del equipo de UX con perfiles híbridos de

diseñador, desarrollador y experto en UX hace que en la etapa

de investigación se planteen soluciones que se puedan llevar a

cabo, y que un perfil de diseñador des conocería.

Aparte de la fidelidad entre diseño y resultado final, otro de los rasgos diferenciales de Raona en experiencia de usuario es la personalización que otorgamos a cada proyecto.

REAL UXWHITEPAPER

13

Desde 2014 hay dos líneas de diseño

que sobresalen: Modern UI y Flat UI. La Mo dern UI es la que empezó a usar

Microsoft con Windows 8, caracterizada

por los recuadros de colores vivos. Mien­

tras que el Flat UI es el que ha aplicado

Google con el Material Design, y que

podemos encontrar en muchas de las

aplicaciones para Android e infinidad de

aplicaciones web.

A nivel de concepto no hay muchas

diferencias entre las dos líneas. Ambas

persiguen interfaces limpias, claras, ráp­

idas, elegantes y simples.

Donde sí que encontramos disparidades

es en el uso del color, en cómo se utili­

zan los recuadros y se separan las zonas.

En Raona nos sentimos cómodos con

ambas, porque las dos persiguen que el diseño esté centrado en la infor-mación, y buscan evitar elementos superfluos que distraigan el uso y la experiencia.

Sin embargo, cada vez más y más apli­

caciones se suman a estas líneas de

diseño, hasta llegar al punto en que

todas las aplicaciones parecen iguales,

y tienen el mismo estilo. Es correcto se­

guir unas guías y estándares, pero si nos

quedásemos solo en eso obtendríamos

una aplicación anodina, igu al que las

demás y que no destacaría.

Nuestro punto fuerte es trabajar mucho en como presentamos la in-formación y diseñarla para que sea

muy ágil de leer y de analizar, buscando

que a la par sea bella visualmente. El re­

sultado son aplicaciones que no tienen

nada que ver unas con otras, que siguen

los estándares, pero con un diseño visu­

al único, alineado con el branding de la

compañía.

Además, ponemos especial atención a

la coreografía visual. Un concepto sur­

gido en el último año y que muy pocos

aplican y que tiene que ver con cómo los

elementos aparecen y desaparecen de

la pantalla. No sólo se trata de anima­

ciones, sino de acompañar al usuario en la comprensión de la interacción.

REAL UXWHITEPAPER

14

Excea namet doluptatia pe re conse re con plibus restis parunt laborpo reculli gnisqui

struntion ratur. Tempor sae non non nonet quam nobitat isciliquid quidis ut doleserum

quaerov itecta venihillata dolupta derchillabo. Lit in res evene plique nullorum receat

et quo verovit atatem que sum et et eturio officia pra qui quas prerum sim aut quid

molorrum eaquatqui reptat ad quundantio. Nam il idel il iusaessuntia vid et aut molupti

oribus quo tem alignim endae. Debitia tecaepe ribus, odi voluptae sandus, in repraec

torerio. Usdaeri assitam, cuptaes ipsunt.

Event rehent pero bearchit delestibusEitempostis utet es autat rehent volor rata dolupta sam sequi simaio dolo dolo volut ut

experae rernature, eat plabo. Rae nesti restiisciet fugitionecum volorem quo volut aut

eles enihit quo invent as dolorerio quas entiostiam fugit velent et volorero et idipsam

aces doles di cupturi ossum, aut optatio veliquis dolecte dolor atusanim faceate cabore

sed magnien diorenimet a sanihicium nobissi volupta tusaerc hilitat rehent essunt, sit

od molupti onectis diat aut re lam hitaes natur as audam alitatus eum, inis molorit at.

REAL UXWHITEPAPER

¿TE HAS DADO CUENTA QUE TODAS LAS APLICACIONES SON IGUALES?

Hoy existen dos tendencias predominantes en el mundo del diseño: Flat y Modern UI Design. La Flat Design surge de la mezcla de varias influencias como el estilo suizo, la interfaz de usuario basada en texto, el modernismo y la herencia de la escuela Bauhaus. Se caracteriza por ser minimalista, por lo que utiliza pocos elementos estilísticos para dar la sensación de las tres dimensiones, por ejemplo, con sombras, gradientes y texturas.

También utiliza componentes simples, y tipografías y colores planos para que la navegación por la interfaz sea más ágil y eficiente al no tener tantas distracciones. El iOS 7 de Apple o el Material Design de Google son algunos ejemplos en los que se ha aplicado este tipo de diseño.

Por otro lado, se sitúa la Modern UI Design o también conocida como Metro. Aunque tampoco resulta muy diferente a la Flat Design sí que presenta algunas particularidades como la apuesta por las formas geométricas, la tipografía y la importancia que le da al diseño basado en el contenido y no tanto en la caja contenedora. Este diseño es el que está presente desde Win-dows 8 y en otros productos de la compañía como Xbox 360, Windows Phone o Office365.

El uso tan extendido de ambas tendencias ha hecho que gran parte de las aplicaciones que hay en el mercado se parezcan en exceso las unas con las otras; provocando una uniformidad y la consecuente pérdida de personalidad de cada aplicación.Microsoft ha apostado decididamente por esta plataforma como el futuro de su negocio y en Raona la implantamos de forma habitual como parte de las soluciones adaptadas a las necesidades de aquellos clientes que requieren un entorno flexible y en continua evolución.

15

Por último, en Raona le otorgamos mu­

cha importancia en el proceso porque

todos las aplicaciones y softwares que

desarrollamos están pensados para que

sean responsive y fluidos, de forma que

las aplicaciones se adapten a cualquier

tamaño de pantalla, resolución, o dis­

positivo.

REAL UXWHITEPAPER

Proceso siempre abierto

Por último, cabe destacar que el proce­

so de UX es un proceso siempre abierto.

Intentamos descubrir qué problemas se

deben resolver y qué necesidades tiene

el usuario para después modelar una

solución.

A partir de aquí, desde el primer boce-to más básico, arranca un proceso abierto a todas las partes implicadas:

usuarios, empresa y el propio equipo

de Raona. El conjunto de validaciones

y feedback es constante y específico du­

rante todo el tiempo que duran las fases

de UX, lo que nos funciona a la perfec­

ción para poder alinear todos los actores

involucrados.

En Raona llevamos desde el 2003 pensando y creando soluciones para los usuarios y los negocios. Esta larga y valiosa experi-encia nos ha llevado a saber detectar qué elementos funcionan y los que no.

Hemos querido dejar claro que para nosotros el diseño de una solución no puede estar basado en grandes teorías o en la in-tuición de una mente genial. Conseguir una buena experiencia de usuario implica resolver problemas de verdad, aquellos que preocupan a usuarios y negocio, y hacerlo satisfaciendo a todas las partes. Para ello proponemos un método de trabajo que una diferentes perfiles de UX Architect (arquitectura e interacción), UI Designer (diseño visual), UI Developer (desarrollo de la interfaz e interacción) y UX Research (evidence, validación y test continuo).

Bajamos la UX del Olimpo al mundo real que es donde se encuentran los problemas y las soluciones, obteniendo la información necesaria con técnicas eficaces, y en dinámica de validación y test constante con la ayuda de usuarios, negocio y el propio equipo de Raona.

Esta metodología es lo que nos caracteriza y diferencia. La que nos garantiza poder llevar las aplicaciones al éxito.

Òscar Oto y Cristina Torné - UX Specialists en Raona

REAL UXEL SECRETO PARA HACER

DE TUS APLICACIONES UN ÉXITO