Formularios

Formularios

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

http://www.ricardotayar.com/

Diseño de InteracciónDiseño de Interacción

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

Interactividad• Capacidad de intercambiar información entre dos entes

comunicativos usando elementos del diseño y acciones

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

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

Diseño de Interacción

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, BounceNuevas formas de diseño interactivo, John Vega, Cristalab Perú 2007



• Formularios: ¿Por qué son importantes?

Formularios



Formularios

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



Formularios

Online:lo único que tenemos son formularios..


• Desde diversos dispositivos!!

Formularios

Odiamos llenar formularios!

Formularios

Asumámoslo…

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, rutasWeb Form Design - Luke Wroblewski

• Minimizar el dolor– A nadie le gusta llenar formularios– Valores por default inteligentes

• Iluminar el camino para el éxito

• Tener en cuenta el contexto– Usuario familiarizado vs usuario nuevo– Usuario habitual vs usuario poco frecuente

• Consistencia en la comunicación– Errores, ayuda, éxito– Única voz

La receta para buenos formularios

Formularios >> Buenas Prácticas

Web Form Design - Luke Wroblewski

“Depende”

Si tus objetivos son…, prueba la solución…

Si tus restricciones son…, prueba la solución…

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

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

Información

Layout•Posicionamiento de etiquetas•Agrupación de contenido

Ingreso de datos•Formatos, campos requeridos

Acciones•Primaria y secundaria

Ayuda y tips

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

Información




Ayuda y tips

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 familiares: top

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

• Para ingreso de datos no familiares y avanzados: left


Buenas Prácticas


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


Agrupación de contenido

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

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



• Crear grupos lógicos para varios campos• Separar grupos visualmente• Menor cantidad posible de elementos visuales

para comunicar las relaciones


Buenas Prácticas


Tipos de campos

• Usar martillo para clavos y destornilladores para tornillos…

Buenas Prácticas


Información




Ayuda y tips

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

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

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

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


Buenas Prácticas


Campos requeridos• Para marcar requeridos: * y texto• Ejemplo: * (requerido)– Al inicio y final del formulario 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.


Buenas Prácticas


Largo del campo• Adecuado para el dato• Siempre que se pueda, mantener el mismo

tamaño en todos los campos


Buenas Prácticas



Información




Ayuda y tips

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


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

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.

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

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


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


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

Ayuda y tips

• Minimizar la cantidad de ayuda y tips requeridas

• 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


Buenas Prácticas


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

Interacción

Guiar al final Tabulación

Revelación progresiva Dependencias

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


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

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


Pedir poco

• Eliminar todos los pedidos innecesarios de datos

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

www.msp.gub.uy - Registrarse

Buenas Prácticas

Default inteligentesFormularios >> Buenas Prácticas >> Interacción >> Guiar al final


Buenas Prácticas

• Lo más usado• Lo recomendado

“Iluminar el camino al final”Formularios >> Buenas Prácticas >> Interacción >> Guiar al final


Buenas Prácticas

Por partesFormularios >> Buenas Prácticas >> Interacción >> Guiar al final


Buenas Prácticas

• Formularios largos – Dividir– Mostrar progreso – Salvar “borrador”

TabulaciónFormularios >> Buenas Prácticas >> Interacció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 columnasFormularios >> Buenas Prácticas >> Interacción >> Tabulación


• Formularios con varias columnas pueden generar conflictos

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


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

• Probar siempre el formulario usando solamente el teclado

Buenas Prácticas

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


• Opciones adicionales cuando es necesario,

no antes.– Opciones avanzadas– Compromiso gradual

Buenas Prácticas

Ingreso de datos dependientes

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


• Un dato requiere o permite ingresar otros datos dependientes

Página intermediaFormularios >> Buenas Prácticas >> Interacción >> Dependencias


• Requiere pasos adicionales

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


• Requiere default inteligentes• Pueden pasar desapercibidos

Selectores de secciónFormularios >> Buenas Prácticas >> Interacción >> Dependencias


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

Inactivo hasta que se selecciona

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


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

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


• Mantener la relación con la selección inicial clara

• Asociar claramente los campos adicionales con su disparador

• Evitar "saltar" des-asociando las opciones de selección iniciales

Buenas Prácticas

FeedbackFormularios >> Buenas Prácticas >> Feedback

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

Validación inlineFormularios >> Buenas Prácticas >> Feedback >> 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

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


Otros ejemplosFormularios >> Buenas Prácticas >> Feedback >> Validación inline


• Sugerencias de datos válidos

• Conteo de caracteres

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


• Para datos que tienen un alta probabilidad de erro

• Usar datos sugeridos para desambiguar• Comunicar los limites

Buenas Prácticas

ErroresFormularios >> Buenas Prácticas >> Feedback >> 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

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


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




• Comunicar claramente cuando un error ha ocurrido: – arriba con contraste visual

• Indicar cómo corregir los errores• Asociar el campo con el error

Buenas Prácticas

ProgresoFormularios >> Buenas Prácticas >> Feedback >> Progreso


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

ProgresoFormularios >> Buenas Prácticas >> Feedback >> Progreso


• Dar indicaciones sobre la tarea en progreso• Deshabilitar botón de envío para evitar

envíos duplicadosBuenas Prácticas

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


• Comunicar claramente que el envío del formulario fue exitoso

• Proveer feedback en el contexto de los datos enviados

Buenas Prácticas

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


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


• a

Otras buenas prácticasFormularios >> Buenas Prácticas >> Otras


• Evitar cambiar datos ingresados por el usuario

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

Buenas Prácticas

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

Formularios >> Buenas Prácticas >> Otras

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

http://favorece.net/user/register

– 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

Lecturas recomendadas

http://rosenfeldmedia.com/books/webforms/

http://olgacarreras.blogspot.com/2007/02/formularios-usables-60-directrices-de.html

http://olgacarreras.blogspot.com/2007/02/formularios-usables-60-directrices-de.html

http://www.usolab.com/articulos/abril3_04.php

Formularios

Technology

Transcript of Formularios