La Usabilidad Y El Arte Del Diseño de Portfolio: Una Charla De Diseño De Toptal

View all articles

En este artículo, el diseñador freelance Darko Stanimirovic y el Editor Técnico de Toptal Kent Mundle hablan sobre el balance entre usabilidad, accesibilidad, y la experiencia única en un crítica del sitio web de Ro-Lu. Ro-Lu es un estudio de diseño de muebles, ambientación y paisajismo cuya práctica ha abarcado otras disciplinas. El estudio se identifica por tener una práctica amplia, abierta y exploratoria. Por ende, su portfolio tenía que reflejar su ideología.

Este proyecto desafió muchos supuestos de qué es un portfolio, además de lo que la experiencia de usuario podría ser en el espacio web. Sin embargo, muchos usuarios encuentran que las características experimentales comprometen seriamente a la usabilidad. ¿Está bien que los conceptos estén primero? ¿Qué podría enseñarle a otros diseñadores este sitio web sobre desafiar el status quo? O, ¿acaso el sitio ha ido muy lejos?

Kent Mundle (Editor Técnico de Toptal): Darko, ¿has visto algún diseño así alguna vez en la web?

Darko Stanimirovic (Diseñador Freelance de Toptal): Bueno, fui a la página sin ningún entendimiento real de la historia de este grupo de artistas, o del diseñador detrás del sitio. Así que pude verlo con ojos frescos, e inmediatamente, lo encontré muy interesante de forma visual, los colores y la estructura son geniales, pero desde el comienzo había nada para informarme exactamente de qué era el sitio web, o cómo interactuar con él. Y estaba menos inclinado a intentar aprender quiénes eran los artistas que el sitio representaba, en vez de entender cómo el sitio funciona y cómo comprenderlo.

Imagino que a muchos de los diseñadores que interactuaron con el sitio no les gustaría por su navegación, es poco claro en dónde estás, o hacia dónde debes ir. Pero, al mismo tiempo creo que comunica el estudio en una forma única, no puedes no verlo. Incluso si vienes al sitio con una intención específica para encontrar un proyecto en particular o la última exhibición, los artistas y el diseñador detrás del sitio parecen un poco indiferentes ante esas necesidades, y más interesados en la experiencia del sitio.

“Un diseño de portfolio interesante es concebido como un tipo de exhibición, en vez de un simple catálogo de trabajo.”

KM: ¿Es esta una calidad inherente del tipo de sitio (ser un portfolio de diseño) que le permite romper esas reglas?

DS: Muchas veces los portfolios de los artistas son hechos por diseñadores, en vez de alguien que se inclina más hacia la posición del desarrollo. Ocasionalmente, estos diseñadores no tienen idea de cómo ejecutar un producto, pero libera al diseñador para pensar sobre el proyecto en una forma diferente. Los portfolios diferentes, como este, son concebidos como un tipo de exhibición, en vez de un simple catálogo de trabajo.

Usualmente, un diseñador pregunta, “¿Cuál es la meta de tu sitio? ¿Dónde puedo recolectar emails? Etc.”, pero en vez de eso, el diseñador de portfolio se siente como que están siendo invitados a una exhibición para presentar trabajo conceptual. Por ende, el viewport de la pantalla será tratado como si fuera la pared de una exhibición o página estática en una revista o brochure, y el diseñador no piensa realmente sobre si el diseño es o no responsive o algo parecido.

Este sitio web tiene el sentido de que el diseño de un póster o exhibición en una pared fue aplicado a la interactividad de la interfaz web. Obviamente, el diseñador sabe de todas estas posibilidades que la web puede proveer, pero ellas fueron usadas dentro de la mentalidad de un diseño impreso. Por eso, quizás, tengamos este gran lienzo, con sólo un poco de ello revelado.

Es curioso, de todos modos, ver el proceso de este diseñador e intentar entender cómo combinaron los diferentes mundos de las tendencias del diseño gráfico con el web. Puedes ver cuán similar este sitio es a una tendencia del momento cuando fue diseñado, llamado contenido expuesto. Sin embargo, aunque este estilo gráfico fue algo moderno, cómo los diseñadores de Ro-Lu incorporaron algo de interactividad en una tendencia que es para diseño impreso es algo interesante.

“Aunque un espectador no entienda el trabajo de una exhibición, puede aún afectarle de otras formas que son valiosas.”

KM: ¿Cómo podemos exactamente mejorar la estructura de la navegación sin comprometer la intención del sitio?

DS: Siempre hay formas, creo, para hacer que el sitio sea más efectivo, pero no estoy seguro cuán interesados los diseñadores estuvieron en hacerlo obvio. Hay una actitud de los diseñadores tradicionales gráficos que dicen que no les interesan si los espectadores no pueden entender todo, porque es parte de la obra. Como con las exhibiciones en las galerías, muchas veces no hay guías que expliquen cómo consumir el trabajo expuesto. Incluso si un espectador no entiende el trabajo de una exhibición, puede aún afectarle de otras formas que son valiosas. Aún podrían volver a casa pensando sobre el trabajo sin necesariamente haberlo comprendido. Sin embargo, fuera de este contexto, para describir el formato, a continuación comentaré sobre unos arreglos que yo haría.

Primero, definitivamente comunicaría que esto es un gran lienzo, escritorio, o tablón con links. Cuando recién ingresas al sitio, piensas que todo inmediatamente es visible. Parece como si no hay otro lugar adónde ir.

Comunicaría que el usuario debería interactuar con este tablón a través del movimiento. Quizás, ni bien entra, puedes mover la página entera, sólo un poquito, y dejarla en su lugar. El usuario rápidamente podrá ver que se mueve pero también podrán hacerlo por sí mismos. O quizás los elementos individuales pueden ser identificados con un poco de movimiento. Tal vez una foto se mueve un poquito hacia un lado, un poco de texto para el otro, y se identifican como interactivos o movibles. Es difícil, sin embargo, decirlo sin prototipar.

El mismo problema con la opción de acercar o alejar la vista, es simplemente no tan obvio. Los botones están arriba a la izquierda, y aunque parece ser más común tener este tipo de navegación del lado derecho, de todos modos, los otros botones de texto están de alguna forma escondiendo los botones para hacer zoom. De alguna forma, la navegación del zoom necesita ser más prominente en cuanto a jerarquía se refiere o al menos que haya alguna pista de en dónde está. Dicho esto, no estoy siquiera seguro de cómo se utiliza el zoom. No mucho más se puede hacer una vez que haces zoom, sólo debes hacer eso mismo. Y también, con aleatoriedad del texto, no hay mucho incentivo para leerlo.

En cuanto a la navegación dentro de los mismos elementos y proyectos, hay un poco de necesidad de atención también. Siento como si es poco claro lo que se puede hacer una vez se está dentro del proyecto. Con una tablet o pantalla táctil, el cursor no puede indicar que la primer imagen puede ser clickeable para entrar a la siguiente fase.

Cuando finalmente estás dentro, las cuatro flechas de navegación son un poco confusas. La izquierda y derecha por sí solas parecen bastante directas, y proveen progresión lógica. Pero, añadiendo las de arriba y abajo compromete toda la estructura. El scroll izquierdo y derecho tienen sentido mientras progresas a través del proyecto, pero arriba y abajo y de repente, hay contenido importante escondido del cual no has recibido ningún tipo de indicación.

Usualmente, la idea del scroll a través de un eje implica que el mismo tipo de contenido está progresando. Pero aquí está la parte confusa: los elementos en toda dirección son tipos de contenido totalmente diferente, así que la lógica no es muy intuitiva. Por ende, quizá etiquetas podrían ayudar, pero sugeriría remover los ejes verticales completamente. Aunque el estudio puede haber requerido por esta forma simétrica específicamente, creo que una navegación lineal con links que continúen a lo largo en la parte de arriba y abajo para cada proyecto hubiese sido ideal. En términos de contenido, no hay mucho que cambiar en cuanto a presentación o estructura.

“Parte de este diseño es sobre jugar con las limitaciones.”

KM: Aunque el sitio no es obvio o intuitivo, ¿hay cualidades de redempcion que compensen la navegación?

DS: Como mencioné con las exhibiciones, los espectadores nunca son guiados a través del contenido. Los valores de esto probablemente no sean que Diseñadores UX usualmente apreciarían. Usualmente, no habría razón para hacer las cosas más difíciles para los usuarios. Pero, parte del trabajo de diseño es más sobre jugar con las limitaciones que su necesidad de crear un producto. Esto significa que el diseñador acepta que no todas las personas serán capaces de consumir el producto de forma apropiada. Sin embargo, eso resulta en que el producto se convierta más una pieza de arte que en otra cosa. La meta es algo más que “consumir toda la información, leer todo, tener la ventaja en ventas, etc.” Muchos diseñadores sólo podrán ver este sitio desde la angosta perspectiva de metas objetivas. Por otro lado, este diseñador ha creado un producto que deja una impresión sobre los artistas, sus valores, intenciones o estilos, en vez de sólamente presentarlos. En el contexto de muchos portfolios online de artistas, esto podría ser un esfuerzo significativamente efectivo.

KM: Entonces, ¿la cualidad única de esta experiencia puede garantizar inconvenientes en el experimento?

DS: Creo que el concepto de un lienzo suelto puede ser conservado y al mismo tiempo hacer que el sitio sea más usable. Para mejorar la usabilidad no necesariamente hay que caer en una estructura con bloques. Para mi, el problema principal es que el usuario está por sí solo en la aventura de descubrir el propósito del sitio web, pero de nuevo, el autor podría decir que esa es su intención. Hay un poco de fricción cuando uno intenta familiarizarse con el sitio, pero quizá esa es la calidad que justamente hace que el sitio sea tan único.

El problema aquí no es igual al de tendencias de diseño que hacen que el contenido sea mucho menos legible, como fuentes con poco peso sobre un fondo blanco, porque sus desafíos están entrelazados y son simultáneamente lo que hace que el sitio esté interesante.

KM: ¿Hay otras formas de organización, ordenadas y archivadas, que provean algún tipo de alivio en esta estructura navegacional?

DS: Aprecio la vista ordenada y archivada, no sólo por su propósito real, sino porque sirven y comunican la personalidad del estudio. Casi parece ser más para la diversión de los diseñadores o estudio. La “vista ordenada” es su intento de presentar una navegación más sencilla, pero está casi ofrecida como una alternativa ‘conceptual’, y aún así tiene sus propios desafíos. Aunque está en filas y columnas, aún tienes que hacer scroll y hacer zoom como con un lienzo grande.

Las etiquetas repetitivas también confunden la organización en grillas. Parecen ser títulos de proyectos efectivos, pero en realidad tendrías que pasar el puntero por arriba para ver ese título. Es realmente gracioso que distinguieron formatos como “ordenados” y “al azar”, cuando casi todo parecía ser más fácil al principio.

Los archivados, sin embargo, parecen ser los más simples, y bastante directos porque sólo se organizan por fechas. Aún así, no se conformaron con el scrolling tradicional. La intención parece ser el uso de limitaciones de la plataforma web para provocar que el usuario de alguna forma que podrían describir como frustrante, fea o rota.

“Típicamente, los diseñadores tienen la mentalidad que un buen sitio web debería darle a los clientes todo lo que necesitan saber en la primera página o primer scroll.”

KM: Si la intención de los diseñadores fue, de hecho, provocar a los usuarios de esa forma, ¿entonces alivia un poco el sitio de sus deficiencias?

DS: Creo que mucho de esto es intencional y que lo aleatorio no es, de hecho, tan aleatorio como una tendencia que ha sido popular durante un tiempo, llamado ‘contenido expuesto’. Pero aprecio que se apegaron a la estructura del scrolling, especialmente con la página de los archivos. El archivo puede resolver mucho de sus problemas para satisfacer las necesidades específicas de usuarios que vienen para mirar los nombres de exhibiciones específicas, o algún trabajo de un periodo particular. Sin embargo, esto podría no incluir a todos los tipos de usuarios. Típicamente, los diseñadores tienen la mentalidad que un buen sitio web debería darle a los clientes todo lo que necesitan saber en la primera página o primer scroll.

Muchas reglas cambian en términos de cómo un artista o marca pueden representarse cuando tienen un gran nombre. Así que este sitio realmente representa cómo ellos piensan sobre su trabajo, su práctica, y cómo piensan sobre representar todo eso, en vez de enfocarse en sólo presentarlo de la forma más eficiente.

Aún si vamos a su página de “sobre nosotros”, ellos incrustan elementos que parecen irrelevantes, como la vista previa de fotos en mitad de oraciones. Estos pedacitos, para la persona común, parecen redundantes o sin utilidad alguna, pero realmente muestra cómo el estudio toma cada oportunidad para mostrar su estilo, o quiénes son - y eso es lo que los artistas deberían hacer.

El sitio es un ejemplo de que un portfolio no tiene que dejar realmente que el trabajo hable por sí solo nada más, pero el hecho de cómo esté presentado también puede expresar sus valores individuales también.

Por ende, si este estudio hubiese hecho algo más conservativo, habría pasado desapercibido muy rápidamente en la web.

KM: ¿Cómo puede el contexto de un portfolio online, y sus inherentes usuarios, permitir o alentar los diferentes tipos de trabajo de diseño?

DS: Creo que con este tipo de website, una de las cosas más importantes que hay que entender como el diseñador es cuánto una persona sabrá sobre los artistas antes de llegar al sitio web. Si ya sabes algo sobre el trabajo del estudio, y terminas en un sitio así, puedes tener un poco más de paciencia para seguir la corriente. Sin embargo, puede que haya gente que no conozca a los artistas y se sientan confundidos, y probablemente se vayan luego de cinco segundos. Entonces, este es el tipo de sitio web donde haya gente que probablemente tenga un incentivo fuerte ya estar ahí. Por ende, hay un poco de amortiguación para la mala usabilidad. En otro tipo de negocios, podrían perder clientes.

Por esta razón los sitios de portfolio tienen un poco de libertad para ser divertidos e interesantes. Me recuerda a que si manejas a un área suburbana, habrá muchas tiendas. Muchas veces, todos los carteles y posters son hechos por lo dueños de dichas tiendas, personalmente. Entonces podrán ser divertidos, locos o estúpidos, y para mi puedes inmediatamente ver a la persona detrás del negocio en cada decisión hecha sobre ese cartel: el color, la tipografía, y cualquier añadido divertido. De todos modos, algunos artistas podrían pedir una plantilla de WordPress y eso es todo.

“¿Sacrificamos la usabilidad por originalidad o viceversa? ¿Cómo encontramos ese balance? Es una pregunta difícil.”

KM: Aunque mucho de lo que se está desafiando en este sitio web es específicamente al tipo de contenido en el portfolio, ¿hay alguna lección que se pueda aplicar al diseño web en general?

DS: El portfolio online es inherentemente más flexible en el hecho de que no siempre tiene que comunicar todo perfectamente. Pero este sitio web sí muestra que la experimentación en el diseño web es posible y es necesario. Este sitio web trasciende el diseño web desde lo que una captura de pantalla puede mostrar. Una captura de pantalla de este sitio se vería roto, o sin terminar, pero los usuarios pueden descubrirlo al abrir una experiencia interactiva. Muchos diseñadores web crearían un mock up en cosas que no son interactivas, y este sitio web sería imposible de concebir de esa forma. Por eso creo que es importante que analicemos qué es lo que este sitio web intenta hacer, en vez de evitarlo porque claramente no es fácil de ejecutar.

La web aún tiene sus limitaciones, pero muchas veces los diseñadores web las toman de forma estricta. Por ende, este sitio puede probar cómo comenzar a expandir esas posibilidades. No deberíamos dejar de lado que este portfolio le pertenece a un artista, donde un diseñador puede hacer lo que quiera. Deberíamos inspirarnos de este sitio, y quizás para nuestro siguiente proyecto, intentemos tomar las limitaciones de la ventana de vista que este diseñador ha desafiado y ha puesto en escena. Entonces, para los diseñadores que quieran explorar un precedente como este, podemos definitivamente desafiarnos a nosotros mismos para hacer algo único.

KM: Muchas veces, por supuesto, es difícil reinventar la rueda dentro de los límites del presupuesto y tiempos de trabajo

DS: Sí, muchas veces esas limitaciones fuerzan a los diseñadores a ir hacia lo que es seguro para hacer lo que ya está ahí afuera, lo que las personas están acostumbradas a ver. Esto nos lleva a una discusión más amplia en cuanto a la importancia de la originalidad del diseño web, y cómo entender esas ventajas o desventajas. ¿Sacrificamos usabilidad por originalidad o viceversa? ¿Cómo encontramos el balance? Es una pregunta difícil.

El sitio web de Ro-Lu fue diseñado por Dylan Fracareta y Eric Price. Fracareta tiene una práctica de diseño independiente, enfocándose en diseño para los sectores del arte, arquitectura, moda y cultura. Price es un diseñador gráfico y programador con un enfoque en medios digital, publicaciones, y diseños de identidad para los sectores de arte y cultura.

About the author

Darko Stanimirović, Serbia
member since August 7, 2015
Darko is a designer, hacker, and founder. He takes ideas and transforms them into smart, intuitive products in a way that maximizes learning for a company at any stage of growth. His expertise, using which he has built up a startup enterprise, is in UX/UI design, low- and hi-fi prototypes, and app analytics strategy. He has prototyped chatbots and NLP features. He uses Sketch, Framer, Axure, HTML/CSS, and React, among other technologies. [click to continue...]
Hiring? Meet the Top 10 Freelance Web Designers for Hire in November 2017

Comments

comments powered by Disqus
Subscribe
Free email updates
Get the latest content first.
No spam. Just great design posts.
Free email updates
Get the latest content first.
Thank you for subscribing!
Check your inbox to confirm subscription. You'll start receiving posts after you confirm.
Trending articles
Relevant Technologies
About the author
Darko Stanimirović
Designer
Darko is a designer, hacker, and founder. He takes ideas and transforms them into smart, intuitive products in a way that maximizes learning for a company at any stage of growth. His expertise, using which he has built up a startup enterprise, is in UX/UI design, low- and hi-fi prototypes, and app analytics strategy. He has prototyped chatbots and NLP features. He uses Sketch, Framer, Axure, HTML/CSS, and React, among other technologies.