Ingresar datos en una cuadrícula

Question

Pregunta de UI: ¿hay algún consenso sobre cuál es la mejor (definida como "la que los usuarios finales prefieren") o la manera menos mala de implementar la entrada de datos en una cuadrícula?

Tengo una grilla, con muchas filas. Las columnas de la cuadrícula contienen varios tipos de propiedades, que el usuario puede ingresar/editar. Los "tipos" de propiedades incluyen:

• Texto libre
• números (dígitos numéricos)
• valor de enumeración (por ejemplo, uno de 'Alto', 'Medio' y 'Bajo')
• Otros (por ejemplo, fecha, duración)

El tipo de "texto libre" no es difícil de diseñar (así que no preguntaré sobre eso), pero ¿qué ocurre con los siguientes dos tipos?

dígitos numéricos

• Cuando se utiliza un teclado para introducir un número, que se permita la entrada de texto libre, y luego ejecutar un método de validación de la falta de definición? ¿O puede controlar cada pulsación de tecla para restringir la entrada de datos a dígitos solamente?
• ¿Cómo le dice al usuario (en una grilla, no en un formulario) que la sintaxis de los datos en alguna columna está restringida a solo numérica? ¿Qué haces si el usuario presiona una tecla incorrecta (no numérica)?
• Un control 'spin' o 'spinner' es un control estándar de Windows; ¿es apropiado intentar usar uno en una grilla basada en HTML también?

Enum valora

Para introducir o editar un valor de enumeración utilizando el ratón, supongo que al quitar un poco de menú contextual de un clic del ratón es lo que hay que hacer.

• Una alternativa es usar el control de entrada <select> (es decir, un cuadro combinado). Aunque creo que tener una columna llena de cuadros combinados no es tan fácil de leer como tener una columna de valor de texto (porque los cuadros combinados agregan tinta adicional que no es de texto)? ¿Qué piensas que normalmente muestra texto sin formato, pero reemplaza ese texto con un cuadro combinado cuando el campo recibe el foco de entrada (y luego elimina el cuadro combinado en desenfoque)?
• ¿También podría mostrar ese mismo menú en el enfoque, cuando el enfoque cambia como resultado del teclado (es decir, la tecla [Tab]) en lugar de un resultado del mouse (es decir, un clic)? En otras palabras, ¿debería tabular a un resultado de campo en un menú emergente? A propósito, los menús emergentes basados ​​en CSS que he visto responden al mouse pero no al teclado (por ejemplo, a las teclas de flecha [Arriba] y [Abajo]). ¿Conoces alguna implementación de entrada de datos tipo Intellisense que pueda ejecutarse en un navegador?

Por ejemplo?

También me gustaría ver algo que crea que es un ejemplo ejemplar. Estoy interesado en la interfaz de usuario del escritorio y/o en las respuestas del navegador.

---

Editar: tras otra pregunta con la etiqueta [de entrada de datos] ("Has anyone used Sigma Grid (Javascript-based editable data grid)?"), estoy mirando el ejemplo Sigma cuadrícula.Hace muchas cosas bien IMO (buen soporte para el teclado y cuadros de selección just-in-time); pero su soporte para campos numéricos puede ser imperfecto, por ejemplo, si presiono 'a' en una celda numérica, a veces aparece un cuadro de alerta para decirme que estoy equivocado (donde tal vez una información sobre herramientas sería menos intrusiva), y/o a veces deja la celda vacía (en blanco), borrando la 'a' y no dejando nada en su lugar.

---

Editar en respuesta a una de las siguientes respuestas.

De nuevo, sin embargo, determine QUÉ uso principal va a ser su formulario, y optimícelo para eso. La visualización o el análisis de los datos tiene diferentes necesidades que la entrada masiva, y satisfacer a los usuarios del teclado es completamente diferente que los usuarios de teclado + mouse.

Quiero que la misma pantalla (es decir, una tabla/cuadrícula) funcione bien para mostrar propiedades existentes, crear nuevas propiedades y editar propiedades existentes. Espero docenas de elementos (es decir, docenas de filas de datos), cada uno con solo algunas columnas (por ejemplo, una columna de texto/descripción del artículo, más 1 o más columnas para 1 o más propiedades de elementos asociados).

Algunos de los datos/propiedades pueden ser subjetivos y relativos (por ejemplo, dos propiedades para cada elemento son la 'prioridad' o 'dificultad' de cada elemento, que es especialmente significativa solo en comparación con otros elementos), que es por lo que quiero mostrar todos los datos en una sola pantalla: para que el usuario final pueda compararlos.

Mi aplicación es para usuarios de computadoras relativamente expertos (no principiantes), pero no especialistas en el ingreso de datos: p. los usuarios son desarrolladores de software, gerentes de proyectos, gerentes de productos, personal de control de calidad, etc., pero también hasta cierto punto sus clientes; se está ejecutando en una intranet (no en internet pública), sin embargo, fácil de usar y fácil de entender es muy importante.

Además, no veo por qué satisfacer a los usuarios del teclado es completamente diferente que los usuarios de teclado + mouse: pensé que una sola solución podría/debería soportar una y/o ambas.

Answer 1

En mi humilde opinión, la gran pregunta que debe hacer es el propósito principal de su página y la relativa sofisticación de sus usuarios. ¿Estás lidiando con los profesionales clave de Tab + 10, los mecanógrafos de mouse + clic + hunt-peck, un poco de ambos?

Las elecciones que realice deben tener esto en cuenta. Supongo que, en virtud de la elección de una grilla, los usuarios son un paso hacia arriba desde la parte inferior, y usan la navegación con tabulación como medio principal para navegar su formulario, y el uso principal es la entrada masiva de datos.

En cuanto a la introducción numérica:

• Si usted está pensando en ofrecer una rutina de conversión, no hay necesidad de restringir a un dígito.
• En el caso en que un usuario ingrese una entrada no válida (tenga en cuenta que algunos números, no solo el texto pueden ser inválidos ... por ejemplo, edad negativa) es mejor que muestre el error en línea e inmediatamente.
• Evita los rotuladores, especialmente si trabajas con números con decimales. Los Spinners alejan el foco de la entrada de datos y proporcionan un valor mínimo a menos que se trate de un conjunto finito de números discretos. Si este es el caso, un Combo/Select puede ser mejor (detallaré por qué en la próxima publicación).

En cuanto a los valores de enumeración:

• se deben evitar los menús pop-ups/contextuales como la peste. Requieren que el usuario use el mouse y quite el enfoque de la tarea actual, literalmente cuando genera una nueva ventana. Un Combo/Select permite a los usuarios cierto grado de escritura anticipada, y permite la selección del teclado mediante flechas.
• El problema del cuadro combinado que aparece (la flecha que hace que el texto sea más difícil de leer) es algo que puede aliviar con la solución de enfoque que proporciona; sin embargo, generalmente puede hacer que su cuadrícula sea más legible en general con más relleno entre filas y columnas.

comentarios adicionales:

• de texto gratuito las fechas w/conversiones si es posible. A menos que planee capacitar a sus usuarios u opte por adoptar algún sistema de enmascaramiento draconiano (e igualmente fastidioso golpeteo de muñeca en caso de falla de validación), se les debe permitir ingresar fechas como lo deseen. Advertencia si está tratando con gente internacional, ingresan meses y días de manera diferente. SOP en los EE. UU. En mm/dd/aaaa, mientras que muchos países prefieren dd/mm/aaaa.
• Si tiene una cantidad considerable de campos, puede considerar dividir la entrada de datos en varias líneas. Una cuadrícula plana de> 10 columnas es bastante difícil de comprender en una sola vista. El inconveniente de esto es el desplazamiento vertical incrementado, por lo que tendrá que equilibrar la importancia de usar el contexto de datos (por ejemplo, las filas anteriores y las siguientes) para interpretar la fila actual de datos de edición por un lado y obtener todos los información de una fila (multi-línea o H-scrolling) en el otro.

Una vez más, sin embargo, determinar QUÉ el uso principal de su forma va a ser, y optimizar para eso. La visualización o el análisis de los datos tiene diferentes necesidades que la entrada masiva, y satisfacer a los usuarios del teclado es completamente diferente que los usuarios de teclado + mouse.

EDIT: Respuestas a los comentarios

Además, no veo la razón por la satisfacción de los usuarios teclado es completamente diferente de los usuarios de teclado + ratón: pensé que una única solución podría/debería apoyo cualquiera y/o ambos.

No es completamente diferente. Piense en ello como la diferencia entre "optimizar para" y "apoyar" al grueso de sus usuarios. Algunos ejemplos: los editores de código están optimizados para usuarios de teclado. Entre las teclas rápidas, los accesos directos y la navegación por el teclado, el usuario rara vez necesita usar el mouse. La mayoría de los juegos de RTS funcionan usando el teclado de una mano sobre el otro.Por lo general, admiten usando el mouse exclusivamente, pero no es optimizado para esto. ITunes está en el otro extremo: depende del ratón casi exclusivamente (como lo hacen la mayoría de las IU dominadas por la caída de drag) y usar el teclado solo es casi imposible.

Permiten la entrada y muestran un error ; o evite que la entrada y muestren un error? ¿Qué quiere decir con que lo muestra "en línea" cuando se trata de una cuadrícula (una celda, en algún lugar dentro de una tabla)?

No estoy seguro de qué plataforma está construyendo, pero sí me refiero a algún lugar dentro de la tabla, preferiblemente en la fila de datos de la que está hablando. En ASP.NET, GridView permite TemplateFields, que le permite insertar múltiples controles en la misma "celda". En el mundo de los clientes ricos, la mayoría de los componentes de terceros brindan soporte para cosas similares OOTB (por ejemplo, IDataErrorInfo) que le dan errores en contexto.

Si la alternativa es poner todos los errores por encima o por debajo de su cuadrícula, será difícil para los usuarios determinar cuál de las docenas de filas de datos tiene el error. Para un ejemplo de manejo subóptimo de esto, intente agregar 10 elementos a un carro de Amazon, luego cambie todos los montos a 2, excepto 1 artículo, que cambie a -1. Pulse actualizar y vea si puede navegar fácilmente a la fila con errores.

Además, el estilo "en" de estilo de validación es permitir a los usuarios ingresar datos y darles mensajes si es incorrecto sin que impide la entrada y/o eliminación de su entrada. StackOverflow lo hace en numerosos lugares, lo que se evidencia más fácilmente al agregar un comentario. La validación le notifica que necesita al menos 15 caracteres, pero no elimina su comentario cuando lo notifica. Un segundo cercano sería dejarle saber al usuario explícitamente, y de inmediato que su entrada es incorrecta. Un ejemplo de esto sería tratar de cambiar el nombre de un archivo con una barra invertida en Windows. Verás un globo con instrucciones precisas de inmediato.

Bueno, Intellisense o auto-completado es un tipo de menú emergente, pero puede ser operado utilizando (no toma el foco lejos de ) del teclado.

Si puede admitir pop-ups tan limpiamente como Intellisense en Visual Studio, yo diría que lo haga. Mi experiencia sin VS con ventanas emergentes es la que más intento y fracaso (algunas, bastante horribles al requerir que levante el mouse y vuelva a enfocarme en el lugar correcto). Otra cosa a tener en cuenta con Intellisense es que tiene un excelente manejo de final de frase (me refiero a la interacción con las palabras escritas + anticipación + ortografía/perdón de mayúscula + tabulación/manejo de entrada). Como supongo que está utilizando la pestaña para navegar entre los campos (tenga en cuenta que VS no tiene campos), tendrá que encontrar otra forma de que su aplicación sepa que "He terminado, vaya automático -Complete/Intellisense lo que acaba de escribir"

estaba pensando que marco del cuadro combinado alrededor del texto hace que el texto más difícil la lectura veloz; tal vez algunos cuadro combinado mínima, con una flecha hacia abajo pero ningún marco alrededor del cuadro combinado (sólo los bordes de las celdas de la tabla) sería mejor para las células que no tienen el foco : aunque me pregunto por qué incluso la flecha hacia abajo podría ser útil en las celdas que no tienen el foco.

Si le preocupa el marco del ComboBox, estoy totalmente de acuerdo: cambie el color del marco a algo con menor contraste. Cualquier solución que tomes para minimizar el control "cromo" cuando no está enfocado obviamente hará que sea más parecido al texto, y (¿posiblemente?) Más legible.

En cualquier caso, buena suerte con su diseño.

Answer 2

Para valores numéricos, suelo usar JavaScript para restringir la entrada de valores que no sean los que desea que ingresen. En este caso, números. No es necesario darles alertas o cualquier otra cosa, simplemente no lo permitan.

Para los valores enum, realmente iría con algún tipo de cuadro de selección o desplegable. Eso es lo que las personas están acostumbradas a usar en los sitios web. Puede hacerse elegante con él y esconderlo hasta que el mouse pase, o haga clic en el cuadro.

Para tabular, les permitiría tabular en otro cuadro de selección. Esto será más rápido para que algunas personas ingresen una gran cantidad de datos.

Answer 3

ExtJS

editable cuadrícula: http://extjs.com/deploy/ext-3.0-rc2/examples/grid/edit-grid.html

Fila Grid Editor: http://extjs.com/deploy/ext-3.0-rc2/examples/grid/row-editor.html

no he utilizado personalmente las versiones 3.0x todavía, pero 2.0 es bastante impresionante. Hay un poco de una curva de aprendizaje para el marco Ext, pero prácticamente hace de todo: validación, restricción de entrada, enlace de datos, etc.

Answer 4

jQuery tiene algunos cool plugins que ayudan en los modismos comunes de entrada de datos.

alto uso de jQuery, y algunos de estos complementos, junto con el factor de la estética, me indican que estos complementos representan algunas de las mejores maneras de controlar las entradas de usuario ...

Isaac encima en EVOLT también tiene a good article en Formularios utilizables

Answer 5

Aquí hay una lista confusa de observaciones por trabajar con formularios de entrada desde hace años.

dígitos numéricos:

• no limitan la longitud del campo - Es realmente molesto si ha añadido un carácter de separación (o una copa de más), sólo para descubrir que ya no puede llenar en el campo. Luego debe regresar, eliminar el carácter "ofensivo", ir al final y continuar llenando. Un buen sistema debería recortar y eliminar cualquier carácter que no sea de datos al salir del campo. Si el valor aún no encaja, informe al usuario de inmediato.
• Para evitar números que no sean números, solo ignore las teclas que llenarían una cadena que no sea un número. Tenga cuidado con los separadores de miles/decimales, espacios en blanco y caracteres de control (CTRL-x). Debería poder pegar valores de prácticamente cualquier formato disponible, incluidos los símbolos de moneda (que se eliminarán).
• Los controles de giro aún no son omnipresentes, por lo que solo deben utilizarse para interfaces expertas. También comparten muchas de las trampas de las barras de desplazamiento: ¿hay espacio suficiente para tener flechas de punto final, si la barra se escala con la escala um, si la escala es lineal, cuál es la longitud de barra mínima/máxima que es fácil? hacer clic y proporciona la precisión adecuada, ¿se puede aumentar de forma precisa y rápida incluso con un teclado?
• Después de que el usuario sale del campo, el valor se debe redondear a los dígitos permitidos máximos, y preferiblemente formateado según la configuración del sistema operativo para su legibilidad.

valores de enumeración:

• Cambiar el aparato de campo en la entrada sería confuso para los nuevos usuarios, por lo que deben usarse sólo para las interfaces de expertos.
• Las interfaces similares a Google Suggest son útiles cuando la lista es grande pero familiar para el usuario, ya que la navegación de una lista larga se puede reducir a una porción más manejable con unos pocos clics. Tal vez un selector desplegable debería estar disponible en caso de que el usuario realmente quiera ver todas las opciones existentes. Si el campo no permite nuevas entradas y el contenido del campo no coincide con ninguna de las opciones, debe intentar encontrar la coincidencia más cercana cuando el usuario navega fuera de ella. Por ejemplo, es útil ingresar solo el primer carácter si sabe que las opciones son "Alto", "Medio" y "Bajo", y que el sistema haga el resto.
• Cuando el campo adquiere foco, mediante el mouse o el teclado, debe mostrar inmediatamente las opciones disponibles si no son muy numerosas. Es una buena pista para los usuarios. Una de las dificultades es si es demasiado insistente, oscureciendo otras partes de la pantalla cuando el usuario está tratando de alejarse.

Answer 6

Tenga una mirada en http://www.peterblum.com

Utilizamos este producto en muchas de nuestra aplicación para el pasado 4+ años. Definitivamente mejora la interfaz de usuario de formularios web y resuelve muchos problemas de validación. En particular, funciona bien con control de cuadrícula.

Lo mejor de la suerte