¿Qué hace que este diseño de POS parezca anticuado?

Otras respuestas se centran en cómo mejorar el diseño, pero como preguntaste por qué el diseño parece anticuado:

Fuente demasiado pequeña . La izquierda se ve menos anticuada que el resto, ¿por qué? A la izquierda, el tamaño de fuente coincide con el espacio vertical disponible para el texto, mientras que en todos los demás botones la fuente es demasiado pequeña. Agreguemos también mayúsculas, Arial y las 3 líneas de texto fijas en cada botón (todos los botones, excepto Pagar, parecen estar formateados para recibir texto en la parte superior, central e inferior vertical, lo que genera incomodidad si solo hay 2 líneas). del texto real).

Colores poco atractivos . Parece que la pantalla usa 9 colores casi aleatorios, todos los cuales son parte de los 64 colores originales de EGA. Muchas GUI modernas usan diferencias de color más sutiles, a menos que haya una gran diferencia entre los botones. Algunas GUI modernas también usan gradientes de color en los botones.

Sin imágenes.

Efecto 3D de 2 colores. Los botones 3D que usan un borde de 2 píxeles de ancho con blanco uniforme en la parte superior izquierda y gris uniforme en la parte inferior derecha, además de un borde negro de un píxel a su alrededor, están realmente pasados ​​de moda.

Demasiado simple Al usar solo botones, hay una oportunidad perdida de indicar intuitivamente que actualmente estamos viendo la sección de Alimentos. Una interfaz gráfica de usuario moderna usaría otras pistas para indicar que las partes magenta y amarilla pertenecen juntas, como un rectángulo relleno detrás de los botones amarillos que se extiende hasta el fondo detrás del botón de comida:

Finalmente, el encabezado del sistema POS me molesta, pero creo que es simplemente un mal diseño y no tiene nada que ver con que esté fechado.

Antes de cambiar nada, asegúrese de que la pantalla actual admita más de EGA (paleta de 16 colores, elegidos de una tabla de 64 colores) y, si desea utilizar imágenes, asegúrese de que la resolución de la pantalla permita al usuario reconocer lo que se muestra en la pantalla. imágenes A veces, los dispositivos utilizados en el campo son bastante más antiguos de lo que uno podría imaginar. Además, al cambiar de color, tenga en cuenta el daltonismo.

Teniendo en cuenta que este es un sistema POS, diría que la funcionalidad está ahí. Los botones son grandes, relativamente fáciles de leer y están organizados en grupos, lo que me facilitaría encontrar lo que busco.

Habiendo dicho eso, veo buenas decisiones de estructuración, pero no muchas decisiones de diseño. Esto es lo que yo investigaría:

• Fuentes : todo en su aplicación usa mayúsculas Arial, pero no todos los elementos son iguales. Hay una jerarquía, y puede usar estilos de fuente o familias para representar eso. Por ejemplo, las filas inferiores podrían usar mayúsculas y minúsculas, porque en realidad no son parte de las opciones principales. Elegiste hacer "Pagar" más grande, lo cual es genial, pero es el único botón con un tamaño de fuente diferente. ¿Por qué cambiar la fuente, y no por ejemplo el color? No digo que debas, quiero decir que pensar de esta manera puede hacerte descubrir nuevas formas de separar elementos. Por ejemplo: ¿Ha considerado usar divisores?

• Espaciado : no está utilizando el mismo espaciado (márgenes) para muchos de los elementos. Mire los sistemas de cuadrícula , se beneficiaría terriblemente al usar uno. Un diseño equilibrado hará que el diseño se vea más ordenado y pulido. También tiene algunos problemas de espaciado extraño (IMO) con el texto dentro de los botones. El botón con 1 línea está centrado, 2 líneas tiene un espacio inmenso entre las filas y 3 líneas se ven bien, porque hay el mismo espacio en todas partes. ¿No tendría más sentido tener siempre el mismo espacio entre las líneas de texto, en lugar de intentar acercar el texto a los bordes tanto como sea posible?

• Color : la agrupación funciona para dejar en claro que los diferentes botones hacen cosas diferentes, pero no veo una razón detrás de la paleta. Trate de pensar en la dirección de: ¿Puedo usar el color para impulsar aún más mi mensaje? ¿Puedo utilizar el color para facilitar la tarea de encontrar botones? Ya lo está haciendo al darle a "Enviar" un tono diferente. Esta es una gran decisión. Pero luego veo que el color seleccionado es diferente dependiendo de si está en la columna derecha o en la central. ¿por qué?. Entonces piensa, ¿dónde más podrías usar el color de manera similar? Echa un vistazo a Google Material , pueden inspirarte a probar nuevos combos.

• Sombras y efectos : el efecto 3D es muy útil en este contexto, y creo que podría impulsarlo aún más. Aquí hay un ejemplo de POS 3D . Además, ¿ha considerado usar íconos? Pueden ser una buena ayuda visual.

Creo que la aplicación parece anticuada porque realmente no sigue ninguna tendencia, aparte de los bloques de color con algunas sombras paralelas, que era la norma cuando el software de diseño y los lenguajes de codificación no permitían mucha creatividad en ese sentido. Ahora, puedes hacer casi cualquier cosa. Tu diseño parece anticuado porque no aprovecha esos trucos y opciones de diseño que se hicieron populares en los últimos años.

Le recomiendo que eche un vistazo a otras aplicaciones similares, verifique lo que están haciendo bien o mal, vea cómo la suya puede nutrirse de algunas de esas ideas. Ya tienes un gran esqueleto, solo necesita algo de carne. Una cuadrícula y quizás jugar con algunos colores complementarios haría grandes cosas para su aplicación.

A primera vista, no puedo decir rápidamente qué es qué (y tengo experiencia con los sistemas POS de restaurantes). Para mí, los elementos en gris a la derecha de la interfaz de usuario no parecen estar juntos. Los elementos amarillos en el centro de la pantalla parecen ser en realidad 3 secciones, pero ¿esto no está claro?

De los ejemplos que muestro a continuación (y no digo nada de su calidad, son una selección aleatoria de una búsqueda rápida) puedes ver el uso de Iconos, Imágenes y grandes bloques de color. Estas son herramientas útiles para identificar acciones y distinguir áreas separadas de función o una jerarquía de información.

No tengo tiempo para una respuesta más detallada, pero lo que diré es que eche un vistazo a los ejemplos del diseño actual de UI (interfaz de usuario). Por ejemplo, una búsqueda rápida de 'Diseño de interfaz de usuario de POS' le dará imágenes como:

Aparte del diseño, ¿es funcional y las personas que lo operan entienden cómo usarlo? Hay un elemento de no arreglar lo que no está roto si ese es el caso.

Sí, parece anticuado, pero muchos sistemas de caja registradora que he usado son culpables del mismo aspecto simple. Los botones redondeados y los colores elegidos teniendo en cuenta la accesibilidad podrían arreglarlo, pero mi intuición es que esta es una pieza puramente funcional y tratar de "animarla" podría agregar confusión a los empleados.

El efecto 3D es realmente útil en este caso, ya que le dice rápidamente al usuario que se trata de un botón en el que se puede hacer clic, y me imagino que en el comercio de restaurantes, el tiempo es de gran importancia.

Tampoco soy un profesional del diseño, pero como tengo que tener en cuenta este tipo de cosas al crear aplicaciones móviles...

1. Deshazte del efecto 3d win32 de la vieja escuela. Está literalmente fuera de contacto en una era en la que todos esperan que las cosas se vean amigables con la pantalla táctil. Lo que desea usar son grandes regiones planas para cada área de acción (botón) sin espacio entre grupos de botones relacionados o sombras debajo de los botones. Busque en Material Design de Android . Es útil incluso para aplicaciones que no son móviles.

2. Use bordes (no colores) para agrupar elementos relacionados si esos elementos tienen espacio entre ellos. Si no hay espacio entre ellos, utilice colores para que toda el área relacionada parezca tener un color de fondo sólido.

3. Elija colores que sean más suaves (piense en colores pastel) y que formen parte de un esquema de color complementario. Asegúrese de tener versiones claras y oscuras de cada color en su paleta. Espero que no sigas lidiando con un sistema que solo puede mostrar desde la antigua paleta de colores CGA/VGA 16.

4. Los elementos de la interfaz de usuario deben estar coloreados consistentemente de acuerdo con el esquema de color. Por ejemplo: los botones que brindan entrada a la interfaz de usuario pueden considerarse diferentes de los botones que cambian de página o activan la funcionalidad principal, pero generalmente se debe usar 1 color para cada uno de estos tipos de botones en lugar de 1 color para todos los botones en un área funcional determinada. Esto ayuda al usuario a tener una mejor idea de lo que hará cada elemento de la interfaz de usuario.

5. Prefiera usar espacios entre las áreas de acción para separarlas y bordes planos y suaves entre los elementos de acción. Los elementos de acción en un área deben tener un tamaño regular (imagine que cada elemento de acción es una o más celdas adyacentes en una cuadrícula).

6. Al usar un área de título en la ventana:

   una. Todos los elementos de acción en esa área deben caber dentro del área del título.

   b. Todos los elementos de acción en esa área deben ser globales para la aplicación (es decir, inicio de sesión, configuración, etc.).

   C. El título no debe superponerse con nada más que un logotipo.

Espero que esto ayude.

Casi todos los elementos parecen ser botones. Pero cuando leo las etiquetas, parece que algunos botones son botones de acción, mientras que otros son para navegar.

En una interfaz de usuario moderna, distinguirías los dos. Una fila de pestañas sirve como una ayuda de navegación eficaz, tanto para mostrar dónde se encuentra actualmente como para llegar a otro lugar. Tenga una pestaña Pizza para todas las opciones de pizza y una pestaña Pasta para todas las pastas.

Tal vez el botón púrpura ALIMENTOS ya actúe como tal pestaña, y BEBIDAS es otra pestaña similar. Definitivamente no deberían estar a la derecha: el inglés se lee de arriba a abajo, de izquierda a derecha, y su flujo de trabajo debería copiar esto.

Una fila de pestañas funciona razonablemente bien, pero aquí puede tener una jerarquía más profunda. En ese caso, puede ser conveniente mostrar el estado actual de la interfaz de usuario como una ruta: Food > Starters >, una línea en la parte superior de la página de inicio. Haga que la primera entrada del menú "Entrantes" sea un botón "< Volver a Alimentos"; esto le permite ocultar bastantes controles.

En primer lugar, me preguntaría ¿cuál es el propósito?

¿Requiere que el operador encuentre rápidamente la clave y haga el pedido más rápido sin errores de ingreso? ¿O tiene que atraer y alentar a los usuarios a usar la GUI para la máquina?

En este caso, el propósito de la pieza indica claramente que es para una entrada de transacciones eficiente y rápida. Por lo tanto, podemos ir de una manera más simple y organizada en la que la forma, el color y la jerarquía deben dictar el orden lógico sobre la tendencia y la fantasía del diseño.

El problema con la GUI actual es:

Color : colores demasiado duros, que crearán estrés con el tiempo y afectarán la efectividad de la decisión de los usuarios. El fondo blanco con otros colores de alto contraste definitivamente crea fatiga visual y es difícil encontrar rápidamente la información necesaria que el usuario necesita recopilar.

Fuente : Demasiado pequeña para encontrar y tomar decisiones, esto también se ve afectado por el color áspero y el contraste entre el texto. Esto podría afectar en gran medida a los usuarios primerizos para que se acostumbren al sistema, más tiempo y producir más entradas erróneas.

Ordenar y agrupar : ¿Tenemos que tener el nombre "Sistema POS" arriba en tamaño de fuente grande? ¿Es beneficioso? ¡NO! Los usuarios de este sistema y los elementos en la pantalla lo dicen claramente. ¿Tiene sentido la agrupación? En realidad, no, los lotes se pueden agrupar, por lo que los usuarios pueden encontrarlos lógicamente. ¿Alguna de la elección de palabras tiene sentido? ¡NO! "ENVIAR"? ¿enviar, que? ¿"Menús fijos"? ¿Preparas menús todos los días? ¡NO! adelante. La jerarquía y la elección de palabras deben revisarse cuidadosamente.

Algunas personas publicaron con GUI con imágenes y cosas elegantes, ya que el propósito del equipo en sí indica claramente que no tiene que ser elegante, pero debe ser altamente funcional y reflexivo.

Debido a que no se parece en nada a la forma en que los "mosaicos" están diseñados para dispositivos móviles, Android o el sistema operativo Windows específicamente viene a la mente, también es completamente diferente a Apple, lo que causa un conflicto porque controlan mucho de lo que está visualmente de moda. Prácticamente todo es "incorrecto", así que me saltaré los detalles.

Todas estas son excelentes respuestas, pero si desea algún material de referencia, un brillante ejemplo de cómo se ve un buen y moderno sistema POS, consulte la aplicación Square en iPad.

https://itunes.apple.com/us/app/square-register-point-sale/id335393788?mt=8

Creo que lo más importante que podría hacer para mejorar el existente (y por qué se ve tan anticuado) es que a la interfaz de usuario moderna le suele gustar mucho el espacio en blanco, y también hacer que el espacio en blanco sea blanco. Muchos diseños en estos días usan tipo inverso (texto blanco sobre fondo negro o texto blanco sobre cualquier color oscuro) con mucha moderación. Me gusta este sitio: https://developer.wordpress.com/calypso/

Los botones deben estar organizados por función, jerárquicos y los botones deben ser consistentes con la metodología de diseño.

En términos sencillos:

1) Coloque los botones más usados ​​en un lugar donde todos puedan encontrarlos fácilmente;

2) Los botones internos deben ser "controlados" por la cubierta exterior (ventana dentro de una ventana, dentro de una ventana);

3) Si tiene un botón de entrada (o cualquier otro botón, manténgalo en el mismo lugar aunque las pantallas cambien).

Muchos sistemas POS han intentado optimizar el diseño funcional, pero un POS que creo que está un poco por delante del juego es Rezku POS .