Що робить цей дизайн POS виглядом?

Я намагаюся зрозуміти, що робить цей дизайн екрана з продажу (POS) датним.

Це 3D кнопки, кольори, макет, шрифт? А що б ви зробили, щоб це виглядало актуально?

Не будучи професіоналом проектування, я можу побачити, що він датується. Але я не впевнений, чому і як це змінити.

Інші відповіді зосереджуються на тому, як поліпшити дизайн, але оскільки ви запитали, чому дизайн виглядає датованим:

Шрифт занадто малий . Саме ліворуч виглядає менш застарілим, ніж решта, чому це? Зліва розмір шрифту відповідає вертикальному простору, доступному для тексту, тоді як у всіх інших кнопок шрифт набагато замалий. Давайте також кинемо у верхній регістр Arial і 3 фіксованих рядки тексту на кожній кнопці (кожна кнопка, окрім оплати, здається, відформатована для отримання тексту у вертикальній верхній, центральній та нижній частині, що призводить до незграбності, якщо є лише 2 рядки фактичного тексту).

Непривабливі кольори . Екран виглядає так, що він використовує 9 майже випадкових кольорів, всі вони є частиною оригінальних 64 кольорів EGA. Багато сучасних графічних інтерфейсів використовують більш тонкі кольорові відмінності, якщо між кнопками немає великої різниці. Деякі сучасні графічні інтерфейси також використовують градієнти кольорів у кнопках.

Немає зображень.

2 кольоровий 3D ефект. 3D-кнопки, які використовують 2-піксельну широку рамку з рівномірним білим у верхньому лівому куті та рівномірним сірим у нижній правій частині, плюс один піксель, усі чорні рамки навколо них дійсно не в моді.

Занадто просто. Використовуючи лише кнопки, є пропущена можливість інтуїтивно вказати, що ми зараз переглядаємо розділ «Їжа». Сучасний Гі використовує інші підказки, щоб вказати, що пурпурові та жовті частини належать разом, наприклад, заповнений прямокутник за жовтими кнопками, який поширюється на задній план за харчовою кнопкою:

Нарешті, заголовок POS-системи мене турбує, але я думаю, що це просто поганий дизайн, і він не має нічого спільного з датуванням.

Перш ніж щось змінити, переконайтеся, що поточний дисплей підтримує більше ніж EGA (16 кольорової палітри, обраної із 64 кольорової таблиці), а якщо ви хочете використовувати зображення, переконайтеся, що роздільна здатність дисплея дозволяє користувачеві розпізнавати, що показано на образи. Іноді пристрої, що використовуються в польових умовах, є дещо старшими, ніж можна було б уявити. Також при зміні кольорів пам’ятайте про дальтонізм.

Враховуючи, що це POS-система, я б сказав, що функціонал є. Кнопки великі, їх досить легко читати, і вони організовані в групи, що полегшило б мені знайти те, що я шукаю.

Сказавши це, я бачу хороші структурні рішення, але не багато дизайнерських рішень. Це те, що я хотів би розглянути:

• Шрифти : у вашому додатку використовується велика літера Arial, але не кожен елемент однаковий. Існує ієрархія, і ви можете використовувати стилі шрифту або сім'ї, щоб представити це. Наприклад, нижні рядки можуть використовувати змішаний регістр, оскільки вони насправді не є частиною основних варіантів. Ви вирішили збільшити "Платити", що чудово, але це єдина кнопка з іншим розміром шрифту. Навіщо змінювати шрифт, а не наприклад колір? Я не кажу, що слід, я маю на увазі, що думка таким чином може змусити вас відкрити нові способи розділення елементів. Наприклад: Ви розглядали можливість використання роздільників?

• Пробіл : Ви не використовуєте однаковий пробіл (поля) для багатьох елементів. Загляньте в сіткові системи , ви б мали великої користі від використання такої. Врівноважений макет зробить дизайн більш впорядкованим та відточеним. У вас також є деякі дивні проблеми з інтервалом (IMO) з текстом всередині кнопок. Кнопка з 1 рядком по центру, 2 рядки мають величезний простір між рядками, а 3 рядки виглядають нормально, оскільки скрізь однаковий пробіл. Хіба не було б більше сенсу завжди мати однаковий простір між текстовими рядками, а не намагатися витягнути текст якомога ближче до меж?

• Колір : Групування працює для того, щоб зрозуміти, що різні кнопки роблять різні речі, але я не бачу причини в палітрі. Спробуйте подумати в напрямку: Чи можу я використовувати колір для подальшого просування свого повідомлення? Чи можна використовувати колір, щоб полегшити завдання пошуку кнопок? Ви вже робите це, надаючи "Надіслати" інший тон. Це чудове рішення. Але тоді я бачу, що ваш вибраний колір відрізняється залежно від того, чи знаходиться він у правій колонці чи в центральній. чому ?. Тоді подумайте, де ще ви могли використовувати колір подібним чином? Погляньте на Матеріал Google , вони можуть надихнути вас спробувати нові комбо.

• Тіні та ефекти : 3D-ефект дуже корисний у цьому контексті, і я думаю, ви могли б ще більше підштовхнути його. Ось приклад 3D POS. Також ви розглядали питання використання іконок? Вони можуть зробити гарну візуальну допомогу.

Я думаю, що додаток виглядає датованим, оскільки він насправді не слідує жодній тенденції, крім кольорових блоків з деякими тінями, що було нормою, коли програмне забезпечення для дизайну та мови кодування не давали великої творчості в цьому відношенні. Тепер ви можете зробити майже все, що завгодно. Ваш дизайн виглядає датованим, оскільки він не використовує ті дизайнерські хитрощі та варіанти, які стали популярними в останні роки.

Я рекомендую вам поглянути на інші подібні додатки, перевірити, що вони роблять правильно чи неправильно, побачите, як ваші можуть виховувати деякі з цих ідей. У вас вже чудовий скелет, йому просто потрібно трохи плоті. Сітка та, можливо, гра з деякими додатковими кольорами допоможуть вам зробити найкращі речі.

На перший погляд, я не можу швидко сказати, що є що (і я маю досвід роботи з ресторанними POS системами). Для мене елементи, сірі в правій частині інтерфейсу, схоже, не належать разом. Жовті елементи в центрі екрану, здається, насправді є 3 розділами, але це не зрозуміло?

З наведених нижче прикладів (і я нічого не кажу про їх якість, вони є випадковим вибором із швидкого пошуку) Ви можете побачити використання значків, зображень та великих кольорових блоків. Це корисні інструменти для ідентифікації дій та розмежування окремих областей функцій або ієрархії інформації.

У мене не було часу на більш детальну відповідь, але те, що я скажу, - перегляньте приклади поточного дизайну інтерфейсу користувача (інтерфейс користувача). Наприклад, швидкий пошук "POS UI Design" надасть вам такі зображення, як:

Дизайн убік, чи він функціональний, і чи розуміють люди, які його оперують, як ним користуватися? Є елемент не виправити те, що не порушено, якщо це так.

Так, це виглядає датовано, але багато хто до тих систем, які я використав, винні в тому ж простому вигляді. Закруглені кнопки та кольори, вибрані з врахуванням доступності, могли б підняти її, але я відчуваю, що це суто функціональний шматок, а спробувати і «зажарити його» може створити заплутаність у працівників.

3D ефект насправді корисний у цьому випадку, оскільки він швидко повідомляє користувачеві, що це кнопка, яку можна натискати, і, я думаю, час торгівлі рестораном має велике значення.

Я також не професіонал з дизайну, але оскільки мені доводиться враховувати подібні речі під час створення мобільних додатків ....

1. Викиньте 3d-ефект із старої школи win32. Це буквально поза дотиком в епоху, коли всі очікують, що речі будуть виглядати зручно з сенсорним екраном. Що ви хочете використовувати, - це великі плоскі регіони для кожної області дій (кнопки), де немає проміжків між спорідненими групами кнопок або тіней під кнопками. Погляньте на Матеріал дизайну Android . Це корисно навіть для немобільних додатків.

2. Використовуйте рамки (не кольори) для групування пов’язаних елементів, якщо ці елементи мають проміжки між ними. Якщо між ними немає інтервалу, дотримуйтесь кольорів так, щоб вся пов'язана область виглядала так, що вона має один суцільний колір фону.

3. Виберіть більш м'які кольори (думайте, пастельні кольори) та частину безкоштовної кольорової гами. Будьте впевнені, що у вашій палітрі є світлі та темні версії кожного кольору. Сподіваюся, ви досі не маєте справу з системою, яка може відображатись лише зі старої палітри кольорів CGA / VGA 16.

4. Елементи користувальницького інтерфейсу повинні бути послідовно забарвлені відповідно до колірної схеми. Наприклад: кнопки, що забезпечують введення інтерфейсу користувача, можна вважати відмінними від кнопок, які змінюють сторінки або запускають основну функціональність, але, як правило, для кожного з цих типів кнопок повинен використовуватися 1 колір, а не 1 колір для всіх кнопок у певній функціональній області. Це допомагає користувачеві краще зрозуміти, що буде робити кожен елемент інтерфейсу.

5. Переважно використовувати відстань між зонами дії для їх розділення та плоскі, м'які межі між предметами дії. Елементи дії в зоні повинні мати регулярний розмір (уявіть, що кожен елемент дії має 1 або більше сусідніх комірок у сітці).

6. При використанні області заголовка у вікні:

   а. Усі пункти дій у цій області повинні входити в область заголовка.

   б. Усі елементи дії в цій області повинні бути глобальними для програми (тобто логін, налаштування тощо).

   c. Заголовок не повинен перекриватися іншим, крім логотипу.

Я сподіваюся, що це допомагає.

Майже всі елементи здаються кнопками. Але коли я читаю етикетки, здається, що деякі кнопки - це кнопки дій, а інші - для навігації.

У сучасному інтерфейсі ви виділили б два. Рядок вкладок служить ефективним засобом навігації, як показувати, де ви зараз перебуваєте, так і як дістатися десь ще. Майте вкладку Піца для всіх варіантів піци та вкладку Паста для всіх макаронних виробів.

Можливо, фіолетова кнопка FOOD вже виконує функцію такої вкладки, а DRINKS - ще одну таку вкладку. Вони точно не повинні бути праворуч - англійська мова читається зверху вниз, зліва направо, і ваш робочий процес повинен копіювати це.

Рядок вкладок працює досить добре, але тут ви можете мати більш глибоку ієрархію. У такому випадку може бути розумним відображення поточного стану інтерфейсу користувача як шлях:, Food > Starters >один рядок у верхній частині сторінки початківців. Зробіть перший запис меню «Запуски» кнопкою «<Назад до їжі»; це дозволяє приховати досить багато елементів управління.

По-перше, я б запитав, яка мета?

Чи вимагає від оператора швидкого пошуку ключа та швидшого замовлення без будь-яких помилок? чи це має залучати та заохочувати користувачів використовувати графічний інтерфейс для машини?

У цьому випадку мета твору чітко вказує, що він призначений для ефективного та швидкого введення транзакцій. Тому ми можемо піти більш простим, організованим способом, щоб форма, колір та ієрархія потребували диктування логічного порядку над тенденцією дизайну та вишуканістю.

Проблема з поточним графічним інтерфейсом:

Колір : Занадто різкі кольори, які створюватимуть стрес із часом та впливатимуть на ефективність рішення користувачів. Білий фон з іншими контрастними кольорами, безумовно, створює напругу очей і важко швидко знайти необхідну інформацію, яку потрібно зібрати користувачеві.

Шрифт : Занадто малий для пошуку та прийняття рішення, на це також впливає різкий колір та контраст між текстом. Це може сильно вплинути на користувачі, що вперше звикають до системи, довше і створювати більше помилок.

Порядок та групування : чи потрібно мати назву "POS System" там великим шрифтом? Це корисно? НОПА! Користувачі цієї системи та елементи на екрані чітко про це говорять. Чи має групування сенс? Насправді, багато можна згрупувати, тож користувачі можуть знайти його логічно. Чи має сенс вибір слова? НОПА! "Надіслати"? надіслати що? "Встановити меню"? ви встановлюєте меню щодня? НОПА! вперед. Ієрархію та вибір слова потрібно ретельно переглядати.

Деякі люди розміщують на графічному інтерфейсі зображення та образотворчі речі, оскільки, з цільового призначення самого обладнання, воно чітко говорить про те, що воно не повинно бути фантазійним, але повинно бути високофункціональним та продуманим.

Оскільки це не схоже на те, як "плитки" розроблені для мобільних пристроїв, Android або ОС Windows, особливо це приходить в голову, це також є абсолютно непридатним - що спричиняє конфлікт, оскільки вони так сильно командують тим, що візуально в моді. Насправді все про це "неправильно", тому я пропускаю конкретику.

Все це чудові відповіді, але якщо ви хочете трохи довідкового матеріалу, яскравого прикладу того, як виглядає хороша, сучасна система POS, перегляньте додаток Square на iPad.

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

Найбільше, що я думаю, ви могли зробити для покращення існуючого (і чому він виглядає так датовано), це те, що сучасний інтерфейс, як правило, любить багато білого простору - а також зробити білий простір білим. Багато дизайнів в цей час дуже рідко використовують зворотний тип (білий текст на чорному тлі або білий текст будь-якого темного кольору). Подобається цей сайт: https://developer.wordpress.com/calypso/

Кнопки мають бути організовані за функціями, ієрархічні та кнопки повинні відповідати методиці компонування.

Простіше кажучи:

1) розміщувати найбільш використовувані кнопки в місці, де всі можуть їх легко знайти;

2) Внутрішні кнопки повинні «контролюватися» зовнішньою оболонкою (вікно всередині вікна, всередині вікна);

3) Якщо у вас є кнопка введення (або будь-яка інша кнопка для цього, тримайте її там же, навіть якщо екрани можуть змінюватися.

Багато POS-системи намагалися оптимізувати функціональний дизайн, але один POS, який я думаю, трохи попереду гри - Rezku POS .