Дима Пиликов
заместитель дизайнеров карточки
Новые карточки
Разбудите меня через 100 лет и спросите, чем занята продуктовая команда 2ГИС, и я отвечу: нашли способ сделать удобней карточки организаций.
Карточки — логичное продолжении сериала про редизайн:
навигатор,
главный экран,
поиск
и
поисковая выдача. И одна из самых сложных сущностей в интерфейсе продукта.
|
|
|
|
|
|
|
Эволюция карточек компаний в 2ГИС примерно с 2010 года
За целым ворохом изменений стоит с полсотни продуктовых гипотез и изменений, которые мы давно подмечали в пользовательских интервью, у конкурентов, к которым есть сильная привычка в столицах или которые давно лежали в бэклоге. Но всё это объединено общей идеей: сделать выбор компании приятнее и быстрее, учесть интересы и пользователей, и компаний. Локомотивом изменений были карточки из сценария выбора, где поесть, над которым мы работали последние полгода. Поехал он на рельсах нашей новой дизайн-системы.
Давайте разбираться, что происходит.
Давайте разбираться, что происходит.
|
|
|
|
|
|
|
Дизайн-система 2ГИС
Это инструменты интерфейса: кнопки, поля, списки, навигация и многое другое. И принципы их использования тоже.
Хорошо, когда такой инструмент есть у дизайнеров, но правильно, когда она разработана в виде библиотеки для разработки на разных платформах. Такой конструктор Лего для продуктов 2ГИС, который позволит унифицировать все дизайн-решения внутри и между продуктами и делать продукты быстрей, думать больше о сценарии, а не изобретать дизайн-решения каждый от экрана к экрану.
Хорошо, когда такой инструмент есть у дизайнеров, но правильно, когда она разработана в виде библиотеки для разработки на разных платформах. Такой конструктор Лего для продуктов 2ГИС, который позволит унифицировать все дизайн-решения внутри и между продуктами и делать продукты быстрей, думать больше о сценарии, а не изобретать дизайн-решения каждый от экрана к экрану.
Сейчас мы дорабатываем дизайн-систему итерациями: делаем редизайн какого-то сценария и дополняем библиотеку элементами, которые встречаются в этом сценарии. Так мы сделали обновлённый навигатор, главный экран, поиск, результаты поиска и теперь — карточку.
На этой же дизайн-системе мы сделали первые версии Отелло, раньше мы её обкатали на приложении Дело для iOS.
На этой же дизайн-системе мы сделали первые версии Отелло, раньше мы её обкатали на приложении Дело для iOS.
Продолжаем на новых задачах дополнять дизайн-систему элементами, разрабатывать её под разные мобильные платформы. Скоро хотим сделать её под онлайн-продукты 2ГИС.
Общее и важное про карточку
Для начала: мы знаем, что во многих запросах выбор компании у человека строится от фото, отзывов и особенно от мнений друзей. Поэтому фотографии переехали из нижней части карточки в шапку.
Это продолжение сценария из результатов поиска, где фото появились в каждой карточке. Рекламодатели смогут закрепить избранные фотографии в шапке.
Отдельно для рекламодателей мы немного изменили оформление брендирования: с одной стороны, каждая карточка осталась уникальной и узнаваемой. С другой стороны, поменяв цвет компании на градиент с цветом компании, мы смогли вытащить цвет брендирования в ¹⁄₃ карточки, и не получить очень разные карточки. Рекламная кнопка стала крупнее и заметнее в брендовом цвете компании.
Обновился блок «Друзья об этом месте», он теперь открывает экран, в котором собраны фото, отзывы и оценки друзей. Наслаждайтесь выбором по совету друзей.
Это продолжение сценария из результатов поиска, где фото появились в каждой карточке. Рекламодатели смогут закрепить избранные фотографии в шапке.
Отдельно для рекламодателей мы немного изменили оформление брендирования: с одной стороны, каждая карточка осталась уникальной и узнаваемой. С другой стороны, поменяв цвет компании на градиент с цветом компании, мы смогли вытащить цвет брендирования в ¹⁄₃ карточки, и не получить очень разные карточки. Рекламная кнопка стала крупнее и заметнее в брендовом цвете компании.
Обновился блок «Друзья об этом месте», он теперь открывает экран, в котором собраны фото, отзывы и оценки друзей. Наслаждайтесь выбором по совету друзей.
Таб Обзор
Это самые важные данные из всей карточки, выжатые и разложенные по блокам.
В блоке адреса мы даём больше информации, например, появилась явная кнопка Входов, при этом блок остался достаточно компактным.
А ещё пересобрали блок с информацией о компании, куда вошли важные атрибуты, награды и рубрики. Контакты стали заметней и увесистей, за ними приходит значимая доля пользователей. Если у компании есть несколько акций, мы показываем три, а не одну, как раньше.
Карточками компаний всё не закончилось. Так, например, в карточках зданий стал заметнее блок с недвижимостью, номерами квартир и парковками, привязанными к зданию.
В блоке адреса мы даём больше информации, например, появилась явная кнопка Входов, при этом блок остался достаточно компактным.
А ещё пересобрали блок с информацией о компании, куда вошли важные атрибуты, награды и рубрики. Контакты стали заметней и увесистей, за ними приходит значимая доля пользователей. Если у компании есть несколько акций, мы показываем три, а не одну, как раньше.
Карточками компаний всё не закончилось. Так, например, в карточках зданий стал заметнее блок с недвижимостью, номерами квартир и парковками, привязанными к зданию.
Двигайте слайдер, чтобы рассмотреть изменения на примере одной и той же карточки.
Слева — старая версия, справа — новая
Слева — старая версия, справа — новая
Табы Отзывы и Цены
Хорошо перетрясли всю структуру и дизайн отзывов: общую оценку, факты и сами отзывы. Но самое важное — отзывы друзей показываются в отдельном блоке, выше остальных.
А заодно сделали привлекательнее карточки товаров, особенно популярных.
А заодно сделали привлекательнее карточки товаров, особенно популярных.
И многое другое
Когда-то давно мы сделали таб Инфо в онлайн-версии, сейчас затянули его в мобильные продукты. Там мы собрали всю справочную информацию: все рубрики компании с атрибутами, награды и премии, которые получила компания.
Все другие карточки и табы тоже переделали под новую дизайн-систему, уже без таких существенных изменений.
Вместе с переездом на новую дизайн-систему мы получаем не только обновлённый внешний вид продукта, но и решаем проблемы, проверяем новые гипотезы в продукте.
К сожалению, изменения сейчас выходят только на Android, но как только мы вернёмся в App Store, быстро догоним все изменения и на iOS. Поэтому оставайтесь на линии, наблюдайте за изменениями, делитесь впечатлениями.
Все другие карточки и табы тоже переделали под новую дизайн-систему, уже без таких существенных изменений.
Вместе с переездом на новую дизайн-систему мы получаем не только обновлённый внешний вид продукта, но и решаем проблемы, проверяем новые гипотезы в продукте.
К сожалению, изменения сейчас выходят только на Android, но как только мы вернёмся в App Store, быстро догоним все изменения и на iOS. Поэтому оставайтесь на линии, наблюдайте за изменениями, делитесь впечатлениями.
Оцените статью:
Нажимая кнопку «Комментировать», вы принимаете условие
Лицензионного соглашения
и даёте ООО «ДубльГИС» согласие на обработку персональных данных на условиях и в целях, определённых «
Политикой конфиденциальности
».