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

av.by

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

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

Миссия

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Стало ← было

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пресса

  1. tut.by. «Маскот-2019». Голосуйте — и получите шанс выиграть крутые призы
  2. tut.by. Премия онлайн. В Беларуси выбрали автомобиль года
  3. Комсомольская правда. Голосуй за самый лучший автомобиль! Стартовал «МАСКОТ-2019»
  4. Комсомольская правда. От крутых до бюджетных: белорусы назвали лучшие автомобили
  5. marketing.by. Стартовала премия, где можно проголосовать за лучший автомобиль
  6. marketing.by. Автопремия «МАСКОТ-2019»: можно проголосовать и выиграть крутые призы
  7. marketing.by. От крутых до бюджетных: беларусы назвали лучшие автомобили
  8. Радио Мир. В Беларуси выбрали машины, где лучше всего звучит радио «МИР»
  9. City dog. Тут начали голосование за любимое авто минчан. Можно получить приз
  10. City dog. Белорусы составили топ лучших автомобилей. Ваш в списке?
  11. grodnonews.by. От кроссовера до пикапа. Белорусы составили топ лучших авто 2019 года
  12. minsknews.by. От кроссовера до пикапа. Белорусы составили топ лучших авто 2019 года
  13. foerch.by. Выбран автомобиль года в Беларуси
  14. profi-forex.org. В Беларуси выбрали лучший автомобиль года
  15. profi-forex.org. Кто получил престижную автопремию «Маскот»?
  16. finanso.net. В Беларуси состоялось вручение престижной автопремии «Маскот»
  17. Рамблер Авто. В Беларуси выбрали машины, где лучше всего звучит радио «МИР»
  18. Skoda. ŠKODA KODIAQ — автомобиль года по мнению экспертов.
  19. Volkswagen. Volkswagen одержал 4 победы
  20. Атлант-М. Автомобили холдинга «Атлант-М» завоевали 14 наград
  21. BAA. ŠKODA KODIAQ — автомобиль года по мнению экспертов
  22. KIA. KIA Ceed и KIA Rio X-Line признаны победителями автомобильной премии
  23. av.by. «МАСКОТ-2019»: старт дан! Голосуйте за самый лучший автомобиль
  24. av.by. «Маскот-2019». Выберите машину — получите бонус
  25. av.by. «Маскот-2019». Последний день, чтобы получить шанс выиграть призы от Huawei
  26. av.by. «В этом году будет еще лучше». Чего эксперты ждут от автопремии «Маскот-2019»
  27. av.by. «Маскот-2019». Белорусы определят лучший автомобиль прошлого года
  28. av.by. «Маскот-2019». Церемония награждения пройдет в новом формате
  29. av.by. «Маскот-2019». Церемония награждения состоялась!
  30. av.by. От крутых до бюджетных: белорусы назвали лучшие автомобили

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

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

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

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

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

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

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

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

Макеты в Zeplin

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

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

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

Стейджинг

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

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

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

Вывод

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

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


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

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

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

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

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

Магистральные сценарии

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

Промежуточные сценарии

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

Сценарии исключения

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

Как определить сценарии, если это неочевидно

Тут мы придумали простую систему. Берем три метрики: количество пользователей, частота встречи сценария, серьезность. И оцениваем каждую либо 0, либо 1. Как правило, магистральные сценарии получают оценку 3, промежуточные 2, а исключения 1 или 0.

Что делать, если и на первые два уровня уже нет ресурсов

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

Вывод

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пресса

  1. Marketing.by В Минске назвали лучшие автомобильные марки
  2. Realt.by Знай лучших. В Беларуси выбрали автомобиль года
  3. Домкрат Проголосуйте за любимые авто
  4. av.by Знай лучших. В Беларуси выбрали автомобиль года
  5. Belretail.by Итоги премии «МАСКОТ 2018»
  6. Tut.by Знай лучших. В Беларуси выбрали автомобиль года
  7. av.by Голосуем за лучший автомобиль года в Беларуси
  8. Marketing.by av.by проводит автомобильную премию для улучшения качества индустрии
  9. Volkswagen Подведены итоги автомобильной премии
  10. Skoda Skoda Kodiaq и Skoda Octavia — победители премии
  11. Радио Мир Названы автомобили с лучшим штатным автозвуком

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

Ранее Ctrl + ↓