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

Estoy tratando de entender qué hace que este diseño de pantalla de punto de venta (POS) parezca anticuado.

¿Son los botones 3D, los colores, el diseño, la fuente? ¿Y qué harías para que parezca actual?

Al no ser un profesional del diseño, puedo ver que está anticuado. Pero no estoy seguro de por qué y cómo cambiar eso.

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

Font demasiado pequeño . 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. También agreguemos todo en mayúsculas, Arial y las 3 líneas de texto fijas en cada botón (cada botón que no sea Pay parece estar formateado para recibir texto en la parte superior, central e inferior vertical, lo que lleva a la 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 EGA originales. 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 degradados de color en los botones.

Sin imágenes.

Efecto 3D de 2 colores. Los botones 3D que usan un borde ancho de 2 píxeles con blanco uniforme en la esquina superior izquierda y gris uniforme en la esquina inferior derecha, más un borde negro de un píxel alrededor de ellos están de hecho fuera 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 Gui moderna usaría otras pistas para indicar que las partes Magenta y amarilla se unen, como un rectángulo lleno 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 solo un mal diseño y no tiene nada que ver con que esté fechado.

Antes de cambiar cualquier cosa, asegúrese de que la pantalla actual sea compatible con más de EGA (paleta de 16 colores, elegida de una tabla de 64 colores), y si desea usar imágenes, asegúrese de que la resolución de la pantalla le permita al usuario reconocer lo que se muestra en el 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 estoy buscando.

Dicho esto, veo buenas decisiones de estructuración, pero no muchas decisiones de diseño. Esto es lo que consideraría:

• Fuentes : todo en su aplicación utiliza mayúsculas Arial, pero no todos los elementos son iguales. Hay una jerarquía, y podría 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. Decidió 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, 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 en los sistemas de red , se beneficiaría enormemente de usar uno. Un diseño equilibrado hará que el diseño se vea más ordenado y pulido. También tiene algunos problemas de espacio extraños (IMO) con el texto dentro de los botones. El botón con 1 línea está centrado, 2 líneas tienen un espacio inmenso entre las filas y 3 líneas se ven bien, porque hay un espacio igual en todas partes. ¿No tendría más sentido tener siempre el mismo espacio entre líneas de texto, en lugar de tratar de acercar el texto lo más posible a los bordes?

• Color : la agrupación funciona para dejar en claro que 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 más mi mensaje? ¿Puedo usar el color para facilitar la tarea de encontrar botones? Ya lo estás haciendo dando al "Enviar" un tono diferente. Esta es una gran decisión. Pero luego veo que su color seleccionado es diferente dependiendo de si está en la columna derecha o en la central. ¿por qué?. Entonces, piense, ¿dónde más podría 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 iconos? 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, que era la norma cuando el software de diseño y los lenguajes de codificación no permitían mucha creatividad a ese respecto. Ahora puedes hacer casi cualquier cosa. Su 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, compruebe lo que están haciendo bien o mal, vea cómo la suya puede nutrir algunas de esas ideas. Ya tienes un gran esqueleto, solo necesita algo de carne. Una cuadrícula y tal vez 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 he mostrado a continuación (y no digo nada de su calidad, son una selección aleatoria de una búsqueda rápida) Puede ver el uso de iconos, imágenes y grandes bloques de color. Estas son herramientas útiles para identificar acciones y distinguir áreas de función separadas o una jerarquía de información.

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

Dejando de lado el 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 hasta que he usado son culpables de la misma apariencia 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 "animarlo" podría confundir a los empleados.

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

Tampoco soy un profesional del diseño, pero dado que 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. Mira en el diseño de materiales de Android . Es útil incluso para aplicaciones no móviles.

2. Use bordes (no colores) para agrupar elementos relacionados si esos elementos tienen espacio entre ellos. Si no hay espacio entre ellos, entonces use 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 todavía no esté 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 ser consistentemente coloreados según el esquema de color Por ejemplo: los botones que proporcionan la entrada de la interfaz de usuario pueden considerarse diferentes de los botones que cambian de página o activan la funcionalidad principal, pero generalmente debe usarse 1 color para cada uno de estos tipos de botones en lugar de 1 color para todos los botones en un área funcional dada. Esto ayuda al usuario a tener una mejor idea de lo que hará cada elemento de la interfaz de usuario.

5. Prefiere usar el espacio entre las áreas de acción para separarlas y los 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 1 o más celdas adyacentes en una cuadrícula).

6. Cuando use un área de título en la ventana:

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

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

   do. El título no debe solaparse con otra cosa que no sea 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 navegación.

En una interfaz de usuario moderna, distinguirías los dos. Una fila de pestañas sirve como una ayuda de navegación efectiva, tanto para mostrar dónde se encuentra actualmente y cómo 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 de ALIMENTOS ya actúa como una pestaña, y BEBIDAS es otra pestaña. 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 debe 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 IU 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 la comida"; Esto le permite ocultar bastantes controles.

Primero, preguntaría cuál es el propósito.

¿Requiere que el operador encuentre rápidamente la clave y agilice el pedido sin introducir errores? ¿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 necesitan 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 fuertes, 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 para reunir.

Fuente : Demasiado pequeño 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 nuevos que se acostumbren al sistema, por más tiempo y produzcan más errores de entrada.

Orden y agrupación : ¿Tenemos que tener el nombre "Sistema POS" en tamaño de letra grande? ¿Es beneficioso? NO! Los usuarios de este sistema y los elementos en la pantalla lo dicen claramente. ¿La agrupación tiene sentido? En realidad no, el lote se puede agrupar, por lo que los usuarios pueden encontrarlo lógicamente. ¿Tiene sentido la elección de algunas palabras? NO! "ENVIAR"? ¿enviar, que? "Establecer menús"? ¿Estableces 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 sofisticadas, ya que desde el propósito del equipo en sí, claramente dice que no tiene que ser elegante, sino que debe ser muy 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 vienen a la mente, también es completamente desagradable, lo que causa un conflicto porque controlan mucho de lo que está visualmente en boga. Casi todo está "mal", así que me saltearé detalles.

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

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

Lo más importante que creo que podría hacer para mejorar el existente (y por qué se ve tan anticuado) es que la interfaz de usuario moderna tiende a gustar mucho espacio en blanco, y también a hacer que el espacio en blanco sea blanco. Muchos diseños en estos días usan el 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árquica y los botones deben ser consistentes con la metodología de diseño.

En términos simples:

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 carcasa externa (ventana dentro de una ventana, dentro de la ventana);

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

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