ux

Dark Patterns UX
20/06/2018
Los patrones oscuros o dark patterns son patrones de diseño que se utilizan de forma intencionada para engañar al usuario y que lleve a cabo acciones contra su voluntad. El engaño y la mentira están profundamente enraizados en nuestro querido sistema capitalista. El diseño de experiencia de usuario no podía quedarse al margen y ha asimilado algunas prácticas engañosas ya existentes e inventado otras nuevas. El neologismo "dark pattern" fue inventado por el diseñador Harry Brignull hace unos años cuando registró el dominio darkpatterns.org para definir y catalogar estos patrones de diseño. Los Dark Patters más comunes son: Confirmshaming (Confirmar la vergüenza) Cuando tienes que activar alguna opción o darte de alta en algún servicio o de lo contrario te hacen sentir culpable, avergonzado, imbécil o mala persona. Tumblr quiere que nos sintamos malas personas si no desactivamos nuestro Ad blocker. Disguised Ads (Publicidad disfrazada) Los anuncios aparecen "disfrazados" como contenido normal, reproductores de vídeo o elementos de navegación para confundirte y que hagas click en ellos sin saberlo. Plusdede muestra un supuesto reproductor de vídeo y cuando haces click en el play se abre una ventana de publicidad en lugar de iniciar la reproducción de la película. Forced Continuity (Continuidad forzada) Cuando te ofrecen un servicio de prueba o trial gratuito y al terminar te empiezan a cobrar sin avisarte. Esta práctica es bien conocida en España, ya que es una de las favoritas de las operadoras móviles, te llaman, te ofrecen un nuevo servicio gratuito y más tarde te das cuenta que te lo están cobrando.  También se incluye en esta tipología a las suscripciones que se renuevan de forma automática sin avisar. Audible nos invita a probar gratis un mes pero al terminar el periodo de prueba no te pregunta si quieres continuar. Friend Spam (Spam amigo) Nos piden permisos para acceder a nuestros contactos de email, de alguna red social o de nuestro teléfono para una acción concreta, por ejemplo encontrar amigos y luego hacen lo que les da la gana con esos permisos, como enviar spam a todos tus amigos. El episodio más sonado relativo a este patrón oscuro fue cuando multaron a Linkedin con 13 millones de dólares por llevar a cabo esta práctica hace algunos años. Misdirection (Distracción) Como su propio nombre indica es cuando se distrae al usuario de lo que realmente importa para que no vea algo y siga adelante con algún proceso.  Price comparison prevention (Evitar la comparación de precios) El sitio web hace muy difícil que puedas comparar un elemento con otro, de forma que no puedes tomar una decisión estudiada. Privacy Zuckering (Marcarse un Zuckenberg) Cuando eres engañado para compartir mas información privada de la que realmente quieres. El nombre es en honor a Mark Zuckerberg, CEO de Facebook. Este se produce porque muy a menudo, al utilizar un servicio online, la letra pequeña oculta en los términos y condiciones otorga permisos al sitio web para vender tus datos personales a otras empresas. Roach motel (Hotel de cucarachas)  Tras este ridículo nombre se oculta una práctica muy común que consiste en facilitarnos la entrada o alta a un servicio y dificultar tremendamente darse de baja del mismo.  Te suena ¿verdad? ¡efectivamente! es lo que hacen todos los operadores móviles en España. Te puedes dar de alta en su web en 5 minutos pero para darte de baja tienes que solicitarlo por fax. Canon no subraya el link a Cancelar la suscripción a su newsletter para que no lo veamos. Bait and switch (Cebo y cambio) Aquellos casos en los que el usuario quiere realizar una acción y lleva a cabo otra totalmente distinta, que es la que le interesa a la web "engañosa". Sneak into basket (Colarse en la cesta) Se trata de una práctica de los sistemas de venta online donde se incluye algún elemento extra a la cesta de la compra con la intención de que lo compres sin darte cuenta. El elemento extra se suele añadir mediante algún checkbox o radio button que está activado y es poco visible en algún paso previo a la cesta. Era una práctica muy común en las webs de las compañías aéreas low cost, aunque afortunadamente cada vez se hace menos. Godaddy te intenta colar un servicio de Privacidad al comprar un dominio Hidden Costs (Costes ocultos)  Esta es casi igual que la anterior, se suele aplicar cuando estás en el último paso del proceso de compra y de repente aparecen unos gastos extra que no conocías, como pueden ser los gastos de entrega o los impuestos. La diferencia con Sneak into Basket es que no aparecen hasta el último paso del proceso de compra.   El uso de patrones oscuros puede resultar lucrativo y beneficioso a corto plazo pero a la larga casi siempre afecta negativamente al branding de cualquier organización. La alternativa a estos dark patterns sería realizar buenos diseños persuasivos que convenzan al usuario de forma positiva para llevar a cabo las acciones deseadas. Foto principal: Rendiansyah Nugroho
La revolución de los asistentes de voz
23/05/2018
Hacer una reserva o pedir hora para el médico ya es cosa del pasado, ahora gracias a la tecnología desarrollada por Google un asistente personal por voz lo hará por ti. ¡Bienvenidos al presente de la inteligencia artificial!  El pasado martes 8 de mayo, el gigante de las tecnologías reunió a desarrolladores de todo el mundo con motivo de la conferencia anual Google IO 2018, centrada en explorar el futuro de la tecnología. Este año el punto de mira ha estado puesto en el desarrollo de las inteligencias artificiales. Entre los lanzamientos más importantes de IA que se han presentado, uno de los más destacados ha sido Google Duplex, una inteligencia artificial que tiene la capacidad de entablar conversaciones reales con los usuarios. ¿Cómo funciona y cómo podría revolucionar la industria? Desde el anfiteatro Shoreline de Mountain View (California), el director general Sundar Pichai se mostró claro ante su apuesta por la IA y la investigación, presentando en primicia "Google Duplex". Esta nueva tecnología reforzará las funciones del asistente de Google hasta ahora existentes y aportará naturalidad a la forma de hablar gracias a la implementación de seis nuevas voces incluida la de John Legend. ¿No es genial? Un secretario personal en la palma de tu mano Entre las posibilidades que ofrece esta IA, destaca la de pedir al asistente por voz que reserve en un restaurante o coja cita para la peluquería. Google está tomando claramente la delantera en la industria de servicios de voz e inteligencia artificial. Esta nueva tecnología espera ser probada este mismo verano en los altavoces inteligentes de su propia marca. ¿Cómo podría mejorar nuestra calidad de vida? La idea detrás del Duplex de Google es hacer una IA realista que hable como nosotros, reaccione como nosotros y nos haga incluso llegar a sentir que estamos hablando con una persona real. En el vídeo de la conferencia, la IA no suena en absoluto como un robot o una voz como la que estamos acostumbrados a oír de Siri, Alexa o Cortana. ¡Parece que el futuro de los asistentes de voz ha llegado! Según Nick Fox (VP de diseño para Google Assistant): "No queremos forzar a otros a implementar estos cambios, pero así es como debe sonar un asistente". ¿Cómo vamos a diferenciar la IA de un humano en una conversación si son iguales? Puede que esta pregunta te haya venido a la mente, planteándote algunas cuestiones éticas. Los desarrolladores y diseñadores que construyen la IA "tienen la obligación de revelar a cualquiera que interactúe con ella que están hablando con una máquina", dijo Paul Saffo (de la Universidad de Stanford). A través de las redes sociales, muchos usuarios han mostrado su preocupación por el uso de esos robots: "Esas máquinas podrían ser utilizadas con fines políticos y para dar instrucciones de voto", comenta Kay Firth-Butterfield en Twitter). Durante la Google IO se mostró una demo de una conversación entre la IA y un empleado de una peluquería. El asistente de Google sonaba asombrosamente realista e incluso murmuraba "hemm..." mientras el otro interlocutor estaba comprobando su agenda. La voz era tan natural que el empleado ni siquiera se dio cuenta de que estaba hablando con una máquina. Según Google, este sistema puede resultar muy útil para los clientes y te preguntarás ¿por qué? Sin duda una de las principales ventajas es el ahorro de tiempo que supone para los usuarios, así como para las pequeñas empresas que no tienen sistema de reservas en línea. El objetivo es servir de ayuda para gestionar y realizar tareas. ¿Qué guarda en su interior la tecnología IA de Duplex? En el corazón de Google Duplex, encontramos una red neuronal artificial que ha sido entrenada para intercambiar, a través del teléfono, big data. Las llamadas se dividen en múltiples tareas: gestionar las pausas, interrupciones, dar información detallada o sincronizar con el altavoz. La IA también se adapta a las respuestas dependiendo de la importancia percibida. ¿El resultado?  Impresionante. A pesar de la complejidad de comprender el lenguaje humano y extraer conclusiones, Google Duplex es un sistema que es capaz de entender los matices de la conversación. Reúne la comprensión del lenguaje natural, el aprendizaje profundo y el habla textual: El Entendimiento del Lenguaje Natural (NLU) también es utilizado por IBM para procesar análisis avanzados de texto. Extrae muchos datos del contenido (palabras clave, conceptos, relaciones, etc.) y entiende el sentimiento y la emoción. Es posible averiguar si el sentimiento de un artículo es positivo o negativo y obtener información sobre la emoción con la que el autor está escribiendo. Además, se puede determinar en qué parte del artículo el escritor está expresando enfado, tristeza, miedo o alegría.  El aprendizaje profundo es parte de los métodos de aprendizaje automático basados en las representaciones de datos. Hoy en día, el poder de la IA ayuda a los ordenadores a desarrollar capacidades sobrehumanas y al reconocimiento de imágenes. Así, este tipo de aprendizaje permite a los científicos utilizar de una forma eficaz nuestros recursos, analizando en un mes lo que solía llevar 10 años. Los dispositivos que utilizamos a diario traducen incluso los lenguajes más complejos de la voz al texto y de las imágenes a las palabras. En 2015, DeepMind de Google creó el programa AlphaGo que utiliza el autoaprendizaje para vencer a los jugadores reales del juego de mesa Go. La tecnología Text-to-Speech (TTS) es un motor de voz utilizado para emitir palabras desde cualquier dispositivo. Por ejemplo, si viajas a algún lugar utilizando Google Maps, TTS te habla para decirte a dónde ir. Funciona con todos tipo de dispositivos digitales (ordenadores, tablets, smartphones). La voz es generada por ordenador y no sólo lee textos sino también imágenes a través del proceso de escaneo y reconocimiento óptico de caracteres (OCR) en tiempo real. Esta tecnología se utiliza para ayudar a los niños en el desarrollo de sus habilidades de lectura. ¡Parece que el futuro ya está aquí!  
Micromomentos
11/05/2018
¿Estamos entrando ya en ese futuro que veíamos en las series y películas de ciencia ficción? Por el momento los coches no vuelan, pero pulsando un botón electrónico desde casa te envían un producto al momento. En una era donde la inmediatez está a la orden del día, es lógico que los consumidores sean cada vez más impacientes. Pero… ¿Por qué? Sobre todo por el enorme desarrollo que ha experimentado la tecnología en la última década. Queremos todo aquí y ahora. Hace poco se decía que teníamos un mundo de posibilidades a un solo click, ahora este mundo es aún más acelerado y cercano. Lo podemos tener todo en la palma de nuestra mano. Gracias a la evolución del comercio web (Amazon ha hecho mucho bien o mucho mal, según se mire) y sobre todo a la de los dispositivos móviles, concretamente los smartphones, en un futuro podríamos acabar convertidos en algo parecido a los personajes humanos de la película Wall-E. Bromas aparte, desde que nos levantamos por la mañana hasta que nos acostamos, miramos las pantallas de nuestros teléfonos móviles de media unas 150 veces al día y aproximadamente durante 130 minutos. Es aquí cuando surge lo que se conoce como micromomento, aquel en el que una persona accede a un medio digital para satisfacer una necesidad de aprender, hacer, descubrir o comprar algo. Es curioso que el término haya sido acuñado por Google, el rey del Big Data, al que inconscientemente acudimos como si de un oráculo se tratase, y del que esperamos una respuesta inmediata y acertada: “cómo hacer esto, quiero ver aquello, necesito ver lo otro, etc." Respondemos a un estímulo de manera inmediata, esperando la mejor respuesta, con la que tomaremos una decisión mayoritariamente improvisada. Para hacernos una idea, después de que el consumidor haya sido impactado por X anuncios televisivos, puede surgir un destello, una necesidad de búsqueda de información en un corto espacio de tiempo. Esto es lo que conocemos como “ventana de oportunidad”. Prevenir el momento y el mensaje así como facilitar la infraestructura digital, permitirá a las marcas boxear en el ring de los micromomentos. Es necesario distinguir los micromomentos "O.G", los que consideraremos oportunidad de negocio, de los que no lo son, los "fake" que no nos interesan. Para ello según el gran oráculo Google, podemos establecer que un micromomento consta de cuatro partes: 1.- La persona: el cliente objetivo. Quién es y qué sabemos de él. 2.- La intención: información, compra, etc... 3.- El contexto: no todos los micromomentos son iguales. 4.- La inmediatez: necesidad de satisfacerlo de manera inmediata. En una época ultra-competitiva, en la que vivimos una gigantesca saturación publicitaria, donde el consumidor por norma general no considera una marca predeterminada en su búsqueda, sino que va investigando como Sherlock; los micromomentos son muy importantes, ya que el consumidor lo que realmente busca es satisfacer SU necesidad. Las empresas que elaboren una estrategia entendiendo y satisfaciendo estos micromomentos y necesidades, serán las triunfadoras de la batalla. Pero claro, no es todo oro lo que reluce, ni podemos conocer todos los micromomentos, ni todos los micromomentos son iguales. En general, queremos que se respeten nuestros momentos personales. Si publicamos nuestro desayuno en Instagram, y de repente nos aparecen dos elementos como Mario Vaquerizo y Rebeca vendiéndonos neumáticos a buen precio, lo consideraremos algo raro, intrusivo e incluso molesto. Otro caso totalmente distinto es que tengamos que pasar la revisión de nuestro coche pero no disponemos de demasiado cash. Puede que saquemos nuestro móvil del bolsillo y busquemos "neumáticos a buen precio" aquí es donde comienza la carrera de los micromomentos. Los micromomentos suceden a través del camino del consumidor De manera que, todo ello impactará en el llamado “camino del consumidor”, la peregrinación y fases en las que éste puede establecer un contacto con las marcas está en continuo cambio, y por lo tanto pueden suponer distintas oportunidades de negocio para las empresas. En primer lugar, en un determinado micromomento, una marca puede impactar y decir: ¡Oye, que estoy aquí!. En segundo lugar, en un micromomento en el que el consumidor necesite información, iniciando un proceso que puede acabar en compra, una marca debe ser capaz de entrar en la consideración del mismo, es decir, que se la tenga en cuenta a la hora de tomar la decisión: ¡Sabes que estoy aquí, y te ofrezco esto!. En tercer lugar, en la fase de compra es imprescindible no fallar, inmediatez y facilidad son las claves del éxito: ¡Pim, pam, pum, bocadillo de atún!. Y por último, la fidelidad y la lealtad son indispensables para conseguir una posible recompra: Vuelve a casa, vuelve por Navidad. Cómo podemos beneficiarnos de los micromomentos Debemos seleccionar con cuidado cuáles son los micromomentos que realmente queremos ganar. Tienen gran importancia los contenidos que ofrecemos, así como el tratamiento de los datos estadísticos o cualitativos que nos permiten una mejor segmentación. Por lo que para triunfar se debe: Analizar los micromomentos: qué se busca y en qué lugares. Es imprescindible conocer a los consumidores y a nuestro público objetivo. Analizar el contexto y momentos de contacto: adaptarnos y ofrecer soluciones de la manera más rápida y eficaz posible. Adaptar la UX: permitir movilidad entre los contenidos y el proceso de compra. Usabilidad y accesibilidad. En definitiva optimización, optimización y optimización. Posicionarse correctamente. Realizar mediciones sobre los diferentes micromomentos y el impacto de nuestras respuestas. Después de todo esto, espero que haya quedado claro que, a través de los micromomentos, se definen las preferencias de los usuarios. Además, no todos estos pequeños momentos son iguales en cuanto a importancia, y de hecho hay que evitar ser intrusivo. Por ello no podemos abandonar a la deriva como El holandés errante a nuestro target, hay que estar presentes ofreciendo las soluciones más rápidas, sencillas y sobre todo eficaces a través de las distintas fases del proceso de venta: preventa, venta y post venta. Hay muchas webs donde conocer con más detalle cómo las empresas utilizan los micromomentos actualmente, además contienen gran cantidad de información interesante y útil.
Chatbots
01/03/2018
Los chatbots son el mayor disruptor tecnológico en la escena del servicio al cliente.  Son el tema de conversación de cada call center, de cada equipo de soporte y de cada negocio digital en todo el mundo. Pero ¿qué son realmente los chatbots? Sencillo, es un servicio, impulsado por reglas y, a veces, inteligencia artificial, con el que interactúas a través de un chat. El servicio puede ser de varias formas, desde funcionales hasta divertidas, y puedes encontrarlo en sitios como Facebook Messenger, Slack, Telegram, mensajes de texto, blogs etc. y que ayudan en determinadas tareas que se pueden resolver sólo con preguntas y respuestas. El objetivo es que los usuarios que entren en contacto con los chatbots puedan aprovechar esta tecnología para recibir información de forma inmediata, agilizando el tiempo de respuesta entre marca y cliente/consumidor. Ten en cuenta que estos “bichos” trabajan 24/7 y que pueden responder simultáneamente a un gran número de mensajes. Debido a los casos de uso de chatbots de amplio alcance, existen varios servicios potenciales diferentes que pueden utilizar la tecnología. Actualmente, los usos más populares se encuentran en aplicaciones y servicios de mensajería, lo que permite a los clientes hablar directamente con una empresa, o viceversa. Popularizados por Facebook Messenger, las empresas también utilizan los chatbots para llegar a los usuarios a través de los servicios de mensajería instantánea. Esto puede ser en forma de servicio de atención al cliente o bien para enviar notificaciones automáticas, promociones, etc. Triunfar online no es fácil y ofrecer un servicio eficaz y de calidad es cada vez más necesario para no sucumbir a la competencia.   Los chatbots también se pueden encontrar en muchos dispositivos móviles líderes en la actualidad en forma de servicios de asistente personal. Los conocidos Siri (Apple iOS), Cortana (Microsoft Windows) y el Asistente de Google (Android) pueden clasificarse como chatbots, ya que pueden usar inteligencia artificial y aprendizaje automático para responder preguntas, aunque a un nivel superior a los chabots “tradicionales”. Algunos servicios incluso pueden vincularse a aplicaciones y servicios externos para brindar experiencias más enriquecedoras, como actualizaciones del clima, tiempos de viaje o incluso reservas en restaurantes. La compañía aérea holandesa KLM, por ejemplo, ha colocado un chat para atender mejor a sus pasajeros. Ahora, pueden recibir la confirmación de sus reservas, obtener la tarjeta de embarque o estar informados del estado de su vuelo en todo momento. Otro ejemplo es Moovit, un bot integrado en Facebook Messenger capaz de responder a las preguntas de los usuarios sobre la planificación de los desplazamientos, sugiriendo trayectos utilizando la red de transporte público. Con 900 millones de usuarios en todo el mundo dispone de información del transporte público de 800 ciudades. Pregunta del millón ¿Cómo me pueden ayudar los chatbots? Probablemente te estés preguntando ¿Por qué tanto revuelo con lo chatbots?  Gran pregunta y con una respuesta muy sencilla. Es porque, por primera vez, las personas usan las aplicaciones de mensajería más de lo que usan las redes sociales. Hoy, uno de los grandes problemas de las empresas sigue siendo la comunicación poco eficaz y fluida con sus clientes. La relación demorada y, a menudo, ineficaz, es objetivo de críticas. El chatbot puede ayudar a ofrecer un servicio de atención al cliente más rápido y asertivo. De acuerdo con una encuesta realizada por Lithium Technologies, el 53% de los consumidores que entran en contacto con las marcas, vía Twitter, esperan obtener respuesta dentro de una hora. Y este número crece hasta el 72% cuando se trata de quejas. El resultado reveló que sólo el 11,2% de las marcas responde en ese momento y que la mayoría de ellas (65%) responde en 24 horas. Este es un dato bastante alarmante para las empresas teniendo en cuenta lo que esa demora puede provocar, como pérdida del cliente y un branding negativo en las redes sociales. Aquí es dónde hay que aprovecharlos al máximo. Los chatbots pueden mejorar la experiencia del usuario, incluido el servicio al cliente, además de ayudar en campañas de marketing específicas. Ten en cuenta que si un cliente tiene un problema con un producto, puede conectarse con el chatbot para explicar la situación y este puede procesar esa información para proporcionar una recomendación sobre cómo arreglar el producto. Generar confianza es fundamental para que un negocio salga a flote y uno de los principales pilares si quieres vender en internet o tener una presencia digna de tu marca. Crear y configurar un chatbot Antes de nada y para que lo entiendas mejor: Existen dos tipos de chatbots, uno basado en un conjunto de reglas, y otra versión más avanzada que utiliza el aprendizaje automático. Chatbots basados en reglas: Estos bots son muy limitados. Solo pueden responder a comandos muy específicos. Si dices algo incorrecto, no sabrán a qué te refieres.   Chatbots basados en aprendizaje automático: Estos tienen un “cerebro artificial”. No tienes que ser ridículamente específico cuando hablas con él. Entienden el lenguaje, no sólo los comandos. Estos bots se vuelven cada vez más inteligentes a medida que aprenden de las conversaciones que tienen con las personas. Ahora bien, si estás pensando que configurar un chatbot, olvídalo. Es un proceso que requiere un nivel muy alto de conocimientos informáticos. Actualmente existen herramientas que facilitan la vida de quien no domina el tema y cuyo trabajo “duro” no es más que la creación de una conversación entre la audiencia y uno mismo.   Hay diferentes alternativas. Puedes optar por un framework oficial, como los facilitados gratuitamente por aplicaciones de mensajería como Facebook Messenger, Slack o Telegram, por ejemplo, o puedes optar por frameworks no oficiales como Botkit, ChatScript, Meya, Gupshup o Pandorabots. Además, existen varias plataformas comerciales con precios realmente interesantes que te dejan crear un chatbot desde cero. Las más conocidas son: Botsify, Flow XO, Rebotify, Morph.ai, Motion AI o Smooch. Asignar las posibles interacciones con tu público, entender cuál es el tono del discurso que quieres darle a tu chatbot y hacer que sus mensajes sean atractivos son requisitos fundamentales para que tu estrategia sea capaz de dar los resultados esperados. Los chatbots son fáciles de utilizar y muchos clientes los prefieren antes que llamar a un representante por teléfono porque suele ser más rápido y menos invasivo. También pueden ayudar a ahorrar dinero a las empresas y son fáciles de configurar. Debido a que la mayoría de los chatbots usan aplicaciones de mensajería que ya están en miles de millones de teléfonos en todo el mundo, es probable que tus clientes ya estén listos para tu bot. Los chatbots se alzan como el futuro de la experiencia del cliente y tienen el poder de reemplazar las ventanas de búsqueda y muchas aplicaciones en un futuro no muy lejano. Y ahora ¿te animas a lanzar tu chatbot?  
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 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.
Interruptor css puro
05/10/2016
Cada día es más común encontrar elementos de formularios totalmente personalizados que mejoran la experiencia del usuario. En este artículo vamos a ver como convertir el típico checkbox en un interruptor mucho más moderno y atractivo visualmente.   Vamos a ver un ejemplo de cómo quedaría este interruptor en las típicas opciones de un área de usuario: span.question { display: inline-block; vertical-align: middle; margin-right: 10px; font-weight: bold; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; vertical-align: middle; } .switch input { display:none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #E27AD8; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }       Publicar mi dirección de email       Recibir boletín de novedades       Recibir emails de notificaciones   Primero necesitaremos definir el html. Vamos a usar las etiquetas label e input de tipo checkbox y un div extra que servirá para hacer el truco css. HTML <label class="switch">   <input type="checkbox">   <div class="slider round"></div> </label>   Y ahora vamos con el css: CSS /* Formateamos el label que servirá de contenedor */ .switch { position: relative; display: inline-block; width: 60px; height: 34px; } /* Ocultamos el checkbox html */ .switch input { display:none; } /* Formateamos la caja del interruptor sobre la cual se deslizará la perilla de control o slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } /* Pintamos la perilla de control o slider usando el selector before */ .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } /* Cambiamos el color de fondo cuando el checkbox esta activado */ input:checked + .slider { background-color: #E27AD8; } /* Deslizamos el slider a la derecha cuando el checkbox esta activado */ input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Aplicamos efecto de bordes redondeados en slider y en el fondo del slider */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } Y esto es todo amigos, ahora ya sabemos como como crear un toggle switch o interruptor con css. Fácil, rápido y para toda la familia!!
Métodos de validación y user research
13/05/2016
El “User research” es un conjunto de técnicas de observación y obtención de feedback y análisis de resultados que permiten entender los comportamientos, necesidades y motivaciones de los usuarios de cualquier producto o servicio. Existen decenas de métodos y variantes dentro del User research, en este articulo vamos a describir las 6 más utilizadas en la industria web.   Card Sorting Consiste en pedir a un grupo de usuarios que agrupen contenido y funcionalidades en categorías abiertas o cerradas. El resultado del ejercicio son patrones de cómo los usuarios esperan encontrar el contenido así como sugerencias de navegación, menús y categorías. Este método no ofrece una estructura final, pero ayuda a responder muchas preguntas que nos hacemos durante la fase de diseño. Más información: http://www.usability.gov/how-to-and-tools/methods/card-sorting.html http://boxesandarrows.com/card-sorting-a-definitive-guide/ http://www.measuringu.com/blog/card-sorting.php     Eye Tracking Esta técnica se sirve de la tecnología para analizar los movimientos de los ojos del usuario por la interfaz. El resultado es un mapa de calor o de puntos de fijación que nos ofrece información clara sobre que partes del sitio captan más la atención y cual es el flujo visual del usuario por el sitio. Más información: http://www.webdesignerdepot.com/2013/11/4-essential-ux-rules-taught-by-eye-tracking-research/ https://uxmag.com/articles/leveraging-eye-tracking-to-create-an-engaging-user-experience/ http://www.uxbooth.com/articles/a-brief-history-of-eye-tracking/   A/B Test Consiste en ofrecer versiones distintas de una página a diferentes usuarios y comparar los resultados para determinar cuál funciona mejor. Es un gran método para optimizar embudos de conversión y landing pages. Más información: http://www.wired.com/2012/04/ff_abtesting/ https://www.smashingmagazine.com/2010/06/the-ultimate-guide-to-a-b-testing/ http://www.uxbooth.com/articles/how-to-increase-site-performance-through-ab-split-testing/   Focus Group Se trata de reunir usuarios y debatir sobre determinados temas o cuestiones relacionadas con el contenido o con el sitio web. El resultado arroja información útil sobre las opiniones y las sensaciones de los usuarios en relación al tema en cuestión y permite conocer mejor la audiencia y afinar el target. Más información: http://www.webcredible.com/blog/focus-groups-how-run-them/ http://www.slideshare.net/Centralis/adapting-focus-groups-for-user-experience-ux-research/ https://blog.mozilla.org/ux/2012/08/when-to-use-a-focus-group-and-when-not-to/   Usability testing Test individuales donde se evalúa una página o sitio con usuarios representativos del target. Se recoge feedback directo del usuario usando la herramienta o el prototipo de la misma que sirve para aplicar mejoras basadas en los resultados obtenidos. Más información: http://www.usability.gov/how-to-and-tools/methods/usability-testing.html http://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/ http://uxmyths.com/post/831431504/myth-22-usability-testing-is-expensive   Encuestas cuantitativas Consiste en realizar encuestas a los usuarios para obtener información como su satisfacción con el producto, la utilidad de una página concreta, su opinión sobre un tema concreto, etc.. Los beneficios de este método son muchos ya que permite entender mejor a los usuarios finales y así diseñar mejores productos reduciendo el riesgo de cometer errores u ofrecer soluciones mediocres. Más información: http://uxmastery.com/better-user-research-through-surveys/ http://www.uxmatters.com/mt/archives/2012/09/strengths-and-weaknesses-of-quantitative-and-qualitative-research.php http://www.marketingdonut.co.uk/marketing/market-research/what-is-quantitative-research-  
Breve historia del UX
31/03/2016
UX, User eXperience design, o en castellano diseño de experiencia de usuario es una disciplina relativamente nueva que tiene unas raíces bastante complejas e interesantes. A continuación presento una mirada breve y fugaz sobre su historia. Está comunmente aceptado que la UX se inició alrededor de 1900, a mediados Segunda Revolución Industrial. Durante este periodo, cada vez se incorporaban más máquinas y herramientas para hacer tareas de producción industrial y cuanto mayor era el uso de estas maquinas, más rápido se trabajaba y más aumentaba la producción. Por este motivo, era importante optimizar la facilidad de uso y la eficiencia de las máquinas para así mejorar la producción de bienes y servicios. Acababa de nacer una parte de la actual UX. Unos años después vemos como la UX se aplica para mejorar la facilidad de uso de los primeros aparatos de telecomunicación como el telégrafo y telegrama. Señorita operando un télegrafo. Más tarde, la UX se empezó a aplicar en el campo de la ergonomía, disciplina encargada del diseño de lugares de trabajo, herramientas y tareas, de manera que coincidan con las características fisiológicas, anatómicas y psicológicas del trabajador. En la ergonomía podemos ver la aplicación de UX en aspectos como la fabricación de cualquier herramienta o mueble para que sea más agradable de usar y que se adapte mejor al cuerpo humano. Por ejemplo en la creación de una silla más confortable para trabajar en una oficina. El siguiente hito en la UX es la apertura de Disneyland en 1955, una experiencia centrada en el usuario como ninguna otra hasta la fecha. Su creador, el visionario Walt Disney, fue pionero en crear una experiencia como servicio. Walt Disney con el proyecto de Disneyland. Y por fin llegamos a la génesis del diseño de interacción y de interfaces tal como los conocemos hoy día con la aparición de Xerox PARC en 1970, el lugar donde se desarrollaró la interfaz gráfica de usuario (GUI), las ventanas, las casillas de verificación, los botones de radio, los menús, el ratón y muchas otras cosas relacionadas con la informática actual como la programación orientada a objetos, la impresión láser o el estándar Ethernet. Muchas de estas invenciones se debieron al hecho de que Xerox se empeñó en aplicar algo llamado Diseño centrado en el usuario y que marcó el comienzo de la actual UX. Trabajadores en Xerox PARC en los años 70. Años más tarde, en 1995, Donald Norman acuña el termino User Experience Design y se llama a si mismo “User Experience Architect” mientras trabaja en Apple Computer. Donald describe su cargo como aquel que ayuda a armonizar el interfaz de usuario y el proceso de diseño industrial. Donald Norman. A partir de 1990 la UX crece de forma exponencial y empezamos a oír conceptos como el de usabilidad, diseño de interacción y arquitectura de información. Es por estas fechas cuando surgen personajes archiconocidos en la industria web actual como Jakob Nielsen, Alan Cooper y Steve Krug. Todo esto nos trae hasta la actualidad, en la que la experiencia de usuario es una característica fundamental para lograr que un producto o un servicio tenga éxito, ya que de ello depende, en gran medida, la percepción positiva o negativa de la empresa.
Placeholder text form
08/09/2015
Con la llegada de HTML5 hace unos años ha aparecido la posibilidad de añadir marcadores de posición o placeholders. El placeholder es el texto que aparece dentro de un campo de texto en un formulario antes de que el usuario lo complete, sirviéndonos de gran ayuda para clarificar qué tipo de información hay que introducir en dicho campo. Por ejemplo, el siguiente código HTML: <form> <label for="search">Suscribete al newsletter</label> <input id="news" type="text" placeholder="Introduce tu email" name="seach"> <button id="subscribebutton" type="submit">Enviar</button> </form> Muestra algo como esto: Añadir placeholders a los formularios es una buena práctica que mejora de la usabilidad y por supuesto la experiencia de usuario. El W3C recomienda usar el placeholder siempre junto con la etiqueta Label, ya que supuestamente son complementarias, pero en Wild Wild Web a menudo usamos solo una de las dos, ya que nos resulta redundante usar ambas. El soporte para placeholder solo será visible en los navegadores web más modernos pero se suele implementar un fallback jquery para conseguir la misma funcionalidad en los navegadores antiguos. Existen varias formas de añadir el placeholder a un campo de un formulario en Drupal 7. A continuación destacamos 4 de ellas que consideramos las más útiles. Módulo Form Placeholder https://www.drupal.org/project/form_placeholder Este módulo nos permite añadir placeholders a cualquier formulario del sitio desde la administración Drupal. Módulo Webform Hints https://www.drupal.org/project/webform_hints Este módulo permite incorporar placeholders automáticos a cualquier textfield, testarea, select list y email field de formularios creado con el módulo Webform (https://www.drupal.org/project/webform) Además, este módulo viene con soporte para navegadores antiguos que no soportan el attributo placeholder e implementa el fallback mediante jQuery. Módulo Field placeholder https://www.drupal.org/project/field_placeholder Permite añadir el atributo placeholder a cualquier campo de una entity drupal, como campos de un tipo de contenido, de términos de taxonomía, de usuarios, etc. Al activarlo aparece una nueva opción para introducir los placeholder al editar o crear un campo. Función en el template.php Por último el método más técnico un pelín más avanzado porque implica toda código pero resulta el más potente de todos. Consiste en añadir la siguiente función al archivo template.php de nuestro theme. function YOURTHEMENAME_form_alter( &$form, &$form_state, $form_id ) { if (in_array( $form_id, array( 'user_login', 'user_login_block'))) { $form['name']['#attributes']['placeholder'] = t( 'Username' ); $form['pass']['#attributes']['placeholder'] = t( 'Password' ); } } Este caso introduce un placeholder para el login form. Recuerda cambiar en el nombre de la función YOURTHEMENAME por el nombre de vuestro theme, y también cambiar el id del formulario y el nombre del campo sobre el que queremos realizar el cambio. Más información sobre cómo obtener el id de un formulario.
Mandrill para Drupal
19/07/2015
El correo electrónico es una de las herramientas más poderosas de un sitio web para fortalecer el servicio al cliente y aumentar la confianza de los usuarios, tanto en el sitio como en la empresa. Los emails transaccionales pueden mejorar la experiencia del usuario si se usan de forma correcta, realizando la entrega de forma inmediata y con un diseño a la altura de la marca y la web. ¿Qué son los emails transaccionales? Son aquellos que no son enviados de forma masiva (newsletters), o dicho de otra forma, son aquellos que son enviados de forma individual en base a una acción o falta de acción de un usuario (notificaciones). Ejemplos de emails transaccionales son el típico email de alta de usuario, el recordatorio de contraseña de tu cuenta de Badoo, el pedido del billete de avión a Marrakesh, Fulano ha comentado en tu muro de Facebook, Mengano ha visto tu perfil en Linkedin, te has unido al grupo de sadomasoquistas de tu barrio, etc. Si alguna vez has tenido problemas al enviar este tipo de correos desde tu web y los usuarios no reciben los emails, o los reciben directamente en el buzón de SPAM, es muy probable que tu servidor haya sido añadido a una lista negra de spammers. La mayor parte de las veces es porque el servidor ha sido hackeado y ha pasado a formar parte de las redes zombie que los emplean para realizar envíos de SPAM. Cuando esto ocurre los sistemas anti-spam añaden la IP del servidor a una lista negra y todas las webs de dicho servidor se ven afectadas. Para resolver este problema, es necesario utilizar un servicio SMTP externo para el envío de los emails transaccionales. Estos servicios garantizan la entrega de los emails y lo hacen de forma rápida. Los usuarios exigen inmediatez y el retraso de cualquier email degrada la experiencia de usuario de forma notable. En Drupal podemos configurar cualquier servidor SMTP para el envío de emails mediante el uso del módulo smtp, pero también podemos usar una plataforma externa creada específicamente para esta función. Algunas de las más populares son Mailjet, Amazon SES, y Mandrill, pero la oferta es muy amplia, en socialcompare han creado esta lista comparativa de todos los servicios de envío de emails trasaccionales. Desde Wild Wild Web recomendamos en uso de Mandrill, el servicio de distribución de correo transaccional de Mailchimp, ya que permite el envío de hasta 12.000 emails por mes de forma gratuita hasta 25.000 emails por menos de 10$ y además dispone de una fantástica integración con Drupal. Si tu web requiere de un volumen de envíos mayor también dispone de otras opciones previo pago de una cuota mensual. Características de Mandrill Soporte SPF y DKIM que garantiza que los emails no serán considerados SPAM. Infraestructura distribuida global con servidores en los 5 continentes que reduce la latencia. Estadísticas super completas de entrega de email, aperturas, custom tagging, etc.. Sistema de plantillas para personalización de emails. Apps para Android y iOS. Y muchas más.. Instalar Mandrill en Drupal Para instalar y comfigurar Mandrill en Drupal hay que seguir los siguientes pasos: 1. Descargar e instalar los módulos: Mailsystem Mandrill 2. Descargar el instalar la libreria Mandrill PHP API y subirla a la carpeta /sites/all/libraries/mandrill.   3. Activar los módulos Mandrill, Mandrill reports y Mandrill Template. 4. Crear una cuenta en mandrillapp.com. 5. Obtener un API Key para tu cuenta. 6. Pegar la API Key que acabas de crear en la pantalla de configuración de drupal y guardar.   7. Hacer los últimos ajustes en la configuración del módulo. Retoca las preferencias de traking o la integración con Google Analytics para hacer seguimiento de los emails con esta herramienta. Una vez está configurado el servicio en nuestro Drupal conviene hacer una prueba de envío desde la pestaña Send Test Email para verificar que todo funciona correctamente. Ahora ya tenemos nuestro Drupal enviando los emails mediante Mandrill pero resulta que los emails que envía Mandrill por defecto son en texto plano, ¡hemos vuelto a los 90!   8. Crear una plantilla en Mandrill. Para que los emails sean corporativos, lleven el loguito y los colores de nuestra marca o la de nuestro cliente necesitamos crear un template a medida. En nuestra cuenta de mandrillapp tenemos que ir a Outbound - Templates y pulsar el botón Create a Template. Una vez estamos editando la nueva plantilla solo hay que pegar el código html que queremos para nuestro email y usar el Email Template Language de Mailchimp para indicarle a Mandrill cual es la parte dinámica del email. Quedaría algo tal que así: <body bgcolor="#202020" style="margin: 0;padding: 0;"> <table bgcolor="#202020" width="100%"> <tr>  <td>        <center> … código html personalización del email …   <div mc:edit="main" style="color:#000000;"></div> … código html personalización del email … </center>   </td> </tr> </table> </body> La clave es la etiqueta   <div mc:edit="main" style="color:#000000;"></div> que es la que escupe el cuerpo del email correspondiente. 9. Crear una plantilla de mapeo en Drupal. Para que Drupal coja el formato de la nueva plantilla de Mandrill debemos crear una nueva Mandrill Template Map desde admin/config/services/mandrill/templates, ponerle un nombre y seleccionar el nombre y la region.Tambien debemos marcar el Email Key que queremos, en la mayoría de los casos Site wide default.   Conclusiones Los emails trasaccionales son muy importantes para mejorar la experiencia de usuario y debemos garantizar su entrega de forma rápida y efectiva mediante herramientas especificas de terceros. Mandrill es una fantástica aplicación para el envío de emails trasaccionales desde Drupal ya que es gratuita hasta 12.000 emails, es una aplicación madura y cuenta con una muy buena integración con nuestro CMS favorito.
Chica con iPad
03/07/2015
The Stanford Persuasive Technology Lab ha recopilado 10 directrices para la construcción de la credibilidad de un sitio web. Estas reglas se basan en 3 años de investigación con más de 4.500 personas.   Demuestra que eres real Enseña que eres una empresa real. Pon tu dirección física en tu sitio web, un mapa y fotos de tus oficinas o local. Si tu empresa está afiliada a organizaciones como la cámara de comercio u otro tipo de instituciones o asociaciones indícalo.   Haz fácil la verificación Trata de que sea fácil para las personas verificar que lo que dices es cierto. Utiliza citas, referencia a tus fuentes… Aunque la gente no haga click en los enlaces aumentará la confianza en tus contenidos.   Destaca tu experiencia Resalta lo bueno, si cuentas con personas influyentes en tu empresa, dales visibilidad. Si has trabajado con clientes importantes muéstralo, te ayudará a construir credibilidad.   Muestra personas reales Enseña a las personas reales que están detrás de tu sitio web y dentro de la empresa mediante imágenes y textos. Esta práctica es muy recomendable sobre todo si tienes servicio de atención al cliente.   Facilita tu contacto a tus clientes Cuanto más fácil les resulte a tus clientes ponerse en contacto contigo mucho mejor. Los sitios webs que hacen eso son vistos con mucha más confianza por los usuarios. Poner un número de teléfono visible y presente en toda página es una muy buena práctica.   Diseño profesional Como Don Norman, dijo, "las cosas atractivas funcionan mejor". La gran mayoría de la gente evaluará tu página rápidamente por su diseño. El sitio web ha de estar pensado para el target al que va dirigido y el propósito de la empresa. Un diseño responsive (adaptativo a todos los soportes) ayuda a mejorar mucho la usabilidad y por lo tanto la credibilidad de tu negocio.   Actualiza el contenido a menudo Los sitios webs que se actualizan o revisan con frecuencia son vistos como más creíbles. Si un usuario entra en tu página y ve que la última noticia de tu blog es de hace un año, probablemente piense que ha sido abandonada. Actualizar el portfolio, blog, imágenes y mensajes de portada hacen de tu página un lugar mucho más creíble.   Evita o minimiza la publicidad Si es posible, trata de evitar los anuncios o al menos indicar claramente cuando el contenido es patrocinado y cuando no lo es. Cada vez que molestas a los usuarios con publicidad en ventanas emergentes o anuncios dentro de tu contenido, estás perdiendo credibilidad.   Evita errores Los errores ortográficos o enlaces que no funcionan dañan notablemente la credibilidad de tu página. Revisa periódicamente el contenido y presta atención a estas cosas por pequeñas que sean.    Evidentemente estas reglas deben ir siempre acompañadas de un proceso offline depurado y profesional. El trato con los clientes, los tiempos de respuesta o la solución de incidencias son esenciales para no echar por tierra el trabajo online. ​
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.