Позднее Ctrl + ↑

Календарь


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

Untitled Document

Кафе

Задача
Обновить страницу заказа блюд в кафе

Решение

Это ↑ скорее черновик идеи, в нём ещё много чего нужно проработать.
Ещё покажу эскизы с описанием работы.

Эскизы

Верх страницы занимает полоска навигации, она всегда видна и подсказывает текущее местоположение.

Под полоской располагается область с календарем и меню блюд.
Скролируется только поле с фотографиями.
Для быстрого перехода к нужному разделу есть переключатель по типам, например, суп · салаты · комбо

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

Календарь

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

По умолчанию выбирается текущий день календаря.
Например, представим, что сегодня 27 декабря — вторник

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

Ещё в карточке дня есть общая стоимость заказа, прелоадер-галочка обратной связи, адрес доставки и шкала «сытости», обозначающая сколько ещё можно заказать еды.
Замену блюд в заказе можно сделать двумя способами, удалив ненужное и добавив вместо него новое блюдо, либо просто выбрав новый, например, суп в меню и нажать кнопку «Купить»

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

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

Untitled Document

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

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

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

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

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

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

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

Untitled Document

2018

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

…и касса

А это эскизы

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


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

Untitled Document

Гайд

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

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

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

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

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

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


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


Untitled Document

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

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

Вот так

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

Untitled Document
Untitled Document

ЭмВиПи

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

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

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

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

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



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

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

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

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

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

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

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

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

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

Untitled Document

Умная касса

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

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

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

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

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

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

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

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

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

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

2017   POS   Мерката
Untitled Document

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

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

Вот так



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

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



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

Untitled Document

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

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



Решение

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

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

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

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

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

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

Так

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

Или вот ещё

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

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

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

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

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

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

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



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

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

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

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

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

2017   POS   Мерката
Untitled Document
Ранее Ctrl + ↓