Позднее Ctrl + ↑

Хороший дизайнер не спорит

Одно из отличий хорошего дизайнера — умение обоснованно защищать свою работу. Уметь донести, почему именно этот, один вариант, он показывает вместо нескольких на выбор. Профессионал всегда сумеет аргументированно рассказать почему в дизайне нет случайных вещей. Ещё хороший дизайнер умеет получать критику и стремиться вывести такой разговор в конструктивное русло.

2018   дизайн
Untitled Document Untitled Document

О пользовательском опыте

В Тинькофф-банке появился новый пункт — Операции за границей.
Выглядит это так

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

¹Его отсутствие.

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

Что я должен был понять из этой функции?
Спрошу у банка:




Почему-то Артём поспешил покинуть беседу и на помощь пришла, коллега, Ирина

Так я выяснил, что банку наплевать на безопасность средств клиентов и ребята решили просить пользователей напоминать банку о его обязательствах. Знатоки умеют формировать «правильный» ЙуИкс сервиса.

2017   банк
Untitled Document
2017   Радио   Эфир
Untitled Document Untitled Document

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

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

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

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

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

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

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

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

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

Untitled Document

Календарь


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

Untitled Document

Кафе

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

Решение

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

Эскизы

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

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

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

Календарь

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

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

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

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

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

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

Untitled Document

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

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

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

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

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

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

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

Untitled Document

2018

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

…и касса

А это эскизы

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


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

Untitled Document

Гайд

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

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

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

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

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

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


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


Untitled Document

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

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

Вот так

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

Untitled Document
Ранее Ctrl + ↓