• Saltar a la navegación principal
  • Saltar al contenido principal

Sebastián Thüer

Comunicación, diseño y tecnología

  • Acerca
  • Blog
  • Contacto
  • Show Search
Hide Search

Diseño Web

Consejos para mejorar la usabilidad en el envío de formularios online

Sebastián Thüer · 10.02.2011 ·

Los formularios suelen ser el talón de Aquiles en la usabilidad de muchos sitios web. Después de una página clara, atractiva, bien organizada y de fácil lectura suele venir un formulario que no siempre tiene el mismo esmero que el resto del sitio.

En Six Revision dan 10 consejos de usabilidad para enviar formularios por la web con recomendaciones muy sencillas y, la mayoría, que se puede implementar sin grandes complicaciones. Aquí va la lista:

  1. Marcar claramente los campos requeridos
  2. Proporcionar mensajes amigables y claros en caso de error.
  3. Usar validación por JavaScript del lado del cliente
  4. Marcar el campo que se encuentra activo para ayudar al usuario a saber dónde está.
  5. Si hay varias páginas, mostrar claramente el proceso.
  6. Guardar o cachear los datos ingresados por el usuario regularmente
  7. Cambiar el texto «Enviar» por algo más directo y atractivo.
  8. No usar el botón «Cancelar»
  9. Mostrar claramente al usuario el formato de entrada de los datos (especialmente las fechas)
  10. Mejor formulario de una columna en lugar de dos.

¿Que otras cuestiones tenés en cuenta para tus diseños? ¿A qué aspectos de usabilidad prestás más atención en el diseño de formularios? Tus comentarios son bienvenidos.

8 técnicas para ofuscar tu dirección de email y evitar el spam

Sebastián Thüer · 09.02.2011 ·

Los diseñadores web solemos recurrir a trucos de todo tipo para mostrar una dirección de correo electrónico y evitar el spam. Escribir directamente mi@correo.com es una invitación a recibir correo basura de por vida así que hay que ponérselo difícil a los robots que revisan la web buscando direcciones de email.

¿Cómo? Ofsucando la dirección de correo, es decir, haciendo que el usuario vea en pantalla una dirección normal pero dificultando su lectura en el código fuente de la página.
En el sitio Superuser.com publican un análisis con las diferentes formas de ofuscar un email y su eficacia y hay algo que salta a la vista: cualquier método, por más elemental que sea, funciona.

Los diferentes métodos presentados por orden de eficacia son los siguientes

1. CSS Codedirection

Con este método se recibieron 0 MB de spam. Parte de un prinicipio muy simple: escribir la dirección al revés y luego invertirla utilizando CSS.

moc.oerroc@im

2. CSS display:none

Otra técnica que arroja 0 MB de spam basada en CSS. En este caso el código fuente muestra una dirección que tiene una parte falsa, la cual se oculta con CSS.

imfalsocorreo@ moc.oerroc

3. ROT13

Nuevamente una técnica muy efectiva aunque solo apta para nerds o geeks. Consiste en reemplazar en tomar el alfabeto de 26 caracteres, dividirlo por la mitad e intercambiar las posiciones. Más información en la entrada ROT13 de WikiPedia.

zv@pbeeb.pbz

4. Usar AT / ARROBA y DOT / PUNTO

Se consigue bajar mucho el spam –apenas 0.084MB- con algo tan simple como sustituir los caracteres especiales por palabras.

Mi ARROBA correo PUNTO com

5. JavaScript

Escribir la dirección en JavaScript es también da buenos resultados con apenas 0.144 MB de spam en las pruebas que se realizaron. Un ejemplo sencillo sería:

var m = mi';     
m += '@';            
m += 'correo.com'; 
$('.email).append(m);

6. Reemplazar ‘@’ y ‘.’ con su código de carácter

Este método bastante simple se basa en ocultar caracteres claves como la arroba y el punto y poner en su lugar su código. Muy sencillo de usar, aunque el spam se dispara a 1.6 MB en las pruebas realizadas

mi@correo.com

7. Separa el email con comentarios

Otro método muy sencillo que consiste en intercalar comentarios HTML en la dirección de correo para intentar engañar a los robots que reastrean direcciones de correo eletrónico. No es tan efectivo porque se recibieron 7.1 MB de spam.

Mi@correo.com

8. Codificar la URL

De similar eficacia al método anterior, 7.9 MB de spam, esta técnica consiste en codificar la dirección URL, similar al método del punto 6 pero con otra serie de caracteres.

mi%40correo.com

Conclusión

Cualquier método para codificar un correo electrónico funciona. Como referencia, el estudio realizado mostró que al poner un correo en texto plano se recibieron 21 MB de spam. Usando la técnica menos eficaz esta cantidad ya se puede disminuir casi 3 veces.

Si se busca eficacia, los métodos basados en CSS parecen ser los mejores aunque pueden presentar el inconveniente de no ser soportados por todos los navegadores, especialmente algunas versiones para teléfonos móviles con funcionalidades limitadas.

Si la idea es no complicarte demasiado la vida, simplemente con reemplazar ‘@’ por ARROBA y ‘.’ Por PUNTO el spam baja muchísimo, más si tenemos en cuenta que los robots suelen estar programados en inglés y difícilmente interpreten que ARROBA está sustituyendo al signo ‘@’.

  • Vía Superuser – Estudio original entechblog.tilllate.com

Concurso abierto para diseñar la camiseta de Firefox 4

Sebastián Thüer · 04.02.2011 ·

La gente de Mozilla lanzó un interesante concurso para diseñar la camiseta -o remera, como decimos en Argentina- del nuevo Firefox 4 que está bajo desarrollo. El ganador verá su diseño estampado en la remera oficial que precederá el lanzamiento del nuevo navegador.

Las bases para participar son muy sencillas: un diseño que refleje las nuevas características del navegador, un tamaño sugerido de 10×10 pulgadas, estampado en el frente solamente y sugerir sobre qué color se aplicará el diseño. Más información en esta página de Mozilla.org.

Estos son algunos de los diseños que está recibiendo más votos de la comunidad:

  • Participar del concurso para diseñar la camiseta de Firefox 4

Interfaz gráfica en PSD para el diseño en móviles

Sebastián Thüer · 25.01.2011 ·

La creación de interfaz para aplicaciones de smartphones o teléfonos móviles inteligentes es un interesante campo de trabajo que se abre a muchos diseñadores de interacción o UX. Una vez realizado el wireframe llega la hora de componer el diseño de pantalla para que los desarrolladores puedan ver con claridad como lucirá la aplicación en marcha. Es en estos casos que resulta intesante contar con los cada vez más populares kits que reúnen todo los elementos de la interfaz gráfica de un dispositivo.

iPhone 4 GUI (retina) por Rich Hemsley

Ver iPhone 4 GUI (retina)

iPhone PSD Vector Kit

Ver iPhone PSD Vector Kit

iPhone GUI PSD Version 4

Ver iPhone GUI PSD Version 4

RIM BlackBerry

Ver RIM BlackBerry GUI

BlackBerry Storm

Ver BlackBerry Storm GUI

BlackBerry Bold

Ver BlackBerry Bold GUI

Android GUI PSD

Ver Android GUI PSD

Google Nexus One GUI

Ver Goole Nexus One GUI

HTC Diamond

Ver HTC Diamond GUI

Motorola Droid

Ver Motorola Droid GUI

LG KS360

Ver LG KS360 GUI

Nokia 5800 Xpress Music

Ver Nokia 5800 Xpress Music GUI

¿Encontraste un kit para algún otro modelo? ¿Tenés un aporte propio? Dejá en enlace en los comentarios.

Anatomía de un email de Apple [infografía]

Sebastián Thüer · 22.01.2011 ·

Apple es un espejo en el que se miran muchos diseñadores y empresas tecnológicas. Sin embargo, hasta ahora no había visto ningún análisis de cómo elaboran sus newsletters. Un adecuado equilibrio entre imágenes, texto sintético y «call to actions» precisos son algunos elementos que destaca esta interesante infografía.

Vía FlowTown

  • « Ir a la página anterior
  • Página 1
  • Páginas intermedias omitidas …
  • Página 22
  • Página 23
  • Página 24
  • Página 25
  • Página 26
  • Páginas intermedias omitidas …
  • Página 38
  • Ir a la página siguiente »

Sebastián Thüer

Creative Commons Atribución 4.0 Internacional © 2025 · Less Is More · Acceder