Что такое вайрфрейм: 5 нюансов создания? | Секрет 8

Ниже приведен список ошибочных предствлений о wireframe-ах. Может и вы уличите себя в одном из пяти главных, непростительных wireframe-овых грехов.

Wireframe — это основательный такой документ, с кучей пустых прямоугольников с подписями вроде: “здесь будет имя пользователя”, “картинка” и т.д. Да, признаю — wireframe-ы могут быть скучными. Но они важны, даже необходимы! И если вы выступаете в роли архитектора, то wireframe — это ваш проект строительства.

Предыдущий совет

(В этой коллекции собраны переводы профессиональных советов по UX американского автора Джоэла Марша. Если вы тут впервые, то лучше начните сначала)

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

Но сегодня мы не будем говорить, чем является wireframe. Наша тема — чем wireframe НЕ ЯВЛЯЕТСЯ!

Ниже приведен список ошибочных предствлений о wireframe-ах. Может и вы уличите себя в одном из пяти главных, непростительных wireframe-овых грехов:

1) Wireframe — это не просто скетч в общих чертах

Мы зачастую относимся к wireframe-ам как к быстрым, черновым скетчам, или как к первому этапу дизайна. “Сделаю-ка для начала wireframe!” Нет. Wireframe-ы специально никак не связаны с дизайном, чтобы демонстрировать как сайт/приложение будет работать, а не выглядеть.

Все эти беглые наброски на салфетке, которые вы (и я) делаем перед началом работы, очень важны. Они приводят в порядок наши мысли. Но они не являются wireframe-ами.

На ранней стадии, выражайте свои идеи и концепции в форме слов и рисунков, а не wireframe-ов. Описывайте потоки при помощи иконок, скетчей, карт сайта, слайдов или пользовательских историй. Их быстрее разрабатывать, и клиенту проще в них разбираться.

2) Хороший wireframe требует времени

В wireframe все выглядит схематично, но за этими чертежами стоят многие часы раздумий. Каждый небольшой блок должен быть спланирован и расположен в нужном месте. Каждая ссылка должна куда-то вести. Каждая страница должна быть доступна по ссылке с другой страницы. Каждая кнопка должна быть там, где она нужна пользователю, и не быть там, где от нее нет толку. Лишь 10% создания wireframe-ов приходится на рисование; 90% занимает процесс продумывания. Убедитесь, что все понимают важность этих 90%.

3) У wireframe не бывает промежуточного состояния

Создавая что-либо, мы всегда проходим стадию “черновика”, постепенно совершенствуя свое творение. Но в случае с wireframe —он либо готов, либо нет. Если какая-то часть wireframe не закончена, то это потому, что что-то не решено, не организовано, не работает, неудобно в использовании или отсутствует. Считается, что wireframe в процессе, если вы не можете приступить к проектированию по нему. И не бойтесь сказать это клиенту или менеджеру! Принимать решения на основе “сырого” wireframe, это все равно, что ждать приближения ночного кошмара. Проверено на опыте.

4) Wireframe-ы нужно воспринимать всерьез

Мне приходилось видеть, как люди переносят распечатанный wireframe (на бумаге) из одного раздела сайта в другой, потому что им кажется, что так будет лучше восприниматься. Приходилось видеть набор wireframe-ов для соц.сети на 70 страницах, где не было даже страницы с профилем. (И это при том, что исполнителем работ было одно из самых известных рекламных агентств в мире!) Приходилось видеть контент, созданный пользователем, который невозможно было нигде создать. Приходилось видеть, как клиент своими руками вычеркивает кнопку “зарегистрироваться”, потому что она некрасиво смотрится на wireframe. Приходилось видеть, как агентство мирового уровня спроектировало и запустило сайт без главного меню (кажется смешной шуткой, не так ли?)

Может что-то из этого не показалось вам нереально важным, но все это — примеры критических ошибок, способных разрушить продукт или сервис.

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

5) Wireframe-ы не предназначены для презентации

Всякий раз, когда wireframe-ы раскрашивают синеньким и всячески стилизуют, частичка меня умирает. Я сразу понимаю, что люди, стоящие за этими wireframe-ами совершенно не уважают свою работу: они не использовали цвет для придания дополнительного смысла (например, красный для предупреждения), они пытались “протащить” свою работу, украсив ее визуально и уводя внимание клиента/босса от технического назначения wireframe-а. Стилизовать wireframe под архитектурную светокопию — это все равно, что печатать договор шрифтом Comic Sans.

Вот чем не является wireframe. Удивлены? Расскажите мне об этом в Твиттере!

Хорошей недели!

А завтра нас ждет новый UX-совет: “Создайте среду, где невозможно ошибиться!”

А ещё, если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Nancy Pong и Ринат Шайхутдинов.

17 cекретов хорошего UX и UI дизайна

Посты в категории UX-дизайн

Как я прокачала навыки продуктового дизайна (ux/ui), работая в техподдержке: с чего лучше начать обучение UX-дизайну

Ольга Жолудова

11 марта 2020

Посты в категории UX-дизайн

Профессия UX/UI дизайнер: как стать дизайнером интерфейсов и где учиться

Ринат Шайхутдинов

1 марта 2020

Посты в категории UX-дизайн

Как использовать бумажные прототипы: практическое руководство

Ольга Жолудова

14 января 2020