5 заметок с тегом

POS

Концепт обновления кассы Меркаты

Ранее я писал про новое устройство Меркаты. Но вообще, кассовая программа Меркаты умеет работать на любом устройстве с операционной системой Виндоус или Андроид.


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

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

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

Смотреть на экран стало комфортней


Скоро это статья пополниться информацией (или не скоро)

17 октября   POS   интерфейс   Мерката
Untitled Document

Умная касса

Нарисовал прототипы интерфейсов для кассовой программы Меркаты версии 2.0, а Ваня Парамонов и Никита Демидов из Форма-4 запилили промышленный дизайн кассы где будут жить все эти новые элементы.

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

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

Несколько зарисовок моих идей

В итоге получилось так

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

А это эскизы упаковки, про неё расскажу отдельно

Макеты с приложением кассы версии 2.0

А так у меня получилось сделать рендеры интерьеров

А тут Антон Еликов проводит одну из первых презентаций гаджета

2017   POS   Мерката
Untitled Document

Товары без штрих-кода

Задача
Упростить поиск и продажу товаров без штрихкода.



Решение

Но всё по порядку.
Прежде в Меркате не было каких-то отдельных способов продажи товаров без штрихкода.

Перед тем как приступить к разработке я причесал интерфейсы текущей версии кассы 1.x.х и сделал прототипы версии 2.0

Кусочек второй версии, для которой уже спроектирован уютный корпус

Идея полоски шорткатов послужила отправной точкой.
А ещё мы решили оставить, привычные многим кассирам, способы продажи товаров без штрихкода (штрих-меню или создание вручную коротких штрихкодов), но пользоваться ими неудобно. Короткие штрих-коды нужно запоминать, а штрих-меню нужно составить, распечатать, поддерживать актуальность ассортимента товаров и делать это нужно на всех кассах в магазине.
Развивая идею шорткатов, я начал с тестирования. Провел опрос среди коллег отдела техподдержки и маркетинга. Ребята 24 часа в сутки получают обратную связь от клиентов Меркаты и ответили на разные вопросы и дали полезные комментарии.

Рекомендации
Первые рабочие прототипы содержали список избранных товаров и категории товаров без штрихкода.

Варианты выглядели вот так

Так

Касса сообщает кассиру что-то вроде: «я посмотрела результаты смены и выяснила, что чаще всего покупают вот это. Их можно добавить в список избранного, что позволит быстрее вносить их в чек, хочешь?

Или вот ещё

Раздел избранного с „умным“ рейтингом и товарами, добавленными вручную.

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

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

Пример пресетов

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

Стреловидная форма подсказывает кассиру о последовательности дерева каталога и позволяет сделать поведение элементов интерфейса предсказуемым.

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



Что вошло в релиз

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

Внутри категории избранных товаров использован тот же принцип.

А так выглядит работа с каталогом

Обновления уже доступны всем пользователям Меркаты

2017   POS   Мерката
Untitled Document

Касса 1.х.х по вертикали

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

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

2017   POS   Мерката
Untitled Document

Акции и скидки

Есть мнение, что делать подсказки и давать обратную связь ни к чему, дизайнер должен рисовать, а не предлагать ерунду.
Вот, например, у покупателя в магазине общая сумма чека ≥1000 ₽, а продавец на этот случай придумал акцию и печатает купоны на скидку прямо в чеке покупателя. Продавец рассчитывает, что акция будет работать и будет эффективной. Срок акции закончился, предприниматель смотрит отчет и видит что купонами воспользовались всего 12 раз из, допустим, 10 000 выданных. Владелец бизнеса может подумать, что такая акция не работает и больше не будет её проводить, или может провести повторно, сказав кассирам, чтоб те сообщали покупателям о купонах на чеке.

Чтоб акции работали, нужно делать, примерно, так

2017   POS   Акции   Мерката   Скидки
Untitled Document