Разработка сценариев в проектировании интерфейсов

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

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

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

Краткий пользовательский сценарий

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

Вот пример такого сценария, который я делал для перепроектирования продукта «Мои карты» в Яндекс.Картах.


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

В чем может мне помочь продукт мои карты?

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

Своему знакомому я отправлю ссылку на место проведения конференции. Он, получив ее, сохранит ее в своих картах.

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


Результат описания краткого пользовательского сценария:

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

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

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

Сценарий можно реализовать в текстовом виде или в виде блок-схемы.

Пример подробного пользовательского сценария в текстовом виде, источник сайт компании UI Modeling Company:

  1. Пользователь нажимает на ссылку на профиль одного из пользователей.
  2. Система открывает страницу, которая помимо прочего содержит следующие интерактивные элементы:
    1. Название ВУЗа пользователя (ссылка);
    2. Добавить в друзья (ссылка).
    3. Блок «Конспекты пользователя». Блок состоит из списка элементов. Каждый элемент помимо прочего содержит следующие интерактивные элементы:
      1. Название конспекта (ссылка).
    4. Остальные конспекты (ссылка);
    5. Блок «Книжная полка пользователя». Блок состоит из списка элементов. Каждый элемент помимо прочего содержит следующие интерактивные элементы:
      1. Название книги (ссылка).
    6. Остальные книги (ссылка);
    7. Блок «Учебные планы пользователя». Блок состоит из списка элементов. Каждый элемент помимо прочего содержит следующие интерактивные элементы:
      1. Название учебного плана (ссылка).
    8. Остальные учебные планы (ссылка);
    9. Блок «Информация о пользователе». Блок помимо прочего содержит следующие интерактивные элементы:
      1. Имя пользователя (ссылка);
      2. Название ВУЗа пользователя (ссылка);
      3. Специальность пользователя (ссылка);
      4. Добавить в друзья (ссылка);
      5. Блок «Материалы пользователя». Блок помимо прочего содержит следующие интерактивные элементы:
        1. Конспекты (ссылка);
        2. Книжная полка (ссылка);
        3. Учебные планы (ссылка).
    10. Блок «ВУЗы и специальности». Блок помимо прочего содержит следующие интерактивные элементы:
      1. ВУЗы (ссылка);
      2. Специальности (ссылка);
      3. Города (ссылка);
      4. Пользователи (ссылка, заблокирована).
    11. Блок «Друзья пользователя». Блок помимо прочего содержит следующие интерактивные элементы:
      1. Список друзей. Список элементов. Каждый элемент помимо прочего содержит следующие интерактивные элементы:
        1. Имя пользователя (ссылка).
      2. Все друзья пользователя (ссылка).

Пример подробного сценария реализованного в виде блок-схемы

Блок-схема реализуется с помощью редактора, я предпочитают пользоваться двумя: OpenOffice Draw и yEd Graph Editor. Блок схема дает возможность обсудить механизм работы программного продукта, так же утвердить его с заказчиком еще до разработки, по блок схеме проще писать техническое задание, создавать прототипы.

 

 
  © 2012 — «Wayson»