ivan's blog: posts tagged av.by

Миссия и принципы дизайна в av.by

Ivan Zviahin — Sat, 06 Feb 2021 13:01:59 +0000

av.by — сайт о покупке и продаже автомобилей. Мы развиваем проект с 2001 года, и сегодня он входит в число наиболее посещаемых ресурсов байнета. Сейчас в нашей базе около 70 000 объявлений о продаже автомобилей из Беларуси. Помимо сайта, у нас есть и мобильное приложение для Android и iOS с суммарной месячной аудиторией более 250 000 пользователей. Каждый месяц av.by посещает более 1 200 000 человек.

Миссия

Помогает всей компании глобально держать фокус в принятии решений.

Делаем для Зои Ивановны

Зоя Ивановна — наша ключевая из персон. Сделав понятно, доступно и очевидно для неё — сделаешь хорошо и для других персон. Персоны сделаны на основании множества проведенных пользовательских интервью.

Чтобы объяснить что-то сложное, переводим на «мамин» язык. Не боимся использовать местоимения и предлоги. Характер и интонация как у дружелюбного соседа, который разбирается в автобизнесе и конструкции автомобиля. У этого соседа есть чувство юмора, но он не нарушает личных границ. Мы застолбили несколько принципов для текста в интерфейсе:

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

Опираемся на сущности

Мы называем сущностью ключевой и сложный объект системы. Ключевой потому что важно для бизнеса. Сложный потому что состоит из множества атомов. Например:

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

Список сущностей: объявление — главная сущность продукта, финансовое предложение, организация. На картинке показана сущность объявления.

Учитываем все разделы

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

Пример на «Финансах»

В заголовке мы не используем название раздела, чтобы получилась универсальная конструкция «Кредиты и лизинг на покупку автобуса или автомобиля или ещё какого другого транспорта...». Кастомизация заголовка не бесплатная, а пользы не приносит. Но если тачки отметить важно, делаем кастомизацию для других разделов транспорта.

Фокусируемся на главной платформе

Фокус на платформе зависит от количества аудитории, которая пользуется этой платформой. У нас исторически сложилось так:

Для физлиц — Android. Затем идёт мобильный WEB. В конце iOS, десктопный WEB — на сдачу.
Для юрлиц — WEB десктопный. Мобильный WEB — на сдачу. В мобильных приложениях нет интерфейса для юрлиц.

Для экономии сил и времени для второстепенных платформ мы применяем в основном только промежуточные сценарии — это второй уровень проработки интерфейса.

Помним про статусы объявлений

Ох, много доработок было сделано из-за того, что мы забывали про это. Во время проектирования мы сфокусированы на прямом и очевидном пути Зои Ивановны. Но иногда упускаем крайние состояния и вспоминаем о них во время разработки. Точнее разработчики и тестировщики об этом напоминают.

Добавь в свой чек-лист пункт: «Собрать макет, когда объявление изменит свой статус». Если это уместно в данной задаче.

Не пачкаем фотографии

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

Стало ← было

Всё вместе отвлекает от фотографии, а по-отдельности:

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

Cайт «Маскот»

Ivan Zviahin — Wed, 29 Apr 2020 12:00:47 +0000

Версия сайта: первая · вторая

«Маскот» — это автомобильная премия в Беларуси. Сайт премии решает множество задач. Нужно как-то познакомить с условиями будущих участников премии и дать возможность подать заявку на участие. Упомянуть всех партнёров. Рассказать про номинации, методику и познакомить с экспертным советом. А ещё дать возможность проголосовать потребителям за автомобили, которые попадут в отборочный тур. При этом провести розыгрыш призов среди участников голосования, чтобы они не ленились голосовать.

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

С новым логотипом нам помогла дизайн-студия «Райт» и вместе у нас получилось:

«Айдентика, для Автомобильной премии «Маскот». Это ему ветер в лицо, это у него слезятся глаза, это он несется навстречу... А вместе с ним и мы. В основе дизайн-решения – шрифтовая композиция. Буква А в названии прекрасно анимируется: мы как бы видим летящую навстречу разделительной полосой дорогу глазами нашего маскота-талисмана. Для справки: маскот – термин автомобильный, обозначающий эмблему на радиаторе или капоте автомобиля.»
Алексей Шклянко, арт-директор в «Райт»

Участники премии

Все участники премии — это автодилеры. А предмет оценки — новые автомобили. Поэтому на сайте нужно было выстроить журнал всех автомобилей, которые продавались в 2019 году:

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

Информационные партнёры

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

Методика определения победителя

Четыре мощных этапа. Итого, в каждой номинации будет два победителя: по мнению народа и по мнению экспертов. Или один, если мнение экспертов и народа совпадёт.

Розыгрыш призов

Для привлечения потребителей, которые участвовали в голосовании отборочного этапа, мы закатили розыгрыш призов:

Голосование потребителей

Для того, чтобы определить 5 финалистов в каждой номинации, мы запустили голосовалку отборочного этапа прямо на сайте:

Анонс победителей

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

Мобильные устройства

Всё это дело, конечно же, работает на мобильных устройствах:

Для сайта собрано около 50 экранов и состояний. Посмотрите сами: mascot.by

Версия сайта: первая · вторая

Пресса

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Макетная актуальность

Ivan Zviahin — Tue, 29 Oct 2019 16:02:18 +0000

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

У нас в команде есть 5 источников таких знаний:

требования в Jira,
макеты в Zeplin,
статическая вёрстка,
cтейджинг,
голова дизайнера.

Итак, разложим каждый по характеристикам: лёгкость поиска, читаемость, близость к правде, видимость деталей.

Требования в Jira

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

Макеты в Zeplin

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

Статическая вёрстка

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

Стейджинг

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

Голова дизайнера

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

Вывод

	Требования	Макеты	Вёрстка	Стейджинг	Голова
Лёгкость поиска	−	+	+	+	−
Читаемость	−	+	+	−	−
Правдивость	+/−	+	+	+	+/−
Видимость деталей	−	+	−	−	−
Итого	−3	4	3	0	−3

Вот и решайте теперь, стоит держать макеты актуальными или нет.

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Уровень проработки

Ivan Zviahin — Tue, 24 Sep 2019 17:22:15 +0000

на русском · in english

Я бы хотел рассказать о решении одной важной проблемы в продуктовой команде. Проблема — мы делаем задачи слишком долго. Одна из причин — слишком глубокий уровень проработки каждой. Как бы времени у нас совсем нет, а функциональность урезать нельзя. Остается только снизить уровень проработки. Мы решили понижать его не для всех задач, а только для некоторых.

Пользовательские сценарии в любом продукте можно разделить на три уровня. Уровень первый — сценарии, которыми люди пользуются чуть ли не каждый день. Мы такие сценарии назвали магистральными. Второй — важные, но нужные не часто. Эти сценарии назвали промежуточными. Третий — скорее исключения, это как раз те сценарии про которые обычно совсем забывают.

Уровень 1

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

Уровень 2

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

Уровень 3

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

Вывод

Никому не нужен магазин с идеально продуманным сценарием добавления товара в «Избранное» в двух вкладках браузера, когда поиск товаров работает плохо и непонятно.

Cайт «Маскот»

Ivan Zviahin — Mon, 13 May 2019 20:06:58 +0000

Версия сайта: первая · вторая

Участники премии

Все участники премии — это автодилеры. А предмет оценки — новые автомобили. Поэтому на сайте нужно было выстроить журнал всех автомобилей, которые продавались в 2018 году:

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

Информационные партнеры

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

Методика определения победителя

Первый этап — отборочный: онлайн голосование потребителей прямо у нас на сайте. Отбор пяти самых лучших авто для второго и третьего этапов. Подробнее про это расскажу позже.

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

Третий — определение победителя экспертным советом. Все шесть экспертов выстроились в ряд. Один из них уже мелькал в ленте журнала автомобилей выше с яркой цитатой.

Итого, в каждой номинации будет два победителя: по мнению народа и по мнению экспертов. Или один, если мнение экспертов и народа совпадёт.

Розыгрыш призов

Голосование потребителей

Для того, чтобы определить 5 финалистов в каждой номинации, мы запустили голосовалку отборочного этапа прямо на сайте. Верификация номера телефона:

Само голосование. Чтобы избежать сравнения автомобилей между собой и повысить объективность голосования, мы показываем только один автомобиль на экране. Так сказать, эффект «Тиндера».

Личные данные участника:

Благодарность за участие в виде промокода на автомобильные товары в онлайн-гипермаркете:

Анонс победителей

Помимо масштабного офлайн мероприятия, мы сделали анонс победителей на сайте:

Мобильные устройства

Все это дело, конечно же, работает на мобильных устройствах:

Для сайта собрано около 50 экранов и состояний. В жизни есть ещё трёхмерный логотип и переливающиеся кнопки: mascot.by

Версия сайта: первая · вторая

Пресса

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.

Печать для компании av.by

Ivan Zviahin — Fri, 16 Mar 2018 16:36:05 +0000

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

Задача

Помочь документам компании av.by визуально выделиться среди стопки других.

Решение

Чтобы выделиться среди других документов, решили сделать печать, которую сложно не заметить. В основном печати выглядят все одинаково: множество линий и старомодный шрифт. Мы использовали минимум линий. Сделали печать в виде буквы «а», чтобы поддержать новый стиль. Использовали фирменный шрифт и выделили главное. С первого апреля 2018 года печать будет красоваться на всех документах компании.

Про печать написали на vc.ru

Чтобы не пропустить новую заметку — подпишитесь на мой канал в Телеграме или RSS.