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

Мерката

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

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


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

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

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

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


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

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

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

Про это я уже ((http://blog.filippovonline.ru/all/ekosistema-uvedomleniy/ рассказывал).
А про обновления каталога и работу с товарами без штрихкода тут.

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

Кстати, прочитайте про новый корпус кассы.


Скоро я добавлю больше подробностей в описание (или не скоро)

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

Обновление сайта Меркаты

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

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

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

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

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

Новая версия уже доступна, но находиться в ß-версии и наполняется контентом.
Скоро я дополню статью большим количеством подробностей переделок по сайту.
(или не скоро)

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

Обновление кабинета пользователя Меркаты

Хочу рассказать об очередном обновлении веб-сервиса Меркаты для управления магазинами.
Задача: Вытащить всё самое полезное наружу, предложить новые фишки.

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

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

Теперь все макеты предполагают адаптивный подход в верстке и все страницы вмещаются в маленькие экраны, например, в мониторы с разрешением 1024 на 768 пикселей. При этом нет никаких артефактов или горизонтальных скроллов в меню.

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

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

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

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


Скоро я добавлю больше информации про это обновление (или не скоро)

15 октября   Гайд   Мерката
Untitled Document
6 октября   Анимация   интерфейс   Мерката
Untitled Document
2017   Гайд   Мерката
Untitled Document Untitled Document

Случилось чудо

В Меркате произошло невероятное — ко мне подошли разработчики, Гриша Луговых и Ирина Григорьева, и говорят: «Мы захотели сделать круто. Только покажи нам, как?». Это очень клёва. Хорошо когда разработчик начинает думать о пользователях и осознаёт, что дизайн это не про картинки, а про то как это работает.
У ребят возникла потребность как-то закрыть временную паузу в загрузке данных с сервера, при этом не блокировать страницу для возможных действий и развлечь пользователя в момент ожидания подгрузки информации.

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

Это сущность карточки чего-либо, например, сотрудника.
Здесь всё достаточно обычно, и как это реализовать тоже вполне понятно. Просто в один контейнер с блоками серого цвета кладётся, общая для всех, белая переливайка. Такой тип анимации уже много где используется.

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

В итоге получилось хорошо

Теперь нужно также хорошо переделать анимацию для карточек.

Посмотреть всё это можно зайдя в сервис, но для этого нужно быть клиентом Меркаты.

Отдельное спасибо Насте Полозовой.

2017   Мерката
Untitled Document

Календарь


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

2017   Мерката
Untitled Document

Про уведомления

С момента как я стал работать в проекте Меркаты, ребята из разных отделов меня часто спрашивали а как тут и что можно сделать там? Все вопросы были про кривость интерфейсов и кассовой программы. Я принял решение спроектировать макеты по некоторым текущим задачам в двух версиях: «в релиз с небольшими нововведениями» + «а на самом деле лучше сделать так». Второй вариант сработал, хорошо взбодрил всех и дал понять, что можно делать так, чтоб было хорошо.
Понятное дело, речь не шла о переделки всего с нуля. каждый кто был на презентации отмечал важные моменты, плюсы и минус. мы разобрали все замечания в виде рейтинговой таблицы и взяли в разработку ряд предложений с рассчетом что это востребовано бизнесом, сможет потянуть разработка и будет очевидный профит пользователям Меркаты.
Такими задачкам стали товары без штрихкода, касса 2.0, онбординг и экосистема уведомлений.

Дак вот, уведомления

Сообщения разделяются по типу, степени важности и тематике.
Так, предположительно, должны выглядеть уведомления внутри кассы

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

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

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

2017   Мерката
Untitled Document

2018

Пасхалочки и новогоднее оформление сервисов Меркаты.
Например, веб

…и касса

А это эскизы

Спасибо Маше Заволокиной за помощь в создании иллюстрации котопса :-)


В некоторых магазинах это выглядит вот так

2017   Мерката
Untitled Document

Гайд

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

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

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

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

Так выглядит общий список статей

А это еще несколько примеров про кнопку и инпут


Что ещё:
календарь;
баннер, тогл и бедж;
старницу входа·регистрации;


2017   Гайд   Мерката
Untitled Document
Ранее Ctrl + ↓