Formularios

Formularios

http://www.ricardotayar.com/

Disclaimer: Lamentablemente (para el autor) nada de esto es creación del autor, su único mérito es recopilar información reconociendo a los
autores originales y presentarlo en un formato apropiado para servir de apoyo a las clases en Facultad de Ingeniería . No obstante, esta
presentación puede contener opiniones del autor (en lo posible, pocas...).

Diseño de Interacción


Interactividad
• Capacidad de intercambiar información entre dos
entes comunicativos usando elementos del diseño y
acciones

Nuevas formas de diseño interactivo, John Vega, Cristalab Perú 2007


Muchas formas de interacción
• Enlaces, botones y menús de
navegación
– Estados
• Link
• Hover
• Active
• Visited

• Mostrar y ocultar, información
alternativa
– Menús de navegación largos
– Campos de formularios
– Barras laterales
– Bloques de contenido
– Opciones de aplicaciones


Muchas formas de interacción
• Tooltips, globos y notas
– Información extra
– Descripción de enlaces
– Resumen de opciones
– Detalles de descargas
– Cortos comentarios
– Notas en fotos

• Mensajes, respuestas loops
– Mensajes de estado
– respuestas de formularios
– Mensajes de búsqueda
– Precargas

• Efectos, animaciones y movimiento
– Fade, Slide, Drag and drop, Bounce


Formularios

• Formularios: ¿Por qué son importantes?

Formularios


Dialogo real:
Aspectos que ayudan en
la comunicación (pistas
visuales, detalles)

Formularios


Online:
lo único que tenemos
son formularios..

Formularios

• Desde diversos
dispositivos!!

Formularios

Asumámoslo…

Odiamos llenar
formularios!

Formularios >> Buenas Prácticas

Patrones – Buenas prácticas
• Test de usabilidad
– Errores, problemas, asistencias, tiempo/tarea,
satisfacción del usuario
• Testeo de campo
– Ambiente, contexto
• Soporte a clientes
– Problemas más comunes, numero de incidentes
• Encuestas de convenciones
– Soluciones mas comunes, acercamientos únicos
• Seguimiento del sitio
– Puntos de entrada y salida, completitud de tareas,
datos ingresados
• Eye tracking
– Número de miradas, longitud, mapas de calor, rutas
Web Form Design - Luke Wroblewski

Formularios >> Buenas Prácticas
La receta para buenos
formularios
• Minimizar el dolor
– A nadie le gusta llenar formularios
– Valores por default inteligentes
“Depende”
• Iluminar el camino para el éxito
Si tus objetivos
son…,
• Tener en cuenta el contexto prueba la solución…
– Usuario familiarizado vs usuario nuevo
– Usuario habitual vs usuario poco frecuente Si tus restricciones
son…,
prueba la solución…
• Consistencia en la comunicación
– Errores, ayuda, éxito
– Única voz


Formularios >> Buenas Prácticas >> Información

Información

Formularios >> Buenas Prácticas >> Información

Información

Layout Ingreso de datos Acciones Ayuda y tips
• Posicionamiento de • Formatos, campos • Primaria y
etiquetas requeridos secundaria
• Agrupación de
contenido

Formularios >> Buenas Prácticas >> Información >> Layout

Información

• Agrupación de
contenido

Formularios >> Buenas Prácticas >> Información >> Layout: Posicionamiento de etiquetas

Alineado arriba
 Requiere más espacio
vertical

 Espaciado o contraste
es vital para permitir
scanning eficiente

 Flexibilidad para
inputs complejos y de
localización



Alineado arriba



Alineado a la derecha
 Asociación clara entre
etiqueta y campo

 Requiere menos
espacio vertical

 Mas difícil escanear
etiquetas

 Tiempo de
completado más rápido



Alineado a la derecha



Alineado a la izquierda
 Permite scanear las
etiquetas

 La asociación entre
etiqueta y campo no es
tan clara

 Requiere menos
espacio vertical

 Las diferencias en los
largos de las etiquetas
pueden resultar en
layout desprolijos



Alineado a la izquierda



Resultados Eye-Tracking
• Estudio: Matteo Penzo, 2006

• Izquierda:
– Fácil asociación entre etiqueta y campo
– Mucha distancia entre etiquetas y campos
hacia que se tomara mas tiempo

• Derecha:
– Numero de fijaciones reducida a la mitad
– Tiempos de completado disminuido a la
mitad

• Arriba
– Permite a usuarios capturar etiquetas y
campos con un solo movimiento de ojo
– Tiempos de completado mas rápidos


Posicionamiento de etiquetas
• Para tiempo de completado
reducido y datos de ingreso Buenas Prácticas
familiares: top

• Cuando el espacio vertical es una
restricción: right

• Para ingreso de datos no familiares
y avanzados: left


Dentro de los campos

• Antiguamente era recomendación de
accesibilidad, ya no mas

• Nunca usar como única
información

• Sí para facilitar usabilidad
– Indicando ejemplo de valor
– Desaparezca al posicionar el foco

Formularios >> Buenas Prácticas >> Información >> Layout: Agrupación de contenido

Agrupación de contenido

• Posibilidad de escanear información requerido a alto nivel
• Saber cómo se relaciona la información en el formulario


• Crear grupos lógicos para varios campos
• Separar grupos visualmente Buenas Prácticas

• Menor cantidad posible de elementos visuales
para comunicar las relaciones



Tipos de campos
• Usar martillo para clavos y destornilladores para
tornillos…
Buenas Prácticas

Formularios >> Buenas Prácticas >> Información >> Ingreso de datos

Información

• Agrupación de
contenido


Ingreso de datos
• Indicar campos requeridos cuando:
– Muchos campos
– Pocos son requeridos
– Permite al usuario escanear el
formulario para ver que es necesario
llenar

• Indicar campos opcionales cuando:
– Muy pocos son opcionales

• No indicar nada cuando:
– Todos son requeridos



Ingreso de datos
• Evitar campos opcionales
Buenas Prácticas

• Si la mayoría son requeridos
– indicar los opcionales

• Si la mayoría son opcionales
– indicar los requeridos



Campos requeridos
• Para marcar requeridos: * y texto
• Ejemplo: * (requerido)
– Al inicio y final del formulario Buenas Prácticas

explicar significado de asteriscos.
“Los campos marcados con * son requeridos”

– Mostrar el asterisco en color diferente
al de la etiqueta.

– Situar el asterisco junto a la
etiqueta,
a la izquierda preferiblemente.


Largo del campo
• Adecuado para el dato
• Siempre que se pueda, mantener el mismo
tamaño en todos los campos Buenas Prácticas


Formularios >> Buenas Prácticas >> Información >>Acciones
No todas las acciones son
iguales
• Reset, Cancel y Atrás
– son acciones secundarias, no deberían ser usadas
muy seguido
• Guardar, Continuar y Enviar
– son acciones primarias, directamente
responsables por el llenado del formulario



Jerarquía visual
• La presentación visual de la acción debe ser según
su importancia



Ayudar al usuario



• Papeleta de votación del 10 Abril 1938.
“¿Está usted de acuerdo con la reunificación de Austria con el
Imperio Alemán y vota por el partido de nuestro líder Adolf Hitler?”
El círculo grande dice “Si”, el chico dice “No”
Wikipedia: http://en.wikipedia.org/wiki/German_election_and_referendum,_1938


Acciones
• Evitar acciones secundarias, si es posible.
Buenas Prácticas

• Asegurar una distinción visual clara entre
acciones primaria y secundaria

• Alinear acciones primarias con campos de
entrada para una ruta clara


Formularios >> Buenas Prácticas >> Información >> Ayuda y tips

Ayuda y tips
• Útiles cuando:
– Preguntan por datos poco familiares
– Los usuarios pueden preguntarse porqué se
solicita ese dato
– Hay un formato recomendado de ingreso del dato
– Algunos datos son opcionales

• Si son demasiados, complica…
– Que se muestren al hacer foco
– Que se muestren a pedido del usuario



Ayuda y tips
• Minimizar la cantidad de ayuda y tips
requeridas Buenas Prácticas

• La ayuda debe estar visible y adyacente al
campo

• Cuando se piden muchos datos complejos o
que el usuario no esta familiarizado,
considere usar un sistema de ayuda dinámico


Formularios >> Buenas Prácticas >> Interacción

Interacción

Formularios >> Buenas Prácticas >> Interacción

Interacción

Guiar al final Tabulación

Revelación
Dependencias
progresiva


Formularios >> Buenas Prácticas >> Interacción >> Guiar al final

Guiar hacia el final
• Objetivo primario de todo formulario es que
sea completado y enviado

• Cada ingreso de datos requiere consideración
y acción



Pedir poco
• Eliminar todos los pedidos innecesarios
de datos Buenas Prácticas

www.msp.gub.uy - Registrarse


Default inteligentes
• Lo más usado
• Lo recomendado Buenas Prácticas



“Iluminar el camino al final”

Buenas Prácticas



Por partes
• Formularios largos
– Dividir
– Mostrar progreso Buenas Prácticas

– Salvar “borrador”


Formularios >> Buenas Prácticas >> Interacción >> Tabulación

Tabulación
• Muchos usuarios interactúan con un
formulario tabulando entre campos

• El marcado correcto de HTML asegura que el
tabulador funcione como se espera



Varias columnas

• Formularios con
varias columnas
pueden generar
conflictos



Tabulación
• El marcado correcto de HTML asegura
que el tabulador funcione como se Buenas Prácticas
espera
• Probar siempre el formulario usando
solamente el teclado


Formularios >> Buenas Prácticas >> Interacción >> Revelación progresiva

Revelación progresiva
• Opciones adicionales cuando es
necesario, Buenas Prácticas

no antes.
– Opciones avanzadas
– Compromiso gradual


Formularios >> Buenas Prácticas >> Interacción >> Dependencias

Ingreso de datos dependientes
• Un dato requiere o permite ingresar
otros datos dependientes



Página intermedia

• Requiere pasos adicionales


Tabs

• Requiere default inteligentes
• Pueden pasar desapercibidos


Selectores de sección

• Agrupa información efectivamente
• Esconde alguna información

Inactivo hasta que se
selecciona

• Asociación entre la selección primaria se deteriora

Formularios >> Buenas Prácticas >> Interacción >> Revelación progresiva

Revelación progresiva
• Mantener la relación con la selección
inicial clara Buenas Prácticas

• Asociar claramente los campos
adicionales con su disparador
• Evitar "saltar" des-asociando las
opciones de selección iniciales


Formularios >> Buenas Prácticas >> Feedback

Feedback

http://www.bang2write.com/2012/08/how-to-feed-back-on-others-work-by-samuel-caine.html

Formularios >> Buenas Prácticas >> Feedback >> Validación inline

Validación inline
• Feedback directo mientras se ingresan
los datos
– Valida datos
– Sugiere datos validos
– Ayuda a los usuarios a


Validación de nombre de
usuario



Otros ejemplos
• Sugerencias de datos válidos

• Conteo de caracteres



Validación inline
• Para datos que tienen un alta
probabilidad de erro Buenas Prácticas

• Usar datos sugeridos para desambiguar
• Comunicar los limites


Formularios >> Buenas Prácticas >> Feedback >> Errores

Errores
• Asegurar que todos los datos requeridos
son validos
• Etiquetas claras, ayudas, tips y
validaciones ayudan a reducir errores
• Pero algunos errores pueden ocurrir
• Proveer una resolución clara en la
menor cantidad posible de pasos



Errores



Formularios cortos



Errores
• Comunicar claramente cuando un error
ha ocurrido: Buenas Prácticas
– arriba con contraste visual
• Indicar cómo corregir los errores
• Asociar el campo con el error


Formularios >> Buenas Prácticas >> Feedback >> Progreso

Progreso
• Algunas acciones requieren tiempo de
procesamiento
– Envío de formulario
– Cálculos
– Uploads


Formularios >> Buenas Prácticas >> Feedback >> Progreso

Progreso
• Dar indicaciones sobre la tarea en progreso
• Deshabilitar botón de envío para evitar Buenas Prácticas
envíos duplicados


Formularios >> Buenas Prácticas >> Feedback >> Éxito

Éxito
• Comunicar claramente que el envío del
formulario fue exitoso Buenas Prácticas

• Proveer feedback en el contexto de los
datos enviados



• a


Formularios >> Buenas Prácticas >> Otras

Otras buenas prácticas
• Evitar cambiar datos ingresados por el
usuario Buenas Prácticas

• Si hay información que no es fácil de
obtener, avisar al usuario antes de
presentarle el formulario



Títulos
• Titular formularios
• Texto introductorio
• Titulo de grupos
• Etiquetas de los campos


Página inicial

• Si el proceso es complejo y
demorado e involucra
muchos pasos
• Crear una pagina de
introducción donde se
indican necesidades y
restricciones


Mensajes
• Hacer un inventario de todos los posibles
mensajes, como y donde serán usados
– Para simplificar, reutilizar y garantizar consistencia

• Mensajes de ERROR!
– Solamente cuando es imposible continuar
– Los demás mensajes NO son errores

• Evitar paginas de error sin salida

Ejemplo

Favorece – Registro de usuario: http://favorece.net/user/register

Lecturas recomendadas
– Web Form Design - Luke Wroblewski (ebay, yahoo)
• http://rosenfeldmedia.com/books/webforms/
– Olga Carreras
• http://olgacarreras.blogspot.com/2007/02/formularios-
usables-60-directrices-de.html
– Usolab
• http://www.usolab.com/articulos/abril3_04.php

Imágenes y conceptos de esta presentación son tomadas de las
lecturas recomendadas

Formularios

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Formularios

Ähnlich wie Formularios (20)

Mehr von tayzee

Mehr von tayzee (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (13)

Formularios