Mis 10 principios de Usabilidad

  1. Mantener una interacción con el usuario simple y natural.

    Intefaz adaptados al momento, dispositivo de uso y siempre con sencillez y limpieza en el diseño, sin complejidades y de fácil manejo

  2. Hablar el mismo idioma que el usuario.

    Mantener un lenguaje que el usuario entienda, huyendo de lenguajes informáticos o de negocio.

  3. Minimizar recordar procesos.

    El usuario no está preparado para recordar es la máquina, la lógica del software (geolocalización, cámara de fotos, qrs) que tiene que hacer esta tarea y los procesos deben ser lo suficientemente intuitivos para que no sea necesario memorizarlo.

  4. Crear mensajes de error constructivos.

    Los mensajes deben ayudar al usuario a corregir errores

  5. Interacción clara y rápida.

    Cuanto menos piense el usuario mejor, dar la facilidad para que pueda continuar/grabar o salir de un proceso de forma rápida y sencilla

  6. Añadir atajos.

    Para los usuarios expertos sin perjudicar a los usuarios noveles

  7.  Dar feedback al usuario en todo momento.

    Siempre decir al usuario que está pasando de los usuarios, lo bueno y lo malo, el paso del proceso.

  8. Prevenir errores.

    Anticiparse antes de que el usuario lo cometa

  9. Luchar por la consistencia.

    Entre las plataformas, aplicaciones o portales donde esté tu software.

  10. Nunca olvidarse de ningún principio mencionado con anterioridad

    😉

Obama hablando de User Research

Vamos a echar de menos a este hombre. En esta charla habla de como han realizado un estudio de usuarios para mejorar el sistema de “Aids forms”, incluso habla de hacer un focus group.

Estamos en un momento de cambio para el UX

 

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.