Diseño web

Listado de alojamiento adaptado a móviles I

Hace unas semanas, lanzamos en Centraldereservas.com el nuevo listado de reservas optimizado a móviles y tablets pequeñas

Hasta ahora, estábamos en un proceso de cambio, y desde una web optimizada para móviles, el usuario al lanzar la búsqueda del alojamiento, acababa en la versión desktop de resultados.

Es decir, pasaban de una página responsive, adaptada a una navegación en móvil, a una página donde o hacías zoom para ver los detalles o tenías muy buena vista ;-).

Diseño móvil

Los usuarios, acostumbrados a este tipo de cambios, no se sorprendían (o no les quedaba más remedio) y reservaban. Pero ahora, gracias a este desarrollo pueden navegar en una web pensada para la reserva desde dispositivos móviles, optimizada, tanto en diseño como en su desarrollo.

¿Qué importa si el diseño es muy bonito y usable, pero  cuesta 5 minutos descargarlo?

Por ello, el equipo de programación ha sido muy cuidadoso, teniendo en cuenta el entorno de uso de los dispositivos móviles en todo momento, ya sea en los tiempos de descarga como en la experiencia ofrecida.

Era muy importante ofrecer una experiencia completa en la que el usuario no sintiera que le faltaban funciones que usa en la versión de desktop. Lógicamente, algunas se han suprimido o se han cambiado de lugar, pero se ha realizado un trabajo a conciencia de que las importantes estén:

Funciones

Pero no sólo nos hemos quedado en el listado…

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

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»

Anular/Modificar reserva App

Introducción de una nueva funcionalidad en la App de reservas de alojamientos de Centraldereservas.com.

El usuario en el momento que lo desee puede modificar o cancelar su reserva conociendo los costes si estos existen.

Se realizó un prototipo interactivo de bajo nivel para verificar la correcta interacción del usuario con la nueva funcionalidad.

Seguir leyendo «Anular/Modificar reserva App»

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»

El espacio que consume el chrome

Chrome, y no me refiero al navegador web de Google, es la interfaz que ve el usuario que rodea al contenido de la web o app.

Estos elementos dan información o comandos a las personas permitiéndoles operar sobre el contenido.

El problema es que a veces estos elementos pueden ocupar más de la mitad de los píxeles disponibles, lo que resta importancia al contenido que es en lo que el usuario está de verdad interesado.

Chrome

Según este articulo de Nielsen Norman Group de 2012, no se sabe quien empezó a usar el término en este contexto, pero comentan que procede del uso del metal cromado en los coches americanos durante la década de 1950. El cuerpo del vehículo, estaba rodeado de cromo brillante en los parachoques, las aletas…

Ejemplos de chrome

Hoy en día, en la mayoría de las GUIs (Graphical User Interface), los elementos que forman el chrome viven en los límites de la pantalla, dejando normalmente el centro para el contenido.

Para entendernos, en un procesador de texto, chrome lo forma la barra del menú, las herramientas, las reglas, la barra de scroll y los paneles propios de cada programa.

En un navegador lo formaría el campo de la URL, las herramientas, los botones, las pestañas, las barras de scroll…

En una web, chrome lo forman el logo, el menú, el pie, la caja de búsqueda…

El problema: ¡No ocupes todo!

Lógicamente estos elementos ocupan un espacio en la pantalla, dejando menos sitio para el contenido. Esto en una época donde la mayor parte de la gente navega con móviles aún es peor (por no hablar de smartwachts).

Pero aunque uses un ordenador, la combinación de menús y otros elementos, cuando por ejemplo usas Windows y abres el Word, o tienes abierto un navegador y el Twitter, por ejemplo, hace que tu espacio disponible para los datos sea menor.

La acumulación de capas de cada sistema puede hacer que el espacio disponible sea menor al 50% de la pantalla

Para solucionar esto, se puede esconder parte de la interfaz, sacándola sólo cuando sea necesario. Esto es peligroso, porque a menudo, fuera de la vista significa para el usuario fuera de su conocimiento, ya que acordarse incrementa la carga de la memoria a corto plazo.

Seguir leyendo «El espacio que consume el chrome»

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»

Mala experiencia de usuario: de newsletter a newsletter

Estoy suscrita a varias newsletter de tiendas online. Por un lado porque me gusta la moda, y por otro como defecto profesional, me gusta ver las campañas que hacen y los diseños de los emails.

Blanco es una de las empresas que más emails mandan, tanto para mostrar nuevos diseños de ropa, como para mandar ofertas, ya sean de compra online como en tienda física.

blanco emailing

Seguir leyendo «Mala experiencia de usuario: de newsletter a newsletter»

¿Cuándo usamos los móviles?

Seguimos con el tema del contexto en los móviles. En el anterior post lo empezamos hablando sobre dónde se usan los móviles y ahora nos centramos en el cuándo.

Las personas usamos el ordenador, la tablet y el móvil en diferentes momentos del día. Cualquier persona que tenga un programa de analítica puede ver los diferentes patrones de visitas de horas y días.

Lógicamente, estos pueden cambiar un poco dependiendo del tipo de web pero si nos fijamos en los patrones de los artículos que comenta Luke en su artículo (las gráficas están extraídas de él), básicamente son los siguientes.

Si hablamos de ordenadores, su uso son las horas de trabajo, en España de 8:00 a 19:00 horas.

Horas de uso desktop

En móviles tenemos un patrón bastante diferente, existiendo 4 picos de uso:

  • 6:00 /7:00 – Desayuno
  • 8:00 / 9:00 – Trayecto hasta el trabajo e inicio de este
  • 18:00 / 19:00 – Final del trabajo y trayecto hasta casa
  • 21:00 / 24:00 – Sofa, tele y cama

Horas de uso iPhone

Si hablamos de tablets, sus horas de uso principales son de 21:00 a 24:00 en el sofá o en la cama.

Horas de uso iPad

Esta claro que no son las mismas horas las que usamos el móvil que el ordenador. En muchos casos esto sucede por cercanía y comodidad.

¿Cuál es el dispositivo más a mano que tengo para hacer lo que necesito?

En otros casos es la actividad la que nos marca el dispositivo que empleamos, ya para cada tarea el usuario puede preferir un dispositivo u otro.

Si nos centramos en los momentos de uso del móvil, vemos que el usuario lo usa más veces pero en menores periodos de tiempo. Rachel Hinman de Nokia, hizo una estupenda analogía de este comportamiento:

Los usuarios de escritorio bucean mientras que los de móvil hacen snorkel

Las aplicaciones web que se alinean bien con este comportamiento, permitiendo al usuario de una manera rápida y sencilla chequear su estado durante el día son las que más éxito han tenido.

Facebook, Twitter… ambas han tenido crecimientos espectaculares de uso en el móvil ya que son perfectas para «hacer snorkel» en las novedades de los amigos.

Seguir leyendo «¿Cuándo usamos los móviles?»

Fuentes como iconos

Hoy en día podemos usar fuentes que son iconos. Con ellas te olvidas de tener que vectorizar un icono, y tener que guardarlos en diferentes tamaños para tenerlo adaptado para las diferentes resoluciones de los dispositivos, o colores para los estados de los enlaces.

Font iconos

Olvídate de vectorizar y guardar cada icono en un tamaño determinado

Su funcionamiento es como una fuente cualquiera por lo que puedes ponerlas al tamaño, color, sombreado  que quieras mediante CSS.

Font Glyphicons

Una de ellas son el set que viene con Bootstrap, llamado Glyphicons Halfligns. 250 iconos o glifos, gratuitos al instalar Bootstrap.

Seguir leyendo «Fuentes como iconos»

Diseño para móviles: dónde y cuándo los usamos

Continuamos con la serie de artículos sobre como diseñando primero para móviles conseguimos mejores resultados en las versiones de escritorio y tablet. En este caso nos centramos en cómo usan los usuarios los móviles.

Cuando hablamos de contexto estamos hablando de las circunstancias bajo las que algo ocurre.

En el caso de los ordenadores de escritorio ya sea en el lugar de trabajo o en casa, se colocan sobre una mesa, estando el usuario sentado en una silla, con una conexión constante de electricidad y de internet y en un espacio de relativa privacidad.

Aunque el móvil o la tablet, también pueden ser usados sentados o en una mesa, su principal ventaja es que pueden ser usados en cualquier lado.

Uso móviles

Y siempre el usuario lo lleva con el, por lo que el lugar y el momento del día en que se usan es muy amplio. Y ese contexto tiene un gran impacto en el diseño, porque tienes que diseñar algo que puede ser usado en cualquier lugar y en cualquier momento.

Ubicación

Cuando la gente se imagina diseñando para móviles siempre se imaginan a un/@ ejecutiv@ apresurado por la calle (imagino que herencia de cuando sólo tenían móviles unas pocas personas, ¡cómo el busca!). Mientras que eso es un caso real de uso, existen unos cuantos más. En el libro Luke, comenta que una encuesta saco los siguientes:

  • 84% en casa
  • 80% para pasar el rato durante el día
  • 74% mientras esperan a algo/alguien
  • 69% mientras compran
  • 64% en el trabajo
  • 62% mientras ven la tele (otro estudio indicaba que esta cifra subía hasta el 84%)
  • 47% viajando

El hecho de que el 84% de los usuarios lo utilicen en casa nos dice ya algo. Echar una ojeada rápida al email en casa es una de las cosas que más hacemos. Pero lo que tienen en común es que pocas veces estamos plenamente centrados en mirar el móvil, sino que normalmente estamos haciendo algo más y a la vez usamos el móvil.

Worblewski describe a los usuarios de móviles como «un ojo y un pulgar»

Un pulgar porque normalmente sujetas y manejas el móvil con una mano, usando el pulgar para navegar; y un ojo, porque en muchas situaciones el usuario solo le puede prestar parte de su atención.

Piensa, estas en la fila del supermercado con una mano llena de cosas y en la otra viendo las fotos del fin de semana, andando por la calle intentando no chocarte leyendo los wasaps del grupo, sujeto a la barra del metro revisando los emails del trabajo antes de llegar a el, tirado en el sofá con la tele puesta…  y la lista sigue.

Pensando en el usuario como «un pulgar, un ojo» te obligas a simplificar el diseño para que pueda ser entendido y fácil de usar en cualquier situación.

Incluso en lugares donde las distracciones no existan, una experiencia fácil e intuitiva siempre consigue que las personas se sientan confortables y relajadas.

En el siguiente artículo veremos en que momento del día los usuarios emplean el móvil.

Nota: este artículo está basado en el libro MobileFirst de Luke Wrobleski (@lukew)

Scroll hacia arriba