Главное Свежее Вакансии Образование
Выбор редакции:
0 4 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Создание интерфейса Glampy: от идеи к реализации

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

Прежде всего, хочу отметить, что проект сейчас запущен в бета - режиме. Мы хотим протестировать некоторые идеи и настройки, устранить ошибки прежде, чем выпустить полноценный продукт. Именно поэтому мы выбрали CMS Joomla. В дальнейшем сервис будет переписан на PHP или Drupal с нуля, для чистоты кода и повышении безопасности сайта.

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

К примеру, можно посмотреть на главную страницу предыдущего проекта – ЯвГруппе.

b_58186de622c93.jpg

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

Менее 10% пользователей задерживали внимание на этих баннерах. Остальные просто пролистывали немного вниз (менее 20% нажимали на какой-либо блок), некоторые нажимали на «Мероприятия» вверху страницы, затем просматривали один-два блока и выходили с сайта, чтобы больше не вернуться.

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

В Glampy мы поставили ряд вопросов по главной странице:

- Что пользователь видит, когда попадает на главную страницу?

- Понятна ли ему идея сайта?

- Если понятна то, какие возможные действия он совершит?

- Что может сподвигнуть его совершить то или иное действие?

- Захочет ли он сам рассказать о каком-либо мероприятии в его городе?

В итоге, мы остановились на данном варианте главной страницы:

b_58186dabd103c.jpg

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

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

Рассмотрим подробнее блок мероприятия.

b_58186dbf3567a.jpg

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

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

Можно также привести пример блока мероприятия с предыдущего проекта.

b_58186e0e38b5d.jpg

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

Мы тогда провели небольшое исследование. Пошли в торговый центр, просили людей «полазать» по сайту (странице с мероприятиями) и спрашивали их мнение. Оказалось, что, вцелом, им нравилось, что показана только главная информация о мероприятии, но!.. Нажимать «Я Пойду» они не хотели, так как:

- Не знали, кто посетит данное мероприятие;

- Думали, что они будут обязаны пойти на него;

- Не знали, что думают другие о нем;

- Когда и сколько нужно будет платить за него;

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

Поэтому в Glampy мы решили убрать кнопку «Я Пойду» с блока мероприятия, а подробную информацию пользователь может получить, кликнув на название или картинку мероприятия.

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

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

Так теперь разберемся со страницей самого мероприятия.

Если в проекте ЯвГруппе мы хотели создать полноценную страницу встречи, где пользователь мог узнать любую интересующую информацию, то в Glampy мы оставили только самое необходимое: картинка, название, краткое описание, место и цена. По большому счету, это тот минимум, который позволяет пользователю на 60% решить пойти на данную встречу.

На данный момент, мы не решили нужно ли как-нибудь вводить блок с расширенной информацией, думаю, это станет виднее в ближайшем будущем.

b_58186e3ce3b48.jpg

b_58186e47d2677.jpg

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

Основываясь на тестах и исследованиях пользовательских действий на ЯвГруппе, мы пришли к выводу, что клиент, с вероятностью, более 80% нажмет на кнопку «Я Пойду», если увидит как минимум 15 других человек, идущих на данную встречу. Первым же отваживается нажать кнопку 1 из 200.

Отвечая на вопрос о том, как мы собираемся мотивировать участников нажимать кнопку, отвечаю: «Есть идеи. Пробуем. Как будут результаты, обязательно напишем».

Далее идут комментарии. Как не странно, сейчас достаточно много людей любят оставлять комментарии и в них же общаться. Это должно помочь людям познакомиться перед (или во время) мероприятия, и принять решение посетить его.

Чуть позже мы подключим модерацию в комментариях и уведомления на ответы.

Также хочу немного рассказать о мобильной версии сайта.

В проекте ЯвГруппе было большое количество страниц, расширений, блоков и медиа. В конечном итоге, для неподготовленных верстальщиков это оказалось адом сверстать и настроить весь сайт. То и дело возникали ошибки, а, исправляя одно, «летело» другое.

Не сложно догадаться, что количество мобильных пользователей у нас было не больше «0». Наверное, это странно слышать в 2016, не так ли?

В Glampy мы решили сделать отдельную, мобильную, версию сайта (с префиксом m.). Можно было просто прописать медиа запросами обычную версию, но мы пошли другим путем.

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

b_58186ef982dc8.jpg

Та же самая простота и минимум информации, появляющееся меню и кнопка «Добавить мероприятие».

Изменения коснулись и самой страницы мероприятия.

b_58187bcf0df8c.jpg

b_58187bf8051c7.jpg

Мы постарались построить сайт так, чтобы пользователь сразу понимал, куда он попал, что тут найдет, и какие кнопки за что отвечают.

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

Мы надеемся, что Glampy станем предельно простым и удобным способом делиться и узнавать о новых мероприятиях в городе.

Просьба не сильно ругать за формы и пустые пространства. Они еще в разработке. В ближайших планах доработать удобство форм добавления мероприятия и входа пользователя, добавление UI/UX элементов.

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

Спасибо за внимание! Будем рады, если сможете рассказать об одном мероприятии в вашем городе!

На данный момент мероприятия добавление только по городам: Москва, Санкт-Петербург, Ростов-на-Дону.

Ссылка для знакомства с сайтом - http://glampy.ru/

-1
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Михаил Великий
Ссылка то где, чтобы протестировать.
Ответить
Whaam!
Сервис сбора предложений от пользователей
Влад Заев
Забыли. Добавили в конце статьи. Спасибо.
Ответить
Никита Зорин
Извините, но это не дизайн. Зайдите на Uplabs и посмотрите на настоящий дизайн. Вот как тут не ругать за пустые пространства, когда при заходе на сайт глаза разбегаются (см. скриншот)?

>> Мы постарались построить сайт так, чтобы пользователь сразу понимал, куда он попал, что тут найдет, и какие кнопки за что отвечают.
Первые 30 секунд я не мог понять, что это за сайт - блог или какая-то соц. сеть. Какую он в себе ценность несет, к сожалению, так и не осознал.

Не ясно, какие проблемы могут возникнуть с подобным сайтом - работы на один день. Учитывая факт использования CMS, так вообще требуемое время в часах измеряется.

Совершенствуйтесь, потому что сейчас оценивать нечего - всё увиденное оставляет желать только лучшего.

Удачи.
Ответить
Whaam!
Сервис сбора предложений от пользователей
Влад Заев
Уффф, не все расширения экранов мы предусмотрели. Уже сообщили нам о многих ошибках. Исправляем. В начале следующей недели долны представить обновление. Спасибо за отзыв!
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.