Отрисовка wireframes. Начало работ по проектированию интерфейса

Недавно писал о рабочей сессии для одного из новых проектов. За прошедшее время успели завершиться работы по бизнес-анализу и сбору требований, так что самое время начинать проектирование конкретных страниц. Объем предстоящих работ немаленький — нужны будут несколько сотен структурных схем страниц (wireframes). Правда, на текущем этапе работ мы еще определяемся с окончательным концептом будущего продукта. Так что пока достаточно черновых схем 5-7 ключевых страниц. Но проблема “с чего начать” все равно остается.

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

Теперь можно переходить к конкретике. Рисуем лейаут типовой страницы — шапка, футер, навигация, расположение основного контента и контекстной информации. Позже нужно будет проработать такие же разметки для главной, типовой страницы для неавторизованного пользователя, а также страниц ошибки сервера и версии для печати. Но на текущем этапе обычно хватает типовой и главной. Остается самое интересное — наполнить “тело” страницы.

Уже отобраны кандидаты в презентационные wireframes, которые будут обсуждаться вместе с клиентом при утверждения концепции. Это самые сложные и непонятные страницы, которые к тому же будут посещаться на порядок чаще других. Что должно быть на них? Для этого лучше взять пачку бумаги и начать делать наброски по вот такой последовательности:

Цели, с которыми пользователь мог зайти на страницу

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

  1. Получить представление о ленте — о чем она и стоит ли ее вообще смотреть.
  2. Узнать, где и когда можно посмотреть фильм и по возможности купить или забронировать билеты.
  3. Поделить впечатлениями от просмотра, а если загорится спор с другими пользователями — активно в нем поучаствовать.
  4. Найти конкретную информацию о фильме — трейлер или постер, который вчера висел в кинотеатре.

Что вообще может быть на странице?

Длинным списком выписывается вся информация об объекте, которую в принципе можно представить на странице. Она может иметь прямое отношение к нему, а может быть просто близка по теме. Если вернуться к кино, то вот что можно предложить пользователю о фильме:

  • Постер;
  • Описание фильма;
  • Общая информация — актеры, длительность, жанр и т.п.;
  • Расписание показов и адреса кинотеатров;
  • Профессиональные рецензии;
  • Отзывы пользоватлей;
  • Сопутствующая информация — кадры, трейлеры, постеры и т.п.;
  • Возможность забронировать или купить билет;
  • Рейтинг фильма;

А можно пойти чуть дальше:

  • Мерчандайзинг — продажа DVD, маек, постеров, саундтреков и т.п.;
  • Подробная информация о режиссере и актерах;
  • Специальные акции — например, розыгрыш билетов на закрытую премьеру;
  • Похожие фильмы, идущие в прокате;
  • Фильмы, рекомендованные тем кому понравился этот;
  • Последние темы обсуждения в сообществе поклонников режиссера фильма;
  • Свежие новости киностудии, снявшей ленту;
  • Список наград, полученных на фестивалях;

Организация информации

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

  • Общая информация;
  • Отзывы и рецензии;
  • Сеансы и покупка билетов;
  • Дополнительная информация для интересующихся;

Примерно такими ключевыми блоками будет выводиться информация на странице.

Сопоставление информации целям пользователей

Если вывести на странице все что у нас есть — получится явный перебор, в котором мало кому захочется разбираться (на время забудем про imdb.com). Желательно, чтобы все имеющееся богатство информации уместилось в 1-2 экрана и при этом не выглядело как линк-ферма. Так что сопоставляем доступные сведения с целями страницы и особенностями персонажей:

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

Отрисовка черновых схем страниц

Теперь осталось сделать итоговые наброски страниц на бумаге, а после этого — отрисовать черновые wireframes в электронном виде. Тут еще предстоит подумать, как отображать ведущие пункты списка — они ведь состоят из набора элементов и важно знать, что в этот набор включать. Но на этапе предварительной проработки не обязательно выдумывать до мелочей точную формулу расчета рейтинга фильма. Главное, чтобы это был не серый прямоугольник с текстом lorem ipsum. Пускай это будет банальная 5-балльная оценка по параметрам “игра актеров / сюжет / спецэффекты / итого” — в отличие от прямоугольника-заглушки, такое представление блока будет вызывать у клиента несогласие и стимулирует его высказывать свое видение рейтинга. А это отличный задел для предметного обсуждения концепции, а не абстрактного “в принципе, все примерно так и нужно”.

К презентации все готово, так что осталось только распечатать и подшить демо-материалы. И запастись черновиками — обсуждение будет долгим. И обязательно продуктивным.

1 Comment Отрисовка wireframes. Начало работ по проектированию интерфейса

  1. Pingback: User links about "2read" on iLinkShare

Leave a Reply

Your email address will not be published. Required fields are marked *