diseño web

La importancia de los Microcopies
06/09/2017
¿Has rediseñado tu web y aún no ves un aumento significativo en las conversiones? ¿No sabes cómo entablar conversación con los usuarios? Quizás ha llegado el momento de que empieces a prestar atención a los pequeños detalles. Ya no vale con un buen contenido acompañado de un diseño bonito, ahora es necesario ir más allá y mejorar el copy-writing, en particular en este artículo vamos a hablar de los microcopies.   ¿Qué es un microcopy?   Según Christopher Murphy y Nicklas Persson en su libro El oficio de las palabras, un microcopy es: “Es el oficio de las palabras a un nivel micro, considerando la manera en que las palabras pueden satisfacer un requerimiento funcional al ayudar y mejorar las interacciones del diseño, mejorar las interfaces tanto para la función como para el deleite, y ayudar a un usuario en su recorrido”. Es decir, se trata de pequeños elementos de texto que guían la experiencia del usuario a través de la web. Necesariamente estas piezas deben ser cortas e incluir información precisa y útil. Un ejemplo: El botón “Suscribirse” de Youtube. Con tan solo el uso de una palabra acompañado de un buen diseño conseguimos guiar al usuario hasta la acción que queremos que desarrolle. Esta es la función más sencilla de los microcopies, pero existen otras que han ido surgiendo tras ver el gran potencial que estos tienen.   ¿Cuáles son los objetivos de los microcopies?   Como ya hemos comentado, el principal objetivo es facilitar la navegación de los usuarios, pero podemos conseguir otros muchos si ponemos a funcionar la imaginación.   Incrementar la conversión La conversión es la principal finalidad de una página web, consiguiendo que un usuario realice una determinada acción, como suscribirse a una newsletter, comprar un producto o hacerse seguidor de una red social. Booking, una de las webs de viajes con más tráfico a nivel mundial, ha aumentado su conversión con el uso de microcopies durante las diferentes etapas de su reserva. ¿Cómo? Pues ha sido tan fácil como añadir, “¡Muy solicitado! ¡Solo quedan 6 en nuestra web!” en la pantalla inicial del proceso de búsqueda, consiguiendo que los usuarios contraten por miedo a quedarse sin disponibilidad. Es una frase sencilla, que despierta el interés del consumidor hacia esa oferta y termina consiguiendo su objetivo: vender.   Mejorar las tasas de apertura y de click de la newsletter Una de las maneras de conseguir aumentar la conversión de una web es a través de la utilización de buenos microcopies en las newsletter, un elemento esencial para la promoción y la creación de vínculo con el cliente. La newsletter es una forma de introducirnos en la vida de los usuarios, y conseguir llamar su atención para atraerlo hasta nuestro contenido. Para las cuenta de CoworkingSpain trabajamos de forma minuciosa los microcopies de sus newsletter, siendo conscientes de los grandes beneficios que estos reportan a esta web, tanto en aumento de visitas como en conversión. En primer lugar, lo más importante es conseguir incrementar la tasa de apertura, ya que si el usuario no lee el contenido da igual el diseño o lo bien redactado que esté. Así, intentamos usar frases que conecten con el usuario que le intriguen a saber qué más hay dentro de esa newsletter. ¿Cómo? A través de frases que o bien te muestren la solución a una necesidad existente, que despierte tu curiosidad o incluso una afirmación sobre un tema que te interesa y conoces y del cual quieres saber más. Pero ante todo, siempre de tú a tú, como si llegara una persona, se presentara y tú quieras seguir conociéndola. En este ejemplo de CoworkingSpain, el asunto utilizado es “¿Qué es el intraemprendimiento?”, si no sabes del tema seguramente quieras abrir la newsletter y seguir leyendo. Por el contrario, si pusiera “El intraemprendimiento, un nuevo concepto”, podría sonar demasiado impersonal y no despertaría tu curiosidad. ¿Y qué me decís del CTA? Utilizar el ingenio para añadir ese toque de humor y hacer que el usuario haga click, “Emprendimiento o Intraemprendimiento” esa es la cuestión que se trata en ese artículo.     Otra compañía que lo hace realmente bien es InVision, sobre todo en la elección de sus CTAs, en todas sus newsletter agudizan el ingenio para lograr aumentar la tasa de click. En este ejemplo, en primer lugar utiliza un título para su artículo llamativo “Esta es la razón por la que todas tus mejores ideas surgen en la ducha”, consiguiendo llamar tu atención. A continuación te expone un problema para el cual te da una solución “Si te sientes estancado, en realidad hay una forma muy fácil de solucionarlo”, con esto ya casi te ha ganado, creando la necesidad de saber cuál es la respuesta. Siempre consiguen poner la guinda del pastel con la utilización de un CTA perfecto, en este caso “Fresco y limpio”, un juego de palabras que utiliza estos términos en sus dos sentidos, una idea fresca y limpia, es decir, novedosa y pulida y por otro lado, la sensación de frescor y limpieza de después de la ducha. Como podrás comprobar un copy es mucho más que una combinación de palabras, es una pequeña obra que debe contener la esencia de la marca y a su vez captar al consumidor y transmitir algún tipo de sentimiento, de acuerdo al fin último que se busque.   Aumentar la confianza Este es un hándicap para muchas webs, según datos obtenidos de una encuesta realizada por PayPal vemos que en torno al 46% de la población americana sigue teniendo miedo a proporcionar datos bancarios durante el momento del pago online, al igual que también observamos que sobre el 94% de los encuestados abandonan una web si no les resulta de confianza. Los microcopies juegan un papel muy importante a la hora de conseguir que el usuario se fíe de lo que está viendo, a través de aclaraciones, por ejemplo estas que aparecen en la web de Paypal. Aquí podemos observar varios tipos de copies, por un lado aquellos que te aportan un extra de confianza como “La forma rápida y segura de pagar” o “No compartimos su información financiera con el vendedor”.Por otro, una explicación de por qué se pide el correo electrónico a través de un copy que pone “Usaremos esta dirección de correo electrónico para enviar información del pago”, asegurándonos que no vamos a recibir publicidad. Todos ellos aportan seguridad en el cliente a la hora de introducir sus datos bancarios.   Dar respuesta a preocupaciones Seguramente muchos de vosotros a la hora de realizar determinadas acciones online hayáis tenido dudas sobre si llevarlas a cabo o no por falta de información. Por ejemplo, cuando nos disponemos a registrarnos en algún sitio web y no disponemos de mucho tiempo, si presenta un sistema de registro complicado seguramente en la segunda pantalla abandonemos. La solución a este problema es tan fácil como añadir un microcopy explicativo como el que podéis ver en Netflix. Nos informa de los pasos que quedan con la frase “¡Faltan solo dos pasos!"  además, añade una nota de humor con el “También odiamos el papeleo” y siempre deja claro que el primer mes es gratis. Todos estos aspectos unidos hacen que el usuario lleve a cabo el registro y sienta una simpatía por esta marca.   Aclarar posibles dudas Otro de los principales objetivos de los microcopies es resolver las dudas que pudieran tener los usuarios antes de que surjan, es decir, piensa como si fueras un consumidor y anticípate. Para escoger el texto adecuado, lo mejor es realizar un testeo previo para conocer cuáles son sus intereses y sus preocupaciones y así adaptar tus copies a ellos. Aquí puedes ver un ejemplo claro, en vez de este placeholder (el microcopy que aparece dentro de la caja de texto) podríamos haber utilizado un label tal como “Escribe lo que estás buscando”. Sin embargo, al poner una pregunta estamos de alguna manera persuadiendo y animando al usuario a que escriba. En este ejemplo de Fiverr, si tú entraras y vieses un recuadro con una frase formal que solo te indicara lo que tienes que hacer, quizás abandonarías la página sin llegar a interactuar con ella, pero si añades “What service are you looking for?” te sientes ante la necesidad de responder, como si de otro ser humano se tratara. Podemos ver otros ejemplos en páginas como Facebook o Twitter, que añaden placeholders, algunos de ellos personalizados como “¿Qué estás pensando, Laura?”, con el objetivo de conseguir que interactúes y crees contenido en la red social.   Explicar los errores Aunque una de nuestras misiones cuando estamos al frente de una web es minimizar los errores, es inevitable que en ocasiones surjan y cuando esto ocurre debemos estar preparados para que el usuario no abandone la web sin entender porqué. Seguramente ya habrás visto muchas páginas de error 404, pero aquí entra en juego la creatividad del diseñador para conseguir mantener al cliente en la web, ya sea añadiendo un botón que te redirija a la Home Page o con un buen microcopy que te haga seguir navegando en la web de cualquier otra forma. En la web de Tripadvisor puedes encontrar un ejemplo claro de un buen copy para páginas de error 404. Cogen su principal recurso, ser una página de viajes, y lo utilizan a su favor para darle un punto cómico y que enganche a los usuarios: “Esta página está de vacaciones… y tú también deberías estarlo”. A su vez, te redirige a otras secciones de su web añadiendo un cuadro de búsqueda acompañado de la frase “Chequeamos más de 200 sitios para encontrarte el hotel al mejor precio”. ¿No es perfecto?   Microcopy como diseño web   “Los detalles no son detalles. Hacen el diseño.”, por Charles Eames. En el caso de los microcopies, vemos claramente reflejada esta cita del arquitecto estadounidense. En la lista de tareas de un diseñador web, estas pequeñas piezas de texto quedan relegadas a las últimas posiciones y sin embargo pueden suponer un gran impulso para el incremento de conversiones, siempre y cuando se utilicen de una forma adecuada. Un claro ejemplo de una buena utilización de los microcopies es Mailchimp, ha hecho de este elemento uno de sus puntos fuertes, que acompañado de buenas imágenes consiguen el fin último, que es mantener informado al usuario, además de diferenciarse de la competencia añadiendo un tono divertido y propio.    Microcopy parte fundamental de la UX   Los microcopies van a condicionar la experiencia del usuario y su sentimiento hacia la marca, por lo que debemos prestarle especial atención. Cada palabra debe ser clara, simple y ante todo buscar la persuasión del usuario. Al final de lo que trata el arte del microcopy es de enriquecer la experiencia del cliente a través de los pequeños detalles, de motivarlos para que realicen ciertas acciones y de crear un vínculo de amistad entre la marca y el consumidor final. ¿Cómo conseguirlo? Aquí es donde entra en juego el humor y el ingenio de los copy-writers. Clifford Nass, profesor de comunicación de la Universidad de Stanford, descubrió gracias a una de sus muchas investigaciones que el humor hace sentirse mejor a las personas, las reconforta consigo mismas y hace que aprecien en mayor medida las interacciones, incrementando su cooperación y la aceptación de recomendaciones. ¿Esto qué quiere decir? Que cuando entablamos una conversación con los usuarios a través de la web y utilizamos un tono humorístico y amigable con ellos, van a apreciar todo aquello que les digamos y seguramente lo tengan en cuenta, e incluso consigamos que conviertan y consuman nuestro producto. Nass también decía que si consigues entusiasmar, ilusionar o provocar algún tipo de sentimiento positivo en los usuarios, la conversión está a la vuelta de la esquina, ya tienes más de medio camino hecho. En este ejemplo de Yelp, podemos ver un claro ejemplo de la utilización del humor durante uno de los pasos que forma el viaje del usuario en su web. En concreto, el momento de las reviews que la gran mayoría pasa sin finalizar el proceso. Yelp añade unos microcopies divertidos al lado de cada una de las puntuaciones para motivar al usuario a que valore su experiencia. Seguramente gracias frases como “Yay! I’m a fan” hayan conseguido que muchas personas le den una buena valoración. ¡Es brillante! Soy muy fan de estos microcopies. Pero la utilización de los microcopies no se limita a persuadir a través del humor, también debe ser útil y aportar valor al usuario. Por ejemplo, si al entrar a una app como BlaBlaCar todos los botones indicasen “pincha aquí” seguramente te saldrías de inmediato al no comprender qué hacer, sin embargo si ves “no estoy de acuerdo” “continuar” o “confirmar”, estas pequeñas piezas te guían en los pasos que debes tomar y te facilitan la experiencia, a la vez que te la enriquecen.   Ahora te toca a ti poner en práctica toda la información aprendida en este artículo y comenzar a recoger los frutos de un buen uso de los microcopies. Recuerda, proporciona al usuario una experiencia personalizada, sorprendeles, consigue engancharlos y fidelizarlos a través del arte del copy-writing.  
Cómo hacer un briefing de diseño web
14/07/2017
A menudo me encuentro con clientes que tienen serias dificultades para explicarnos en qué consiste su proyecto web. Les cuesta mucho organizar la información y definir aquellos datos que son más importantes a la hora de hacer un presupuesto de desarrollo web. Por este motivo os dejo un breve esquema de cómo debe ser un briefing para el desarrollo o diseño de un sitio web.   Descripción del proyecto Empezaremos nuestro briefing haciendo una descripción del proyecto en líneas generales, de la empresas u organización que lo respalda y del contexto del mismo. No estamos escribiendo una novela, conviene ir al grano y resumirlo en no más de 2 ó 3 párrafos. Datos de contacto Datos de contacto de las personas implicadas en el proceso de desarrollo así como de sus departamentos. Público objetivo  Aquí presentaremos la audiencia y el público objetivo al que irá dirigido el sitio web. Edad, zona geográfica, nivel socioeconómico, sexo, profesiones, estudios, aficiones, etc.. Tampoco hay que profundizar en esto y basta con tener una idea somera del asunto. Productos o servicios ofrecidos Descripción de los productos o servicios que ofrece la empresa de una forma esquemática y sin profundizar. En el caso de no existir productos o servicios, como por ejemplo una web para concienciar a la gente sobre el movimiento vegano, obviamente no hará falta completar este apartado. Competencia Definición de los principales competidores tanto a nivel nacional como internacional. Siempre debemos incluir los links a las páginas de esas empresas u organizaciones. Referencias Ejemplos de webs que gustan y a las que hay que parecerse o superar. Este apartado es muy útil a la hora de dar a entender los gustos y el nivel de diseño. Presupuesto Es muy importante definir un presupuesto y exponerlo abiertamente. De igual forma que hacemos cuando vamos a comprarnos un portátil o un coche, es muy conveniente ser claros con esto. Hay que buscar proveedores de confianza y confiar en ellos. Un proveedor serio podrá asesorar y valorar todo mucho mejor teniendo una horquilla de presupuesto. No hagamos que nos enseñen el Porsche si solo tenemos presupuesto para un Dacia. Además esto puede ahorrarte mucho tiempo en negociaciones y búsqueda de proveedor.  Objetivos Empezaremos por definir los objetivos más intangibles, aquellos que ayudan a entender en términos generales de qué va la vaina, pero que no se pueden medir con exactitud. Algunos ejemplos serían:  · Dar a conocer la marca · Promocionar los servicios de la empresa · Mejorar la presencia online · Mejorar la usabilidad Y después pasamos a centrarnos en la definición de aquellos objetivos que sí se pueden medir y que después pueden pasar a ser los famosos KPIs. Estos objetivos son los que realmente nos interesan ya que van a condicionar en gran medida muchas de las decisiones de diseño y desarrollo. Debemos dividirlos en dos: Objetivo principal  Motivo por el cual se quiere desarrollar el sitio web, el goal principal, aquello que más nos interesa conseguir. Ejemplos de objetivos principales típicos serían:  · Vender determinado producto. · Conseguir potenciales clientes (leads). · Obtener donativos.  Objetivos secundarios Otros objetivos que, si bien no son críticos, su consecución nos puede resultar de gran ayuda. Ejemplos de objetivos secundarios serían:  · Conseguir suscriptores a la newsletters. · Conseguir usuarios registrados. · Conseguir comentarios en los post. · Conseguir reviews de productos. Mapa de sitio Si tienes alguna idea de las secciones, tipos de contenido o mapa de sitio conviene especificarlo aquí. Si no sabes cómo organizar el contenido simplemente especifica qué tipo de información quieres mostrar en la web.  Idiomas Definir en qué idiomas deberá estar disponible el sitio. También indicar si el cliente proveerá los textos traducidos o la empresa de desarrollo debe encargarse de esto. Tiempos Plazos de entrega final y entregas parciales.  Imagen corporativa y diseños Si la empresa u organización dispone de logo es conveniente adjuntarlo al briefing. Si hay diseños o ejercicios de UX o diseño previos también conviene adjuntarlos. Funcionalidades En este apartado es donde hay que definir cualquier cosa que queramos que haga el sitio web. Es la parte más importante de todo el briefing web y donde debemos explayarnos con los detalles, ya que es la que más influye en el coste de desarrollo. Si tenemos algún conocimiento técnico o sabemos más o menos de lo que hablamos es importante dar cuantos más detalles mejor. Si no tienes ni idea, es mejor ser prudente e intentar explicar de forma simple qué cosas quieres que haga la web.  Si no sabes cómo se llama algo puedes poner ejemplos de otras webs pegando la dirección de la web que hace aquello que quieres. Por ejemplo: Quiero que las fotos del producto se vean como en zara.com https://www.zara.com/es/es/rebajas/hombre/blazers/blazer-cuadros-marino-c436046p4606523.html Ejemplos de funcionalidades comunes son: · Diseño responsive (adaptativo). · Sistema de venta online con carrito de la compra y pago con tarjeta y PayPal. · Buscador por palabras. · Buscador por palabras y autocompletado · Blog con comentarios y bloque de artículos relacionados. · Posibilidad de registro de usuarios con Facebook (Login with Facebook). · Sistema de reservas de pistas de paddel. · Área de clientes donde podrán descargar archivos. También es importante detallar cualquier integración que haya que hacer con otros programas o webs. Por ejemplo: · La tienda virtual debe integrarse con un sistema CRM. · El catálogo de piezas deberá actualizarse diariamente contra nuestro sorfware de gestión de almacen. Tecnología Si se trata de un sitio nuevo y tienes predilección por alguna tecnología en particular debes definirlo. Si no lo tienes claro ponte en manos de profesionales y déjate asesorar. Siempre he defendido que hay que elegir un proveedor de confianza y trabajar con la tecnología que dicho proveedor domine. Se contrata a profesionales y estos profesionales deben decidir cuál es la mejor tecnología para cada proyecto. En el caso de que se trate de rediseño hay que dejar muy claro cuál es la tecnología actual y si hay que mantenerla o se puede cambiar. Alojamiento web Indicar el presupuesto disponible para alojamiento web.  También se pueden incluir extras para mejora del rendimiento o la seguridad como por ejemplo la contratación de un CDN o un certificado SSL. Dominios Si ya se dispone de un dominio conviene detallarlo. Si no se dispone del mismo se deben sugerir nombres de dominios para comprobar su disponibilidad. Mantenimiento Especificar si se dispone de un equipo para actualizar el contenido o necesitas contratar este servicio.   Y esto es todo. Fácil ¿verdad? También puedes incluir cualquier otra información que estimes oportuna, pero recuerda obviar todo aquello que no sea de interés para valorar el desarrollo. Ahora ya no tienes excusa para lanzarte con esa idea loca de web que tienes en mente. Ponte manos a la obra, crea un briefing para tu proyecto online y busca una empresa de diseño web que te elabore un presupuesto.
Anatomía de una microinteracción
28/04/2017
Las microinteracciones son pequeñas piezas de funcionalidad que permiten al usuario llevar a cabo una acción concreta.  Hoy en día estamos rodeados de ellas ya que se encuentran en todos los productos digitales. Un buen diseño de microinteracciones mejora la experiencia de usuario y puede ser el responsable de que los usuarios se enamoren de nuestro producto. La historia de las microinteracciones se remonta a los primeros aparatos electrónicos y muchos de los estándares de las GUI que usamos actualmente fueron en su día microinteracciones  primitivas. Una microinteracción puede ser parte de un producto o puede ser el producto completo.  Por ejemplo, una báscula de las de toda la vida solo sirve para una cosa: Calcular el peso. Tiene un único caso de uso: el usuario se sube encima y la báscula muestra el peso mediante el display. La interacciones bien diseñadas resuelven un problema concreto con eficiencia, humor y estilo; marcando la diferencia entre un producto que amamos y otro que simplemente aceptamos.  Por ejemplo Google ofrece sugerencias sobre lo que estas buscando de forma instantánea generando una sensación única y mágica en el usuario. Whatsapp muestra pequeños iconos en cada mensaje para informar del estado de las conversaciones. Un reloj indica que el mensaje no ha llegado, un tick indica que el mensaje ha llegado al servidor de WhatsApp, un doble tick indica que el mensaje ha llegado al dispositivo del destinatario y un doble tick cambia al color azul cuando el destinatario ha leído el mensaje. Por el contrario, una microinteracción mal concebida puede causar gran confusión y frustración en un usuario. Por ejemplo, la ruedecita para regular la temperatura de algunas neveras siempre me ha parecido super confusa.  Tiene números del 1 al 9, pero no queda totalmente claro si un numero más alto es más frío o es más temperatura.  El diseño mejora notablemente añadiendo simplemente la palabra Colder (Más frío).  Pero mejora mucho más si añadimos unos iconos de termómetros en cada extremo de la escala de forma que cualquier persona pueda entender la microinteracción independientemente del idioma que hable. Personalmente hubiera optado por iconos de copos de nieve que resultan más ilustrativos. Un copo en un lado de la rueda y tres copos en el lado opuesto. Incluso se podría mejorar añadiendo un degradado de color de tonos cálidos a fríos. Otro ejemplo mítico de microinteraccion mal diseñada es el cierre de un coche con el mando a distancia. Justo después de apretar el botón del mando las luces del coche parpadean y suena un pitidito, todo fantástico si no fuera porque cuando abres el coche ocurre prácticamente lo mismo.  Por este motivo la mayoría de la gente presiona el botón del mando varias veces e incluso más de uno vuelve a salir a la calle a comprobar si el coche esta cerrado. Una microinteracción se compone de 4 partes: Los Triggers (Disparadores) que la inician,  las Rules (Reglas) que determinan su funcionamiento, el Feedback generado por las rules que dan información de estado y por último los Loops and modes que… Vamos a desgranar cada una de estas partes: 1.- Triggers (Disparadores) que la inician Un trigger es lo que inicia la microinteracción. Es importante que el usuario identifique fácilmente el trigger, que no haya discordancias visuales, por ejemplo si el trigger parece un interruptor debe actuar como tal. Cuanto más común y usada sea la microinteracción, más visible y fácil de reconocer debe ser el trigger. Ej: Durante el diseño de la web para la Drupalcamp Spain 2017 decidimos ubicar el call to action para comprar entradas como un botón flotante que este siempre visible, en todo momento y por todo el sitio. Existen dos tipos de triggers: Manuales: Es el usuario es el que determina cuando se inicia la microinteracción. Estos triggers surgen del deseo del usuario de hacer algo: Quiero apagar la alarma, quiero saber como ir a Lisboa, quiero iniciar un chat con mi ex-novia, etc. El ejemplo más obvio y común de este tipo de triggers es el botón. De sistema: Se activan de forma automática y sin intervención humana si se cumple una determinada condición. La mayoría de las veces el usuario puede configurar y limitar estos triggers.  Ejemplos típicos de condiciones pueden ser: Errores: Cuando se produce un error en una app el sistema lo comunica mediante una microinteración. Ej: Endomondo genera un aviso por voz y muestra un icono de color rojo cuando se pierde la señal GPS. Cambios en la ubicación: Cuando entramos o salimos de una ubicación concreta. Ej: Tripadvisor muestra sugerencias sobre restaurantes de las ciudades a las que acabas de llegar mediante notificaciones  push a los móviles de aquellos usuarios que previamente lo han autorizado. Datos entrantes: Un nuevo email, una actualización disponible, el tiempo, una llamada, un mensaje, etc. Ej: Cualquier smartphone al recibir una llamada muestra varias opciones de forma automática como coger la llamada, colgar o responder con un sms. Otras microinteracciones: en muchas ocasiones una microinteracción precede a otra y forman parte de una feature o macrointeracción. Por ejemplo, en el registro de un usuario después de introducir email y contraseña puede enviarse un email para confirmar la cuenta mediante un link. 2.- Rules (Reglas) que determinan como funciona Las reglas sirven para crear un modelo de la microinteracción y deben reflejar tanto las restricciones del contexto como las restricciones del negocio. La clave a la hora de definir las reglas es reducir la complejidad. Limitar las opciones al mínimo y fijar unos valores por defecto. Cuantas más opciones más reglas. Toda aquella información que conocemos a priori debe utilizarse para confeccionar las reglas. Datos del usuario que tenemos guardados, datos de la plataforma, o del entorno. Ej: Instagram usa datos que tiene de la gente a la que seguimos y nos sigue para generar las rules de la microinteracción que nos sugiere seguir nuevos usuarios. Hay que definir estados para cada elemento y ver como cambia con el tiempo o con la interacción del usuario. Las reglas también sirven para prevenir errores. Evitar que el usuario pueda cometer un error. 3.- Feedback que informa al usuario de lo que está ocurriendo El feedback es posiblemente la parte más importante de una microinteracción porque ofrece al usuario información que le permite entender cómo transcurre la acción. Es importante definir qué información necesita saber el usuario y cuándo necesita saberla. Existen los siguientes tipos de feedback: Feedback visual: Animaciones y mensajes. El más común de todos los tipos de feedback. Ej: Asana muestra un mensaje de confirmación flotante cuando el usuario marca una tarea como completada. Feeback en forma de audio: Earcorns y voz (speech). Los earcorn son sonidos distintivos que se emplean para anunciar determinados eventos: arranque del sistema, nuevo mensaje, etc. Quizá el earcorn mas famoso de la historia sea el mítico sonido de arranque de Windows XP, o el de error! El feedback por audio también puede ser simplemente por voz, las voces sintetizadas ya son muy realistas y cada vez es más común que una app nos informe de cualquier cosa de esta forma. Feedback vibrotactil: El dispositivo en cuestión vibra para enviar al usuario algún tipo de información.  Mucho ha llovido desde que en 1976 el video juego arcade de Moto Cross "Fonz" añadiera el primer feedback vibrotactil de la historia de forma que los jugadores podían sentir la vibración al chocar contra otras motos dentro del juego. Hoy día este tipo de feedback es muy común en consolas, máquinas recreativas, smartphones y tablets. Ej: El Steam controller implementa este tipo de feedback. El feedback nos permite dotar de personalidad a nuestra microinteracción y por consiguiente a nuestra aplicación.  Ej: Mailchimp da un toque de humor genial al momento crítico de enviar una campaña de email marketing. Siempre que sea posible hay que dar feedback al usuario para evitar momentos de incertidumbre. Un buen feedback nos da esa fantastica sensación de tener el control de la app. 4.- Bucles y modos Cuando existen acciones poco frecuentes que pueden enturbiar la microinteraccion utilizamos lo que se conoce como “modo”.   Un modo es un espacio concreto en el que el funcionamiento de la microinteracción cambia. Ya en los inicios de la computación moderna el mítico editor de texto para sistemas UNIX Vi basaba su manejo en el cambio de modo: El modo comando permitía desplazarse dentro de un archivo y realizar operaciones de edición como buscar, eliminar texto, modificar texto, etc. mientras que el modo insertar permitia escribir texto nuevo en el archivo. Para cambiar de modo había que presionar la tecla ESC. (Aunque hable de él en pasado todavía cientos de miles de programadores y administradores de sistema siguen usando Vi a diario). Ej: Captura del Editor vi para Mac OS. Siempre que sea posible un modo debe tener su propia pantalla para evitar confusión. Ej: Airbnb permite a los usuarios usuarios que tienen su casa en alquiler en la plataforma cambiar entre el modo viaje y el modo host. Por último los bucles (loops) determinan la duración de una microiteracción y definen si esta se repite o cambia en el tiempo. Los parámetros de los loops deben ser elegidos con mucho cariño para asegurar la mejor experiencia de usuario. Los loops de larga duración se emplean para dotar de memoria a la microinteración y para ir simplificándola a lo largo del tiempo.   Como diseñadores es importante usar las microinteracciones de forma correcta ya que nos permiten mejorar la experiencia de usuario y dotar a nuestros productos de ese toquecito mágico que engancha a los usuarios.
https://wildwildweb.es/es/blog/los-mejores-modulos-drupal-para-tu-web-responsive
16/01/2017
El diseño web responsive ha pasado de ser un servicio extra para los clientes a casi una obligación. No se contempla ya la posibilidad de hacer una web sin seguir este paradigma. Y no solo en Drupal, sino en cualquier CMS. Mucha culpa de esta nueva pauta a la hora de diseñar la ha tenido Google, que en 2015 decidió dar un nuevo empuje a esta filosofía de diseño incluyéndolo como factor importante de medición para el posicionamiento SEO técnico. A día de hoy, las webs que están perfectamente adaptadas a cualquier dispositivo tienen mejor ranking en Google, mientras que las demás sufren penalizaciones. Pero Google no ha sido el único que ha impulsado esta tendencia. Los propios usuarios han sido más exigentes y han valorado muy positivamente las webs con este diseño, dejando de usar las que les resultaban incómodas de navegar desde sus pequeños dispositivos. Drupal no se ha quedado atrás en esta tendencia cada vez más asentada y la comunidad no para de generar módulos expresamente desarrollados para la creación de webs responsive.  Actualmente no hay ninguna barrera entre el diseño responsive y el desarrollo web en Drupal. Cualquier propuesta de diseño puede ser perfectamente ejecutada gracias a todos los módulos que existen. Incluso paradigmas de diseño como el "Mobile First", que consiste en diseñar primero las versiones para móvil de la web e ir escalando el diseño hasta la versión para desktop, son perfectamente compatibles con la creación de un sitio basado en Drupal. Aquí os dejamos una lista de los mejores módulos para diseño responsive en Drupal:   Responsive Menus El famoso “menú hamburguesa” es un elemento indispensable para cualquier diseño responsive de calidad. Lo ideal sería hacer un pequeño desarrollo combinando Jquery con Css, pero este módulo te ahorrará ese tiempo. Una vez instalado podrás configurar muchas opciones, como por ejemplo a qué medida de pixeles quieres que se active el menú o qué estilo quieres que tenga.   Responsive Images and styles Uno de los mayores problemas del diseño responsive es la carga de imágenes. Un peso muy alto en las fotos hace que la web cargue muy lenta en los dispositivos móviles. Este módulo nos permite crear diferentes estilos de imagen para que la web sirva automáticamente las fotos adaptadas al tamaño de la pantalla. Además es compatible con el módulo Media, lo que hará que las imágenes subidas con el editor de texto también puedan tener esta capacidad.   Fitvids No se a vosotros, pero a mi me resulta bastante molesto entrar en una web que integra videos y no poder darle al "play" porque aparecen maximizados. Con este módulo se soluciona este problema ya que, una vez configurado, cualquier video que subas a la web aparecerá adaptado al tamaño correcto de la pantalla.   FooTable Otro de los quebraderos de cabeza entre los diseñadores y los desarrolladores son las tan temidas (y odiadas) TABLAS. Este módulo por fin ataca el problema "tablas vs. móviles" y lo soluciona con una integración que convierte la tabla en un cuadro de opciones desplegables muy intuitivo y con gran usabilidad.   Display Suite Creado en origen únicamente para webs de diseño fluido, en la actualidad se utiliza prácticamente en todos los desarrollos, y es un firme candidato a entrar en la siguiente versión del Core de Drupal. Lo más útil es que puedes elegir el diseño de los templates de los nodos sin necesidad de theming. Pero además, te permite crear campos personalizados, como por ejemplo campos con código PHP o campos que muestren bloques ya existentes, e integrarlos en la estructura del nodo.   Flex Slider Con este módulo conseguimos mantener fluidas las imágenes de un slider para que no se deformen. Su velocidad de carga es muy buena y permite configurar su estilo y tiempo de reproducción. No es una solución completa ya que, dependiendo del formato de las imágenes, pueden llegar a verse muy pequeñas en móviles y dar problemas de usabilidad.   Fields Groups + Easy Responsive Tabs to Accordion La mayor virtud de este módulo es que nos permite crear grupos de campos sin necesidad de theming. Entre los estilos que puedes elegir para mostrarlos está el modo pestañas o “tabs”. Aquí es donde entran en juego las restricciones del responsive ya que las tabs, por lo general, no funcionan correctamente en móviles por exceso de tamaño. Con el submódulo Easy Responsive Tabs to Accordion podrás convertir las tabs en un sencillo menú vertical fluido. Es una de las mejores soluciones responsive de Drupal que hemos utilizado hasta ahora.   Backstrech Las imágenes de fondo o backgrounds que se utilizan en portadas o en banners, suelen ser otro de los quebraderos de cabeza del responsive. Al ser un diseño fluido, lo más normal es que la imagen se deforme a medida que el contenedor reduce su ancho. Pero con este módulo conseguiremos que la imagen se mantenga con el mismo alto y SIEMPRE centrada, sin deformarse. Como véis hay un montón de módulos que nos pueden hacer la vida más fácil a la hora de implementar un diseño responsive en nuestra web Drupal. Es importante tener en cuenta que habrá que hacer siempre algunos ajustes tanto en CSS como en Jquery para que todo quede como queremos, pero gracias a estos módulos conseguiremos una web 100% responsive hecha con Drupal.
Tipografías de imprenta
01/09/2016
A veces me despierto por las noches empapado de sudor recordando los tiempos en los que al diseñar una web solo podía utilizar las llamadas "fuentes seguras" o "tipografías de sistema": Arial, Verdana, Trebuchet, Georgia o "mi preferida", la Comic Sans.  Afortunadamente esos tiempos ya terminaron y ahora la variedad tipográfica de la que disponemos es enorme. Tan grande que a veces podemos tardar más en elegir las fuentes y la herramienta, que en elegir una película en Netflix, cuya media ronda, en mi caso, los tres días y medio. Para ello, vamos a hacer a un repaso por los Web Font Services más populares y seleccionaré de cada uno de ellos mis tipografías favoritas.    Google Fonts Google Fonts es la herramienta más utilizada cuando hablamos de Web Font Services y la que tiene más fuentes. Es un servicio gratiuito y eso hace que dentro de las opciones tipográficas haya un poco de todo. De entre todas seleccionaré tres:   Open Sans   Source Sans Pro   Raleway     Typekit Typekit es el otro gigante junto a Google Fonts, entre los dos se reparten el mayor trozo del pastel. Pertenece a Adobe y en este caso sí es de pago, por lo que la calidad de las fuentes es un poco mayor, ya que encontramos muchas tipografías bajo licencia como la Futura. Futura   Proxima Nova   Museo Slab     Typoteque Typoteque ofrece una gran variedad de familias mediante un servicio de pago, tipo Typekit pero las fuentes que encontramos no son de la misma calidad (es díficil competir con Adobe), sin embargo hay algunas interasantes. Lo que sí que merece la pena sin duda es que eches un vistazo a su tienda de libros sobre tipografía.   Freda Sans Screen   Zico     Webtype A Webtype, también de pago, lamentablemente le auguro el mismo futuro que a Fontdeck, otro servicio de web fonts, que ha terminado echando el cierre, en parte porque competir sobre todo con Adobe y con Google es como jugar en la champions con una panda de amigos. Sin embargo, de entre la gran mayoría de fuentes totalmente prescindibles, destaco una: la Escrow, una elegantísima tipografía de serifa. Escrow    Brick En Brick han hecho suya la famosa frase de Mies Van der Rohe de "menos es más". Pocas fuentes pero la mayoría de gran calidad y totalmente gratuito. Entre otras puedes encontrar la Montserrat, la mejor alternativa a la Gotham, pero en este caso en todos sus pesos, a diferencia de lo que pasa en Google Fonts, que solo nos ofrecen uno. Montserrat    Bodoni   Bitter   Tras este repaso solo me queda invitarte a que visites cada uno de las distintas herramientas con cierta frecuencia porque su catálogo se va ampliando y actualizando constantemente. Que la fuente te acompañe.
Las 10 Directrices de usabilidad más importantes
24/06/2015
El gurú de la usabilidad Jakob Nielsen dijo hace ya muchos años que “si la gente no puede usar un sitio web porque no le resulta intuitivo, se irán a otra parte”. No le faltaba razón. Desafortunadamente hoy día todavía existe un porcentaje altisimo de sitios web que presentan serios problemas de usabilidad. La mayoría de los desarrolladores web no hacen análisis de usabilidad porque tienen poca o ninguna idea sobre la materia y los diseñadores tampoco, ya que sólo suelen pensar en la estética olvidándose de la usabilidad. Por esta razón os presentamos esta lista de las principales directrices de usabilidad web.   La calidad del diseño de un sitio web es un indicador de credibilidad. Múltiples estudios defienden que las personas no empleamos criterios rigurosos a la hora de juzgar un sitio web y que el diseño es la primera prueba en la credibilidad de un sitio web por encima incluso de la información fiable y de calidad. El scroll mola Con la aparición de los móviles no queda más remedio que hacer scroll en casi cualquier web y los usuarios se han acostumbrado a ello. Esto no quiere decir que no debamos ubicar cosas como el logo, el menú de navegación o el propósito del sitio en la parte superior y más visible. El azul sigue siendo el mejor color para los enlaces. Desde que Sir Tim Berners-Lee creó las primeras páginas de hipertexto y eligió el color azul para los enlaces de forma aparentemente aleatoria, esta directriz se ha impuesto como norma. El color azul es uno de los menos problemáticos para las personas con deficiencias de visión, de forma que casi todo el mundo puede ver el azul o más exactamente, casi todo el mundo es capaz de distinguir el azul como un color diferente de los demás.   El espacio en blanco mejora la comprensión. Este elemento no visible tiene un fuerte impacto en la UX. Si quieres que algo destaque añade espacio en blanco alrededor.   Los usuarios no ven la publicidad La ceguera publicitaria dicta que la mayoría de nosotros ignoramos consciente o inconscientemente la información que se nos muestra en forma de banners. Por esto debemos evitar el uso de cualquier técnica que haga parecer que un bloque es un anuncio.   La regla de Pareto también se aplica en internet El 20% de tus usuarios generaran el 80% del beneficio, sea cual sea éste.. compras, envíos de formularios, comentarios.. 3 clicks siguen siendo el máximo permitido Los usuarios deben encontrar lo que buscan sin superar los 3 clicks dentro de un sitio web. Esta regla es especialmente importante en tiendas online.   Los humanos sólo pueden retener a la vez entre 5 y 9 cosas en la memoria a corto plazo El mítico principio del 7 más o menos 2, se ha aplicado desde comienzos de los 90 para limitar el número de items de un menú de navegación a 7. Esta regla se puede aplicar también a otros elementos del sitio como bloques de información o categorías.   El tiempo de carga es inversamente proporcional a la satisfacción de un usuario Otro principio clásico, conocido como la regla del segundo segundo, antiguamente se decía que un usuario no debería esperar más de dos segundos para obtener algún resultado de sus acciones como la carga de una página o similar.   Los menús de navegación "Off canvas" no son sólo para móviles Desde que Facebook creara el primer menú de navegación offcanvas, los usuarios han ido acostumbrándose a ellos y hoy día empiezan a ser un estándar no sólo en móviles sino en cualquier resolución de pantalla.