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

Размещено на http://www.allbest.ru/

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



Введение

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

Дизайн в текущих условиях становится новым, общим для всех языком коммуникации. Пиктограммы унифицируют понятия окружающего мира. Система дизайна работает с образами виртуального и предметного мира, задействована в проектировании, создании, трансляции вербальной и визуальной информации, и именно она должна сыграть одну из важных ролей в оптимизации пути развития мультимедийной культуры. При этом, как отмечает А. А. Мещанинов, «цивилизационные подвижки <...> выдвигают на первый план задачи развития культурных качеств коммуникационного интерфейса и дизайна мультимедиа». Дизайн интерфейса, по мнению автора, это «область информационного контакта человека с искусственным окружением, зона диалога».

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



Рис. 1. Фрагмент из презентации доклада «Что разработчикам интерфейсов нужно знать о дизайне» Константина Горского (2012 г.)

Тема моего исследования: разработка пользовательского интерфейса платформы для размещения и прохождения онлайн марафонов.

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

Объект исследования: платформа для создания и прохождения онлайн-марафонов MGO, проектирование сайта и разработка его дизайна, а также пользовательский опыт.

Целевая аудитория проекта: активные пользователи социальных сетей (в первую очередь Instagram), которые создают и запускают собственные онлайн-марафоны для своей аудитории, а также участники этих марафонов.

Предмет данного исследования: разработка интерфейса платформы для создания и прохождения онлайн-марафонов MGO

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

Одной из важнейших книг по теме создания интерфейсов является книга Голдена Кришны «Хороший интерфейс -- невидимый интерфейс».

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

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

Дизайн (от англ. design - замысел, проект, чертеж, рисунок) - термин, обозначающий различные виды проектировочной деятельности, имеющей целью формирование эстетических и функциональ­ных качеств предметной среды.

Веб-дизайн / web-дизайн - проектирование интерактивных web проектов, в задачи которых входит разработка пользовательских веб-интерфейсов для сайтов или веб-приложений.

Юзабилити - или пригодность использования, это качественная характеристика системы, при которой пользователь в состоянии применить продукцию для достижения установленных целей. Качественный показатель юзабилити оценивается по 5 критериям:

o Легкость освоения;

o Эффективность (как быстро пользователь ориентирется на сайте и совершает необходимые действия);

o Запоминаемость;

o Ошибки;

o Общая удовлетворенность от использования цифрового продукта.

Пользователь (от англ. user) - человек, взаимодействующий с цифровым продуктом.

Актуальность нашего исследования обусловлена высокой востребованностью дизайнерских решений для создания интернет-сервисов и образовательных продуктов. Сайты и приложения для онлайн-образования имеют большой потенциал. В 2016 году объем российского рынка онлайн-образования и образовательных технологий составлял 10,5 млрд рублей, в то время как объем мирового рынка оценивался в 107 млрд долларов. Совместный доклад East-West Digital News в партнерстве с Фондом общественного мнения, изданием Russia Beyond The Headlines, digital-платформой VB Profiles, изданием Rusbase, «Нетологией Групп», ФРИИ, Высшей школой экономики и агентством Сomscore утверждает, что мировой рынок демонстрирует ежегодный рост, а проникновение онлайн-образования составит 5,5% к 2020 году.

Общий тренд на цифровизацию образовательного процесса затронул и другие области. Частью тренда онлайн-образования является развитие сферы онлайн-марафонов.

Надо отметить, что для некоторых форматов уже есть востребованные сервисы. К примеру, заточенные на проведение вебинаров: eTutorium, Webinar.

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

Мы долго и пристально наблюдали за эволюцией популярной соцсети Instagram, и можно с уверенностью сказать, что марафоны -- одна из важнейших тенденций, которую популяризируют многие популярные личности на платформе (так называемые инфлюенсеры, лидеры мнений). Уточним, что подписчиков в соцсети у этого человека должно быть больше 2000, потому что это -- некая критическая масса, необходимая тренеру для привлечения большого общественного внимания к марафону.

Внимательно изучив платформу и разных виды пользовательской активности на ней, мы пришли к выводу, что марафоны организованы не самым удобным образом: для их проведения создаются отдельные закрытые аккаунты в Instagram, оплата идет напрямую на карту тренеру (нередко в обход действующей в РФ системы налогообложения), а видео и PDF-файлы выкладываются на облачные хранилища (что делает их доступными для изменения, копирования и распространения третьим лицам). При использовании же платформы MGO у потребителя примерно втрое сокращается количество шагов до цели: запуска своего массового марафона.

Изначально мы с Екатериной участвовали в разработке другого проекта: сервиса, который бы органично интегрировал онлайн-курсы в образовательную систему НИУ ВШЭ. Предварительный питч проекта был проведен в рамках зачетного проекта -- хакатона курса «Продюсирование цифровых проектов». Проект был в целом успешно защищен проектной группой в конце первого года обучения. Чуть позже к нам присоединилась одногруппница Анастасия Дзебисова.

Впоследствии, при разработке темы и более детальной проработки проекта сервиса «ОК для ВШЭ», после проведенного глубинного интервью и составления мной подробной User Story Map выяснилось, что привлеченная для воплощения проекта группа разработчиков не сможет уложиться в отведенные на реализацию проекта сроки. Причин этому было несколько: мы запроектировали многоуровневую, сложную систему, которая требовала к тому же сбора и анализа данных с нескольких -- открытых и закрытых -- источников данных. В тот момент к нам пришло решение - сосредоточиться на частном проекте Екатерины, над идеей которого она какое-то время работала самостоятельно и параллельно -- сайта для проведения онлайн-марафонов.



Рис. 2. User Story Map для проекта «ОК для ВШЭ»

архитектура интерфейс сайт

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

Как распределилась нагрузка в проектной группе: Екатерина Сырку взяла на себя контентную часть проекта, Анастасия Дзебисова занялась созданием концепции платформы и управлением разработки программной части сайта, а темой моего исследования является проектирование интерфейса пользователя и оценка удобства использования платформы MGO. В своих работах мы попытаемся проанализировать базовые принципы и лучшие практики маркетинга, дизайна и контент-стратегий с целью экстраполировать этот опыт на разработку нашей платформы.

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

Дизайн (от англ. design - замысел, проект, чертеж, рисунок) - термин, обозначающий различные виды проектировочной деятельности, имеющей целью формирование эстетических и функциональ­ных качеств предметной среды.

Веб-дизайн / web-дизайн - проектирование интерактивных web проектов, в задачи которых входит разработка пользовательских веб-интерфейсов для сайтов или веб-приложений.

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

Юзабилити - это качественный показатель удобства использования сайта, его качественный показатель, который оценивается по 5 критериям:

o Легкость освоения;

o Эффективность (как быстро пользователь ориентирется на сайте и совершает необходимые действия);

o Запоминаемость;

o Ошибки;

o Общая удовлетворенность от использования цифрового продукта.

В наше время почти невозможно не проводить «зондирование почвы» на предмет конкурентных наработок в желаемой области. Не заняты обычно только очень узкие ниши. В бизнесе есть ключевое понятие «уникальное торговое предложение». Это выдающаяся характеристика продукта или бренда, на которой можно выстроить позиционирование и рекламную кампанию; обычно УТП используется для дифференциации. Так вот, уникальное торговое предложение как раз помогает отделить свой продукт от продуктов конкурентов, выстроить вокруг него иную коммуникационную среду, придать ему иную ценность.

Именно этой задаче будут подчинены наши действия по построению платформы для онлайн-курсов и марафоном MGO (Marathon GO!).



1. Дизайн сайта: методология разработки

1.1 Основы и актуальные тренды веб-дизайна

Разработке платформы способствовало изучение конкурентной среды. Подробнее о маркетинговом позиционировании вы сможете прочитать в работе участницы моей проектной группы Дзебисовой Анастасии «Создание концепции и управление разработкой программной части платформы MGO (платформы для размещения и прохождения онлайн марафонов)».

Мы не нашли абсолютно идентичных нашему проектов на российском рынке, и считаем, что ближайшие наши конкуренты - это платформы для создания и размещения онлайн-курсов и вебинаров. При этом мы не рассматриваем самые большие и популярные площадки, такие как Coursera, «Открытое образование», edX. Итак, наши ближайшие по содержанию и позиционированию конкуренты:

1) GetCourse

Платформа для продажи и проведения обучения -- для тренеров, преподавателей, инфо-бизнесменов. В базе представлены семинары, тренинги, курсы, очные и онлайн-занятия (см. Приложение №3).

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

2) Isping

Нацелен больше на корпоративное онлайн-обучение. Платишь за создание онлайн-курса, но не зарабатываешь. «Запустите учебный портал и прокачивайте сотрудников» -- их основной посыл к аудитории (см. Приложение №2).

После анализа конкурентной среды мы обратили внимание, что эти сайты в основном придерживаются стратегии представления всей ключевой информации на одном экране. В эпоху соцсетей, действительно, важно привлечь внимание публики, сразу донести всю ключевую информации и поймать на крючок, чтобы пользователь вернулся на сайт. Для этого используется понятие призыва к действию, или call-to-action. Чаще всего целевое действие - это оставление пользователем своей контактной информации: электронной почты, ФИО и/или номера телефона. Впоследствии для возвращения человека на сайт используются контентные стратегии, рассылки с просьбой подтверждения регистрации, или спецпредложения, письма корпоративного блога.

Одностраничные сайты имеют более высокие конверсионные показатели. К тому же, мы учитываем тот факт, что наша целевая аудитория активно пользуется Instagram. Значит, она привыкла к одному экрану и процессу постоянного скролла ленты. Она определенно относится к так называемым визуалам и любит красочные фотографии.

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. Фрагмент интерфейса платформы для создателя марафонов (внутренняя страница создания марафона)

На данном этапе жизни продукта согласована и внедрена такая структура контентного наполнения занятия: описание (тексты), фотографии, видео, файлы, опросы.

Проект запущен в тестовом режиме - и сейчас он как раз пройдет апробацию всех наших дизайнерских решений. Жизнеспособность проекта не вызывает сомнений, осталось сделать особенный и востребованный на рынке продукт.



2. Функционирование сайта MGO и опыт пользователей

2.1 UX-исследование платформы MGO

Надо понимать, что User Experience Design тождественен по своей сути понятию User Centric Design. И все действия, совершаемые с целью улучшить UX-показатели сайта, должны органично исходить из предпосылок-вопросов:

1. Кто наш пользователь?

2. Какие цели он преследует?

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

Человеко-ориентированный подход должен следовать таким принципам:

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

2. пользователи вовлечены в проектирование и разработку;

3. улучшение проекта должно быть выполнено через человеко-ориентированную оценку;

4. совершенствование проекта должно быть итеративным;

5. проект должен учитывать пользовательский опыт;

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



Рис. 16. Фрагмент презентации одного из спикеров курса «Продюсирование цифровых проектов»

Сайт собран и запущен в работу, теперь надо проверить его эффективность.  Мы проведем UX-исследование. Напомню, что у нашего проекта две ключевые целевые аудитории, которых можно обозначить как «эсоздатели онлайн-марафонов» и «участники онлайн-марафонов». Выборка для UX-тестирования составлена на основе реальных или предполагаемых пользователей обоих сегментов.

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

o частотные (в нашем случае, создание своего марафона или регистрация на него);

o влияющие на бизнес-цели (оплата участия в марафоне);

o связанные с обновлением (внедрение новой функциональности или редизайн).

Есть еще ключевое понятие для UX-тестирования -- гипотеза. То, во что трансформируются известные до тестирования вопросы и проблемы команды.

В работе моей коллеги Екатерины Сырку целевая аудитория, которую мы условно называем «тренеры», обозначена по методу Personas. Это жители РФ и СНГ, хорошо разбирающиеся в соцсетях и ведущие активную образовательную деятельность. В их распоряжении есть смартфон и стационарный компьютер / ноутбук, с этих устройств они регулярно выходят в интернет. Возраст тренеров от 25 до 35, они стремятся к самореализации, и любят обучать чему-то новому других.

В «Руководстве по юзабили-тестированиям» от Mail.Ru Group подробно описана механика проведения тестирования, которой мы следовали в своей работе. Основными инструментами нашего тестированы были выбраны наблюдение и think aloud.

Перед началом работы мы формулируем гипотезы тестирования.

Гипотеза 1, главная: У продукта MGO есть проблемы с внутренней навигацией, но так как он был запущен недавно, то еще не набрал критическую массу пользователей, чтобы выявить недостатки интерфейса.

Гипотеза будет считаться подтвержденной, если даже у 40% испытуемых возникнут проблемы на смысловом уровне и они выявят минимум 3 ошибки платформы.

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

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

Гипотеза 3: В основном пользовательском меню (после записи на марафон) слишком много информации расположено на одной странице - в три столбца, а экранное пространство использовано не эргономично, вследствие чего прохождение марафонов затруднено.

Подтвержденной гипотеза будет считаться, если 50% респондентов выскажутся против текущей веб-верстки информации.

Гипотеза 4: Переход из состояния «Я -- ученик» в «Я-- тренер» недостаточно атрибутирован. Если любой пользователь без верификации может выступать тренером, то его экспертность ставится под вопрос и кажется недостоверной информацией.

Гипотеза будет подтверждена, если минимум 10% озвучат подобного рода проблему.

Гипотеза 5: На главной странице MGO дублируется информация.

Подтвержденной гипотеза будет считаться в случае согласия 50% респондентов на данное утверждение.

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

Субъективный взгляд на UX-тестирования состоит в том, что даже при небольшой выборке респондентов получается выявить 80% критичных мест в интерфейсе, так как они будут наиболее частотными проблемами у части аудитории.

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

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

1. Показываем макет главной страницы и проводим короткий опрос:

o Опишите увиденную страницу своим словами. Какие элементы где располагались?

o Как вы думаете, на кого рассчитана эта платформа?

o Какая цветовая гамма у сайта?

o Какая ключевая мысль? Запомнилось ли что-то особенное?

o Что произойдет при нажатии на эту кнопку?

2. Просим выполнить определенный пользовательский сценарий (войти в пользовательский кабинет, заполнить информацию о себе, записаться на марафон / создать марафон, оформить основную информацию о нем).

Тестировалась исключительно веб-версия сайта. Более подробно анкета и скрипт тестирования были описаны в документе «Пользовательский сценарий».

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

Также мы фиксировали все их действия на диктофон (так как методика think aloud, мысли вслух, подразумевает, что пользователь озвучивает как свои действия, так и комментирует все видимое им и происходящее на экране) и на камеру (ракурс из-за плеча, чтобы была видна мышка и экран ноутбука целиком).

Рис. 17. Фрагмент видеозаписи процесса UX-тестирования



Для того, чтобы получить максимально приближенную к реальному пользованию ситуацию, мы предлагали для ознакомления уже существующий (и проводившийся ранее) на платформе марафон «Хочешь красивое тело? Сделай его!» авторской методики Екатерины Сырку.

Основные выводы, которые мы сформулировали после UX-тестирования:

1. 90% респондентов при изучении главной страницы стремились получить максимум информации от первого экрана и с неохотой спускались ниже.

2. Целевая аудитория не считывается сразу - только после внимательного, последовательного изучения страницы. Сайт ассоциируется с образовательными проектами, а также краудфандинговыми платформами и сайтами-конструкторами.

3. Половину людей из выборки коробит обращение на «ты».

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

5. Большая часть тестировщиков высказалась в пользу большей геймификации образовательного процесса (внедрение в образовательный процесс игровых механик).

6. Из общего смыслового поля выпадали личный профиль пользователя и кнопки «вперед-назад», размещенные внутри учебных единиц марафона.

7. Абсолютное большинство хочет видеть общий банк онлайн-курсов и марафонов на платформе.

Нельзя игнорировать и метрики - у пользователей были затруднения (наиболее сложные случаи):

o с поиском входа на платформу (когда уже есть логин-пароль) - 15, 30 секунд;

o с созданием урока - 10 секунд на поиск соответствующей кнопки;

o с кнопкой удаления урока/раздела - 16 секунд .

Мы считаем эти моменты критичными. Только у 85% получилось правильно выбрать кнопку входа (не регистрации).

Нам кажется, что освоение сервиса должно быть органичным, поэтому каждое затруднение было тщательно зафиксировано и проанализировано.

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

Гипотеза 1 подтвердилась, гипотеза 3 требует реализации нового дизайна интерфейса и проведения в дальнейшем a/b тестирования (было высказано несколько важных предположений по трансформации главной страницы марафонов), а гипотезы 2, 4, 5 опровергнуты по причине недостаточной массы отзывов.

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

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

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

o APP в названии сайта напрямую ассоциируется с мобильным приложением.

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

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

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

o Участники марафона хотят контактировать с тренером напрямую.

o Несмотря на общий характер прохождения марафона, пользователю важно, чтобы учли его индивидуальные особенности (к примеру, прописали в меню фитнес-марафона еду для вегетарианцев).

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

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

2.2 Рекомендации по дальнейшему развитию платформы

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

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

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

Было выработано 29 рекомендаций по улучшению платформы, все они были помещены на рабочей доске для программистов в Trello. Впоследствии мы распределили задачи в порядке критичности ошибок и недочетов, и они были приняты в работу всей командой.

Рис. 18. Фрагмент рабочей доски по проекту в Trello

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

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

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

Пользователи активно советовали, какие содержательные и визуальные решения способствовали бы их субъективному «комфорту» нахождения на сайте MOGOO.

К примеру, участница теста Алиса предложила: «Допустим, у нас есть задание на день, «выпить 8 стаканов воды» - хотелось бы зайти на сайт и кликнуть просто на стакан воды, а он пусть поменяет цвет - и будет отметочка, что я выпила его».

Рис. 19. Условная реализация игровой механики



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

Некоторые пользователи больше внимания обращали на тексты, другие - на визуальную составляющую платформы.

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

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

Рис. 20. Условное отображение замечаний в качестве рекомендаций для редизайна

В Приложении №7 приведена таблица участников нашего UX-тестирования, с более подробным отчетом наша команда могла ознакомиться в режиме реального времени в документе Google Docs «Пользовательский сценарий». Остальные замечания будут проработаны командой в обычном режиме, решения по изменению интерфейсов будут приняты в процессе обсуждения и мозгового штурма.



Заключение

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

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

Нашей целью в рамках проекта было разработать интерфейс платформы и провести UX исследование.

Для создания платформы для создания и прохождения онлайн-марафонов были использованы такие методы, как:

o Прототипирование

o User Story Map

o Storyboard

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

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

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

Для проверки дизайнерских и продуктовых гипотез было проведено UX-тестирование. Были использованы современные, актуальные механики.

За время разработки темы мы достигли таких результатов:

o создали прототипы пользовательских интерфейсов.

o провели юзабилити-оценку платформы.

Благодаря UX-тестированию мы выявили проблемы на смысловом, визуальном, контентном уровне и выработали около 30 рекомендаций по улучшению сервиса. Это поможет дальнейшему развитию платформы. Мы удовлетворены выбранным методом оценки сервиса, потому что он позволил выявить как очевидные, так и неочевидные проблемы, набравшиеся в ходе роста платформы. Очевидно, что пока фокус внимания и упор сделан на первую целевую аудиторию, тренеров, коучей и экспертов, другие пользователи видят некоторые баги, связанные с недостаточной проработанностью контента и недостаточным разделением статуса «ученик» от статуса «тренер». Вследствие проведенного исследования и обобщения всех пользовательских замечаний наша командная группа выработала стратегию дальнейшего развития, которая будет описана подробнее в следующем пункте.

Перед началом UX-тестирования мы выдвигали 5 гипотез. Из них подтвердилась одна (в ходе наблюдения каждый пользователь нашел несколько недочетов и выдвинул свои предложения по оптимизации платформы, ее структуры или оформления), другая требует реализации нового дизайна интерфейса и проведения в дальнейшем a/b тестирования, остальные гипотезы не нашли подтверждения.

Если обобщить вышесказанное, мы считаем, что поставленные цели подходящими методами были достигнуты. Платформа MOGOO имеет большой потенциал развития, но нам еще предстоит процесс «отстройки» от конкурентов в содержательном плане и дальнейшем маркетинговом продвижении.



Список использованной литературы и источников

архитектура интерфейс сайт

1.Hackos J., Redish J. User and Task Analysis for Interface Design. -- 512.

2.Аарон У. Эмоциональный веб-дизайн. - М.: Манн, Иванов и Фербер, 2012. -- 130 с.

3.Брукс К., Кесенбери У. Сторителлинг в проектировании интерфейсов. Как создавать истории, улучшающие дизайн - М.: Манн, Иванов и Фербер, 2013 г. -- 336 с.

4.Джанда М. Сожги свое портфолио! То, чему не учат в дизайнерских школах. - Спб.: ООО Издательство «Питер», 2015. -- 384 с.

5.Зельдман Д. Web-дизайн по стандартам //М.: НТ Пресс. - 2005.

6.Иттен, И. Искусство цвета / И. Иттен. -- М.: Издатель Дмитрий Аронов, 2000. -- 96 с.

7.Королькова А. Живая типографика М.: IndexMarket, 2012. -- 224 с.

8.Константин Л., Локвуд Л. Разработка программного обеспечения. СПб.: Питер, 2004. -- 592 с.

9.Кришна Г. Хороший интерфейс -- невидимый интерфейс. - Спб.: Питер, 2016. -- 256 с.

10.Кумова М. Айдентика -- М.: КАК проект, 2015. -- 514 с.

11.Лебедев А. Ководство. - 5 изд. - М.: Студия Артемия Лебедева, 2011. -- 452 с.

12.Маркотт И. Отзывчивый веб-дизайн. -- М.: Манн, Иванов и Фербер, 2012. -- 176 с.

13.Мещанинов А. А. Дизайн: точка над й: теоретическое обсуждение природы дизайна в общедоступном изложении. СПб.: Изд-во Политехнического университета, 2008. -- 216 с.

14.Нильсен, Я. Веб-дизайн / Я.Нильсен. -- СПб.: Символ-Плюс.-- 512 с.

15.Нильсен Я., Лоранжер Х. Web-дизайн: удобство использования Web-сайтов. - Вильямс, 2007.

16.Остин К. Покажи свою работу! 10 способов сделать так, чтобы тебя заметили. - М.: Манн, Иванов и Фербер, 2015. -- 228 с.

17.Розенсон И. А. Основы теории дизайна: учебник для вузов. Стандарт третьего поколения -- 2-е изд. -- СПб.: Питер, 2013. -- 256 с.

Размещено на Allbest.ru