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

Гайд

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

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

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

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

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

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

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

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

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


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

15 октября   Гайд   Мерката
Untitled Document
2017   Гайд   Мерката
Untitled Document Untitled Document

Гайд

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

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

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

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

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

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


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


2017   Гайд   Мерката
Untitled Document