Responsabilidades:

• Diseñar las interfaces de usuario y de interacción de webs y de aplicaciones
• Crear diseños centrados en el usuario, teniendo en cuenta los requisitos de los clientes y la usabilidad
• Definir la línea gráfica de los proyectos en los que participe la empresa
• Desarrollar esquemas conceptuales (wireframes), maquetas visuales, y prototipos
• Presentar el diseño a nuestros clientes
• Contribuir a la formación de diseño gráfico del grupo

 Requisitos: 

• Tener una filosofía de diseño de simplicidad
• Experiencia mínima de 1 año dedicados en exclusiva a diseño gráfico de interfaces
• Pasión por la usabilidad y por el diseño
• Conocimientos de arquitectura de la información, diseño centrado en usuarios y diseño de interacción.

Requisitos deseados:

• Conocimientos de maquetación HTML / CSS
• Conocer y tener sensibilidad por la accesibilidad

Condiciones:

• Trabajo presencial en nuestras oficinas de Sant Cugat del Vallès (Barcelona)
• Jornada laboral completa (ocho horas) o reducida (seis horas por la mañana)
• Salario a negociar, según experiencia

Si estás interesado, envía tu currículum vitae, portfolio, sitios web, blog personal... a trabajo@usolab.com, indicando en el asunto "Diseñador de Interacción".

TrackBack (0) | 3 comentarios

gustavo soto miño ( 6 Mar 2010 a las 12:15 AM)

Se lee interesante. A quien se envía CV? Saludos

( 8 Mar 2010 a las 10:01 AM)

¿En qué provincia?

Daniel ( 8 Mar 2010 a las 10:28 AM)

Podéis enviar el CV a trabajo@usolab.com. El trabajo es presencial, en nuestras oficinas de Sant Cugat del Vallès (provincia Barcelona).

Pese a la creencia común de considerar que los visitantes ya saben de qué va tu sitio web, nos parece imprescindible contar lo que haces (consideremos a Tuenti un caso a parte). El texto, sin embargo, no parece el recurso más adecuado para hacerlo, pues ya sabemos que la gente no lee. Entonces ¿qué alternativas hay?

Tenemos algunas ideas:

Mostrar los contenidos/productos

La forma más sencilla de mostrar qué ofreces o vendes es sacarlo del almacén y colocarlo en el escaparate. Por ejemplo, ¿a qué se dedica el sitio web japonés Orihime?

Sólo viendo su página de inicio el usuario ya se hace una idea: parece que venden bolsos/fundas de portátiles para chicas.

Enseñar fragmentos de la interfaz

En ocasiones el objetivo del sitio web no es ofrecer información o algo tangible susceptible de ser mostrado en la página de inicio. Si se trata de una aplicación o un servicio, presentar una o varias capturas de la propia interfaz puede contribuir a entender de qué se trata. Es el caso de UserHeat:

Mostrar la interfaz para comunicar los resultados de los análisis que realizan es su mejor herramienta de venta: de un vistazo el visitante entiende que UserHeat hace “mapas de calor” de sitios web. Sin entender el texto ya nos podemos hacer una idea de por dónde van los tiros.

Usar diagramas e ilustraciones

Si la interfaz no es suficiente y el producto no es tangible, a veces un diagrama o ilustración puede contribuir a entender un concepto. Otro ejemplo japonés: maysee.jp.

El logo del sitio web utiliza elementos culturales japoneses, como es la forma en que se entregan y sujetan las tarjetas de visita, para dar una primera pista. Una vez identificado el tema del sitio, las tarjetas, los diagramas cobran sentido: con maysee.jp el usuario pasará de tener sus tarjetas de visita amontonadas a tenerlas organizadas en una aplicación web.

Incluir vídeos

El vídeo permite integrar varios de los conceptos anteriores en un único elemento. ¿La contrapartida? El usuario debe querer invertir parte de su tiempo, por lo que es esencial que sean cortos e interesantes. Por ejemplo, al entrar en Cacoo no han sabido plasmar de forma estática qué hacen y sólo sabemos que tienen una aplicación, pero ¿de qué?

Con unos segundos de vídeo se ve la aplicación funcionando y se entiende que se trata de una herramienta de diagramación.

Escribir para la web

Y si todo lo anterior no funciona y se debe recurrir al texto, no todo está perdido, tenemos algunas otras ideas sobre cómo escribir para la web.

TrackBack (0) | 3 comentarios

Marcos Kramer ( 4 Mar 2010 a las 1:02 AM)

Debemos ir en esa dirección, contar lo que hace tu portal de una forma gráfica. Pero en el ejemplo que has puesto de picotea, ¿como lo contarías de una manera gráfica?. No es un escaparate ni vende productos. No le veo muchas alternativas gráficas para contarlo. Me he metido en la web y he visto que en una de las pestañas de inicio tienen un video. ¿Sería la solución poner ese video en la primera?

Dani ( 5 Mar 2010 a las 9:30 AM)

Marcos: El vídeo actual es demasiado largo. Lo ideal sería ofrecer una página de inicio más minimalista, en línea al concepto de microblogging, explicando de forma más breve y visual de qué va y en qué consiste. Sería también interesante mover los contenidos de la pestaña “¿Quiénes picotean?” a esta página inicial, para dar cierta sensación de dinamismo (siempre y cuando haya suficientes usuarios registrados, para no ser contraproducente).

Martin (12 Mar 2010 a las 5:40 AM)

Muy acertado el detalle de elegir webs en japones...al menos para mi fue una especie de lorem ipsum ;)

He conocido muchos diseñadores a los que las restricciones propias de cualquier proyecto (tiempo, tecnología, presupuesto, objetivos de negocio, contexto de uso, etc.) les incomodaban o veían como amenaza o limitaciones a sus propuestas visuales, a su trabajo.

Nosotros, además, añadimos otros requerimientos menos habituales que tampoco suelen gustar a algunos diseñadores: pedimos que las interfaces sean “usables”, que respondan a las necesidades de los usuarios, que sigan las convenciones, a la vez que ser agradables, originales y creativas.

Pero son las restricciones, por ejemplo, las normas de sintaxis visual y las conveniciones establecidas las que permiten que el diseño sea comunicación, sea resolución de problemas. El diseño depende en gran medida de las limitaciones, de las convenciones asumidas e inconscientes. Además, venciendo las resistencias es como vamos construyendo las cosas, es como somos creativos.

Recuerda la famosa paloma de Kant:

“La ligera paloma, que siente la resistencia del aire que surca al volar libremente, podría imaginarse que volaría mucho mejor aún en un espacio vacío”.

Es precisamente el aire el que le permite a la paloma vencer esa resistencia y volar. Son las restricciones lo que favorece y posibilita la creación al diseñador.

Este puede soñar con la absoluta libertad, con un mundo sin limitaciones, pero eso, si fuera posible, sería arte, no diseño.

Las restricciones son un desafío que fuerza y estimula a crear, a generar propuestas que superen las limitaciones, a resolver y superar esos problemas.

Acepta los desafíos, supera las limitaciones (aunque sean de usabilidad), que diría Kant.

TrackBack (0) | 10 comentarios

José Vittone (18 Feb 2010 a las 2:23 PM)

¡Muy bueno! Absolutamente de acuerdo. ¿Qué sería de nosotros (los diseñadores) sin problemas que resolver?

jordisan (18 Feb 2010 a las 2:53 PM)

Y los expertos en usabilidad somos los perros perdigueros que se comen a las palomas que no vuelan bien :P

Jordi - Asterisk bcn (18 Feb 2010 a las 3:36 PM)

No pasa lo mismo cuando hablamos de accesibilidad web, no tenemos que verla como una barrera para el diseño, sino como una puerta para miles de usuarios que verán e interactuarán con nuestra web de forma diferente.

Huidobro (18 Feb 2010 a las 5:12 PM)

Que grande este post. Y sobre todo que tuyo Armando :)

alex (18 Feb 2010 a las 11:53 PM)

BUfff me da un poco de pereza el post. Yo soy diseñador y creo que pocos diseñadores conocéis… o eso espero , un buen diseñado se crece ante las limitaciones. "requerimientos menos habituales" no se si son menos habituales cuando generas una interface nueva tienes o debes pensar como se interactua con ella. Si no piensas en eso te puedes dedicar a pintar cuadros. soy de los que pienso que el diseño soluciona un problema y la interacción con la maquina es una de las características que tienes cuando te enfrentas al problema de diseñar una interface. Vamos que la usabilidad es un elemento más como la ergonomia lo es al diseño industrial, es un elemento que debemos conocer y aprender. Cuando decís que cumplan las convenciones… aquí discrepo por que en mi curro trabajo codo con codo con vosotros. y las convenciones suelen salir de un libro De mi "amigo" jakob nielsen y yo creo que las cosas evolucionan. Hay que conocer las reglas pero hay que aprender de ellas y probar a veces cosas nuevas. Eso no quiere decir que el proceso lógico es testera el cmabio y si no cumple con los objetivos iniciales… Pues a cambiar otra vez. Pero hay que romper las convenciones para añadir emotividad a las interfaces. Igual que lo tienen las marcas, los anuncios. El hombre es emocional y las interficies tienes que desprender emociones. No queremos estar siglos con links azules sobre fondo blanco. Eso no quiere decir que si tengo una funcionalidad la ponga aunque nadie la use, y que ponga un botón sino es necesario y no aporta nada. Tengo una teoría sobre el proceso en el que estamos, hasta hace poco valía todo, ahora debemos unir especialidades como diseño y usabilidad para aportar valor añadido a empresas. VIVA KANT y creo que el problema es que todavía hay diseñadores que quieren ser artistas y artistas que quieren ser diseñadores.

disfrutamallorca (20 Feb 2010 a las 9:25 AM)

Debo decir que soy novato en el tema del diseño, aunque me apasiona, por eso leo y releo tus posts, me parecen de gran ayuda. He visitado la web de O2, supongo que esta puesta como buena paloma. ¿Podrías sugerir otras webs como “buenas palomas”? es bueno poder aprender de algo bien hecho. Gracias

disfrutamallorca (20 Feb 2010 a las 9:27 AM)

Perdón en mi comentario anterior, me refería a “Palomas ligeras”, no ha buenas palomas

Carola Clavo (22 Feb 2010 a las 12:02 PM)

Eso de lo que hablas, no son diseñadores, se hacen pasar por tales, y me da pena leer que alguien los llama así. Precisamente los trabajos más fáciles son los que tienen trabas y cortapisas, porque el diseño es una forma de comunicar resolviendo los problemas de cada momento. El diseño es comunicación y funcionalidad, y todo lo demás es estética o arte, que es otra cosa. Me da pena que los llames diseñadores, porque se devalúa nuestra profesión, se crea confusión y ya tenemos bastante de las dos cosas. ;-) (lo digo con cariño y humor). Un saludo.

disfrutamallorca ( 5 Mar 2010 a las 4:19 PM)

Por favor, seria posible algunas webs como ejemplos de "Palomas ligeras". GRACIAS

catalina (11 Mar 2010 a las 8:58 AM)

A mí tambien me gustaria algún ejemplo de web a seguir ... bonita, sencilla y usable

Google, con el objetivo de facilitar a los usuarios el uso del Google Buzz, decidió ocultar el acceso a las opciones de privacidad. Esto simplificaba la interfaz, pero también obviaba un principio básico de usabilidad: ofrecer visiblemente el estado del sistema. ¿Qué seguidores tengo? ¿Quién ve lo que estoy publicando? ¿Quién tiene acceso a mi correo electrónico? Todas estas preguntas, directamente relacionadas con el servicio, no tenían respuesta en la interfaz que planteó inicialmente Google.

Las quejas de los usuarios no se hicieron esperar, y dos días más tarde Google añadía, entre otras cosas, una pantalla inicial preguntando si se quería compartir públicamente la lista de seguidores.

No fue suficiente, así que 48 horas después Google añadió otra nueva pantalla mostrando la lista de los usuarios que se añaden automáticamente como seguidores e invitando al usuario a eliminar los no deseados.

Está claro que la privacidad no es una cuestión fácil: cuánto más complejo es el servicio, y esto también lo sabe bien Facebook, más complicada es la interfaz para gestionarla. Algunos usuarios, ante la incapacidad de entender cómo funcionan estas interfaces de gestión, deciden desentenderse y olvidarse, pero otros, preocupados por su privacidad, deciden darse de baja del servicio en lugar de lidiar con oscuras interfaces que no les dan la seguridad y sensación de control que exigen.

En los años venideros puede que la privacidad en las redes sociales tome la importancia que hasta ahora no ha tenido. En ese caso auguramos mucho trabajo para los diseñadores de interfaces.

TrackBack (0) | 0 comentarios

TrackBack (0) | 4 comentarios

joaquin nunez ( 9 Feb 2010 a las 7:31 PM)

"good programmers appreciate the features you put in. expert programmers appreciate the features you left out." http://twitter.com/KentBeck/status/8637230540

disfrutamallorca (14 Feb 2010 a las 12:56 PM)

Muy interesante el post, ¿seria posible saber para que web se realiz´´o la inferface? Gracias

Elena (15 Feb 2010 a las 12:20 AM)

Sería buenisimo que pusieran una opcion para compartir los articulos en las redes sociales (facebook, twitter) :)

Dani Armengol (15 Feb 2010 a las 10:29 AM)

@disfrutamallorca No era ningún sitio web, era una aplicación de escritorio. @Elena Hemos añadido un apañillo temporal para hacerlo.

TrackBack (0) | 6 comentarios

Ergow (31 Ene 2010 a las 3:08 PM)

A grandes rasgos es decir, a nivel cualitativo, se puede entender que un diseño recargado, estridente, etc. va a molestar y saturar la experiencia de usuario. La cuestión que me planteo es de qué forma podemos cuantificar esto a nivel de laboratorio realizando una medición directa sobre el usuario: electroencefalogramas, dilatación pupilar, etc. Es decir qué es lo más recomendable y lo último para trabajar en es campo. Saludos

torresburriel ( 1 Feb 2010 a las 11:13 PM)

Me gusta leer este tipo de posts y reflexiones de vez en cuando. Mucho. Enhorabuena.

David ( 1 Feb 2010 a las 11:21 PM)

Interesante artículo que nos viene a decir que hay mantener una estructura de navegación fija y basada en patrones (nivel cognitivo inferior) en la que se destaquen uno o dos elementos simultáneamente (nivel cognitivo superior). Avanzando en la dirección que plantea Ergow, quizás la unión del recorrido visual (Eye Tracking) junto con los gestos de la cara del usuario pudieran decirnos algo sobre los niveles cognitivos. Sacadas rápidas con fijaciones cortas significarían estímulos secundarios y sacadas cortas con fijaciones intensas significarían estímulos para el nivel superior. Gracias!

Sergio ( 4 Feb 2010 a las 10:54 AM)

Genial la reflexion sensei, como siempre. Por cierto echadle un ojo al último artículo de Juan C. Dürsteler: Visión Activa, creo que se complementa perfectamente con lo que comentas. Explica con gran detalle los mecanismos que actúan en el proceso cognitivo de la visión. Un abrazo.

Francisco (15 Feb 2010 a las 9:36 AM)

Estupendo post ¡uno se queda con ganas de más! :-) Enhorabuena

Laura (17 Feb 2010 a las 6:40 PM)

Genial :) Gracias por compartirlo

TrackBack (0) | 0 comentarios

Al pulsar el botón aparece un mensaje de error. Empezamos a leer “Por favor seleccione el hipermercado…”.

Encima del mensaje de error vemos que hay seleccionada la opción “Híper Alcampo” que nos parece correcta, así que pulsamos de nuevo “Empezar a comprar” y nos aparece el mismo error.

Esta vez prestamos más atención y abrimos el desplegable y seleccionamos “Alcalá de Henares”. Vemos otro campo a la derecha y tecleamos el código postal “28803” de Alcalá. Pulsamos en “Empezar a compra” y nos aparece otro error.

Por el texto del error parece que debemos seleccionar de alguna forma el modo de entrega. Analizamos en detenimiento la página y por fin lo entendemos: para seleccionar “Recoger en tu hiper” se debe dejar el campo “Código postal” vacio. Para seleccionar “Entrega a domicilio” se debe dejar en el desplegable la opción “Hiper Alcampo” (que, de hecho, no es ninguna opción, se trata de una invitación a seleccionar).

El aspecto de publicidad del módulo no es la forma más adecuada de presentar el acceso a la compra y parece claro que visualmente se podrían distinguir mucho mejor las dos opciones de entrada, contribuyendo así a que el usuario entendiera qué debe hacer.

Creemos que Alcampo deberá intentarlo por cuarta vez.

TrackBack (0) | 3 comentarios

Luis Villa (26 Ene 2010 a las 1:14 PM)

El problema es la falta de jerarquía y mancha verde con elementos de formulario dentro y el botón. A manchar un interfaz con pegotes de colores y fotos le llamarán "diseño" y tan contentos. En ecommerce está todo inventado y tienen multitud de ejemplos en los que inspirarse. Cero ornamento, blanquito y sin distracciones hasta que el cliente esté dentro del supermercado. Tiene toda la pinta de ser un proyecto liderado por tecnología ¿No pueden aprender de la gente de los hipermercados sobre el comportamiento de los clientes? Lo mejor, la frase de cierre. :)

Rubén (26 Ene 2010 a las 2:55 PM)

Pues dentro ya de la tienda no mejora. Si Luis Villa habla de cero ornamento, dentro tenémos incluso un banner enorme, molesto y que hace perder el foco al usuario, ya no he seguido.

Carlos ( 7 Feb 2010 a las 1:32 PM)

De hecho, si eligen esa forma de entrar, eligiendo entre dos opciones (llenar uno u otro campo de un formulario), podrían haber elegido javascript como primer método de comprobación, mucho más rápido que enviar una petición al servidor (que nunca sobra, por si hay alguien malicioso que se lo quiere saltar). En fin, como habéis dicho, ¡a por la cuarta!

Google afirma que su objetivo es eliminar distracciones a los usuarios que sólo quieren utilizar el buscador. Para ello sitúa el foco del teclado en la caja de búsqueda, de forma que no sea necesario para el usuario mover el ratón.

Sin embargo, la mayoría de la gente acostumbra a mover el ratón, de forma accidental o para situarse en la caja de búsqueda, como hemos visto en test con usuarios a lo largo de los años.

La aparición de los enlaces, como todo elemento en movimiento, llama la atención y puede acabar creando el efecto contrario al deseado, distraer.

Si se trata de no distraer a los usuarios del objetivo central de la página, que es buscar, ¿por qué no se baja a la parte inferior de la pantalla el “pie”, es decir, los enlaces “programas de publicidad”, “sobre Google”…, que es lo que realmente genera ruido, ya que el menú de opciones ("imágenes”, “vídeos”…) al estar situados fuera del foco de visión no molestan? o, ¿por qué no eliminar el botón ”I’m Feeling Lucky”, utilizado sólo por el 1% de las búsquedas, según el mismo Google?

¿Google está focalizando o distrayendo los usuarios? ¿O es que el objetivo de Google es focalizar, pero no en el buscador, sino en los otros servicios?

TrackBack (0) | 9 comentarios

(18 Dic 2009 a las 2:20 AM)

Go!rss

manoloruiz (18 Dic 2009 a las 11:07 AM)

Lo mismo pensé cuando vi el efecto por primera vez. Muy cool cierto, pero al final hace que te fijes más en los vínculos superiores.

Francisco (19 Dic 2009 a las 2:36 PM)

Muy buena apreciación y totalmente de acuerdo contigo Dani en cuanto al efecto de cinestesia que se produce cuando se desplaza el ratón y aparecen los enlaces superiores. Interesante lo que planteas de situarlos abajo pero habría que ver porque eso supondría que cuando el usuario se logase y entrase en cualquier servicio como por ejemplo Gmail, deberían por coherencia figurar abajo. En este caso ¿interesa más ponerlos abajo o tal y como es el patrón estándar hasta ahora en la Web, arriba? Otra solución podría ser ponerlos en una capa flotante estrecha (con el mismo alto en píxeles que ocupa ahora) en la parte inferior de la página exactamente de la misma forma que hace CNET bajo la que fuera desapareciendo el contenido a medida que el usuario hiciera scroll. Esta solución no me convence ya que lo convierte en un punto focal muy fuerte de atención al ser el lugar donde naturalmente se dirige nuestra atención visual y se centra nuestro locus de atención a medida que realizamos scroll vertical para mostrar más contenido oculto de la página. Es un elemento estático que interfiere directamente con la visión y distrae mucho. En cuanto al botón de "I'm feeling lucky" la justificación que dan para mantenerlo es por cuestión de marca, marketing y diseño emocional. La única concesión que se hace a ello en la home lo que lleva a plantearse si Google sería lo mismo sin ese botón.

torresburriel (21 Dic 2009 a las 12:27 PM)

Me quedo con la última parte del post. Google ahora quiere focalizar en los servicios, una vez que el usuario ya sabe que Google sirve para buscar, y que lo hace bien.

Acoutin (21 Dic 2009 a las 12:37 PM)

Buena observación ;-) pienso como torresburriel, el uso de mapas por ejemplo lo están tratando de promocionar más y asi otros servicios de la empresa

Dani (22 Dic 2009 a las 9:11 AM)

Hola Francisco, Los enlaces a servicios de la parte superior creemos que apenas distraen por quedar muy fuera del foco, pero los enlaces de debajo ("Advertising Programs - Business Solutions - About Google - Go to Google.com") resultan mucho más visibles. Si el objetivo de Google fuera focalizar más el buscador se podrían separar de la caja de búsqueda, bajándolos. un saludo

willowman ( 2 Ene 2010 a las 8:48 PM)

Hola! para mi distrae muchisimo, es mas se torna un poco molesto tener que mover el mouse para que aparezcan los enlaces. Fue el peor movimiento que hizo google en su interfaz.

Daniel (16 Ene 2010 a las 6:36 PM)

como se llama ese efecto lo quiero implementar en mi pagina web

aerolobito ( 6 Feb 2010 a las 4:43 AM)

no me gusta... antes de este efecto la pagina de google ya era lo suficientemente minimalista y atractiva como para añadirle un atractivo, q no ha gustado a muchos, ademas los q somos fans d ClearType nos asqueamos al ver los enlaces 'faded'.. alos win9x

• Diseñar las interfaces de usuario y de interacción de webs y de aplicaciones
• Crear diseños centrados en el usuario, teniendo en cuenta los requisitos de los clientes y la usabilidad
• Definir la línea gráfica de los proyectos en los que participe la empresa
• Desarrollar esquemas conceptuales
• (wireframes), maquetas visuales, y prototipos
• Presentar el diseño a nuestros clientes
• Contribuir a la formación de diseño gráfico del grupo

Requisitos:

• Experiencia mínima de 1 año dedicados en exclusiva a diseño gráfico de interfaces
• Pasión por la usabilidad y por el diseño.
• Conocimientos de arquitectura de la información, diseño centrado en usuarios y diseño de interacción.
• Participar de la filosofía del diseño de la sencillez o simplicidad
• Persona proactiva y dinámica, con ganas de aprender.

Requisitos deseados:

• Conocer y tener sensibilidad por la accesibilidad
• Conocimientos de maquetación HTML / CSS.

Condiciones:

• Jornada laboral: seis horas por la mañana
• Salario a negociar, según experiencia

Si estás interesados, envía tu currículum vitae, portfolio, sitios web, blog personal... a trabajo@usolab.com, indicando en el asunto "Diseñador de Interacción".

TrackBack (0) | 2 comentarios

Ariel Fuentes (19 Dic 2009 a las 3:10 PM)

Queria saber si les puedo enviar mi CV puestoque vivo en Argentina. Soy graduado como Analista en Diseño Multimedia y Docente de Usabilidad y Diseño Centrado en el usuario. Gracias

Dani (22 Dic 2009 a las 9:22 AM)

Hola Ariel, Ya hemos cubierto este puesto de trabajo, aunque siempre estamos abiertos a recibir CVs interesantes. En cualquier caso, el puesto era presencial en Sant Cugat del Vallès (en Barcelona). un saludo

TrackBack (0) | 3 comentarios

Sergio ( 2 Dic 2009 a las 11:40 AM)

Necesidad, desafío y recompensa para el usuario; capacidad de información, orientación y retroalimentación del sistema.Al igual que en las relaciones humanas, la capacidad de seducción de un sistema se basa en el confort. Cuando la confianza se desarrolla, una persona puede tener muchos deseos de avanzar en la relación, pero sin la confianza es muy difícil que se llegue lejos.Un post genial Dani.

Pedro (14 Dic 2009 a las 1:08 PM)

La palabra recompensa es un poco exagerada no?

Dani (22 Dic 2009 a las 9:24 AM)

Hola Pedro, Quizá estímulo hubiera sido más apropiado. La idea es ofrecer feedback, retroalimentación. un saludo

Este es el caso del sitio web de la Universidad Libre de Bruselas que, tal y como se muestra en la imagen, cuenta con una distinción de los primeros niveles de información a través de colores que de entrada parece muy orientativa para empezar a navegar, pero a medida que se accede a páginas de segundos y terceros niveles el color de la sección se pierde completamente y ni siquiera se marca en el elemento de navegación global dónde se encuentra el usuario. Así que el color aplicado parece haber sido habilitado completamente de forma gratuita o decorativa.

Un buen ejemplo de sitio web que impregna todas sus páginas de contenido con el color de la sección a la que pertenecen es el caso del diario inglés, The Guardian.

En este caso el color ayuda claramente a decirnos dónde estamos y a recordar si ya hemos estado en ese contenido o es nuestra primera vez ahí, sin ni siquiera haber leído. Un diseño consistente en el uso del color sumado a la capacidad natural que tenemos para percibirlo, hace que en muchos espacios web estemos ayudando a agilizar la navegación del usuario y contribuyendo a crear una experiencia más satisfactoria.

TrackBack (0) | 2 comentarios

Francisco ( 5 Dic 2009 a las 7:51 PM)

Curioso el experimento que han hecho y curiosos los resultados. Sinceramente esperaba que las diferencias fueran más llamativas y a favor del site en color. Aun así, algunas cosas que me gustaría saber cómo las han hecho y que creo que metodológicamente deberían tener en cuenta en cuanto a este experimento concreto: ¿Qué tipo de conversión han hecho de la versión en color a la de blanco y negro? ¿Qué luminancia han aplicado a los colores? ¿Qué tipo de pantallas han utilizado? ¿Los tests se han hecho en las mismas pantallas unos después de otros o simultáneamente en dos grupos de pantallas diferentes? ¿Cuáles eran las condiciones de iluminación en las que se han hecho? ¿Tenían luz natural o no? Cuando se trata de colores todas estas cuestiones impactan y en algunos casos de manera significativa. Opinión personal desde mi experiencia y lo que he leído últimamente sobre el tema: Desde un punto de vista psicológico y físico, el color es un elemento esencial que impacta directamente en la usabilidad de un web y parte crítica de la Experiencia de Usuario de un site. Curiosos los aspectos que han medido: orientación, navegación y recuerdo e, indirectamente y aunque no parece haber sido el objeto principal del estudio, el impacto emocional. En cualquier caso y a pesar de los resultados que ciertamente, insisto me sorprenden ya que hubiera esperado mayores diferencias creo que el color es un aspecto esencial que hay que manejar, conocer y tener en cuenta a la hora de diseñar. Al menos es conveniente que el Arquitecto de Información conozca los principios básicos de la percepción visual humana y de la Teoría del Color. El tema es realmente fascinante y mucho mucho más complejo de lo que pueda parecer a priori. Acabo de terminar de hacer un estudio de colores para el rediseño de una cartografía. Si tengo tiempo publicaré más adelante un post sobre el color y su impacto en la usabilidad.

Francisco ( 5 Dic 2009 a las 7:57 PM)

ah! y sí, en mi opinión personal (subjetiva que no empírica) sí, el color es claramente y ciertamente importante para mejorar la Experiencia de Usuario en un site.

TrackBack (0) | 4 comentarios

Buron ( 1 Nov 2009 a las 8:24 AM)

Daniel, me gusto mucho el curso. Me ha ayudado a cambiar mi forma de enfocar los problemas de diseño. Los ejemplos que dais son muy ilustrativos. Pero efectivamente es demasiado intenso. Al final tienes la sensación de que necesitas digerir todo duante un tiempo. De todas formas enhorabuena.

Fer ( 1 Nov 2009 a las 8:28 AM)

Amigos de Usolab, os animo a que deis un curso en varias sesiones, por ejemplo: una tarde a la semana durante 3 o 4 meses..esto seria superefectivo (creo)

Asier ( 5 Nov 2009 a las 1:45 PM)

Estaría bien ampliar los cursos a diferentes ciudades, y no sólo Madrid y Barcelona. Sería una buena forma de difundir estos conceptos.

Edgar Granados (10 Nov 2009 a las 12:52 AM)

Felicidades por el curso, me encanto y volvería a repetirlo. A mi en cambio no me pareció intensivo, estaría muchas más horas!! Saludos, y hasta la próxima.

Damos tanta importancia a todos estos elementos y ayudamos tanto al usuario a llegar a la página que busca, que a veces nos olvidamos de los contenidos de la misma.

Por ejemplo en un sitio web de una famosa cadena de hoteles encontramos la siguiente descripción de un hotel:

Situado en el distrito residencial moderno y encantador de Diagonal Mar, a 5 minutos a pie de la playa, del nuevo Centro de Convenciones de Barcelona (CCIB), y del Centro Comercial Diagonal Mar con diferentes tiendas de moda, restauración, ocio, música. La famosa calle de las Ramblas está a tan solo 15 minutos con transporte público.

Este texto no es práctico para, de un vistazo, obtener información sobre la situación del hotel. ¿Cómo se podría mejorar? En una primera revisión parece adecuado destacar aquellos elementos más importantes dándoles peso visual. También es aconsejable cambiar algo el tono del texto, haciéndolo más informativo y recortando apreciaciones subjetivas como “encantador” que pueden dificultar la lectura:

Situado en el distrito residencial de Diagonal Mar, a 5 minutos a pie de la playa, del nuevo Centro de Convenciones de Barcelona ( CCIB), y del Centro Comercial Diagonal Mar con tiendas de moda, restauración, ocio, música. La famosa calle de las Ramblas está a tan solo 15 minutos con transporte público.

Ha mejorado algo, pero sigue siendo un párrafo poco atractivo. Quedaría muchísimo mejor si le diéramos un formato más visual mediante listas y títulos:

Situación

Distrito residencial Diagonal Mar.

A 5 minutos a pie de: 

• Playa 
• Centro de Convenciones de Barcelona (CCIB) 
• Centro Comercial Diagonal Mar (tiendas de moda, restauración, ocio, música…)

A 15 minutos en trasporte público de la famosa calle las Ramblas.

En este punto el texto es más atrayente, claro y bien estructurado que el inicial y no se ha perdido nada de información. Para hacer este contenido aún más atractivo se podría acompañar de imágenes del exterior del hotel y su alrededores.

En el curso de diseño de interacción web y usabilidad que vamos a dar en Barcelona y Madrid hablaremos, entre otras cosas, de cómo escribir para la web y trabajaremos ejercicios como este.

TrackBack (0) | 4 comentarios

torresburriel (10 Nov 2009 a las 12:23 AM)

Podría decirse que en el caso del que se habla en el ejemplo no se ha bajado al nivel de las descripciones del hotel esa máxima de que el usuario no lee sino que escanea. Desde mi experiencia es un problema bastante común que el diseño se quede en el framework del site, y no se baje hasta los copys.

Goio Telletxea (10 Nov 2009 a las 12:38 AM)

Realmente cuando la arquitectura de la información o el diseño de un sitio cobran valor es cuando bajamos hasta el nivel más ínfimo. Cuando la desmenuzamos, la limpiamos y la preparamos para una buena digestión. Desde lo global al detalle. Mientras no se baje por pereza siempre acabaremos echando en falta (como usuarios) la falta de formateo de texto (pilar básico de cualquier sitio bien diseñado), la carencia a la hora de deglutir toda esa información. Ahorrar milisegundos de escaneado es ahorrar esfuerzo, y por tanto, comodidad y experiencia de usuario agradable. Me alegra leer este artículo. Es algo que hecho en falta en muchos sitio que vemos. :)

ANGEL A (19 Ene 2010 a las 4:34 PM)

NO TENGO NADA QUE COMENTAR

disfrutamallorca (14 Feb 2010 a las 1:02 PM)

Voy a usar este post como libro de cabecera, muy bueno y util.

 El diseño de sus botones hace que llame más la atención que su propio contenido. El abuso de redondeces, sombras y contrastes, brillos, degradados, etc., es decir, de elementos “embellecedores” lo convierten en un adorno, más que en un elemento de interacción. Su formato decorativo hace que destaque de una forma exagerada y distraiga del contenido que pretende transmitir. Además, su diseño hace que el mero formato del botón ocupe demasiado espacio, reduciendo el tamaño y legibilidad del texto.

El abuso de elementos superfluos y el ruido visual provoca en los usuarios una sensación de complejidad, de dificultad, y exige un mayor esfuerzo perceptivo.

Es conveniente transmitir cómo utilizar los botones, mostrar de forma clara que se ha de pulsar en ellos. Para lo que deben tener aspecto de botón, pero sin exagerar, equilibrando la forma y la función. Se ha de utilizar la eficiencia visual en el diseño, es decir, usar el mínimo número de elementos visuales y funcionales posibles para transmitir el mensaje a comunicar.

Reducir el ruido visual al mínimo y utilizar con generosidad el espacio en blanco facilita la comunicación de los mensajes u objetivos que se desean transmitir.

De este y otros temas hablaremos en nuestro Curso de diseño de interacción web y usabilidad

TrackBack (0) | 0 comentarios