Ошибки при создании сервисов на основе карт, особенности сегментации ЦА и проверка гипотез до разработки

Сессия вопросов и ответов AMA (ask me anything) с дизайн-командой «2ГИС».

Городской информационный сервис «2ГИС» много времени уделяет дизайну своего основного продукта и создаёт множество экспериментальных приложений. Несколько лет назад компания показала пример того, как можно сравнительно простыми средствами получить собственный шрифт. А ещё они организуют дизайн-секцию на ИТ-конференцию CodeFest в Новосибирске и поддерживают «Серебро Набора», посвящённую типографике.

Как устроена ваша команда и как вы взаимодействуете с продуктом? Это выделенный отдел дизайна или дизайнеры погружены в продукт?

Дмитрий Пиликов: Команда дизайна — это Женя Бекин, Денис Шумайлов, Алиса Виталёва, Макс Карпылев, Миша Литвиненко, Игорь Филимонов, а ещё несколько аутсорсеров и консультантов, с которыми мы постоянно сотрудничаем: они помогают нам на задачах от проектирования до иконок.

Мы — гибрид во взаимодействии с командами продукта: дизайнеры сидят вместе с продакт-менеджерами, но когда дизайнерам надо плотно поработать с продуктом, они переезжают к разработчикам. Бывает и так, что кто-то проводит больше времени с продуктом, периодически приезжая поработать в команду дизайна. В этом плане всё гибко: зависит от договора между дизайном и разработкой, от «дизайн-самостоятельности» продукта и от стадии развития, на которой сейчас продукт.

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

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

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

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

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

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

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

Недавно мы экспериментировали с разницей точек рекламодателей и нерекламодателей на карте. Без фанатизма и крайностей, но делали им разный вид, разный размер. Даже без сильных изменений и различий наблюдали интересный эффект: количество кликов на рекламодателей увеличилось, но количество звонков и время сессий упало. Пользователям не подходила компания-рекламодатель, веры в нас не было — и они уходили с сервиса или меняли формулировку запроса. Так «изменение на 10px» могло бы обвалить доверие к продукту. Отказались и доработали логику.

Как вы работаете с массовым пользователем? Как вы сегментируете ЦА, как учитываете противоречащие требования от разных целевых групп?

Антон Спиридонов: Всё зависит от фичи. Для поиска проезда на общественном транспорте это может быть одна аудитория, для выбора фирмы по отзывам — другая. Если говорить о создании продукта в целом, новую версию, этап переосмысления, то для текущего поколения «2ГИС» мы активно использовали персонажей — двух очень разных, но отражающих самые широкие и ценные прослойки аудитории.

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

Денис Шумайлов: У нас два API: справочные данные и карта. Со справочником всё просто — партнёры получают массив данных, а как их отображать и демонстрировать аудитории, решают сами. Тут с нашей стороны нет никаких требований или ограничений по дизайну.

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

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

При желании можно менять стиль контролов управления и маркеров на карте. Однако практика показала, что из всей массы пользователей кастомизацией занимаются единицы.

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

Евгений Бекин: Последний год для макетов мы используем в основном Sketch и всё ещё часто — продукты Adobe. Не рисовать же вектор в Sketch, правда? Хотя отдельные типофилы рисуют иконки в Glyphs, например. Для коммуникаций у нас есть Basecamp (общение с продакт-менеджерами), Trello (краткосрочное планирование), Zeplin (результаты для разработчиков) и Slack (оперативное общение). Кажется, всё как у всех.

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

Как проверяете гипотезы до разработки? Какие методы исследования используете и как?

Евгений Бекин: С гипотезами обычно приходит продакт-менеджер — от имени пользователей. В идеале у него уже есть статья с требованиями, а также бриф про сценарии и нужные ощущения от продукта. Дизайнер пытается понять его боль и найти лучшую форму для решения задачи.

Проверяем гипотезы в зависимости от изначальной веры в них: тут есть диапазон от «догоняем стандарты рынка» до «выйти за рамки и найти инновационное решение». Для простых вещей достаточно понимания сценариев и экспертной оценки — рисуются макеты и собираются юзер-истории.

Для объёмных фич, вроде навигатора, исследуем подробнее: интервью и анализ конкурентов, персонажи и сценарии. Прототип, проверка прототипа. С прототипом можно и в коридор выйти, провести холл-тест. Если задавать правильные вопросы или в нужные моменты молчать — получаются полезные результаты. Особенно помогает, когда «глаз профессионально замылен».

Если мы делаем новую версию уже существующей функциональности, то всегда есть статистика и обратная связь от пользователей, которые можно учесть. Для свежевышедшей фичи метрики тоже собираются, и можно внести коррективы или откатиться к предыдущей версии. То же самое, но намеренно — А/B-тестирование в бою.

«2ГИС» — массовый продукт, и есть ещё один интересный, но дорогой способ проверки гипотез. Наблюдать за тем, как пользуются справочником реальные горожане на улице, или водитель такси — навигатором.

Самые ходовые и полезные методы исследований в компании (которые прямо стали рабочими инструментами): качественные, количественные, удаленные и так далее? Сами или агентство? Как устроен процесс исследований? Кто участвует от проектировщиков, продукта, бизнеса?

Дмитрий Пиликов: Если говорить про исследования в процессе разработки фичи — анкетирование, холл-тесты и наблюдение за людьми. Это основное из качественного. Исследования в процессе проработки проводят продакты и дизайнеры.

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

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

«2ГИС» делает много экспериментальных приложений вроде «Шейкера». Чем они полезны для компании и дизайн-команды?

Максим Карпылев: Нашумевшие экспериментальные приложения вроде «Шейкера» (потрясти телефон, чтобы проложить пеший маршрут до ближайшего бара с учётом сотни факторов, включая тот бар, где пользователь находится прямо сейчас) или «Таксы» (сравнение цен на такси), появились в рамках городских хакатонов «2ГИС».

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

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

Алиса Виталёва: Помимо хакатоновских «экспрессов» мы делаем экспериментальные продукты маленькой командой в рамках 2GIS.Lab. Это возможность реализовать какую-то классную идею чуть более вдумчиво и обстоятельно.

Если хакатон даёт пару дней на реализацию идеи, то в Lab мы отводим себе пару месяцев. За год работы мы доставили «Аптеки», «Сообщения» (b2b-чат), товарный поиск и Transit. Некоторые эксперименты, например, «Аптеки» или Transit, становятся отдельными продуктами, а некоторые сразу внедряются в «2ГИС».

«Аптеки» — продукт, который помогает найти самую дешёвую ближайшую аптеку. Мы сделали приложение под iOS и Android на модном React Native. Также в проекте мы оттянулись с анимациями и нестандартным подходом к UX.

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

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

Какие вызовы стоят перед вашей командой сейчас?

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

Если говорить конкретней, то нам хочется реализовать в продукте принцип «Поиск → Выбор компании → Обращение». Это такая метафора, к воплощению которой мы последовательно стремимся, то, каким мы видим использование нашего продукта. И в разное время мы фокусируемся на разных составляющих. Мы сделали ряд улучшений в «Обращении»: навигатор, чаты с компаниями. Сейчас фокус во многом на «Выборе компаний». Сделать «Выбор», который помогает людям, интересен компаниям и доставляет удовольствие — вызов.

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

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

Фокус разработки у «2ГИС» сейчас смещен в мобильную и веб-версию. Почему была приостановлена работа над версиями для ПК?

Михаил Литвиненко: Изменились привычки нашей аудитории. В отношении ПК-версии мы в этом убедились после того, как выпустили бету. Сейчас аудитория быстрее всего растёт в мобильной версии, а вот аудитория ПК стала всё чаще предпочитать онлайн.

Пользователи хотят, чтобы их друг и помощник «2ГИС» был ближе и доступнее. Это выливается в естественную миграцию для большинства: громоздкий, фиксированный экран дома → окно браузера в ноутбуке → смартфон в руках. Смещается приоритет устройств. Но и мы не стоим на месте, продолжая расти и стремиться как можно быстрее и качественнее дать ответ на заданные пользователями вопросы.

Вопрос не совсем про дизайн: а сколько человек в iOS-команде разработки?

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

У «2ГИС» получился интересный подход к созданию собственного шрифта, причём это, кажется, был первый опыт отечественного цифрового продукта. Для чего пошли в эту сторону и стоит ли другим продуктам заниматься собственными шрифтами?

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

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

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

«2ГИС» давно поддерживает типографическую конференцию «Серебро Набора». Что это даёт компании?

Дмитрий Пиликов: Это всегда было волонтёрством, как и в случае с конференцией CodeFest. Поэтому не было потребности получить что-то взамен. Кажется, поддержка событий — это возможность наращивать профессионализм сообщества.

#Интерфейсы