La influencia del color en la tasa de conversión

Hace poco tiempo hablamos del uso de color y tipografías en interfaces móviles, y hoy queremos centrarnos en responder una pregunta recurrente: ¿Hay un color que convierta mejor que otro cuando trabajamos en interfaces transaccionales?

Si alguna vez habéis tratado de diseñar un nuevo proyecto para un cliente, entenderéis lo complicado que resulta decidir sobre una paleta de colores que funcione bien para el cliente y su proyecto. Por eso, no pretendemos desarrollar una guía completa sobre cómo aplicar colores al diseño, más bien mostrar pautas generales de cómo influye el color en el contexto del diseño de la experiencia de usuario.

post1
Captura de círculo cromático de colores (tomado de pixabay.com, bajo licencia CC)

Una breve teoría del color

La utilización del color es una de las prácticas más poderosas del diseñador. Sabemos que los distintos colores se asocian con diferentes emociones y llaman la atención de los usuarios. Sin embargo, más allá de elegir un color u otro al azar, detrás de cada uno de ellos hay un conjunto de ideas, intenciones y  sensaciones que los convierten en idóneos en determinadas situaciones. El uso del color puede significar diferentes cosas, en diferentes culturas.

Una herramienta muy práctica, que debemos conocer para la utilización del color en el diseño de un proyecto es la rueda de color o círculo de color cromático, que consiste en una organización ilustrativa en forma de círculo  de los tonos de color primarios (rojo, amarillo y azul), secundarios (naranja, verde y morado) y el resto de colores, conocidos como terciarios.

De este modo obtenemos un esquema práctico que nos da a conocer los colores opuestos de cada color específico. Algo característico del círculo cromático y sus colores opuestos es que con la mezcla de los colores primarios, obtenemos como resultado los secundarios.

Cada color transmite diferentes mensajes al usuario. Entre los colores primarios, el color rojo se identifica con energía, pasión, emoción; pero con la misma intensidad es capaz de transmitir peligro e incluso, para algunos artículos, falta de calidad. El tono verde transmiten armonía, signo de generosidad, naturaleza y bienestar, mientras que el azul, un color que se emplea para transmitir fuerza, seguridad, calma y eficacia.

Entre los colores secundarios, el amarillo o naranja se asocian con la alegría, el calor, el entusiasmo o en algunos iconos, para llamar la atención. Otros colores como el morado, se relacionan con la sofisticación, asociándose a conceptos como sabiduría, respeto, poder, autoridad, misterio y creatividad son algunas de sus bondades.

Para crear combinaciones eficaces de colores no conviene elegir cualquier pareja de colores al azar, sino que es mejor seguir ciertas reglas básicas. Una opción es seguir la regla triádica, eligiendo un color base y dibujando un triángulo equilátero en la rueda desde ese punto para conseguir colores que sean complementarios.

post2
Captura de círculo cromático para la regla triádica

También podemos usar una combinación compuesta, que consiste en elegir los colores enfrentados en la rueda, una combinación de dos colores complementarios que garantice el contraste y atraer la atención del usuario. Esto se ve perfectamente en las notificaciones de aplicaciones, por ejemplo, usando un color rojo que destaca sobre el color de icono.

Finalmente, se pueden seleccionar los colores por analogía, tomando colores próximos en la rueda que ofrezcan sensación de continuidad en el diseño. Por ejemplo, tonos rojizos y anaranjados. Si además utilizamos la gama de colores adecuada a la sensación que queremos transmitir, dar por seguro que será una buena elección cromática.

El impacto del color en las tasas de conversión

La teoría del color en el diseño de la interfaz de usuario es algo más que diseño visual. Centrando el tema en el uso de llamadas a la acción, el color suele ser uno de los debates más largos en el mundo de la conversión y optimización.

Hay multitud de ejemplos de tests A/B que muestran cómo un cambio en el color de un botón tuvo un impacto drástico en el aumento de la conversión y la consiguiente optimización del sitio. Por ejemplo, HubSpot compartió una prueba de color para un botón de su web, que consiguió ser viral. Ante dos interfaces idénticas con la única diferencia de un botón verde o rojo, el botón rojo dio como resultado un 21% más de clics, aunque inicialmente predijeron que tendría un mejor rendimiento el botón verde. Sin embargo, en Unbounce apuestan por el BOB (Big Orange Button o gran botón naranja).

Como véis, es imposible generalizar estos resultados en todas las situaciones. No podemos asegurar que haya un color mejor que otro para aumentar la conversión. Simplemente, porque no existe un color perfecto que encaje en todas las situaciones y dispositivos. Lo que funciona en un contexto no necesariamente funciona en otro. Influye el contexto y por supuesto, el rigor y la disciplina de la metodología de investigación y las pruebas con usuarios.

En definitiva, comprender la psicología y aplicación del color es un requisito conveniente para hacer un buen diseño, pero no existen límites respecto a la práctica del color en el diseño. No es tan importante el color que selecciones, como adecuarlo al contexto donde se aplicará. El color del botón tiene poco o ningún efecto por sí mismo, pero influye cómo cambia la jerarquía visual de toda la página, y cómo se destaca la llamada a la acción.

Respetando las características de los colores, el  contraste y la psicología del color para transmitir emociones, estaremos más cerca de influir para alcanzar una mejor conversión.

Si quieres mejorar la tasa de conversión de tu sitio web, ofrecemos servicios de acompañamiento y consultoría en CRO, donde analizamos tu negocio y diseñamos un proyecto de acompañamiento orientado a proponer acciones concretas que mejoren la tasa de conversión de tu sitio web. Contáctanos y hablamos.

Diseñando servicios públicos para todos los ciudadanos

Dentro de los procesos de transformación digital que estamos analizando en el estudio para algunos proyectos que realizamos con administraciones públicas, un caso que nos ha parecido muy reseñable se está llevando a cabo en Estado de Nueva York. Durante 15 años, el estado de Nueva York apenas actualizaron la estructura y diseño de su web, pero hace poco decidieron darle un giro de 180 grados.

Las capturas hablan por sí solas sobre la magnitud del cambio acometido. Entre la primera y la segunda imagen hay 9 años de diferencia (2005 y 2014) y es fácil comprobar que apenas se notan las diferencias. Sin embargo, entre la segunda y la tercera captura hay solo un periodo de un mes (octubre de 2014 y noviembre de 2014). Las capturas hablan por sí solas del cambio acometido, más y mejor que “mil palabras”.

Captura de NY.gov en 2005
Captura de NY.gov en 2005

Captura de NY.gov en octubre de 2014
Captura de NY.gov en octubre de 2014

Captura de NY.gov en noviembre 2014
Captura de NY.gov en noviembre de 2014

De un primer vistazo, la nueva web tiene un diseño muy similar al propuesto por US Web Standards, que se está convirtiendo en un estándar de facto para estos proyectos de administraciones públicas estadounidenses, aunque no sean instituciones federales.

La antigua directora de la Oficina Digital del Estado de Nueva York, Rachel Haot, redactó un artículo sobre el proceso de rediseño de la experiencia de usuario y la estrategia de contenidos en la web y las decisiones de calado que fueron tomando a lo largo del proceso, que es muy interesante.

Entre otras cosas, el Estado de Nueva York es una de zonas con mayor pluralidad cultural de todo Estados Unidos, además de una zona de entrada de inmigración desde el siglo XIX, por la atracción que ejerce la Gran Manzana. Haot resumió en este artículo las lecciones aprendidas de diseño de producto en una serie de 13 puntos que aporta gran contexto sobre ese proceso de atención a la diversidad de los organismos públicos, y que creemos que es aplicable a cualquier proyecto digital. Os compartimos sus ideas:

  1. Ponte de acuerdo en el usuario para quién diseñas: muchas webs públicas empezaron siendo herramientas para el equipo de comunicación de la institución o para los usuarios internos, y muchos departamentos internos digitales no están concebidos para trabajar con el usuario final. El sitio web tiene que estar pensado por y para todos los ciudadanos a quienes está dirigido, y este es un punto en el que todos los implicados tienen que estar de acuerdo.
  2. Revisa tus datos: aunque no tengas unas estadísticas muy elaboradas, se puede descubrir mucho de tus usuarios a través de ellas. Lo ideal es que tengáis datos del último año, para analizar el impacto de los cambios de diseño y de las diferentes campañas. Revisa los dispositivos usados, los contenidos más accedidos y compartidos, todo. Haz una lista de las 20 páginas más visitadas y las 20 transacciones por volumen.
  3. Reconoce que tu usuario es diferente a otros usuarios: las administraciones públicas deben atender a todo el mundo, y el diseño debe ser acorde a esto: adaptado a quienes tienen deficiencias visuales, a quienes hablan otro idioma, a quienes tiene velocidades de conexión diferentes o distintos niveles de ingresos. Necesitarás pasar tests de usabilidad, utilizar tamaños de letra grandes y contraste alto, y asegurarte de que un lector de pantalla puede navegar correctamente por la web.
  4. Atrae talento a través de una selección inteligente: cuando compres servicios externos, procura trabajar aconsejado para tener unos criterios claros y no excluyas a firmas pequeñas o freelance sin antes conocer su trabajo. “Nadie ha sido despedido por contratar IBM“, se decía hace tiempo. Nada más lejos de la realidad.
  5. Diseña (y escala) teniendo en cuenta las situaciones de desastre: Además de los periodos de impuestos, los mayores índices de tráfico en la web coinciden con desastres. Como gobierno debemos ofrecer seguridad y confianza, así que nuestra web debe estar preparada para esos picos de actividad. No podemos permitirnos problemas de conexión en esos momentos de gran incertidumbre. En NY.gov contrataron una firma especializada en este tipo de casos, para poder escalar los sistemas en momentos de máximos de tráfico y que la web cargara rápido en dispositivos móviles.
  6. Pregunta a los que saben: Preguntar a los stakeholders clave es una de las bases de una buena investigación de usuarios, que redunde en una buena experiencia de usuario.
  7. Sal fuera para conseguir aportes: normalmente la gente que ha hecho webs gubernamentales lleva 10 o 15 años mirando la misma web y trabajando en una oficina. Es difícil ser objetivo y analizar las cosas con perspectiva. Pregunta a los usuarios haciendo encuestas online y, si puedes permitirtelo, prepara tests con usuarios.
  8. El contenido es una parte del problema: en un rediseño no solo diseñas un marco estético, tienes que hacer un esfuerzo porque la información sea revisada para aclararla y limpiarla de contenido ininteligible para un usuario. Recordemos que tenemos que diseñar para todos los públicos, así que es necesario ser consistente en tono y formato. Una escritura clara y concisa también mejora un buen diseño. Puede ser muy útil elaborar unas guías de estilo que siga toda la organización.
  9. Empodera a tus expertos: Actualizar una web no es una tarea exclusiva de personal técnico, debe ser parte del proceso de comunicación dentro de la institución. Si el CMS que utilizas es complejo, la web no estará a su máximo nivel. Trabaja para encontrar un CMS que sea fácil de usar para tus comunicadores, no para los técnicos.
  10. El organigrama no es la arquitectura de la información de tu web: no es una buena idea utilizar tu estructura jerárquica para navegar por la web. El usuario no entiende ni tiene por qué entender tu jerarquía. Haz pruebas de card sorting para asegurar que el usuario encuentra la información que busca sin fricciones.
  11. Ofrece varios caminos para cada pregunta…: porque el usuario siempre tiene la razón. Imagina que un usuario busca un perro de una perrera municipal, puedes empezar buscando “Protección animal”, “Perrera municipal” o incluso “Trámites de adopción”. La administración debe adaptarse a las diferentes maneras de ver el mundo a través de la búsqueda, la navegación y el descubrimiento, no al revés.
  12. …pero sólo una respuesta: unido a lo anterior, no hay nada más frustrante que buscar una respuesta y encontrar varias contradictorias o equivalentes, pero que te hacen dudar con cuál quedarte. Repite como un mantra el “Don’t make me think”, de Steve Krug. Revisa el punto 8, porque puede ser un problema de contenidos obsoletos.
  13. El lanzamiento es el inicio del proceso, no el final: es obvio, pero a mucha gente se le olvida que el plan de proyecto no debe acabar con el lanzamiento. Porque lances una campaña, tus usuarios se comportarán de maneras imprevistas, aparecerán errores donde antes no los había, o problemas de confusión donde antes lo tenían todo claro. La web es un organismo vivo, así que hay que preocuparse de obtener estadísticas de calidad y feedback de los usuarios. Y, sobre todo, establecer un proceso de mejora contínua 😉

Como veis, muchos aspectos que trata Haot son resultado de una dilatada experiencia en diseñar productos y servicios. Por cierto, si estáis interesados en profundizar en el proceso de diseñar productos y servicios digitales, lanzamos una nueva edición de nuestro curso online de Diseño de Producto en septiembre. Si todavía no estás suscrito, ¡inscríbete para que te avisemos!

En Torresburriel Estudio trabajamos proyectos de diseño de servicios y productos digitales en los que la investigación de usuarios es un elemento fundamental del proceso. Si es tu caso, contacta con nosotros hoy mismo y hablamos.

Mejorar la UX en movilidad usando beacons

A medida que la tecnología móvil se está desarrollando, el límite entre la experiencia del usuario física y digital está desapareciendo rápidamente. Hoy queremos hablar de los beacons, unos pequeños dispositivos que están cambiando la forma en que realizamos tareas en entornos de proximidad.

Un beacon es un pequeño dispositivo basados en tecnología Bluetooth de bajo consumo, que se encarga de transmitir una señal que identifica de forma única a cada dispositivo. Esta señal puede ser recibida e interpretada por otros dispositivos (normalmente, un teléfono móvil) que se encuentren dentro del rango (usualmente, hasta varias decenas de metros).

Esquema de un beacon NFC de Estimote

Una gran ventaja de estos dispositivos es que el usuario no necesita conexión a Internet, únicamente un teléfono con Bluetooth activado, que permita la localización del usuario en interiores.

Resumiendo, un beacon es un dispositivo de alcance cercano, que interactúa con los dispositivos que están en sus alrededores, lo que ofrecen múltiples utilidades. Por ejemplo, ver datos sobre una obra de arte cuando paseas por un museo, o mostrar los productos en oferta cuando caminas por un supermercado. Incluso usar tu teléfono móvil para ver la carta del restaurante cuando te sientas a cenar.

Solo hace falta ser un poco imaginativo para pensar en el recorrido futuro: entrar y salir del transporte público sin comprar un billete, con cobro automático a través del móvil, o poder sacar dinero de un cajero una vez te aproximas a la terminal y lo autorizas desde tu teléfono. Sin tener que introducir un PIN, o perder más tiempo del necesario siguiendo una secuencia de pantallas.

Consejos de diseño UX con beacons

A continuación os damos algunas pautas para diseñar una mejor experiencia de usuario con beacons. El diseño de una aplicación que tenga habilitada esta tecnología viene con su propio conjunto de desafíos, y es necesario asegurarse de que los usuarios disfruten de uso de la aplicación, y encuentren valor al utilizarla.

Siendo un dispositivo de proximidad, la primera premisa que debemos cumplir es ofrecer información útil y que esté adaptada al contexto. El mejor uso posible de un beacon es ofrecer contenido información relevante al usuario, en función de su ubicación y contexto. Por tanto, una comprensión contextual de las necesidades de un usuario tiene que ver con la anticipación. ¿Qué espera el usuario, aunque todavía no lo sepa?

Otra expectativa del usuario en entornos de proximidad es la velocidad de respuesta. Es recomendable usar el modo en segundo plano, almacenando información que estará disponible al usuario en el momento en que el usuario se conecte: las aplicaciones de beacon pueden funcionar en segundo plano y cuando el usuario la enciende, lo que ayuda a mejorar la experiencia de uso al mantener una sensación de respuesta inmediata.

Por supuesto, también es importante ser transparente con los datos del usuario que utilizaremos. Esto se ha resuelto muy bien en iOS con la aplicación iBeacon, donde la información de los permisos está muy bien gestionada. Es muy recomendable su guía para desarrolladores para ponerla en práctica.

Por último, un aspecto más técnico que funcional. Si trabajamos en espacios cerrados, no podemos abstraernos de la influencia de las interferencias de señal. La banda de 2,4GHz que es donde funciona este tipo de aparatos es una de las más congestionadas. Al ser una de las pocas bandas libres, la mayoría de aparatos están diseñados para generar las interferencias electromagnéticas de uso en esa frecuencia. Es necesario probar bien la instalación antes de abrirla al uso público, especialmente si usas también señal WiFi, que habitualmente funciona en ese rango de frecuencias.

Finalmente, el gran reto que plantea cualquier tecnología nueva es la tasa de abandono. En el caso de los beacons, su funcionamiento sin intervención del usuario facilita enormemente su implantación. Habitualmente, el usuario está receptivo en un primer uso por esa sensación de novedad, pero no es fácil enganchar al usuario. Lo difícil es que vuelva una segunda y tercera vez, cuando pierde el entusiasmo o la primera vez ha tenido una mala experiencia de uso.

En este caso, el contexto ayuda a eliminar pasos de operación y fricciones en el uso, mejorando la experiencia del usuario. Esto anima a seguir utilizando la tecnología y no abandonarla a los pocos usos.

En Torresburriel Estudio tenemos experiencia diseñando plataformas para diferentes dispositivos y ayudarte con sesiones de consultoría de acompañamiento al diseño sobre cómo adaptar tus productos digitales a los nuevos dispositivos. Además podemos ayudarte a planificar y ejecutar tests con usuarios, antes de lanzar tu producto al público en general.Contacta ahora con nosotros, cuéntanos tu proyecto y te plantearemos soluciones adaptadas a tus necesidades.

Mejorar la UX en banca usando gamificación

En esencia, la experiencia de usuario habla de facilidad de uso y simplicidad. Pero la reciente introducción de conceptos de gamificación presentado una capa adicional: la diversión. La experiencia de usuario no tiene por qué ser sólo fácil, sino que también podría ser agradable.

Sede del DB
Sede central del Deutsche Bank. Foto de Kiefer

La gamificación pretende que un proceso aplique conceptos y dinámicas propias del juego en un contexto diferente. Es decir, se trata de convertir un proceso tedioso en algo más entretenido y que enganche, ayudando a conseguir un objetivo de forma más lúdica.

Efectivamente, la introducción de elementos de juego para hacer una interfaz divertida, comprensible y agradable puede mejorar la experiencia del usuario. Si se hace bien, se ha demostrado que aumenta significativamente el compromiso y la conversión.

Uno de los sectores donde más gamificación veremos en el medio plazo será la banca. Cada vez más, la banca es consciente de su necesidad de renovación (diseño, experiencia de usuario, Mobile-Only) frente a sus competidores. Y la gamificación es una línea de trabajo que todavía tiene que explotar.

Gamificación en productos digitales de banca

Algunas encuestas internas de bancos dicen que sólo el 44% de los usuarios de apps móviles bancarias serían promotores de ellas. Esto demuestra la falta de satisfacción de los usuarios de apps móviles bancarias y explica en parte el actual auge de las empresas de fintech.

En el sector financiero y fintech ya existen algunas iniciativas de gamificación. Fintonic incorpora una funcionalidad de retos personales, donde el usuario identifica el objetivo que quiere conseguir y puede hacer un seguimiento diario de su progresión. Además, añaden la posibilidad de “socializar el reto”, compartiéndolo en las redes para aumentar el compromiso público del usuario con ese reto.

También Bankinter destaca en este aspecto con su proyecto Coinc, que simplifica el ahorro acudiendo a conceptos muchos más mundanos que la propia gestión de un servicio financiero, una cuenta corriente, una tarjeta o una hipoteca. El uso del lenguaje que utiliza es bien diferente: la planificación del ahorro se convierte en metas personales (para qué quiero ahorrar), los plazos en hitos (cuándo necesitaré mi dinero) y el plan de ahorro mensual en cuánto voy a poder ahorrar cada mes.

Otros bancos incluso han llevado la gamificación al siguiente nivel. El banco sueco Ikano Bank lanzó un juego basado en el popular “Flappy Bird” para fomentar el ahorro entre sus clientes y conseguir premios en metálico.

En esa línea innovadora, algunos bancos líderes mundiales como Barclays han lanzado desafíos de mejora de sus apps como el Barclays Launchpad Business Challenge, donde animan a que equipos de desarrollo hagan apps a partir de las APIs (las interfaces de programación de aplicaciones que tiene cualquier sistema) de Barclays mejoras que se después se añadirán a las apps o servicios de Barclays que utilicen sus clientes todos los días.

Lo más similar que se ha hecho en España son el FinAppsParty de CaixaBank o el BBVA Innova Challenge Big Data, donde daba acceso a la API de BBVA para que los concursantes hicieran visualizaciones, sitios web o aplicaciones, pero sin el componente de mejora propia que ha añadido Barclays a su desafío. Banco Sabadell ha abierto su API y hay varias apps que la usan.

Este tipo de colaboraciones entre entidades bancarias y startups de fintech será cada vez más frecuentes, ya que es una relación ganar-ganar. Las startups innovan en productos digitales pero no disponen de una base de clientes suficiente y les lleva tiempo conseguirla. Por contra, las entidades bancarias disponen de esa base de clientes amplia pero asumen menos riesgos en sus operaciones. Además, sus productos digitales suelen adolecer de un diseño centrado en el usuario, ya que sus productos están pensados y ejecutados por gente con conocimientos de operativa bancaria, pero no para usuarios medios.

El poder de la geolocalización y la realidad aumentada tampoco debe subestimarse, como ha demostrado el éxito de Pokémon Go. Sólo estamos empezando a ver las aplicaciones de esta tecnología, pero todo apunta a que serán cada vez más habituales y algunas empresas ya trabajan en esta línea de incorporar entornos virtualizados a a operativa bancaria. Unido a la interacción social, suponen un gran avance en experiencia de cliente que podría incorporarse pronto a la forma de trabajar de la banca.

En Torresburriel Estudio apoyamos el rediseño de tu producto digital, con un proyecto de acompañamiento donde aplicamos metodologías de diseño centrado en el usuario. Contacta con nosotros, y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.

UX Learn, mejor diseño web en los premios Aragón en la Red

El pasado miércoles 20 tuvo lugar la entrega de galardones de la 3ª edición de los Premios Aragón en la Red, que organiza Grupo Heraldo. Una gala que reunió a buena parte del sector de Internet y las nuevas tecnologías de Aragón, y que se celebró en el entorno inigualable del edificio Caixaforum Zaragoza.

En esta ocasión, no como espectadores sino como finalistas, ya que Torresburriel Estudio estaba nominada en la categoría “Mejor diseño web” por el rediseño de la web de UX Learn, nuestra rama de formación en usabilidad y experiencia de usuario.

Foto general de los Premios Aragón en la Red
Fotografía de todos los premiados, junto con las autoridades que entregaron los premios. Foto de Alfonso Romay.

Como ya contamos hace tiempo, el rediseño de la web de UX Learn derivó en una notable mejora del sitio, especialmente en la reducción de fricciones en el proceso de registro y en el consiguiente aumento de la conversión. Estos buenos resultados operativos nos animaron a presentar este proyecto propio a estos premios, en la categoría de mejor diseño web. Cuál fue nuestra sorpresa al ser elegidos finalistas, junto al Al Ayre Español y Montalbán Estudio, entre los diecisiete proyectos que se presentaron en esa categoría.

Y, finalmente, resultamos premiados de manos del presidente de Hiberus, Iñigo de Yarza. Nuestro CEO, Daniel, agradeció la distinción ya que “siempre resulta muy agradable que reconozcan en tu tierra el trabajo que haces; somos una empresa pequeña de formación on-line que piensa en grande y así lo demuestran nuestros alumnos que están en casi todos los países de habla hispana”.

Y, en este caso, la alegría se multiplicó porque dos clientes del estudio, @SEAS_Formacion y @FutbolEmotionES, se llevaron también sendos premios en su categoría. Merecidos ambos, sin duda, por la gran labor que hacen en entorno digital en dos sectores tan competitivos como la formación y el comercio electrónico de material deportivo. Algo que conocemos bien, porque trabajamos con ellos.

Os dejamos con la lista completa de los premiados, en todas las categorías:

  • Premio GOOGLE a la mejor web de Administración Pública:
    Ayuntamiento de Fraga www.fraga.org
  • Premio TELEFÓNICA a la mejor aplicación móvil:
    Basket Zaragoza, la aplicación de CAI Zaragoza (disponible para Android y iPhone).
  • Premio HIBERUS a la mejor web de comercio electrónico:
    FutbolEmotion, Grupo SoloPorteros www.futbolemotion.com
  • Premio a la mejor web de empresa:
    Campus SEAS www.campusseas.com
  • Premio a mejor diseño web:
    UX Learn www.uxlearn.com
  • Premio CAIXABANK a la mejor web de ONG:
    Asociación de Padres de Niños Oncológicos de Aragón www.aspanoa.org
  • Premio GRANCASA al mejor blog personal:
    A Miguel Nonay y su web de turismo accesible www.viajerossinlimite.com
  • Premio especial del público:
    A la Asociación Aragonesa de Esclerosis Lateral Amiotrófica www.araela.org

Y, por supuesto, la foto de familia de los premiados. ¡Enhorabuena!

Foto de los ganadores de los Premios Aragón en la Red
Fotografía de todos los premiados en las diferentes categorías. Foto de Alfonso Romay.

Ubicando menús de navegación en dispositivos móviles

Siguiendo con la serie sobre diseño para dispositivos móviles, hoy hablamos de la ubicación de los menús de navegación y, en concreto, de la navegación al pie en teléfonos móviles (conocidos como bottom menus).

Normalmente la ubicación de la navegación es un elemento que puede parecer inocuo en cuanto a experiencia de usuario, pero las pruebas de campo muestran que puede ser un aspecto diferencial. Los usuarios saben valorar un buen trabajo de priorización en un menú de navegación, aunque muchas veces sea de forma inconsciente.

Zonas de acceso de uso con 1 mano
Zonas de acceso de la pantalla con una sola mano, según la posición de uso del móvil. Fuente uxmatters

¿Cómo usamos el móvil?

Al diseñar un producto digital tenemos que tener en cuenta los posibles casos de uso más habituales y elaborar un diseño a partir de ellos. Son estos patrones los que determinan las posibles soluciones de diseño.

En su investigación sobre el uso de dispositivos móviles, Steven Hoober descubrió que los usuarios utilizan mayoritariamente su teléfono móvil con una mano y, con menos frecuencia, con las dos (85% frente a 15%). De hecho, prácticamente la mitad de las más de 1.300 personas investigadas usan solamente el pulgar (49%).

En los siguientes gráficos, puede verse el alcance del usuario en función de su patrón de uso (con una mano usando el pulgar, con las dos manos usando una para sujetar el teléfono y la otra para navegar, sujetando el móvil con ambas manos y utilizando los pulgares o la disposición apaisada).

En cualquiera de estos patrones, el color verde indica dónde se puede llegar fácilmente, el amarillo con algunas dificultades y en rojo, las zonas inaccesibles.

Zonas de acceso de uso con 2 manos
Zonas de acceso de la pantalla con dos manos, según la posición de uso del móvil. Fuente uxmatters

Estos patrones de uso demuestran claramente una cosa: sea cual sea tu uso habitual, el mejor lugar para colocar un menú es la zona baja de la pantalla, ya que en todas las posiciones está en verde o mayoritariamente en verde. Es importante, por tanto, colocar las acciones de uso frecuente en la parte inferior de la pantalla, ya que se alcanzan más cómodamente cuando usamos el teléfono con una sola mano o con un solo dedo.

Menús de navegación al pie

Estos menús aparecen como recomendación de diseño en algunas guías de estilo para diseñadores, por ejemplo en la sección Bottom Navigation de Material Design o en la sección Toolbars de iOS Human Interface Guidelines. Sin embargo, los menús de navegación al pie no son tan habituales, a pesar de estos patrones de uso que los avalan.

A continuación tenéis un par de ejemplos de menús de navegación al pie: la aplicación de Facebook para iOS y la app Twicca para Android.

Menú de navegación al pie de Facebook para iOS
Menú de navegación al pie de la versión iPhone de Facebook

Menú de navegación al pie de Twicca
Menú de navegación al pie de Twicca

Os preguntaréis, ¿qué recomendaciones debo seguir si quiero hacer un buen diseño para un menú de navegación al pie? Ahí van algunas ideas:

  • Muestra entre tres y cinco opciones: como hemos dicho en otras ocasiones, para priorizar opciones en dispositivos móviles lo mejor es limitar el número de opciones a un máximo de cinco. Si necesitas más de cinco opciones, puedes mostrar las cuatro más importantes y agrupar el resto en un menú hamburguesa (como en el caos de la app de Facebook). Si hay menos de opciones, es recomendable un diseño con pestañas mejor que un menú de navegación al pie.
  • Utiliza iconos universales: o, al menos, claramente reconocibles por los usuarios. En el ejemplo de Twicca, la @ son menciones, algo que cualquier usuario de Twitter puede entender. En el caso de la app de Facebook, la silueta son usuarios/amigos. Además, usan un rotulado debajo del icono para facilitar la comprensión.
  • Utiliza un rotulado efectivo: no pongas etiquetas largas que dificulten la lectura. Mejor emplea palabras cortas y efectivas.
  • Ordena los iconos por frecuencia de uso: desde el estudio os recomendamos que los dos iconos más utilizados aparezcan en los extremos, ya que es más natural y cuesta menos hacer ese movimiento que navegar entre dos iconos que aparecen juntos.
  • Olvida las barras de navegación deslizable: puede parecer una buena idea por la limitación de espacio, pero definitivamente no lo es. Como explicaba Tog en sus principios de interacción, cualquier intento de esconder la complejidad, servirá para incrementarla.
  • Evita utilizar varios colores para los iconos: resalta con un color la sección donde se encuentra el usuario y el resto en un color que no destaque (gris, por ejemplo, puede ser una buena opción).

En Torresburriel Estudio apoyamos el rediseño de tu producto digital, con un proyecto de acompañamiento donde aplicamos metodologías de diseño centrado en el usuario. Contacta con nosotros, y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.

Generar urgencia para aumentar la conversión en comercio electrónico

Como hemos comentado en este blog en varias ocasiones, uno de los aspectos principales que debemos atender si tenemos un comercio electrónico, son los esfuerzos que dedicamos al aumento de la conversión.

Las palancas de compra, por ejemplo, son microinteracciones que animan a nuestros clientes a comprar. En este artículo vamos a tratar algunas palancas que buscan persuadir al usuario para que complete la acción que buscamos cuanto antes.

Captura de pantalla 2016-07-19 a las 12.13.08
Hotel con varias palancas de compra

Para recoger buenas prácticas sobre cómo usar las palancas de compra, podemos hacer un benchmark de sitios web. Sin duda, uno de los sitios que mejor utiliza estas palancas para aumentar la conversión es Booking. Busques lo que busques, Booking se encarga de que tengas presente en todo momento que hay más gente mirando el alojamiento que te interesa, que ese alojamiento se ha reservado recientemente o que ese atractivo descuento sólo está disponible hoy. Todo esto genera sobre el usuario una cierta urgencia que le lleva a reservar más rápidamente.

Si el usuario no tuviera esta información disponible, navegaría un largo periodo de tiempo por los alojamientos, incluso días, hasta que finalmente se decidiese por uno, si es que finalmente reservara. Pero esas palancas de compra aceleran su decisión de reservar al hacerle pensar que puede quedarse sin ese alojamiento que le interesa. Y esta sensación de estrés aumenta cuando hacemos uso de varias palancas de compra al mismo tiempo y nuestros usuarios cruzan los datos: “Hay 4 personas mirando este hotel, se han hecho 11 reservas hoy y tan sólo quedan 2 habitaciones libres. ¡Tengo que hacer mi reserva antes de que se agoten!

Dicho esto, vamos a ver algunos ejemplos reales de palancas que incorporan diferentes sitios web para aumentar su ratio de conversión.

Mensajes de información y alerta

Una vez que has introducido una mínima información sobre tu búsqueda, Booking te proporciona información adicional mediante el uso de mensajes emergentes.

Captura de pantalla 2016-07-18 a las 11.10.45
Banner de ocupación de una ciudad, en concreto Madrid

Por ejemplo, a la izquierda te informa de que más de la mitad de los alojamientos disponibles en Madrid ya han sido reservados porque es una ciudad con una alta tasa de ocupación. Además, a la derecha aparecen dos mensajes emergentes, a los pocos segundos de haber accedido a la página, informándote sobre la subida de precios en el destino seleccionado para las fechas que te interesan. Y, además, añade información sobre descuentos (ofertas estrella) que puedes recibir si reservas en algunos alojamientos.

Avisos de disponibilidad y descuentos en el listado de productos

Una vez llegas a los resultados de la búsqueda o al listado de producto, te presentan toda la información para favorecer que reserves una habitación cuanto antes.

Captura de pantalla 2016-07-18 a las 11.11.41
Selección de hoteles de Booking en Madrid

Para ello, Booking muestra distintos tipos de alertas, como:

  • El número de personas que está mirando en este momento cada uno de los alojamientos (“Hay 3 personas mirando en este momento”).
  • El número de veces que se ha reservado hoy un alojamiento (“Reservado 8 veces hoy”) o si acaba de reservarlo alguien (“¡Recién reservado!”), con tonos rojos en el texto o de color de fondo, para destacarlo sobre el resto de mensajes.
  • Si dispone de alguna oferta (icono en naranja que indica “oferta”) y cuál es el precio final.
  • Si hay una oferta que sólo está disponible durante un plazo muy corto de tiempo (“Hoy 35% menos”).
  • El número de habitaciones que quedan disponibles (“Solo queda 1 habitación en nuestra web”), con el mismo recurso del texto en rojo.

Algo destacable es que muestra incluso los alojamientos agotados, en lugar de ocultar esas opciones que no están disponibles. Las muestra para que el usuario se de cuenta de que existen alojamientos que ya no disponen de habitaciones libres y, con ello, generar más prisa en reservar.

Avisos de disponibilidad y ofertas en la ficha de producto

Del mismo modo, una vez que accedes a la ficha de un alojamiento, Booking insiste en mostrar diversas palancas de compra que generen urgencia sobre el usuario para incitar y acelerar la compra.

Captura de pantalla 2016-07-18 a las 11.08.51
Selección de habitación

En este caso, vemos mensajes y alertas como:

  • El número de habitaciones que quedan disponibles de las diferentes opciones (“Solo queda 1 habitación en nuestra web”).
  • El precio final que tienen hoy las habitaciones tras los descuentos correspondientes.
  • El número de personas que está mirando el alojamiento en este momento (“Hay 4 personas mirando en este momento”).
  • Las habitaciones que ya se han agotado en Booking (“Ya se ha agotado en nuestra página”).
  • El número de alojamientos de características similares al que se está visualizando que ya se han agotado en Booking, apoyándose en un texto simpático (“Locura en Madrid”).

Incluso el texto del call-to-action está pensado para animar a completar la acción (“Reservaré”), y eliminar fricciones (“Sin necesidad de registrarse”) para aquellos usuarios que pueden pensar que tendrán que dar sus datos o que habrá cargos en su tarjeta de crédito.

Otros ejemplos de palancas de compra

Por supuesto, Booking no es el único sitio que hace uso de este tipo de palancas de compra. Hay multitud de sitios web que muestran mensajes y alertas que generan urgencia sobre el usuario para aumentar su ratio de conversión. A continuación, vemos un par de ejemplos con técnicas diferentes: eBay y Voyage Privé.

Captura de pantalla 2016-07-18 a las 11.18.45
Palancas de compra en Ebay

Como podemos ver en la imagen anterior, las fichas de producto de eBay incorporan algunas palancas de compra diferentes a Booking, como:

  • La frecuencia de visitas a ese producto cada hora (“3 visitas por hora”), lo que indirectamente da una idea del nivel de interés por el artículo.
  • La existencia de un número de artículos limitado (“Cantidad limitada”), junto con el número de unidades vendidas hoy (“3 vendidos”).
  • El número de personas que han añadido ese producto a su lista de seguimiento (“31 en seguimiento”).

Todas estas palancas tratan de generar urgencia indicando que hay otros usuarios muy interesados en este producto. Si no te das prisa, te quedarás sin este artículo que tanto te gusta.

Otro ejemplo a analizar es Voyage Privé, una web de ofertas puntuales de hoteles, donde el principal elemento con el que juegan es el tiempo que dura la oferta. En este tipo de sitios, se indica el tiempo que queda hasta el final de la oferta en todos los lugares posibles (portada, listado, ficha, boletines de correo,…) y el descuento máximo del que disfrutarás si reservas.

Captura de pantalla 2016-07-18 a las 11.23.12
Imagen de alojamiento en Voyage Privé

Captura de pantalla 2016-07-18 a las 11.26.09
Imagen de palancas de compra en Voyage Privé

Además, como vemos, en el selector de fechas de las ofertas de Voyage Privé se indican diferentes elementos que incitan la compra:

  • Un mensaje de “Últimas plazas” en la parte superior, antes de reservar. Quizá no suficientemente destacado.
  • La cantidad disponible en los casos de escasez (“Queda 1”).
  • Sugerencia de otras opciones disponibles. Por ejemplo, para el 19 de septiembre no está disponible la reserva de 7 noches, pero todavía puedes reservar la opción de 5 noches.
  • Las opciones agotadas que no están disponibles siguen visibles, como en el caso de Booking.

Como ya hemos comentado, esto son sólo algunos ejemplos de palancas de compra. E, indudablemente, el ratio de conversión no es el único indicador de éxito de un comercio electrónico, pero es una métrica muy importante.

En definitiva, la constante en todas estas palancas reside en captar la atención del posible comprador y utilizar técnicas de persuasión para ayudarle a que complete la acción prevista, llegando la esperada conversión de usuario en cliente.

En Torresburriel Estudio te podemos ayudar a implementar procesos de mejora continua en tus productos digitales mediante una consultoría de acompañamiento.
Contacta con nosotros, y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.

Nuevos principios de diseño de interacción de Tognazzini

Hoy os traemos un artículo sobre diseño de interacción, uno de los pilares de la experiencia de usuario en productos y servicios digitales.

Guía de gestos
Guía visual de gestos. Gráfico de Luke Wroblewski

Bruce Tognazzini, más conocido como Tog, publicó hace tiempo sus principios básicos de diseño de interacción. Este texto es un clásico de la usabilidad y la experiencia de usuario, que también tiene traducción a castellano. Principios como anticipación, consistencia o legibilidad son habituales en cualquier análisis de interacción serio.

Hace pocos meses, Tog publicó una versión revisada y mejorada, que incluye adaptación a los dispositivos móviles. En este artículo nos centramos en las cuatro secciones nuevas: Estética, Color, Hallabilidad (discoverability) y Simplicidad.

Los comentarios son nuestros, aunque hemos utilizado ideas cortas para no hacer demasiado extenso el post. Por supuesto, os recomendamos leer el artículo completo escrito por Tog, a pesar de su extensión de casi 30 páginas.

Principios de estética

Principio: El diseño estético se debe dejar para aquellos que han aprendido y tienen habilidades en su aplicación: diseñadores gráficos/visuales.

Los profesionales de lo visual deben ser quienes se encarguen del diseño.

Principio: La moda nunca debe sobrepasar a la usabilidad.

Cambios visuales/gráficos de un producto o servicio deben mantener o mejorar la usabilidad que tuviera, nunca un gran cambio estético debe empeorar el uso.

Principio: Prueba con el usuario el diseño visual de manera exhaustiva como un diseño de conducta.

Prueba con los usuarios el desempeño del diseño nuevo frente al viejo, intenta que siempre el diseño nuevo mejore o iguale en usabilidad y eficiencia al diseño antiguo, si no haz las modificaciones pertinentes para que sea así.

Principios de color

Principio: Siempre que uses color para transmitir información en la interfaz, debes también usar pistas secundarias para transmitir la información para aquellos que no pueden ver los colores presentados.

Las pistas secundarias suelen ser tramas sobre los colores que los diferencien unos de otros, o algún icono que ayude al entendimiento de esa pista. Por ejemplo, el modo para deficiencias visuales en Trello es un buen ejemplo de este principio.

Principio: Prueba tu sitio para ver qué es lo que ven las personas ciegas al color.

Hacer un test con personas que tienen deficiencias en la percepción del color es la mejor manera de saber con certeza los problemas que se encuentran con una interfaz estas personas y que te den pistas de cómo mejorarla.

Principio: No evites el color en un interfaz sólo porque no todos los usuarios puedan ver todos los colores.

No es necesario volver a los años 80 y ver las interfaces en escala de grises, pero intenta conseguir que todos los usuarios tengan una experiencia y un uso correcto.

Principio: No quites o agobies con pistas de color en la interfaz por una moda pasajera de diseño gráfico.

La moderación es siempre una buena práctica. Usa pistas de color si lo crees necesario pero no agobies con ello, tampoco dejes que una tendencia de diseño te impida hacer un interfaz deje de ser usable para las personas con problemas de percepción del color.

Principios de hallabilidad

Principio: Cualquier intento de esconder la complejidad, servirá para incrementarla.

La navegación oculta en un menú hamburguesa es un ejemplo de mala aplicación de este principio. Otro ejemplo aplicable serían las opciones de de ajustes de algunos móviles.

Principio: Si eliges esconder la complejidad, hazlo sólo en la sala de demostraciones.

Si escondes la complejidad intencionalmente, intenta ofrecer opciones al usuario que le permitan ir avanzando poco a poco. Desarrollar funcionalidades para luego ocultarlas no tiene sentido.

Principio: Si el usuario no puede encontrarlo, no existe.

Esconder las opciones más avanzadas o que pueden dañar el aparato bajo varias pantallas, puede ser buena idea, pero intenta que sean lo suficientemente “encontrables” como para que las pocas veces que se usen, se encuentren lógicamente.

Principio: Usa el descubrimiento activo para guiar a la gente hacía funciones más avanzadas.

Los tutoriales de inicio están bien (onboarding), pero intenta no mostrar funciones demasiado avanzadas cuando el usuario es todavía novato. Para ello, es mejor usar el descubrimiento activo, es decir que el usuario haga cosas y cuando sepamos que las ha hecho correctamente, explicarle alguna funcionalidad más avanzada.

Principio: Los controles y otros objetos necesarios para el uso exitoso del software deben ser accesibles visualmente todo el tiempo.

Muchas aplicaciones esconden los controles principales en cuanto no se pasa el ratón por encima, intenta que esto no sea así.

Principio: No hay ninguna excepción de “elegancia” a la hallabilidad.

No empeores la hallabilidad de una interfaz por mejorar su diseño estético y hacerlo más elegante. La mejora estética es negociable, la usabilidad no. Como decíamos antes, la moda nunca debe superar a la usabilidad.

Principio: Con la excepción de los pequeños dispositivos móviles, los controles no deben encajarse en el medio del área de contenido.

Es recomendable diferenciar entre controles de la aplicación y el área de contenidos siempre que sea posible.

Principio: Comunica tu vocabulario gestual con diagramas visuales.

En las aplicaciones con controles mediante gestos, explica al usuario mediante un diagrama visual cuales son y sus funcionalidades.

Principio: Esfuérzate por equilibrar.

No estamos en los 80 o principios de los 90 donde casi nadie había usado un ordenador, no pongas iconos de información al lado de cada objeto. Usa tutoriales de overlay para explicar las cosas por ejemplo.

Principio: Prueba la hallabilidad con usuarios.

Si tienes dudas sobre tu aplicación o una interfaz, lo mejor es probarla siempre y conocer con certeza donde se encuentran los problemas los usuarios.

Principios de simplicidad

Principio: Equilibra entre sencillez de instalación y sencillez de uso.

A veces nos obsesionamos con que una aplicación sea fácil de instalar cuando es un proceso que solo ocurre una vez, mientras que poner el foco en el uso continuado es lo que debe prevalecer.

Principio: Evita la “ilusión de simplicidad”.

No hagas la interfaz tan simple que el usuario pierda funcionalidades con el único propósito de ser visualmente correcta. Muestra las funciones que sean necesarias, no las mínimas.

Principio: Utiliza la revelación progresiva para disminuir la curva de aprendizaje.

A veces mostramos a los usuarios funcionalidades demasiado avanzadas, incluso antes de que el usuario pueda asimilar todas las funcionalidades básicas. Es recomendable que estas funcionalidades se muestren progresivamente.

Principio: No simplifiques eliminando funciones necesarias.

Investiga qué funcionalidades usan tus usuarios, y cuáles son imprescindibles para su trabajo diario. Luego prioriza entre ellas para mostrarlas.

En Torresburriel Estudio estamos especializados a diseñar y realizar tests con usuarios para diferentes productos o servicios digitales, dependiendo de los objetivos del proyecto. Contacta ahora con nosotros y hablamos :-).

Experiencia de usuario en pagos contactless

La aparición de los chip NFC (acrónimo de Near Field Communication) y su aplicación a los métodos de pago ha abierto un mundo nuevo al diseño de la experiencia de usuario, sobre todo en los pequeños pagos.

Terminal contactless de ING
Terminal de pago de ING. Foto de Wikimedia

Emisores de tarjetas como Visa o Mastercard, ya disponen de soluciones contactless y la mayoría de las tarjetas tanto de débito como de crédito han empezado a incorporar esta tecnología. Además, muchas entidades financieras como La Caixa o BBVA, ya han implementado soluciones con este tipo de tecnología como BBVA Wallet.

También fabricantes tecnológicos están desarrollando soluciones en este ámbito, como Samsung Pay, disponible desde junio en España, y Apple Pay, que no hay fecha todavía pero se rumorea que en el último trimestre de este año.

Experiencia de usuario en dispositivos contactless

Desde un punto de vista de experiencia de usuario, hay varios temas a tener en cuenta.

Aunque técnicamente es posible hacer este tipo de pagos sin apenas esfuerzo, la observación de los usuarios en el mundo real pinta un cuadro bastante diferente. El proceso es muy sencillo sobre el papel, como explican en el caso de las tarjetas VISA:

Proceso de pago de una Visa Contactless
Proceso de pago de una Visa Contactless

También los dispositivos móviles aprovechan esa idea de pago en tres sencillos pasos para ofrecer la idea de simplicidad en las transacciones como es el caso de Samsung Pay:

Proceso de pago de Samsung Pay
Proceso de pago de Samsung Pay

Con respecto a la experiencia de uso, en estos primeros meses puede suponer un problema la disparidad de soluciones que aparecerán. Hasta que haya una cierta estandarización o unificación de criterios entre todos los proveedores la experiencia será desigual entre distintos servicios, lo que sin duda influirá en la experiencia de uso.

Como en cualquier nueva experiencia, es necesario comprender las necesidades del cliente durante todo el uso. En estos casos, la investigación en profundidad de las necesidades de los usuarios, así como los casos de uso y el diseño de user journeys será fundamental para evitar experiencias frustrantes. También una batería de tests con usuarios, porque esas experiencias pueden llegar a ser muy diferentes según el contexto donde se mueva el comercio. Por ejemplo, no supone lo mismo pagar una factura de un restaurante local que hacerlo en un país donde no conocemos el cambio con la moneda oficial y quizá no el cliente no entiende el idioma y, por tanto, las indicaciones del camarero o del terminal.

Por otro lado, la experiencia no será satisfactoria si el empleado que cobra no entiende la tecnología. Una mala explicación o una simple sensación de inseguridad pueden generar desconfianza o pereza en el consumidor a la hora de usar estos dispositivos. Aquí las proveedoras tiene mucho que decir: o el diseño es impecable para usarse sin instrucciones adicionales o habrá que formar adecuadamente a los puntos de venta. Por ejemplo, Mastercard ya ha creado una guía sencilla para optimizar la experiencia de un cliente (PDF) que usa esta tecnología.

Además, es relevante destacar que el uso de la tarjeta o dispositivos contactless se realizará en el punto de venta, un momento que puede llegar a ser estresante si algo no funciona correctamente y el usuario no puede completar el pago. Desde un punto de vista de diseño, es necesario mantener informado al cliente del punto donde se encuentra en el proceso, usando un lenguaje simple que aporte la información oportuna. Por ejemplo, dando información relevante si hay un error durante la validación del proceso o indicándole la siguiente acción que debe completar.

En definitiva, el diseño y la experiencia de usuario que sean capaces de generar serán factores determinantes sobre si las posibilidades de los pagos móviles se consolidarán con más o menos fuerza.

En Torresburriel Estudio realizamos proyectos de consultoría en diseño de experiencia de usuario para tu producto digital, aplicando metodologías de diseño centrado en el usuario.
Contacta con nosotros, y cuéntanos tu proyecto.

Proyecto: Diseño rent a car HelleHollis

Cuando hacemos uso de los servicios de empresas de coches de alquiler uno de los contextos más habituales es el de los momentos de ocio relacionados con las vacaciones. No es este el único contexto en el que se hace uso de los coches de alquiler, evidentemente, si bien el caso que nos ocupa hoy es el primero. Y es que el contexto de uso de un servicio es uno de los primeros elementos que conviene acotar cuando se aborda el rediseño de una propiedad digital.

[TBE] HH Home
Home de la web de HelleHollis

Hoy traemos la experiencia de trabajo que hemos abordado en el estudio con una empresa que se dedica, precisamente, al alquiler de coches. Y lo primero que tuvimos que acotar es, como decía al inicio, de qué contexto se trata. En ese sentido el conocimiento inicial tanto de la localización de la empresa, como de los coches disponibles así como de los clientes que hacen uso de sus servicios nos permitió acotar definitivamente de qué escenario se trataba y con el que debíamos empezar a trabajar.

[TBE] HH Calendario
Selección de fechas

Así las cosas, abordamos un proyecto de rediseño de una propiedad digital mediante la cual los clientes podían reservar coches. La compañía está localizada en Málaga, y tiene una sucursal en Fuengirola, con lo que trabajamos con un modelo en el que la utilización del servicio tiene un objetivo principal relacionado con el ocio y el turismo. A través de las entrevistas con los principales interlocutores de la empresa pudimos acotar cuál es el público objetivo, los clientes para quienes abordamos el rediseño.

La foto es clara: personas que van a España de vacaciones, concretamente personas que llegan al aeropuerto internacional de Málaga y en muchas ocasiones hacen la reserva en origen de modo que al llegar a destino tengan listo el coche que han reservado.

[TBE] HH Configuración vehículo
Configuración de vehículo

En ese sentido nos preocupó sobremanera la forma en la que se debía plantear el proceso de reserva de un vehículo, considerando el origen de los clientes y el gap existente entre las condiciones climatológicas de origen y de destino. Del mismo modo nos preocupaba la identificación del producto: marca, modelo y versión, de forma que no supusiera una barrera al alquiler, y por contra fuese una palanca que ayudase a confirmar y acelerar la decisión de compra.

Por último, el proyecto venía condicionado por la necesidad de mantener el trabajo, intenso, de posicionamiento que la compañía implementa en esta propiedad digital, de forma que cualquier modificación de la arquitectura del mismo estuviese contemplada y salvaguardada para abordar un proceso de migración.

[TBE] WF Home
Wireframe de trabajo de la Home

Sketching, wireframing, diseño visual y front fueron las herramientas puestas a disposición por parte del estudio para llevar a buen puerto el proyecto de rediseño, así como una estrategia de comunicación permanente y fluida con los interlocutores en el cliente, mediante la cual en las fases iniciales y en las fases finales del proyecto todos los detalles que podemos considerar como “trazo fino” no perdiesen su naturaleza y resultado final.

[TBE] WF Selección vehículo
Wireframe de trabajo de la selección de vehículo

Como siempre decimos, todo feedback que consideréis oportuno aportar será bien recibido.

En Torresburriel Estudio apoyamos el rediseño de tu producto digital, con un proyecto de acompañamiento donde aplicamos metodologías de diseño centrado en el usuario. Contacta con nosotros, y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.