Fecha y lugar: 8 de mayo de 2008 de 18:30 a 21:30

Bar Mirablau C/ Manuel Arnús, 2, al final Avenida Tibidabo Barcelona

El aforo del lugar esta limitado a 60 personas, así que os agradeceríamos que os registraseis en el formulario de la página del encuentro.

La creación y gestión de la identidad corporativa, es uno de los elementos más importantes, para las empresas, a la hora de presentarse en el mercado y ser capaces de demostrar una diferenciación clara en su oferta de servicios o productos.

En este curso se mostrará con claridad el proceso de creación de una marca (los pasos que debemos dar antes y durante el proceso para conseguir optimizar los resultados del trabajo) y la gestión para que el diseño elaborado se manifieste con claridad y homogeneidad a lo largo de nuestra organización.

Además, se tratará el tema del packaging ya que es uno de los campos donde la identidad visual cobra especial protagonismo a la hora de materializar las ventas.

Día: 3 de junio de 2008 Horario: 10 a 14 h. y de 15,30 a 18,30 h. Lugar de realización: NH Hotel Balboa. C/ Núñez de Balboa, 112. 28006 Madrid. Precio: 495 euros. El precio incluye: La asistencia a la jornada, coffe break, comida en el hotel, parking gratuito para asistentes (según disponibilidad de plazas), material de trabajo y documentación.

Descargar PDF del curso. En este PDF se detalla todo lo relacionado con el curso e incluye la ficha de inscripción.

Objetivos del curso

El curso pretende dotar a los asistentes de las nociones básicas del branding y su gestión para que la creación de una nueva identidad o el desarrollo de la actual identidad corporativa sea más consistente, clara y sencilla, evitando los problemas de gestión e interpretación típicos del branding.

Además se realizarán casos prácticos con los pasos a seguir a la hora de crear una identidad, desarrollo del manual de identidad corporativa, como crear un portal de marca y ejemplos de gestión de la identidad corporativa. En el caso del packaging se muestran casos prácticos de creación y desarrollo de la identidad en productos y cómo gestionar un portafolio de marcas.

Ponentes de curso

César Martín Ha trabajado en todos los campos de la identidad corporativa, desde la producción de vídeos corporativos a la creación de marcas. Trabajando para clientes de ámbito nacional ha sido capaz de poner en práctica toda la teoría aprendida a lo largo de más de 10 años de experiencia profesional en los principales estudios de diseño.

Justina Sanchís Ha desarrollado su carrera profesional en los principales estudios de diseño trabajando para clientes como Auna, NH y Carrefour. Su trabajo en el campo del Packaging ha sido premiado y reconocido en todos los ámbitos profesionales.

Todo sobre Branding.

El objetivo del Workshop es proporcionar una base teórica y práctica para el desarrollo de interfaces de usuarios. La estructura modular del workshop permite que los asistentes se inscriban únicamente en las sesiones que más les interesen.

La principal novedad respecto a cursos anteriores de Miquel Nieto y César Martín, es la participación del equipo de Panoramio.com (Google): Eduardo Manchón hablará de interfaces para la generación de comunidades on-line y de José Florido impartirá una sesión sobre tagging y sistemas de navegación.

9 Junio 2008- Análisis de experto - Miquel Nieto

Es la técnica por excelencia del experto en usabilidad, permite detectar problemas y proponer soluciones desde un planteamiento basado en los estándares del diseño de interacción. En la primera mitad del día se abordará la teoría sobre evaluación heurística y los principios de usabilidad. La segunda mitad será práctica: con asesoramiento del docente, cada participante realizará un informe de experto de un sitio web real.

El profesor propondrá un caso concreto de análisis, pero si el alumno lo prefiere podrá escoger otra web. Al final del día se comentarán los resultados y se entregará un informe heurístico del caso propuesto, para que le sirva de ejemplo.

10 Junio 2008 - Test de usuarios y agrupación de tarjetas - Miquel Nieto

La primera parte del día se dedicará al test de usuarios. Inicialmente se tratará la metodología del test de usuarios a partir de la cual los participantes, en grupos, diseñarán tareas y escenarios de uso que posteriormente pondrán a prueba en test con usuarios reales especialmente seleccionados. Finalmente cada grupo expondrá sus conclusiones.

El profesor propondrá un caso concreto para evaluar, pero si el alumno lo prefiere podrá escoger otra web (la suya, por ejemplo). Al final del día se entregará un informe de ejemplo del test de usuario para el caso propuesto, para que le sirva de guía. En la segunda parte del día se realizará un ejercicio práctico de Agrupación de Tarjetas (Card Sorting).

11 Marzo 2008 - Prototipado I: Metodología de personajes y escenarios - Miquel Nieto

Se abordarán las técnicas para crear soluciones de diseño de interfaz para posteriormente en el ejercicio práctico crear desde 0 un prototipo de interfaz. Este día está especialmente indicado para quienes ya han realizado anteriormente el "Curso Especializado en Metodologías de Usabilidad" o han asistido a los dos días anteriores del curso centrados en evaluación por expertos (heurística), test de usuarios y card sorting.

El profesor propondrá un caso concreto para hacer el prototipado, pero si el alumno lo prefiere podrá escoger otro. Al final del día siguiente se comentarán los resultados y se entregará un prototipo de ejemplo del caso propuesto, para que le sirva de guía.

12 Junio 2008 - Prototipado II: Ejercicios prácticos de prototipado - Miquel Nieto

Sesión completamente práctica de creación de prototipos de acuerdo a los personajes y escenarios del día anterior (es necesario asistir a la primera parte).

13 Junio 2008 - Tagging y sistemas de navegación - José Florido

El uso de tags y metadatos creados por los usuarios para ordenar y describir contenidos online se ha extendido en la web 2.0. Pero no todo son ventajas, los tags presentan limitaciones que a menudo son olvidadas o menospreciadas.

El objetivo de este curso es aprender a diseñar un sistema de tagging que permita aprovechar la inteligencia colectiva para mejorar la recuperación de información y explorar la relación entre tagging y sistemas de navegación y búsqueda tradicionales.

14 Junio 2008 - Interfaces para la generación de comunidades on-line - Eduardo Manchón

Generar comunidad implica crear un ecosistema donde la gente interactue y se sienta motivada a contribuir.

Una comunidad no se crea simplemente con funcionalidades participativas, ni es dependiente de la tecnología, su base es la creación de una dinámica interna propia. Por esta razón tanto el enfoque inicial como la evolución en el diseño de la interfaz marcan la diferencia entre el éxito y el fracaso del proyecto. En este curso y a través de ejemplos de comunidades online existentes se ilustrarán los aspectos críticos en el diseño de interfaz de comunidades on-line.

16 Junio 2008 - Contenidos y posicionamiento en buscadores - César Martín

Las herramientas más utilizadas para encontrar información en Internet son los buscadores Google, Yahoo y MSN.

Estos buscadores concentran millones de visitas de usuarios que han decidido buscar la información que necesitan utilizando sus herramientas en lugar de acudir directamente a sites especializados. De hecho, reciben el 30% de las visitas en general y hasta el 80% de las nuevas visitas. Esta nueva relación de los usuarios con Internet ha hecho que si tu página web no aparece en un buscador sencillamente no existes.

Este curso proporciona las herramientas y técnicas esenciales para que nuestra página web consiga una correcta presencia en los buscador más populares. Las herramientas y técnicas se basan en 4 ejes:

1. Optimización del código de la página 2. Cómo crear contenido 3. Cómo ser populares 4. Cómo aparecer arriba, arriba

17 Junio 2008 - Diseño visual - César Martín

El objetivo del curso es dotar a diseñadores y profesionales del sector con una visión del diseño visual orientada al desarrollo de páginas web, con el fin de ayudar a los usuarios a entender mejor el contenido y las acciones a realizar.

19 Junio 2008 - Usabilidad en móviles y terminales táctiles - Miquel Nieto

A través de casos reales, test de usuarios y ejercicios prácticos se entrará en el mundo de la usabilidad y diseño de interfaces de usuarios para teléfonos móviles y terminales táctiles. Este curso está especialmente dirigido a quienes trabajan en el desarrollo de interfaces para estos dispositivos y a quienes tras realizar nuestro curso introductorio anterior desean profundizar en el tema.

Más información: programa detallado y precios

El fundamento de la web es una base de datos de pescados y mariscos.

Esta base de datos, si se compara con wikipedia, es muy humilde, pero hemos creado un interface en el que creemos aportar más claridad y facilitar la comprensión.

Aquí se puede comparar la ficha de la Sardina de Wikipedia con la que ofrece Pescaderías Coruñesas.

El objetivo no es competir contra wikipedia, eso está claro, pero la idea era ofrecer una mejor experiencia de uso que la wikipedia en el tema de los pescados.

En Pescaderías Coruñesas, al centrarnos en el tema de los pescados, hemos podido definir a medida las fichas, su contenido y formato, consiguiendo más claridad y ayudando a que los usuarios comprendan mejor la información gracias al formato.

Las fichas de pescados y mariscos se completan con muchos temas relacionados, pero el que merece la pena destacarse son las preparaciones del pescado. Más de 1.000 fotos para explicar paso a paso las diferentes preparaciones de los pescados. Cortes, aperturas, limpieza.

Gran Cocina

Gran Cocina fue la sección creada para recetas de restaurantes basadas en Pescado y Marisco. Esta sección desde el inicio hasta el final fue cambiando según los contenidos llegaban. En el inicio era un planteamiento bastante modesto ya que la respuesta de los restaurantes era desconocida.

Con total humildad, el recetario que presenta Pescaderías Coruñesas, es uno de los más elegantes visualmente que he visto. Seguramente no sea el más extenso, pero la demostración de calidad es clara.

Una de las ventajas de las webs corporativas es la ausencia de publicidad. Cuando dispones de todo el espacio de pantalla para los contenidos se pueden hacer cosas muy agradables de cara al usuario. Esta ventaja es un lujo para las webs corporativas que deberían huir de los conceptos de "destacados", "banners" o "promociones". En internet, donde el denominador común es la publicidad masiva, las webs corporativas, podrían ser un oasis de contenidos libres de publicidad.

Todo lo demás

La sección de historía de Pescaderías Coruñesas, sus restaurantes, el servicio que se ofrece a los hosteleros... todo lo que se supone que ha de tener una web corporativa está.

Pero los dos apartados de Pescados y Mariscos y Gran Cocina, creo que marcan la diferencia entre las webs de empresa "presenciales" y aquellas que sienten una pasión por su trabajo.

La dedicación, la preocupación y exigencia demostrada por Pescaderías Coruñesas en su web y el nivel de detalle requerido, demostraban una preocupación real porque su contenido fuera claro, didáctico y aportase un valor a los usuarios. En ningún caso se demostró "capricho" o requerimientos faltos de valor de cara al usuario final. Todo lo requerido era para ser más claros, lógicos, consistentes.

En definitiva, con un buen cliente se puede desarrollar buenos productos.

¿Y el buscador?

La solución adoptada para el buscador del site ha sido la de Google. El problema que tiene este buscador es que tira de la misma base de datos que Google tiene y por tanto hasta que el site no está indexado, no merece la pena utilizarlo ya que no da resultados.

En breve, cuando el site esté correctamente indexado, podremos habilitar el buscador para un manejo más sencillo del site.

Sogecable, Mediapro, Audiovisual sport, TV3, etc... La guerra del fútbol lleva abierta desde que laSexta entró en juego. No vamos a hablar de bueno o malos. Sencillamente hablamos del poco amparo de la justicia a las empresas.

Se supone que estas empresas han pagado importantes cantidades de dinero por esos derechos. Cientos de millones de euros en derechos, publicidad, patrocinios, están en juego. Pero aquí la sensación que tenemos es que cada uno hace lo que quiere y puede.

¿Cúal es el problema de las guerras?

Cualquier guerra siempre es un problema. Básicamente lo que ocurre es que se destruye la industria que existe alrededor del fútbol. Los patrocinadores, los espectadores, los anunciantes, no saben que va a pasar con sus anuncios. No saben si el dinero que han invertido en publicidad será respetado o no, no saben si planificar o no una campaña en torno a estos eventos deportivos.

Si esto se debilita, los derechos bajan de precio porque nadie querrá meterse en esta guerra y el dinero se moverá a pastos más tranquilos (UEFA).

Y la justicia ¿qué hace?

Lo peor de todo esto no son las guerras. Las empresas compiten y a veces se llegan a circunstancias como esta del fútbol. Pero la solución debería venir de la justicia que para esto y para eso la pagamos entre todos.

La justicia debería actuar con agilidad básicamente para dar estabilidad a este tipo de industrias. Si el mensaje que se da semana tras semana es que esto es una guerra abierta y aquí, se firme lo que se firme, luego cada uno hace lo que quiere, las empresas pueden entrar en círculos peligrosos de enfrentamientos entre ellas.

Los derechos, los contratos, se supone que sirven para algo

Si en todo esto del fútbol, que se supone que hay dinero y abogados, los contratos sirven para casi nada, ¿qué puede pensar una empresa pequeña que esté pensando en apostar por la innovación?.

Pues que lo mejor es irse de este país o vender las ideas cuanto antes porque aquí no hay nadie que te pueda proteger.

La innovación, esa gran apuesta

Esta claro que países medianos como España, que no son ni grandes ni pequeños, o se definen por algo innovador o acaban siendo un país de servicios que ya sabemos que peligros tiene (llega, otro país similar, bajo los precios y se lleva el negocio).

Las claves para que se desarrolle cierta innovación, además de dinero, son dos.

1. Legislación. Si los innovadores no están protegidos, no tienen nada. Básicamente los innovadores tienen ideas, proyectos, planos. Que pueden ser copiados con facilidad. Su única herramienta de defensa es la legalidad. Si eso no es ágil. Si no responde con rapidez, es imposible desarrollar nada. Una vez, hablando con un amigo, comentaba que en este país tenemos Zara y no Armani por algo.
2. Competencia. Sin competencia no hay innovación. Para fomentar la competencia hay que hacer transparente los procesos. No hay nada mejor que internet para poner luz a las sombras de la administración. Hacer público el dinero destinado a la innovación y hacer públicos los procesos de adjudicación. Esta apertura y transparencia se podría enfocar por el lado más didáctico de la comunicación y hacer algo que ayude a las empresas a promocionarse y difundir sus desarrollos.

Volvamos a la realidad

Después de soñar, volvemos a la realidad de nuestro país y nos encontramos con más de lo mismo. La justicia colapsada. Falta de competencia y transparencia.

Lo primero es uno de esos retos que parecen casi imposibles de solucionar. No se si el problema de la justicia es de dinero o de tecnología o de recursos humanos. Pero lo que creo que sería necesario es empezar por algún lado. Estos problemas gigantes hay que resolverlos rompíendolos en trozos pequeños y luego ir uno a uno.

No es fácil, pero el ejemplo de las guerras del fútbol ponen de manifiesto que la justicia en este país no apoya a nadie y que su colapso hace que los emprendedores se vean con muchas debilidades frente a los grandes y eso ámparo legal mínimo que sirva para proteger unos derechos, es necesario.

El proyecto de UnosAficionados.com nacio de la nada. Una idea. Organizar la información sobre deportes de una forma más clara y lógica. Un proyecto muy modesto, humilde y con la pretensión de aprender y poner en práctica algunas ideas.

Como concepto base tenemos el siguiente planteamiento.

- Hacer un digg de noticias de fútbol. El código utilizado es el Pligg que es la versión en inglés de Meneame. La estructura de Pligg está totalmente optimizada para buscadores y es muy fácil de utilizar y configurar.

- Hacer un blog de fútbol. - Hacer una wikipedia de fútbol.

Esta idea nace de la base de: - Existen herramientas open source muy potentes y que al usuario le gusta. - Unir estas herramientas bajo un "tema vertical".

El concepto es simple y claro y basamos todo nuestro crecimiento en el posicionamiento en buscadores.

Lo primero que está posicionado son las camisetas de equipos de fútbol

Una vez publicada la web, lo primero que vimos que se posicionaba con claridad eran las camisetas de los equipos de futbol. La camiseta del Real Madrid, la del Sevilla, eran contenidos muy demandados.

Lo siguiente, Ronaldinho, Kaka, Casillas

Después de las camisetas llegaron los jugadores. Ronaldinho sigue siendo el jugador más buscado. Luego viene Kaka, y luego Casillas. Bojan es otro jugador muy demandado, pero a cierta distancia.

Para nuestra sorpresa, estamos junto a Marca

La sorpresa ha sido ver como en las búsquedas de "calendario liga española" (término que nos da un par de miles de visitas al día) estamos codo con codo con Marca.com.

Si buscas en google.es Calendario de Liga Española, el calendario de UnosAficionados.com sale el segundo.

Si buscas en google.com Calendario de liga Española, el Calendario de UnosAficionados.com sale el primero.

Esta claro que es una búsqueda de las miles que se producen en internet y que es un caso particular de una web particular.

Pero el caso es poner de manifiesto que una persona sola, sin más recursos que software libre y su tiempo personal, puede luchar codo con codo frente a organizaciones con más recursos.

Internet nos pone a todos por igual y es el usuario el que manda. Da igual que seas una gran marca, o una pequeña marca. Si te apoyas en el usuario, podrás competir en igualdad con otras grandes marcas.

Autor, Phil Baines / Andrew Haslam Ediciones G. Gili, SA de CV

El diseño de la forma del tipo y la tipografía están encaminados a transmitir un mensaje. Este último aspecto coloca a la tipografía en una disciplina más amplia, la del diseño gráfico. La cuestión de como usar la tipografía para transmitir un mensaje puedes subdividirse en dos. La primera parte se ocupa del aspecto o estilo de la tipografía, mientras que en otras, su papel es dominante, reflejando la inspiración del diseñador. La segunda parte se refiere a los aspectos prácticos del trabajo tipográfico como legibilidad, escala y formato.

Tipografía del siglo XX

Autor, Lewis Blanckwell Editorial Gustavo Gili, SA

El suministro de control e información tipográficos a una comunidad mucho más amplia está configurando inevitablemente una transformación de la sensibilidad tipográfica. Las modas y los cambios tecnólogicos sólo son una parte del telón de fondo. Lo que convierte a la tipografía en algo fascinante. La tipografía revela una serie de factores personales, políticos y económicos, además de progresos cientifícos. Es un manual para incitar a la investigación, un instrumento para sondear ideas del pasado y del presente.

Thinking with Type

Autora, Ellen Lupton Editor, Mark Lamter, Princeton Architectural Press

En este libro se muestran ejemplos de usos de tipografía. Basicamente se muestra como se puede resolver cualquier comunicación empleando unicamente tipografía.

Stop Stealing Sheep & find out how type works

Autor, Erik Spiekermann & E.M Ginger Second Edition Published by Peachpit Press

Envisioning Information

Autor, Edward R. Tufte Published by Graphics Press

Tufte seguramente sea uno de los diseñadores más influyentes. Su obra es esencial.

Visual Explantions

Autor, Edward R. Tufte Published by Graphics Press

Reinventing the Wheel

Autora, Jessica Helfand A Winterhouse Edition

Este libro es una curiosidad. Recopilan cientos de ejemplos de "ruedas" en las que el usuario puede aprender cosas a través de la combinación de posiciones. Por ejemplo, seleccionando un tipo de animal, la rueda muestra sus características principales. Muy curioso.

Air Made Visible

Autor, Bruno Munari Edited by Claude Lichtenstein and Alfredo W. Haberli

El genial Bruno Munari en estado puro. Su obra analizado en profundidad. El trabajo de Bruno Munari es mágico.

Typography

Autor, W. Weingart Lars Muller Publishers

Este libro es una joya de la tipografía. Muy abstracto y teoríco, pero te ayuda a pensar, componer, empezar de cero y experimentar. Muy recomendable. Yo lo compré hace tiempo y es un libro de estos que puedes consultar de vez en cuando para refrescar ideas.

Tellmewhy

Autor, Clare Jacobson Published by Pricenton Architectural Press

Genial biografía de un estudio de diseño muy joven. Sus vivencias, experiencias, trabajos, crisis y mucho humor. Su trabajo no es especialmente brillante, pero la forma en la que lo cuentan y su humor hace que sea un libro muy recomendable para regalar a cualquier diseñador/a.

Este fue otro caso del curso de diseño. La portada del BBVA. La verdad es que me esparaba algo flojo, pero no tanto. Lo que presenta el BBVA en internet es un insulto al usuario.

Le he puesto un botón naranja a los enlaces que abren pop-up con un flash muy bonito, o te lanzan un pdf o te mandan a otra web.

En la portada se promocionan diferentes conceptos como "SEPA", cajeros y oficinas y un concurso de ideas para mejorar la web. :)

Sinceramente la portada de BBVA demuestra tan poco nivel que uno no sabe muy bien como interpretar el concepto de "plataforma tecnológica" que está impulsando el BBVA.

No eres capaz de organizar la portada de una web y quieres lanzar un cohete

En los cursos que damos, por lo general comentamos que la portada de una web pone en evidencia al equipo que hay detrás. La filosofía de la empresa. Sus valores.

La portada de una web suele ser el reflejo fiel de la empresa que hay detrás. Si hay miedos, si hay seguridad, si hay conocimiento y dominio del medio, si no lo hay, si hay una sensibilidad por el diseño y por el buen gusto o si no lo hay... todas esas circunstancias de una empresa, suelen quedar claramente reflejadas en las portadas de las webs de las empresas.

Rediseñando el BBVA

En el curso, hicimos algunos ejercicios sobre la web del BBVA.

Lo primero fue medir la portada.

Portada actual del BBVA

La portada mide 809 pixels. Nada más y nada menos. Ni se ajusta a un monitos de 800 ni optimiza el espacio para un monitor de 1024. Está claro que detrás de esta portada hay muchas dudas.

Lo primero que hicimos fue ordenar y organizar la cabecera.

Portada BBVA - rediseño de la cabecera

Nos cargamos el banner de la cabecera. De verdad. A estas alturas tener un banner cuando todo lo que hay en la portada son banners, no tiene sentido.

El bloque de acceso del usuario lo organizamos y optimizamos.

Portada BBVA - rediseño del bloque de login

Intentamos componer los textos de la portada en base a un retícula.

Portada actual del BBVA - Textos destacados

Control y seguridad es algo que tiene que verse

Que una web parezca segura, dotar al usuario del control de la misma, no solo pasa por temas de usabilidad. El contenido puede ayudar mucho. Dar un formato homogéneo a los bloques de texto ayudará a transmitir a los usuarios esos valores.

Portada BBVA con retícula

Está claro que en la web podemos meter "todo" y que no hay límites. Pero no debemos perder las formas y ofrecer un estilo algo más claro y definido a los usuarios sobre todo en las páginas como las portadas de los sites.

Las páginas de contenido del BBVA

Sobre las páginas de contenido del BBVA se podría decir mucho, pero hemos preferido plasmarlo en dos imágenes.

Antes - Estilo panel de control Windows 95

Posible - Alto y claro

No se puede llegar al punto de "volcar" los textos a la web. Los textos se deben leer antes de volcarlos. Eliminar redundacias, eliminar aquellas cosas que no aportan, reducir y concretar para que al final el aspecto de la página sea interesante para su lectura. Si lo ponemos todo sin controlar lo que ponemos, el efecto que se consigue es de rechazo directo. Nadie se va a leer ese texto. Efectivamente, si está mál diseñado nadie se lo va a leer.

Se puede mejorar. Se debe mejorar.

La sensación que puede haber ante este tipo de proyectos es la de "no se por donde empezar". La respuesta es, empieza ahora. Empieza por la portada. Limpia la portada. Una vez está limpia, luego puedes pasar a aquellas páginas más consultadas e ir bajando.

Es trabajo y puede resultar poco atractivo, pero es necesario. Al final, el liderazgo que se proclama de la empresa, ha de ser tangible en todos los puntos de contacto. De lo contrario, cuando uno ve los mensajes del presidente en un periodico hablando de internet, o anuncios de "plataforma tecnológica avanzada", no son creibles.

La credibilidad del mensaje pasa por que todos los puntos de contacto estén coordinados, en línea.

En el mundo.es puede ser que tengamos una retícula, pero no la hemos encontrado. La retícula es la base de cualquier diseño. Trabajar sin retícula es como trabajar sin reglas. Si no tienes reglas, nunca sabes si te has salido o si sigues dentro.

Tomando como referencia dos elementos "fijos" (ancho de 1024 y el banner lateral) definimos una retícula que nos sirva para apoyar el diseño. Diseñamos una retícula de 12 columnas para poder tener suficiente flexibilidad.

Ver imagen a tamaño completo

Como se puede ver los elementos de la página de elmundo.es casi se ajustan a la retícula. Será fácil por tanto ajustar los espacios para disponer de un orden más claro para el usuario.

La retícual es necesaria para que el usuario pueda organizar la información en su mente. Sin una retícula el usuario tiene que interpretar cada elemento como un elemento independiente y por tanto requiere de más energía. Con una retícula el usuario puede rápidamente interpretar la escala de los módulos e interpretar los espacios con fácilidad.

Bye bye cabecera

La cabecera del mundo es muy gruesa, con mucho color, y con poca utilidad. Si es así, ¿por qué mantenerla?

Ver imagen a tamaño completo

La cabecera a todas luces no tiene sentido. Puede tener sentido en páginas interiores porque puede ser que un % de los usuarios accedan a esta página vía buscadores, links en blogs, etc... pero para una portada no tiene sentido marcar con tanta contundencia el dominio. Probablemente el 95% de la gente que accede a la portada de ElMundo.es son usuarios que ya buscan está marca.

¿Menú horizontal o vertical? Nos da igual, mientras tenga el fondo blanco

El menú actual, en texto blanco sobre un fondo azul, pasa desapercibido, dificil de leer (todo mayúsculas), etc... Aquí el mundo está perdiendo el tiempo y dinero.

Ver imagen a tamaño completo

Proponemos un menú vertical, sobre fondo blanco (para ser diferentes) y con todas las opciones desplegadas.

Ver imagen a tamaño completo

Articulando la retícula

Despues de muchos pasos y variaciones, podríamos llegar a un punto parecido a este.

Ver imagen a tamaño completo

Básicamente tenemos un poco más de orden, más información en portada, algo de color para decirnos que es importante y que no, y sobre todo, una mejor presencia de la publicidad.

Texto subrayado, ¿depende?

Los enlaces subrayados no se suelen aplicar a sites en los que se presenta una gran densidad de enlaces como puede ser la portada de un periodico porque se puede suponer que afea el diseño.

Ver imagen a tamaño completo

Yo creo que los enlaces subrayados fijan con más claridad la acción de pinchar y deberían aumentar el número de páginas vistas. Como todo esto parte de suposiciones lo mejor sería mandar una version con enlaces subrayados a unas ips y sin subrayar a otras y medir los resultados. En un site con tanto tráfico como ElMundo, probablemente unas horas de medición pudieran ser suficientes. En base a los datos de clicks, se podría tomar una decisión objetiva.

Muy poco color

En general, es bueno mantener la paleta en 3 colores, contando el blanco del fondo como uno de los 3 colores. Es decir, lo ideal sería mantener la paleta de la web en pocos colores, sobre todo, para que la publicidad destaque y no estemos luchando contra ella.

Ver imagen a tamaño completo

Mantener un entorno predominantemente uniforme, ayudar al usuario a que cuando tengamos un destacado, resalte de verdad.

¿Hemos llegado muy lejos?

La idea no era convertir ElMundo.es en un Flickr o cualquier otra aplicación tipo 2.0. La idea era sencillamente optimizar y refinar la portada del mundo.es que ultimamente era un poco "brutal".

Esta claro que en este tipo de redacciones la velocidad hace que muchas veces el diseño sufra y el aspecto de la web a nivel visual pase a un segundo plano. Se podría argumentar, que un diseño más consistente ayuda a producir más rápido. Por otro lado, si la velocidad de publicación es una constante en todos los medios, se deberían buscar otros factores que añadidos a la ecuación, ayuden a un medio a despegarse de otro. Sólo velocidad de publicación no sirve. Velocidad + inteligencia + refinamiento + consistencia + claridad + ... si pueden dar como resultado una ecuación alternativa.

Todas las imágenes empleadas en el rediseño

En esta carpeta tienes acceso a todas las imágenes utilizadas en el proceso de rediseño. Intenté guardar paso a paso el proceso para hacerlo más claro y que de alguna forma se pudiera ver la evolución.

En general el diseño de ElMundo.es está bien, aunque quizás le falta algo de elegancia. Por lo general es muy brutal y en la portada todos los elementos compiten unos con otros. La publicidad con la cabecera, la cabecera con los titulares, los titulares entre ellos... demasiado ruido visual. Una vía de evolución podría ser hacia un concepto algo más equilibrado, sosegado y uniforme, en el que el contenido cobre más protagonismo.

Qué es el Bicing

Es el nuevo transporte público de Barcelona: la bicicleta municipal. Rápido, barato, saludable y sostenible. Con tu tarjeta de abonado (24 €/año) vas a cualquiera de las estaciones de Bicing (hay más de 200), la acercas a un sensor y se te asigna una bicicleta. La coges, la conduces hasta la estación más cercana a tu destino y la dejas. Pim pam. Rápido y sencillo.

Bicicletas ancladas (izquierda) y sensor de identificación (derecha)

Lecciones de diseño

Los ejemplos del "mundo físico" son muy didácticos, por eso me gusta usarlos en los cursos de diseño para explicar los conceptos de usabilidad. Un clásico: ¿cuántas veces hemos intentado abrir una puerta empujándola hacia adelante cuando ponía bien clarito "Tirar"? Esto es porque no leemos, sino que nos fijamos en otros aspectos para determinar la acción a realizar. Por eso muchos usuarios rellenan los formularios sin leerse las instrucciones previas, y se equivocan. Los formularios no deberían requerir la lectura de instrucciones previas.

Volviendo al Bicing, hay quien piensa que el éxito cosechado tan rápidamente se ha debido a que en este último año ni ha llovido ni ha hecho frío, y además el billete de metro y bus no deja de subir y subir. No lo creo: en menos de un año ya se han abonado más de 100.000 personas, en gran parte gracias al boca oreja de los propios usuarios porque prácticamente no ha habido publicidad institucional.

El éxito se debe, en mi opinión, a un acertado diseño tanto de las máquinas como del sistema global. Aquí van algunos detalles:

1. Escenario de uso y público objetivo bien definidos

el Bicing no sirve para todos ni llega a todas partes. Es un servicio pensado para cubrir distancias medias, como alternativa al bus o al metro cuando tu destino está a menos de media docena de paradas.

Por ejemplo, la bicicleta tiene sólo 3 marchas, lo que simplifica su uso y aprendizaje. No te servirá para subir al Tibidabo ni pasarás de los 25 Km/h, pero según varios estudios es más rápido que cualquier otro medio de transporte urbano para distancias por debajo de los 6 km (Cycling: The Way Ahead For Towns and Cities, PDF 1,6MB).

Otro ejemplo, la cesta delantera permite dejar el bolso o el maletín del portátil, pero no bultos más grandes.

En el diseño de interfaces, decir “mi web servirá para esto y no para lo otroÓ es realmente difícil. Pero la realidad es que hacer algo que sirva para todos termina no siendo útil para nadie. La prueba es que los antiguos portales en los que podías hacerlo todo (búsquedas, compras, contactos...) ya son historia.

2. Eficiencia

el usuario no tiene que hacer prácticamente nada más que pedalear. Tomar y dejar la bici es muy rápido, sólo hay que regular la altura del sillín. El manillar es fijo y las luces se activan automáticamente cuando anochece.

Dado que es un transporte para cubrir distancias cortas, si fuera necesario invertir mucho tiempo en los preparativos dejaría de ser útil.

Según un reciente estudio sobre compras online, lo que más atrae a los usuarios a comprar en Internet es la comodidad. No se trata únicamente de que “te lo traigan a casaÓ, sino que el proceso de localización y compra del producto debe ser lo más rápido y eficiente posible; sin pasos innecesarios. La compra con un solo click de Amazon es la comodidad en su estado más puro.

3. Accesibilidad

las bicicletas pesan poco más de 16 Kg y la altura del sillín es regulable, con lo que prácticamente todo el mundo puede manejarlas.

En Internet, la accesibilidad sigue siendo una asignatura pendiente: fuentes diminutas y con poco contraste, webs 100% flash, imágenes si texto alternativo...

4. Prevención de errores

el sistema de transmisión está oculto. Es decir, que una tapa esconde el plato, la cadena, el cambio y los piñones. Este diseño evita que se te enganche el pantalón en el engranaje, o que te pongas perdido intentando recolocar la cadena si se te sale. Como las estaciones están muy cerca, es mejor ir andando hasta la siguiente y cambiar de bicicleta.

Los formularios web son una fuente de errores interminable. El más habitual se da con la fecha de nacimiento, ya que uno tiende a usar su propio formato, pasando del que sugiere el formulario. Existen varias alternativas para minimizar estos errores, como por ejemplo usar un campo diferente para el día, el mes y el año. Pero lo que hay que plantearse es si realmente se necesita esta información.

Usuario del Bicing en plena carrera (Dr. Jaus)

Aspectos a mejorar

Pocas cosas hay por mejorar en la parte física del sistema. El tallo del sillín podría tener dibujada una escala para que sea más rápido regular la altura, porque ahora hay que hacerlo a ojo. Si sé que mi altura perfecta es la 3, acierto a la primera.

También debería rediseñarse el punto de anclaje de las bicicletas en las estaciones, de manera que no sea posible dejarlas en el lado erróneo o mal ancladas (¿recordáis las physical constraints de las que habla Don Norman?).

La asignatura pendiente es la que más nos toca a nosotros: la interfaz del software de las estaciones y el web del servicio (Bicing.com). Da para unos cuantos artículos y animo a la gente a que participe indicando los puntos a favor y en contra.

El mapa de las estaciones (con Maps) tarda una eternidad en cargarse (Firefox incluso te recomienda parar el script), a veces te cambia de idioma sin pedirlo, cuesta encontrar información crítica como la edad mínima, algunos mensajes de error no se entienden, hay fotos en BMP...

Epílogo

Me cuentan que, antes de empezar a diseñar el sistema, sus responsables estudiaron a fondo otras implantaciones exitosas, como las de Lyon y Oslo. Es una gran noticia que la gente aprenda a copiar y no pretenda ser original a cualquier precio.

Lo realmente original es plantear y hacer posible un sistema que muchos veían inviable en Barcelona. Barcelona no es Amsterdam, hay más tráfico y tiene algunas cuestas, pero está claro que la cosa funciona. Así pues, ¿para cuándo en Madrid?