Статью «Why the Best Wireframe Style Is No Style» написал редактор UX Movement Энтони 21 апреля 2015 года.
Когда нас просят забить гвоздь, мы вспоминаем о молотке. Благодаря своей конструкции он справляется лучше микроскопа. Только поэтому мы отдаём деньги за молоток.
Современные вайрфреймы плохо справляются со своей задачей. Виноват их внешний вид, который мешает другим участникам команды представить себе будущий дизайн. Создающий такие вайрфреймы дизайнер вредит проекту, сам того не желая.
Задача вайрфрейма
Чтобы придать вайрфрейму правильный внешний вид, нужно понимать его задачу. Вайрфрейм создаётся до появления первой графики и программного кода. Нельзя создать дизайн-макет без понимания, какие элементы находятся на каждой странице и как они расставлены.
Задача вайрфрейма — показать необходимые элементы страницы в упорядоченном виде. Проектировщик предлагает решение, исходя из пользовательских исследований, лучших практик и целей заинтересованных лиц. Вайрфрейм изучают другие участники. Пока они не придут к единому мнению, проект дальше не двинется.
Почему важна визуальная чистота
Визуальная чистота помогает другим участникам увидеть структуру и общую идею проекта, не отвлекаясь на внешний вид отдельных элементов.
Вайрфрейм отвечает на вопросы:
- Какие элементы на странице;
- Зачем они там;
- Где они расположены;
- Как они работают.
Если вы добавляете цвета и оттенки, команда отвлекается и обсуждает внешний вид конкретных элементов. Даже если вы скажете, что это не окончательный стиль, они не смогут удержаться. Это естественная реакция на то, что они видят. Но стиль нужно обсуждать на этапе графики, а не вайрфрейминга.
С вайрфреймом команда решает основополагающие вопросы о структуре и общей идее сайта. Стилизованный вайрфрейм эту задачу усложняет. Цвета, формы и шрифты вклиниваются в общее видение, которое вы обсуждаете. Таким образом команда может принять неправильные решения в самом начале пути.
Стили, которые мешают визуальной чистоте
Нефункциональные вайрфреймы появляются, когда дизайнеры проявляют личный стиль. Иногда они делают это, чтобы проще продать свою работу другим участникам. В остальное время — из-за тщеславия.
Причина не важна. Стиль не должен мешать пониманию сути, ведь это то, ради чего вайрфрейм создаётся. Избегайте стили, снижающие визуальную чистоту. Например:
Цветные вайрфреймы
Цвет — это главное отличие мокапа от вайрфрейма. Добавляя цвет в вайрфрейм вы смешиваете его функцию с функцией мокапа, задача которого — обсудить брендинг и стиль. Такое смешение усложняет определение структуры и общей идеи.
Вайрфреймы в оттенках серого
Оттенки серого — традиционный стиль вайрфреймов. Но многообразие оттенков отвлекает. Зрители недоумевают, почему одни элементы темнее или светлее других. Это перетягивает внимание с общего пользовательского опыта на отдельные объекты.
Вы вместо проработки структуры сайта тратите время на поиск правильных оттенков, чтобы сделать серые объекты на сером фоне более различимыми.
Ещё такие вайрфреймы тяжело рассматривать и читать. Это приводит к путанице и чрезмерному напряжению глаз. Никто не хочет, чтобы команда каждый раз мучилась, изучая вайрфрейм.
Блочные вайрфреймы
Структура бесполезна, если она не подходит контенту. Важно понять как можно раньше, подходит ли предлагаемая структура реальному контенту. Блочные вайрфреймы в этом не помогают, так как текст в них заменяют безликие прямоугольники.
Длина и высота текста влияет на размер кнопок, меню, заголовков, параграфов и других элементов. Если мы не видим, как текст смотрится в предложенном интерфейсе, мы не сможем представить, как пользователи его читают. И наши оценки размеров элементов и отступов слишком неточны.
Настолько чистый, насколько возможно
Для вайрфрейма лучший стиль — это отсутствие такового. Монохромный вайрфрейм с белым и ещё одним цветом — самая визуально чистая форма, соответствующая его функции.
Такой вайрфрейм показывает именно структуру. Элементы разных цветов и оттенков не сражаются за внимание, всё имеет равный вес. Поэтому вы можете сосредоточиться на пользовательском опыте, а команда — на обсуждении расстановки элементов, а не их внешнего вида.
Этот стиль удобен ещё и тем, что вы не беспокоитесь о сочетаниях цветов и оттенков. Вы работаете с одним цветом и потому можете сосредоточиться на структуре, а не том, как это выглядит. Вы сохраняете концентрацию, экономите время и выдаёте результат быстрее.
Чтобы глазам было легко, выбирайте цвет, хорошо контрастирующий с белым. Серые элементы на белом выглядят слабыми и унылыми. Чёрный цвет контрастирует слишком сильно и напрягает глаза. Для взгляда издалека и рассматривания деталей идеальный баланс у тёмного серо-голубого цвета.
Заключение
Функциональный вайрфрейм помогает сосредоточиться на видении сайта и объединяет команду. Нефункциональный — всё портит. Чтобы этого не случилось, сохраняйте визуальную чистоту.
Не дайте личному стилю, предпочтениям или тщеславию повлиять на документ, с которым работают другие участники. Задача вайрфрейма — привести команду к единому мнению относительно пользовательского опыта. Придайте вайрфрейму вид, подходящий его функции, и упростите жизнь себе и команде.
…
Также опубликовано в VC и на Медиуме.
Технологии цифрового маркетинга — книга, где я был соавтором (параграф про создание сайта) и литературным редактором (привёл текст к единой стилистике и упростил формулировки). От 249 рублей.