Este documento proporciona recomendaciones sobre el diseño y uso de diferentes controles de formulario para mejorar la usabilidad. Se discuten los radio buttons, combos, checkboxes, campos de texto y fechas para asegurar que los usuarios puedan completar los formularios de manera eficiente y con poco error. El objetivo es maximizar la tasa de cumplimentación de los formularios mediante un diseño centrado en el usuario.

1. 31/03/2009
1

2. 31/03/2009
Practica
• Hay casos en los que los combos se utilizan para
quot;ahorrar operativa al usuarioquot;...
ahorrar operativa al usuario ...
Ej: comparar dos coches en la web de Supermotor
Elijo la Marca A y el Modelo A (se recarga la pagina
sin que yo lo indique)
Elijo la Marca B y el modelo B (se recarga la pagina
Elij l M Bl d l B( l i
otra vez sin que yo lo indique)
Y ahora es cuando puedo comparar.
Y ahora es cuando puedo comparar
2

3. 31/03/2009
Practica
3

4. 31/03/2009
• RECUERDA: El usuario es el que tiene el control... no
la maquina... NUNCA se deben ejecutar operaciones
la maquina NUNCA se deben ejecutar operaciones
sin que el usuario lo haya ordenado. Recargar la
pagina es ejecutar una orden que el usuario ordena...
nunca la debemos hacer si su permiso.
¿Qué ahorro hemos conseguido? Solo hemos
conseguido que el usuario se vea recargando la
d l dl
pagina una y otra vez...
4

5. 31/03/2009
El adecuado uso de controles de formulario es
decisivo para el éxito.
decisivo para el éxito
• Los formularios son usados para comprar, registrarse, buscar,
suscribirse, asociarse, etc. todos ellos procesos básicos para la
suscribirse asociarse etc todos ellos procesos básicos para la
supervivencia de un sitio web y su eslabón más frágil. Cuando un
usuario se decide a completar un formulario ya ha tomado una
decisión (compra, suscripción, registro, etc.) y esta dispuesto a
d i ió ( i ió it t) t di t
llevarla a cabo, el sitio web ha tenido éxito y solo falta quot;rematar la
faenaquot;.
Entre la intención del usuario y una cumplimentación exitosa el
factor más importante es la usabilidad. De ella dependerá su ratio
factor más importante es la usabilidad. De ella dependerá su ratio
de cumplimentación, es decir, el cociente entre el número de
usuarios que finalizan el formulario y número total de usuarios que
lo comienzan.
l i
5

6. 31/03/2009
Radio buttons
• Han de ser claramente excluyentes (sino inadecuada redacción).
• La cercanía espacial de los radio buttons.
• El número máximo de opciones oscila dependiendo de su longitud y
complejidad.
– Si las opciones son cortas y sencillas: máx 5
Si las opciones son cortas y sencillas: máx. 5
– Si las opciones son largas y de ideas complejas: max. 3
(disminuiría mucho su usabilidad, en estos casos es recomendable
dividir la pregunta compleja en dos más simples)
6

7. 31/03/2009
Combos usables
• Los combos se utilizan para restringir la respuesta de
una pregunta a unas determinadas opciones de
pg p
respuesta (solo 1).
• Las respuestas de los combos están ocultas para
p p
ocupar menos espacio en el formulario.
• Sencillas e inequívocas tras leer el enunciado de la
pregunta.
Ej: 1 combo quot;paísquot; se incluyen todos los países del mundo se hace muy
difícil de utilizar. El usuario escribe antes el nombre del país
seleccionándolo en un combo de más de 100 opciones. Además quot;paísquot; en
la mayoría de los casos no es un campo crítico y su ratio de errores muy
la mayoría de los casos no es un campo crítico y su ratio de errores muy
bajo.
7

8. 31/03/2009
check‐boxes
• Los check‐boxes se utilizan en dos casos:
1) Para restringir la respuesta de una pregunta a unas
1) Para restringir la respuesta de una pregunta a unas
determinadas opciones de las cuales es posible
escoger varias.
escoger varias.
2) Para presentar una única opción que no es
obligatoria.
Ej: confirmar la lectura de cláusulas de contratos, optar por recibir correos
•
electrónicos con publicidad, etc. Para que se produzca una confirmación real y
l tó i bli id d t P d fi ió l
consciente del usuario, la check‐box deberá aparecer por defecto sin marcar, en
caso contrario el usuario puede perder confianza en el sitio e interpretar su política
como engañosa.
g
8

9. 31/03/2009
Campos de texto
Se utilizan cuando se quiere permitir cualquier tipo
de respuesta a una pregunta del formulario. Son los
de respuesta a una pregunta del formulario Son los
preferidos por los usuarios que saben que pueden
escribir casi cualquier cosa.
q
La longitud del campo es importante porque da a los
usuarios la clave sobre la longitud de la respuesta
esperada, ello les hace ajustarla y comprender mejor
la pregunta.
l t
9

10. 31/03/2009
En la dirección postal (tipo de vía, nombre de la vía, número,
piso, escalera, puerta, etc.) es adecuado un solo campo de
piso escalera puerta etc ) es adecuado un solo campo de
texto. Un usuario necesita menos tiempo para completar un único campo,
porque lo hace muy frecuentemente y no es fácil que cometa errores.
La excesiva separación de los datos en diferentes campos
La excesiva separación de los datos en diferentes campos
provoca errores porque no es posible incluir absolutamente
todos los posibles elementos de la dirección (piso, escalera,
puerta, bloque, escalera, patio, etc.). Puede confundir al usuario y
originarle una falta de confianza en el correcto resultado del proceso.
10

11. 31/03/2009
Siendo la dirección postal un campo que no se analiza en la
Si d l di ió tl li l
base de datos y simplemente se imprime en las etiquetas de
los sobres, no tiene sentido utilizar 4 o 5 campos diferentes
para su recogida (en caso de necesidad se puede usar el
código postal que se recoge en un campo distinto).
11

12. 31/03/2009
La fecha es uno de los campos de texto que más errores
genera en la mayoría de los formularios. Casi siempre incluye
un ejemplo de formato o requiere de usar combos muy
j ldf t i d b
incómodos no justificados para un dato tan sencillo. El formato
más adecuado para la mayoría de los casos es este:
Una validación de errores tolerante con la falta de ceros a la
izquierda y que también acepte solo dos dígitos en el año
permitirá un funcionamiento adecuado.
12

13. 31/03/2009
• Un error típico es introducir el salto automático entre campos
de texto consecutivos y hacer innecesario el uso del tabulador.
Aunque este comportamiento puede parecer que facilita la tarea de introducción
de datos, no es adecuado porque quita control a los usuarios, no es un
funcionamiento estándar y es necesario mirar la pantalla para saber en que campo
se está. Todo ello puede provocar fácilmente errores, como por
ejemplo, introducir datos pertenecientes a un campo en el
j l it d idt t it l
siguiente cuando no se introduce el formato esperado por el
salto automático.
En la validación de campos de texto, se recomienda aceptar
algunos quot;erroresquot; comunes como espacios en los números de
l quot; quot; i l ú d
teléfono, los puntos de millares o el uso indistinto de
mayúsculas o minúsculas.
13

14. 31/03/2009
Recomendaciones Generales
Agrupar
•
Para evitar la incomodidad del cambio entre teclado y ratón, cuando tenga
sentido, agrupar por un lado los controles que se manejan con el ratón
tid ld l tl j l tó
(radio‐buttons, check‐boxes, combos) y por otro los que se manejan con el
teclado (campos de texto), en lugar de alternarlos.
Situar:
•
Respecto a la situación, tanto los quot;radio buttonquot; como los quot;check‐boxquot;
siempre se han situar a la izquierda d l ti
i h it l i q ierda de la etiqueta del campo, así se favorece
t dl íf
la alineación vertical de todos los controles. Por el contrario los combos y los
campos de texto deben situarse a la derecha de la etiqueta del campo.
14

15. 31/03/2009
Práctica: Convertibilidad Web
• Evalúa la Usabilidad del sitio web:
http://www.jpchocolates.com/
http://www jpchocolates com/
(Compra 2 cajas de Chocolate Cocoa Truffles)
124
15

16. 31/03/2009
Practica: ¿Quien consigue la venta?
Compara las web de reserva de vuelos:
• terminalA
l
• Lastminute
• eDreams
125
16

17. 31/03/2009
Optimizar el formato Web para diferentes
dispositivos
• Browser (css media screen) Ejemplo word, ejemplo html
• Impresora (css media print)
Impresora (css media print)
• PDAS.
1‐Ser consciente de las limitaciones de los PDAs.
Los ordenadores de bolsillo tienen una pantalla más
reducida, menos memoria y menos velocidad de proceso
que los ordenadores convencionales.
que los ordenadores convencionales
2‐Definir cuidadosamente la estructura del site.
Con las secciones más importantes y enlaces a las mismas
Cl i ái tt l l i
desde todas las páginas. La primera página ya ha de
mostrar información útil para el usuario, evitando páginas
de bienvenida o de selección de idioma.
17

18. 31/03/2009
Evaluar la usabilidad
• Evaluación automática.
– WebMetrics http://zing.ncsl.nist.gov/WebTools/tech.html:
– https://addons.mozilla.org/es‐ES/firefox/addon/60
– https://addons.mozilla.org/es‐ES/firefox/addon/1843
• Tamaño de las pág
Tamaño de las pág.
• Tiempos de descarga.
• Tamaños absolutos de fuentes y tablas
Tamaños absolutos de fuentes y tablas.
• Formato de los textos.
• Enlaces rotos.
• Evaluación heurística (por expertos)
http://www.useit.com/papers/heuristic/heuristic_list.html
• Evaluación con usuarios (Selenium IDE,
l ó i(l
http://seleniumhq.org/projects/ide/)
18

19. 31/03/2009
eyetracking
• La aportación del eyetracking en el sector de
usabilidad
usabilidad
(http://www.usolab.com/articulos/eyetracking‐usabilidad‐
comunicacion.php)
p p)
Mapa de Zonas
ciegas
Mapa de Calor
19

20. 31/03/2009
eyetracking
• En el mapa anterior, se quiere transmitir que los
anuncios no son vistos, sin embargo se está usando
anuncios no son vistos sin embargo se está usando
un mapa de visión dónde se destaca lo que se ve en
lugar de lo que no se ve.
• Un recurso más apropiado es usar un mapa donde
aparecen tan sólo aquellas zonas han sido vistas por
algún usuario, un mapa de quot;zonas ciegasquot;.
20

21. 31/03/2009
eyetracking
• http://www.poynterextra.org/et/i.htm
130
21

22. 31/03/2009
eyetracking
• ¿Es efectivo el diseño de la página de inicio?
• ¿Qué efecto tienen los 'blurbs' (párrafo que sigue al
¿Qué efecto tienen los blurbs (párrafo que sigue al
título en la página de inicio) comparados con los
titulares?
titulares?
• ¿Cuándo es apropiado utilizar recursos multimedia?
• ¿Están los avisos publicitarios ubicados donde
¿Están los avisos publicitarios ubicados donde
puedan ser vistos por la audiencia?
131
22

23. 31/03/2009
eyetracking
• Una investigación de ‘seguimiento’ o ‘rastreo’
de ojo ( eyetracking ) combinado con otras
de ojo (‘eyetracking’) combinado con otras
medidas ya usadas por los administradores de
los sitios web –pruebas de usabilidad,
los sitios web pruebas de usabilidad
sesiones de grupo, análisis de registros (log
analysis)–, pueden suministrar una guía para
analysis) pueden suministrar una guía para
mejorar dichos sitios.
132
23

24. 31/03/2009
patrón común
• Los ojos primero se fijaban con más frecuencia en la
parte superior izquierda de la página, luego se
parte superior izquierda de la página luego se
quedaban en esa área antes de ir de izquierda a
derecha. Sólo después de leer con atención la
porción superior de la página por algún tiempo
hicieron que sus ojos exploraran más abajo.
• Dependiendo del diseño de la página, este patrón
puede variar.
133
24

25. 31/03/2009
• La imagen superior es una representación simplista
del patrón más común de movimiento de ojo
del patrón más común de movimiento de ojo
registrado a través de múltiples diseños de páginas
de inicio.
134
25

26. 31/03/2009
eyetracking
• Otra observación del Eyetrack: los titulares
dominantes atraen la atención con más
dominantes atraen la atención con más
frecuencia cuando se ingresa a la página –
especialmente cuando están en la parte
especialmente cuando están en la parte
superior izquierda, y con más frecuencia
(pero no siempre) cuando están en la parte
(pero no siempre) cuando están en la parte
superior derecha.
135
26

27. 31/03/2009
eyetracking
• En las páginas de inicio, los instintos de los lectores
los llevan a mirar primero la bandera/logo y los
los llevan a mirar primero la bandera/logo y los
titulares principales en la parte superior izquierda. La
gráfica inferior muestra las zonas de importancia
136
27

28. 31/03/2009
¿Desea que la gente lea, no escanee?
• El comportamiento de la gente fue
particularmente interesante cuando se usaban
particularmente interesante cuando se usaban
titulares y ‘blurbs’ (el párrafo que le sigue al
título) en las páginas de inicio. Los
título) en las páginas de inicio Los
participantes en las pruebas del Eyetrack III
tendían a ver tanto el titular como el blurb
tendían a ver tanto el titular como el ‘blurb’
cuando el primero estaba en negrita y en el
mismo tamaño que el segundo, y ambos en el
mismo tamaño que el segundo y ambos en el
mismo renglón.
137
28

29. 31/03/2009
• Con el titular más largo que el ‘blurb’ y en una línea
separada, la gente tendía a ver los titulares y saltar
separada la gente tendía a ver los titulares y saltar
los ‘blurbs’;
• Los investigadores creen que es el contraste en el
Los investigadores creen que es el contraste en el
tamaño de la tipografía lo que da cuenta de este
comportamiento, así como el tamaño de la tipografía
en si mismo.
• Cuando el titular es más grande que el texto de su
respectivo ‘blurb’, puede ser percibido como
elemento más importante en el bloque titular‐blurb
–así que la gente parece decidir que ver el titular es
así que la gente parece decidir que ver el titular es
suficiente y salta el ‘blurb’–. 138
29

30. 31/03/2009
• Subrayar los titulares desanimó a los
participantes en las pruebas a leer los blurbs
participantes en las pruebas a leer los ‘blurbs’
en la página de inicio.
139
30

31. 31/03/2009
• Las rupturas visuales –como una línea o regla–
desaniman a la gente a mirar los ítems más allá de la
ruptura, como un ‘blurb’.
• La mayoría de ellos (22 de 25) usan ‘blurbs’ para
acompañar los titulares en sus páginas de inicio. Son
ñl l á d
raros los que usan solo titulares: CNN.com,
NYPost.com y ProJo.com.
NYPost com y ProJo com
• En términos del tamaño del titular, existe una
división equilibrada entre quienes usan un tamaño
división equilibrada entre quienes usan un tamaño
de tipografía más grande y uno más pequeño.
• 12 de los 22 sitios que usan ‘blurbs’ en sus páginas
12 de los 22 sitios que usan blurbs en sus páginas
de inicio ponen líneas bajo sus titulares.
140
31

32. 31/03/2009
La vista parcial de los titulares y los ‘blurbs’ es
más común
más común
• Cuando la gente mira los ‘blurbs’ bajo los titulares en
Cuando la gente mira los blurbs bajo los titulares en
las páginas de inicio, con frecuencia mira solo el
tercio izquierdo de ellos. La mayoría mira solo el
tercio izquierdo de ellos. La mayoría mira solo el
primer par de palabras –y solo sigue leyendo si es
animada por ellas‐.
141
32

33. 31/03/2009
• Este es el ‘heatmap’ (mapa de zonas calientes– es
una vista agregada de todas las fijaciones de ojo de
una vista agregada de todas las fijaciones de ojo de
los sujetos de la prueba). Abajo, el área naranja fue
la más vista; la azul, la menos vista.
142
33

34. 31/03/2009
• Las personas típicamente escanean hacia abajo una
lista de titulares, y con frecuencia no los ven
lista de titulares y con frecuencia no los ven
completamente. Si las primeras palabras las animan,
tienen la tendencia a continuar. En promedio, un
titular tiene menos de un segundo de la atención de
los visitantes.
• Para los titulares –especialmente los más largos–
parecería que el primer par de palabras necesitaran
ser verdaderas cautivadoras de la atención si usted
dd ti d d l t ió i t d
desea captar los ojos.
143
34

35. 31/03/2009
• Lo mismo vale para los ‘blurbs no solo deberían
conservarse cortos, sino que el primer par de
conservarse cortos sino que el primer par de
palabras necesita capturar la atención del visitante.
• En los 25 sitios que revisaron hay una considerable
variedad de ‘blurbs’. La longitud promedio del ‘blurb’
g p
varía de un mínimo de 10 palabras a un máximo de
25, con la mayoría de los sitios alrededor de 17.
144
35

36. 31/03/2009
• El Eyetrack encontró que la gente típicamente
mira más allá de la primera pantalla. Pero sus
mira más allá de la primera pantalla Pero sus
ojos típicamente escanean las porciones más
bajas de la página buscando algo que capture
bajas de la página buscando algo que capture
su atención.
•SSus ojos pueden fijarse en un titular
j d fij il
interesante o palabra que se destaque, pero
no en otro contenido. De nuevo, esto señala la
id D ñl l
necesidad de escribir titulares atractivos.
145
36