FRANKLYN MARCHENA PEA

Usabilidad para formularios en la web

mvil

Web mvil. Por dnde empiezo?

Tienes tres opciones. Todas son vlidas y segn contexto:

1. Web dedicada y exclusiva a mviles. Tienen este formato; m.misitioweb.com. URL y HTML son
distintos en ambas pginas

2. Web con mismo HTML y URL. Es el famoso Responsive Design, lo que recomienda Google
3. Misma URL, distinto HTML. Mantienes la misma URL pero sirves un HTML (y CSS) distinto. Se
conoce como Dynamic Serving.

Declogo de consejos para mejorar la usabilidad en formularios para mviles

Existe una serie de consejos interesantes a tener en cuenta cuando se disea un formulario
que queremos que sea sencillo de usar en un mvil. Los veremos a continuacin, pero en
general nos sirve la mxima comentada en el artculo anterior "Ms es menos", porque cuanto
menor y ms objetivo sea el formulario, ms contentos estarn tus usuarios.

1.- Minimizar la entrada de texto

Como decamos, cuanto menos texto haya que escribir, mucho mejor. Existen muchas veces
opciones alternativas a un campo de texto, como cajas de seleccin, botones de radio,
sliders, etc. En muchos casos slo nos servir colocar un campo de texto y tampoco debe
significar un problema, pero al menos s debemos minimizar el nmero de campos donde
tener que escribir datos con el incmodo teclado virtual. Un claro ejemplo de este detalle es
utilizar datepickers, para seleccionar una fecha en un calendario, en lugar de escribirla a
mano.
2.- Minimizar el nmero de campos
Cuanto menor sea el nmero de campos del formulario, tambin ms satisfecho estar el
usuario. En general, si hay campos prescindibles, se quitan y punto.
3.- Utilizar campos input del HTML5
En HTML5 existen diversos tipos nuevos de campos INPUT que pueden ayudarnos a mejorar
la interfaz de entrada de datos en los formularios. Existen campos para seleccin de colores,
fechas, meses, nmeros, rangos, URL, email, etc. Estos campos muchas veces se
implementan con ligeras diferencias en el navegador a los campos INPUT de texto de toda la
 FRANKLYN MARCHENA PEA
vida, por ejemplo cambiando cosas como el layout del teclado virtual, para que muestre
unas teclas u otras, dependiendo del tipo de campo y del dato que se supone tiene que
introducirse en l.
4.- Alinear etiquetas arriba
Al lado de cada campo de formulario se suele colocar un texto explicativo que sirve para
saber qu informacin se debe colocar en el campo, al que en ingls se le llama "label" y que
se traducira por etiqueta. Ese texto debe aparecer al lado del campo, pero debido al tamao
reducido de las pantallas de mviles, se recomendara colocarlo en la parte de arriba del
campo, en lugar de al lado, como se suele hacer en formularios habitualmente.
5.- Eliminar contenido accesorio
A veces los formularios para webs de escritorio tienen elementos accesorios para ayudar a
rellenar el formulario, como tips que se activan al situarse sobre determinados campos o
enlaces que pueden abrir capas flotantes o pop-ups para explicar ciertas informaciones.
Generalmente, todos esos contenidos accesorios son prescindibles en formularios para
mviles y los podemos eliminar sin ningn reparo.
6.- Evitar formularios multicolumna
Por motivos similares al de colocar las etiquetas arriba (poco espacio en las pantallas de los
mviles), tambin es buena idea organizar los formularios en una nica columna. Pero es que
adems, en este caso, los formularios de varias columnas a menudo son menos claros en el
sentido de saber el orden en el que se supone que la informacin debe escribirse.
7.- Recordar datos introducidos anteriormente
En la medida de lo posible, siempre ser de utilidad que nuestro sitio web sea lo
suficientemente inteligente como para no solicitar datos que ya conocemos de antemano. Por
ejemplo, si se le pidi al usuario el nombre en algn momento, es bueno introducirlo ya en el
campo nombre del formulario, en vez de hacer que lo vuelva a escribir. Otro ejemplo: si es la
segunda vez que se rellena ese formulario, determinados campos que se supone que no van
a variar, aparecern con el mismo texto introducido anteriormente. Para conseguir esto
tendrs que utilizar algn lenguaje de programacin, como Javascript en el lado del cliente o
PHP en el lado del servidor, porque los formularios HTML de manera predeterminada no
implementan esta funcionalidad.
8.- Obtener automticamente los datos que se pueda
Existen diversas tecnologas asociadas al HTML5 que nos pueden ofrecer informacin del
usuario de manera automtica y que, en la medida de lo posible, debemos utilizar para
minimizar la entrada de datos por parte del usuario. El ms claro ejemplo es la
geolocalizacin, que nos permitira averiguar dnde est fsicamente ese usuario. De modo
que, en vez de obligarle a escribir datos como su pas, ciudad, etc. podemos ofrecer que el
propio dispositivo defina su localizacin.
 FRANKLYN MARCHENA PEA
9.- Uso inteligente de los campos INPUT con autocompletar
Cuando debemos utilizar un campo INPUT para entrada de datos, algo que a veces es incluso
ms indicado que otras alternativas, siempre que sea posible se debe usar la funcin de
autocompletar. Por ejemplo, pensemos en un campo pas, que tiene ms de 150
posibilidades. Podramos hacerlo en un elemento SELECT, para que el usuario no tenga que
teclear el nombre del pas, pero puede ser incluso ms cmodo un campo INPUT, en el que
escribiendo una o dos letras ya proponga pases que las contengan. Quizs 150 opciones
todava sean manejables, pero cuando las superamos se hace todava ms necesario alguna
alternativa como sta.
10.- Opcin para ver la clave escrita en los campos password
Los campos donde escribir claves a menudo son un problema por los errores tipogrficos, tan
habituales en los teclados virtuales. No es mala idea crear un botn o algn elemento que nos
permita ver escrita en texto plano la clave que el usuario ha escrito en un campo password.
Eso debe ser una opcin para el usuario, es decir, que si el usuario no la selecciona, el campo
password, debe ocultar la clave escrita para mayor seguridad.
Para ilustrar estos consejos, voy a colocar un par de imgenes de formularios para mviles y
expresar un par de detalles sobre su implementacin.

La mayora de los elementos destacables en estas dos imgenes ya se han comentado en el

texto anterior de este artculo de DesarrolloWeb.com. Pero podra llamar la atencin sobre:

Para poner el nmero de pasajeros del buscador de vuelos, se muestra un icono con un "+" y
un "-", que son ms cmodos que escribir el texto e incluso que un campo SELECT.
Se utilizan componentes nativos como tabs en la parte de arriba, para seleccionar si
queremos viaje de ida, de ida y vuelta, etc. Son ms cmodos que los botones de radio. Ms
 FRANKLYN MARCHENA PEA
adelante veremos frameworks como jQuery Mobile que nos van a permitir realizar esos
componentes optimizados para formularios de una manera extraordinariamente cmoda.

Despus veremos tambin como la geolocalizacin se utiliza para poder evitarle al usuario
tener que definir el lugar donde se encuentra. Adems, si se necesita escribir cualquier ciudad
del mundo para su destino, se utiliza la funcin de autocompletar, que resulta especialmente
cmoda en los formularios para mviles.

Conclusin sobre los Formularios en sitios optimizados para mviles

Existen otros consejos tiles para la creacin de formularios usables, pero creo que con los
que hemos visto tendremos una buena cantidad de criterios a seguir. Recuerda realizar un
diseo simple y conseguirs hacer formularios ms agradables desde el punto de vista del
usuario.
Para quien quiera complementar esta informacin, os doy una referencia a unas diapositivas
interesantes sobre formularios y usabilidad (tanto para escritorio como para mviles).

De momento abandonaremos el mundo de la usabilidad en la web mvil, para centrarnos ya

en asuntos ms prcticos como los del los prximos artculos que comenzarn a explicar
cmo optimizar documentos HTML para mviles.