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

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

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

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

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


Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.


Все 557+ статей по дизайну читайте на сайте ux-journal.ru


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-совет: “Создайте среду, где невозможно ошибиться!”

Если вам понравилась статья и перевод, дайте нам знать — нажмите зеленую кнопку Recommend

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

Нас можно найти в Facebook: Nancy Pong и Ринат Шайхутдинов.


Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи как привлечь, удержать и направить внимание пользователя

Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.

Скачать приложение в Appstore

Профессиональные секреты UX: UX ProTips

Изначально эти советы создавались автором для своих коллег, клиентов и менеджеров проектов. Затем он опубликовал их в своем блоге, а мы перевели на русский. Приятного чтения!

    Nancy Pong

    Written by

    Ольга Жолудова. Копирайтер и переводчик. Про копирайтинг: https://vk.com/copywriter.blog Про жизнь: https://www.instagram.com/nancypong4/

    Профессиональные секреты UX: UX ProTips

    Изначально эти советы создавались автором для своих коллег, клиентов и менеджеров проектов. Затем он опубликовал их в своем блоге, а мы перевели на русский. Приятного чтения!

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade