Co sprawia, że ​​ten projekt POS wygląda na przestarzały?

Próbuję zrozumieć, co sprawia, że ​​ten projekt ekranu w punkcie sprzedaży wydaje się przestarzały.

Czy to przyciski 3D, kolory, układ, czcionka? A co byś zrobił, aby wyglądał na aktualny?

Nie będąc projektantem, widzę, że jest przestarzały. Ale nie jestem pewien, dlaczego i jak to zmienić.

Inne odpowiedzi koncentrują się na tym, jak ulepszyć projekt, ale ponieważ zapytałeś, dlaczego projekt wygląda na stary:

Czcionka za mała . Sama lewica wygląda na mniej przestarzałą niż reszta, dlaczego? Po lewej stronie rozmiar czcionki odpowiada pionowej przestrzeni dostępnej dla tekstu, natomiast we wszystkich innych przyciskach czcionka jest zdecydowanie za mała. Dodajmy także wielką literę, Arial i 3 stałe wiersze tekstu na każdym przycisku (wydaje się, że każdy przycisk inny niż Pay jest sformatowany tak, aby odbierać tekst w pionie u góry, na środku i na dole, co prowadzi do niezręczności, jeśli są tylko 2 linie aktualnego tekstu).

Nieatrakcyjne kolory . Wygląda na to, że używa 9 prawie losowych kolorów, z których wszystkie są częścią oryginalnych 64 kolorów EGA. Wiele nowoczesnych graficznych interfejsów użytkownika wykorzystuje bardziej subtelne różnice kolorów, chyba że istnieje duża różnica między przyciskami. Niektóre nowoczesne GUI również używają gradientów kolorów w przyciskach.

Brak zdjęć

2-kolorowy efekt 3D. Przyciski 3D, które używają obramowania o szerokości 2 pikseli z jednolitą bielą w lewym górnym rogu i jednolitą szarością w prawym dolnym rogu, a także jeden piksel z całą czarną ramką wokół nich, są rzeczywiście niemodne.

Zbyt proste. Używając tylko przycisków, nie ma możliwości intuicyjnego wskazania, że ​​aktualnie patrzymy na sekcję Jedzenie. Współczesny Gui użyłby innych wskazówek, aby wskazać, że magenta i żółte części należą do siebie, takich jak wypełniony prostokąt za żółtymi przyciskami, który rozciąga się na tło za przyciskiem żywności:

Wreszcie niepokoi mnie nagłówek systemu POS, ale myślę, że to po prostu zły projekt i nie ma on nic wspólnego z datowaniem.

Przed zmianą upewnij się, że bieżący wyświetlacz obsługuje więcej niż EGA (paleta 16 kolorów, wybrana z tabeli kolorów 64), a jeśli chcesz użyć obrazów, upewnij się, że rozdzielczość wyświetlacza pozwala użytkownikowi rozpoznać to, co pokazano na zdjęcia. Czasami urządzenia używane w terenie są nieco starsze, niż można by to sobie wyobrazić. Również przy zmianie kolorów należy pamiętać o ślepocie kolorów.

Biorąc pod uwagę, że jest to system POS, powiedziałbym, że funkcjonalność jest dostępna. Przyciski są duże, stosunkowo łatwe do odczytania i są zorganizowane w grupy, co ułatwiłoby mi znalezienie tego, czego szukam.

Powiedziawszy to, widzę dobre decyzje dotyczące struktury, ale niewiele decyzji dotyczących projektowania. Chciałbym spojrzeć na to:

• Czcionki : wszystko w Twojej aplikacji korzysta z wielkich liter Arial, ale nie każdy element jest taki sam. Istnieje hierarchia, do reprezentowania której można użyć stylów czcionek lub rodzin. Na przykład w dolnych wierszach można używać małych i wielkich liter, ponieważ tak naprawdę nie są one częścią głównych opcji. Zdecydowałeś się zwiększyć „Pay”, co jest świetne, ale jest to jedyny przycisk o innym rozmiarze czcionki. Po co zmieniać czcionkę, a nie na przykład kolor? Nie mówię, że powinieneś, to znaczy myślenie w ten sposób może sprawić, że odkryjesz nowe sposoby oddzielania elementów. Na przykład: Czy rozważałeś użycie przekładek?

• Odstępy : Nie używasz tego samego odstępu (marginesów) dla wielu elementów. Spójrz na systemy gridowe , ogromnie skorzystasz na korzystaniu z jednego z nich. Zrównoważony układ sprawi, że projekt będzie wyglądał na bardziej uporządkowany i dopracowany. Występują również dziwne problemy z odstępami (IMO) związane z tekstem wewnątrz przycisków. Przycisk z 1 linią jest wyśrodkowany, 2 linie mają ogromną przestrzeń między rzędami, a 3 linie wyglądają dobrze, ponieważ wszędzie są równe odstępy. Czy nie ma większego sensu, aby zawsze mieć taką samą przestrzeń między wierszami tekstu, zamiast próbować przyciągać tekst jak najbliżej granic?

• Kolor : grupowanie działa tak, aby wyraźne było, że różne przyciski robią różne rzeczy, ale nie widzę powodu za paletą. Spróbuj pomyśleć w kierunku: Czy mogę użyć koloru, aby dalej przekazywać moją wiadomość? Czy mogę użyć koloru, aby ułatwić zadanie znajdowania przycisków? Już to robisz, nadając „Send” inny ton. To świetna decyzja. Ale potem widzę, że wybrany kolor różni się w zależności od tego, czy znajduje się w prawej kolumnie, czy w środkowej kolumnie. czemu?. Nie zastanawiaj się, gdzie indziej mógłbyś użyć koloru w podobny sposób? Spójrz na Materiał Google , mogą zainspirować Cię do wypróbowania nowych kombinacji.

• Cienie i efekty : Efekt 3D jest bardzo przydatny w tym kontekście i myślę, że można go jeszcze bardziej rozwinąć. Oto przykład 3D POS. Czy rozważałeś także użycie ikon? Mogą stanowić dobrą pomoc wizualną.

Myślę, że aplikacja wygląda na przestarzałą, ponieważ tak naprawdę nie podąża za żadnym trendem, z wyjątkiem bloków kolorów z pewnymi cieniami, co było normą, gdy oprogramowanie do projektowania i języki kodowania nie pozwalały na dużą kreatywność w tym zakresie. Teraz możesz zrobić prawie wszystko. Twój projekt wygląda na przestarzały, ponieważ nie wykorzystuje sztuczek i wyborów, które stały się popularne w ostatnich latach.

Polecam przyjrzeć się innym podobnym aplikacjom, sprawdzić, co robią dobrze, a co źle, przekonać się, w jaki sposób Twoja może pomóc w realizacji niektórych z tych pomysłów. Masz już świetny szkielet, po prostu potrzebuje trochę mięsa. Siatka i być może granie z uzupełniającymi się kolorami przydałoby się w Twojej aplikacji.

Na pierwszy rzut oka nie mogę szybko powiedzieć, co jest (i mam doświadczenie z restauracyjnymi systemami POS). Dla mnie elementy w kolorze szarym po prawej stronie interfejsu wydają się nie pasować do siebie. Żółte elementy na środku ekranu wydają się w rzeczywistości 3 sekcjami, ale nie jest to jasne?

Z przykładów, które pokazałem poniżej (i nie mówię nic o ich jakości, są one losowym wyborem z szybkiego wyszukiwania) Możesz zobaczyć użycie ikon, obrazów i dużych bloków kolorów. Są to przydatne narzędzia do identyfikowania działań i rozróżniania oddzielnych obszarów funkcji lub hierarchii informacji.

Nie miałem czasu na bardziej szczegółową odpowiedź, ale powiem to przykłady współczesnego projektu interfejsu użytkownika. Na przykład szybkie wyszukiwanie „POS UI Design” da ci obrazy takie jak:

Odłóż na bok, czy jest funkcjonalny i czy obsługujący go ludzie rozumieją, jak go używać? W takim przypadku istnieje element „nie naprawiaj tego, co nie jest zepsute”.

Tak, wygląda na przestarzały, ale wiele systemów, z których korzystałem, jest winnych tego samego prostego wyglądu. Zaokrąglone guziki i kolory wybrane z myślą o ułatwieniu dostępu mogłyby go wyolbrzymić, ale mam przeczucie, że jest to wyłącznie funkcjonalny utwór, a próba „podkręcenia” może wprowadzić zamieszanie wśród pracowników.

Efekt 3D jest w tym przypadku przydatny, ponieważ szybko mówi użytkownikowi, że jest to przycisk, który można kliknąć, a ja myślę, że w handlu czas handlu ma ogromne znaczenie.

Nie jestem też projektantem, ale ponieważ muszę brać pod uwagę tego rodzaju rzeczy przy tworzeniu aplikacji mobilnych ....

1. Porzuć old-schoolowy efekt win32 3d. Jest to dosłownie bezdotykowe w erze, w której wszyscy oczekują, że będzie wyglądać przyjaźnie dla ekranu dotykowego. To, czego chcesz użyć, to duże płaskie obszary dla każdego obszaru akcji (przycisku) bez odstępów między powiązanymi grupami przycisków lub cieni pod przyciskami. Zobacz materiał projektowy Androida . Jest to przydatne nawet w przypadku aplikacji innych niż mobilne.

2. Użyj ramek (nie kolorów), aby pogrupować powiązane elementy, jeśli między nimi są odstępy. Jeśli nie ma między nimi odstępów, trzymaj się kolorów, aby cały powiązany obszar wyglądał tak, jakby miał jeden jednolity kolor tła.

3. Wybierz kolory, które są bardziej miękkie (pomyśl o pastelowych kolorach) i stanowią część bezpłatnej kolorystyki. Pamiętaj, aby mieć jasne i ciemne wersje każdego koloru w swojej palecie. Mam nadzieję, że nadal nie masz do czynienia z systemem, który może wyświetlać tylko ze starej palety kolorów CGA / VGA 16.

4. Elementy interfejsu powinny być konsekwentnie kolorowane zgodnie ze schematem kolorów. Na przykład: przyciski zapewniające wprowadzanie interfejsu użytkownika można traktować inaczej niż przyciski zmieniające strony lub uruchamiające podstawową funkcjonalność, ale ogólnie dla każdego z tych typów przycisków powinien być używany 1 kolor, w przeciwieństwie do 1 koloru dla wszystkich przycisków w danym obszarze funkcjonalnym. Pomaga to użytkownikowi w lepszym wyobrażeniu o tym, co zrobi każdy element interfejsu użytkownika.

5. Preferuj stosowanie odstępów między obszarami akcji, aby je rozdzielić, oraz płaskich, miękkich ramek między elementami akcji. Elementy akcji w obszarze powinny mieć regularny rozmiar (wyobraź sobie, że każdy element akcji to 1 lub więcej sąsiadujących komórek w siatce).

6. Podczas korzystania z obszaru tytułu w oknie:

   za. Wszystkie elementy akcji w tym obszarze powinny mieścić się w obszarze tytułu.

   b. Wszystkie elementy akcji w tym obszarze powinny być globalne dla aplikacji (tj. Login, ustawienia itp.).

   do. Tytuł nie powinien nakładać się na nic innego niż logo.

Mam nadzieję, że to pomoże.

Prawie wszystkie elementy wydają się być przyciskami. Ale kiedy czytam etykiety, wydaje się, że niektóre przyciski są przyciskami akcji, a inne służą do nawigacji.

W nowoczesnym interfejsie użytkownika można je rozróżnić. Wiersz zakładek służy jako skuteczna pomoc w nawigacji, zarówno w celu pokazania, gdzie jesteś, jak i znalezienia się gdzie indziej. Przygotuj zakładkę Pizza dla wszystkich opcji pizzy i zakładkę Makaron dla wszystkich makaronów.

Być może fioletowy przycisk ŻYWNOŚCI już działa jako taka karta, a NAPOJE to kolejna taka karta. Na pewno nie powinny być po prawej - angielski jest czytany od góry do dołu, od lewej do prawej, a Twój przepływ pracy powinien to skopiować.

Szereg zakładek działa dość dobrze, ale tutaj możesz mieć głębszą hierarchię. W takim przypadku rozsądne może być pokazanie bieżącego stanu interfejsu jako ścieżki: Food > Starters >jeden wiersz u góry strony startowej. Pierwszy wpis w menu „Rozruszniki” to przycisk „<Powrót do jedzenia”; pozwala to ukryć sporo kontroli.

Najpierw zapytam, jaki jest cel?

Czy wymaga to od operatora szybkiego znalezienia klucza i sprawienia, by zamówienie było szybsze bez błędnego wprowadzenia? czy musi przyciągać i zachęcać użytkowników do korzystania z GUI na komputerze?

W takim przypadku cel elementu wyraźnie wskazuje, że służy on do wydajnego i szybkiego wprowadzania transakcji. Dlatego możemy przejść w bardziej uporządkowany sposób, aby forma, kolor i hierarchia narzucały logiczny porządek w stosunku do trendów projektowych i wymyślności.

Problem z obecnym GUI to:

Kolor : zbyt ostre kolory, które z czasem spowodują stres i wpłyną na skuteczność decyzji użytkowników. Białe tło z innymi kolorami o wysokim kontraście zdecydowanie powoduje zmęczenie oczu i trudno jest szybko znaleźć niezbędne informacje, które użytkownik musi zebrać.

Czcionka : zbyt mała do znalezienia i podjęcia decyzji, wpływa na nią również ostry kolor i kontrast między tekstem. Może to bardzo wpłynąć na to, że użytkownicy po raz pierwszy przyzwyczają się do systemu, dłużej i będą powodować więcej błędnych wpisów.

Porządkowanie i grupowanie : czy musimy mieć tam nazwę „System POS” dużymi czcionkami? Czy to jest korzystne? NIE! Użytkownicy tego systemu i elementów na ekranie wyraźnie to mówią. Czy grupowanie ma sens? Nie bardzo, dużo można zgrupować, więc użytkownicy mogą je znaleźć logicznie. Czy wybór słowa ma sens? NIE! "WYSŁAĆ"? wysłać co? „Ustaw menu”? czy codziennie ustawiasz menu? NIE! naprzód. Należy dokładnie przeanalizować hierarchię i wybór słów.

Niektóre osoby zamieszczają GUI ze zdjęciami i fantazyjnymi rzeczami, ponieważ z samego urządzenia wyraźnie wynika, że ​​nie musi to być fantazyjne, ale musi być bardzo funkcjonalne i przemyślane.

Ponieważ nie przypomina w żaden sposób sposobu, w jaki „kafelki” są zaprojektowane na urządzenia mobilne, Android lub Windows OS, jest również zupełnie nieprzyzwoity - co powoduje konflikt, ponieważ tak wiele dowodzi tego, co jest modne. Prawie wszystko w tym jest „złe”, więc pominę szczegóły.

Wszystkie te odpowiedzi są świetne, ale jeśli potrzebujesz trochę materiału referencyjnego, który jest świetnym przykładem tego, jak wygląda dobry, nowoczesny system POS, sprawdź aplikację Square na iPada.

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

Myślę, że największą rzeczą, którą możesz zrobić, aby poprawić istniejącą (i dlaczego wygląda tak przestarzale), jest to, że nowoczesny interfejs użytkownika lubi dużo białej przestrzeni - a także sprawia, że ​​biała przestrzeń jest biała. Wiele projektów wykorzystuje obecnie bardzo oszczędnie typ odwrotny (biały tekst na czarnym tle lub biały tekst na dowolnym ciemnym kolorze). Podobnie jak ta strona: https://developer.wordpress.com/calypso/

Przyciski powinny być uporządkowane według funkcji, hierarchiczne, a przyciski powinny być zgodne z metodologią układu.

W kategoriach laika:

1) Umieść najczęściej używane przyciski w miejscu, w którym wszyscy mogą je łatwo znaleźć;

2) Przyciski wewnętrzne powinny być „sterowane” zewnętrzną powłoką (okno w oknie, w oknie);

3) Jeśli masz przycisk Enter (lub jakikolwiek inny przycisk w tym zakresie, trzymaj go w tym samym miejscu, nawet jeśli ekrany mogą się zmieniać).

Wiele systemów POS próbowało zoptymalizować funkcjonalny projekt, ale jeden POS, który moim zdaniem jest nieco przed grą, to Rezku POS .