Instagram'изация: эта соцсеть демонстрировала кратный рост популярности среди российских пользователей - количество авторов и контента в этой сети выросло за полтора года в 3 раза и продолжает расти. К тому же, по данным компании Aitarget (официальный реселлер Instagram и Facebook в РФ), по итогам 2018-го года Россия занимает 6 место в мире и 1 место в Европе по числу активных пользователей Instagram. С 2016 год по 2018 год аудитория Instagram увеличилась вдвое. Внедрение в соцсети бизнес-аккаунтов свидетельствует о все большем усложнении платформы.
Понятно, что при долгосрочном пользовании определенной соцсетью у пользователя возникают устойчивые ассоциации с цветовой схемой сайтов и мобильных приложений этой сети, с логотипом, с элементами интерфейса. Мы попытаемся превратить это в наше преимущество.
Нам не стоит перегружать внимание пользователями сложными конструкциями и изысканными визуальными приемами. Лучше выбрать простые, приятные глазу цвета. При выборе цветов мы будем опираться на исследования о воздействии цвета в веб-дизайне и на классическое пособие для многих поколений -- «Искусство цвета» Йоханнеса Иттена.
При выборе форм мы ориентировались на Instagram -- скругленные линии, простые иконки.
Наша целевая аудитория делится на два сегмента:
1. создатели онлайн марафонов («тренеры»)
2. люди, которые проходят онлайн марафоны (далее в работе «пользователи» / «участники»).
В первом случае потребитель платформы MGO -- это человек, обладающий профессиональным навыком в определенной сфере, желающий обучать этому навыку других людей и получать от этого прибыль. Сайт для создателей марафонов должен:
1. предусмотреть платный доступ к материалам - значит, сайт нужно подключить к системе электронных платежей. Дополнительное преимущество: допродажа записей тренинга - с хорошей скидкой до окончания онлайн-марафона.
2. учитывать требования SEO - оптимизации. Это нужно для создания органического трафика из поисковых систем.
3. быть подключен к основным инструментам аналитики. Таким, как Google analytics и/или Яндекс метрика.
4. содержать среди размещенных материалов все необходимые инструкции для пользователей и создателей марафонов.
5. иметь форму обращения в техподдержку и оператора, который сможет ответить в чате на любые вопросы создателей марафонов и участников.
Второй сегмент не требует какой-то особой атрибуции: принципиально он ничем не отличается от классического пользователя MOOC.
Прописывая вероятный пользовательский путь, мы раскладывали его мотивированные шаги так:
1. Пользователь соцсетей решает, что у него достаточно временных и денежных ресурсов для саморазвития;
2. Он видит предложение о старте марафона (к примеру) по осознанному питанию в соцсети;
3. Чтобы зарегистрироваться на марафон и получить доступ к учебным материалам, человек должен посетить сайт MGO.
Для создателей марафонов как ключевого сегмента ЦА на этапе запуска платформы на рынок мы разработали на этапе мозгового штурма максимально простой сториборд (см. Приложение №4). Уместно будет уточнить, что наш сториборд использовался как инструмент формирования общего видения ключевой проблемы клиента, а не для дальнейшей коммуникации с разработчиками.
1.2 Разработка концепции сервиса
архитектура интерфейс сайт
Как мы уточнили ранее, конкуренты в основном используют одностраничные структуры для демонстрации потенциальным пользователям своих преимуществ. Это рациональное решение. К тому же, очевидно, что некоторые элемента сайта подчинены исключительно целевому действию, call-to-action.
Все наши решения по дизайну принимались сообща, выводы основывались на опыте, полученном в рамках изучения курса «Коммуникационный дизайн» и «Истории дизайна» на «Открытом образовании».
Для композиции лендинга важны фирменный стиль, размеры элементов и их соотношение на странице, и «воздух». Проводя параллели с графическим дизайном и версткой полиграфии, мы отмечаем, что на странице той же книги текст не должен быть расположен встык с краями листа -- это превращает текст в так называемый «кирпич». В случае веб-дизайна тоже важно соблюдать это правило и располагать элементы свободно и читаемо в рамках браузера.
Наш фирменный стиль отличают мягкие формы: круглые кнопки, круглые элементы, а также яркая графика.
Когда мы говорим «графика», то подразумеваем фотографии, иллюстрации, иконки, скриншоты. Графика, помимо визуальной «поддержки» текста, размещенного на странице, помогает акцентировать внимание пользователя, структурировать содержание и отчасти задавать настроение.
Разработке сайта предшествовало создание User story map проекта (см. Приложение №5). Для наглядности был создан прототип сайта. Для его создания использовался сайт Marvelapp, который позволяет легко и быстро собрать подобного рода информационные продукты, и который тоже неоднократно использовался студентами нашей программы в рамках образовательных курсов программы.
Рис. 3. Прототип сайта MGO
Наша платформа тоже использует главную страницу и для информирования, и для рекламы, и для сбора контактных данных. А дизайн является инструментом, который выстраивает самые необходимые элементы на странице так, чтобы достичь задачи (первичная задача платформы -- собрать базу контактных данных и расширить круг участников -- как преподавателей, так и студентов).
Регистрация на платформе осуществляется через создание учетной записи (логин-пароль), с привязкой профиля к адресу электронной почты.
Для удобства пользователя нужно предусмотреть возможность зарегистрироваться на платформе через наиболее популярные соцсети: Vkontakte, Facebook, или через аккаунт Google. Подробнее со структурой главной страницы платформы можно ознакомиться в Приложении №6.
Логотип должен вмещать в себя суть проекта, главную идею и исключительность. В случае с логотипом проекта MGO нами было выбрано типографское решение этой задачи: мы выбрали утолщенное курсивное начертание шрифта Open Sans -- Extrabold Italic. Open Sans довольно популярен и входит в библиотеки стандартных стилей и шрифтов многих браузеров. Цвет логотипа #5270ff, задан межбуквенный интервал -90. Это довольно рискованный ход, так как шрифтовые дизайнеры довольно скурпулезно рассчитывают межбуквенное расстояние, но в нашем проекте логотип будет вставлен в сайт в формате png, так что это не скажется на качестве отображения элементов.
При разработке логотипа мы руководствовались современными трендами (стильные цвета, плоскостное решение, минимум лишних деталей) и собственным эстетическим вкусом.
Рис.4. Логотип сайта в разработке (финальная стадия)
В курсиве заложена некая стремительность, порыв -- именно то, что движет людьми при их активной деятельности. Вместе с тем шрифт рубленый и выглядит крепко, что подчеркивает стойкость «марафонцев». Энергию задает молния, соединяющая две гласные О в визуальном образе логотипа.
Рис.5. Логотип сайта (после трансформации названия) в формате .png
Логотип, визитную карточку проекта, мы размещаем в левом верхнем углу сайта. Это так называемый header, верхнее поле страницы. На других страницах сайта логотип также сохраняет свое положение, трансформируясь под размер других элементов, и выполняет роль кнопки «домой».
Рис. 6. Шапка сайта на одной из внутренних страниц
В отличие от логотипа, на сайте мы используем шрифт Rubik, округленное семейство шрифтов без засечек, созданное Филиппом Хьюбертом и Себастьяном Фишером (Hubert & Fischer). Rubik имеет пять разновидностей начертаний, что делает его удобным для различных визуальных решений.
Самую важную информацию -- в нашем случае это общие данные о платформе и форма регистрации на платформе в качестве условного «педагога» или «марафонца» -- мы размещаем на первом экране. Этот смысловой блок -- саморепрезентативный и играет роль рекламы, где мы перечисляем преимущества платформы для размещения онлайн-марафонов: возможность загружать фото и видео (образовательные материалы), общаться со всеми участниками марафона в одном чате, принимать оплату с банковских карт, сбор отзывов.
Для наглядности в правой стороне первого экрана мы размещаем простую анимацию со скриншотами внутреннего интерфейса платформы.
Преимущества, перечисленные ранее, можно разместить отдельными плашками. Но в таком случае лишь текст не сработает -- нужно добавить графические элементы (иллюстрации). Лучше всего для этой роли, по нашему общему мнению, подходят простые векторные пиктограммы. Они не содержат много деталей, вследствие чего их восприятие упрощено.
Одна из самых популярных и известных нам платформ с доступными для использования векторными иконками и пиктограммами -- сайт flaticon.
На следующем экране мы располагаем примеры успешных, уже запущенных курсов и онлайн-марафонов -- это формирует доверие, так как свидетельствует о том, что платформа соответствует заявленным задачам.
У программ для этой страницы должны иметься специальные тематические обложки, тип занятий, полное название, стоимость.
Для усиления эффекта и достижения конверсии можно тут же разместить активную кнопку «Создать свой марафон».
На последнем экране мы разместили короткий блок «Вопросы и ответы». Они освещают особенности платформы и наши преимущества (к примеру, бесплатный хостинг обучающих материалов).
В так называемом «подвале» сайта уместно дать юридическую информацию и контактные данные, страницы проекта в соцсетях.
Рис. 7. Подвал сайта (постоянный элемент)
Для ускорения связи с администраторами можно разместить окошко чата. Этот элемент вызывает споры с точки зрения восприятия -- любые всплывающие элементы требуют особого внимания. Но так как наш проект только собирается внедряться на рынок образовательных платформ, возможность общения с поддержкой сайта напрямую -- хорошая возможность собрать обратную связь в кратчайшие сроки и устранить любые возникшие проблемы.
Рис. 8. Окно связи с администратором сайта
Мы перечислили все элементы главной страницы. Теперь можно перейти к интерфейсу других страниц.
Что должно быть доступно рядовому пользователю (участнику марафона)? Как минимум кабинет профиля с указанными ранее личными данными, и возможность выйти из него.
Также мы сделали реальным и свободным переход из статуса участника марафона в статус создателя марафона. Это позволяет пользователям побывать «по обе стороны».
Суммируя перечисленное, мы получили такие необходимые элементы личного кабинета: профиль, социальные сети, баланс, черный список, кнопка «Стань тренером» и выход из учетной записи.
Рис. 9. Фрагмент прототипа интерфейса платформы для обычного пользователя (личный кабинет)
Более важно, конечно, рассмотреть внимательнее пользовательский интерфейс, связанный непосредственно с марафонами.
Здесь мы не изобретаем ничего нового, ориентируемся на агрегаторы онлайн-курсов: размещаем все действующие на данный момент на платформе марафоны.
Рис. 10. Фрагмент интерфейса платформы для обычного пользователя (выбор курса)
Когда мы уже записались на марафон, его страница отображается на вкладке «Курсы и марафоны», статус записи актуальный.
Рис. 11. Фрагмент интерфейса платформы для обычного пользователя (выбор курса)
Когда мы уже записались на марафон, его страница отображается на вкладке «Курсы и марафоны», статус записи актуальный. Марафон сделан в рамках модульной верстки. Мы видим обложку курса, профиль тренера (создателя курса), в левой части экрана у нас меню-структура марафона и его учебных частей. В нижней половине экрана перечислены уроки и разделы курса.
Рис. 12. Фрагмент интерфейса платформы для обычного пользователя (главная страница марафона)
Вся необходимая информация перед глазами. Все учебные материалы доступны. В нашей проектной группе еще ведутся дискуссии о преимуществах такой верстки материалов, которую вы видите на рисунке 12. Подтвердить или опровергнуть гипотезу об удобстве такого размещения основной и сопутствующей информации о марафоне поможет UX-исследование, которое мы проведем и опишем подробнее в главе 2.
Естественно, что интерфейс платформы для создателя марафонов предстает в более сложной форме. Сначала мы просим добавить информацию себе как о тренере, указать город проживания, место работы и рассказать о себе.
Рис. 13. Фрагмент интерфейса платформы для создателя марафонов (страница перехода из статуса «участник» в статус «тренер»)
Далее мы предлагаем человеку создать онлайн марафон. Что требуется сообщить системе на этом шаге? Название марафона, срок его проведения, стоимость для пользователя, нужен ли марафону чат и возможность дополнительного набора участников во время марафона.
Рис. 14. Фрагмент интерфейса платформы для создателя марафонов (страница создания марафона)
На следующем шаге мы оформляем то, что будет внешней страницей нашего марафона, добавляем уроки, разделы, опросы, фото и видео. Есть редактор общей структуры, и редактор каждого занятия в частности.
Рис. 15. Фрагмент интерфейса платформы для создателя марафонов (внутренняя страница создания марафона)