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.

Ejemplos de aplicaciones y webs que usan correctamente los labels, inputs y shareholders:

login tuentihome movil google

Otro punto a tener en cuenta es que los usuarios normalmente ven el texto dentro de los inputs como si fuera un texto de ayuda y lo suelen ignorar, además suele tener un color gris claro para que el usuario sepa que puede escribir encima por lo que no destaca.

En este caso se está mezclando labels con placeholders con lo que al final puede haber problemas de accesibilidad y por lo tanto una confusión para los usuarios.

 

 

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 en movimiento 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.

Vincular Google Adwords con Google Analytics

Es imprescindible, cuando estás gestionando y analizando la analítica web de tu cliente, confirmar que todos los datos de google adwords y sus campañas SEM se están grabando correctamente en los informes de Google Analytics.

También es importante dejar claro que se vincula Google Adwords con Google Analytics y no al revés. Os dejo un vídeo de Google Support donde lo explica paso a paso.

Además de hacer esto que aparece en el vídeo si queremos mostrar datos de Porcentaje de rebote, tiempo de duración en nuestro site, páginas vistas por visita tendremos, una vez hecho los pasos del vídeo, ir a Mi Cuenta/ Cuentas enlazadas – Google Analytics y seleccionamos el perfil que queremos y lo guardamos, de esta forma quedará toda la información vinculada entre estas 2 herramientas de Google.

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:

Inspiración móvil y tablets:

Mi periódico de inspiración:

http://paper.li/medinamanu/1352880474

 

Conecta la RSS de tu blog con Facebook, twitter y otras redes sociales

Llevo bastante tiempo usando diferentes aplicaciones de facebook y de twitter para comunicar los blogs en los que colaboro con las redes sociales de forma automática hasta que por fin he conocido la web IFTTT (por cierto, muy buena la interacción y user interface de la web).

¿Qué es IFTTT? No queda muy claro, no? ….. pues simplemente significa: If this then that… es decir, si pasa esto haz lo otro, traduciendo para un community manager: si publico mi post en wordpress publícamelo automáticamente en facebook, twitter o donde quieras.

Puedes realizar toda las configuraciones que desees, por ejemplo:

  • Cuando alguien publica algo en mi muro de facebook que me llegue un e-mail
  • Cuando alguien hace un Retuit que me mande un email
  • Cuando publico algo en wordpress que me lo publique en facebook
  • y así  mucho más

Puedes conseguir muchas configuraciones que son muy útiles para automatizar la información que manejas en Internet.

También decir que no se puede conectar tu RSS de tu blog con Google Plus ya que Google no ha permitido que se haga estos automatismo. También me ha pasado con el perfil de empresa de Linkedin que tampoco me ha dejado conectarlo con la RSS de sus blog, una pena ya que al final hay que hacerlo manualmente. Si alguien encuentra una solución para estas redes sociales que deje un comentario!.

Charla sobre Responsive Design

El próximo Jueves 19 de Julio de 2012 doy en TUCAMON Madrid una píldora formativa sobre Responsive Design y la utilización de esta técnica para adaptar webs a diferentes dispositivos móviles y sus distintas resoluciones.

La charla es a las 19:00h y  el registro es gratuito. Te puedes inscribir en la web de Tucamon.

He creado un hashtag por si quieres que hablemos sobre algún tema en concreto es: #responsivetucamon.

El indice de la presentación será:

  • Qué es Responsive Design
  • Portrait y landscape
  • Flexible grids
  • Viewport y retina
  • Imágenes, fuentes flexibles
  • Adaptive images
  • Media queries y CSS
  • Responsive front-end frameworks
  • Responsive css frameworks
  • Responsive themes
  • Ejemplos y recursos

 

 

Posicionar imágenes en google

A veces posicionar determinadas palabras claves en google es tarea muy complicada, principalmente por la competencia y el gran número de contenido que hay sobre esas palabras que queremos posicionar.

Una forma de obtener tráfico para estas palabras es posicionarte a través de Google Images.

Lo primer que tienes que hacer es usar las keywords que quieres posicionar en el nombre de la imagen, esto es muy importante, en el title de la imagen y en su alt. Por ejemplo: quiero posicionar la palabra perro: la imagen se debe llamar perro.jpg, (si quiero poner más palabras uso el guión medio, ejemplo: perro-fuerte.jpg), y para los atributos de la etiqueta img: title=”Perro” y alt=”Perro”, (el title y el alt pueden coincidir).

El formato de la imagen puede ser png, jpg, gif, lo más importante es que esté bien optimizada y no tenga un gran peso. Jpg es una buena opción. Recuerda que aunque optimices su peso siempre deberá de visualizarse sin que pierda calidad.

Otro sugerencia es evitar añadir texto dentro de las imágenes ya que google no posicionará tanto las imágenes acompañadas con frases o palabras.

También es recomendable crear un sitemap de las imágenes con la herramienta de Google Webmaster tool.

Otro consejo, es incluir las palabras claves que tiene nuestra imagen dentro la url de nuestra página, dentro de la etiqueta H1 de la página, dentro de los h2 y también dentro de la etiqueta strong.