Проектирование сайта School of Visual Communication

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

Постановка задачи, определение бизнес-требований

Несколько лет назад я сотрудничал со школой дизайна School of Visual Communication (далее Школа) при поддержке которой разработал курс “Проектирование опыта взаимодействия” и читал лекции по этому курсу. Кроме того я предложил свои услуги по разработке нового сайта для Школы. Собственно, в рамках этой задачи обтачивались инструменты и методы о которых я рассказывал на лекциях.

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

Первостепенные цели и потребности школы

  1. Продажа учебных курсов.
  2. Донесение информации о школе (общая информация о школе; контактная информация (телефоны, адрес, карта)).
  3. Получение обратной связи (письма; отзывы).
  4. Представление преподавателей школы.
  5. Информирование об услугах (курсы; мастер-классы; семинары).
  6. Информирование о событиях внутри школы (новости; анонсы событий и мероприятий; отчёты).
  7. Информирование о событиях в сфере дизайна (новости; анонсы событий и мероприятий).
  8. Рассылка новостей (материалов).
  9. Привлечение новых преподавателей.
  10. Установление партнерских связей.
  11. Автоматизация заявок на обучение и участие в мероприятиях.

Целевая аудитория, определение пользовательских требований

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

Как вы понимаете, этой информации мало для того что бы понять что нужно пользователям на сайте и в каком виде, то есть сформиовать пользовательские требования. Нам нужна более подробная информация непосредственно от представителей ЦА. Было принято решение провести онлайн-опрос разослав всем студентам (из базы данных Школы) письмо с сылкой на форму с вопросами. Создать и провести опрос достаточно легко с помощью простого инструмента Google Формы. Для начала я составил список вопросов, который должен был помочь мне лучше понять пользователей и их потребности, и разбил их по темам:

Цели, ожидания

  1. Каковы ваши цели обучения?
  2. Почему вы выбрали именно нашу школу?
  3. Что, по вашему мнению, даст вам обучение в нашей школе, чего вы ожидаете?
  4. Опишите кем вы видите себя через 5 лет.

Обучение

  1. Какова, по вашему мнению, должна быть оптимальная длительность одного курса?
  2. Какое время обучения наиболее оптимально для вас и почему (утро, день, вечер)?
  3. В каких дополнительных мероприятиях, в рамках обучения, вы заинтересованы?
  4. Какие дополнительные материалы и инструменты, в рамках обучения, вам нужны?
  5. Опишите идеальный для вас процесс обучения (коротко).

Информация, принятие решений

  1. Какими критериями вы руководствуетесь при выборе школы/курсов?
  2. Какая информация о школе/курсах наиболее важна?
  3. Какая информаци о курсе помогает при принятии решения о записи на курс?
  4. Какая информация о курсе наиболее важна?

Проблемы

  1. С какими проблемамы вы столкнулись при поиске информации о школе/курсе?
  2. С какими проблемами вы столкнулись при выборе школы?
  3. С какими проблемами вы столкнулись при выборе курса?
  4. С какими проблемами вы сталкиваетесь в процессе обучения?

Условия, контекст

  1. В каких условиях вы чаще всего ищите и читаете информацию (дома, на работе и т. д.)?
  2. Какие устройства используете (персональный компьютер, ноутбук, телефон и т. д.)?
  3. Опишите ваш обычный рабочий день (коротко).

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

Письмо получили примерно 90 студентов но только 10 из них дали ответы (о причинах ниже). Но и этих даных хватило что бы полученную информацию осмыслить и оформить ее в более удобном для восприятия виде, то есть описать персонажи пользователей. Я выделил три основных типа пользователей и описал их проблемы, цели и потребности.

Позже я понял почему так мало студентов ответили: вопросов было слишком много и не все захотели тратить свое время. Нужно было разбить базу студентов на несколько групп и каждой группе задать 3–4 простых вопроса, таким образом мы бы получили больше ответов. (Этот опыт я учел при проведении исследований в рамках задания по разработке прототипа итерфейса для автоматов продажи жетонов в метро.)

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

Технические требования, функционал и информационое наполнение

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

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

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

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

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

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

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

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

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

Заключение

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

Хочешь изучить UX/UI Design и научиться проектировать сайты и приложения?

Приходи на онлайн-курс, который помогает изучить методику и прямо во время обучения сделать проект для портфолио. Зписывайся на курс по ссылке 👉 https://hyperschool-digital-product-design.webflow.io/

--

--

Alex Voloshyn
Блог-портфолио Александра Волошина

Проектирую сложные сайты, веб-сервисы и мобильные приложения, обучаю в своей онлайн-школе Open Design School.