Responsive Design

UXD, me suena pero…

Ya tenemos fecha. El próximo 18 de febrero será el primer encuentro UX Academy en Valencia.

En diciembre cuando nos reunimos en el Lotelito, vinisteis muchas personas de distintas disciplinas y muchos preguntasteis bueno, ¿esto de UX qué es realmente?

Ante esa pregunta nos ha parecido correcto que en el primer Meetup expliquemos realmente qué es User Experience Design (UXD).

Y es que el Diseño de Experiencias de Usuario esta de moda.

Es un HYPE. Todo el mundo habla de ello, creyendo que se auto explica lo que es por si mismo, pero pocos saben definir bien de que trata.

Algunos responden: “Lo entiendes cuando lo ves” como ya uso el Tribunal Supremo de EEUU para definir a la pornografía… 🙂

Seguir leyendo «UXD, me suena pero…»

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.

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

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.

Seguir leyendo «Rediseño de la página de reserva»

Diseñando soluciones para mejorar el mundo

En el UXSpain oí hablar a Rubén Perez Huidobro (@RPHuidobro) de la labor que están haciendo en UK, al crear el GDS (Government Digital Service). Su función es conseguir que todos los trámites administrativos de Reino Unido se puedan realizar de manera digital  y bajo un mismo dominio, estando accesibles para todo el mundo.

Para todo el mundo.

Como dice Martha Lane Fox (@marthalanefox) en su artículo: hay que aprovecharse de las posibilidades que ofrece la tecnología digital para atender las necesidades de toda la sociedad, y no solo de unos pocos.

Internet puede ayudar a redefinir los servicios públicos, mejorar la vida de los más vulnerables y fortalecer nuestra economía

Y hace tiempo que oí una charla TEDx impartida por Tim Brown, CEO and president of IDEO (@tceb62), donde se exhortaba a los diseñadores, a los ingenieros, a todos los creadores, a ir más allá.

Tim Brown TEDx

A no diseñar sólo cosas divertidas, deseables, bonitas o más usables. No diseñar sólo productos de consumo, sino a diseñar productos que sean importantes. A pensar a lo grande. (Ver charla)

A diseñar para cambiar el mundo

Tenemos que hacer productos que resuelvan soluciones a los problemas reales del mundo para poder evolucionar hacia un futuro más sostenible para todos. Diseñar para intentar solucionar problemas reales como la salud, la educación, el agua potable, la seguridad…

Tenemos que conseguir un balance entre las necesidades, la tecnología disponible y que sea económicamente viable.

Ya se que todo el mundo tenemos que comer, y que lógicamente, hay veces, sobre todo al principio de nuestra carrera que no podemos elegir ni mucho menos donde trabajar. Pero conforme vamos madurando, si que podemos ayudar.

Flat101, cada 6 meses elige un proyecto para trabajar en el de manera altruista. Como toda empresa, tiene otros proyectos con los cuales paga el sueldo a sus empleados, pero durante 6 meses, x horas a la semana las dedican a ayudar a alguien en un proyecto digital, siendo su primer caso el sueño de Jose Luis Arias, psicólogo que necesitaba un canal digital para seguir ayudando a la gente de forma gratuita (psicologiaparticipativa.com).

Y para conseguir diseños que de verdad soluciones problemas reales, necesitamos centrarnos en las personas

Hay que entender a las personas, su cultura y su contexto para poder conocer sus necesidades y aportar soluciones reales. Y hacerlo de manera rápida y sostenible.

Seguir leyendo «Diseñando soluciones para mejorar el mundo»

Gov.uk: keep calm and digital by default

La charla de Rubén Perez Huidobro (@RPHuidobro) fue una de las que más me gusto en el UXSpain de este año.

Me pareció increblemente complejo el tema que trataba: conseguir que todos los trámites administrativos de Reino Unido se puedan realizar de manera digital.

Todo empezó con Francis Maude, que se dió cuenta que en Reino Unido había una serie de oligopolios tecnológicos que se estaban llevando todos los contratos. Maude, se dio cuenta de ello, pero no sabía como resolverlo.

GDS UK

Lo dice clarito: We put user´s needs before the needs of government

Con lo cual, escribió una carta a Marta Lane Fox (@martalanefox) fundadora de Lastminute.com en la que explicaba que quería conseguir:

  1. Devolver el talento al gobierno
  2. Simplificar y UCD
  3. Que todas las transacciones se pudieran hacer de manera online
  4. Todo tenía que ser abierto, tanto el código como las comunicaciones

A Marta le encantó la idea porque le pareció genial traer todo lo que sabía del sector privado al público. El objetivo estaba claro:

  • Servicios digitales, agiles, abiertos y baratos.
  • Servicios que la gente prefiriese hacerlos por internet que en persona.

Con un orden de prioridades claro:

  1. Necesidades de los usuarios
  2. Necesidades del Gobierno

Y tenía que ser además rápido.

Era necesaria una revolución, no una evolución.

Se creo el Government Digital Service, un departamento para centralizar todo lo relacionado con lo digital y una única web gov.uk. Había demasiada información repartida en portales y eso confundía a los usuarios, por lo que se redujo todo a una sóla página.

¿Cómo se hizo?

Para verificar que las cosas se cumplían, se creo un equipo de transformación que cambiara los ministerios.

Se eligieron las 25 transacciones más difíciles con la finalidad de que si estas se conseguían hacer de manera digital, servirían como ejemplo para el resto.

Pero el gobierno era como un dinosaurio, todo burocracia y jerarquía.

¿Cómo transformas eso en un equipo AGILE?

Huidobro nos cuenta que se hicieron varias cosas. Por un lado se enviaron equipos especialistas que se fueron mezclando con los diferentes tipos de roles entrenándoles para que fueran agiles.

Antiguamente, los departamentos trabajaban siguiendo el proceso antiguo de

  1. Capturar requerimiento
  2. Desarrollo
  3. Lanzamiento
  4. Preguntar a los usuarios

Ahora, lo primero son las necesidades de los usuarios.

Leisa Reichelt (@leisa), Head of User Research en Government Digital Service, cambió el orden:

  1. Observar y hablar con los usuarios finales
  2. Necesiades emocionales y funcionales
  3. Entender las necesidades de los usuarios ahorra mucho dinero

Este proceso es complicado porque hay muchos stakeholders que creen que lo saben todo.

Repartieron entre los trabajadores del gobierno, una Herramienta GDS (Government Digital Service) con unos principios de diseño:

  1. Users.
  2. Do test.
  3. Design with data.
  4. Do the hard work to make it simple.
  5. Iterate. Then iterate again.
  6. This is for everyone.
  7. Understand the context.
  8. Build digital services no websites.
  9. Be consistent, not uniform.
  10. Make things open. It makes things better.

Y cuidar los detalles durante TODO el servicio. Es un proceso completo.

Como vemos lo primero de todo son los usuarios. Estudiarles, preguntarles, averiguar que necesitan y cuando lo necesitan. Es decir, en que contexto hay que situar cada acción, ya que no es lo mismo una madre que busca una beca de comedor escolar para poder dar de comer a sus hijos, que una persona que quiere montar una empresa.

Seguir leyendo «Gov.uk: keep calm and digital by default»

Diseño para cada dispositivo

Hace muchos, muchos años, en un país muy lejano… los monitores tenían pantallas que tenían 800px de ancho. Si quitábamos el ancho que tenía el scroll nos encontrábamos con un lienzo en blanco de 780px de anchura.

Pero de ahí hasta hoy han pasado muchas cosas. En algunas, la ciencia ficción se ha quedado corta y de momento, aunque sea una pena, no existe el aero patín de Regreso al futuro.

Aero patin

Pero en otras, aunque no tengámos zapatófonos, si que tenemos relojes o «smartwatches» que son una extensión del móvil, y que además de poder ver quien nos esta llamando, e incluso contestar su llamada, podemos navegar por internet.

Soy fiel defensora del mobile first. Pienso que el comenzar la AI y el diseño teniendo en cuenta una pantalla pequeña te ayuda a centrarte en lo importante para el usuario.

En lo que verdaderamente necesita.

En el UXFighters en una de las ponencias, llegue incluso a oír que dado la cantidad de resoluciones que nos encontramos hoy en día, lo que algunos estaban haciendo era partir de la función más básica y la cantidad mínima de diseño, para asegurarse de que todos los dispositivos podían acceder e ir añadiendo capas de contenido, diseño e interacción conforme aumentaban y tenían conciencia de que el dispositivo podía soportarlo.

Seguramente, en el futuro cada usuario podrá decidir como visualizar cada web, eligiendo diferentes plantillas, como a día de hoy personalizamos con colores y fondos el gmail.

Podremos incluso personalizar el contenido, como cuando antes entrábamos a Yahoo y elegimos los módulos que queríamos ver. Pero yo me refiero a algo más personalizable. Por ejemplo, en un periódico marcar solo las secciones o contenidos que te interesa estar informado, o los autores que escriben.

O en una tienda de ropa, marcar solo determinada marca, determinado estilo, o el tipo de ropa que imite a alguien que te guste, para que te manden un email cuando sale algo relacionado con ello, en vez del típico email genérico que recibimos hoy en día.

Pero mientras esto ocurre nos encontramos con diferentes dispositivos que presentan muchos tamaños de pantalla diferentes. Y si, es complicado para muchas empresas, tener un diseño adaptado a todos ellos. Pero, ¿por qué me encuentro con webs que aun tienen esos 800px de anchura?

¿Te cuestan caros los pixeles en tu web?

Es decir, hay que pagar un dominio, un hosting, diseño, mantenimiento… pero dejando de lado que si quieres estar en internet hay costes que hay que asumir, los pixeles de tu página no son más caros hagas una web de 800px de ancho que una de 1200px.

Entonces, ¿por qué seguir anclados en esa medida de la prehistoria?

Seguir leyendo «Diseño para cada dispositivo»

Listado de alojamiento adaptado a móviles II

Seguimos avanzando novedades del nuevo diseño del listado de alojamientos adaptado a móviles.

Filtrado de resultados

Una de las mayores mejoras demandada lógicamente por los usuarios, respecto al listado que usa la App, y la antigua web móvil, fue la posibilidad de filtrar los resultados.

Se accede desde el enlace situado en el pie del listado:

Filtros en el movil

¿Cómo puede un usuario elegir su alojamiento perfecto entre las más de 800 opciones que encontramos en Madrid sino es acotando los resultados?

Pues vamos a hacérselo fácil:

Seguir leyendo «Listado de alojamiento adaptado a móviles II»

Diseño responsive de la página de valoración

Entre los cambios que ha habido para hacer responsive la zona privada de «Mis reservas» uno de ellos ha sido la página de valoración del alojamiento.

Aquí os enseño la nueva página de valoración del alojamiento:
Nueva página de valoración del alojamiento

Aunque a nivel visual el cambio sea importante, lo más destacable es su adaptación a todos los dispositivos, es decir el cambio en su maquetación para obtener un diseño responsive.

Diseño responsive

Anteriormente esta página estaba basada en tablas y su visualización y uso en tablet y móviles no era lo más adecuada.

El objetivo principal de esta página es recopilar información real de los usuarios

Es decir, mostrar opiniones y fotografías de usuarios que se han alojado en los alojamientos, para que futuros clientes puedan tener una visión real de donde van a estar alojados en su viaje.

Seguir leyendo «Diseño responsive de la página de valoración»

Diseño de la cabecera

Troya no se venció en un día y lo mismo ocurre con las páginas web. No siempre es fácil o posible hacer el cambio a futuro perfecto y se pasa por diseños y desarrollos intermedios.

En www.centraldereservas.com se pasó de un diseño completamente pensado para ordenadores, a tener ciertas partes de la web adaptadas a tablet y móviles.

Cabecera de la web

Vemos el diseño actual de los elementos de la cabecera en escritorio

Por ello había zonas como las cabeceras o los pies que en medio de este proceso, lo que se hizo fue adaptar el diseño original para escritorio a móviles, sin pensar en el uso y en el espacio propio de cada dispositivo.

Seguir leyendo «Diseño de la cabecera»

Comenzando a diseñar interfaces: los usuarios

Después de unos cuantos libros y cientos de artículos, sobre diseño, UX, diseño de formularios, psicología… tenia ganas de empezar «Designing Interfaces. Patterns for Effective Interaction Design» de Jennifer Tidwell.

Y es que aunque tengamos webs como www.pttrns.com, Patterntapwww.uxarchive.com, que nos enseñan en vivo ejemplos de patrones y comportamientos, siempre viene bien leerse uno de los primeros manuales que hablan sobre el tema.

Designing Interfaces

Y seguramente te sorprenderás que muchas de las soluciones que empleamos cada día como diseñadores, tienen un nombre, aunque no sepas cual es.

El primer capitulo habla sobre «What users do», o sea, lo que hacen los usuarios. Y es que:

Un buen diseño de una interfaz no empieza con imágenes, sino con entender a la gente

Lo que a ellos les gusta, como usan una aplicación, como interactuar con ella… Cuanto más los conozcas y más empatices con ellos, más efectivamente diseñarás para ellos. El software es, después de todo, un medio que las personas usan para conseguir algo.

Cada vez que un usuario usa una aplicación, una web, un programa, inicia una conversación.

La interfaz media en la conversación, ayudando al usuario a lograr lo que sea que tenga en mente. Como diseñador de interacción necesitas conocer el guión de esa conversación, o al menos definir sus términos.

Seguir leyendo «Comenzando a diseñar interfaces: los usuarios»

Scroll hacia arriba