Cómo diseñar un formulario web Cómo diseñar una página de formulario web

La Guía de diseño de formularios web asume que está diseñando un sistema o aplicación para un producto empresarial. Este diseño requiere mesas. Estos diseños de tablas no son los estilos de tablas muy bonitos que se muestran en los sitios web de diseño, sino tablas con interacciones complejas y cientos de celdas.

En este caso, los diseñadores se enfrentarán a muchos retos. Por ejemplo, hacer coincidir un diseño con un marco de interfaz de usuario existente o luchar contra datos "incómodos" que interrumpen el diseño. Abordaremos estos temas en los siguientes pasos: sistematización de requisitos, atomización y definición de interacciones.

Así que has realizado entrevistas con tu público objetivo. Ahora es el momento de reconstruir sus necesidades y requisitos y convertirlos en algo útil para el diseño. Por ejemplo, un usuario dice: "Necesito entender cómo mis datos afectan al resto de la aplicación". O cuando ves a otra persona usando el software, notas que solo usa teclas de acceso directo y no toca el mouse en absoluto. ¿Qué significa esto? El primer usuario habla de validación de entradas y mensajes. Debe considerar adjuntar mensajes o información de ayuda al formulario, o desarrollar un sistema de colores significativo, según el dominio y el modelo mental. de varios usuarios, es posible que desee diseñar atajos configurables por teclado, y es posible que desee considerar atajos que sean más profundos que "CmdC" y "CmdV". Eso le deja una lista de necesidades y deseos. Las preguntas abiertas ayudan a descubrir necesidades reales y filtrar ideas fantásticas. Por ejemplo, "¿Qué le ayudaría a trabajar más rápido?" ¿Cómo mejorará esto su productividad? ¿Qué cambiaría si no pudiera hacer XX?

Aquí es donde entran los marcos funcionales. Como se muestra a continuación

El componente más pequeño de cualquier tabla es una unidad, que se compone de filas y columnas y tiene características específicas que la distinguen de otras unidades. Finalmente, utilizamos las adiciones importantes a la tabla como la barra superior, comandos de teclado, manejo de errores, etc.

En definitiva, construir una tabla compleja para recopilar y priorizar las necesidades de los usuarios. Considere soluciones no tabulares, como gráficos.

Dibujar un diagrama de árbol para sistematizar todas las funciones requeridas.

La minaturización significa diseñar primero pequeños componentes de la interfaz de usuario y luego ensamblar los grandes. Gradualmente pasaremos de partículas básicas como fuentes y colores a patrones más grandes como encabezados o columnas.

Estos componentes pueden definirse mediante un sistema de diseño o un marco de interfaz de usuario. Si crea un formulario para un producto existente, verifique que la paleta de colores, las fuentes y los íconos coincidan con las necesidades del formulario.

Cuando se complete el diseño atómico de la tabla, podremos comenzar a diseñar diferentes tipos de celdas. Primero, considere los estados "normal", "flotante" y "activo" de cada elemento. Luego agregue estados como "Clic" y "Desactivado".

Las celdas pueden tener información sobre herramientas, indicaciones de entrada, mensajes de error, marcadores de posición y otros archivos adjuntos.

Al diseñar celdas para crear filas, es necesario comprobar si las distintas combinaciones funcionan bien juntas. Tengo celdas de solo lectura y celdas editables que se muestran en la fila siguiente. Una vez que diseñe un formulario con una lógica de edición compleja, algunos campos del formulario serán proporcionados por el usuario, mientras que otros campos se calcularán o completarán automáticamente con valores predeterminados.

Tenga en cuenta que el cursor es diferente cuando pasa el cursor sobre celdas de solo lectura y celdas editables. Para celdas editables, al hacer clic en la celda se activará la selección de fila o se ingresará al modo de edición. Puede ver en la imagen a continuación cómo se ve la celda cuando el usuario selecciona una o más filas.

Ahora es el momento de pensar en los títulos de las tablas. En mi experiencia, normalmente no es posible controlar la longitud de los encabezados de las columnas y limitarlos a una línea. He mostrado las diferentes variaciones del título en la imagen a continuación.

En el caso de las herramientas basadas en datos, los usuarios a menudo necesitan ordenar y filtrar. Esto ayuda a los usuarios a encontrar información valiosa en datos extensos. La dificultad con la clasificación y el filtrado es combinar los controles de clasificación y filtrado con otros elementos del encabezado (encabezados de columna, unidades de medida, etc.).

.

A diferencia de las celdas de las tablas, los cuadros de filtro suelen tener un icono de "restablecer" a la derecha para que los usuarios puedan ver contenido sin filtrar.

En este ejemplo, hay tres tipos de cuadros de filtro. Filtros alfanuméricos de búsqueda por letras y números. Admite comodines: un número desconocido de caracteres desconocidos.

El filtro selector de fechas tiene un calendario que funciona igual que sus celdas. Permitir a los usuarios ingresar fechas manualmente y seleccionarlas en un calendario es algo bueno. Si el usuario sabe lo que está buscando, escribir es mucho más fácil que hacer clic. En uno de mis proyectos podríamos ingresar fechas como "25 de enero de 2017", "12 de junio de 2017", "4 de septiembre de 2016", etc. y luego simplemente filtrar por mes o año.

Una característica común de las tablas complejas es la reparación de columnas. Normalmente, las columnas que contienen información crítica (por ejemplo, nombre o estado del elemento) no se pueden desplazar.

Si bien se debe cambiar el tamaño de las columnas de la tabla de manera inteligente para que se ajusten al contenido, esto puede suceder cuando el texto está truncado. En este caso, ayuda cambiar el tamaño de las columnas. Los usuarios pueden arrastrar los bordes de las columnas para ver contenido más extenso.

Otra forma de manejar cadenas de texto largas es estirar la columna que contiene el contenido más largo o contraer el contenido en varias filas. El primer método funciona mejor para cadenas de texto más o menos similares. Si permitir que el usuario vea todo el contenido es más importante que mantener la tabla vertical y compacta, entonces el segundo enfoque es mejor.

Necesitamos definir un ancho mínimo de columna predeterminado para evitar que se cambie el tamaño de la tabla.

¿De qué partes se compone la mesa? celdas, columnas y filas. Además, las mesas complejas suelen tener una superficie operativa superior. Al igual que otros componentes, la barra superior se compone de elementos más pequeños, a saber, títulos y comandos. A continuación se muestra una lista de comandos que he recopilado para los distintos estados utilizados en el producto.

Ahora podemos probar a combinar diferentes elementos para ver si funciona. A continuación se muestran algunos ejemplos.

Por supuesto, esta no es una lista final de características y elementos. Es diferente de un proyecto y puede contener otros elementos, como:

Ordenar por múltiples columnas

Columnas personalizables

Filas expandibles; >

Operadores lógicos (y, u, otros, etc...) para filtrado y búsqueda.

Si estás indeciso sobre qué diseñar y qué no diseñar, consulta la navaja de Occam o la ley de simplificación. Los diseñadores no deben crear nuevas instancias si las existentes cumplen con los requisitos. Debería "eliminar" las funciones molestas que los usuarios puedan necesitar.

Tabla de sólo lectura. Este es el tipo de tabla más simple porque solo muestra datos. No hay opciones de filtrado o edición.

Formulario de búsqueda. Las celdas no son editables y el encabezado tiene cuadros de filtro y controles de clasificación para seleccionar filas. De hecho, estos formularios ayudan a encontrar, comparar y seleccionar uno o más elementos de un gran conjunto de contenido similar.

Tabla editable. O algunas celdas son editables y normalmente no es necesario filtrar porque el orden de las filas se puede personalizar. Estos formularios suelen tener barras de herramientas y permiten filas para realizar acciones.

En pocas palabras

Empiece por los componentes más pequeños. Luego, pase gradualmente a componentes más grandes y finalmente simule toda la tabla.

Considerar previamente todos los estados posibles de cada componente.

Utilice la navaja de Occam para mantener el número de elementos al mínimo pero cubrir todos los casos de uso.

Para construir algo tan complejo como una tabla, no basta con construir módulos. Los diseñadores deben considerar las "reglas del juego", los principios lógicos y las convenciones detrás de la parte visual del diseño.

Contenedores y tipos de respuesta

¿Cómo colocar un formulario en la interfaz? Por ejemplo, ¿ocupará algo de espacio vacío en un contenedor existente o en un módulo individual? Las respuestas a estas preguntas dependen enteramente del producto. El mejor enfoque es anticipar los problemas que puedan surgir y tener muy claros los principios.

Algunas aplicaciones utilizan líneas o "rayas de cebra" de color blanco y gris para aumentar la legibilidad de la información.

Defina un ancho predeterminado razonable y permita el cambio de tamaño manual si es necesario. Al leer una tabla, es mejor dejar algunas celdas vacías en el lado derecho en lugar de dejar espacios entre las columnas. Pero si la tabla contiene muchas filas y columnas, el desplazamiento horizontal y vertical es inevitable. Al leer en teléfonos móviles, también puede convertir tablas en tarjetas para ayudar a los usuarios a navegar por los datos.

Incluso las mesas muy lisas y bonitas pueden convertirse en una pesadilla para los usuarios. Por lo tanto, es importante seguir los principios de accesibilidad. Las siguientes son consideraciones clave para el diseño accesible.

Dale un título y escribe un resumen conciso. Los usuarios con discapacidad visual deberían poder procesar el formulario sin tener que hablar todas sus celdas.

Presta atención al tamaño de la fuente. Aunque no existe un tamaño mínimo oficial para las fuentes web, 16 píxeles (12 puntos) se considera el tamaño óptimo. Además, los usuarios deberían poder aumentar el tamaño de la tabla a 200 sin destruir todo el diseño.

Prueba de colores para personas daltónicas. Los controles de texto deben tener suficiente contraste con el fondo. La proporción de color mínima requerida es 3:1 (más, mejor). El color no debería ser la única forma de etiquetar las cosas. Por ejemplo, los mensajes de error no deben basarse únicamente en texto rojo; los iconos de advertencia servirán como referencia para los usuarios daltónicos.

Evite controles pequeños y oscuros. Los componentes en los que se puede hacer clic se consideran táctiles si tienen un tamaño mínimo de 40 x 40 píxeles. El comando representado por el icono debe tener una etiqueta o información sobre herramientas y un texto alternativo. Los diseñadores no deben abusar de los iconos, ya que es posible que los usuarios no comprendan correctamente las metáforas complejas.

En resumen

La unificación de contenidos y el formateo también son trabajo del diseñador.

Considere no sólo los elementos de la interfaz, sino también casos de uso, reglas y patrones comunes.

Original: plex-tables-356826d11861

Traducido por: siempre

Recomendaciones de artículos relacionados:

Antes de crear una especificación de diseño, Necesito consultar estos recursos de diseño.

Cómo construir un sistema de lenguaje de diseño

La interfaz de usuario principal se usa para transferir datos o cancelar la entrada a un script CGI en el servidor, y los botones del formulario también se pueden usar para controlar el procesamiento de otros scripts de procesamiento definidos.

¿Qué etiquetas se utilizan para crear tablas en html?

La etiqueta de formulario en HTML se utiliza para crear tablas

html es una de las tecnologías de páginas estáticas y contiene todos los controles de la página. La etiqueta de formulario es uno de los controles y funciones más utilizados. se utiliza para pasar http El protocolo envía datos de front-end al programa de back-end. Puede ser un formulario de obtención o un formulario de publicación. Los resultados del front-end se devolverán después del procesamiento de datos del back-end. El proceso es relativamente sencillo.