Advertisement
  1. Web Design
  2. Case Study

Explorando la Web Centrada en las Personas

Scroll to top
Read Time: 8 min

() translation by (you can also view the original English article)

Hace algún tiempo publiqué un artículo describiendo el flujo de trabajo que apoyaba y enfatizaba el enfoque del diseño web centrado en las personas. En este artículo, examinaremos sitios web que aplican esta metodología y veremos cómo ha contribuido a su éxito el diseño centrado en las personas.


Una Mirada Hacia Atrás

Para empezar, aquí tienes un recordatorio de cómo la metodología del diseño web centrado en las personas puede aplicarse a la web.

  1. Exploración: un sitio web es un medio usado normalmente para resolver algo, tanto para el público objetivo como para el cliente. La exploración consiste en entender las necesidades de todas las partes involucradas, incluso aquellas no tan obvias.
  2. Diseño: el objetivo del diseño centrado en las personas no es crear el producto perfecto, sino encontrar la mejor solución, con frecuencia consiste en encontrar un equilibrio.
  3. Implementación: a cada actualización o modificación le sigue un ciclo de aprendizaje. Itera y mejora.

Casos de Estudio

Repasemos algunos sitios web conocidos.

Squarespace

La aspiración de Squarespace es convertir el proceso de creación de sitios web en algo accesible y bello. Son excelentes comprendiendo los problemas de las partes involucradas. Proporcionan un producto pensado para el fotógrafo que desea crear su portafolio online, para el propietario de una tienda que busca una plataforma sostenible y para el desarrollador que quiere tener total control sobre el producto. Han examinado todos los problemas habituales con los que se encuentra la gente al crear su presencia online y ofrecen una solución.

Esta filosofía se refleja en el diseño. La página de aterrizaje contiene distintas historias o casos de estudio a modo de ejemplo, ya que cada web concreta tiene su objetivo. En lugar de mostrar una solución en blanco que el usuario pueda personalizar, muestran distintas posibilidades de personalización, lo que provoca una respuesta más directa por parte del usuario ya que éste entiende de forma sencilla las posibilidades del producto.

Écha un vistazo a las capturas de pantalla siguientes y observa la inteligente manera en la que se ha aplicado el diseño.

SquarespaceSquarespaceSquarespace
Squarespace muestra a los usuarios los distintos pasos que deben dar. Presta atención a las plantillas que ofrece el filtro de opciones. ¿Gestionas un negocio? ¿Un restaurante? ¿O estás intentando crear un portafolio?
SquarespaceSquarespaceSquarespace
El panel de control para la gestión de tu sitio web es lo suficientemente sencillo como para que cualquiera lo entienda.
SquarespaceSquarespaceSquarespace
Esta página de precios es coherente y muestra a los usuarios de forma clara las diferencias entre las distintas opciones.

Shopify

Shopify es otro buen ejemplo. Han logrado que el proceso de empezar a crear una web de eCommerce sea mucho más sencillo, llevando de la mano al usuario conforme realiza cada uno de los pasos necesarios.

ShopifyShopifyShopify
Shopify ayuda a los usuarios a realizar las tareas más complicadas en la gestión de un sitio web de eCommerce, haciendo que sea lo sencillo más sea posible.
ShopifyShopifyShopify
Una de las mejores páginas explicativas que he visto nunca. Concisa y bien estructurada.

Artsy

Llevar el arte físico al espacio digital es un objetivo desafiante. El equipo de Artsy entendió que el arte es algo muy visual y eso se refleja en el diseño de su sitio web.

Filtrar la búsqueda de objetos artísticos es muy sencillo y comprensible, tanto para los expertos como para los que no lo son. Es posible filtrar por temática, por medio o técnica, por estilo y movimiento artístico, y por precio y categoría. La opción "View in Room" (ver en estancia) es un ejemplo perfecto de diseño centrado en las personas.

ArtsyArtsyArtsy
Artsy ofrece multitud de opciones para filtrar los artículos.
ArtsyArtsyArtsy
El recuadro situado en la esquina superior izquierda de la ventana púrpura le ofrece al usuario una comparativa para visualizar la proporción del artículo con respecto a una figura humana.
ArtsyArtsyArtsy
La opción "View in Room" le da al usuario una idea de cuán grande es la pieza de arte antes de adquirirla.

Han conseguido que el sitio web sea fácil de usar tanto para expertos como para lo curiosos profanos en arte. Haz una prueba, examina su funcionamiento y las opciones que ofrece su diseño.

Tumblr

Si has tenido la ocasión de trabajar con una plataforma que muestra contenido creado por una comunidad, pensar en primer lugar desde la perspectiva del usuario mejora increíblemente el producto resultante.

Existen muchísimos sitios web que consideran a su comunidad de usuarios como su principal socio y preocupación (por ejemplo Tumblr, Twitter e Instagram). Sin estos usuarios, su modelo de negocio no tiene sentido.

Tumblr explora los medios posibles para facilitar a los usuarios el uso de su plataforma. Esto se refleja en el diseño de su interfaz.

TumblrTumblrTumblr
Un ejemplo de diseño de interfaz accesible presente en Tumblr.

Es interesante comparar también como Tumblr y Facebook gestionan su publicidad. Mucha gente siente que Tumblr interrumpe en exceso el flujo del usuario con publicidad al igual que Facebook, esto puede ser debido tanto a una decisión de diseño como de perspectiva empresarial.

TumblrTumblrTumblr
La publicidad de Tumblr es menos obvia.

Steam

Es un sorprendente sitio web al que bien vale la pena echar un vistazo. Aunque puede que tenga un estilo visual anticuado, han pulido el concepto de proporcionar un sitio web adorado por miles de personas y basado en el eCommerce y una comunidad.

Su contínua evolución, sus ofertas y su atención adaptada a todo tipo de desarrolladores ha logrado atraer a una amplia comunidad. Recientemente agregaron un sistema de valoración para los videojuegos, facilitando a la gente la elección en el momento de su compra. La inclusión del número de horas jugadas en un videojuego aumenta la credibilidad de las recomendaciones. Esta validación de las opiniones beneficia tanto a los usuarios como a los desarrolladores de los videojuegos. Es una pequeña decisión relativa al diseño que tiene sin embargo una gran influencia en el comportamiento de los usuarios de este eCommerce.

SteamSteamSteam

Podrías aplicar esta idea en tu próxima web de eCommerce añadiendo una etiqueta en la opinión sobre el producto que enlace al perfil del usuario que ha dejado el comentario y que ya lo ha comprado.

En la misma medida en que Steam apoya a los jugadores, apoya a los desarrolladores de videojuegos, dándoles la oportunidad de interactuar con la comunidad creada alrededor de su juego, o con toda la comunidad de Steam de manera que puedan recibir apoyo en sus próximos proyectos.

Threadless

¿Te suena #threadless o #teestyle? Threadless es un excelente ejemplo de cómo crear un sitio de eCommerce centrado en la retención y la ampliación de una comunidad, con un estilo similar a lo que hace Steam.

El diseño está optimizado para dar soporte tanto a los compradores como a los creadores.

SteamSteamSteam

Encontrar este equilibrio puede ser un reto complicado. Siempre que trabajes en este tipo de proyectos, una forma de asegurarnos mantener este equilibrio consiste en la creación de un mapa de flujo de usuario. Esto destacará lo puntos débiles potenciales en el flujo de navegación, revelando en qué momento son inconsistentes y confusos para un tipo de usuario concreto.    

Imprime los diseños de tu sitio web, usa un rotulador para marcar las conexiones reales y reflexiona sobre las decisiones de tu diseño. Involucra verdaderamente a los usuarios potenciales y haz que interactúen con un prototipo. ¿Qué feedback recibes?

Tuts+

La última encarnación de Tuts+ (denominado cariñosamente como "the Hub") es el resultado de centralizar y mejorar los sitios web existentes de Tuts+, y comprender, una vez más, a todas las partes. En estas partes están incluidos tú, el lector, los autores y los anunciantes.

El lanzamiento de los cursos de Tuts+ es un ejemplo de cómo cada producto o servicio experimenta un ciclo de aprendizaje con cada lanzamiento, reconociendo siempre la posibilidad de mejora.

TutsplusTutsplusTutsplus

Cuando comparas cada uno de las webs de Tuts+ y el nuevo hub, observaras un par de diferencias. El nuevo hub es responsivo, está organizado según las temáticas de tu interés, y proporciona una interfaz clara para los lectores y los anunciantes. Como autores, hemos mejorado la visibilidad y la sección de artículos relacionados nos ofrece la oportunidad de mostrar más de nuestro contenido.


Conclusión

Siempre que examino sitios web como Threadles, Tumblr y Artsy, me viene a la cabeza que es perfectamente posible diseñar algo increíble para todo tipo de usuarios, y mantener al mismo tiempo felices a las terceras partes no visibles. 

¿Qué deberías tener recordar?

  • Entender tus distintos tipos de usuarios y encontrar el mejor equilibrio al diseñar para ellos: interfaz, branding, funcionalidad. No existe una sola solución perfecta, solo el mejor balance posible.
  • Compara las técnicas publicitarias de Facebook y Tumblr. Pregúntate cómo las decisiones de su diseño suponen una evidente diferencia para sus usuarios y anunciantes. ¿Qué es mejor para quién y por qué? ¿Qué puedes aprender de esto para tu próximo proyecto con anunciantes?
  • Los usuarios serán más activos si se sienten familiarizados con tu producto, esto lo puedes conseguir mostrando ejemplos personalizados, tal y como hacen Squarespace y #threadpics.
  • Las pequeñas pero inteligentes elecciones en el diseño pueden tener una gran influencia. Al mostrar la cantidad de horas jugadas en las opiniones de un videojuego en Steam es un buen ejemplo. ¿Sobre qué sienten curiosidad los usuarios u otras partes implicadas?  Proporciona lo que los usuarios consideran valioso, incluso aunque ellos mismos todavía no lo hayan descubierto.
  • No olvides que todo lo que crees es susceptible de mejoras basadas en la forma en la que los implicados interactúen con tu producto.
  • Explora, diseña, implementa. Repite el proceso de nuevo.
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.