Categoría: MÓVIL

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…

Continúa leyendo Sustituir el HOVER en dispositivos táctiles

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… :

¿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.

Continúa leyendo Los labels dentro de los inputs

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

Inspiración web:

• http://dribbble.com/
• http://creattica.com/: Diseño en general y UI

Inspiración de colores:

• http://www.colourlovers.com/

Inspiración css y html, responsive, jquery:

• http://webdesignerwall.com/
• http://tutorialzine.com/
• http://mediaqueri.es/ Responsive

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

• http://www.quintatinta.com/
• http://basic_sounds.blogspot.com.es/
• http://www.booooooom.com/

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

• http://www.smashingmagazine.com/

Inspiración móvil y tablets:

• http://www.mobile-patterns.com : Categorías por tipos de pantallas móviles
• http://inspired-ui.com : Categorías por tipos de pantallas móviles
• http://patterntap.com/: Diseños de móvil, tablet y web
• http://www.tappgala.com/ – Categorías por tipos de aplicaciones
• http://www.makebetterapps.com/ Diseño para móvil, tablet y web. Clasificación por tipo de aplicación
• http://www.uiparade.com/ Tipos de elementos de una aplicación
• http://www.android-app-patterns.com/ Teléfonos y tabletas android
• http://iphone.meer.li/
• http://www.mobilemozaic.com/ Móvil por categorías de temas

Os dejo el vídeo de la charla de Responsive Design que di en Tucamon. No dudes en escribir algún comentario si tienes alguna duda.

Responsive Web Design from Camon Madrid on Vimeo.

 

Responsive Web Design from Camon Madrid on Vimeo.

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.

Google ha sacado un nuevo servicio para adaptar tu página web a dispositivos móviles. Mensajes del tipo:

“2 de cada 3 personas usan su móvil como si fuera una linterna”
“las tendencias para el 2013 es que habrá más usuarios que se conecten a internet desde su móvil que desde un pc”
“En el 2010 las búsquedas por móvil sufrieron un crecimiento del 400%”

Bueno, todo esto quiere decir que tu web debería estar optimizada para poder ser visualizada de forma correcta desde un dispositivo móvil.
¿Qué quiere decir que tu móvil se vea de forma correcta en un dispositivo móvil?

– El texto de tu web se debería de leer sin tener que hacer zoom
– Los enlaces y botones deben ser fácilmente clikables con el dedo también sin hacer zoom.
– Las cajas de búsqueda y formularios deberán ser grandes para que el usuario acceda de forma correcta.
– Tu página tarda mucho en cargar desde un móvil?

Para poder contestar a estas preguntas puedes acceder a la web de Haz tu web móvil y probar el Test móvil de tu página web