Wodurch wirkt dieses POS-Design veraltet?

Ich versuche zu verstehen , was diese macht Point-of-Sale (POS) Screen - Design Look datiert.

Sind es die 3D-Schaltflächen, die Farben, das Layout, die Schrift? Und was würden Sie tun, um es aktuell aussehen zu lassen?

Ich bin kein Designprofi und kann sehen, dass es veraltet ist. Aber ich bin nicht sicher, warum und wie ich das ändern soll.

Andere Antworten konzentrieren sich darauf, wie das Design verbessert werden kann, aber da Sie gefragt haben, warum das Design veraltet aussieht:

Schrift zu klein . Die linke Seite sieht weniger alt aus als die anderen, warum? Links entspricht die Schriftgröße dem für den Text verfügbaren vertikalen Platz, während in allen anderen Schaltflächen die Schrift viel zu klein ist. Lassen Sie uns auch die Großbuchstaben Arial und die 3 festen Textzeilen auf jeder Schaltfläche eingeben (jede andere Schaltfläche als Pay scheint so formatiert zu sein, dass sie Text in vertikaler Richtung oben, in der Mitte und unten enthält, was zu Unannehmlichkeiten führt, wenn nur 2 Zeilen vorhanden sind des tatsächlichen Textes).

Unattraktive Farben . Der Bildschirm verwendet 9 fast zufällige Farben, die alle Teil der ursprünglichen 64 EGA-Farben sind. Viele moderne GUIs verwenden subtilere Farbunterschiede, es sei denn, es besteht ein großer Unterschied zwischen den Schaltflächen. Einige moderne GUIs verwenden auch Farbverläufe in den Schaltflächen.

Keine Bilder.

2-farbiger 3D-Effekt. Die 3D-Schaltflächen, die einen 2 Pixel breiten Rand mit einem einheitlichen Weiß oben links und einem einheitlichen Grau unten rechts sowie einem einen Pixel umfassenden schwarzen Rand verwenden, sind in der Tat veraltet.

Zu einfach. Indem Sie nur die Schaltflächen verwenden, haben Sie die verpasste Gelegenheit, intuitiv anzuzeigen, dass wir uns gerade mit dem Bereich Lebensmittel befassen. Ein modernes GUI würde andere Hinweise verwenden, um anzuzeigen, dass die Teile Magenta und Gelb zusammengehören, wie z. B. ein gefülltes Rechteck hinter den gelben Knöpfen, das sich bis zum Hintergrund hinter dem Lebensmittelknopf erstreckt:

Schließlich stört mich der POS-System-Header, aber ich denke, das ist nur schlechtes Design und hat nichts damit zu tun, dass es veraltet ist.

Vergewissern Sie sich, bevor Sie Änderungen vornehmen, dass der aktuelle Bildschirm mehr als EGA (16-Farben-Palette, ausgewählt aus einer 64-Farben-Tabelle) unterstützt. Wenn Sie Bilder verwenden möchten, stellen Sie sicher, dass der Benutzer anhand der Bildschirmauflösung erkennt, was in angezeigt wird bilder. Manchmal sind die Geräte, die im Feld verwendet werden, ziemlich viel älter, als man sich vorstellen kann. Denken Sie auch beim Ändern der Farben an die Farbenblindheit.

In Anbetracht der Tatsache, dass dies ein POS-System ist, würde ich sagen, dass die Funktionalität vorhanden ist. Die Schaltflächen sind groß, relativ einfach zu lesen und in Gruppen angeordnet, sodass ich leichter finden kann, wonach ich suche.

Trotzdem sehe ich gute Strukturierungsentscheidungen, aber nicht viele Designentscheidungen. Dies ist, was ich untersuchen würde:

• Schriftarten : In Ihrer App werden alle Arial-Großbuchstaben verwendet, aber nicht alle Elemente sind gleich. Es gibt eine Hierarchie, und Sie könnten Schriftstile oder -familien verwenden, um dies darzustellen. Zum Beispiel könnten die unteren Zeilen gemischte Groß- und Kleinschreibung verwenden, da sie nicht wirklich Teil der Hauptoptionen sind. Sie haben sich dafür entschieden, "Pay" zu vergrößern, was großartig ist, aber es ist die einzige Schaltfläche mit einer anderen Schriftgröße. Warum die Schriftart ändern und nicht zum Beispiel die Farbe? Wenn Sie nicht sagen, dass Sie das sollten, können Sie durch dieses Denken neue Wege entdecken, Elemente zu trennen. Zum Beispiel: Haben Sie darüber nachgedacht, Trennwände zu verwenden?

• Abstand : Sie verwenden für viele Elemente nicht den gleichen Abstand (Ränder). Wenn Sie in ein Gittersystem schauen , würden Sie furchtbar davon profitieren, wenn Sie eines verwenden. Ein ausgewogenes Layout lässt das Design geordneter und polierter aussehen. Sie haben auch einige seltsame Abstandsprobleme (IMO) mit dem Text in den Schaltflächen. Die Schaltfläche mit 1 Zeile ist zentriert, 2 Zeilen haben einen immensen Abstand zwischen den Zeilen, und 3 Zeilen sehen in Ordnung aus, da überall der gleiche Abstand vorhanden ist. Wäre es nicht sinnvoller, immer den gleichen Abstand zwischen den Textzeilen zu haben, anstatt zu versuchen, den Text so nah wie möglich an den Rand zu ziehen?

• Farbe : Die Gruppierung dient dazu, zu verdeutlichen, dass verschiedene Schaltflächen unterschiedliche Aufgaben ausführen, aber ich sehe keinen Grund hinter der Palette. Versuchen Sie, in die folgende Richtung zu denken: Kann ich Farbe verwenden, um meine Nachricht weiter zu verbreiten? Kann ich Farbe verwenden, um das Auffinden von Schaltflächen zu erleichtern? Sie tun dies bereits, indem Sie dem "Senden" einen anderen Ton geben. Dies ist eine großartige Entscheidung. Aber dann sehe ich, dass Ihre ausgewählte Farbe unterschiedlich ist, je nachdem, ob sie in der rechten oder in der mittleren Spalte steht. Warum?. Dann denke nicht, wo sonst könntest du Farbe auf ähnliche Weise verwenden? Werfen Sie einen Blick auf Google Material . Sie könnten Sie dazu inspirieren, neue Kombinationen auszuprobieren.

• Schatten und Effekte : Der 3D-Effekt ist in diesem Zusammenhang sehr nützlich, und ich denke, Sie könnten ihn noch weiter vorantreiben. Hier ist ein Beispiel für 3D-POS. Haben Sie auch überlegt, Symbole zu verwenden? Sie können für eine schöne visuelle Hilfe sorgen.

Ich denke, die App sieht veraltet aus, weil sie keinem Trend wirklich folgt, abgesehen von Farbblöcken mit einigen Schlagschatten, was die Norm war, als Design-Software und Programmiersprachen in dieser Hinsicht nicht viel Kreativität zuließen. Jetzt können Sie fast alles tun. Ihr Design sieht veraltet aus, weil es die in den letzten Jahren populären Designtricks und -optionen nicht nutzt.

Ich empfehle Ihnen, sich andere ähnliche Apps anzusehen, zu überprüfen, was sie richtig oder falsch machen, und zu sehen, wie Sie aus einigen dieser Ideen Nutzen ziehen können. Du hast schon ein tolles Skelett, es braucht nur etwas Fleisch. Ein Gitter und vielleicht das Spielen mit einigen Komplementärfarben würden großartige Dinge für Ihre App bewirken.

Auf den ersten Blick kann ich nicht so schnell sagen, was was ist (und ich habe Erfahrung mit Restaurantkassensystemen). Für mich scheinen die grau unterlegten Elemente auf der rechten Seite der Benutzeroberfläche nicht zusammen zu gehören. Die gelben Elemente in der Mitte des Bildschirms scheinen tatsächlich drei Abschnitte zu sein, aber das ist nicht klar?

Aus den Beispielen, die ich unten gezeigt habe (und ich sage nichts von ihrer Qualität, sie sind eine zufällige Auswahl aus einer Schnellsuche), können Sie die Verwendung von Symbolen, Bildern und großen Farbblöcken sehen. Dies sind nützliche Werkzeuge zur Identifizierung von Aktionen und zur Unterscheidung einzelner Funktionsbereiche oder einer Hierarchie von Informationen.

Ich habe keine Zeit für eine detailliertere Antwort, aber ich werde sagen, wir werfen einen Blick auf Beispiele des aktuellen UI-Designs (User Interface). Eine schnelle Suche nach "POS UI Design" liefert beispielsweise Bilder wie:

Abgesehen vom Design, funktioniert es, und verstehen die Leute, die es bedienen, wie man es benutzt? Es gibt ein Element von nicht reparieren, was nicht kaputt ist, wenn das der Fall ist.

Ja, es sieht veraltet aus, aber viele Kassensysteme, die ich verwendet habe, sehen genauso einfach aus. Abgerundete Knöpfe und Farben, die mit Blick auf die Zugänglichkeit ausgewählt wurden, könnten für Aufsehen sorgen. Mein Bauchgefühl ist jedoch, dass dies ein reines Funktionsstück ist und das Ausprobieren und "Aufpeppen" zu Verwirrung bei den Mitarbeitern führen kann.

Der 3D-Effekt ist in diesem Fall tatsächlich nützlich, da er dem Benutzer schnell mitteilt, dass dies eine klickbare Schaltfläche ist, und ich stelle mir vor, dass in der Gastronomie die Zeit von großer Bedeutung ist.

Ich bin auch kein Designprofi, aber da muss ich so etwas beim Erstellen von mobilen Apps berücksichtigen ...

1. Lassen Sie den Old-School-Win32-3D-Effekt hinter sich. Es ist in einer Zeit, in der jeder erwartet, dass Dinge touchscreen-freundlich aussehen, buchstäblich berührungslos. Was Sie verwenden möchten, sind große, flache Bereiche für jeden Aktionsbereich (Schaltfläche) ohne Abstand zwischen verwandten Gruppen von Schaltflächen oder Schatten unter den Schaltflächen. Sehen Sie sich das Material Design von Android an . Es ist auch für nicht-mobile Apps nützlich.

2. Verwenden Sie Rahmen (keine Farben), um verwandte Elemente zu gruppieren, wenn zwischen diesen Elementen ein Abstand besteht. Wenn kein Abstand zwischen ihnen vorhanden ist, verwenden Sie weiterhin Farben, sodass der gesamte zugehörige Bereich so aussieht, als hätte er eine feste Hintergrundfarbe.

3. Wählen Sie Farben, die weicher sind (denken Sie an Pastellfarben) und Teil eines ergänzenden Farbschemas. Stellen Sie sicher, dass Sie helle und dunkle Versionen jeder Farbe in Ihrer Palette haben. Ich hoffe, Sie haben es noch nicht mit einem System zu tun, das nur mit der alten CGA / VGA 16-Farbpalette angezeigt werden kann.

4. Benutzeroberflächenelemente sollten gemäß dem Farbschema einheitlich gefärbt sein. Zum Beispiel: Schaltflächen, die UI-Eingaben bereitstellen, können als anders angesehen werden als Schaltflächen, die Seiten wechseln oder die primäre Funktionalität auslösen. Im Allgemeinen sollte jedoch für jeden dieser Schaltflächentypen eine Farbe verwendet werden, während für alle Schaltflächen in einem bestimmten Funktionsbereich nur eine Farbe verwendet wird. Dies hilft dem Benutzer, eine bessere Vorstellung davon zu bekommen, was jedes UI-Element tun wird.

5. Verwenden Sie vorzugsweise Abstände zwischen Aktionsbereichen, um sie zu trennen, und flache, weiche Ränder zwischen Aktionselementen. Aktionselemente in einem Bereich sollten eine reguläre Größe haben (stellen Sie sich vor, jedes Aktionselement besteht aus mindestens einer benachbarten Zelle in einem Raster).

6. Wenn Sie einen Titelbereich im Fenster verwenden:

   ein. Alle Aktionselemente in diesem Bereich sollten in den Titelbereich passen.

   b. Alle Aktionselemente in diesem Bereich sollten für die Anwendung global sein (z. B. Anmeldung, Einstellungen usw.).

   c. Der Titel darf nur durch ein Logo überlappt werden.

Ich hoffe das hilft.

Fast alle Elemente scheinen Knöpfe zu sein. Aber wenn ich die Beschriftungen lese, scheinen einige Schaltflächen Aktionsschaltflächen zu sein, während andere der Navigation dienen.

In einer modernen Benutzeroberfläche würden Sie die beiden unterscheiden. Eine Reihe von Registerkarten dient als effektive Navigationshilfe, um zu zeigen, wo Sie sich gerade befinden und wie Sie an einen anderen Ort gelangen. Haben Sie eine Registerkarte Pizza für alle Pizza-Optionen und eine Registerkarte Pasta für alle Pastas.

Vielleicht fungiert die violette Taste FOOD bereits als eine solche Registerkarte, und DRINKS ist eine weitere Registerkarte dieser Art. Sie sollten definitiv nicht rechts sein - Englisch wird von oben nach unten, von links nach rechts gelesen, und Ihr Workflow sollte dies kopieren.

Eine Reihe von Registerkarten funktioniert recht gut, aber hier haben Sie möglicherweise eine tiefere Hierarchie. In diesem Fall kann es sinnvoll sein, den aktuellen Status der Benutzeroberfläche als Pfad anzuzeigen: Food > Starters >eine Zeile oben auf der Startseite. Machen Sie den ersten Eintrag des "Starters" -Menüs zu einem "<Back to Food" -Button; Auf diese Weise können Sie einige Steuerelemente ausblenden.

Zuerst würde ich fragen, was der Zweck ist?

Muss der Bediener den Schlüssel schnell finden und die Bestellung ohne Fehleingabe schneller ausführen? oder muss es Benutzer anziehen und ermutigen, die GUI für den Computer zu verwenden?

In diesem Fall zeigt der Zweck des Stücks deutlich, dass es für eine effiziente und schnelle Transaktionseingabe ist. Daher können wir einfacher und organisierter vorgehen, wenn Form, Farbe und Hierarchie die logische Reihenfolge über Designtrend und Fantasie bestimmen.

Das Problem mit der aktuellen GUI ist:

Farbe : Zu raue Farben, die mit der Zeit Stress verursachen und die Effektivität der Benutzerentscheidung beeinträchtigen. Weißer Hintergrund mit anderen kontrastreichen Farben ist auf jeden Fall eine Belastung für die Augen und es ist schwierig, schnell die erforderlichen Informationen zu finden, die der Benutzer zum Sammeln benötigt.

Schriftart : Zu klein, um eine Entscheidung zu treffen. Dies wird auch durch die raue Farbe und den Kontrast zwischen den Texten beeinträchtigt. Dies kann sich in hohem Maße auf Erstanwender auswirken, die sich länger an das System gewöhnen und mehr Fehleingaben verursachen.

Reihenfolge und Gruppierung : Müssen wir dort oben den Namen "POS-System" in großer Schriftgröße haben? Ist es vorteilhaft NEE! Die Benutzer dieses Systems und die Elemente auf dem Bildschirm geben dies deutlich an. Ist die Gruppierung sinnvoll? Nicht wirklich, das Los kann gruppiert werden, sodass Benutzer es logisch finden können. Macht ein Teil der Wortwahl Sinn? NEE! "SENDEN"? was schicken? "Menüs einstellen"? Stellen Sie täglich Menüs ein? NEE! her. Hierarchie und Wortwahl müssen sorgfältig geprüft werden.

Einige Leute haben eine grafische Benutzeroberfläche mit Bildern und ausgefallenen Dingen gepostet, da der Zweck der Ausrüstung selbst klar ist, dass sie nicht ausgefallen sein muss, sondern hoch funktional und durchdacht sein muss.

Da es nicht so aussieht wie die Art und Weise, in der "Kacheln" speziell für Mobilgeräte, Android oder Windows entwickelt wurden, ist es auch völlig unapple-artig - was zu Konflikten führt, weil sie so viel von dem befehlen, was visuell in Mode ist. Ziemlich alles daran ist "falsch", also werde ich Einzelheiten überspringen.

All dies sind großartige Antworten. Wenn Sie jedoch Referenzmaterial benötigen, ein hervorragendes Beispiel dafür, wie ein gutes, modernes Kassensystem aussieht, sehen Sie sich die Square-App auf dem iPad an.

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

Das Beste, was Sie meiner Meinung nach tun können, um das vorhandene zu verbessern (und warum es so veraltet aussieht), ist, dass moderne Benutzeroberflächen häufig viel Leerraum mögen - und auch, um den Leerraum weiß zu machen. Viele Designs verwenden heutzutage nur sehr sparsam die umgekehrte Schreibweise (weißer Text auf schwarzem Hintergrund oder weißer Text auf einer dunklen Farbe). Diese Seite gefällt mir: https://developer.wordpress.com/calypso/

Schaltflächen sollten nach Funktionen und Hierarchien geordnet sein, und Schaltflächen sollten der Layout-Methodik entsprechen.

In den Begriffen des Laien:

1) Platzieren Sie die am häufigsten verwendeten Tasten an einem Ort, an dem sie von allen leicht gefunden werden können.

2) Innere Knöpfe sollten von der äußeren Hülle "gesteuert" werden (Fenster innerhalb eines Fensters, innerhalb des Fensters);

3) Wenn Sie über eine Eingabetaste (oder eine andere Taste) verfügen, bewahren Sie diese an derselben Stelle auf, auch wenn sich die Bildschirme möglicherweise ändern.

Viele Kassensysteme haben versucht, das funktionale Design zu optimieren, aber ein POS, von dem ich denke, dass er dem Spiel etwas voraus ist, ist Rezku POS .