Пользователям понравится: переделать интерфейс и сохранить популярность сервиса

История digital-агентства «Атвинта» о редизайне биржи рекламы в каналах Telegram: «Мы работали с этим проектом год назад. В день, когда сообщили о блокировке Telegram, завершили первый этап — проектирование».

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

Сейчас Buzz.im — это экосистема Telegram-ассоциированных проектов: биржа рекламы, поиск по открытым сообщениям в Telegram и бот для мониторинга.

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

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

Предыстория

Изначально идея проекта Buzz.im родилась из внутренней потребности компании-заказчика.

Мы активно размещали рекламу в Telegram для продвижения своих проектов осенью 2017 года. На согласование текстов и контроль размещения уходило много времени — в среднем минут 30, чтобы договориться про один пост. Хотелось автоматизировать размещение, и так появилась идея биржи.

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

Олеся Акименко,

руководитель проекта Buzz.im

Вот так выглядел интерфейс, когда заказчик обратился в «Атвинту».

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

Разобраться, как устроено

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

Анастасия Кириллова, менеджер проектов digital-агентства «Атвинта»

Редизайн интерфейса начинается с изучения потребностей пользователей и аудита существующего продукта.

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

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

Заказчик по внутренним аналитическим данным принимал решение: здесь можно отказаться от элемента интерфейса, а здесь лучше сохранить логику работы сервиса. Это помогло найти и упростить в интерфейсе «узкие места», где пользователь путается, что делать дальше.

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

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

Пример прототипов для сервиса Buzz.im

Что учитывать при проектировании

  1. Проведите внешний аудит. Внутренняя команда веб-продукта уже знает, как он работает, и может не замечать неудобств.
  2. Агрегируйте собственные ожидания от продукта. Расскажите проектировщикам, как на ваш взгляд всё должно работать.
  3. Изучите, как пользуются продуктом сейчас. В помощь Google Analytics и «Яндекс.Метрики».
  4. Узнайте мнение пользователей. Изучите отзывы о продукте, форумы, где общается ваша аудитория, пообщайтесь с людьми вживую.
  5. Промониторьте конкурентов. Возьмите на вооружение удобные решения, но не копируйте слепо всё.

Сделать красиво

После того как разобрались в бизнес-логике, переходим к визуальной составляющей.

Под редизайн в Buzz.im попали главный экран, публичные страницы сайта и личный кабинет пользователя. Заказчик хотел, чтобы на главный экран «цеплял» пользователя и объяснял, как пользоваться сервисом. Решение этой задачи — в основе концепции.

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

Олеся Акименко,

руководитель проекта Buzz.im

В первом варианте концепции экран разделили на две части: телефон с интерфейсом Telegram и текстовый блок. Текстовой информации предполагали минимум.

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

Ниже — эволюция главной страницы от прототипа до итоговой версии.

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

Это важно: по статистике пользователи с мобильными устройствами составляют 58% аудитории сервиса Buzz.im.

Что учитывать при разработке концепции

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

Сделать удобно

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

В бирже рекламы Buzz.im в макетах нужно было сделать цветовую дифференциацию, расставить акценты, избежать перегруза информацией.

Большая часть работы пользователей происходит в личном кабинете. В сервисе Buzz.im личный кабинет единый, а функции разделены на два блока: для рекламодателя и для владельца каналов.

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

Кабинет рекламодателя. Рекламодатель подбирает площадки для размещения, создаёт объявления, загружает изображения к публикациям, просматривает статистику, выгружает отчёты
Кабинет владельца каналов. Владелец Telegram-каналов добавляет новые каналы и описание к ним, чтобы рекламодателям легко было найти канал, получает деньги от рекламодателей через сервис

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

Вот так выглядят прототип и финальная реализация в дизайне функций, одинаковых для рекламодателя и владельца каналов.

Привлечь покупателей рекламы — первостепенная задача, именно на эту аудиторию подтягиваются владельцы каналов. Поэтому целевая кнопка «Купить рекламу» выделена заметнее.

Выбор канала сделали максимально интуитивным. Изначально на плашке с каналом оставили минимум информации, чтобы рекламодателю оперативно считать: что за канал, сколько подписчиков, сколько стоит. А подробная статистика открывалась по клику на карточку канала.

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

Самая ценная информация для принятия решения о размещении — статистика и описание. Мы зря убрали его на внутреннюю страницу.

Олеся Акименко, руководитель проекта Buzz.im

Работа с фидбеком пользователей позволяет развивать сервис. Ведь при проектировании агентство всегда представляет идеальные сценарии взаимодействия с системой абстрактного пользователя. Портрет такого пользователя создаётся на момент старта проекта. Со временем аудитория и её потребности могут меняться.

И ещё одно решение мы пересмотрели, ориентируясь на поведение пользователей. Изначально мы спроектировали возможность покупки рекламы сразу в нескольких каналах — оптом. А потом изменили решение и поставили кнопку «Купить» на каждой карточке. Это повысило конверсию в размещение на 28%.

Похоже, кнопка «Купить» никогда не бывает лишней.

Олеся Акименко, руководитель проекта Buzz.im

Что учитывать в финальном дизайне

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

Выпустить в мир

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

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

Анастасия Кириллова, менеджер проектов digital-агентства «Атвинта»

Если собрались обновить интерфейс своего продукта, обратите внимание на эти рекомендации

  1. Редизайн — это не только про внешний вид. Улучшайте не только то, как выглядит веб-продукт, но и его удобство с точки зрения UX. Тогда сопротивление новой картинке сменится лояльностью к юзабилити.
  2. Переделывайте на основе данных. Проанализируйте поведенческие характеристики, чтобы оценить, что реально нуждается в изменении, а что — работает хорошо.
  3. Изучите конкурентов. Учитывайте лучшие решения, но не копируйте слепо. Не всегда то, что выглядит хорошо или повторяется у нескольких конкурентов, хорошо работает. Без статистических данных нельзя быть уверенными на 100%, что вашим пользователям понравится «фича как у конкурентов».
  4. Тестируйте на тех, кто до этого не пользовался сервисом. Команде проекта может быть понятна и очевидна логика интерфейса, ведь они к ней привыкли. Как и постоянным пользователям. Но если цель — расширение аудитории, понадобится взгляд со стороны.
  5. Релиз — это не конец улучшений интерфейса. После выпуска продукта собирайте отзывы, продолжайте изучать поведенческие характеристики, проводите тестирование и вносите изменения.
0
13 комментариев
Написать комментарий...
Alexis Gordon

Всё правильно сделали, даешь минималистичный дизайн

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Смотря что на старте: если дизайна нет или он морально устарел, лучше переделать. Главное менять не только экстерьер, но и делать удобнее для пользователей.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Сергей Я

Мне норм, не судите только по себе.

Ответить
Развернуть ветку
Дарья Тарасова

Градиенты сейчас в моде

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
airbeard

Скука скучная

Ответить
Развернуть ветку
Альбина Миннуллина

Сразу вспоминаю свое негодование, когда какой-либо из сайтов или приложений меняет дизайн к которому привыкаешь годами и сидишь, пытаешься что-то заказать с криками: «ДА ЕМАЕ ГДЕ КНОПКА ТА, А ГДЕ ЭТА, ЧТО ДЕЛОТЬ»

Ответить
Развернуть ветку
Сергей Я

Это когда твоя девушка внезапно меняет имидж. Вроде норм, но и было норм.

Ответить
Развернуть ветку
Альберт Штерн

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
10 комментариев
Раскрывать всегда