diseño web

La importancia de los Microcopies
¿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
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
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 determinan la duración de una microiteracción, definen si esta se repite o cambia en el tiempo y nos permiten cambiar el funcionamiento de la misma en escenarios especialmente farragosos. 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.
Cómo instalar drupal 8 en 5 minutos
Drupal 8 es la versión más reciente de drupal, incluyendo grandes mejoras con respecto a la versión 7 y dando un salto importante en tecnología, rendimiento y extensibilidad, su nuevo “core” basado en PHP orientado a objetos hace uso de algunas de las tecnologías más conocidas y exitosas como Symfony, Composer, Twig y muchas más, mejorando la experiencia del usuario y facilitando el trabajo de desarrollo. En este artículo vamos a mostrar la manera más simple y rápida de tener una web funcionando con drupal 8 en español en muy poco tiempo, en concreto será suficiente con 5 minutos (sin contar los tiempos de descarga/subida de ficheros ni el tiempo de instalación, que varía en función del servidor utilizado). Qué necesitamos Antes de comenzar necesitamos disponer de un entorno donde realizar la instalación que cumpla los requisitos técnicos para ejecutar drupal 8, lo más común sería un servidor con Apache 2.x, MySQL (5.5.3 o superior) y PHP (5.5.9 o superior), estos requerimientos son muy comunes por lo que prácticamente cualquier proveedor de hosting los ofrece dentro de su catálogo de servicios. Además existen algunas soluciones de instalación automatizada (Installatron es una de los más conocidas) que incluyen drupal dentro de su catálogo de aplicaciones. En caso de no disponer de una solución de estas características, los diferentes paneles de control que suelen ir incorporados a cada hosting (cPanel, DirectAdmin, etc.) facilitan mucho las diferentes tareas a llevar a cabo para la instalación. Algunos proveedores de hosting especializados como Pantheon.io incluso ofrecen una instalación automatizada completa haciendo posible crear un sitio en drupal 8 en pocos clicks. En cualquier caso, el sistema de instalación manual es muy sencillo, y las tareas a llevar a cabo son muy similares se use el panel de control del hosting que se use. Existen dos componentes imprescindibles para el funcionamiento de drupal: El código fuente del sistema. Consiste en una árbol de carpetas y ficheros (cuya gran mayoría están escritos en php) que deben ejecutarse en el servidor web, normalmente en una carpeta que se llama “public_html”, “www” o “htdocs”, tanto la ubicación como el nombre de esta carpeta depende de la configuración que el proveedor de hosting haya establecido en el sistema operativo del servidor, para este artículo vamos a suponer que dicha carpeta es “public_html” y nos referiremos a ella como la carpeta “raíz”. La base de datos. Toda la información que el código fuente necesita almacenar se guarda en una base de datos gestionada por el servidor de base de datos, la arquitectura de los sistemas depende de muchos factores y puede ser muy variada y en este artículo vamos a dar por hecho que tanto el servidor web como el de base de datos son el mismo, ya que es la configuración más común en los alojamientos de pequeño tamaño. Minuto 1. Preparar el código fuente Para preparar el entorno necesitamos incorporar los elementos que van a conformar nuestro sistema, primero obtendremos el código fuente necesario, realizando los siguientes pasos: 1. Descargar la última versión disponible de drupal 8 en la página oficial de drupal. Obtendremos un fichero comprimido con el árbol de carpetas y archivos que conforman el código fuente. 2. A continuación, ya sea mediante el administrador de archivos del panel de control del hosting o mediante un cliente FTP es necesario subir el fichero descargado a la carpeta raíz del servidor web. 3. El siguiente paso es descomprimir el fichero que acabamos de subir, normalmente el administrador de archivos del panel dispone de la opción “Descomprimir” o “Extraer”, si no disponemos de dichas opciones, entonces en lugar de subir el fichero comprimido, lo que haremos será descomprimirlo en nuestro equipo y subir a la carpeta raíz todos los archivos y carpetas con la misma estructura que tienen dentro del fichero comprimido. Una vez terminada esta operación, podemos borrar el fichero comprimido que habíamos subido inicialmente, de modo que en nuestra carpeta raíz quede de la siguiente forma: 4. Crear carpeta de traducciones. Este paso solamente es necesario si queremos instalar drupal en un idioma distinto del inglés, para ello es necesario crear la carpeta “sites/default/files/translations”, en la reciente creada estructura de carpetas navegaremos hasta “sites” > “default” y veremos que no existe la carpeta “files”, la creamos y dentro de ella creamos “translations”, para evitar problemas de permisos durante la instalación, le asignaremos permisos “777” tanto a la carpeta “files” como a “translations”, una vez finalizada la instalación se pueden modificar para aplicar una configuración más restrictiva. 5. Crear archivo settings.php. En la carpeta “sites/default” duplicaremos el archivo default.settings.php y le pondremos el nombre “settings.php” al archivo nuevo, también le asignaremos permisos “777”. Minuto 2. Preparar base de datos El segundo componente imprescindible de nuestra instalación es la base de datos, para ello es necesario crearla desde el panel de nuestro hosting, en la opción “Gestionar bases de datos” o “Gestión de MySQL” o algún nombre similar, el objetivo final es disponer del nombre de una base de datos y del nombre y contraseña de un usuario autorizado para operar con dicha base de datos, los pasos a seguir varían en función del panel de control que se utilice, pero suelen ser los siguientes: 1. Crear base de datos asignándole un nombre 2. Crear usuario de base de datos, asignándole la base de datos recién creada para que pueda operar con ella. En algunos paneles estas dos operaciones se realizan de manera simultánea desde la misma ventana de creación de base de datos. Minuto 3. Ejecutar instalador Es el momento de abrir con el navegador nuestra página web, si se ha incorporado correctamente el código fuente, aparecerá automáticamente la página de instalación en la que debemos ir seleccionando las opciones que más nos interesen para configurar nuestro sitio drupal: 1. Seleccionar idioma. En este caso seleccionaremos “Español” y pinchamos en “Save and continue” 2. Seleccionar perfil. Seleccionaremos la opción “Estándar”, ya que incorpora las características más comunes preconfiguradas, la opción “Mínimo” está indicada para usuarios avanzados que quieran construir el sitio desde cero personalizando todas las funciones. 3. Configuración de la base de datos. En esta ventana introduciremos los nombres de la base de datos y del usuario que habíamos creado, así como la contraseña que habíamos definido, normalmente las opciones avanzadas no es necesario cambiarlas a menos que la configuración del servidor así lo exija. Tras pulsar en “Guardar y continuar” comenzará la instalación de los componentes del sistema y posteriormente la importación de las traducciones necesarias al español, el tiempo de instalación puede variar en función de la velocidad y potencia del servidor que estemos utilizando, durante todo este tiempo, en la pantalla aparecerá una barra de progreso y un texto informativo indicando lo que se está haciendo y el porcentaje completado. Minuto 4. Configurar sitio Al terminar el proceso se mostrará una pantalla donde hemos de configurar la información básica del sistema: 1. Nombre e email del sitio 2. Nombre, email y contraseña del usuario administrador 3. País y zona horaria predeterminada 4. Avisos de actualizaciones Pinchamos en el botón de guardar y nuestro sitio drupal cargará por primera vez con la sesión iniciada para el usuario administrador. Minuto 5. Cambiar permisos de archivo settings.php Una vez terminada la instalación es el momento de cambiar los permisos del fichero settings.php, los permisos recomendados son 444, es decir, eliminar los permisos de escritura y ejecución para todos los usuarios, esto es muy importante ya que si no se hiciera estaríamos creando un enorme agujero de seguridad en nuestro sitio web. ¡Conseguido! Ya tenemos operativo nuestro sitio web en drupal 8. Con drupal 8 disponemos de un sistema con amplias posibilidades de configuración, podemos añadir nuevas funcionalidades instalando alguno de los miles de módulos disponibles en drupal.org o creando a medida lo que necesitemos e incorporar un tema personalizado que le dé un aspecto e imagen únicos. Dispondremos de un sistema fiable, seguro y escalable centrado en el rendimiento, no tendremos que preocuparnos de si responderá al ritmo de crecimiento de nuestro negocio, ya que drupal puede atender las necesidades tanto de un pequeño blog como de una web corporativa de ámbito global con miles de usuarios y millones de páginas vistas.
Los mejores módulos Drupal para tu web responsive
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.
Los 80 sitios web Drupal más importantes del mundo
Durante los últimos años, Drupal se ha consolidado como uno de los CMS’s más utilizados del mundo y está presente en los servidores de muchas empresas y organizaciones de primer nivel. Cansado de bucear en los típicos showcases desactualizados, que muestran subsitios y microsites de poca monta solo por el hecho de pertenecer a marcas de renombre, me he decidido a crear mi propia selección. Los sitios de la lista han sido seleccionados porque tienen un tráfico muy elevado, un desarrollo de alta complejidad o porque son la cara visible de marcas de relevancia mundial. No ha sido fácil, pero aquí va mi selección de los 80 sitios web más relevantes de la escena Drupal.   Tesla Motors El fabricante de coches eléctricos más puntero y moderno del mundo encabeza nuestra lista de empresas y organizaciones que usan Drupal. ​http://www.teslamotors.com/ Johnson & Johnson Fabricante de dispositivos médicos, productos farmacéuticos y de cuidado personal con más 230 empresas filiales y presencia en 175 países. http://www.jnj.com/ Virgin Sitio principal del conglomerado de empresas Virgin Group. https://www.virgin.com/ General Electric La mega corporación multinacional fundada por el inventor de la bombilla, Thomas Alva Edison. http://www.ge.com/ Burger King Ultra conocida cadena de comida rápida. http://www.bk.com/ Pfizer Multinacional farmacéutica. http://www.pfizer.com/ Mattel La empresa de juguetes más grande del mundo. http://play.mattel.com/ Time Warner Corporación multinacional dedicada a la explotación de medios de comunicacion, cine, tv y publicaciones diversas. http://www.timewarner.com/ NBA Una de las 3 competiciones deportivas más importantes del mundo. http://www.nba.com/ CSV Health Gigante norteamericano de la industria sanitaria y retail farmaceutico. https://cvshealth.com/ Nokia Multinacional finlandesa de telecomunicaciones y tecnología. https://nokia.com/ World Fuel Services Multinacional dedicada a servicios relacionados con el transporte de combustibles y una de las 100 empresas más grandes del mundo. https://www.wfscorp.com/ Qualcomm Empresa de técnología productora de hardware y software de diversa índole. https://www.qualcomm.com/ PBF Energy Gigante dedicado al mundo del petróleo y sus derivados.  http://www.pbfenergy.com/ Guerlain Multinacional de perfumes y demás productos de cosmética. http://www.guerlain.com/ Stanley Black & Decker La mítica marca de herramientas. http://www.stanleyblackanddecker.com/ Indra Sistemas Multinacional española de tecnología, consultoría, defensa y comunicaciones. http://www.indracompany.com/ Parrot Líder mundial en venta de manos libres que ahora también vende todo tipo de “juguetes” para niños y para adultos. https://www.parrot.com/ Clinique Multinacional americana de productos de cosmética. http://www.clinique.com/ National Collegiate Athletic Association Asociación que se encarga de la mayoría de los programas y becas deportivas en los EEUU. Está compuesta por más de 1200 instituciones y genera unos ingentes beneficios cada año. http://www.ncaa.com/ PGA La asociación de golfistas profesionales de América y el circuito de golf más importante de Norteamerica tienen su sitio web en Drupal. http://www.pga.com/ The Weather Channel Empresa de información meteorológica con diversas cadenas de TV y sitios web. http://www.weather.com/ Organizaciones Gubernamentales, ayuntamientos, y empresas públicas Naciones Unidas Organización supranacional para promocionar la cooperación internacional... o eso dicen ellos que hacen. http://www.un.org/en/index.html The White House Portal de la presidencia de los Estados Unidos. http://www.whitehouse.gov/ New York State  Sitio oficial del Estado de New York. http://ny.gov/ City of Boston Portal municipal del Ayuntamiento de Boston. https://www.boston.gov/ City of Los Angeles Portal municipal de la ciudad de Los Angeles. https://www.lacity.org/ City of London Ayuntamiento de la ciudad de Londres. http://london.gov.uk/ Gobierno de Francia Portal del Gobierno de Francia. http://www.gouvernement.fr/ Gobierno de Bélgica Portal del Gobierno de Bélgica. http://www.belgium.be/ Parlamento de Nueva Zelanda Portal del Parlamento de Nueva Zelanda. https://www.beehive.govt.nz/ National Institutes of Health Instituciones del Gobierno de los Estados Unidos dedicadas a la investigación médica.  https://www.nih.gov/ Sydney Web de turismo de la ciudad de Sydney. http://www.sydney.com/ SNCF La compañía estatal francesa de ferrocarriles. http://www.sncf.com/ Las principales universidades del mundo Harvard University La mejor universidad del mundo, según la mayoría de clasificaciones de universidades. http://www.harvard.edu/ Oxford University Probablemente la univerdad más famosa del mundo, con más de 1.000 años de historia. http://www.ox.ac.uk/ The George Washington University  Otra gran universidad de los EE.UU. https://www.gwu.edu/ University of Calgary Universidad de Calgary, una de las más prestigiosas de Canadá. http://www.ucalgary.ca/ Yale University Una de las instituciones educativas con más prestigio del mundo. http://www.yale.edu/ Columbia University Otra de las grandes universidades de los EE.UU. http://www.columbia.edu/ MIT Media Lab Laboratorio del MIT dedicado a proyectos de tecnología, diseño y multimedia. http://www.media.mit.edu/ Medios de comunicación, musica y entertaiment The Economist Periódico económico de tirada mundial. http://www.economist.com/ Le Figaro El periódico más antiguo de Francia y uno de los 3 grandes del país. http://www.lefigaro.fr/ Independent Periódico independiente del Reino Unido (desde hace poco, sólo tiene edición digital). http://www.independent.co.uk/ NBC Gigante de radio y TV. http://www.nbc.com/ MSNBC Uno de los canales de noticias más importantes del mundo. http://www.msnbc.com/ MTV UK Sitio de la cadena musical en el Reino Unido. http://www.mtv.co.uk/ Popular Science Todo un clásico entre los frikis de la ciencia. http://www.popsci.com/ Patch Portal independiente de noticias. http://patch.com/ El Espectador Mítico periodico Colombiano. http://www.elespectador.com/ Elmogaz Portal de noticias Egipcio. http://www.elmogaz.com/ Warner Bros Gigante del mundo del cine, la música y la televisión. http://www.warnerbros.com/   Turner Broadcasting System  Empresa que gestiona los canales y grupos de televisión que son propiedad de Time Warner.  Algunas de sus marcas son CNN, TBS, TNT, Cartoon Network, Boomerang y TCM. http://www.turner.com/ Entertaiment Magazine online sobre cine, series, música y tv. http://www.ew.com/ Health Magazine de salud que ocupa un puesto destacado en el ranking de tráfico mundial. http://www.health.com/ Windows Central Magazine sobre el sistema operativo Windows. http://www.windowscentral.com/ Linux Journal Y ahora su homónimo para Linux, aunque hace tiempo que pasaron sus tiempos gloriosos. https://www.linuxjournal.com The Grammy’s Los precios Grammy de la Academia Nacional de Artes y Ciencias de la Grabación. http://www.grammy.com/ The Beatles Official Website  The Beatles usan Drupal, Yoko Ono usa wordpress.  http://www.thebeatles.com/ Organizaciones no gubernamentales Oxfam Sitio principal del conjunto de organizaciones para combatir la probreza en el mundo. https://www.oxfam.org/ Médicos sin fronteras Una de las ONGs más grandes del mundo. http://www.msf.org/ World Food Programme Sitio del programa de las Naciones Unidas para combatir el hambre en el mundo. http://www.wfp.org/ Electronic Frontier Foundation Fundación para los derechos humanos en el mundo digital. https://www.eff.org/ Los principales Museos del mundo Louvre El museo más importante del mundo. http://www.louvre.fr/ Reina Sofia Museo de arte contemporáneo de Madrid. http://www.museoreinasofia.es/ Tate Gallery Museo Nacional Británico de Arte Moderno. http://www.tate.org.uk/ The Metropolitan Museum of Art Subsitio del Museo Metropolitano de New York. http://82nd-and-fifth.metmuseum.org/ Sitios sobre religión y espiritualidad Bible.org Los caminos de Drupal son inexcrutables. https://bible.org/ Al Islam Plataforma líder para estudiar el islam online. https://www.al-islam.org/ y para terminar unas cuantas organizaciones, startups y empresas de diversa índole Icann Whois La herramienta para hacer whois de la ICANN usa Drupal para tales menesteres. http://whois.icann.org/en Real Academia de la Lengua Española La Real Academia de la Lengua Española confía también en Drupal para defender el Español.  http://www.rae.es/ Zoho Multinacional hindú que provee cantidad de herramientas en la nube para empresas. https://www.zoho.com/ Typepad Plataforma de blogging de capa caída desde hace años pero todavía con muchísimo tráfico. http://www.typepad.com/ Bodeboca El club y tienda de vino online más grande de España. http://www.bodeboca.com/ Mint Plataforma de gestión de finanzas personales. https://www.mint.com/ Box Box es un servicio de herramientas para trabajar en la nube. https://www.box.com/ Taboola Plataforma de marketing de contenido que se ha convertido en uno de los sitios Drupal con más tráfico del mundo. https://www.taboola.com/ Legacy.com El mayor obituario digital del mundo. Tiene un tráfico brutal y Alexa le atribuye la posición 1363 del mundo. http://www.legacy.com/ Rackspace Una de las mayores empresas de hosting del mundo. https://www.rackspace.com/ Magento Uno de los ecommerce más potentes del mundo usa Drupal para su web comercial. https://magento.com/
Tipografías de imprenta
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
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.
¿Quieres volar?Nosotros te ayudamosEscríbenos