Cosa rende datato questo design POS?

Sto cercando di capire cosa rende datato questo design del punto vendita (POS).

Sono i pulsanti 3D, i colori, il layout, il carattere? E cosa faresti per renderlo attuale?

Non essendo un professionista del design, posso vedere che è datato. Ma non sono sicuro del perché e di come cambiarlo.

Altre risposte si concentrano su come migliorare il design, ma poiché hai chiesto perché il design sembra datato:

Carattere troppo piccolo . L'estrema sinistra sembra meno datata rispetto al resto, perché? A sinistra, la dimensione del carattere corrisponde allo spazio verticale disponibile per il testo, mentre in tutti gli altri pulsanti il ​​carattere è troppo piccolo. Lanciamo anche in maiuscolo, Arial e le 3 righe di testo fisse su ciascun pulsante (ogni pulsante diverso da Pay sembra essere formattato per ricevere testo in verticale in alto, al centro e in basso, portando a imbarazzo se ci sono solo 2 righe del testo reale).

Colori poco attraenti . Lo schermo sembra che utilizzi 9 colori quasi casuali, che fanno tutti parte dei 64 colori EGA originali. Molte GUI moderne usano differenze di colore più sottili, a meno che non ci sia una grande differenza tra i pulsanti. Alcune GUI moderne usano anche sfumature di colore nei pulsanti.

Nessuna immagine

Effetto 3D a 2 colori. I pulsanti 3D che usano un bordo largo 2 pixel con bianco uniforme in alto a sinistra e grigio uniforme in basso a destra, oltre a un pixel tutto il bordo nero attorno a loro sono davvero fuori moda.

Troppo facile. Utilizzando solo i pulsanti, c'è un'occasione persa per indicare intuitivamente che stiamo attualmente esaminando la sezione Food. Una Gui moderna userebbe altri indizi per indicare che il Magenta e le parti gialle si uniscono, come un rettangolo pieno dietro i pulsanti gialli che si estende sullo sfondo dietro il pulsante cibo:

Infine, l'intestazione del sistema POS mi dà fastidio, ma penso che sia solo un cattivo design e non abbia nulla a che fare con la sua datazione.

Prima di modificare qualsiasi cosa, assicurati che la visualizzazione corrente supporti più di EGA (tavolozza di 16 colori, scelta da una tabella di 64 colori), e se vuoi usare le immagini assicurati che la risoluzione del display permetta all'utente di riconoscere ciò che è mostrato nella immagini. A volte i dispositivi utilizzati sul campo sono un po 'più vecchi di quanto si possa immaginare. Inoltre, quando si cambiano i colori tenere presente il daltonismo.

Considerando che si tratta di un sistema POS, direi che la funzionalità è lì. I pulsanti sono grandi, relativamente facili da leggere e sono organizzati in gruppi, il che mi faciliterebbe la ricerca di ciò che sto cercando.

Detto questo, vedo buone decisioni di strutturazione, ma non molte decisioni di progettazione. Questo è ciò che vorrei esaminare:

• Caratteri : tutto nella tua app utilizza Arial maiuscolo, ma non tutti gli elementi sono uguali. C'è una gerarchia e potresti usare stili di carattere o famiglie per rappresentarlo. Ad esempio, le righe inferiori potrebbero usare maiuscole e minuscole, in quanto non fanno realmente parte delle opzioni principali. Hai scelto di ingrandire "Pay", il che è fantastico, ma è l'unico pulsante con una dimensione del carattere diversa. Perché cambiare il carattere e non ad esempio il colore? Non dicendo che dovresti, intendo pensare in questo modo può farti scoprire nuovi modi di separare gli elementi. Ad esempio: hai preso in considerazione l'uso dei divisori?

• Spaziatura : non stai utilizzando la stessa spaziatura (margini) per molti degli elementi. Guarda nei sistemi a griglia , trarrai enormi benefici dall'utilizzarne uno. Un layout equilibrato renderà il design più ordinato e lucido. Hai anche alcuni strani problemi di spaziatura (IMO) con il testo all'interno dei pulsanti. Il pulsante con 1 linea è centrato, 2 linee hanno uno spazio immenso tra le righe e 3 linee sembrano a posto, perché c'è uguale spaziatura ovunque. Non avrebbe più senso avere sempre lo stesso spazio tra le righe di testo, invece di cercare di avvicinare il testo il più vicino possibile ai bordi?

• Colore : il raggruppamento funziona per chiarire che pulsanti diversi fanno cose diverse, ma non vedo un motivo dietro la palette. Prova a pensare nella direzione di: Posso usare il colore per spingere ulteriormente il mio messaggio? Posso usare il colore per facilitare il compito di trovare i pulsanti? Lo stai già facendo dando un tono diverso a "Invia". Questa è un'ottima decisione. Ma poi vedo che il colore selezionato è diverso a seconda che si trovi nella colonna di destra o in quella centrale. perché?. Thenn pensa, dove altro potresti usare il colore in modo simile? Dai un'occhiata a Google Material , potrebbero ispirarti a provare nuove combo.

• Ombre ed effetti : l'effetto 3D è molto utile in questo contesto e penso che potresti spingerlo ancora oltre. Ecco un esempio di POS 3D . Hai anche preso in considerazione l'uso delle icone? Possono essere di aiuto visivo.

Penso che l'app appaia datata perché in realtà non segue alcuna tendenza, a parte i blocchi di colore con alcune ombre, che era la norma quando il software di progettazione e i linguaggi di codifica non permettevano molta creatività in questo senso. Ora puoi fare quasi tutto. Il tuo design sembra datato perché non sta sfruttando quei trucchi e le scelte di design che sono diventati popolari negli ultimi anni.

Ti consiglierei di dare un'occhiata ad altre app simili, controllare cosa stanno facendo nel modo giusto o sbagliato, vedere come le tue possono coltivare da alcune di quelle idee. Hai già un grande scheletro, ha solo bisogno di un po 'di carne. Una griglia e forse giocare con alcuni colori complementari farebbe grandi cose per la tua app.

A prima vista, non posso dire rapidamente cosa sia cosa (e ho esperienza con i sistemi POS per ristoranti). Per me, gli elementi in grigio a destra dell'interfaccia utente non sembrano essere uniti. Gli elementi gialli al centro dello schermo sembrano in realtà 3 sezioni, ma questo non è chiaro?

Dagli esempi che ho mostrato di seguito (e non sto dicendo nulla della loro qualità, sono una selezione casuale da una rapida ricerca) Puoi vedere l'uso di icone, immagini e grandi blocchi di colore. Questi sono strumenti utili per identificare azioni e distinguere aree di funzione separate o una gerarchia di informazioni.

Non ho tempo per una risposta più dettagliata, ma quello che dirò è dare un'occhiata agli esempi dell'attuale progettazione dell'interfaccia utente. Ad esempio, una rapida ricerca di "POS UI Design" ti darà immagini come:

Design a parte, è funzionale e le persone che lo utilizzano capiscono come usarlo? C'è un elemento di non riparare ciò che non è rotto se questo è il caso.

Sì, sembra datato, ma molti sistemi di cassa che ho usato sono colpevoli dello stesso semplice aspetto. Bottoni arrotondati e colori scelti pensando all'accessibilità in mente potrebbero farla apparire, ma la mia sensazione è che si tratti di un pezzo puramente funzionale e provare a "ravvivare" potrebbe aggiungere confusione ai dipendenti.

L'effetto 3D è effettivamente utile in questo caso in quanto dice rapidamente all'utente che si tratta di un pulsante cliccabile e immagino che nel tempo di scambio del ristorante sia di grande importanza.

Non sono nemmeno un professionista del design, ma dal momento che devo considerare questo genere di cose durante la creazione di app mobili ...

1. Elimina l'effetto Win32 3d della vecchia scuola. È letteralmente fuori dal mondo in un'era in cui tutti si aspettano che le cose sembrino compatibili con il touchscreen. Quello che vuoi usare sono ampie aree piatte per ogni area di azione (pulsante) senza alcuna spaziatura tra i gruppi di pulsanti correlati o ombre sotto i pulsanti. Guarda in Material Design di Android . È utile anche per le app non mobili.

2. Utilizzare i bordi (non i colori) per raggruppare gli elementi correlati se tali elementi hanno una spaziatura tra di essi. Se non c'è spazio tra loro, attenersi all'utilizzo dei colori in modo che l'intera area correlata sembri avere un colore di sfondo uniforme.

3. Scegli i colori più morbidi (pensa ai colori pastello) e fai parte di una combinazione di colori gratuita. Assicurati di avere versioni chiare e scure di ogni colore nella tua tavolozza. Spero che tu non abbia ancora a che fare con un sistema che può essere visualizzato solo dalla vecchia tavolozza di colori CGA / VGA 16.

4. Gli elementi dell'interfaccia utente devono essere coerentemente colorati in base alla combinazione di colori. Ad esempio: i pulsanti che forniscono l'input dell'interfaccia utente possono essere considerati diversi dai pulsanti che cambiano pagina o attivano la funzionalità principale, ma in genere dovrebbe essere utilizzato 1 colore per ciascuno di questi tipi di pulsanti anziché 1 colore per tutti i pulsanti in una determinata area funzionale. Questo aiuta l'utente a farsi un'idea di cosa farà ogni elemento dell'interfaccia utente.

5. Preferisci utilizzare la spaziatura tra le aree di azione per separarle e i bordi piatti e morbidi tra gli elementi di azione. Gli oggetti azione in un'area devono avere dimensioni regolari (immagina che ogni oggetto azione sia 1 o più celle adiacenti in una griglia).

6. Quando si utilizza un'area del titolo nella finestra:

   un. Tutti gli elementi di azione in quell'area devono rientrare nell'area del titolo.

   b. Tutti gli elementi di azione in quell'area dovrebbero essere globali per l'applicazione (es. Login, impostazioni, ecc.).

   c. I titoli non devono essere sovrapposti a nient'altro che a un logo.

Spero che aiuti.

Quasi tutti gli elementi sembrano essere pulsanti. Ma quando leggo le etichette, sembra che alcuni pulsanti siano pulsanti di azione, mentre altri sono per la navigazione.

In un'interfaccia utente moderna, dovresti distinguere i due. Una fila di schede funge da efficace aiuto alla navigazione, sia per mostrare dove ti trovi attualmente sia come arrivare altrove. Avere una scheda Pizza per tutte le opzioni di pizza e una scheda Pasta per tutte le paste.

Forse il pulsante viola CIBO funge già da scheda e DRINKS è un'altra scheda. Non dovrebbero assolutamente essere sulla destra: l'inglese viene letto dall'alto verso il basso, da sinistra a destra e il flusso di lavoro dovrebbe copiarlo.

Una fila di schede funziona abbastanza bene, ma qui potresti avere una gerarchia più profonda. In tal caso, potrebbe essere saggio mostrare l'attuale stato dell'interfaccia utente come percorso:, Food > Starters >una riga nella parte superiore della pagina di partenza. Rendere la prima voce del menu "Antipasti" un pulsante "<Ritorno al cibo"; questo ti permette di nascondere parecchi controlli.

In primo luogo, vorrei chiedere qual è lo scopo?

Richiede all'operatore di trovare rapidamente la chiave e rendere l'ordine più veloce senza errori di immissione? o deve attrarre e incoraggiare gli utenti a utilizzare la GUI per la macchina?

In questo caso, lo scopo del pezzo indica chiaramente che è per una transazione efficiente e veloce. Pertanto, possiamo andare in modo più semplice e organizzato che la forma, il colore e la gerarchia devono dettare l'ordine logico rispetto alla tendenza del design e alla fantasia.

Il problema con la GUI corrente è:

Colore : colori troppo aggressivi, che creeranno stress nel tempo e influenzeranno l'efficacia della decisione dell'utente. Lo sfondo bianco con altri colori ad alto contrasto, crea sicuramente affaticamento degli occhi e difficile trovare rapidamente le informazioni necessarie che l'utente deve raccogliere.

Carattere : troppo piccolo per trovare e prendere decisioni, anche questo è influenzato dal colore aspro e dal contrasto tra il testo. Ciò potrebbe influire notevolmente sulla prima volta che gli utenti si abituano al sistema, più a lungo e producono più errori di immissione.

Ordine e raggruppamento : dobbiamo avere il nome "Sistema POS" lassù con caratteri di grandi dimensioni? È benefico? NO! Gli utenti di questo sistema e gli elementi sullo schermo lo dicono chiaramente. Il raggruppamento ha senso? Non proprio, molti possono essere raggruppati, quindi gli utenti possono trovarli logicamente. Qualche parola scelta ha senso? NO! "INVIARE"? inviare cosa? "Imposta menu"? imposti i menu tutti i giorni? NO! via. Gerarchia e scelta delle parole devono essere esaminate attentamente.

Alcune persone hanno pubblicato con la GUI con immagini e cose fantasiose, poiché dallo scopo dell'attrezzatura stessa, dice chiaramente che non deve essere elegante, ma deve essere altamente funzionale e ponderato.

Poiché non assomiglia affatto al modo in cui i "riquadri" sono progettati specificamente per dispositivi mobili, Android o sistemi operativi Windows, mi viene in mente del tutto inusuale - il che provoca un conflitto perché comandano così tanto di ciò che è visivamente in voga. Praticamente tutto è "sbagliato", quindi salterò i dettagli.

Tutte queste sono ottime risposte, ma se vuoi del materiale di riferimento, un brillante esempio di come sia un buon sistema POS moderno, controlla l'app Square su iPad.

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

La cosa più grande che penso che potresti fare per migliorare quella esistente (e perché sembra così datata) è che l'interfaccia utente moderna tende a gradire molto spazio bianco - e anche a rendere bianco lo spazio bianco. Molti progetti in questi giorni usano il tipo inverso (testo bianco su sfondo nero o testo bianco su qualsiasi colore scuro) con molta parsimonia. Mi piace questo sito: https://developer.wordpress.com/calypso/

I pulsanti dovrebbero essere organizzati per funzione, gerarchici e pulsanti dovrebbero essere coerenti con la metodologia di layout.

In parole povere:

1) Posiziona i pulsanti più utilizzati in un luogo in cui tutti possano trovarli facilmente;

2) I pulsanti interni devono essere "controllati" da un guscio esterno (finestra all'interno di una finestra, all'interno della finestra);

3) Se disponi di un pulsante di invio (o di qualsiasi altro pulsante, tienilo nello stesso posto anche se le schermate potrebbero cambiare.

Molti sistemi POS hanno cercato di ottimizzare il design funzionale, ma un POS penso sia un po 'più avanti rispetto al gioco è Rezku POS .