Создание интерфейса Glampy: от идеи к реализации
Прежде всего, хочу отметить, что проект сейчас запущен в бета - режиме. Мы хотим протестировать некоторые идеи и настройки, устранить ошибки прежде, чем выпустить полноценный продукт. Именно поэтому мы выбрали CMS Joomla. В дальнейшем сервис будет переписан на PHP или Drupal с нуля, для чистоты кода и повышении безопасности сайта.
Итак, основной идеей создания интерфейса сайта была его простота и удобство мобильной версии. Важно было, чтобы пользователь знал, зачем он идет на этот сайт, что он увидит там и какие действие может совершить. При этом не должно быть информационного мусора мероприятия, чтобы пользователь был мотивирован к действию (нажатию той или иной кнопки).
К примеру, можно посмотреть на главную страницу предыдущего проекта – ЯвГруппе.
Тогда мы хотели рассказать пользователям, что это за сайт, как им пользоваться и что они могут за это получить. В итоге оказалось то, что мы не только не помогли клиентам узнать сайт, но и оттолкнули их.
Менее 10% пользователей задерживали внимание на этих баннерах. Остальные просто пролистывали немного вниз (менее 20% нажимали на какой-либо блок), некоторые нажимали на «Мероприятия» вверху страницы, затем просматривали один-два блока и выходили с сайта, чтобы больше не вернуться.
Мы пробовали несколько вариантов главной страницы, но итог практически всегда оставался таким же. Если пользователь изначально не понимает, зачем он пришел на сайт и что тут делать, он уже никогда не вернется.
В Glampy мы поставили ряд вопросов по главной странице:
- Что пользователь видит, когда попадает на главную страницу?
- Понятна ли ему идея сайта?
- Если понятна то, какие возможные действия он совершит?
- Что может сподвигнуть его совершить то или иное действие?
- Захочет ли он сам рассказать о каком-либо мероприятии в его городе?
В итоге, мы остановились на данном варианте главной страницы:
Пользователь открыл сайт, видит список мероприятий по дням, нет ничего кроме мероприятия, ни что не отвлекает внимание. Справа фильтр, можно найти что-то подходящее в своем городе в интересующей категории. И добавить новое мероприятие. Все.
Тем не менее, узнать насколько данная страница будет эффективна, мы узнаем наверняка после первых месяцев работы сайта. Если будет интересно, мы напишем статью с метриками и вебвизором через некоторое время.
Рассмотрим подробнее блок мероприятия.
Мы постарались оставить только необходимый минимум информации, чтобы пользователь не уставал читать и мог просмотреть как можно больше таких блоков.
В следующей версии блока, мы уже придумали как можно его еще больше упростить, сделать интерактивным и красивым. Но об этом в другой раз.
Можно также привести пример блока мероприятия с предыдущего проекта.
Сказать честно, дизайн этого блока нам нравится больше, но эффективность его была не достаточна.
Мы тогда провели небольшое исследование. Пошли в торговый центр, просили людей «полазать» по сайту (странице с мероприятиями) и спрашивали их мнение. Оказалось, что, вцелом, им нравилось, что показана только главная информация о мероприятии, но!.. Нажимать «Я Пойду» они не хотели, так как:
- Не знали, кто посетит данное мероприятие;
- Думали, что они будут обязаны пойти на него;
- Не знали, что думают другие о нем;
- Когда и сколько нужно будет платить за него;
А кнопку «Подробнее» они не хотели нажимать, так как «…это займет время…» и «…мы спешим …». Обычная экономия времени и низкая заинтересованность самим сервисом.
Поэтому в Glampy мы решили убрать кнопку «Я Пойду» с блока мероприятия, а подробную информацию пользователь может получить, кликнув на название или картинку мероприятия.
А чтобы немного подтолкнуть его к просмотру страницы мероприятия, мы создали рейтинг встречи и вывели количество комментариев.
Мы также хотим реализовать всплывающие подсказки по ходу использование сервиса, чтобы убрать некоторые моменты «напряжения» пользователя. Они появятся совсем скоро.
Так теперь разберемся со страницей самого мероприятия.
Если в проекте ЯвГруппе мы хотели создать полноценную страницу встречи, где пользователь мог узнать любую интересующую информацию, то в Glampy мы оставили только самое необходимое: картинка, название, краткое описание, место и цена. По большому счету, это тот минимум, который позволяет пользователю на 60% решить пойти на данную встречу.
На данный момент, мы не решили нужно ли как-нибудь вводить блок с расширенной информацией, думаю, это станет виднее в ближайшем будущем.
По идее, после того как пользователь кликает на мероприятие на главной странице, он уже знает немного о нем (как минимум, название и цена). Поэтому он должен остановить свое внимание на кратком описании и последующих блоках.
Основываясь на тестах и исследованиях пользовательских действий на ЯвГруппе, мы пришли к выводу, что клиент, с вероятностью, более 80% нажмет на кнопку «Я Пойду», если увидит как минимум 15 других человек, идущих на данную встречу. Первым же отваживается нажать кнопку 1 из 200.
Отвечая на вопрос о том, как мы собираемся мотивировать участников нажимать кнопку, отвечаю: «Есть идеи. Пробуем. Как будут результаты, обязательно напишем».
Далее идут комментарии. Как не странно, сейчас достаточно много людей любят оставлять комментарии и в них же общаться. Это должно помочь людям познакомиться перед (или во время) мероприятия, и принять решение посетить его.
Чуть позже мы подключим модерацию в комментариях и уведомления на ответы.
Также хочу немного рассказать о мобильной версии сайта.
В проекте ЯвГруппе было большое количество страниц, расширений, блоков и медиа. В конечном итоге, для неподготовленных верстальщиков это оказалось адом сверстать и настроить весь сайт. То и дело возникали ошибки, а, исправляя одно, «летело» другое.
Не сложно догадаться, что количество мобильных пользователей у нас было не больше «0». Наверное, это странно слышать в 2016, не так ли?
В Glampy мы решили сделать отдельную, мобильную, версию сайта (с префиксом m.). Можно было просто прописать медиа запросами обычную версию, но мы пошли другим путем.
У нас появилась идея сделать мобильную версию сайта под приложение. Насколько это нам удалось в бета-версии, вы сами можете судить.
Та же самая простота и минимум информации, появляющееся меню и кнопка «Добавить мероприятие».
Изменения коснулись и самой страницы мероприятия.
Мы постарались построить сайт так, чтобы пользователь сразу понимал, куда он попал, что тут найдет, и какие кнопки за что отвечают.
Есть еще несколько идей, как помочь пользователям освоиться на сайте, и постепенно мы будем реализовывать их.
Мы надеемся, что Glampy станем предельно простым и удобным способом делиться и узнавать о новых мероприятиях в городе.
Просьба не сильно ругать за формы и пустые пространства. Они еще в разработке. В ближайших планах доработать удобство форм добавления мероприятия и входа пользователя, добавление UI/UX элементов.
Этот месяц мы потратим на допиливание дизайна и функционала. Постараемся держать читателей в курсе разработки еженедельно.
Спасибо за внимание! Будем рады, если сможете рассказать об одном мероприятии в вашем городе!
На данный момент мероприятия добавление только по городам: Москва, Санкт-Петербург, Ростов-на-Дону.
Ссылка для знакомства с сайтом - http://glampy.ru/