Cuando UX te enseña cómo diseñar un mejor portafolio

¿Sabes de esos sitios web que nadie visita? ¿Ni siquiera con un portafolio decente? Y bueno, tuve uno así. Pensé que el diseño orientado al usuario podría ayudarme a arreglarlo. ¡Y así fue!

Para ello seguí un proceso de cuatro etapas: investigación, estrategia, diseño y evaluación. Ven para que veas.

100%

Última actualización: 13 de octubre de 2018 | Tiempo de lectura: ~9 minutos.

Etapa 1: investigación

Mi hijo identificando los problemas.

Mi muchachito me demostró que usar dos botones para manejar tres idiomas es un disparate.

Sabía que mi sitio web tenía problemas. Creí estar al tanto, pero luego de una semana de investigación, me percaté de que ignoraba lo peor.

Por un lado, un análisis de datos exponía poco tráfico, baja participación y una tasa de rebote enorme. Esto quiere decir que los visitantes salían rápidamente después de entrar a una página, como si huyeran de ella despavoridos.

Por otro lado, la observación de usuarios revelaba un portafolio invisible. El menú de navegación les confundía y ellos simplemente no sabían qué hacer.

Francamente, no tenía ni idea de lo complicado que terminó siendo mi sitio.

¿Cuál era la causa?

Par empezar, usé una plantilla, lo que no fue muy creativo de mi parte. Luego, forcé un estudio de caso entero en una ventana flotante. Ofrecí demasiadas cosas a la vez. Y de paso, tan pronto como lo publiqué, me olvidé de él.

Pero el problema más grave fue que algunos visitantes creyeron que las pequeñas imágenes que introducían los estudios de caso eran mi portafolio. Obviando el verdadero trabajo que estaba a continuación.

Un portafolio invisible hace que el sitio web de una persona creativa pierda sentido.
Estrategia para mi sitio

Algunos bocetos, escenarios, storyboards y el prototipo de papel para este sitio.

Etapa 2: estrategia

De modo que tenía un portafolio invisible. Mi sitio web estaba destinado al fracaso.

Para arreglarlo, partí de los puntos débiles que observé y los convertí en preguntas. Por ejemplo, ¿Cómo desarrollar un portafolio evidente? De ahí salieron mis objetivos:

En este punto ya sabía qué hacer. Entonces tenía que decidir para quién. Así que es que escogí mi audiencia: gente creativa.

Definí el perfil de tres personas: una jefa, un cliente y una seguidora. Desarrollar un sitio web con ellos en mente mantendría mi mensaje enfocado, simple y relevante.

Élise, una jefa

Élise, una jefa
“Como directora de mercadeo, quiero contratar a un diseñador UX para que mi equipo pueda desarrollar sitios web centrados en el usuario.” —Élise

Élise visita la sección Acerca a partir de una búsqueda en línea desde su computadora. Se está informando sobre diseñadores UX en Montreal. Lee superficialmente el contenido y descarga mi CV. Luego revisa el portafolio y finamente me contacta por teléfono.

Normand, un cliente

Normand, un cliente
“Como ilustrador, necesito contratar a un diseñador web para promocionar mi trabajo en Internet.” —Normand

Normand llega a la página de inicio escribiendo mi dirección URL. Uno de sus amigos me ha recomendado para que diseñe su sitio. Recorre el proyecto principal y decide contactarme por correo electrónico.

Noelia, una seguidora

Noelia, una seguidora
“Como estudiante, quiero familiarizarme con el diseño UX antes de emprender una especialización en el área.” —Noelia

Noelia llega a un proyecto en curso a través de los medios sociales. Está usando su teléfono. Lee rápidamente el contenido y explora algunos enlaces externos. Encuentra el sitio útil y se convierte en mi seguidora.

Antes de adoptar un proceso creativo centrado en el usuario, abocetaba para la web con un concepto general en mente. Esto hacía que en lugar de generar muchas ideas diferentes, iteraba la misma sin avanzar.

Pero mi proceso dio un gran salto adelante cuando transformé los traspiés que observé en preguntas. Comencé a dedicar una sesión de ideación completa a un problema en particular. Es más fácil abordar un tropiezo a la vez. Me siento más creativa y enfocada.

Mi espacio de trabajo

En vista que no planeo administrar un blog y que estoy aprendiendo a integrar para la web, mi sitio es bastante simple.

Etapa: diseño

Para la nueva estructura y composición gráfica de mi sitio decidí regresar a lo básico. Su arquitectura consiste en cuatro páginas tradicionales: inicio, acerca, portafolio y contacto. Sus etiquetas en el menú de navegación son estándar.

No quiero confundir más a la gente. Por el contrario, deseo que no tengan que pensar para poder recorrer las páginas.

Para mantener el sitio ligero, escogí Georgia, una fuente disponible en todo ordenador. Es hermosa y fácil de leer en pantalla. La combiné con Raleway, una fuente de Google. Juntas ofrecen un balance y contraste adecuados para mí contenido.

Raleway para los títulos y Georgia para los párrafos

Raleway para los títulos y Georgia para los párrafos.

Entonces, definí una escala modular para mí sitio adaptativo. Me gusta la propuesta de Zell Liew: un ratio diferente para cada formato de pantalla. Mientras más pequeña sea ésta, más cerrado será el ratio.

Ratio a gran escala

Un ratio a gran escala para una computadora de escritorio. El conjunto lucía desproporcionado.

Ratio a escala pequeña

Un ratio a menor escala funciona mejor para las pantallas pequeñas.

Una vez que la tipografía me satisfizo, comencé a trabajar en una paleta de colores. Siguiendo este tutorial de Laura Elizabeth, escogí:

#edbc02 — Acento principal
#f1c935 — Acento secundario
#45443f — Gris oscuro
#f9f7ed — Gris claro
Blanco

El tono más oscuro es reservado para los textos. Los acentos, para los enlaces y botones. Los más claros, para el fondo.

La página de inicio con la paleta de colores ya aplicada.

La página de inicio con la paleta de colores ya aplicada.

Mi deseo es crear una interface de usuario intuitiva. Por ello estoy siguiendo técnicas de diseño ligadas a la navegación, accesibilidad y creación de contenido. A continuación las esenciales.

Navegación

“La mayoría de la gente pasa el tiempo en otros sitios. Por esta razón, ellos prefieren que tu sitio funcione de la misma manera que los otros que les son familiares.” —Jakob Nielsen

Accesibilidad

Simulación de la sensibilidad a la luz roja

Simulación de la sensibilidad a la luz roja.

Contenido

Mapas térmicos de Hotjar

Mapas térmicos de Hotjar (escritorio y teléfono). Los dos primeros muestran los lugares donde los usuarios hacen clic. La última ilustra con colores el porcentaje de zonas observadas. La zona roja muestra lo que ha sido visto por el 100% de los visitantes.

Etapa 4: evaluación

Tengo un trabajo a tiempo completo, una familia que atender y poco tiempo disponible. Además, mi presupuesto para emprender está evaluación es casi nulo. No me queda más remedio que ser creativa.

Así que he usado diferentes técnicas:

Evaluación de experto

Tal y como Everett N. McKay sugiere, apliqué una evaluación cognitiva paso a paso. Se trata de un análisis detallado del recorrido de tus personas mientras ejecutan tareas en el sitio. Esto ayuda a identificar ciertos problemas antes de probar la interface con usuarios reales.

Observación controlada

Puesto que algunos de mis colegas tenían un perfil similar al de mis personas, les pedí que probaran mi sitio delante de mí. En agradecimiento, les ofrecí un pequeño servicio.

Puede que esto no sea ideal, porque ellos me conocen y en ciertos casos trataron de complacerme con sus comentarios. Pero ciertamente, verlos interactuando con mi sitio me reveló cosas que no habría podido descubrir sin su ayuda.

Observación no controlada

Es aquí que el diseño UX se vuelve un poco extraño. Existen muchos recursos que te permiten observar la gente en tu sitio web a distancia. Es increíble, pero también me pone piel de gallina. Estos son los que más me gustan:

Una captura de pantalla de mi tablero en Google Analytics

Una captura de pantalla de mi tablero en Google Analytics. Es una comparación de los datos recogidos entre enero y octubre de 2017 y 2018. Desde que puse en marcha el nuevo diseño, el volumen de visitas mejoró considerablemente y la tasa de rebote disminuyó de manera importante.

El momento de la verdad

Me habría encantado anunciar que sobrepasé todos mis objetivos, pero no fue así. Estas son las razones:

Ahora que la fase de evaluación ha quedado atrás, estoy segura de que la mitad de mis objetivos se han cumplido. He visto gente interactuando fácilmente con mi sitio web y eso me alegra mucho. Lamentablemente, los usuarios pueden perderse en él cuando visitan el portafolio. Esto implica un rediseño inevitable. Pero esta es otra historia.

Gracias por haberme acompañado. Si has encontrado algo interesante, por favor compártelo con alguien. Te amaré por siempre. ¡Hasta pronto!

Haz clic en los botones para obtener más información

A propósito de mi sitio web

Este sitio estático es hospedado por GitHub y propulsado por Netlify.

Detrás de bastidores

Algunos extras para geeks como yo.

Mi antiguo sitio

Mi antiguo sitio. Puedes visitarlo aquí.

Uno de los storyboards que hice para Élise

Uno de los storyboards que hice para Élise.

Un ejemplo de abocetado a partir de una idea general

Un ejemplo de abocetado a partir de una idea general.

Un ejemplo de ideas generadas a partir de mis preguntas

Un ejemplo de ideas generadas a partir de mis preguntas.

Esquema para la página de inicio

Esquema preliminar para la página de inicio.

© 2018-2019 Pati Montero Política de privacidad