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

Мерката

Позднее Ctrl + ↑

Новости в Меркате

Задача:
Показать как может выглядеть новостная страница Меркаты.

Вот так

Ещё есть шорткаты новостей, которые выглядят так

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

ЭмВиПи

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

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

В деплой ушло в таком виде

Кусочек сетки экранов разных состояний и нарисованная ранее иконка

Баннеры из магазина приложений



Фотокарточка часов Леши Сотова от Юры Кушпеля

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

2017   Android   APP   Google   Мерката
Untitled Document

Атомарный дизайн и методология БЭМ

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

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

И вот, спустя некоторое время, Леша Сотов рассказал ребятам об этом подходе на языке разработчика

Спустя еще некоторе время одна из команд разработчиков принялась пилить компоненты, подглядывая в методологию Яндекса. Для этой задачки я написал небольшой гайд (где, в какой момент и как именно используются элементы) для библиотеки элементов под этот пилотный проект и подготовил стартовый КИТ 1.0.0
Некоторые элементы из него

До поэтапного переезда на Вуи.джи-эс и внедрения компонентов в Меркате переделана значительная часть юзабилити. Скоро я продолжу рассказывать про эти улучшения……

2017   Атомарный дизайн   БЭМ   Мерката
Untitled Document

Умная касса

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

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

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

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

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

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

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

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

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

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

2017   POS   Мерката
Untitled Document

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

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

Вот так



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

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



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

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
Ранее Ctrl + ↓