ux

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.
La simplicidad, principios y leyes
20/06/2015
Imagina un aparato electrónico portátil con cientos de opciones y funcionalidades y sin una pantalla táctil como las que ahora vemos en cualquier smartphone. Seguramente estás pensando en un artilugio plagado de botones tremendamente complejo. Pues bien, hace ya unos cuantos años un grupo de diseñadores crearon un aparato llamado iPod que con tan solo 4 botones situados encima de una rueda táctil revolucionaron el mercado y consiguieron, entre otras cosas, que Apple sea la compañía que es hoy en día.  El todo es mayor que la suma de sus partes Antes de seguir hablando sobre la simplicidad y sus beneficios, vamos a hacer una parada en la Psicología de la Gestalt, una corriente de la psicología moderna surgida en Alemania en el Siglo XX cuyos principales principios son los siguientes: • Principio de dirección común: Implica que los elementos que parecen construir un patrón o un flujo en la misma dirección se perciben como una figura. • Principio de simplicidad: Asienta que el individuo organiza sus campos perceptuales con rasgos simples y regulares y tiende a buenas formas. • Principio de la relación entre figura y fondo: Establece el hecho de que el cerebro no puede interpretar un objeto como figura o fondo al mismo tiempo. Depende de la percepción del objeto será la imagen a observar. Es la de mayor fuerza y trascendencia de las expuestas, porque puede considerarse que abarca todas las demás, ya que en todas late este principio organizativo de la percepción, observándose que muchas formas sólo se constituyen como figuras definidas cuando quedan como superpuestas o recortadas sobre un fondo más neutro. • Principio de igualdad o equivalencia: Cuando concurren varios elementos de diferentes clases, hay una tendencia a constituir grupos con los que son iguales. Esta experiencia la presentamos aislada, para evitar la influencia de otras leyes y por ello están equidistantes todos los elementos integrantes. Si las desigualdades están basadas en el color, el efecto es más sorprendente que en la forma. Ahondando en las desigualdades, si se potencian las formas iguales, con un color común, se establecen condicionantes potenciadores, para el fenómeno agrupador de la percepción. • Principio del cerramiento: Las líneas que circundan una superficie son, en iguales circunstancias, captadas más fácilmente como unidad o figura, que aquellas otras que se unen entre sí. Las circunferencias, cuadriláteros o triángulos producen el efecto de cerramiento. Esta nueva ley parece ser operativa porque señala el hecho de que las líneas rectas paralelas forman grupos más definidos y estables que los puntos, que delimitan peor un espacio. • Principio de la experiencia: Desde el punto de vista biológico, el propio sistema nervioso se ha ido formando por el condicionamiento del mundo exterior. Una de las conclusiones claras que este grupo de personas nos arroja en sus estudios es que el cerebro tiene multitud de mecanismos dedidacados a la identificación de pautas visuales. Por ejemplo, al ver el dibujo de una caja hecha con un solo trazo que no está completamente cerrada, la mente es capaz de "rellenar el vacío" e imaginar que está cerrada, tal y como explica John Maeda en su libro "Las leyes de la simplicidad". En el entorno web la simplicidad tiene una importancia vital ya que está mejorando la relación entre el usuario y la marca con la que interactúa, ya sea un periódico, una tienda de ropa o un sistema de compra de entradas de cine. Para ambos, marca y usuario, la simplicidad es crucial, el usuario logrará llegar a su objetivo de la forma más cómoda y sencilla y la marca tendrá a sus clientes satisfechos. Sin embargo el objetivo jamás debe ser la simplificación, el objetivo es minimizar la frustación del usuario al enfrentarse a procesos complejos mediante un diseño comprensible y que genere buenas experiencias de usuario, por lo que la simplicificación o simplicidad únicamente es el medio para conseguir dicho objetivo, así que no se trata sólo de quitar cosas. Volviendo al gran John Maeda, a continuación os resumo las 10 leyes de la simplicidad que este científico e intelectual del MIT dejó en negro sobre blanco en su libro "Las leyes de la simplicidad". 1. Reduce. La forma más sencilla de conseguir la simplicidad es por medio de una meditada y bien pensada reducción [quedarnos con lo realmente importante deshechando todo lo demás]. 2. Organiza. La organización hace que lo mucho parezca poco [elegir bien los espacios y conseguir de forma creativa que una estructura compleja se vuelva más sencilla]. 3. Tiempo. El ahorro de tiempo hace parecer las cosas más simples [emplear más tiempo para lo que necesita menos es malgastar ese tiempo]. 4. Aprende. El conocimiento hace que las cosas sean más simples [siempre harás lo que debes hacer y de la forma que debes hacerlo, ni más ni menos]. 5. Diferencia. La simplicidad y la complejidad se necesitan mutuamente [ya que a veces lo complejo puede parecer simple, y viceversa]. 6. Contexto. Lo que se encuentra alreadedor de la simplicidad, definitivamente no es periférico [sino parte de la misma simplicidad]. 7. Emoción. Más emociones es mejor que menos emociones [debemos usar la simplicidad para crear emociones positivas y motivarnos, cuanto más mejor]. 8. Confianza. Debemos confiar en la simplicidad [que lo simple siempre es preferible a lo complejo, ahorra tiempo, dinero y preocupaciones]. 9. Fracaso. Algunas cosas nunca se podrán hacer simples [siempre habrá cosas que no se pueden hacer más simples de lo que son; como decía Albert Einstein, “se debe hacer todo tan sencillo como sea posible, pero no más sencillo.”]. 10. La única. La simplicidad se trata de eliminar lo obvio y añadir lo que da significado [es decir, lo importante]. Así que recuerda, si lo puedes hacer fácil, hazlo.