Юрий Ветров об интерфейсах
  • Главная
  • Статьи
  • Дайджест
  • Конференции
  • Дизайн-менеджмент
  • Дизайн-системы
  • Заметки
  • О блоге
Юрий Ветров об интерфейсах
Юрий Ветров об интерфейсах
  • Главная
  • Статьи
  • Дайджест
  • Конференции
  • Дизайн-менеджмент
  • Дизайн-системы
  • Заметки
  • О блоге

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

  • 4 апреля 2008

Недавно писал о рабочей сессии для одного из новых проектов. За прошедшее время успели завершиться работы по бизнес-анализу и сбору требований, так что самое время начинать проектирование конкретных страниц. Объем предстоящих работ немаленький — нужны будут несколько сотен структурных схем страниц (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-балльная оценка по параметрам “игра актеров / сюжет / спецэффекты / итого” — в отличие от прямоугольника-заглушки, такое представление блока будет вызывать у клиента несогласие и стимулирует его высказывать свое видение рейтинга. А это отличный задел для предметного обсуждения концепции, а не абстрактного “в принципе, все примерно так и нужно”.

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

Юрий Ветров

Директор по бренду и дизайну (ex-Muse Group (Ultimate Guitar, MuseScore, Audacity и другие), Райффайзен Банк и Mail.ru Group). Я руковожу командами, которые отвечают за дизайн, исследования и редактуру бренда и интерфейсов, а также дизайн-систему в коде. Автор книги и курса «Паттерны дизайн-менеджмента» и «Дайджеста продуктового дизайна». Со-организовывал Fintech Design Conf, Mail Design Conf и московский Dribbble Meetup, а также Russian Design Cup. Читал лекции в Британке, курировал курс Future London Academy в Лондоне. Мои публикации есть на Smashing Magazine, UXmatters и UX Collective. Подробнее обо мне.

Другие статьи по теме
View Post
  • Дизайн-системы

Тёмная тема оформления

  • Юрий Ветров
  • 17 мая 2020
View Post
  • Дизайн-менеджмент
  • Статьи
  • Тренды

DesignOps, стремительно ворвавшийся в тренд

  • Юрий Ветров
  • 23 июля 2018
View Post
  • Дизайн-системы
  • Рецензии

Книги о дизайн-системах

  • Юрий Ветров
  • 26 апреля 2018
View Post
  • Дизайн-менеджмент
  • Статьи

UX-стратегия. Часть 6 — Внедрение

  • Юрий Ветров
  • 30 мая 2017
View Post
  • Дизайн-менеджмент
  • Статьи

UX-стратегия. Часть 5 — Дизайн с выхлопом

  • Юрий Ветров
  • 12 апреля 2017
View Post
  • Статьи
  • Тренды

Куда идёт UX в 2016 году

  • Юрий Ветров
  • 14 сентября 2016
View Post
  • Дизайн-менеджмент
  • Статьи

UX-стратегия на практике. Часть 4 —
От дизайн-команды к дизайн-культуре

  • Юрий Ветров
  • 12 сентября 2016
View Post
  • Методы и практики
  • Статьи
  • Тренды

Алгоритмический дизайн

  • Юрий Ветров
  • 27 июня 2016
1 comment
  1. Уведомление: User links about "2read" on iLinkShare

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Юрий Ветров об интерфейсах
Дизайн-менеджмент цифровых продуктов, © 2007-2018

Input your search keywords and press Enter.