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

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

Это 3D кнопки, цвета, макет, шрифт? И что бы вы сделали, чтобы он выглядел актуальным?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   с. Название не должно перекрываться чем-либо еще, кроме логотипа.

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

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

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

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

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

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

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

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

Проблема с текущим GUI, это:

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

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

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

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

Поскольку это совсем не похоже на то, как конкретно создаются «плитки» для мобильных устройств, ОС 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 .