• Saltar a la navegación principal
  • Saltar al contenido principal

Sebastián Thüer

Comunicación, diseño y tecnología

  • Acerca
  • Blog
  • Contacto
  • Show Search
Hide Search

Diseño Web

La crisis de la complejidad, cuando la simplicidad es la solución

Sebastián Thüer · 02.04.2013 ·

Fotografía: Complexity 1, por Michael Heiss (CC)
Fotografía: Complexity 1, por Michael Heiss (CC)

En un día típico tenemos varios momentos en que nos sentimos frustrados y confundidos por la complejidad. Nuestra vida esta llena de objetos tecnológicos que no podemos usar, instrucciones que no podemos seguir y  planillas que no podemos descifrar. Un GPS, la etiqueta de un medicamento o un formulario de declaración de impuestos: elementos que solían ser simples se han vuelto increíblemente intrincados y difíciles de comprender.

Así comienza When Simplicity Is the Solution, el excelente artículo escrito por Alan Siegel e Irene Etzkorn para The Wall Street Journal donde relatan como la complejidad lo ha invadido todo. Aun nuestros tiempos de entretenimientos y recreación.

La web Sephora.com ofrece 1.992 fragancias, 436 lociones y 135 máscaras diferentes. Buscar una aplicación para el iPhone puede ser una odisea en un App Store que va camino al millón de aplicaciones (800.000 actualmente). Y hasta un comerciante que quiera vender con tarjeta de crédito debe leerse un contrato de 20.000 palabras cuando en 1980 no se extendía más allá de las 400.

El problema no se circunscribe solamente a la tecnología. Las leyes, las regulaciones gubernamentales y las prácticas comerciales abusivas que se esconden detrás de la letra pequeña también tienen mucho que ver con esto. Y también las compañías, para quienes resulta mucho más fácil ir agregando parches, notas al pie, excepciones y cláusulas a su información que reescribirla desde cero para hacerla más comprensible.

Ponerse en el lugar del otro

La clave para vencer esta complejidad pasa por la empatía. Esta palabra siempre de moda en el mundo de la comunicación supone asumir la perspectiva del otro como la nuestra y comprender la importancia de la experiencia a la hora de usar un producto o servicio.

A la hora de tratar un paciente, por ejemplo, no se trata solo de prestarle atención médica. Así lo hicieron en Cleveland Clinic donde realizaron un profundo trabajo para comprender como los olores, los sonidos, el saludo, la programación de turnos y hasta la disposición del personal de seguridad afecta las emociones del paciente. Así desarrollaron protocolos y normas que van desde los tiempos que tienen las enfermeras para responder a los pacientes -y en qué momentos deben establecer contacto visual – hasta el lenguaje que deben usar los médicos para comunicarse con los enfermos.

Empatía en el diseño

Desde esta perspectiva, el trabajo del diseñador es básicamente generar empatía. Intervenir en el proceso de desarrollo de un producto o servicio para hacer su uso más fácil, más simple y más agradable. Sin embargo, hay muchos ejemplos de cómo no se han las cosas bien.

Los prospectos de medicamentos son todo un tema. Generalmente, las personas buscan 2 o 3 datos sencillos y concretos: cuál es la droga y su efecto, cómo debe tomarse y qué efectos secundarios podría haber. Pero para hallar esta información hay que bucear en un texto lleno de tecnicismos y con tipografía minúscula.

Ni que hablar de la web, donde si nos detuviéramos a leer los términos y condiciones de cada sitio, la política de privacidad de cada página donde hay que ingresar datos y las licencias de los software que utilizamos harían de la navegación una experiencia tortuosa.

Quien lo parece haber entendido perfectamente es Google. Su página principal sigue siendo una simple y despojada ventana donde el logo de la empresa y la caja de búsqueda ocupa los lugares centrales. No todos los sitios pueden seguir este modelo, claro está, pero quizás sí su filosofía: mantener el diseño tan simple como sea posible.

Cómo combinar tipografías

Sebastián Thüer · 27.03.2013 ·

El uso de tipografías en la web ha crecido mucho a partir de las posibilidades que brindan CSS3 y HTML5 para salirnos de las fuentes por defecto que incluyen los diferentes sistemas operativos. Sin embargo, mientras el repertorio tipográfico era acotado no había muchas posibilidades de error a la hora de combinar distintos tipos. Hoy, las posibilidades de crear mezclas de estética dudosa es una realidad.

standbuy

¿Cómo elegir una buena combinación de tipografías? Carrie Cousins ha escrito un interesante artículo donde da varias pistas. 

  • Buscar familias tipográficas que sean lo suficientemente diferentes como para distinguirse pero, a la vez, que no tan disímiles como para transmitir sensaciones contradictorias.  Además, hay que mantener el número de tipografías a combinar tan bajo como sea posible. En general, no más de 2 o 3 familias por cada sitio web.
  • Contrastar el uso de las tipografías. Además de la familia, variar el tamaño y el color para que la diferencia sea realmente apreciable y se produzca el contraste deseado. Lo más habitual es distinguir entre la tipografía para títulos y para textos de corrido.
  • No hay que olvidar que le principio central que guía el uso de tipografías es garantizar la legibilidad. Si utilizamos alguna tipografía más compleja o difícil de interpretar, debe ser usado para frases cortas y palabras no muy extensas.
  • Considerar el eje x, es decir, la distancia que hay entre el extremo inferior y el superior de la letra x. Al utilizar familias tipografías donde el alto de la x sea similar crea una sensación de harmonía y balance.
  • Las tipografías con características similares tienden a combinar mejor entre sí. Aquellas que tienen un ancho y grosor promedio, se combinan sin demasiados problemas. En cambio, aquellas tipografías con trazos muy gordos no se integran bien con las de trazos muy delgado (y viceversa).
  • Hay tipografías más bien neutrales y otras que expresan sensaciones muy concretas. De su correcta elección depende el estilo que imprimirán al proyecto. Los tipos neutrales se pueden combinar con otros más definidos para darle más personalidad a un trabajo. Pero si se usan varias familias tipográficas estas deben expresar sensaciones similares. 

Si este pequeño resumen te pareció interesante quizás deberías leer el texto completo donde se desarrollan más estas ideas:  Mixing Typefaces: Tips and Techniques

Cream UI Pack Free, elementos de interfaz de usuarios para sitos web

Sebastián Thüer · 11.03.2013 ·

Cream UI Pack

Los UI packs son un recurso cada ves más utilizados en el diseño web. Básicamente, consisten en un conjunto de elementos de interfaz con un mismo look & feel para ser utilizado en la composición de diferentes pantallas.

En este caso, el diseñador ruso Sergey Azovsky ha creado un buen pack gratuito que incluye botones en diferentes estados, flechas, barras de progreso y navegación, calificaciones, formulario de login, calendario, reproductor de video y varias cosas más.  Cream UI Pack se puede descargar gratuitamente del sitio del autor y, por ser gratuito, es bastante completo.

[tf_button link=»http://flexrs.me/media/files/cream_ui_pack_free.zip»]Descargar Cream UI Pack Free[/tf_button]

 

 

Un vistazo al nuevo Facebook: En busca del orden perdido

Sebastián Thüer · 08.03.2013 ·

http://youtu.be/_PW54Sm99ck

«Estamos anunciando una nueva versión de Facebook diseñado para reducir el desorden y centrarse más en las historias de las personas que te importan». Con estas palabras comienza el comunicado oficial de la red social para presentar un importante rediseño con el foco puesto en una presentación más visual de los contenidos.

Con un promedio de 229 contactos por cada usuario, 7 nuevos amigos por mes y un 80% de invitaciones que son aceptadas (ver infografía) se hace cada vez más difícil organizar todo este flujo de información. Por eso, Marck Zuckerberg dijo claramente cuál es el nuevo desafío: crear el «mejor periódico personalizado del mundo». 

La nueva propuesta incluye un diseño visual renovado que jerarquiza el contenido multimedia y permite aplicar filtros. Por ejemplo, escoger entre ver fotos, ver música, ver lo que hacen nuestros amigos o las actualizaciones de las páginas públicas que seguimos. Y todo esto sería algo así: 

Imágenes más grandes y contenido multimedia jerarquizado.
Imágenes más grandes y contenido multimedia jerarquizado.

Más visual

A nivel de diseño el cambio fundamental de Facebook tiene que ver con limpiar su interfaz de usuario para permitir un mayor desarrollo de imágenes y videos. Esto es, dar al usuario una experiencia más inmersiva donde  lo central no sean los botones y opciones del propio Facebook sino la información de amigos, páginas y -también hay que decirlo- la publicidad.

Antes y después. El mismo anuncio en el Facebook actual (izquierda) y el nuevo (derecha).
Antes y después. El mismo anuncio en el Facebook actual (izquierda) y el nuevo (derecha).

Justamente, una de las principales críticas de este rediseño tienen que ver con que parece atiende más las necesidades de publicistas y anunciantes que de los usuarios. Si bien la renovación visual cae muy bien, lo cierto es que ahora la publicidad no pasa tan desapercibida como ahora -en general, relegada a una columna en la derecha- sino que se incluye en el propio flujo informativo del usuario.

Selectivo. El nuevo Facebook permite filtrar por tipo de contenidos.
Selectivo. El nuevo Facebook permite filtrar por tipo de contenidos.

Pero el rediseño trae un arma de doble filo para los especialistas en marketing: la posibilidad de filtrar las actualizaciones de páginas. Es decir, si el usuario filtra el contenido para ver solo la información de páginas públicas su pantalla de llenará de actualizaciones y avisos de productos, servicios o artistas. Pero también tiene la opción de ver solo la información publicada por amigos con lo cual toda la información de páginas de empresas será silenciada.

Experiencia consistente

Experiencia consistente a través de diferentes plataformas.
Computadora, tablet o móvil. Todo el mundo verá un mismo Facebook.

Un importante eje del rediseño de Facebook tiene que ver con ofrecer una experiencia de usuario consistente a través de diferentes dispositivos. Es decir, ver más o menos el mismo sitio en una computadora de escritorio, en el teléfono móvil o en una tablet. Hoy, la experiencia en cada uno de ellos es sensiblemente diferente.

Esta búsqueda de un mismo diseño a través de las diferentes plataformas toma como base la experiencia móvil. La propuesta de los diseñadores es un Facebook no solo más visual sino que también den ganas de tocar para realizar acciones de forma sencilla. El Facebook de escritorio con menús y botones está condenado al olvido.

Algo de este se cuenta en este interesante video que muestra las ideas y conceptos básicos que se pensaron para encarar el rediseño de la red social más extendida del mundo.

http://www.youtube.com/watch?feature=player_embedded&v=YaQQHYQHnMk#!

La nueva interface será liberada de forma gradual  para analizar los datos que recojan de la interacción con la plataforma, analizar las reacciones y hacer ajustes sobre la marcha.  

Ahora, la palabra la tienen los usuarios.

Opera abandona Presto y se suma a WebKit

Sebastián Thüer · 14.02.2013 ·

Si los navegadores web fuesen un automóvil, el motor de renderizado sería su propulsor. Esta vital pieza de software se encarga de interactuar con el servidor web para recuperar los archivos, dibujar la página web en pantalla y gestionar la descarga de archivos y plugins. En pocas palabras, el corazón de un navegador.

Por eso tiene relevancia que Opera haya anunciado que deja Presto, el motor de renderización que desarrolló por 18 años, para pasarse al software de código abierto WebKit. 

Actualmente WebKit es utilizado por Safari y Google Chrome. Internet Explorer usa su propio motor llamado Trident, mientras que Firefox emplea Gecko que fue desarrollado teniendo en mente el soporte de estándares libres.

Si bien Opera tiene una cuota de participación muy baja a nivel mundial entre los navegadores es el responsable de muchos de las principales innovaciones que vemos hoy: navegación por pestañas, mouse gestures y uso de ventanas en la página inicial. Además, fue uno de los primeros en vislumbrar el que futuro de la navegación estaba en los dispositivos móviles y hacia allí concentraron sus esfuerzos hace tiempo.

La decisión de Opera tiene que ver justamente con concentrarse en estos aspectos y dejar de invertir tiempo en su propio motor de renderiza, según señala Bruce Lawson,  miembro del Developer Relations Team de Opera, en una interesante entrevista. 

Además de estos cambios visibles para el gran público, Opera también es responsable de muchas tecnologías que hoy utilizan los desarrolladores de sitios web como media queries, soporte para html5 y soporte de video nativo sin necesidad de plugins.

¿Qué significa en la práctica este cambio para los diseñadores y desarrolladores web? En principio, nada si se ha programado siguiendo los estándares web aunque conviene tener en cuenta dos cuestiones:

  1. Las nuevas versiones mantendrán el soporte nativo para reproducir formatos WebM, Ogg Theora y Ogg Vorbis media pero no H.264 o MP3 que deben estar presentes como códecs en el sistema operativo.
  2. El objeto windows.opera no existirá más. Por lo tanto, no es un método aconsejable para detectar el tipo de navegador y se propone sustituir esta técnica por otras más extendidas como Modernizr o hand-rolling.

Además, hay que tener el cuenta que el prefijo -0 que se utiliza en CSS también va a desaparecer.

  • « Ir a la página anterior
  • Página 1
  • Páginas intermedias omitidas …
  • Página 6
  • Página 7
  • Página 8
  • Página 9
  • Página 10
  • Páginas intermedias omitidas …
  • Página 38
  • Ir a la página siguiente »

Sebastián Thüer

Creative Commons Atribución 4.0 Internacional © 2025 · Less Is More · Acceder