portafolio personal en Experiencia de Usuario

Por ALBERTO ZAMARRÓN PINILLA

El portfolio es una herramienta de presentación de trabajos muy asentada en profesiones en las que el resultado entregable es suficientemente visual como para ser valorado a través de imágenes. Dentro del campo del UX, no es tan obvio como presentar una muestra de trabajos representativa de nuestras capacidades. La valoración de un producto digital sin utilizarlo siempre será parcial, y cuando se trata de mostrar el proceso seguido o fases de investigación y evaluación, las dificultades son aún mayores.

El principal inconveniente que se atribuye a un portfolio UX es que está formado por un conjunto de wireframes y otros entregables descontextualizado, sin capacidad de mostrar cómo se ha llegado a la solución: decisiones que se han tomado, por qué se han tomado, dificultades superadas, iteraciones, en fin, el proceso seguido.

Pero, ¿no son los entregables (wireframes, prototipos, flujos, escenarios, …) una herramienta de comunicación fundamental entre los implicados en un proyecto?
Tengamos como referencia superar ese inconveniente y utilicemos los entregables como medio para comunicar el proceso seguido. Acompañado de una buena presentación del producto final y su impacto, convertiremos nuestro portfolio en una herramienta útil.

Por otro lado, en caso de buscar trabajo, la persona que está haciendo selección de candidatos, no tiene tiempo de entrevistar a cada uno de ellos ni de leer sus blogs para conocer su forma de pensar, seguir procesos y generar soluciones. En muchas ocasiones el portfolio es la única forma de presentar lo que podemos hacer, generar interés y llegar a una entrevista. Es el “teaser” de tu experiencia profesional.

Por si cabe alguna duda, muchas veces se requiere de entrada en ofertas de trabajo:

“Oferta para Diseñador de Interfaz Ux
Se requiere: [...] Porfolio On-line actualizado, necesario para valorar experiencia y capacidad del candidato (imprescindible).”

 

“Diseñador de Interacción Senior UX
¿Te interesa esta oferta? Envía tu cv y datos de contacto a [...] junto con portfolio de trabajos realizados.”

 

“UX Designer
Requisitos: [...] Nos envíes tu portfolio de trabajos como UX Designer.”

 

“Lead Visual Designer
Candidates must share a portfolio to be considered for the role with work that demonstrates exceptional visual design skill and stylistic breadth. Portfolios should include examples of interactive work with a focus on mobile and web design of shipping products.”

Pero el portfolio personal no es sólo útil en la búsqueda de empleo, también nos servirá para:

  • Recordar los proyectos realizados, tener feedback de lo que has hecho y aclarar (también a uno mismo) dónde tienes más experiencia y donde te te falta.
  • Comunicar a otros estos proyectos. Al igual que el CV, pueden darse situaciones en las que, aunque no vayas a dejar tu trabajo, tengas que presentarlo para optar a un puesto paralelo, proyecto freelance, participación en congresos, etc.
  • Prestigio personal, carta de presentación. Incluso dentro de tu empresa, puede servir para dar una imagen más completa de tus capacidades y experiencia.
  • Satisfacción, orgullo, motivación para hacer mejor tu trabajo. Tener un historial de proyectos cada vez mejor es motivante para cualquier diseñador. Que esa experiencia esté recogida en un portfolio, no hace más que aumentar esta motivación.
  • Tener la posibilidad de actualizar y refinar trabajos ya realizados.
  • Enseñar (educar) a otros. Aportar conocimiento a la comunidad, prestigiar la profesión.
  • Ayudar a tu empresa. Puede ser un canal extra para mostrar capacidades de tu empresa, por extensión de las tuyas.

Qué trabajos pueden formar el portfolio público

A la hora de recopilar los proyectos pueden surgir dudas sobre cuales es adecuado mostrar y cómo generar material que se pueda mostrar.

  • Proyectos académicos. No hay problema, pero señala en los créditos la entidad, curso y resto del equipo que ha participado si es el caso.
  • Proyectos just-for-fun, presentados a concursos, open source, etc. No hay problema, está bien poner créditos del concurso, contextualiza el trabajo. Y, a no ser que lo veas muy claro, no te engañes intentando guardarlos para sacarlos partido más adelante.
    Este tipo de trabajo puede ser una buena fuente si no dispones de suficiente material que se pueda mostrar.
  • Proyectos cliente como freelance o en tu propia empresa. Asegúrate de que esté publicado y tener permiso del cliente (no suele tener inconveniente), aclarar de qué parte te has encargado.
  • Proyectos cliente realizados dentro de una empresa. El trabajo pertenece al cliente y a tu empresa, por lo que, además de lo anterior, hay que tener consentimiento de tu empresa. Evita el conflicto de intereses con tu empresa, por ejemplo, si muestras trabajos en tu portfolio para conseguir trabajos como freelance que podría hacer tu empresa.

En caso de buscar un cambio de empresa o contener proyectos que no quieres hacer públicos por la razón que sea, puedes tener un portfolio online protegido con contraseña (completamente o parte) , y/o crear un robots.txt que asegure que Google no lo indexa para búsquedas (Disallow).

Consejos generales a la hora de crear el portfolio

  • Simplicidad, foco en el contenido
  • Muestra sólo los mejores trabajos, mejor dos o tres trabajos de calidad que quince mediocres
  • Asegúrate de que puedes enseñar los trabajos, de que estén publicados y pide permiso
  • Si es imprescindible, protege algunos trabajos o el portfolio completo con contraseña. Es posible que ocultando alguna información sensible sea suficiente
  • Cuenta historias, usa storytelling
  • Proporciona contexto y restricciones
  • Nivel de detalle adecuado, la capacidad de síntesis es muy valorada
  • Fácilmente escaneable, que se pueda recorrer de un vistazo manteniendo significado (apoyo en rótulos, imágenes) y permitir ampliar información si se desea (párrafos)
  • Variedad, no pongas trabajos muy similares
  • Menciona con quién has trabajado (personas, departamento, empresas) y de qué parte del trabajo te has encargado
  • Hazlo disponible online y adaptado a dispositivos móviles, pdf sólo si te lo solicitan
  • No inventes la rueda ni renuncies a tener un buen soporte, valora la posibilidad de utilizar un servicio de portfolios, templates, temas comerciales con CMS, contratar alguien, …

Estructura y contenido

Lo primero es diferenciar si es una herramienta de búsqueda de trabajo o no. En el primer caso, se trata de un medio para convencer a una empresa de que hable contigo. Lo ideal sería ir personalizando el portfolio en función del puesto al que se opte en cada momento.
Hay que ponerse en la piel de la empresa, si están buscando cubrir una plaza concreta, aunque todos los conocimientos relacionados serán bienvenidos, lo esencial es demostrar las capacidades y experiencia en ese área concreta. Hay que priorizar, éso se supone que se nos da bien.

Un aspecto que se repite frecuentemente en los artículos sobre el tema (ver referencias) es la necesidad de contar una historia en lugar de mostrar sólo una recopilación de entregables. Se trata de utilizar el storytelling para hablar sobre el proceso que sigues, tus habilidades y tu experiencia. Para ésto hay que trabajar tanto la parte visual y escrita del portfolio (la mostrable) como la que contarías en persona.

Es recomendable que el portfolio contenga algún trabajo que abarque el ciclo más completo posible desarrollado en detalle y un pequeño grupo de proyectos más focalizados y presentados de forma más sintética.

Un par de casos de estudio

Debería haber uno o dos proyectos mostrando el ciclo completo de diseño. De esta forma se muestra el conocimiento global del proceso de diseño centrado en el usuario, prototipando alternativas e iterando, junto con la colaboración entre disciplinas.
Este proyecto debería presentar, de forma muy sintética, el contexto, el problema planteado, las metas y las restricciones a las que se tuvo que hacer frente. Sin ésto, no es posible valorar adecuadamente el proceso seguido y el resultado obtenido.
Para describir el proceso hay que usar imágenes de calidad y tamaño suficiente (user research insigths, personas, escenarios, wireframes, flujos, prototipos, …) acompañadas de texto muy conciso que ayude a entender las decisiones tomadas y articulen una historia. El final felíz será un gran producto, y si ha tenido cierto impacto, no hay que dudar en señalarlo.

Mostrar el trabajo en contexto real (ventana de navegador, integración fotográfica, fotografía real, …) siempre ayuda a valorar el resultado. Si es posible añadir un prototipo interactivo o vídeo del producto funcionando y en contexto real, sería perfecto.

Si se tiene experiencia en fases concretas, no en el ciclo completo, habrá que hacer más hincapié en esas fases y en el impacto que han tenido en el proyecto, pero no hay que renunciar a demostrar que tenemos conocimiento del proceso completo y del encaje de nuestro trabajo en el mismo.

Aquí un ejemplo de proyecto en el que se puede echar en falta investigación al comienzo y trabajo con desarrolladores más adelante, pero que está muy bien estructuradohttp://genelu.com/2012/03/copilot/ (portfolio de Gene Lu)

Unos cuantos proyectos explicados brevemente

Un conjunto de pequeñas historias son el complemento perfecto para los casos. Es el momento de mostrar variedad, aunque siempre poniendo la calidad por encima de la cantidad, sólo hay que mostrar los mejores trabajos, aquellos de los que estás orgulloso. Tener algún área sin cubrir o sin trabajos de suficiente calidad es la excusa perfecta para hacer un pequeño proyecto personal.

Se trata de presentar ejemplos en las áreas concretas en las que eres experto, cómo eres capaz de aportar valor a un producto integrando tu trabajo en proyecto colaborando con más gente, participando en proyectos-cliente desde el primer día. También podrían ser ideas poco desarrolladas si lo que quieres mostrar es tu capacidad conceptualizando.

Este es un ejemplo de algo muy concreto, una evaluación heurística, que podría haberse presentado como un tedioso informe, pero aquí es sintético y visual. Eso sí, las imágenes deberían poder ampliarse a tamaño real: http://www.sarahspitler.com/NewSite/USBank.html (portfolio de Sarah Spitler).

Diferentes enfoques según el perfil

No es que sea extraño que se soliciten unicornios del UX, holoísticodiseñadores totales capaces tanto de realizar una entrevista en contexto como de desarrollar el back-end de una aplicación al máximo nivel. Lo que es más difícil es encontrarlos, y las empresas lo saben, por lo que mostrarse como tal puede restar credibilidad y pegada en las áreas en las que somos realmente expertos.

En mayor o menor medida, el portfolio se adaptará dependiendo de nuestro perfil o del perfil que queremos mostrar para que encaje con una determinada demanda.
Los siguientes aspectos serían los que destacarían en el/los proyecto/s de ciclo completo y la base de de los proyectos más resumidos:

Design Researcher, User Researcher, Experto en Usabilidad

  • La capacidad para planificar y llevar a cabo diferentes tipos de investigación es básica, pero lo que marca la diferencia es la capacidad de extraer conclusiones significativas, la síntesis de la investigación que servirá para diseñar o mejorar un producto.
  • En el caso de investigación, el contenido gráfico puede ser clusters, diagramas, modelos mentales, insights, personas, principios de diseño, etc, siempre comentados manteniendo un hilo narrativo.
  • En el caso de evaluación de usabilidad, se puede mostrar, sobre el producto evaluado, los problemas encontrados y las mejoras propuestas.

Diseñador de Interacción, Arquitecto de Información, Diseñador de Interfaces

Los límites de estas disciplinas son más difusos si cabe, pero la experiencia puede mostrarse:

  • Sentando la base del diseño mediante modelado de resultados de investigación y requisitos de usuario: personas, escenarios, storyboards, ..
  • Estructurando contenidos, ideando y comunicando propuestas mediante árbol de contenidos, flujos de tareas, wireflows, wireframes, sketches exploratorios, prototipos…
  • Mejorando el resultado de forma iterativa a través de prototipos con el nivel de fidelidad adecuado.

Diseñador Visual

Es fácil aquí mostrar el resultado final, pero también es interesante ver como se ha llegado a él y el contexto en el que se ha aplicado.

  • Hay que dejar clara la capacidad para crear un lenguaje visual y extenderlo a diferentes plataformas de forma consistente.
  • La presentación del propio portfolio es una oportunidad para demostrar que también se sabe ceder la importancia al contenido. El contenedor debe ser impecable, pero no el protagonista.
  • No nos engañemos pensando que nuestros diseños son atemporales, prepárate para actualizar constantemente el portfolio, aquellas texturas sutiles de las que estabas tan orgulloso hoy te pueden sonrojar.

Front-end Developer, Desarrollador, Devsigner

  • Huelga decir que es importante un portfolio hand-code, cediendo protagonismo al contenido como en el caso anterior, pero impecable a nivel diseño y funcionalidad.
  • Aquí se mostrarán sobre todo productos finales en variedad de tecnologías e incluyendo en enlace al sitio web, aplicación o página de descarga de app siempre que sea posible.
  • Github también es una herramienta fundamental para mostrar proyectos y contribuciones específicas a proyectos.

Fundamentos del diseño

“Muchos piensan en el diseño como en algún tipo de esfuerzo dedicado a embellecer la apariencia exterior de las cosas. Ciertamente, el solo embellecimiento es una parte del diseño, pero el diseño es mucho más que eso.

Miremos en nuestro alrededor. El diseño no es sólo adorno. La silla bien diseñada no sólo posee una apariencia exterior agradable, sino que se mantiene firme sobre el piso y da un confort adecuado a quien se siente en ella. Además, debe ser segura y bastante duradera, puede ser producida a un coste comparativamente económico, puede ser embalada y despachada en forma adecuada y, desde luego, debe cumplir una función específica, sea para trabajar, para descansar, para comer o para otras actividades humanas. El diseño es un proceso de creación visual con un propósito. A diferencia de la pintura y de la escultura, que son la realización de las visiones personales y los sueños de un artista, el diseño cubre exigencias prácticas. Una unidad de diseño gráfico debe ser colocada frente a los ojos del público y transportar un mensaje prefijado. Un producto industrial debe cubrir las necesidades de un consumidor. .

En pocas palabras, un buen diseño es la mejor expresión visual de la esencia de «algo», ya sea esto un mensaje o un producto. Para hacerlo fiel y eficazmente, el diseñador debe buscar la mejor forma posible para que ese «algo» sea conformado, fabricado, distribuido, usado y relacionado con su ambiente. Su creación no debe ser sólo estética sino también funcional, mientras refleja o guía el gusto de su época.”

 

Wucius Wong. Fundamentos del diseño, Edición española, Gustavo Gili, SA, Barcelona, 1996

Páginas de Error

Uno de los tantos tips importantes en la experiencia de usuario #UX es mantener una comunicación constante del estado en el que se encuentra el sistema al momento de las interacciones con el usuario. Más importante aún cuando este mismo sistema falla. Por lo tanto, debemos comunicar puntualmente el error y si lo hacemos entretenido (dependiendo del contexto) podemos mantener a nuestros usuarios informados y de paso reducimos la fricción de la frustración.

Veamos algunos ejemplos de buenas prácticas en errores 404 (contenido no encontrado).

Error 404 Blizzard

Blizzard.com
GoPro.com
Madpow.com
Backcountry.com
Dogfunk.com
Nbc.com
Rollingstones.com
Spinutech.com
Americanmuscle.com
Bloomberg.com

Brackets: Editor web gratuito y de código abierto

Brackets

 

Edge Code, el anterior editor para la web ultraliviano de Adobe sufre una remodelación contundente, ahora tendrá un nuevo nombre, se llamará Brackets.

Esencialmente Brackets viene remodelado y recargado con nuevas funcionalidades. Una de la mas importante es trabajar desde un PSD y extraer las propiedades CSS de los elementos. Misma función que realiza la nueva versión de Photoshop CC.  Así como la integración de procesadores LESS y SCSS. Librería de Extensiones, etc.

Esta es una nueva opción para quienes hemos sido conquistados por estos editores ultra ligeros como Sublime Text y le encontramos un gustito a lo que hizo Adobe al rápido y sencillo Edge Code.

Descarga Brackets: http://brackets.io/
GitHub: https://github.com/adobe/brackets

Los 10 mandamientos del Diseño Web

Ten Commandments of Web Design – Jeffrey Zeldman at An Event Apart Austin 2013 from Jeffrey Zeldman on Vimeo.

Jeffrey Zeldman nos presenta los 10 mandamientos “modernos” del diseño web

  • Un sitio web debe entretener al usuario.
  • Hay que probar todo en nuestro sitio web, incluso las suposiciones.
  • Hay que iterar constantemente, un sitio web debe evoluciona.
  • Debes concentrarte en lanzar, es importante no dejarse llevar por ser perfeccionista si va a detenerte de lanzar tu sitio/producto.
  • Involucra a la comunidad.
  • El contenido debe llegar a todos sin importar el dispositivo.
  • El contenido es primero, el diseño debe adaptarse conforme al contenido.
  • Haz magia. No busques la perfección.
  • Debes priorizar, organizar y designar. Esto para asegurar un flujo de trabajo con el equipo involucrado en un sitio web.
  • Hay que mantener los principios por los que un sitio es creado.