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

Мерката

Позднее Ctrl + ↑

Знатоки и формы

Есть такие люди — знатоки. Они много чего знают.
Например, я однажды показал как должна выглядеть карточка контрагента в Меркате.

Вот так



Пользователь заполняет всего одно поле, а умная Мерката либо сразу заполняет все необходимые реквизиты либо подсказывает пользователю варианты для выбора.

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



Какое-то время пользователи Меркаты будут вынуждены тратить кучу времени на это ↓

2017   Мерката
Untitled Document

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

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



Решение

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

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

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

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

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

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

Так

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

Или вот ещё

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

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

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

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

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

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

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



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

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

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

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

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

2017   POS   Мерката
Untitled Document

Знатоки и плохая дисциплина у пользователя

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

Если продолжать думать так и дальше, то пользователи либо будут долго мучиться, либо перестанут пользоваться сервисом вовсе.

2017   Мерката
Untitled Document

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

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

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

2017   POS   Мерката
Untitled Document

2017

Как-то раз получился вот такой экран кассовой программы



А это пасхалка «Кассир и товаровед Пётр» ↓

2017   Мерката
Untitled Document

Сущности Меркаты

Причесал разделы Меркаты.
Расскажу об изменениях на примере карточки кассы.

Было

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


Стало



Сгруппированные поля теперь выглядят вот так

А в подвале теперь всё на своих местах.
Кнопки разведены по степени опасности с помощью размера, цвета и расстояния.

Несколько других карточек Меркаты

В версии анкет меркаты 2.0 напишу про избавление от лишних препятствий во множестве полей и форм.

2017   Мерката
Untitled Document
2017   Мерката
Untitled Document
2017   Мерката
Untitled Document

Жизнь на кухне

Саша Кужильная и Костя Филютич запилили вон чего

В промежутках ребятам помогали разные Меркатёры.
Кухня обрела дух свободного предпринимательства :-)

2017   Мерката
Untitled Document

Обновление Андроид-иконки Меркаты

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

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

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

Основные принципы Меркаты, отраженные в иконке — дружелюбность и приветливость, снижение строгости и бюрократичности при работе с документами и отчетностью.

Для  того чтобы установить приложение, нужно стать клиентом Меркаты.

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

Затем стал взрослее фирменный стиль Меркаты и иконку обновили до такой

2017   Мерката
Untitled Document

Обновленное меню

Обновил интерфейс меню Меркаты. Посмотреть обновление 1.2
Ребята в Меркате делают сервис, который предназначен для администрирования офлайн магазинов и онлайн касс.

Теперь меню выглядит так

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

Работать над проектом Меркаты увлекательно и очень интересно. Следите за обновлениями статьи и читайте подробный рассказ.

Попробовать новое меню в действии можно, пройдя регистрацию здесь.
Обновление меню 1.2

2017   интерфейс   Мерката
Untitled Document

Мерката — отчеты и аналитика

Задача: Переработать визуальную часть страницы, не меняя аналитику и структуру построения данных.
Результат можно посмотреть тут

Решение:
Изначально отчеты были разбиты на две основные страницы: «За период», «За день»

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

В первый день после релиза, акции Меркаты выросли на 12%…

2017   Мерката   Мерката-лог
Untitled Document
Ранее Ctrl + ↓