Diseño web

You are currently browsing the archive for the Diseño web category.

Desde hace unos meses, en Flat 101 trabajamos con Rusticae, elegido por el ministerio de Industria como mejor sitio web de turismo y viajes en 2014, en la mejora de su transacción digital. Básicamente, nos centramos en rediseñar su interfaz y procesos en base a datos de negocio y de analítica digital para buscar el mejor modelo de conversión / transacción para alcanzar los objetivos de negocio de la empresa y que sus usuarios tengan el mejor nivel de satisfacción posible.

Este año hemos comenzado nuestro proyecto más ambicioso con Rusticae: el rediseño del sitio web principal, orientándolo a mejorar los indicadores de negocio.

Se trata de alinear el diseño del sitio web con los objetivos de negocio de la empresa y con los intereses de los usuarios del sitio web. Algo que puede parecer sencillo de decir, pero bastante complicado de ejecutar.

Foto de la sesión de trabajo con Rusticae

En esta foto podemos ver a Daniel Bueno, Senior Designer de Flat 101 (con coco afeitado y barba) en un momento de la reunión con el cliente. Fundamental comprender su negocio

Nuestra metodología de trabajo en este tipo de proyectos es siempre la misma, y comienza con una parte muy importante y clave para poder desarrollar un diseño eficaz: debemos conocer a nuestro cliente, su modelo de negocio y el perfil de los clientes que tiene y a los que se dirige. Se trata, en resumen, de comprender el modelo de negocio lo mejor posible para que el rediseño de procesos se oriente correctamente.

No podemos tratar un diseño digital de manera idéntica en todos los casos, y por eso es clave este paso, el primero en un proceso de diseño.

La herramienta principal para conocer el modelo de negocio de un cliente, conocer a sus usuarios tipo, sus drivers de negocio, etc, es muy sencilla, la entrevista. Sigue leyendo »

Tags: , , , , ,

Por tercera edición consecutiva se celebraba, en esta ocasión en Granada, el UX Spain, el encuentro de profesionales de experiencia de usuario.

Y por tercera vez, para allá que me fui, en compañía de Miguel Monreal y Jorge Rigabert (y Nancy Guillén en el trayecto Madrid-Granada-Madrid), a ver con que nos encontrábamos este año en Granada y siempre dispuesto a aprender, a conocer gente nueva, a escuchar y también a pasarlo bien y a disfrutar.

Teniendo en cuenta donde esta Granada y donde vive servidor, Zaragoza, el primer reto era encontrar como llegar. En las dos ediciones anteriores, Salamanca y Valladolid, opté por el coche, porque la distancia era asumible, pero Granada está bastante lejos, así que nos montamos un tour titánico de 6 horas de tren Zaragoza-Madrid-Granada, que comenzó el jueves a las 14:26 y terminó con nuestra llegada a Granada a las 21:40.

Esta edición de UX Spain tenía el reto de consolidar un evento único y muy necesario para seguir creciendo y aprendiendo profesionalmente

Al llegar, ya se sabe, ubicarse, localizar a seres que, como tú, han ido al Granada al UX Spain (como Noe Santos, José Llinares, Sergio Simarro, MJ Cachón, etc…) y buscar un buen sitio para cenar que en esta primera noche fue “El rincón del Triniá”, atómica experiencia absolutamente recomendable que ya nos hizo entender porque hay tanta gente tan fan de Granada.

Foto de Antonio el trinidad

Pedazo de foto de Antonio “El Trinidad” que tenía este buen hombre, que nos atendió como los ángeles, en su local

UX Spain Granada: Día 1. Antropología, autocrítica, equipos de UX, creatividad y muchas más cosas

De inicio ya digo que esto no es un resumen detallado de contenidos, sino mi propia y particular visión del evento y de aquello que más me llamó la atención.

El primer día llegamos a tiempo de ver la primera charla, que me parecía muy interesante: Maritza Guaderrama hablando de antropología y diseño. De inicio, Maritza explicó lo que es la antropología y sus puntos de conexión con el diseño, básicamente en las fases de conocimiento y observación de los segmentos de población a los que se orienta el diseño que se está concibiendo. Su visión de aplicación de la antropología a los procesos de diseño me pareció muy útil y práctica siempre que Sigue leyendo »

Los pasados días 21 y 22 de junio (viernes y sábado) se celebro el primer congreso SEonthebeach en La Manga del Mar Menor. Entre otras muchas particularidades, este congreso se caracterizo por celebrarse a pie de playa, en pleno escenario natural, y tener a sus ponentes elegidos y votados entre los asistentes. Un formato muy original, diferente y novedoso salido de la cabecita de Sico de Andrés, su organizador y alma mater, que nos trató como a los reyes.

En mi caso, el público me votó y eligió para hablar de UX y usabilidad, así que puse rumbo a Murcia para hablar de diseño web.

No quise hablar para nada de SEO, la temática principal del congreso, y preferí centrarme en explicar lo importante que es el diseño, el buen diseño, para que un sitio web sea algo eficaz, bien pensado, bello, honesto, creativo y que ya de paso sirva a los objetivos de negocio del site, si los hay. No hay mejor optimización de un sitio web que el haberlo concebido y diseñado bien desde el principio.

Y usé esta presentación para demostrar la importancia del diseño, en sus conceptos más básicos y aplicados a internet, en la efectividad de cualquier diseño web:


Lógicamente, la explicación sin contexto no sirve de mucho, así que os detallo y explico paso a paso el contenido de esta presentación para que podais entenderla de principio a fin. Sigue leyendo »

Tags: , , , , , , ,

El diseño web fue el primer campo profesional en el que comencé a trabajar en internet, allá por finales de los 90, a raiz de mi afición al retoque digital, al dibujo, a los comics, a la cartelería, etc, creando lo que hoy me parecen espantosos sitios web con aquel artilugio llamado Front Page 98 entre otras herramientas de la época, como Xara 3D o una cosa novedosísima llamada Flash 3.

Fue como mi primer amor profesional, algo que realmente me gustaba (y me gusta) y disfrutaba (y disfruto). Aprendí (y prendo) todo lo que pude sobre diseño, en su sentido más puro, y sobre la web, además de sobre las herramientas, las interfaces, etc. Aprendí que, sobre todo, un diseñador, para considerarse tal, debe pensar no solo en la estética, sino en la funcionalidad y utilidad de la misma y en el usuario que va a utilizar ese diseño, en que éste debe ser capaz de conseguir su propósito, que es el objeto último del diseño en sí.

Esto me lleva a poner en duda el trabajo de muchos autoproclamados diseñadores web que, en realidad, no lo son, sino que son operarios de Photoshop (en el mejor de los casos también de Dreamweaver)

Captura del juego Street Fighter, que representa el combate entre diseñador web vs operario de photoshop

Aqui podemos ver a un diseñador web en combate contra un operario de photoshop

El diseño implica comprensión de lo que se pretende conseguir y definir la forma y el camino para que ello sea posible. En el caso de la web, vincular el objetivo al proceso a través de navegación e interfaz que permite conseguir dicho objetivo. Y el diseño incluye una parte visual, gráfica, que es, en ocasiones, la que soporta el grueso de las críticas y opiniones, precisamente por ser la parte más visible, pero, como en el caso de un iceberg, representa solo una parte (pequeña) del trabajo.

Sigue leyendo »

Tags: , , , , ,

En ocasiones te encuentras con esos procesos de pago online que parece que lo que realmente quieren no es que pagues online, sino que sufras y que te vayas de ese sitio web amargado, desesperado y con una considerable ración de mala baba encima. Todos conocemos esa sensación y todos hemos navegado por sitios web de este estilo.

El proceso de pago, algo crítico y que debería ser lo más sencillo y agil posible en cualquier comercio electrónico, puede convertirse en una experiencia peor que una tortura medieval.

Imagen de una tortura medieval. mejor que algun proceso de pago online

Aquí vemos a un usuario de este proceso de pago online, que es torturado por los inventores del sitio web en cuestión.

En lo que a un servidor se refiere, el proceso de pago online más largo, tortuoso y doloroso al que me he enfrentado ha sido el de nic.es para el pago de las renovaciones de dominios .es. Hasta tal punto es un proceso de pago propio de las mazmorras de Mordor que dejé de comprar dominios .es a través de Red.es, así de claro.

Estas capturas son de 2011, y desconozco si habrán cambiado o no el proceso de pago, pero así era el proceso de pago online en red.es hace unos meses. En cualquier caso, siga online o no, es un ejemplo excelente de como NO hacer las cosas. Venid amigos, venid a este maravilloso mundo de sufrimiento en un pago online.

Sigue leyendo »

Tags: , , , ,

Hace casi un año, en mayo de 2011, ya hablé en este blog del siempre peliagudo asunto de que te copien una web, algo que, de inicio, no sienta bien, pero también muy habitual y extendido en este mundo nuestro de internet, gracias a la transparencia absoluta del medio (descarga de imágenes, CSS, código fuente, JS…), que permite “fusilar” prácticamente cualquier contenido y diseño web de cualquier parte del ancho mundo.

El plagio de diseños web sin el menor escrúpulo ni consideración es algo con lo que debemos convivir, nos guste o no.

El medio, internet, lo posibilita. Es fácil copiar un sitio web tal cual, y además no parece que haya una regulación legal clara al respecto que te permita defenderte, a ti o a tus clientes, si te ves en un caso de este tipo. Es muy desagradable e ingrato haber trabajado en un diseño exclusivo para alguien, pensado para sus objetivos, para su negocio, y que éste sea miserablemente copiado hasta la saciedad sin poder hacer mucho más que el típico envío de emails solicitando la retirada, o como mínimo que te otorguen el crédito como autor que te corresponde. Supongo que grandes corporaciones o ecommerces de tamaño titánico recurrirán a sus ejércitos de abogados para solucionar esto, pero esas opciones están muy lejos de las posibilidades de una empresa de tamaño pequeño o mediano, que son la mayoría.

Yo mismo lo he sufrido en mis carnes repetidas veces con algunos diseños web en los que he trabajado en los últimos 15 años, pero de verdad que ahora, en este momento, supongo que por tecnología y abundancia de ejemplos, es cuando más copias descaradas y flagrantes de sitios web estoy viendo.

Este tema ha vuelto a mi mente por las múltiples copias, fusilamientos y plagios que mi buen amigo y compañero de fatigas Jorge Rigabert ha encontrado de su web personal en las últimas semanas. Estábamos hablando del tema en el trabajo y que mejor manera de expresar el enfado/frustración/enojo/hastio por el tema de los plagios de sitios web que aquí, en formato post. Para muestra, un primer botón de plagio:

Copia y plagio de un sitio web

Aquel caso de copia de diseño web que conté en mayo de 2011 queda en una chiquillería de parvulario comparado con este ejemplo, sobre estas líneas. Ni me molesto en resaltar las zonas copiadas porque son TODAS! Sigue leyendo »

Tags: , , , , , ,

Suele ser muy habitual, desgraciadamente, que a la hora de concebir en entorno web un proceso o una tarea que queremos que se ejecute, en ocasiones suele concebirse como si internet, por ser un medio con unas características muy propias, fuera a funcionar al margen de los usos y hábitos comunes de todos los mortales. Tremendo error.

Internet es un medio, OK, y tiene sus propias características, OK, pero los planteamientos deben trabajarse con la óptica de como se hacen las cosas habitualmente, conforme a la costumbre, al uso común.

Gracias al gran @calvoconbarba por sugerirme este vídeo para este post… muy apropiado. Así sería un proceso de compra online en el mundo real… totalmente contrario a uso, ¿se podría vivir vendiendo así?

Es decir, no debemos dejar de pensar nunca que por mucho que estemos haciendo cosas en internet, las que sean (ecommerce, leads, descargas, escribir posts, etc) las estamos haciendo para personas que, lógicamente, tienen ya unos hábitos y unas costumbres claramente establecidas.

Un ejemplo muy sangrante de esto es, por ejemplo, lo que sucede con muchísimos procesos de pago en ecommerce, donde se le piden al usuario una media de aproximadamente 8 o 10 datos personales, de los cuales habría que preguntarse cuantos son realmente necesarios. Pero el problema no es ese, es que luego, a la hora de pagar, el usuario debe enfrentarse a procesos que le alejan de la realidad de una compra diaria, como son el facilitar códigos de comercio electrónico seguro, registrarse, etc, haciendo de algo aparentemente y por uso sencillo, en ocasiones, una auténtica tortura propia de la Inquisición. El problema de raiz no es que sean pasos que perjudiquen al ratio de conversión, que lo son, es que son pasos Sigue leyendo »

Tags: , , , ,

Tras hablar en anteriores posts sobre lo que es un test A/B y definir una metodología básica para realizar un test A/B con ciertas garantías, ahora le toca el turno a las herramientas a las que podemos optar para realizar un test A/B y/o un multivariante.

El mercado esta lleno de herramientas para realizar test A/B. Aunque lo más importante es pensarlo bien, el para que, no el como.

Las herramientas pueden variar, pero lo realmente importante es siempre la claridad de ideas y que un test sea algo que realmente tenga utilidad, no un divertimento. Sí, me repito y digo esto mucho, pero es necesario que eso quede muy claro. La herramienta es siempre secundaria, lo otro no.

Y dicho esto, hoy día la oferta de herramientas para testing web es extensísima, pero, bien por conocimiento directo, bien por referencias de garantía o por sus características, aquí teneis las principales herramientas de testing A/B y también multivariente del mercado, entre otras, a las que puede merecer echarle un vistazo en condiciones:

Google Website Optimizer

Google Website Optimizer

Sin lugar a dudas, Google Website Optimizer el la herramienta de A/B testing y multivariante más popular. Ideal para comenzar en este mundillo del testing por muchas razones, su uso es realmente sencillo, mediante la inclusión de un pequeño fragmento de código javascript en la página original y en aquellas que conforman el test. Además, al ser validado todo el proceso paso a paso, en caso de que hagas algo mal el mismo Optimizer te pone sobre aviso. Permite ofrecer diferentes alternativas de diseño de una landing page (A/B test) u ofrecer variantes del contenido (imágenes, copys, etiquetas h, etc) dentro de una landing page (multivariante). Puede utilizarse tanto para A/B testing como para multivariantes y permite, entre otras cosas, distribuir tráfico entre versiones de página a testear. No tiene coste y además hay una guía avanzada de uso de Optimizer muy recomendable si ya tienes exigencias de medio-alto nivel.

Visual Website Optimizer

Visual Website Optimizer

Visual Website Optimizer, a diferencia de Google Website Optimizer, ya es una herramienta que ofrece una serie de características más extensas (a su precio, es de pago en función de las visitas a testear y la versión gratis permite testaera sobre 1.000 visitantes). El funcionamiento es similar, como en todas, con el uso del consabido javascript que se debe incluir en las versiones originales y alternativas. Lo que Visual Website Optimizer si ofrece diferente, entre otras cosas, es: segmentación por keyword (muy interesante, según la keyword de entrada enviar a una u otra landing), mapas de calor y clicks de los tests, capacidad para hacer test sin saber nada de código y muchas otras características. Sigue leyendo »

Tags: , , , , , ,

En los últimos 6 o 7 años me ha tocado participar en bastantes procesos de selección de perfiles de diseño web, y mira que ha pasado tiempo, y sigo viendo a día de hoy en los curriculums que recibimos de diseñadores web cosas que para nada son recomendables si pretendes convencer a alguien de tu valor como profesional en el campo del diseño web.

Por supuesto, no soy para nada una autoridad en el tema, no trabajo en un departamento de recursos humanos ni soy la persona que más entrevistas ha hecho a diseñadores web, pero después de trabajar más de 10 años en diseño web, de ver muuuuuchos curriculums de diseño web y hacer muuuuchas entrevistas a diseñadores para contratar, si que creo que puedo aportar algo tan sencillo como deciros en que debeis centrar vuestro curriculum, en que nos fijamos aquellos que queremos contratar diseñadores web… porque la verdad es que a veces recibes cada cosa…

¿Eres diseñador web?, ¿buscas trabajo? Pues entonces presta atención a estos puntos, que son críticos para que se te valore como tal y se te quiera contratar.

¿Eres diseñador web? Es básico incluir direcciones de tus trabajos

Aunque no tengas muchos trabajos web, de verdad, lo más importante es incluir las URLs en tu curriculum

Lo primero, no, lo primerísimo. Si realmente eres un diseñador web, enseña tu trabajo lo primero, que tu trabajo hable de ti. Leer montones de curriculums de diseñadores web en los que no aparece ni una sola URL, ni una triste dirección web es muy frustrante. Si de verdad has trabajado como diseñador web o aunque sea como gráfico, ENSEÑA TU TRABAJO, por pequeño que sea. Es muy dificil que te llame la atención un diseñador web que no tiene nada que enseñar porque eso generalmente significa: A. No tengo webs que enseñar o B. Tengo webs que he hecho pero que no quiero enseñar. Y no se que es peor. Sigue leyendo »

Tags: , , , , , ,

Hace ya un par de meses escribí un post explicando algo tan sencillo y básico como que es un A/B test y para que sirve, como inicio de una serie de post temáticos sobre la optimización web en general, y el A/B testing en particular y como primer tema dentro de la optimización.

Tras ese primer post, ahora le toca el turno a este, en el que trataré el tema de como planificar un test A/B y como utilizar una metodología básica, una guía que sirva para que este tipo de test nos de los mejores resultados e información posibles, independientemente de las herramientas con que se realice.

Lo más importante de un test A/B está en su planificación, en su metodología en como hacerlo y, sobre todo, para que.

Este tipo de test son una herramienta de mejora de gran valor, pero deben realizarse en un marco concreto, siguiendo unos mínimos pasos y, sobre todo, por una razón de peso y buscando precisamente esa mejora, pero no como una acción de entretenimiento o de prueba porque sí.

 

Gráfica de un test A/B con Google Website Optimizer

Como puede verse en esta gráfica de Optimizer, un test A/B puede comenzar con una versión dando muy buenos resultados para luego cambiar radicalmente. De ahí la importancia de tener un método, una guía, que de consistencia a la prueba

Dicho esto, los pasos principales, el método básico, la guía para conseguir realizar un test A/B que sea un éxito y nos de información relevante sobre nuestro sitio web se basa en:

  1. Tener claros los objetivos o valores del sitio web. Lógicamente, por obvio que parezca, este es el punto de partida. Si no sabemos cual es el objetivo a alcanzar, los valores que marcan el horizonte de a donde queremos llegar, va a ser muy dificil que busquemos una mejora, porque no tenemos referencia de si estamos mejor o peor, y la intuición no sirve.
  2. Reconocer claramente indicadores que nos digan de manera inequívoca que debemos realizar un test A/B. Si, por ejemplo, queremos tener 500 leads al mes generados por una página que recibe 10.000 visitas en el mismo periodo de tiempo, ya sabemos que eso implica un 5% de conversión, así que configura ese objetivo en Analytics y observa. Si no llegas a ese porcentaje de conversión, un test A/B sobre esa página puede ser una de las herramientas que te ayuden a conseguirlo, pero no debe hacerse porque sí. Esa observación de indicadores es la “palanca”, el gatillo que dispara las acciones de mejora y aquí el testing cobra todo el sentido. Sigue leyendo »

Tags: , , ,

« Older entries