O’Reilly Topics

o-reilly

Acabo de rescatar de entre todos los marcadores del navegador que tengo pendientes por organizar, el enlace hasta una sección en la web de O’Reilly (apenas necesitan presentación creo yo) en la que se dedican a guardar un montón de contenidos interesantes relacionados con los temas que cubren en sus publicaciones editoriales.

o-reilly-ideas

Me ha recordado a lo que hacen también de manera similar en SitePoint [en], otro excelente sitio donde pasar horas y horas (y ojo que sigue vigente la promo de acceso a todo el contenido premium a precio de risa).

Supongo que la vorágine informativa puede con todos y cada uno de nosotros. No es de extrañar la verdad. Pero no por ello deja de merecer la pena que tengamos medio ojo sobrevolando contenidos como estos.

No sé si para ver todos los contenidos es requisito imprescindible que estemos registrados pero bueno, es algo totalmente gratuito y nos da acceso a todos los artículos escritos y también alguna que otra presentación en vídeo o audio.

O’Reilly Topics [en]

Disponible gratis online “Designing for Performance”

designing-performance

Me he llevado una grata sorpresa al enterarme por Twitter de la disponibilidad online de Designing for Performance un título de la conocida casa O’Reilly. Lo tenía anotado como “lectura futura” para adquirirlo antes o después y resulta que lo han lanzado online de manera que pueda leerse su versión digital desde la web oficial de la publicación. Genial. Pero vamos, que si lo queréis impreso siempre tendréis esa opción.

Lectura más que recomendable para entender que un proyecto no basa su éxito exclusivamente en ponerlo todo bonito, hay mucha chicha por detrás 🙂

Designing for Performance [en]

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.

Face of Cars, un cara a cara automovilístico

face-of-cars

Inmerso en la búsqueda de nuevos recursos de referencia UX que añadir a The Starter Kit terminé encontrando material bastante interesante pero enfocado en el terreno automovilístico. Por ejemplo descubrí Car UX [en], un linkazo lleno de ejemplos de salpicaderos y controles de un buen puñado de modelos de vehículos.

car-ux

También descubrí Face of cars, que de experiencia de usuario no es que tenga mucho material peeeeeero tiene un buen surtido de imágenes de automóviles de lo más variado. Que no tengan ningún modelo del Camaro es para bajarle mucho la nota a este proyecto de Min Seung Song pero se lo perdonaré por la cantidad de imágenes tan elevada que mantiene en este archivo tan particular. A los que gustéis de los cochecitos, este es vuestro link del día.

Face of Cars [en]

Probando Atomic.io, una herramienta alternativa más de prototipado digital.

atomic-io

Dejaban hace unos días en Designer News [en] el enlace hasta Atomic, una nueva herramienta de prototipado que viene a sumarse a otras ya existentes como por ejemplo Invision, Marvel (de la que hablo en el curso de fundamentos sobre UX que ahora tiene un 40% de descuento con el código V2BM40) o Pixate. Quise apuntarme a la beta para echarle un vistazo rápido a ver qué podría encontrarme y aproveché la madrugada para hincarle el diente.

Atomic promete ser un entorno de trabajo amistoso, con características tales como la posibilidad de crear flujos de navegación a través de zonas interactivas, un control de versiones en formato línea de tiempo que nos permite deshacer cambios o modificaciones, incluir propiedades CSS directamente sobre los elementos de nuestro prototipo, comentarios de usuarios, etc.

La verdad es que al no tratarse de una herramienta que requiera instalación (corre directamente en el navegador) ni de ser excesivamente compleja (más bien al contrario) os animaría a probarla directamente si os gusta cacharrear con “juguetes nuevos”. En unos 10 minutos como mucho ya habréis entendido cómo funciona.

atomic-io-00

Sabiendo que Atomic aún está en fase beta, se le notan importantes carencias siendo la falta de importación de contenidos desde Sketch o Photoshop la que considero más importante. No vendría nada mal poder incluir archivos .psd o .sketch.

Lo que sí que podemos hacer actualmente es importar imágenes (he probado a importar archivos SVG sin problema aparente) y añadir elementos extra con las diferentes herramientas de trazado y texto que tenemos a nuestra disposición para, a continuación, ponernos manos a la obra e incorporar efectos adicionales gracias a la posibilidad de incluir propiedades CSS.

En cuanto a capacidades de interacción, Atomic se limita a ofrecernos el poder crear zonas interactivas que hagan las veces de puente entre las diferentes páginas que tengamos incluidas en nuestro prototipo. Una vez creada una zona interactiva, tendremos todo un surtido de diferentes efectos de transición para poder jugar con la apariencia del cambio entre páginas.

Dicho esto y si finalmente os animáis a probar la herramienta, os preguntaréis entonces cómo han conseguido los efectos de transición y desplazamiento de elementos tan chulos en los ejemplos ofrecidos. La respuesta es bien sencilla.

La ubicación y presencia de los elementos es determinante para el efecto de transición. Por ejemplo si colocamos una barra de navegación en la página de origen y aparece exactamente en la misma posición en la página destino, no pasará absolutamente nada con este elemento en concreto. Sin embargo si la colocamos fuera del área de trabajo (las páginas tienen unas dimensiones fijas), al realizar la interacción la barra de navegación no desaparecerá sino que se desplazará hasta la posición deseada. ¿Qué quiere decir esto? Que podemos jugar con la colocación de elementos fuera del “área de trabajo” para hacer aparecer y desaparecer elementos.

Este detalle hace que sea realmente fácil conseguir efectos animados sin mucha dificultad pero personalmente no creo que sea algo muy intuitivo.

Si os ha picado el gusanillo, podéis registraros para pedir acceso a la beta o simplemente dejad un comentario por aquí porque tengo 3 invitaciones disponibles 🙂

Atomic.io [en]

¿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.

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

UXMAD y UX Fighters, más chicha sobre diseño y experiencia de usuario

uxmad

Se me acumulan los deberes. Intento mantener a la bestia controlada pero si me descuido un fin de semana sin hacer limpieza, ya noto su aliento en el cogote. Hablo por supuesto de la bestia en forma de infinitos links que voy guardando en marcadores para ir organizándolos y destacando lo que merece la pena. La única solución que me queda es irme a una cueva bien profunda donde no llegue señal Wi-Fi o volverme ermitaño del todo.

Mientras me lo voy pensando, comparto los enlaces a UXMAD y UX Fighters con los que tendréis material para rato si os ha picado el gusanillo de uno de los temás más candentes: la experiencia de usuario o UX.

UXMAD es una serie de entrevistas realizadas a profesionales del diseño. Nuestra intención es entender y dar a conocer sus motivaciones y vivencias más relevantes en el mundo de la creatividad y la experiencia de usuario.

Las entrevistas empezaron en Diciembre del año pasado y de momento no han faltado ni una vez a su promesa de una nueva entrevisa cada mes. Por eso os decía que ya tenéis chicha para entreteneros. Ahí va: UXMAD

Por otro lado, UX Fighters es un evento organizado en Madrid cuya primera edición tuvo lugar el pasado mes de Septiembre. Aún así considero reseñable el enlace de rigor porque además en breve lanzan su podcast y siempre viene bien tener nuevos contenidos a los que pegar la oreja 🙂

Que aproveche.

PD: Como la situación lo permite sin que huela demasiado a spam, comentaros que ha salido del horno hace un par de días un nuevo curso sobre fundamentos de UX y prototipado que tiene la aterciopelada voz de un servidor como narrador. Aquí os hablo en detalle sobre mis cursos.

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] 🙂