PlayRestart con Hanzo y Erretres

Ayer tuve la ocasión de asistir a Play Restart en la biblioteca de Las Naves.

Para quienes no lo conozcan, PlayRestart es un evento de diseño organizado por Wences Sanz (@stereochromo) que junto con Xavi Calmo de Estudio Menta moderaban en esta casión la mesa redonda.

Play Restart

Y como comentaron al principio la idea es que esas conversaciones que tenemos con los colegas de trabajo (a menudo en un bar) trasladarlas a un evento para que lleguen a más personas. En este caso los invitados de lujo eran Pablo Rubio de Erretres Design y Borja Delgado de Hanzo Studio.

Nos comentaron historias de sus inicios, cada uno de forma diferente, y de como gestionan sus equipos.

Borja comenta que crearon Hanzo entre 4 socios para trabajar a gusto realizando proyectos de calidad (siendo su primer cliente BBVA, palabras mayores). Que más que ambición, lo que hay que tener claro es saber qué se quiere montar.

Y que cultura de trabajo quieres que tenga.

El crecimiento les ha venido después de ello, pero no crearon Hanzo con la idea de que fuera un estudio enorme. Y es que Hanzo ha triplicado su número de empleados y de facturación en 3 meses y la estructura lo ha aguantado. Y eso es porque las bases que han creado y la forma de trabajar es correcta y soporta ese aumento, por la cultura de empresa que crearon ellos desde el inicio.

Hanzo tiene corazoncito freelance porque lo crearon siendo freelance.

Ellos eran responsables de entregar sus proyectos, y les daba igual cuando trabajase cada uno. Por lo que al crecer han buscado gente que mole trabajar con ellos pero que sean serios y se comprometan a entragar un trabajo de calidad.

Sigue leyendo

Presentator, una alternativa (gratis) a Invision

Hace pocos días( v1.0) salió Presentator una alternativa gratuita a InVision o Marvel. Estas dos tienen si que disponen de versiones gratuitas pero con muy poca capacidad (1 proyecto, 1 usuario +/-).

Las 3 permiten subir prototipos o diseños finales (creados con Sketch, Axure, Photoshop…), y lo que es su core, enlazarlos para crear una navegación que simule el comportamiento real de la web o app.

Presentator

Ofrecen muchas funcionalidades relacionadas con trabajar en equipo siendo una herramienta de gestión de proyectos ya que permite iniciar una conversación en base a algo real como es un prototipo, facilitando la comunicación entre los miembros del equipo y el cliente, teniendo toda la información en un mismo lugar al alcance de todos, en vez de en miles emails.

InVision

InVision es uno de los software más utilizados en el momento por equipos de diseño y experiencia de usuario de pequeñas y grandes compañías (AIRBNB, Salesforce, Twitter, Shopify…).

invision

Un extra muy interesante es su herramienta “LiveShare” , que permite la posibilidad de hacer una presentación en vivo desde InVision, convirtiendo la pantalla en una pizarra para que podamos anotar cualquier cosa que surja durante la reunión.

Marvel

Han creado una herramienta llamada «Canvas» que te permite realizar diseños sencillos directamente en Marvel sin tener que depender de otro software de diseño.

Marvel Canvas

A mi, me gusta mucho para realizar prototipos interactivos rápidos para móviles, ya que puedes hacer fotos de los dibujos, y enlazarlos creando una primera versión perfecta ara testear, similar a Proto.io

Ventajas de los workshops

Ir a un sitio nuevo, juntar varias personas de diferentes ámbitos para que trabajen juntas, darles rotuladores y post-its, y pedirles que no hablen sino que escriban o dibujen sus ideas, predispone al cerebro a trabajar de forma diferente.

Un workshop rompe la rutina y crea nuevas situaciones y sensaciones desde el inicio.

Te levantas a una hora diferente, te vistes de otra forma, coges un camino alternativo ya que no vas a la oficina… Con la idea de trabajar en grupo podemos incluso estar un poco nerviosos… nuestro corazón se acelera.

La rutina es buena para alcanzar orden y eficiencia en una profesión, pero si buscamos creatividad, necesitamos inspiración.

Un workshop consigue inspiración e innovación al juntar miembros con diferentes conocimientos, al cambiar los roles de cada día… pero lo más importante es que los equipos consiguen nuevas ideas JUNTOS.

Pensar y construir juntos

Tanto en la vida personal como en la profesional, trabajamos en varios proyectos con mucha gente en los que asumimos diferente roles. En algunos, lideramos, en otros delegamos, en otros colaboramos… pero ¿cuántas veces trabajos activamente juntos?

Muchas veces gastamos más energía defendiendo una primera opinión que explorando más opciones cuando a lo mejor no es la opción más adecuada para el grupo.

Además en una reunión hablada siempre hay gente que habla más o gente más tímida que no participa. Si todo el mundo está obligado a escribir o dibujar sus ideas, todo el mundo tiene voz. No existen problemas de ego, ni de que «siempre decida el jefe».

Las ideas no son de nadie, pertenecen al grupo.

Es el grupo quien las valora en conjunto. Nadie discute nada, sino que todo se visualiza. El resultado son un montón de opciones que facilitan la extracción de conclusiones.

Evitar la figura del experto

En un workshop no hay nadie delante de todo el grupo hablando. En vez de hacer un trabajo individual sobre lo que somos expertos que nadie lee, es mejor visualizar un proyecto común a través del dibujo o la escritura, construyendo un proyecto mediante la contribución de cada uno en vez de crearlo separadamente.

Sigue leyendo

Elementos de un sistema de diseño

Seguimos con la serie de artículos de cómo crear un buen sistema de diseño, primero vimos por qué eran útiles y segundo las características de un buen sistema de diseño. Continuamos con este artículo sobre qué debe contener un sistema de diseño.

Como comenta el libro Lean UX, «Si está hecho de pixels va en el sistema de diseño«.

Todos los componentes, con la definición de su aspecto visual e interacción, el código necesario para insertarlo, sus clases, selectores, modificadores… deberían estar en el sistema.

iOS Design System

Ejemplo de Search Bars en el Sistema de Diseño para iOS

Qué aspecto visual tiene el elemento

Detalles sobre el tamaño mínimo y máximo, restricciones verticales u horizontales, color, estados (active, inactive, hover….)….

Dónde se coloca normalmente en la pantalla

Especifica claramente si un elemento sólo puede estar ubicado en ciertos lugares de la pantalla, así como posibles excepciones.

Sigue leyendo

Sistemas de diseño

Los sistemas de diseño (como dice Jeff Gothelf y Josh Seiden en su libro Lean UX) son como «Guías de estilos con esterorides». Usados tanto en compañías privadas (Mail Chimp y Salesforce, entre otras) como por entornos públicos (Gov.ukU.S. Web Design Standards, por ejemplo) presentan grandes beneficios.

Salesforce Lightning Design System

Imagen de Salesforce Design System

Antiguamente existían las llamadas brand guidelines, es decir, Manuales de marca o Manual de estilos de la marca, documentos impresos donde se explicaban la imagen de marca y como usarla. A veces tenían varias páginas pero normalmente eran documentos muy extensos. Cuando se digitalizaron se convirtieron en PDF, páginas web o wikis. Al mismo tiempo, algunas publicaciones tambien desarrollaron manuales que cubrían guías de como escribir o presentar la documentación.

Un ejemplo de la versión de estos manuales en el mundo de los ordenadores es la famosa Human Interface Guidelines (HIG) de Apple, un extenso documento que explica cada componente del sistema operativo de  Apple, ofreciendo reglas y ejemplos de su uso.

Por otro lado, los desarrolladores son familiares con las librerías de componentes, colecciones de reusables elementos que poseen la intención de hacer el trabajo más fácil proveyendo elementos de código ya testeados, y reusables que se encuentran almacenados en un repositorio de código.

Es decir, una vez desarrollados estos componentes (su parte visual y de interacción), múltiples equipos pueden usarlos las veces que deseen para construir elementos más complejos sin necesidad de hacerlos cada vez.

Un sistema de diseño funciona como una única fuenta de verdad para la capa de presentación de un producto.

Si se dispone de un buen sistema, los equipos pueden dibujar un sketch (boceto) y rápidamente desarrollarlo usando los elementos del sistema para crear el prototipo o producto preparado para su uso.

El valor de un sistema de diseño

Una vez creado, un equipo puede seguir evolucionando y mejorando el sistema, mientras otros equipos trabajan en paralelo desarrollando los productos (estructura, arquitectura de la información, flujo de trabajo…)

Ojo, que no hablamos de UI Kits.

Los sistemas de diseño permiten a los equipos:

  1. Diseñar más rápido porque no están inventando la rueda cada vez que diseñan una pantalla, sino que usan los elementos disponibles en el sistema.
  2. Prototipar más rápido porque los desarrolladores front usan directamente el componente que necesitan sin tener que construirlo cada vez.

Eso conselleva beneficios para las organizaciones:

Aumenta la consistencia

Cómo todos los equipos usan los mismos componentes el diseño resultante será consistente. Equipos distribuidos en diferentes lugares o incluso en distintas empresas basaran sus diseños y desarrollos en los mismos elementos, creando una imagen coherente de marca de empresa.

Mayor calidad

Centralizando la creación y el diseño de los elementos se aprovecha la destreza de los mejores diseñadores y desarrolladores de interfaz de usuarios. El resultado de gran calidad, es empleado por otros menos especializados para producir proyectos de alta calidad.

Menor coste

Un buen sistema de diseño cuesta dinero. Requiere inversión para construirlo y mantenerlo. Pero con el tiempo y sobre todo si son muchos los equipos que lo usan, la inversión se recupera al proporcionar herramientas y frameworks que permiten que los equipos de desarrollo sean más efecientes y productivos.

Las nuevas incorporaciones también serán antes productivas ya que disponen de toda la información en el sistema.

En el siguiente artículo hablo sobre que características definen a un buen sistema de diseño.

Ejemplos de sistemas de diseño

Diseño de la petición de donaciones para Wikipedia

Hace un mes o dos me metí en Wikipedia y vi que habían modificado la parte superior para solicitar fondos para el mantenimiento de la página.

Esto no es algo nuevo, y se ha hecho en varias ocasiones para seguir funcionando sin publicidad. Las donaciones son desde su inicio su sistema de financiación ya que su creador defiende un modelo libre de anuncios y sin ánimo de lucro.

wikipedia diseño donaciones

Diseño en azul del banner de donaciones de Wikipedia

En este caso, el color azul de fondo con el degradado, hacía que el usuario viese algo diferente en la estructura habitual de la web, ya que la página que todos conocemos, por norma general, tiene un diseño donde prima el blanco y el negro.

wikipedia diseño normal

Diseño habitual de una página de Wikipedia

Al cabo de unos días, al realizar otra búsqueda vi que habían modificado el estilo visual de su anuncio resaltando en amarillo fosfórito el mensaje, en el cual apela a la poca cantidad de dinero que solicitan, 2€, menos que un café, en base a todo el servicio que realizan.

Resaltar además como apelan al sentimiento de culpa del usuario

Si, TODOS estamos usando un servicio gratis y no somos capaces de donar ni 2€ que es lo que nos gastamos en un café. 🙂

Y sigue, «si Wikipedia es útil para ti, por favor tómate un minuto para mantenerla disponible online y sin publicidad. Muchas gracias«. Osea, sino donas serás culpable de que luego puedan aparecer banners.

Sigue leyendo

Women Techmakers en Madrid

El viernes que viene 4 de marzo asistiré al primer evento Women Techmakers realizado en el campus Google en Madrid.

Por si no lo conoces, Women Techmakers es una iniciativa liderada por Google, que se está expandiendo a un programa a nivel mundial y que con motivo del Día Internacional de la Mujer, se van a realizar diferentes eventos por todo el mundo con el objetivo de dar a conocer el trabajo y el conocimiento de las mujeres en el sector técnico.
Women Techmakers Madrid

El programa promete, y además es una oportunidad única de hacer nuevos contactos entre profesionales.

Por mi perfil, las charlas que más me motivan son:
Sigue leyendo

Pull&Bear te ayuda a comprar regalos Navidad

Pull& Bear ha creado un elemento de menú especial para estas Navidades, con un menú desplegable, dividido en 2 secciones (Hombre y mujer) que te sugiere regalos divididos por lo que te quieras gastar.

Ayuda elegir regalos

El nuevo elemento lo han resaltado colocándolo el primero junto a un icono de arbol de navidad.

Menu Navidad

Y  además en la página especial de la campaña, lo primero que vemos es lo más importante para el usuario:

Envoltorio para regalo: «Tu pedido listo para regalar, sin coste añadido»

Usabilidad en navidad

Me parece que en este caso han acertado a la hora de ponérselo fácil a aquellos usuarios que buscan comprar un regalo online, respondiendo rápidamente a sus preguntas:

  1. ¿Para quién es? ¿Chico o chica?
  2. ¿Cuánto te quieres gastar?
  3. ¿Va envuelto? ¿Me cuesta más dinero por ello?

Esperemos que tenga luego los resultados que se esperaban 🙂

Imágenes en listas en móviles, ¿cuándo y dónde ponerlas?

Cuando mostramos un listado de elementos en un dispositivo móvil o de pantalla reducida, ya sea una búsqueda con hoteles, un filtrado de películas, una selección de canciones…

No por tener siempre una imagen del producto conviene poner su miniatura

Nielsen Norman Group nos da en este post una serie de consejos de cuando debemos ponerlas y en su caso, donde deben ir colocadas.

Cuando usar la imagen

¿Ayuda la imagen al usuario? ¿El usuario puede decidir cual es su siguiente paso en la navegación gracias a la imagen? ¿O es su tamaño tan pequeño que no permite ver nada que ayude a realizar la selección del elemento?

Sino ayuda, ya sea porque su tamaño es muy pequeño o porque no aporta valor, Nielsen recomienda eliminarla y usa ese espacio si es necesario para mostrar otra información más relevante. Menos es más.

Imágenes móviles en retail

En las páginas de moda la imagen cobra especial relevancia

Si por ejemplo estamos en un ecommerce de retail, si solamente presentamos un texto descriptivo de un vestido, esto no será suficiente para que el usuario sepa si le gusta el modelo o no, incrementando el pogo sticking.

Sigue leyendo

Rediseño de la página de reserva

Continuamos mejorando el proceso de reserva de Centraldereservas.com. En concreto se trata de la página más importante para mí, donde el usuario finaliza su reserva de alojamiento, poniendo sus datos personales y bancarios.

La página donde el usuario finaliza su reserva de alojamiento es una de las más delicadas de todo el proceso. El principal problema de la actual era que no era responsive por lo que los usuarios que reservaban con el móvil tenían serios problemas para visualizar y rellenar los campos al estar diseñada para su uso en un ordenador. Con lo cual al ser el punto más doloroso de todo el proceso, es una tarea de prioridad número 1.

El cambio a una versión responsive ha sido un proceso complejo y duradero, pero indiscutiblemente necesario.

Otra de las páginas más complejas, el listado de alojamientos disponibles, ya había sido lanzado siendo un éxito el incremento de búsquedas en móviles. Ahora le tocaba a la página donde el usuario tiene que perder su tiempo rellenando un odiado formulario (¿a quien le gusta rellenar formularios?), y pagar.

Listado alojamientos

La cuestión es que dado como estaba construida esa página no era tan sencillo cambiar las CSS y adaptar la página a todos los dispositivos. Si se quería aprovechar el mismo código para todas las versiones y no generar 3 páginas diferentes (desktop, iPad y móvil) con su incremento de coste de mantenimiento, implicaba un cambio en la estructura del código de la página y la ubicación de ciertos bloques de contenidos.

Lógicamente, en el proceso están implicados muchos stakeholders, incluido el CEO. No siempre es fácil hacer entender a una persona ajena al código, que si se quiere usar el mismo código para todos los dispositivos la ubicación de ciertos elementos a lo mejor no puede ser igual. Se trabajó mucho en ello, reestructurando la información para que se visualizase en el orden adecuado en todos los dispositivos.

Dada la importancia que tiene en el negocio que el proceso sea fluido y sencillo, el cambio debía ser muy estudiado, ya que cualquier equivocación puede llevar a un descenso en el número de clientes que finalizan sus reservas.

A continuación se muestra a la izquierda como era el diseño anterior y como es la versión actual en su vista de escritorio.

sr-3

Aquí vemos como fue el diseño para dispositivos móviles, tanto del listado como de la página de confirmación.

Página de reserva móvil

Página de confirmación

Una vez que el usuario ha seleccionado el método de pago y este se ha efectuado, el usuario necesita ver la página donde se le confirma que el pago se ha realizado correctamente y los detalles de la reserva.

Sigue leyendo