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

История 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. Релиз — это не конец улучшений интерфейса. После выпуска продукта собирайте отзывы, продолжайте изучать поведенческие характеристики, проводите тестирование и вносите изменения.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Digital-агентство Атвинта", "author_type": "self", "tags": [], "comments": 13, "likes": 63, "favorites": 118, "is_advertisement": false, "subsite_label": "design", "id": 64928, "is_wide": true, "is_ugc": true, "date": "Wed, 24 Apr 2019 12:19:08 +0300", "is_special": false }
0
{ "id": 64928, "author_id": 108381, "diff_limit": 1000, "urls": {"diff":"\/comments\/64928\/get","add":"\/comments\/64928\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/64928"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
13 комментариев
Популярные
По порядку
Написать комментарий...
3

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

Ответить
0

В чем минимализм?

Ответить
2

А не надо ничего кардинально переделывать, кому-то по-любому не понравится.

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

Ответить
0

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

Ответить
0

Зависит от посещаемости. Если она высокая и не падает, значит клиентов устраивает устаревший дизайн.

Яркий пример - кому нравится редизайн гугл-почты? Никому. А дизайну уже более 10 лет

Ответить
0

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

Ответить
1

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

Ответить
1

Дизайн зафакапили

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

Забавно, как легко перевести тему с дизайна биржи рекламы на политику, власть и бунты) "Закон" Годвина в нашей стране работает скорее с Путиным, чем с усатым сами знаете кем.

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }