Дипломное проектирование по сайту Agentika.com

  • View
    281

  • Download
    4

  • Category

    Design

Preview:

DESCRIPTION

Проектирование пользовательского интерфейса в рамках курсов проектировщиков ITMine, Санкт-Петербург, сентябрь-ноябрь 2014 г.

Citation preview

Проектировании интерфейса

пользователя – планировщика

Подготовили:

Маргарита Иванова

Евгений Панадин

Елена Веселова

27 ноября 2014

Agentika.com

для проекта

Это наша команда!

Маргарита Иванова

Евгений Панадин

Елена Веселова

и наш

дипломный руководитель

Максим Советников

Планировщик путешествийВступление

Планировщик путешествий1 Знакомство с проектом и заказчиком, определение основной группы ЦА

Знакомство с проектом и заказчиком,

определение основной группы ЦА

О сайте agentika.com

Планировщик путешествий1 Знакомство с проектом и заказчиком, определение основной группы ЦА

В чем преимущества системы:

• Возможность планировать самостоятельное путешествие на основе опыта других

путешественников (как добраться, как сэкономить на транспорте и т.п.);

• Фактическая информация о стране, городе, местах, без эмоциональных отзывов;

• Возможность собрать информацию заранее;

• Вся необходимая информация собрана на одном сайте;

• Собранную информацию можно взять с собой в виде распечатки или воспользоваться

мобильным приложением.

Описание Системы

У сайта 2 сегмента пользователей:

Первый тип - Авторы

создают контент (пишут статьи, добавляют места и описания, советы)

Второй тип - Планировщики

пользуются контентом (планируют путешествия, составляя маршруты)

Планировщик путешествий1 Знакомство с проектом и заказчиком, определение основной группы ЦА

С какими проблемами пришел заказчик?

1) Пользователи не понимают, как добавлять новые места к путешествию;

2) Пользователям непонятна разница между статьями и местами;

3) Люди не могут разобраться, как редактировать созданное путешествие;

4) Проблема с навигацией по сайту – путаются в фильтрах, не могут найти нужную информацию;

5) Необходима мотивация авторов статей и мест.

Планировщик путешествий1 Знакомство с проектом и заказчиком, определение основной группы ЦА

Планировщик путешествий1 Знакомство с проектом и заказчиком, определение основной группы ЦА

BMC

Взаимоотношения с клиентами:

• Персональная и выделенная помощь –

через группу и личные сообщения в соцсетях;

• Самообслуживание –

и для авторов, и для планировщиков;

• Автоматические сервисы –

e-mail рассылки среди пользователей

(инструкции, реклама, новые возможности);

• Сообщества – группы в соцсетях;

• Совместное создание – саморазвивающийся

ресурс.

Каналы:

• Сайт;

• Группы в соцсетях, реклама - вконтакте;

• Обратная связь с авторами – информация о

популярных направлениях, найденных

ошибках на сайте, пожеланиях, вопросы по

ресурсу в целом;

• E-mail - рассылка по базе подписчиков сайта.

Планировщик путешествий1 Знакомство с проектом и заказчиком, определение основной группы ЦА

Выявленные ключевые характеристики групп (сегментов) ЦА (гипотезы)

Любят

путешествовать Активные

пользователи

ПК/смартфонов

Самостоятельные

Разного

возраста

Русскоговорящие

Смелые

Адекватные

Любознательные

Толерантны к

другой культуре

Знают хоть

немного английский

Любят

фотографировать

Любят делиться

впечатлениями Хотят увидеть

что-то новое

Планировщик путешествий

Карта эмпатии

1

Карта эмпатии дала нам понимание:

1) потребностей и целей пользователя:

• собрать всю необходимую информацию о стране/городе;

• почитать отзывы о разных местах;

• Надо посмотреть самые знаменитые места, посмотреть исторические достопримечательности, посетить популярные улицы, попробовать популярную местную еду;

2) его проблем и тревог:

• «А вдруг не найду достоверную и актуальную информацию о местах посещений»;

• «А как передвигаться общественным транспортом в городе, сколько стоит?»

Знакомство с проектом и заказчиком, определение основной группы ЦА

Планировщик путешествий1 Знакомство с проектом и заказчиком, определение основной группы ЦА

Составили план

1 этап – Знакомство с заказчиком, BMC,определение основной группы ЦА (гипотезы)

2 этап – Опрос, Протоперсона

3 этап – Интервью, Юзабилити-тестирование существующего сайта и

на основе этого составление Персоны и CJM

4 этап – Проектирование

(визуальный сценарий, информационная архитектура, скетчи)

5 этап – Прототип и Презентация

Планировщик путешествий2 Подготовка , проведение опроса (тестирование гипотез), протоперсона

Подготовка , проведение опроса

(тестирование гипотез), протоперсона

Планировщик путешествий2

На этот момент у нас возникло

очень много вопросов

• Какие можно выделить группы ЦА?

• Как поступить с различными сегментами

пользователей?

• Можно ли отходить от бизнес-модели заказчика?

• Если выделить 2 группы, то для каждой

прорабатывать все артефакты?

• Хватит ли нам на все эти задачи времени?

12 Подготовка , проведение опроса (тестирование гипотез), протоперсона

Планировщик путешествий

Тут появился наш

дипломный

руководитель

Максим Советников

и спас нас

2 Подготовка , проведение опроса (тестирование гипотез), протоперсона

Планировщик путешествий2 Подготовка , проведение опроса (тестирование гипотез), протоперсона

Мы провели опрос, в котором приняли участие 66 респондентов. И вот, что мы выяснили:

Возраст: 18-24 года - 14 опрошенных25-34 года - 40 опрошенных (63,5%)35-44 года - 5 лет45-54 года - 3 опрошенныхстарше 55 лет - 1 опрошенный

Планировщик путешествий2 Подготовка , проведение опроса (тестирование гипотез), протоперсона

При планировании путешествий

Планировщик путешествий2 Подготовка , проведение опроса (тестирование гипотез), протоперсона

При выборе мест посещения особенно важной является информация:

стоимость (76%), информация о транспорте (70%), отзывы (62%)

Планировщик путешествий2 Подготовка , проведение опроса (тестирование гипотез), протоперсона

Найденную информацию туристы берут с собой в виде:

Планировщик путешествий2 Подготовка , проведение опроса (тестирование гипотез), протоперсона

Впечатлениями делятся во время (35%) и после поездки (43%),

выкладывая фотографии (70%) и переписываясь с друзьями в соцсетях (54%)

Планировщик путешествий1

Выбрали этот сегмент потому, что:

• этот сегмент самый многочисленный

• на данный момент бизнес-идея этого сегмента понятна

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

• интерфейс для это сегмента более функционален и интересен нам с точки зрения разработки

Мы приняли решение сконцентрироваться на 2-ом сегменте: Планировщики

2 Подготовка , проведение опроса (тестирование гипотез), протоперсона

Планировщик путешествий1

Группы:

• Молодежь (18-25)Студенты, учатся, подрабатывают, как правило зависимы от родителей, устают от учебы, на отдыхе ищут развлечения

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

• Взрослые (35-50)Специалисты, твердо стоят на ногах, более социально-обеспеченные, растят, воспитывают и отпускают детей в жизнь, самосовершенствуются, применяют накопившийся опыт

• Зрелые (50-60)

Группы ЦА

2 Подготовка , проведение опроса (тестирование гипотез), протоперсона

Планировщик путешествий

Портрет протоперсоны

2 Подготовка , проведение опроса (тестирование гипотез), протоперсона

Поведение/задачи:

• Сам покупает билеты и

бронирует отели;

• Собирает всю необходимую

информацию о стране;

• Ищет и выписывает места,

которые необходимо

посетить;

• Ищет инфу о транспорте для

перемещений;

• Составляет маршрут из

набранной информации.

Составляет план на каждый

день, определяет

приоритеты мест

посещения, прорабатывает

перемещения между

местами;

• Оценивает затраты.

Планировщик путешествий3 Проведение интервью, юзабилити-тестирование, Персоны и CJM

Проведение интервью,

юзабилити-тестирование,

персона и CJM, анализ полученных результатов

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

Юзабилити-тестирование

1. Непонятна категоризация слева, фильтры работают со сбоями

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

Юзабилити-тестирование

2. Сложности с нахождением статей – неочевидна их полезность

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

Юзабилити-тестирование

3. Навигация на странице города неочевидна. Респонденты обращали на нее

внимание только после подсказок, думали что это просто текст.

Нет единой навигации по сайту.

Постоянное изменение навигации создает путаницу

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

Юзабилити-тестирование

4. Непонятно, как открыть все статьи - “показывает популярные, интересны

также непопулярные”.

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

Юзабилити-тестирование

5. Непонятно, что нужно перетаскивать место в папку –

нахождение переноса происходило случайно.

Респонденты не заметили изменение курсора. Пытались сделать добавление

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

Юзабилити-тестирование

6. Главная страница не отображает содержание сайта

(много текста, людей отпугивают призывы, связанные с деньгами)

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

Юзабилити-тестирование

7. Сложности с переходом внутрь сайта через главную страницу

(ссылки выглядят некликабельными)

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

Юзабилити-тестирование

8. Розовое меню не воспринимается как логотип.

Выбивается цветом, нет привычного перехода на главную страницу при

нажатии.

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

Юзабилити-тестирование

9. Удаление в большинстве случаев было найдено случайно.

Выполнение задания на удаление у респондентов не удавалось.

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

Юзабилити-тестирование

10. В папке путешествия – непонятен способ формирования очередности

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

заплатить, «в чем разница между чаевыми и оплатой?», «как разделить

оплату авторам, если одна информация кажется полезнее другой?»

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

Юзабилити-тестирование

11. Много бесполезной информации, пользователям «лень читать» -

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

выжимкой информации

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

Юзабилити-тестирование

12. Претензии к PDF: цветная версия – «потрачу много чернил», много

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

информации», часть респондентов предпочитает не печатать.

Формат А4 не всем удобен.

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

Юзабилити-тестирование

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

в течение какого срока будет обрабатываться его запрос.

Есть оповещения о готовности? Только два человека нашли эту возможность.

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

Юзабилити-тестирование

14. Нет фирменных цветов на сайте, слишком пестро, нет единого стиля в

оформлении. Картинки на заднем фоне плохого качества и не всегда

отражают суть страницы.

Это Париж?

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

Юзабилити-тестирование

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

Юзабилити-тестирование

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

• Пользователи перед поездкой не составляют

детализированные маршруты, они набрасывают

примерную программу мест посещений , ищут и

выписывают необходимую информацию по ним,

читают отзывы.

Мы провели интервью, в котором приняли участие 8 респондентов. И вот, что мы выяснили:

• отказались от идеи интерфейса, который бы

помогал строить детальные маршруты и

организовывать ежедневное четкое

планирование;

• решили сделать планировщик, который помогает

создавать свободные, непривязанные ко времени

и датам программы путешествий;

• внесли корректировки в ключевые

характеристики, в основную группу,

протоперсону.

Исходя из этих выводов мы:

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

Основная группа планировщиков –

Взрослеющая молодежь (25-35 лет)

Почему?

• Эта группа любознательная, ей интересно

знакомиться с новыми странами, узнавать их

культуру, творчество, кухню, традиции, быт и

переносить опыт к себе на родину;

• Они постоянно в поиске новых впечатлений,

эмоций, вдохновений;

• Уже есть определенный доход, в отличие от

молодежи;

• По нашему исследованию их большинство.

На основе исследований определили основную группу ЦА

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

На основе проведенных исследований и протоперсоны мы создали персону

Поведение/задачи:

• Сам покупает билеты и бронирует

отели;

• До поездки проводит небольшое

ознакомление с информацией о

стране;

• Читает статьи, отзывы на

форумах;

• Прикидывает бюджет поездки;

• Сам составляет общую

программу поездки;

• Ищет интересные/необычные

места;

• Сохраняет информацию на

компьютере, телефоне,

записывает в блокнот, берет

распечатки.

Страхи/опасения:

• Актуальность найденной в

интернете информации.

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

CJM

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

CJM

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

CJM

На этом шаге мы выяснили:

• не нужно много текста на странице,

текст будет использован только для

важного описания;

• описание функционала сайта

необходимо сделать схематичными

рисунками, т.к. они меньше утомляют

пользователя и быстрее доносят смысл.

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

CJM

На этом шаге мы выяснили:

• нужно сделать ясную навигацию,

чтобы пользователь мог

ориентироваться на сайте и понимал что

еще может посмотреть;

• нужно представить только краткую

информация об объекте страницы и

показать возможности для его

подробного ознакомления;

• предлагать пользователю

дополнительную информацию по схожей

тематике.

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

CJM

На этом шаге мы выяснили:

• нужно предоставить пользователю

удобный механизм поиска информации

помимо строки поиска;

• возможность задавать необходимые

параметры для фильтрации мест.

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

CJM

На этом шаге мы выяснили:

• нужно предоставить пользователю

краткую и самую необходимую

информацию;

• информация должна быть актуальной

и предоставить возможность

пользователю самому убедиться в этом;

• дать возможность ознакомиться с

внешними источниками главного

объекта страницы (например

функционирующий сайт места

путешествия).

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

CJM

На этом шаге мы выяснили:

• нужно сделать достаточно заметными

результаты добавления информации в

программу путешествия, чтобы

пользователь видел отклик системы на

его действия.

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

CJM

На этом шаге мы выяснили:

• пользователю легче заполнить простую

и быструю форму регистрации.

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

CJM

На этом шаге мы выяснили:

• пользователя нужно ознакомить со

страницей и пояснить, что можно делать

в личном кабинете/сформированной

программе.

Планировщик путешествий3 Проведение интервью , юзабилити-тестирование, Персоны и CJM

CJM

На этом шаге мы выяснили:

• нужно предоставить пользователю

возможность выбирать версию для

печати (краткую и полную);

• возможность выбора формата печати,

(например, в компактной форме

брошюры).

Планировщик путешествий4 Проектирование

Проектирование

Планировщик путешествий4 Проектирование

Визуальный сценарий

Сначала мы нарисовали общую схему и определились, какие страницы

нужно прорабатывать подробнее

Планировщик путешествий4 Проектирование

Информационная архитектура

Планировщик путешествий4 Проектирование

Информационная архитектура

Планировщик путешествий4 Проектирование

Информационная архитектура

Планировщик путешествий4 Проектирование

Информационная архитектура

Планировщик путешествий4 Проектирование

Скетчи

Планировщик путешествий5 Оформление презентации, создание прототипа

Оформление презентации,

создание прототипа

Планировщик путешествий5 Оформление презентации, создание прототипа

Схема прототипа

Планировщик путешествий5 Оформление презентации, создание прототипа

Прототип

http://share.axure.com/N5SO3N

Планировщик путешествий

Ценность, которую мы получили от прототипа:

6 Выводы

• Увидели приближенный к реальности интерфейс, тексты, блоки фотографий, а также

оценили систему навигации и основной путь пользователя на сайте;

• Во время работы над прототипом на себе оценили опыт взаимодействия

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

нестыковки в плавном переходе пользователя с одного экрана на другой;

• Провели коридорное тестирование с пользователями в реальном контексте;

• На основе тестирования выявили очевидные ошибки в интерфейсе и реакцию

пользователей. Ошибки сразу исправили;

• Удаленно предоставили возможность заказчику ознакомиться и оценить интерфейс,

оперативно внесли корректировки.

Решили ли мы проблемы заказчика?

1) Пользователи не понимают, как добавлять новые места к путешествию;

2) Пользователям не понятна разница между статьями и местами;

3) Люди не могут разобраться, как редактировать созданное путешествие;

4) Проблема с навигацией по сайту – путаются в фильтрах, не могут найти нужную информацию;

5) Необходима мотивация авторов статей и мест.

Планировщик путешествий6 Выводы

Решили ли мы проблемы заказчика?

1) Пользователи не понимают, как добавлять новые места к путешествию;

2) Пользователям не понятна разница между статьями и местами;

3) Люди не могут разобраться, как редактировать созданное путешествие;

4) Проблема с навигацией по сайту – путаются в фильтрах, не могут найти нужную информацию;

5) Необходима мотивация авторов статей и мест.

Планировщик путешествий6 Выводы

Решили ли мы проблемы заказчика?

1) Пользователи не понимают, как добавлять новые места к путешествию;

2) Пользователям не понятна разница между статьями и местами;

3) Люди не могут разобраться, как редактировать созданное путешествие;

4) Проблема с навигацией по сайту – путаются в фильтрах, не могут найти нужную информацию;

5) Необходима мотивация авторов статей и мест.

Планировщик путешествий6 Выводы

Решили ли мы проблемы заказчика?

1) Пользователи не понимают, как добавлять новые места к путешествию;

2) Пользователям не понятна разница между статьями и местами;

3) Люди не могут разобраться, как редактировать созданное путешествие;

4) Проблема с навигацией по сайту – путаются в фильтрах, не могут найти нужную информацию;

5) Необходима мотивация авторов статей и мест.

Планировщик путешествий6 Выводы

Решили ли мы проблемы заказчика?

1) Пользователи не понимают, как добавлять новые места к путешествию;

2) Пользователям не понятна разница между статьями и местами;

3) Люди не могут разобраться, как редактировать созданное путешествие;

4) Проблема с навигацией по сайту – путаются в фильтрах, не могут найти нужную информацию;

5) Необходима мотивация авторов статей и мест.

Планировщик путешествий6 Выводы

Решили ли мы проблемы заказчика?

1) Пользователи не понимают, как добавлять новые места к путешествию;

2) Пользователям не понятна разница между статьями и местами;

3) Люди не могут разобраться, как редактировать созданное путешествие;

4) Проблема с навигацией по сайту – путаются в фильтрах, не могут найти нужную информацию;

5) Необходима мотивация авторов статей и мест.

Планировщик путешествий6 Выводы

Планировщик путешествий6 Выводы

Какую пользу мы получили от

проекта?

1) Выполнили намеченный план работ в сжатые сроки;

2) Получили опыт работы с реальным заказчиком и

проектом;

3) Применили полученные нами знания;

4) Получили опыт работы в команде.

Планировщик путешествий6 Выводы

Какие мы видим дальше перспективы

для проектирования?

1) Функционал авторов;

2) Продумать иные варианты монетизации;

3) Проработка PDF-документов для печати;

4) Более детальная разработка страниц,

тестирование новых вариантов и корректировка.

Планировщик путешествий16 Выводы

Recommended