Apa yang membuat desain POS ini terlihat kuno?

Saya mencoba memahami apa yang membuat desain layar Point-of-Sale (POS) ini terlihat kuno.

Apakah itu tombol 3D, warna, tata letak, font? Dan apa yang akan Anda lakukan agar terlihat terkini?

Tidak menjadi seorang profesional desain, saya dapat melihat bahwa itu adalah tanggal. Tapi saya tidak yakin mengapa dan bagaimana mengubahnya.

Jawaban lain fokus pada bagaimana meningkatkan desain, tetapi karena Anda bertanya mengapa desain terlihat kuno:

Fon terlalu kecil . Yang paling kiri terlihat kurang tanggal daripada yang lain, mengapa begitu? Di sebelah kiri, ukuran font cocok dengan ruang vertikal yang tersedia untuk teks, sementara di semua tombol lainnya fontnya terlalu kecil. Mari kita juga melempar semua huruf besar, Arial, dan 3 baris teks tetap pada setiap tombol (setiap tombol selain Pay tampaknya diformat untuk menerima teks pada bagian atas, tengah dan bawah vertikal, yang mengarah ke kecanggungan jika hanya ada 2 baris teks aktual).

Warna tidak menarik . Layar sepertinya menggunakan 9 warna yang hampir acak, yang semuanya merupakan bagian dari 64 warna EGA asli. Banyak GUI modern menggunakan perbedaan warna yang lebih halus, kecuali ada perbedaan besar di antara tombol-tombolnya. Beberapa GUI modern juga menggunakan gradien warna pada tombol.

Tidak ada gambar.

2 efek warna 3D. Tombol 3D yang menggunakan batas lebar 2 piksel dengan seragam putih di kiri atas dan seragam abu-abu di kanan bawah, ditambah satu piksel semua perbatasan hitam di sekitarnya memang ketinggalan zaman.

Terlalu sederhana. Dengan hanya menggunakan tombol, ada peluang yang terlewatkan untuk secara intuitif menunjukkan bahwa kita sedang melihat bagian Makanan. Gui modern akan menggunakan petunjuk lain untuk menunjukkan bagian Magenta dan kuning milik bersama, seperti persegi panjang yang diisi di belakang tombol kuning yang meluas ke latar belakang di belakang tombol makanan:

Akhirnya, tajuk Sistem POS mengganggu saya, tapi saya pikir itu hanya desain yang buruk, dan tidak ada hubungannya dengan tanggalnya.

Sebelum mengubah apa pun, pastikan tampilan saat ini mendukung lebih dari EGA (16 palet warna, dipilih dari tabel 64 warna), dan jika Anda ingin menggunakan gambar, pastikan resolusi layar memungkinkan pengguna untuk mengenali apa yang ditampilkan di layar. gambar. Terkadang perangkat yang digunakan di lapangan sedikit lebih tua dari yang dibayangkan. Juga, ketika mengganti warna perlu diingat buta warna.

Mengingat ini adalah sistem POS, saya akan mengatakan fungsionalitasnya ada. Tombol-tombolnya besar, relatif mudah dibaca, dan disusun dalam kelompok, yang akan memudahkan saya menemukan apa yang saya cari.

Karena itu, saya melihat keputusan penataan yang baik, tetapi tidak banyak keputusan desain. Inilah yang akan saya perhatikan:

• Fon : Segala sesuatu di aplikasi Anda menggunakan huruf besar Arial, tetapi tidak setiap elemen sama. Ada hierarki, dan Anda bisa menggunakan gaya font atau keluarga untuk mewakili itu. Sebagai contoh, baris bawah dapat menggunakan case campuran, karena mereka bukan bagian dari opsi utama. Anda memilih untuk membuat "Bayar" lebih besar, yang hebat, tetapi itu satu-satunya tombol dengan ukuran font yang berbeda. Mengapa mengubah font, dan bukan misalnya warnanya? Tidak mengatakan Anda harus, maksud saya berpikir dengan cara ini dapat membuat Anda menemukan cara baru untuk memisahkan elemen. Misalnya: Sudahkah Anda mempertimbangkan untuk menggunakan pembagi?

• Spasi : Anda tidak menggunakan spasi (margin) yang sama untuk banyak elemen. Lihat ke dalam sistem grid , Anda akan mendapat manfaat besar dari menggunakannya. Tata letak yang seimbang akan membuat desain terlihat lebih teratur dan halus. Anda juga memiliki beberapa masalah spasi aneh (IMO) dengan teks di dalam tombol. Tombol dengan 1 garis terpusat, 2 garis memiliki ruang besar di antara baris, dan 3 garis tampak ok, karena ada jarak yang sama di mana-mana. Bukankah lebih masuk akal untuk selalu memiliki ruang yang sama di antara baris teks, alih-alih mencoba menarik teks sedekat mungkin ke batas?

• Warna : Pengelompokan berfungsi untuk memperjelas tombol yang berbeda melakukan hal yang berbeda, tetapi saya tidak melihat alasan di balik palet. Cobalah untuk berpikir ke arah: Dapatkah saya menggunakan warna untuk lebih mendorong pesan saya? Bisakah saya menggunakan warna untuk memudahkan tugas menemukan tombol? Anda sudah melakukannya dengan memberi "Kirim" nada yang berbeda. Ini keputusan yang bagus. Tapi kemudian saya melihat warna yang Anda pilih berbeda tergantung apakah itu di kolom kanan atau di tengah. Mengapa?. Lalu, pikirkan, di mana lagi Anda bisa menggunakan warna dengan cara yang sama? Lihatlah Google Material , mereka mungkin menginspirasi Anda untuk mencoba kombo baru.

• Bayangan dan efek : Efek 3D sangat berguna dalam konteks ini, dan saya pikir Anda bisa mendorongnya lebih jauh. Ini adalah contoh POS 3D . Juga, sudahkah Anda mempertimbangkan untuk menggunakan ikon? Mereka dapat membuat alat bantu visual yang bagus.

Saya pikir aplikasi ini terlihat kuno karena tidak benar-benar mengikuti tren apa pun, terlepas dari blok warna dengan beberapa bayangan, yang merupakan norma ketika perangkat lunak desain dan bahasa pengkodean tidak memungkinkan banyak kreativitas dalam hal itu. Sekarang, Anda dapat melakukan hampir semua hal. Desain Anda terlihat kuno karena tidak memanfaatkan trik dan pilihan desain yang populer di tahun-tahun terakhir.

Saya sarankan Anda melihat aplikasi serupa lainnya, memeriksa apa yang mereka lakukan benar atau salah, lihat bagaimana Anda dapat memupuk dari beberapa ide tersebut. Anda sudah memiliki kerangka yang hebat, itu hanya membutuhkan sedikit daging. Kotak dan mungkin bermain dengan beberapa warna komplementer akan melakukan hal-hal hebat untuk aplikasi Anda.

Pada pandangan pertama, saya tidak dapat dengan cepat mengetahui apa itu apa (dan saya memiliki pengalaman dengan sistem POS restoran). Bagi saya, item berwarna abu-abu di sebelah kanan UI tampaknya bukan milik bersama. Item kuning di tengah layar tampaknya benar-benar 3 bagian, tetapi ini tidak jelas?

Dari contoh yang saya perlihatkan di bawah ini (dan saya tidak mengatakan apa pun tentang kualitasnya, itu adalah pilihan acak dari pencarian cepat) Anda dapat melihat penggunaan Ikon, Gambar, dan blok warna besar. Ini adalah alat yang berguna untuk mengidentifikasi tindakan dan membedakan bidang fungsi yang terpisah atau hierarki informasi.

Saya tidak punya waktu untuk jawaban yang lebih terperinci, tetapi yang akan saya katakan adalah lihat contoh-contoh desain UI (Antarmuka Pengguna) saat ini. Misalnya pencarian cepat untuk 'Desain POS UI' akan memberi Anda gambar seperti:

Selain desain, apakah ini fungsional, dan apakah orang yang mengoperasikannya memahami cara menggunakannya? Ada elemen jangan memperbaiki apa yang tidak rusak jika itu yang terjadi.

Ya, ini terlihat kuno, tetapi banyak sistem yang saya gunakan bersalah atas tampilan sederhana yang sama. Tombol bulat dan warna yang dipilih dengan aksesibilitas dalam pikiran dapat merapikannya, tetapi firasat saya adalah bahwa ini adalah karya yang murni fungsional dan untuk mencoba dan "menyesuaikannya" dapat menambah kebingungan bagi karyawan.

Efek 3D sebenarnya berguna dalam kasus ini karena dengan cepat memberitahu pengguna bahwa ini adalah tombol yang dapat diklik, dan saya membayangkan di waktu perdagangan restoran sangat penting.

Saya juga bukan seorang profesional desain, tetapi karena saya harus mempertimbangkan hal semacam ini ketika membangun aplikasi seluler ....

1. Parit efek win32 sekolah tua. Ini benar-benar out-of-touch di era di mana semua orang mengharapkan hal-hal terlihat ramah layar sentuh. Apa yang ingin Anda gunakan adalah daerah datar besar untuk setiap area tindakan (tombol) tanpa jarak antara kelompok tombol yang terkait atau bayangan di bawah tombol. Lihatlah ke Desain Bahan Android . Ini berguna bahkan untuk aplikasi non-seluler.

2. Gunakan batas (bukan warna) untuk mengelompokkan item terkait jika item tersebut memiliki spasi di antara mereka. Jika tidak ada jarak di antara keduanya, maka tetap menggunakan warna sehingga seluruh area terkait tampak memiliki satu warna latar belakang yang solid.

3. Pilih warna yang lebih lembut (pikirkan warna pastel) dan bagian dari skema warna gratis. Pastikan untuk memiliki versi terang dan gelap dari setiap warna di palet Anda. Saya harap Anda tidak berurusan dengan sistem yang hanya dapat ditampilkan dari palet warna CGA / VGA 16 lama.

4. Elemen UI harus secara konsisten diwarnai sesuai dengan skema warna. Misalnya: tombol yang menyediakan input UI dapat dianggap berbeda dari tombol yang mengubah halaman atau memicu fungsionalitas utama, tetapi umumnya harus ada 1 warna yang digunakan untuk masing-masing jenis tombol ini dibandingkan dengan 1 warna untuk semua tombol di area fungsional yang diberikan. Ini membantu pengguna mendapatkan ide yang lebih baik tentang apa yang akan dilakukan setiap elemen UI.

5. Lebih suka menggunakan jarak antara area aksi untuk memisahkannya dan mendatar, batas lembut di antara item aksi. Item tindakan di suatu area harus memiliki ukuran reguler (bayangkan setiap item tindakan menjadi 1 atau lebih sel yang berdekatan dalam kotak).

6. Saat menggunakan area judul di jendela:

   Sebuah. Semua item tindakan di area itu harus sesuai dengan area judul.

   b. Semua item tindakan di area itu harus bersifat global ke aplikasi (mis. Login, pengaturan, dll.).

   c. Judul tidak boleh tumpang tindih dengan apa pun selain logo.

Saya harap ini membantu.

Hampir semua elemen tampaknya menjadi tombol. Tetapi ketika saya membaca label, sepertinya beberapa tombol adalah tombol aksi, sementara yang lain untuk navigasi.

Di UI modern, Anda akan membedakan keduanya. Sederet tab berfungsi sebagai alat bantu navigasi yang efektif, baik untuk menunjukkan di mana Anda berada saat ini dan bagaimana menuju ke tempat lain. Memiliki tab Pizza untuk semua pilihan pizza, dan tab Pasta untuk semua pasta.

Mungkin tombol FOOD ungu sudah bertindak sebagai tab seperti itu, dan MINUMAN adalah tab lain seperti itu. Mereka seharusnya tidak berada di kanan - Bahasa Inggris dibaca dari atas ke bawah, kiri ke kanan, dan alur kerja Anda harus menyalin ini.

Sederetan tab berfungsi cukup baik, tetapi di sini Anda mungkin memiliki hierarki yang lebih dalam. Dalam hal ini, mungkin bijaksana untuk menunjukkan keadaan UI saat ini sebagai jalur:, Food > Starters >satu baris di bagian atas halaman permulaan. Buat entri pertama dari menu "Pemula" menjadi tombol "<Kembali ke Makanan"; ini memungkinkan Anda untuk menyembunyikan beberapa kontrol.

Pertama, saya akan bertanya apa tujuannya?

Apakah itu mengharuskan operator untuk cepat menemukan kunci dan membuat pesanan lebih cepat tanpa salah masuk? atau apakah itu harus menarik dan mendorong pengguna untuk menggunakan GUI untuk mesin?

Dalam hal ini, tujuan karya tersebut dengan jelas menunjukkan bahwa ini adalah untuk entri transaksi yang efisien dan cepat. Oleh karena itu, kita bisa lebih sederhana dengan cara yang lebih terorganisir sehingga bentuk, warna dan hierarki perlu menentukan urutan logis dari tren desain dan fantasi.

Masalah dengan GUI saat ini, adalah:

Warna : Warna yang terlalu keras, yang akan membuat stres dari waktu ke waktu dan akan memengaruhi keefektifan keputusan pengguna. Latar belakang putih dengan warna kontras tinggi lainnya, pasti menciptakan ketegangan mata, dan sulit untuk dengan cepat menemukan informasi yang diperlukan yang perlu dikumpulkan pengguna.

Jenis huruf : Terlalu kecil untuk menemukan dan mengambil keputusan, ini juga dipengaruhi oleh warna dan kontras yang tajam antara teks. Ini bisa sangat memengaruhi pengguna pertama kali untuk terbiasa dengan sistem, lebih lama dan menghasilkan lebih banyak salah masuk.

Memesan dan mengelompokkan : Apakah kita harus memiliki nama "Sistem POS" di sana dalam ukuran font yang besar? Apakah ini bermanfaat? NGGAK! Pengguna sistem ini dan elemen-elemen di layar dengan jelas mengatakannya. Apakah pengelompokan itu masuk akal? Tidak juga, banyak yang dapat dikelompokkan, sehingga pengguna dapat menemukannya secara logis. Apakah beberapa kata pilihan, masuk akal? NGGAK! "KIRIM"? Kirim apa? "Set Menu"? Anda mengatur menu setiap hari? NGGAK! sebagainya Hierarki dan pemilihan kata perlu diperhatikan dengan seksama.

Beberapa orang memposting dengan GUI dengan gambar dan barang-barang mewah, karena dari tujuan peralatan itu sendiri, itu jelas mengatakan itu tidak harus mewah, tetapi harus sangat fungsional dan bijaksana.

Karena kelihatannya tidak seperti cara "petak" dirancang untuk perangkat Mobile, Android, atau OS Windows secara spesifik terlintas dalam pikiran, itu juga sama sekali tidak suka - yang menyebabkan konflik karena mereka memerintahkan begitu banyak dari apa yang secara visual sedang digemari. Hampir semuanya tentang itu "salah" jadi saya akan melewatkan spesifik.

Semua ini adalah jawaban yang bagus, tetapi jika Anda menginginkan beberapa bahan referensi, contoh yang cemerlang tentang seperti apa sistem POS modern yang bagus, periksa aplikasi Square di iPad.

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

Hal terbesar yang saya pikir dapat Anda lakukan untuk meningkatkan yang sudah ada (dan mengapa terlihat sangat ketinggalan zaman) adalah bahwa UI modern cenderung menyukai banyak ruang putih - dan juga membuat ruang putih menjadi putih. Banyak desain hari ini menggunakan tipe terbalik (teks putih pada latar belakang hitam atau teks putih pada warna gelap) sangat hemat. Suka situs ini: https://developer.wordpress.com/calypso/

Tombol harus diatur berdasarkan fungsi, hierarkis dan tombol harus konsisten dengan metodologi tata letak.

Dalam istilah awam:

1) Tempatkan tombol yang paling sering digunakan di tempat di mana semua dapat dengan mudah menemukannya;

2) Tombol dalam harus "dikontrol" oleh kulit luar (jendela di dalam jendela, di dalam jendela);

3) Jika Anda memiliki tombol enter (atau tombol lainnya dalam hal ini, simpan di tempat yang sama meskipun layar dapat berubah.

Banyak sistem POS telah mencoba untuk mengoptimalkan desain fungsional tetapi satu POS saya pikir sedikit lebih maju dari permainan adalah Rezku POS .