Недавно писал о рабочей сессии для одного из новых проектов. За прошедшее время успели завершиться работы по бизнес-анализу и сбору требований, так что самое время начинать проектирование конкретных страниц. Объем предстоящих работ немаленький — нужны будут несколько сотен структурных схем страниц (wireframes). Правда, на текущем этапе работ мы еще определяемся с окончательным концептом будущего продукта. Так что пока достаточно черновых схем 5-7 ключевых страниц. Но проблема “с чего начать” все равно остается.
На руках уже есть свеженаписанные видение проекта, персонажи, краткие сценарии взаимодействия и перечень функциональности. Но это все скорее общая информация, важная для понимания проекта и предварительного анализа командой разработки. Для проектирования конкретных страниц нужна четкая структура будущей системы — и навигацию проработать, и процессы работы пользователя продумать, и просто ничего не забыть. Для этого готовится еще одна пачка документов — карта сайта, схема навигации, карта wireframes и диаграммы взаимодействия (у меня достаточно вольная трактовка понятия, заточенная под внутренний процесс).
Теперь можно переходить к конкретике. Рисуем лейаут типовой страницы — шапка, футер, навигация, расположение основного контента и контекстной информации. Позже нужно будет проработать такие же разметки для главной, типовой страницы для неавторизованного пользователя, а также страниц ошибки сервера и версии для печати. Но на текущем этапе обычно хватает типовой и главной. Остается самое интересное — наполнить “тело” страницы.
Уже отобраны кандидаты в презентационные wireframes, которые будут обсуждаться вместе с клиентом при утверждения концепции. Это самые сложные и непонятные страницы, которые к тому же будут посещаться на порядок чаще других. Что должно быть на них? Для этого лучше взять пачку бумаги и начать делать наброски по вот такой последовательности:
Цели, с которыми пользователь мог зайти на страницу
Цели плотно пересекаются с персонажами — у каждого из них может быть несколько причин посетить страницу в соответствии со своими задачами и потребностями. И хорошо бы все эти причины обеспечить нужной информацией. Лучше всего, если таких целей одна-две на каждого персонажа. Иначе экран получается перегружен — страница слишком много на себя берет. Допустим, у нас сайт о кино, где можно почитать, пообщаться и купить билеты. Для страницы фильма цели будут такими:
- Получить представление о ленте — о чем она и стоит ли ее вообще смотреть.
- Узнать, где и когда можно посмотреть фильм и по возможности купить или забронировать билеты.
- Поделить впечатлениями от просмотра, а если загорится спор с другими пользователями — активно в нем поучаствовать.
- Найти конкретную информацию о фильме — трейлер или постер, который вчера висел в кинотеатре.
Что вообще может быть на странице?
Длинным списком выписывается вся информация об объекте, которую в принципе можно представить на странице. Она может иметь прямое отношение к нему, а может быть просто близка по теме. Если вернуться к кино, то вот что можно предложить пользователю о фильме:
- Постер;
- Описание фильма;
- Общая информация — актеры, длительность, жанр и т.п.;
- Расписание показов и адреса кинотеатров;
- Профессиональные рецензии;
- Отзывы пользоватлей;
- Сопутствующая информация — кадры, трейлеры, постеры и т.п.;
- Возможность забронировать или купить билет;
- Рейтинг фильма;
А можно пойти чуть дальше:
- Мерчандайзинг — продажа DVD, маек, постеров, саундтреков и т.п.;
- Подробная информация о режиссере и актерах;
- Специальные акции — например, розыгрыш билетов на закрытую премьеру;
- Похожие фильмы, идущие в прокате;
- Фильмы, рекомендованные тем кому понравился этот;
- Последние темы обсуждения в сообществе поклонников режиссера фильма;
- Свежие новости киностудии, снявшей ленту;
- Список наград, полученных на фестивалях;
Организация информации
Первоначальный список может состоять из нескольких десятков пунктов, а осмыслить такой объем сложновато. Тут можно использовать что-то вроде карточной сортировки, чтобы получить в итоге 3-4 группы основной информации:
- Общая информация;
- Отзывы и рецензии;
- Сеансы и покупка билетов;
- Дополнительная информация для интересующихся;
Примерно такими ключевыми блоками будет выводиться информация на странице.
Сопоставление информации целям пользователей
Если вывести на странице все что у нас есть — получится явный перебор, в котором мало кому захочется разбираться (на время забудем про imdb.com). Желательно, чтобы все имеющееся богатство информации уместилось в 1-2 экрана и при этом не выглядело как линк-ферма. Так что сопоставляем доступные сведения с целями страницы и особенностями персонажей:
- Для каждой группы выбирается 1-2 ведущих пункта списка. Акцент делается именно на них и расписываются они относительно подробно;
- Большая часть оставшихся пунктов делается ссылками, возможно с примечаниями;
- Оставшиеся пункты вычеркиваются;
Отрисовка черновых схем страниц
Теперь осталось сделать итоговые наброски страниц на бумаге, а после этого — отрисовать черновые wireframes в электронном виде. Тут еще предстоит подумать, как отображать ведущие пункты списка — они ведь состоят из набора элементов и важно знать, что в этот набор включать. Но на этапе предварительной проработки не обязательно выдумывать до мелочей точную формулу расчета рейтинга фильма. Главное, чтобы это был не серый прямоугольник с текстом lorem ipsum. Пускай это будет банальная 5-балльная оценка по параметрам “игра актеров / сюжет / спецэффекты / итого” — в отличие от прямоугольника-заглушки, такое представление блока будет вызывать у клиента несогласие и стимулирует его высказывать свое видение рейтинга. А это отличный задел для предметного обсуждения концепции, а не абстрактного “в принципе, все примерно так и нужно”.
К презентации все готово, так что осталось только распечатать и подшить демо-материалы. И запастись черновиками — обсуждение будет долгим. И обязательно продуктивным.
1 comment