Usabilidad y ROI en las empresas

He realizado una ponencia en la Ciudad Financiera de Boadilla en Junio de 2016 sobre la conexión entre la UX y el retorno de inversión (ROI) que puede tener una empresa. Se incluyen ejemplos reales de como empresas que mejoran la usabilidad y tienen en cuenta a los usuarios pueden mejorar sus cuentas de resultados.

 

 

 

 

Comprimir ficheros js y css para mejorar la velocidad de carga de tu página

El mejorar la velocidad de carga de tu página mejora la experiencia de uso de tu site, sobre todo si alguien se contacta por móvil, y también mejora tu posicionamiento ya que se produce menos rebotes en las visitas.

Para poder comprimir los ficheros del tipo: js, css en el servidor solo tienes que abrir el .htaccess que estará en raíz de tu proyecto web y poner estas líneas.

En esto caso comprime todo menos las imágenes:

AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml

 

Para poder ver si está funcionando correctamente te recomiendo que uses la herramienta de PageSpeed Insights de Google.

Pésima usabilidad en las máquinas de metro en Bruselas

Hace unas semanas tuve la oportunidad de pasar un fin de semana en Bruselas y tuve una experiencia bastante curiosa intentando sacar uno billete sencillo de metro y francamente no me resulto muy “sencillo”. Me surge la duda, primero, si será un problema mío cultural, por estar acostumbrado a un tipo de máquinas y estar en un país diferente, o si por el contrario, es un problema extrapolable a cualquier nuevo usuario del metro de Bruselas.

interfaz maquina metro

Contunuar leyendo

Resoluciones de Iphone 5, Iphone 4 y Ipads

Cuando hablamos de resoluciones hablamos de tamaño de la pantalla. Hoy en día, exiten las pantallas retina, un concepto inventado por Apple, que hacen que para un mismo tamaño físico de dispositivo haya diferentes resoluciones. Donde antes cabía un pixel ahora caben 2 o más. Por ejemplo, resolución del Iphone 3G es de 163 ppp y la de Iphone 4, que tiene el mismo tamaño físico, su resolución es de 326 ppp, el doble, es lo que llamamos retina, doble resolución.

Los diseñadores que diseñan APPS para Apple tienen que tener en cuenta estas resoluciones para usar un tamaño de lienzo en photosohop apropiado.Los tamaños indicados son en apaisado o landscape:

  • iPhone Original/3G/3GS: 480×320
  • Iphone 4 y iPhone 4S  (retina): 960 x 640
  • Iphone 5c y Iphone 5s(retina): 1136 x 640
  • iPad, Ipad 2, Ipad 3 y iPad Mini 1 : 1024 x 768
  • Ipad 4, Ipad Air y Ipad Mini Retina: 2048 x 1536

Vídeo de 04×10 – Como los cubos de cerveza cambiaron mi vida

Os dejo el vídeo sobre la experiencia personal de emprender usando técnicas de SEO y SEM con cubos de cerveza personalizados que hice en el evento de 04×10. El formato de las charlas de 04×10 es de hacer la exposición en sólo 5 minutos y 10 minutos de preguntas por lo que se han quedado muchas cosas en el tintero. Si queréis compartir o tenéis preguntas escribir vuestros comentarios.

04×10 Noviembre 2013: Manu Medina from 04×10 on Vimeo.

 

Os podéis descargar la presentación “Como los cubos de cerveza cambiaron mi vida”. Está en SlideShare.

Nueva estructura en los resultados Google y la búsqueda por voz

Una vez que sacó Google sus actualizaciones de Knowledge Graph y HummingBird se ha cambiado la forma de estructurar la información en los resultados de búsqueda para determinadas palabras. Resulta muy curiosos como Google aborda esta actualización y hace una arquitectura de la información totalmente fácil y adaptada al usuario. He realizado algunas pantallas de como se muestran estas nuevas estructuras en los resultados de búsqueda que hace que los usuarios tengan la respuesta a un sólo click o si usan la búsqueda por voz que el propio sistema de voz de google te dé la respuesta.

Contunuar leyendo

Emprender haciendo SEM y SEO – Ejemplo con cubos de cerveza

Os dejo la presentación de la charla celebrada en el IED de Madrid el 4 de Noviembre de 2013 en el evento 04×10.

El tema trata de como posicionar una idea o proyecto usando técnicas SEM y SEO. En el ejemplo se ha usado un caso real como es la venta de cubos de cerveza personalizados.

Participo en el Evento 04×10 de Noviembre 2013

El 4 de Noviembre doy una charla de 10 minutos en el evento de 04×10. Es su 15º entrega y será en el IED de Madrid. Comparto ponencias con:

Mi charla se titula: “Cómo los cubos de cerveza cambiaron mi vida.” y básicamente trata de como emprender usando técnicas SEO y SEM.

Sustituir el HOVER en dispositivos táctiles

En los móviles con pantalla táctil no existe la interacción hover. Esta interacción, como todos sabréis, es lo que ocurre cuando pasamos el ratón por encima de un elemento. Normalmente aparece una capa, un tooltip con información adicional o secundaria. En las webs que accedemos con pantallas no táctiles a través de ordenadores o portátiles muchas veces es un contenido que no queremos mostrar en la pantalla principal por lo que usamos este recurso para que el usuario vea más información pasando el ratón por encima de los elementos de nuestra web. Esta técnica actualmente no es muy usada y sólo en caso particulares en los que debemos estudiar con detalle. Esta interacción la usa Twitter, Google adwords, Google Maps, aplicaciones webs con Gráficas…

Contunuar leyendo

Problemas de usabilidad con Windows 8 y Metro Style

Windows 8 y su Metro Style tiene una serie de desventajas para usuarios que no están con pantallas táctiles y usan el ratón. La gente de Teksindicate ha realizado una crítica bastante interesante que podéis ver en este vídeo que hay en youtube.

Los problemas de usabilidad de Windows 8 y Metro Style para usuarios de ratón principalmente son:

  •  El escritorio está pensado para pantallas táctiles, con el ratón tienes que hacer movimientos más largos para cliclar en los iconos, realizar más clicks, mezcla el scroll vertical del ratón con el scroll horizontal de la pantalla, etc…
  • Un ejemplo, de que el movimiento de arriba a abajo se convierte enmovimiento de izquierda a derecha, es cuando abres la aplicación del tiempo y haces scroll horizontal y de repente te aparece un contenido con scroll vertical y no es fácil manejar el ratón ya que se mezclan estos movimientos perpendiculares. Si lo manejas de forma táctil no hay problema pero para un usuario con ratón es bastante confuso.
  • Si quieres realizar una búsqueda “impresoras” no encuentra nada, tienes que buscar primero “Panel de Control” y luego dentro de esa ventana buscar impresora. Lo mismo pasa si quieres desinstalar un programa. Esto en Mac está solventado desde hace tiempo.
  • Un ejemplo de más clics es cuando quieres cambiar de pestaña dentro de IE9. Con Metro Style tienes que realizar 2 clics, una faena para usuarios que sean unos enfermos, yo estoy dentro, de las pestañas de los navegadores.
  • Cuando divides la pantalla para mostrar 2 aplicaciones no hay forma de dividirla en 50%, mitad de una aplicación y mitad de otra. Sólo te deja: 1/8 y 7/8
  • Otro ejemplo de más clicks. Para reiniciar el ordenador tienes que realizar 3 clics.
  • En la aplicación del tiempo de Windows 8 introducen publicidad. No creo que sea una buena práctica.
  • Eliminación del botón de “Inicio” se echa en falta en muchas ocasiones. Con el Metro Style el botón de Inicio se abre en ventana completa y esto a veces es molesto ya que pierdes la visualización de la pantalla y necesitas realizar más clics para acceder a la información que deseas.

Mejora la velocidad de descarga de tu página web

Una parte muy importante en la experiencia de usuario y que hay que cuidar es la rapidez con la que se carga tu página web. Cada vez hay más conexiones con dispositivos móviles los cuales tienen, en determinados lugares, poca cobertura y hacen que la rapidez en mostrar la información sea un elemento clave para una buena experiencia. También es un elemento muy condicionante para una mejorar el posicionamiento en los buscadores.

Cuanto más rápido cargue tu web, mejor experiencia para el usuario y mejor posicionamiento.

Para analizar la velocidad de tu web la herramienta más destacada y que aconsejo es GTmetrix que te hace un reporte de velocidad muy interesante.

El cambio que más destacado y que te puede hacer diferente en relación a otras webs, en caso de que el contenido que tengas no se actualice muy a menudo, recomiendo esta pequeña actualización en el fichero .htaccess que te permitirá que los usuarios y buscadores cacheen las imágenes, css, js y htmls de tu site por lo que la carga se realizará mucho más rápida. Puedes ver todas las opciones de este código en este enlace.

En este caso hemos puesto que el contenido se suele actualizar mensualmente.

<IfModule mod_expires.c>

# Enable expirations
ExpiresActive On

# Default directive
ExpiresDefault “access plus 1 month”

</IfModule>

Saber cuando entra un pedido en la web de tu cliente

Muchas veces estás desbordado de clientes y no quieres tener que estar entrando en el panel de control de cada tienda o cms para saber cuantos contactos o pedidos tienen tus clientes al día. Para ello te recomiendo que te crees una alerta en Google Analytics para que te llegue al correo y así sepas tan rápido como tu cliente que ha habido una conversión, pedido o prospect. Lo que tienes que hacer es definir primero una conversión en Google Analytics, creo que todos sabemos como hacerlo, sino os dejo este enlace de un compañero y luego accedes a la página de Google Analytics:Administrador/Activos /Alertas personalizadas y pones esta configuración:

De esta forma podrás recibir diariamente si tu cliente ha tenido una conversión. También veo muy útil esta herramienta para que te avise si un día has tenido más de x visitas para avisar a tu cliente o para saber que acción se tomado para tener ese cambio positivo.

Los labels dentro de los inputs

En estos últimos años, después del auge de aplicaciones móviles, cada vez se está usando más el poner los labels dentro de los inputs para los formularios de validación.

Estos ejemplos los puedes ver en aplicaciones y webs tan importantes como facebook, evernote… :

evernote loginfacebook login

¿Por qué se ponen los labels dentros de estas cajas de texto?

Cuando diseñamos para aplicaciones móviles el espacio es algo muy privilegiado por lo que dejar un input vacio parace un espacio desaprovechado. Sobretodo estas cajas de texto deben ser bastante grandes, más de lo normal ya que van a tener interacción táctil. Si ponemos el label fuera del input esto nos hará tener que agrupar más los elementos y no habrá tantos márgenes o espacios vacios, Lukew, un gran conferenciante sobre mobile, es un gran defensor de este tipo de práctica.

Problemas de poner labels dentro de un input

Cuando el usuario quiere acceder a una zona privada de una web lo ideal es que visualmente vea los inputs vacios donde van a tener que introducir información, según puedes leer en UXmatters, este espacio está reservado para los usuarios.
También ocurre que cuando el usuario pulsa dentro del input el label desaparece y el usuario no recuerda si tiene que introducir un email o un nombre de usuario (esto me ha pasado a mí muchas veces), visualmente no encuentra ningún sitio donde diga que dato tiene que introducir y lo único que puede hacer es borrar la información que ha introducido en el input y visualizar de nuevo el label.
Entiendo que esta situación en móvil se realice ya que el espacio es muy preciado pero en un formulario de validación de una web, donde suele haber sitio, no veo sentido hacer esta práctica. También tenemos que tener en cuenta que en un móvil hay muchos factores del entorno que nos hacen distraernos, quien no consulta facebook mientras va andando, y si tienes que validarte, a veces no eres capaz de rellenar un formulario entero manteniendo la mirada fija en el móvil por lo que las distracciones externas no te hacen recordar que tipo de campo era si usuario o e-mail.

Contunuar leyendo

Inspiración para diseños web, móvil y tablets

Listado de webs para inspiración a la hora de realizar cualquier proyecto online

Inspiración web:

Inspiración de colores:

Inspiración css y html, responsive, jquery:

Inspiración revista, fotografía, maquetación:

Blogs de lectura, diseño, ux, seo:

Inspiración móvil y tablets: