Steam y LinkedIn: pequeños detalles de UX que marcan la diferencia

Los azares del destino han querido que estos últimos días me diera de bruces con dos situaciones realmente interesantes usando Steam y LinkedIn. Situaciones interesantes desde el punto de vista del estudio de la experiencia de usuario. Pequeños detalles que sin ningún tipo de dato adicional con el que poder justificarlos, bien merece la pena que sean revisados. A ver cómo lo veis.

Caso Steam

No voy a entrar en detalles sobre qué es Steam. Los que hayan sustituido las monedas de 25ptas por el Síndrome de Diógenes digital sabrán que en Steam se hacen un par de veces al año una serie de campañas de ofertas en las que los precios de los videojuegos caen hasta rozar valores totalmente ridículos, haciendo que las ventas se multipliquen de forma mareante.

Así pues, durante las últimas rebajas de verano y en la búsqueda de engordar más aún el listado de títulos que quiero tener (y que nunca jugaré), me encontré con la siguiente situación:

steam-no-button

La imagen de arriba muestra parte de la “lista de los deseos”, una sección del perfil de usuario que nos permite guardar aquellos títulos o productos que nos interesan para poder echarles un vistazo rápido, accediendo a la página de la comunidad sobre el juego o la página de detalle.

El caso es que en época de ofertas es altamente probable que más de uno de los títulos en tu lista de deseados se encuentren en oferta. ¿Acaso no sería ideal poder comprarlos desde aquí?

Esa opción NO existe a día de hoy. De hecho si quieres comprar 3 títulos diferentes, debes dirigirte a la pantalla de detalle del primer producto, añadirlo al carro, volver al listado de deseados, ir al detalle del siguiente producto, añadirlo al carro, volver al listado de deseados… Y así tantas veces como sea necesario.

Y ojo porque como Steam no tiene en tu perfil el dato de tu edad, para poder ver el detalle de algunos juegos deberás introducir tu fecha de nacimiento mediante los típicos selectores. Más clics y pantallas intermedias.

El resultado es una experiencia muy frustrante y negativa desde el punto de vista de la experiencia que se ofrece al usuario. Tan negativa que yo de hecho no hice las compras. Y estoy seguro que no debo ser el único que se ha enfrentado a algo así.

Sin meterme en la complejidad de todo lo que pueda suponer (no creo que sea por dinero), un botón para añadir al carro desde la lista de deseados sería una mejora enorme, ¿verdad? ¿No aumentaría las conversiones?

steam-button

Sin embargo la falta de datos no me permite ir más allá y lo único que se me ocurre es que quieran generar un mayor número de páginas vistas pese a la clarísima pérdida de efectividad de una sección tan interesante como la lista de deseados de un usuario. Pero me extraña que quisieran perder ventas en momentos tan “calientes”.

¿Qué decís? Me parece que es un cambio que repercutiría positivamente en ambas partes, facilitando la compra al usuario y generando ingresos para Steam.

Caso LinkedIn

Por otro lado el caso de LinkedIn creo que está hecho así precisamente para entorpecer la experiencia de usuario y que no realice la acción. Hablo del momento en que queremos realizar un borrado de múltiples contactos.

El primer paso para gestionar nuestros contactos es acceder a la sección correspondiente donde tenemos a nuestra disposición un buscador y un listado de los contactos actuales. Algo así:

linkedin-listado

Aquí reconozco que la pata la puede meter el usuario (mi caso) si no hacemos un escaneo visual de la pantalla. Y es que realmente desde el primer momento existe en la zona derecha un enlace de “Borrar contactos” junto al de “Añadir contactos”.

Sin embargo por pura proximidad y porque empezamos a escanear los elementos desde la zona izquierda (salvando excepciones), podemos sentirnos tentados nada más entrar en la sección a seleccionar usuarios mediante el check correspondiente que aparece al lado de la imagen de cada contacto, esperando que alguna opción contextual de eliminación aparezca. Y en efecto nada más seleccionar un contacto, justo a la derecha, aparecerá un listado con el nombre de los seleccionados, el número total y un enlace que pone “Borrar”. Mmmm, borrar… ¿qué podrá significar que me aparezca un enlace de borrar tras seleccionar contactos? No sé si me vais entendiendo.

Si os habéis encontrado en la situación en la que queríais eliminar bastantes contactos, sabréis que el proceso de selección lleva su tiempo. Luego le dais al dichoso enlace de borrar y os da la risa al comprobar que ese enlace lo que hace es borrar… la selección de los contactos. ARGH!

linkedin-listado-borrar

Cuando te das cuenta del tiempo perdido, te arrastras virtualmente hasta el recién descubierto enlace de “Borrar contactos”, dispuesto a realizar una vez más el proceso. Y te encuentras con esto:

linkedin-borrar-contactos

Un listado mucho menos intuitivo en el que desaparece la imagen de perfil y el número de contactos del usuario, datos que pueden ser un gran apoyo para determinar a quien toca eliminar y a quien no. Es más, no existe un listado único sino que deberemos ir letra por letra y tampoco disponemos del filtrado por etiquetas.

¿Cómo lo veis? Para mí es una jugada maestra de LinkedIn con la que (me lanzo a la piscina) pienso que penalizan de manera deliberada el proceso de eliminación de contactos con el objetivo de mantener nuestras cuentas bien nutridas y rechonchas de contactos.

Sinceramente no recuerdo momentos tan frustrantes frente a la pantalla como los de estos dos casos mencionados.

Así fue el curso de Sketch en Bilbao

curso-sketch-bilbao

Durante el último encuentro que tuve con Diego y con Sergio se empezó a gestar un nuevo acercamiento a tierras vascas para ofrecer un curso de Sketch en pleno Bilbao que tuvo lugar el fin de semana pasado. Excusa perfecta para volver a ver caras conocidas como las del gran Kamatiko o Ainara, además de las de Carlos (y Belén) que se hicieron el viajecito desde tierras galegas.

Aunque soy un firme defensor de la formación a distancia y lo intento demostrar siempre que puedo, también es cierto que la opción presencial es perfectamente válida y en pequeñas pildoritas como cursos sencillos o talleres es algo perfectamente compatible. Además verse las caras siempre es más divertido y yo particularmente me lo paso bastante bien intentando compartir lo que sé y contando batallitas.

Creo que el curso salió bastante bien. Es evidente que no puedes obtener el mismo grado de aceptación por parte de todo el mundo pero seguiré puliendo todo lo que pueda mi metodología para que la valoración siga siendo tan buena como la de esta ocasión. Me consta además que hay interés por llevar el curso de Sketch a otras ciudadades (Madrid es una de ellas) por lo que si tenéis interés decidlo abiertamente para coger la furgoneta hippie y montar una nueva edición. En los comentarios o a través de la sección de contacto por ejemplo.

Durante las 7 horas que estuvimos “encerrados”, intenté hablar de todo lo que ofrece Sketch para el mundo de diseño digital a través de ejemplos muy básicos y ofreciendo recursos adicionales. También me dediqué a contar algunas experiencias del día a día y compartir mi visión sobre lo importante que debe ser buscar una buena comunicación entre todos los implicados en la fase de diseño/maquetación. Porque un programa por sí solo es simplemente un programa y Sketch no hace milagros. Esos los hacemos nosotros con el esfuerzo día tras día y compartiendo lo que sabemos hacer 🙂

Actualizo este post, añadiendo el vídeo del webinar que realicé sobre introducción a Sketch

Última llamada – Curso Sketch a tope el día 9 de Mayo

sketch-3

El curso ya finalizó pero por lo que parece hay interés en hacer nuevas ediciones en otras ciudades. ¿Te interesa? Ponte en contacto conmigo para saber la disponibilidad y fechas

Se va acercando el día y me toca hacer un recordatorio para los más rezagados. Hay una cita marcada en el calendario para los que quieran introducirse en el manejo de uno de los entornos de trabajo que más adeptos ha captado en el panorama de diseño digital: Sketch. Acompañados por un servidor que hará las veces de guía espiritual.

El día 9 de Mayo me dejaré caer por Bilbao una vez más. En esta ocasión para dar un workshop que servirá de introducción al manejo de la herramienta y lo que pudiera acontecer durante su uso en el día a día. Creo que será un día bastante productivo y de lo que estoy seguro es que será una cita perfecta para cogerle el truco a Sketch y perderle el miedo a la herramienta si apenas la hemos tocado.

Toda la información, temario y demás justo en el link a continuación. Quizá no os interese asistir o no podáis pero conocéis a alguien a quien pudiera serle util. Creo que ya sólo quedaban dos plazas y además el curso está a la vuelta de la esquina por lo que…¡hay que darse prisa! ¡Nos vemos allí!

Curso Sketch Bilbao 9 de Mayo

¿Cómo te comunicarás con tu coche en el futuro? (y II)

ui-car

Hace un buen puñado de meses escribí un post breve con algunos enlaces interesantes sobre la interacción entre usuarios y sus automóviles. Es un tema que parece tener algo más de repercusión de un tiempo a esta parte y a mí siempre me ha parecido fascinante. Aquí está el post.

En los comentarios, Alberto mencionaba una charla precisamente sobre este tema que si no me equivoco es precisamente esta: Touchscreen killed the knob star: Interfaces en el automóvil de Alberto Zamarrón (muy interesante también su artículo El problema de identificar diseño con resolución de problemas).

He querido hacer una segunda parte de dicho post para quitarle un poco el polvo al primero y seguir enriqueciendo el tema, mencionando Cluster [en], otra vuelta de tuerca precisamente de ustwo [en] (uno de esos sitios en los que quieres trabajar aunque sea repartiendo café y haciendo fotocopias). Alberto también tiene un hueco para analizar esta propuesta.

Recientemente y gracias al super villano David Navarro [en] descubrí el artículo It’s time for in-car interfaces to arrive in 2015 [en] donde se nos presenta un concepto de relación usuario-interfaz para un cochecito que no está nada mal, el Tesla S [en].

tesla-s-interface

Me lo he pasado pipa (o teta si lo preferís) con todo este material y me alegro de poder haber encontrado un huequecito para reseñarlo y compartirlo. Si tenéis material sobre In-car UX, ¡no os lo quedéis para vosotros!

Patrones de diseño web – ronda rápida sobre UX

experiencia-de-usuario

Hace unas semanas se lanzó mi curso Patrones de diseño web a través de video2brain. Mi idea era complementar de algún modo los conceptos que planteo en otro curso anterior, Fundamentos de UX y prototipado para web y dispositivos, y así dar una idea más general sobre algunas cosas a tener en cuenta cuando nos toca pelearnos con un proyecto digital y no contamos con un gran equipo sobre el que puedan delegarse otras tareas relacionadas con la arquitectura de contenidos, el diseño de interacción, etc. Así este modo no nos suena a “chino” y no vamos enterando que crear un proyecto web no es sólo ponerlo bonito. La verdad es que creo que no han quedado nada mal.

De estos cursos y de mi labor en formación en general, siempre dejo el linkito a la página donde cuento un poquito más en qué consiste 🙂

Casualmente hace unos días fui invitado a compartir mesa virtual con mister Daniel Torres Buriel, Verónica Traynor y Rebeca Ramírez para charlar sobre usabilidad y experiencia de usuario. Poco hubiese podido aportar a lo que tres grandes del UX compartieran pero tenía bastantes ganas de colaborar. Murphy hizo acto de presencia y por problemas “técnicos” a falta de unas horas me caí de la convocatoria. La verdad es que hubiese sido genial participar.

Lo bueno es que podéis ver la grabación aquí para aprender un poco más sobre estos temas. Imprescindible para ir haciéndose una idea de lo interesante y entretenido que es eso del diseño centrado en el usuario.

Echad un ojo a las webs de los participantes porque hay también bastante material. Por ejemplo Verónica comparte su lista de libros imprescindibles de UX. Pero no se vayan ustedes todavía.

Me recordaba mi señor jefe hace poco un linkazo que consiste en una serie de videos en los que el super crack Luke Wroblewski comparte sugerencias y metodologías para conseguir que nuestros usuarios obtengan una mejor experiencia e interacción con nuestros proyectos web. Si no les echásteis un ojo en su momento, aún no es tarde.

Por si eso fuera poco, me vi el otro día esta genial presentación de Janne Jul Jensen que aunque también tiene su tiempo, es igualmente interesante. En poco menos de una hora te puede poner al día en técnicas relacionadas con la fase de definición de objetivos, arquitectura y prototipado. Ahí va!

Por cierto (y ya voy acabando), que en Userium [en] por fin lanzaron la posibilidad de crear nuestras propias UX checklist. Tanto como si queremos hacer las nuestras propias como si no, es un buen recurso que tener a mano porque nos desvela rápidamente los puntos básicos a tener en cuenta para establecer una buena conexión entre el usuario y nuestras páginas web.

Con todo esto y la cantidad de recursos extra sobre UX que voy guardando en TheStarterKit creo que hay material como para estar entretenidos dos vidas y media. ¡Qué aproveche!

La imagen de cabecera es cortesía de Shutterstock.

Curso de diseño web con Sketch – 9 Mayo – Bilbao

curso-sketch-bilbao

Para los que no pudísteis asistir, me gustaría dejaros aquí un webinar de introducción a Sketch que hice recientemente :). Lo dejo al final del post.

El otro día me traía una ronda rápida de recursos para Sketch y la semana pasada se hizo público el último tutorial de diseño con Sketch que he creado para Tuts+. Lo tenéis justo aquí: Design a Bold Email Newsletter [en] (también disponible en Español).

Hoy vuelvo a dar la lata con el dichoso programita porque gracias a arketipo y THELAB me dejaré caer una vez más por tierras bilbaínas para impartir un workshop de diseño digital con Sketch que espero que sea la introducción perfecta al manejo del programa para todos los que quieran asistir. La cita será el día 9 de mayo, sábado, y el lugar concreto se sabrá próximamente.

Hay precios reducidos para los primeros y para cualquier duda podéis contactar con Diego para que os resuelva todas las cuestiones que no pueda hacer yo ahora mismo. El temario sobre el que trabajaremos es:

  • Introducción. ¿Sketch?
  • ¿Por qué Sketch? ¿Alternativas?
  • ¿Carencias?
  • Primer contacto con la interfaz. No te asustes. Sketch no muerde.
  • Jerarquía y organización de contenidos.
  • Importación de contenidos y compatibilidad.
  • Navegando por nuestro documento.
  • Medidas, guías, rejillas…
  • Trabajando con vectores en Sketch.
  • Trabajando con bitmap en Sketch.
  • Trabajando con texto.
  • Máscaras.
  • Estilos y símbolos.
  • Exportación de material like a pro.
  • Plugins, recursos a go-go.
  • Webs de referencia para Sketch lovers.
  • Práctica final: cacharreando con Sketch.
  • Buenas prácticas.

Con un poco de suerte y aprovechando el enchufe en video2brain por ser formador igual me llevo algún regalito en forma de suscripciones por lo que la jugada puede salirle redonda a más de uno 🙂

Yo, como intento hacer siempre, pondré todo de mi parte para que sea un día productivo y podáis volver a casa con la sensación de haber aprovechando bien el día.

Curso de diseño web con Sketch

PD: Este mismo mes también hay planeado un curso de productividad con Mac.

PD: Webinar de introducción a UI con Sketch

Killer UX Design – Micro Review 001

Título: Killer UX Design
  • Publicado por: Sitepoint
  • Categoría:UX.
  • Extensión: 266 páginas.
  • Inglés
  • Precio: 33 euros aproximadamente.
  • 4 sobre 5 estrellitas.
  • Micro review de un servidor,

Durante el mes de febrero y siguiendo el reto que me marqué, tocó pegarle un repaso a Killer UX Design. No me esperaba encontrarme con una publicación tan buena y sencilla de leer. Y sé que una publicación de este tipo no es de las que te llevas a la mesita de noche. Es más de esas a las que le pegas una primera lectura y luego la guardas como buen material de referencia. Un material de referencia que me ha agradado notablemente y que recomiendo desde ya a los que quieran introducirse sin mucho dolor al mundo de la experiencia de usuario y el product design. Su autora, Jodie Moule ha conseguido un libro bien majo en el que nos explica todo lo que supone realmente crear un producto (una app en este caso) desde la idea inicial hasta el lanzamiento.

Podría alargarme durante un par de párrafos más pero este fin de semana se me ocurrió hacerlo de una manera algo diferente. Y ahí va:

¿Qué tal? Se me hace un poco raro pero me apetecía probar a ver qué tal quedaba y la experiencia ha sido bastante divertida. No sé si seguir animándome a ello y así ir puliendo la “técnica”.

A lo que sí que seguiré animándome es a seguir compartiendo de un modo u otro comentarios como este, de los libros y publicaciones que vayan pasando por mis manos. Este Killer UX Design sin duda me ha dejado buen sabor de boca.

Killer UX Design

Ronda rápida de recursos para Sketch 3

sketch-3

Con la llegada de Sketch 3, la comunidad en torno al programa anda un poco más revolucionada de lo normal. Lo cierto es que a Sketch se le ha cogido cariño y sus creadores supieron aprovechar muy bien el momento de la estocada mortal a Fireworks para coger un poco de velocidad y posicionarse como uno de los programas de diseño que nos deberían sonar si nos dedicamos a entornos digitales.

En su momento preparé el curso Diseño web con Sketch para servir como introducción al manejo del programa y posteriormente lo complementé con un ejemplo práctico de diseño de interfaz. Nota para navegantes: sobre los cursos que he hecho hay más información pasando por aquí.

sketch-tweets

Del mismo modo quise aceptar el reto de escribir artículos especializados sobre Sketch en Tuts+, una comunidad enorme que aglutina cientos de miles de visitantes. Me daba un poco de vértigo pero la verdad es que empecé con muy bien pie consiguiendo que la versión original en inglés de mi primer artículo: Sketch para principiantes: diseño de la interfaz de un formulario de login tuviera una difusión enorme incluyendo menciones de verdaderos cracks del panorama digital. Fue todo un subidón.

Todos los artículos sobre Sketch que se van publicando en Tuts+ los tenéis disponibles aquí [en]. Los míos en concreto están accesibles desde aquí con el extra de que los preparo en inglés y también en español. La lista se va a ir ampliando, prometido 😉 De hecho ahora mismo hay unos cuantos ya:

Además de esta ración de autobombo me guardo a mano los enlaces a Learn Sketch [en], a SketchTalk [en] y a su rinconcito en Reddit [en] para intentar mantenerme a la última sobre todo lo que acontence. Ahora los tenéis vosotros también.

Quiero añadir también el vídeo a uno de los últimos webinar que he realizado, precisamente enfocado a enseñar lo fácil que es empezar a trabajar con Sketch. Si queréis tener una introducción rápida al programa, no os lo perdáis!

¡Si tenéis algún enlace valioso no os lo quedéis para vosotros!

Cómo mejorar fácilmente el diseño de tablas – gif version

better-table-design

Esta pequeña joyita en formato de gif animado me la encontré (y guardé posteriormente) buceando por User Experience Stack Exchange [en], uno de esos rincones que os debe sonar un poquito si tocáis estos temas.

Me ha parecido que sintetiza a la perfección cómo se puede mejorar notablemente la presentación de datos tabulados y en formato tabla. Si bien es difícil aplicar todos los puntos en según qué casos, se trata de un repaso rápido y muy correcto sobre lo que considero buenas prácticas con este tipo de elementos.

El gif es cortesía de Darkhorse Analytics [en] y también lo tenéis en formato de presentación por si lo queréis revisar con más calma. Algo que también os recomiendo hagáis con el resto de artículos de su blog, porque han preparado alguno más de estilo similar.

Clear Off the Table [en]

Recursos y aplicaciones para crear mapas, infografías y gráficos interactivos

Última actualización Julio 2015: Revisados enlaces

Tras revisar el post 10 consejos para hacer infografías con el que el bueno de Chiqui Estaban colaboró con este rinconcito, me anoté el compartir algunas de las herramientas y recursos que conozco o que he revisado mínimamente y que pueden ayudarnos enormemente en la elaboración de documentación e infografías. Herramientas que sirven para facilitar la creación de mapas y gráficos interactivos.

Y es que está muy bien eso de hacerse tablas y gráficos en Illustrator [en] pero quizá estemos buscando algo diferente y que nos permita desarrollar gráficos quizá más complejos o con cierto grado de interactividad (¡sin necesidad de montarse una locura como la increíble APRILZERO [en]!)

Veréis que hay un buen puñado de opciones, algunas más compejas que otras, que se solapan en lo que a funcionalidad se refiere. Pero como en la variedad está el gusto he creído oportuno mencionarlas de igual manera. Por cierto, en The Data Visualisation Catalogue [en] tenéis una referencia rápida de tipos de gráficas existentes, sus usos y significados. Muy práctica.

highcharts

Highcharts [en], el servicio que más he visto delante de la pantalla (en el estudio hemos trabajado bastante con las posibilidades que ofrecen). Gráficos interactivos de casi todas las formas y colores, actualizables en intervalos de tiempo y con chorromil opciones de configuración. Lo bueno es que se puede trastear sin problema con Highcharts porque ofrecen versión gratuita para proyectos no comerciales.

raw

Si buscamos algo más sencillo, Raw sería el siguiente servicio a mencionar. Muy fácil de usar. Basta con echarle un vistazo al vídeo en su página web para ver que se trata de volcar datos, configurar lo que queremos mostrar y alehop!

d3-js

Para hacer la magia, Raw se basa en la librería D3.js [en] con la que podemos trastear directamente si lo del código no es un problema. De hecho si nos gusta mucho y queremos darle un poco de vidilla a la librería, podríamos darle un power-up con D3plus [en]. De todas formas si se os atasca un poco al principio el trabajo con esta herramienta, tenéis a vuestra disposición un curso preparado por mi compañero Sergio Brito: Visualización de datos con D3.js. En video2brain recordad que podéis adquirir un curso de manera individual o conseguir una suscripción para tener acceso a todo el material disponible. Más información aquí.

google-charts

Míster Google también tiene su herramienta para la creación de gráficas usando Javascript: Google Charts [en]. A tenor de los visto en la documentación, se presenta como una opción realmente potente y altamente configurable, además de ofrecer compatibilidad en navegadores antiguos y dispositivos móviles. Yo sólo la he visto de pasada.

cartodb-1

Si lo que nos gusta de verdad es hacer mapas sin duda CartoDB [en] es una de las opciones a tener en cuenta desde el principio. Y es que CartoDB se ha convertido en una herramienta referente para la representación interactiva de información geográfica. Muy molona. Podéis echarle un vistazo a los ejemplos que tienen disponibles o cacharrear con la versión free para ver si es plato de vuestro gusto.

blockspring

Blockspring [en] ofrece unas cuantas plantillas de gráficas que podemos incrustar en páginas web o compartir. Me ha parecido interesante reseñarla puesto que algunas de estas plantillas no las he encontrado en el resto de herramientas como la de red animada o las basadas en palabras. Una opción para no comerse demasiado la cabeza si buscamos algo sencillo y encaja con las plantillas que ofrecen.

chartist

Chartist [en] la he descubierto gracias a RUDE y es “simplemente” una solución para crear gráficos (no interactivos) con el extra de ser responsive y que utiliza para la parte visual SVG y CSS. Sin aditivos extra ni edulcorantes.

javascript-charts

amCharts [en] es otra de las opciones viables si lo que necesitamos es una buena librería JS para crear gráficas animadas. Es un recurso de pago por lo que conviene asegurarnos de que ofrece exactamente aquello que vamos a requerir.

Creo que con estas opciones hay más que suficiente aunque si queréis un poco más de chicha podría mencionar Visage [en] que aún está en estado coming soon pero tiene buena pinta para hacerse infografías sencillitas o Datawrapper [en] como otra alternativa que además encaja para todos aquellos que busquen soluciones open source. ¿Más? Si es que hay cientos: Tableau Public [en], Plot.ly [en]

Para terminar me gustaría dejar referencia a rinconcitos que visito regularmente sobre este tema de estudio, análisis de datos y representación visual que tanto me gusta. Sitios como FlowingData [en], information aesthetics [en] o DataRemixed [en]. Y si buscáis ver infografías y gráficas fuera de lo habitual o con un toque de humor, vuestra parada fija es ChartGeek [en] 🙂