3 заметки с тегом

POS

Умная касса

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

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

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

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

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

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

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

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

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

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

2017   POS   Мерката
Untitled Document

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

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



Решение

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

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

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

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

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

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

Так

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

Или вот ещё

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

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

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

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

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

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

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



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

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

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

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

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

2017   POS   Мерката
Untitled Document

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

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

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

2017   POS   Мерката
Untitled Document