Что делает этот дизайн POS устаревшим?

Другие ответы сосредоточены на том, как улучшить дизайн, но, поскольку вы спросили, почему дизайн выглядит устаревшим:

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

Непривлекательные цвета . Экран выглядит так, как будто он использует 9 почти случайных цветов, каждый из которых является частью исходных 64 цветов EGA. Многие современные графические интерфейсы используют более тонкие цветовые различия, если только между кнопками нет большой разницы. Некоторые современные графические интерфейсы также используют цветовые градиенты на кнопках.

Нет изображений.

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

Слишком просто. Используя только кнопки, мы упускаем возможность интуитивно указать, что мы в данный момент просматриваем раздел «Еда». Современный графический интерфейс будет использовать другие подсказки, чтобы указать, что пурпурные и желтые части связаны друг с другом, например, заполненный прямоугольник за желтыми кнопками, который простирается до фона за кнопкой еды:

Наконец, заголовок POS System меня беспокоит, но я думаю, что это просто плохой дизайн, и он не имеет ничего общего с тем, что он устарел.

Прежде чем что-либо менять, убедитесь, что текущий дисплей поддерживает больше, чем EGA (палитра из 16 цветов, выбранная из таблицы 64 цветов), и если вы хотите использовать изображения, убедитесь, что разрешение дисплея позволяет пользователю распознавать то, что показано на экране. картинки. Иногда устройства, используемые в полевых условиях, немного старше, чем можно было бы себе представить. Также при смене цветов имейте в виду дальтонизм.

Учитывая, что это POS-система, я бы сказал, что функциональность есть. Кнопки большие, относительно легко читаемые, и они организованы в группы, что облегчит мне поиск того, что я ищу.

Сказав это, я вижу хорошие структурные решения, но не так много дизайнерских решений. Вот что я бы рассмотрел:

• Шрифты : все в вашем приложении использует прописные буквы Arial, но не все элементы одинаковы. Существует иерархия, и вы можете использовать стили или семейства шрифтов для ее представления. Например, в нижних строках можно использовать смешанный регистр, потому что они не являются частью основных опций. Вы решили сделать «Оплатить» больше, и это здорово, но это единственная кнопка с другим размером шрифта. Зачем менять шрифт, а не например цвет? Не говорю, что вы должны, я имею в виду, что такое мышление может заставить вас открыть новые способы разделения элементов. Например: Рассматривали ли вы возможность использования разделителей?

• Интервал : вы не используете одинаковые интервалы (поля) для многих элементов. Посмотрите на грид-системы , вы бы очень выиграли от их использования. Сбалансированная компоновка сделает дизайн более упорядоченным и отточенным. У вас также есть некоторые странные проблемы с интервалами (IMO) с текстом внутри кнопок. Кнопка с 1 строкой находится по центру, 2 строки имеют огромное пространство между строками, а 3 строки выглядят нормально, потому что везде одинаковое расстояние. Не лучше ли было бы всегда иметь одинаковое расстояние между строками текста вместо того, чтобы пытаться подтягивать текст как можно ближе к границам?

• Цвет : группировка работает, чтобы было понятно, что разные кнопки выполняют разные функции, но я не вижу причин для палитры. Попробуйте подумать в направлении: Могу ли я использовать цвет для дальнейшего продвижения своего сообщения? Можно ли использовать цвет для облегчения задачи поиска кнопок? Вы уже делаете это, придавая «Отправить» другой тон. Это отличное решение. Но затем я вижу, что выбранный вами цвет отличается в зависимости от того, находится ли он в правом столбце или в центре. Почему?. Затем подумайте, где еще вы могли бы использовать цвет подобным образом? Взгляните на материалы Google , они могут вдохновить вас на новые комбинации.

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

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

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

На первый взгляд, я не могу быстро сказать, что к чему (а у меня есть опыт работы с ресторанными POS-системами). Мне кажется, что элементы, выделенные серым цветом справа от пользовательского интерфейса, не связаны друг с другом. Желтые элементы в центре экрана кажутся на самом деле 3-мя секциями, но это непонятно?

Из примеров, которые я показал ниже (и я ничего не говорю об их качестве, они являются случайным выбором из быстрого поиска), вы можете увидеть использование иконок, изображений и больших блоков цвета. Это полезные инструменты для определения действий и выделения отдельных функциональных областей или иерархии информации.

У меня нет времени для более подробного ответа, но я скажу, что взгляну на примеры текущего дизайна пользовательского интерфейса (UI). Например, быстрый поиск «Дизайн POS UI» даст вам такие изображения, как:

Помимо дизайна, является ли он функциональным, и понимают ли люди, как им пользоваться? Есть элемент не чинить то, что не сломано, если это так.

Да, он выглядит устаревшим, но многие кассовые системы, которыми я пользовался, грешат таким же простым внешним видом. Округлые кнопки и цвета, выбранные с учетом доступности, могли бы украсить его, но я чувствую, что это чисто функциональная часть, и попытка «оживить» может вызвать путаницу у сотрудников.

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

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

1. Откажитесь от 3D-эффекта старой школы win32. Это буквально оторвано от реальности в эпоху, когда все ожидают, что все будет выглядеть удобно для сенсорного экрана. То, что вы хотите использовать, — это большие плоские области для каждой области действия (кнопки) либо без промежутков между связанными группами кнопок, либо с тенями под кнопками. Посмотрите на материальный дизайн Android . Это полезно даже для немобильных приложений.

2. Используйте границы (не цвета) для группировки связанных элементов, если между ними есть интервалы. Если между ними нет промежутка, используйте цвета, чтобы вся связанная область выглядела так, как будто у нее один сплошной цвет фона.

3. Выбирайте более мягкие цвета (например, пастельные тона) и входящие в комплементарную цветовую схему. Убедитесь, что в вашей палитре есть светлые и темные версии каждого цвета. Я надеюсь, что вы все еще не имеете дело с системой, которая может отображать только старую цветовую палитру CGA/VGA 16.

4. Элементы пользовательского интерфейса должны быть последовательно окрашены в соответствии с цветовой схемой. Например: кнопки, обеспечивающие ввод пользовательского интерфейса, можно считать отличными от кнопок, которые меняют страницы или запускают основные функции, но, как правило, для каждого из этих типов кнопок должен использоваться 1 цвет, а не 1 цвет для всех кнопок в данной функциональной области. Это помогает пользователю лучше понять, что будет делать каждый элемент пользовательского интерфейса.

5. Лучше использовать интервалы между областями действий, чтобы отделить их, и плоские, мягкие границы между элементами действий. Элементы действия в области должны иметь обычный размер (представьте, что каждый элемент действия представляет собой 1 или более смежных ячеек в сетке).

6. При использовании области заголовка в окне:

   а. Все элементы действий в этой области должны помещаться в область заголовка.

   б. Все элементы действий в этой области должны быть глобальными для приложения (например, вход в систему, настройки и т. д.).

   в. Заголовок не должен перекрываться ничем, кроме логотипа.

Надеюсь, это поможет.

Почти все элементы кажутся кнопками. Но когда я читаю надписи, мне кажется, что одни кнопки — это кнопки действий, а другие — для навигации.

В современном пользовательском интерфейсе вы бы различали их. Ряд вкладок служит эффективным средством навигации, показывая, где вы находитесь в данный момент, и как добраться до другого места. У вас есть вкладка «Пицца» для всех вариантов пиццы и вкладка «Паста» для всех макарон.

Возможно, фиолетовая кнопка ЕДА уже выступает в качестве такой вкладки, а НАПИТКИ — еще одна такая вкладка. Они точно не должны быть справа — английский читается сверху вниз, слева направо, и ваш рабочий процесс должен это копировать.

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

Во-первых, я хотел бы спросить, какова цель?

Требуется ли оператору быстро найти ключ и сделать заказ быстрее без ошибок? или он должен привлекать и поощрять пользователей использовать графический интерфейс для машины?

В этом случае цель элемента ясно указывает на то, что он предназначен для эффективного и быстрого ввода транзакций. Таким образом, мы можем пойти более простым и организованным путем, чтобы форма, цвет и иерархия диктовали логический порядок, а не тенденции дизайна и причудливость.

Проблема с текущим графическим интерфейсом:

Цвет : слишком резкие цвета, которые со временем будут создавать стресс и будут влиять на эффективность решения пользователей. Белый фон с другими высококонтрастными цветами определенно создает нагрузку на глаза и затрудняет быстрый поиск необходимой информации, которую необходимо собрать пользователю.

Шрифт : Слишком мелкий для поиска и принятия решения, на это также влияет резкий цвет и контраст между текстом. Это может сильно повлиять на то, что новые пользователи привыкнут к системе, дольше и будут чаще ошибаться.

Порядок и группировка : Должны ли мы иметь название «POS-система» крупным шрифтом? Это выгодно? НЕТ! Пользователи этой системы и элементы на экране ясно говорят об этом. Имеет ли смысл группировка? Не совсем, лот можно сгруппировать, чтобы пользователи могли логически его найти. Имеет ли смысл выбор некоторых слов? НЕТ! "ОТПРАВИТЬ"? что отправить? "Установить меню"? Вы составляете меню каждый день? НЕТ! вперед. Необходимо тщательно изучить иерархию и выбор слов.

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

Поскольку это совсем не похоже на то, как «плитки» разрабатываются для мобильных устройств, Android или ОС Windows, это также совершенно не похоже на Apple, что вызывает конфликт, потому что они контролируют так много того, что визуально в моде. Практически все в этом «неправильно», поэтому я пропущу подробности.

Все это отличные ответы, но если вам нужен справочный материал, яркий пример того, как выглядит хорошая современная 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 .