Совет №8: Что не является wireframe?
Wireframe — это основательный такой документ, с кучей пустых прямоугольников с подписями вроде: “здесь будет имя пользователя”, “картинка” и т.д. Да, признаю — wireframe-ы могут быть скучными. Но они важны, даже необходимы! И если вы выступаете в роли архитектора, то wireframe — это ваш проект строительства.
(В этой коллекции собраны переводы профессиональных советов по UX американского автора Джоэла Марша. Если вы тут впервые, то лучше начните сначала)
Wireframe — это документ, который тщательно планируется. Это техническая инструкция для “строителей”. Поглядев на нее, мы можем многозначительно воскликнуть: “Ой, я забыл про главное меню!”. Примерно так же архитектор может сказать что-то вроде “Ой, я забыл входную дверь!”
Но сегодня мы не будем говорить, чем является wireframe. Наша тема — чем wireframe НЕ ЯВЛЯЕТСЯ!
Ниже приведен список ошибочных предствлений о wireframe-ах. Может и вы уличите себя в одном из пяти главных, непростительных wireframe-овых грехов:
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook | Instagram, Telegram
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
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 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
