design - software - Diseño y desarrollo de la interfaz de usuario de POS: ¿qué debe incluirse y evitarse?

programa para diseñar interfaces graficas (9)

Tengo que diseñar y desarrollar UI para un sistema de punto de venta (POS). Hay características obvias que deben incluirse, como la selección y cantidad de productos, el método de pago, el monto de la oferta, el inicio de sesión del usuario (ya que muchos usuarios usarán una terminal), etc.

Mi pregunta se relaciona más con el aspecto del diseño de la interfaz de usuario para desarrollar este sistema. ¿Cómo deben posicionarse y dimensionarse las funciones / controles de la interfaz de usuario? ¿Hay un diseño preferido? ¿Deberían evitar sus colores?

Si conoces algún recurso para guiarme, eso también ayudaría.

La razón es que esto es crítico para mí, ya que conozco el entorno presurizado en el que se utilizan los sistemas POS y quiero que el proceso sea (i) rápido, (ii) simple de usar y (iii) sea lo más posible posible para el usuario para atender a los clientes.

Todas las respuestas, información y sugerencias son bienvenidas. Gracias.

Si pudieras mencionar el "desempate" entre controles que también se apreciaría (es decir, si se proporciona una pantalla táctil, se proporciona un control de teclado, pero si también se admite la entrada de teclado y ratón ¿cómo se maneja el espacio del teclado y la interfaz de usuario efectivamente?)

Además de lo que ya se ha publicado, aquí hay algunos consejos que recogimos en el camino.

Usamos dos UI distintas, una para la pantalla táctil con botones grandes en negrita y otra para la entrada del mouse / teclado. el código detrás de ellos es el mismo, solo que el diseño es diferente.

Para pantallas táctiles

Intente no tener mensajes emergentes que alejen el foco del formulario principal, ya que los usuarios pueden no mirar la pantalla, por ejemplo, si están chateando con el cliente. encontramos que si esto sucede, los usuarios continuarán escaneando productos sin darse cuenta de que no se han ingresado en la venta.

Si utiliza un escáner de código de barras, tenga en cuenta que a veces envía una tecla Intro después del código de barras, que activará los controles enfocados (diciendo sí / no a las ventanas emergentes). Para ayudar a prevenir esto, deshabilitamos la tecla enter, presionamos los botones, por lo que solo presionaremos el mouse / finger para activar el evento click. también cambiamos el tabulador a falso (puede llamarse diferente en su idioma), para detener el enfoque de los controles que solo son táctiles.

En cuanto a los colores, tratamos de mantener los colores de las letras y los botones en negrita que pueden distinguirse / leerse fácilmente en habitaciones mal iluminadas y en pantallas con deslumbramiento, ya que la mayoría de las veces los usuarios no pueden mover la pantalla si tienen problemas para leer eso.

Cualquier cosa que pueda hacer para acelerar / ayudar al usuario es algo bueno, por ejemplo, en nuestra pantalla de pago, además de tener 0.9 claves para la entrada de pago, también tenemos £ 1, £ 2, £ 5, £ 10 etc. para que los usuarios no tengan que sumar el dinero que se les entrega, solo pueden presionar la tecla correspondiente a cada moneda / nota que recibieron del cliente.

El mejor consejo que puedo dar es recordar que está diseñando para un entorno completamente diferente desde una aplicación de escritorio, que se usaría en una oficina. y que los usuarios nunca pueden haber usado una computadora antes. ya que los sistemas POS generalmente están bloqueados, trate de hacerlo tan fácil de usar como sea posible.

Grandes comentarios de todos los demás. Añadiré que también hay un artículo del Dr. Kevin Scoresby titulado "Cómo diseñar un sistema (POS) que todo el mundo odia" que discute la usabilidad de los sistemas POS y agrega algunos puntos a lo que las personas ya han mencionado, tales como:

No castigue al empleado por las opciones del cliente
Evita crear conflictos con el mundo real
Evite la codificación por colores (1 de cada 10 hombres tiene una forma de daltonismo)

También descubrí muchos consejos útiles sobre diseño de POS en POSDesigns.com . Una cosa que me pareció interesante es que al centrarse demasiado en la cantidad de pulsaciones de los botones, en realidad puede afectar la velocidad, que a menudo es un objetivo principal. También hay un consejo titulado "Cinco factores que influyen en la velocidad" que encontré útil.

¡Buena suerte!

Kyle

Me encontré con esta pregunta, y pensé que agregaría mis dos centavos ya que parte de mi trabajo ha sido mencionado aquí.

Estoy de acuerdo con la mayoría de lo que se ha dicho, pero es importante recordar que todo lo mencionado representa la heurística . Eso significa que, si bien son buenos principios a seguir, hay ocasiones en las que (a) se deben romper reglas específicas, y (b) habrá contradicciones entre las reglas. El truco es poder sopesar los principios en conflicto y aplicarlos a los grados apropiados (como lo notó en un comentario anterior).

Al final, se trata de equilibrar los requisitos del negocio y las necesidades del usuario de una manera que produzca resultados óptimos. Y en el mundo real, me parece que esto nunca se puede lograr solo a través de la heurística.

Aquí hay un ejemplo: Recientemente terminé los diseños de puntos de venta para Subway, Wendy''s y Starbucks (vea Estudios de casos en POSDesigns.com ). Todos estos diseños usaban heurística sólida, pero todos ellos salieron muy, muy diferentes debido a las diferencias en los objetivos y requisitos del negocio, las necesidades y los antecedentes de los usuarios, el entorno en el que trabajan, la tecnología utilizada y un conjunto anfitrión de otras diferencias.

Nunca puedes crear un gran diseño en el vacío. Para cada uno de los clientes mencionados anteriormente, viajé a muchos tipos diferentes de tiendas en varios países para tener una idea de cómo funcionaban los usuarios, cómo se usarían los sistemas, cómo se ordenaban los clientes, etc. Toda esta información: junto con las ventas y otros datos proporcionados por la empresa, fue invaluable en la creación de una solución altamente utilizable.

Aquí hay otro ejemplo: la pauta n. ° 3 que proporcionó previamente ("Capacidad de apoyo / destreza") está bien como heurística (aunque debo decir que cuestiono la conclusión de intercambiar simplemente OK / Cancelar). Pero al visitar las tiendas de Subway, descubrimos que, en ese contexto, la ubicación del registro en realidad juega un papel más importante en la mano que los empleados prefieren.

En otras palabras, los registros que fueron aplastados contra una pared en el lado derecho tendieron a producir usuarios zurdos, incluso cuando los usuarios eran diestros para cualquier otra tarea. Esto tuvo implicaciones en la forma en que permitimos que la interfaz de usuario se volteara ... y quién tenía el control de la misma. Hay muchos ejemplos como este, pero nunca podríamos haber logrado las ganancias que las interfaces de usuario han producido, como una reducción del 90% en vacíos, entrenamiento casi nulo, mayor velocidad, precisión y tamaños de cheque, etc., siguiendo solo la heurística. .

Un punto más (lo siento ... ya me tienes en marcha ahora :-). Muchas veces las heurísticas son incompletas sin más datos sobre cómo aplicarlas. Considere su pauta n. ° 11, "Pedidos conversacionales". Hay mucho más en esta guía que solo proporcionar flexibilidad en la entrada de orden. Por ejemplo, una de las muchas cosas que debe tener en cuenta es que no todas las rutas deben presentarse como igualmente probables.

Analizamos la forma en que los clientes de Starbucks solicitaron en varios lugares en los Estados Unidos y el Reino Unido. Luego, optimizamos el sistema para los patrones más comúnmente hablados. Si hubiéramos permitido que todas las rutas tuvieran el mismo "volumen", habríamos sacrificado la usabilidad en otras áreas, ya que el diseño habría parecido más desordenado. El nuevo sistema POS ahora admite casi todos los posibles patrones de orden, pero los caminos más probables se presentan a un "volumen" mayor que aquellos que son menos probables.

OK, resultó ser más de dos centavos, pero la conclusión es la siguiente: si tiene la oportunidad de visitar los entornos en los que se utilizará su POS, analizar las interacciones cliente / empleado, etc. ... debe tomar eso. Las observaciones y análisis contextuales son invaluables para aplicar correctamente la heurística a su situación.

¡Buena suerte!

Dr. Kevin Scoresby

FYI - Me gustaría hablar más sobre esto si usted o alguien más en el grupo quisiera. El número de teléfono de mi oficina está en mi página " Acerca de nosotros " en POSDesigns.com, o puede usar el formulario para iniciar una conversación por correo electrónico. No dude en llamar en cualquier momento durante el horario comercial de EE. UU., Hora de la costa este.

Otra cosa a considerar es personalidades (tal como se introdujo en Cooper: "los reclusos tienen el asilo").

esencialmente, usted compone algunos "usuarios" canónicos. déles nombres, pasatiempos, habilidades, una imagen, y úselos como las personas para quienes está diseñando.

es decir:

billy the cajero: tiene algo de experiencia informática (jugando en su ps2). él está en la escuela secundaria, puede ir a la universidad de la comunidad. es un usuario principal del sistema y desea aprender el nuevo sistema rápidamente.

Cyrus el gerente: necesita administrar los cajeros. necesita una forma, con solo su autorización, transacciones anónimas y poder revisar los registros de las ventas para generar informes y gestionar la "contracción" (robo). tiene 2 hijos, vive en los suburbios, tiene un viaje de 45 minutos; por lo tanto, no quiere pasar más tiempo disputando el sistema.

puedes necesitar tres o cuatro personas; más que eso y se hace difícil diseñarlo.

Recomiendo mucho el libro "los reclusos están administrando el asilo", además cooper escribió otro libro: "sobre la cara"; que aún tengo que leer

¡buena suerte!

Recomendaría hacer algún tipo de encuesta de usabilidad entre su grupo de usuarios actual. No es necesario que esta sea una encuesta complicada o altamente científica. Preséntelos con preguntas simples para determinar:

La prioridad de los usuarios al usar el sistema (precisión de la tarea, velocidad, estética)
Dispositivos de entrada preferidos
Flujo de trabajo a través de dicho sistema
Nivel de educación y conocimiento del dominio

Descubrí que se puede aprender mucho de una encuesta simple como esta y se puede aplicar a su diseño de interfaz de usuario para garantizar que la experiencia de uso de los usuarios sea satisfactoria.

Un par de pensamientos de un par de proyectos con los que he trabajado:

Para la pantalla táctil, asegúrese de que cada botón puede ser presionado por alguien con "dedos gordos" tan fácilmente como los más pequeños (algunos diseños fomentan el uso de pulgares en ubicaciones específicas). Además, resalte cada botón cuando se presiona (con un fade lento si tiene ciclos de CPU de repuesto).
Las cuadrículas más grandes son mejores que las más pequeñas. El teclado numérico siempre debe estar en el mismo lugar (a menudo, abajo a la derecha). El Enter / Tender / etc. las teclas de "transacción" deben ser más grandes que las teclas numéricas individuales: (1) lo hacen más obvio donde está, (2) se presionará con más frecuencia que otras áreas de la pantalla y se desgastará (un área más grande durará más en promedio ; esto era más importante con las pantallas táctiles de estilo antiguo, la tecnología más nueva es más resistente).
Permitir reasignar funciones / SKU a diferentes posiciones de grilla; el diseño que funciona bien para una tienda probablemente sea incorrecto para una tienda ligeramente diferente.
Agrupe las funciones relacionadas por color, pero use excelentes contrastes. Asegúrese de que la combinación anterior / posterior se ve bien en todos los ángulos (algunos LCD "sangran" los colores de izquierda a derecha y / o de arriba hacia abajo).
La retroalimentación positiva de la pantalla táctil con sonidos necesita tener conjuntos de volumen y sonido configurables. Los tonos apagados pueden ser mejores en una tienda de lujo más tranquila, pero los sonidos "alegres" son mejores en una tienda de ropa con música / ruido de fondo más ruidosos, etc.
Permita que el tamaño de la cuadrícula se especifique en porcentajes o "unidades de cuadrícula" en lugar de píxeles y dibuje todo con vectores, etc. ya que algunas combinaciones de hardware pueden tener pantallas LCD con mejor resolución. (Un sistema en el que trabajé originalmente se especificaba como 640x480 pero se enviaba a 1280x1024, por lo que mi planificación previa de diseño ahorró mucho trabajo posterior).

Y, por supuesto, primero mire las soluciones preparadas (especialmente si puede obtener un software / hardware de demostración para su evaluación). A pesar de que pueden ser costosos, a menudo implementan muchas cosas que tendrás que trabajar más adelante, y pueden ser más baratas a largo plazo, incluso después de crear complementos personalizados para tu sistema.

También:

Nuestra interfaz de usuario también admitía un combo normal de teclado / mouse (los botones tocables eran solo controles de botón estándar del tamaño adecuado). Si presionó una tecla numérica, se desencadenaría el mismo evento que al hacer clic en el botón del panel de pantalla; otras teclas de acceso rápido se asignaron a comandos de botón de uso frecuente (Intro, etc.).

Si se ejecuta en un escritorio que no sea POS (por ejemplo, backoffice), la ventana también se puede redimensionar (el "escritorio POS" mantiene la misma relación de aspecto, agregando espacio muerto a los lados si es necesario). Un menú superior estándar estaba disponible para tareas administrativas adicionales, informes, etc.

El diseño permitió a todos construir y probar la interfaz de usuario antes de finalizar el hardware asociado. Y las herramientas de prueba de interfaz de usuario estándar también funcionarían.

Aún más:

Nuestros escáneres de códigos de barras eran en serie / USB en lugar de como un teclado, por lo que cada paquete del dispositivo generaba un evento de comunicación. La clase de controlador "tipo de escáner" seleccionada usó el formato más seguro que el dispositivo podría proporcionarnos (algunos pueden proporcionar prefijos, sufijos y / o caracteres de suma de comprobación si se programaron correctamente) y luego quitó esto antes de entregar el código a la aplicación.

El sistema emitió un ruido "bzzzt" cuando el código de barras no se podía usar (por ejemplo, cuando el cajón de dinero está abierto).

Este diseño también evitó la necesidad de establecer el foco del teclado en un área de entrada específica.

Un consejo: si el usuario ingresa manualmente un código de barras a través del teclado y no lo ha completado al presionar Enter, y luego intenta escanear otro código de barras, debe emitir un pitido para que el usuario pueda aceptar o cancelar el elemento pendiente primero.

Ya hay algunos sistemas realmente buenos, es decir, Tabtill para Win 8 http://www.tabtill.com o Shopkeep para iOS http://www.shopkeep.com . La menor cantidad de clics que su usuario necesita para mejorar. Como también estoy involucrado en la codificación de tales soluciones y he trabajado con clientes que usan varios sistemas POS, algunos pueden ser realmente frustrantes. Recuerde ver a los cajeros en un bar tocando 10 veces solo para recibir el pago de un par de artículos, sus dedos se ciernen irremediablemente sobre la pantalla tratando de encontrar el botón de color correcto. ¡Mantenlo simple! Permita la clasificación de su rango de producto visible, categorícelos o use un lector de código de barras. Mantenga al menos un 5% de espacio entre los botones y no permita que las animaciones tontas reduzcan la velocidad de su UI. O invente el suyo o simplemente copie lo que ya existe con su propio toque.

Devstuff ya proporciona algunas excelentes respuestas. En adición:

Cree un diseño de prototipo (puede ser simplemente impreso en color en papel) y pruebe esto en un escenario que sea lo más realista posible, es decir, en una tienda, con un usuario real en el futuro. Promulgue algunos escenarios comunes y solicite al usuario que realmente "use" su prototipo, ya que él / ella usaría el producto final. Obtenga retroalimentación a través de la entrevista y la observación.
Una forma de evaluar su diseño es verificar si ha aplicado los principios de diseño de CRAP. Este artículo analiza cómo esto puede relacionarse con el diseño de la interfaz de usuario.

Pautas de diseño de TPV agregadas

En base a la literatura anterior y otra, esta es mi lista de pautas para el diseño de POS. [Sería bueno si creciéramos esta lista más]

Prioridades de rendimiento del usuario (en orden): eficacia (menos tiempo hasta la conclusión de la transacción) eficacia (información precisa y resultados) satisfacción del usuario (basada en los primeros 2 en el contexto del trabajo) tiempo de aprendizaje (reduzca el tiempo para aprender el sistema haciéndolo simple)

DIRECTRICES

Construcción flexible de transacciones : no fuerce una secuencia de transacción si es posible. Coloque pedidos de productos en cualquier orden y permita que se cambien a un punto.
Optimizar la tasa de transacción : permite que un usuario complete una transacción lo más rápido posible (los clics mínimos no son realmente el problema ya que más clics podrían significar un mayor valor de transacción, lo que tiene sentido comercial)
Capacidad de apoyo / destreza : la mayoría de los usuarios tienen una mano dominante y una mano más débil en términos de destreza. Permita que la interfaz de usuario se personalice (con un solo clic) para la lateralidad. mi ejemplo: un botón de alternancia L-> R / R-> L que mueve las funciones sencillas como "OK", "Cancelar" más cerca de la mano más débil.
Comentarios constantes : brindan retroalimentación instantánea que describe el estado actual de la transacción y el resultado calculado de la transacción (NB: cuentas) antes y después de confirmar una transacción.
Control "Volumen" : el volumen de control se refiere a la saturación / contraste del color, la importancia del posicionamiento y el tamaño de un control. Diseñe los controles utilizados con más frecuencia para tener "volúmenes" más grandes en relación con los controles utilizados con menos frecuencia. por ejemplo, botón "Pagar" más grande que el botón "cancelar". Por ejemplo, un alto contraste y una saturación de color mayor aumentan el volumen.
Capacidad de búsqueda de objetivos : encontrar y seleccionar objetivos (elemento, tecla numérica) es la clave de la eficiencia. Controles relacionados con el grupo (proximidad), controles de posición en bordes de pantalla (puntero de trampas de borde de pantalla), enfatizar la amplitud de control (esta dimensión enfatiza la llanura de movimiento normal del usuario) y la codificación de color hacen que encontrar y seleccionar objetivos sea más eficiente.
Evite el desorden : demasiadas opciones limitan el volumen de control y reducen la capacidad de búsqueda.
Use texto sin formato: evite las abreviaturas tanto como sea posible (use solo abreviaturas estándar, por ejemplo, tamaño: S, M, L, etc.). Esto es especialmente cierto para la búsqueda de productos.
Búsqueda de productos : métodos abreviados de soporte para pedidos regulares (es decir, comida de hamburguesas), búsqueda categorizada y búsqueda de nombres de artículos (artículos menos pedidos). Considere incluir un artículo especial: este es cualquier artículo en el que el usuario escriba lo que se quiere (es decir, una orden específica de whisky); sin embargo, esto requiere precios.
Evite la carga del usuario: el usuario debería poder leer las respuestas a las preguntas de los clientes desde la interfaz de usuario. Por lo tanto, proporcione comentarios regularmente solicitados / priorizados para la transacción (es decir, el cliente pregunta: "¿cuál será el saldo pendiente en mi cuenta si compro este artículo?" Debería aparecer en la interfaz de usuario ya)
Pedidos conversacionales : el cliente dirige el pedido, no el sistema. Por lo tanto, permite que la selección de elementos no sea secuencial.
Objetivo Enfocado : el objetivo de POS es concluir la transacción desde una perspectiva comercial. Siempre haga posible la conclusión de la transacción de inmediato con el botón "Pagar". Si se hace clic, los elementos incompletos se cancelarán: el usuario volverá a leer el pedido antes de solicitar efectivo / tarjeta de crédito)
Personas : hay diferentes categorías (personas) de usuarios de sistemas POS como (i) Empleado / Cajero y (ii) Administrador. La interfaz de usuario debe presentar las opciones relevantes para esa persona registrada de acuerdo con estas pautas, es decir, cajero: gran volumen de controles de creación de transacciones; Administrador: gran volumen de controles de transacción / gestión de usuarios.
Pantallas táctiles : (i) permiten la entrada táctil con controles generalmente más grandes para soportar una punta de dedo grande como puntero. (ii) Proporcione retroalimentación propioceptiva: esta es una retroalimentación que indica que se presionó el control (debe tener una pequeña demora en su fundido: el dedo del usuario estará en el camino inicialmente). (iii) Retroalimentación auditiva (opcional): esto ayuda con los comentarios, especialmente con respecto a los errores en el entorno presurizado.
Capacitación del usuario : los usuarios deben estar capacitados para comprender el protocolo comercial y la forma en que el POS respalda ese protocolo. Ellos son los que manejan el sistema. Además, hable con los usuarios de POS para diseñar y mejorar su sistema. De nuevo, son usuarios experimentados del sistema POS.
Análisis de contexto : se debe realizar un análisis exhaustivo del contexto de uso de su sistema POS para implementar de la mejor manera posible la heurística POS mencionada anteriormente. La comprensión del usuario (factores humanos), las tareas (frecuencia, duración, factores de estrés, etc.) y el entorno (iluminación, hardware, distribución del espacio, etc.) se deben realizar de manera exhaustiva durante el diseño y no deben asumirse. ¡Sé sucio y entra al espacio de trabajo de los usuarios! De esta forma, puede desarrollar algo que sus usuarios específicos puedan usar de manera efectiva, eficiente y satisfactoria

Espero que esto ayude a todos.

A todos los encuestados, ¡realmente aprecio sus comentarios! Por favor dame más palabras a esta respuesta. Gracias