Лого vc.ru

Никакого дизайна: Почему на время создания прототипа нужно забыть о стиле

Никакого дизайна: Почему на время создания прототипа нужно забыть о стиле

Читатель ЦП, директор студии Samplar Антон Григорьев, подготовил перевод заметки UX Movement о том, почему при создании вайрфреймов (черновых прототипов сервиса) нужно отказаться от любого оформления.

Поделиться

Когда нас просят забить гвоздь, мы вспоминаем о молотке. Благодаря своей конструкции он справляется лучше микроскопа. Только поэтому мы отдаём деньги за молоток.

Современные вайрфреймы плохо справляются со своей задачей. Виноват их внешний вид, который мешает другим участникам команды представить себе будущий дизайн. Создающий такие вайрфреймы дизайнер вредит проекту, сам того не желая.

Задача вайрфрейма

Чтобы придать вайрфрейму правильный внешний вид, нужно понимать его задачу. Вайрфрейм создаётся до появления первой графики и программного кода. Нельзя создать дизайн-макет без понимания, какие элементы находятся на каждой странице и как они расставлены.

Задача вайрфрейма — показать необходимые элементы страницы в упорядоченном виде. Проектировщик предлагает решение, исходя из пользовательских исследований, лучших практик и целей заинтересованных лиц. Вайрфрейм изучают другие участники. Пока они не придут к единому мнению, проект дальше не двинется.

Почему важна визуальная чистота

Визуальная чистота помогает другим участникам увидеть структуру и общую идею проекта, не отвлекаясь на внешний вид отдельных элементов.

Вайрфрейм отвечает на вопросы:

  • Какие элементы на странице.
  • Зачем они там.
  • Где они расположены.
  • Как они работают.

Если вы добавляете цвета и оттенки, команда отвлекается и обсуждает внешний вид конкретных элементов. Даже если вы скажете, что это не окончательный стиль, они не смогут удержаться. Это естественная реакция на то, что они видят. Но стиль нужно обсуждать на этапе графики, а не вайрфрейминга.

С вайрфреймом команда решает основополагающие вопросы о структуре и общей идее сайта. Стилизованный вайрфрейм эту задачу усложняет. Цвета, формы и шрифты вклиниваются в общее видение, которое вы обсуждаете. Таким образом команда может принять неправильные решения в самом начале пути.

Стили, которые мешают визуальной чистоте

Нефункциональные вайрфреймы появляются, когда дизайнеры проявляют личный стиль. Иногда они делают это, чтобы проще продать свою работу другим участникам. В остальное время — из-за тщеславия.

Причина не важна. Стиль не должен мешать пониманию сути, ведь это то, ради чего вайрфрейм создаётся. Избегайте стили, снижающие визуальную чистоту. Например:

Цветные вайрфреймы

Цвет — это главное отличие мокапа от вайрфрейма. Добавляя цвет в вайрфрейм вы смешиваете его функцию с функцией мокапа, задача которого — обсудить брендинг и стиль. Такое смешение усложняет определение структуры и общей идеи.

Вайрфреймы в градиентах серого

Градиенты серого — традиционный стиль вайрфреймов. Но многообразие оттенков отвлекает. Зрители недоумевают, почему одни элементы темнее или светлее других. Это перетягивает внимание с общего пользовательского опыта на отдельные объекты.

Вы вместо проработки структуры сайта тратите время на поиск правильных оттенков, чтобы сделать серые объекты на сером фоне более различимыми.

Ещё такие вайрфреймы тяжело рассматривать и читать. Это приводит к путанице и чрезмерному напряжению глаз. Никто не хочет, чтобы команда каждый раз мучилась, изучая вайрфрейм.

Блочные вайрфреймы

Структура бесполезна, если она не подходит контенту. Важно понять как можно раньше, подходит ли предлагаемая структура реальному контенту. Блочные вайрфреймы в этом не помогают, так как текст в них заменяют безликие прямоугольники.

Длина и высота текста влияет на размер кнопок, меню, заголовков, параграфов и других элементов. Если мы не видим, как текст смотрится в предложенном интерфейсе, мы не сможем представить, как пользователи его читают. И наши оценки размеров элементов и отступов слишком неточны.

Настолько чистый, насколько возможно

Для вайрфрейма лучший стиль — это отсутствие такового. Монохромный вайрфрейм с белым и ещё одним цветом — самая визуально чистая форма, соответствующая его функции.

Такой вайрфрейм показывает именно структуру. Элементы разных цветов и оттенков не сражаются за внимание, всё имеет равный вес. Поэтому вы можете сосредоточиться на пользовательском опыте, а команда — на обсуждении расстановки элементов, а не их внешнего вида.

Этот стиль удобен ещё и тем, что вы не беспокоитесь о сочетаниях цветов и оттенков. Вы работаете с одним цветом и потому можете сосредоточиться на структуре, а не том, как это выглядит. Вы сохраняете концентрацию, экономите время и выдаёте результат быстрее.

Чтобы глазам было легко, выбирайте цвет, хорошо контрастирующий с белым. Серые элементы на белом выглядят слабыми и унылыми. Чёрный цвет контрастирует слишком сильно и напрягает глаза. Для взгляда издалека и рассматривания деталей идеальный баланс у тёмного серо-голубого цвета.

Заключение

Функциональный вайрфрейм помогает сосредоточиться на видении сайта и объединяет команду. Нефункциональный — всё портит. Чтобы этого не случилось, сохраняйте визуальную чистоту.

Не дайте личному стилю, предпочтениям или тщеславию повлиять на документ, с которым работают другие участники. Задача вайрфрейма — привести команду к единому мнению относительно пользовательского опыта. Придайте вайрфрейму вид, подходящий его функции, и упростите жизнь себе и команде.

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

тут два варианта - либо вы не сумели внятно объяснить заказчику, зачем это нужно (внесение изменений и согласование требований на этом этапе гораздо проще и дешевле, чем на когда все уже готово), либо сумели, но заказчик настолько неадекватен, что не понял

иногда гуманитарий боится черно-белые рисунки

А кто где эти самые вайрфреймы делает? Поделитесь пожалуйста.

0

balsamiq - простенькое средство, но приятное, я даже лицензию за $100 приобрел

Я вебом занимаюсь :)
Спасибо, ребят.
До освоения Axure руки не дошли, пользовался от случая к случаю wireframe.cc, но всегда нахожусь в поиске лучшего варианта. balsamiq попробую на днях :)

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

gomockingbird если для скорости
sketch если надо красиво и в сетку

0

UX-ры задолбали называть постановку задачи на проектирование стратегией.

Есть же блин концепция, план, программа развития.

Страте́гия (др.-греч. στρατηγία — «искусство полководца») — наука о войне, в частности наука полководца, общий, недетализированный план военной деятельности, охватывающий длительный период времени, способ достижения сложной цели, позднее вообще какой-либо деятельности человека.

www.invisionapp.com/ - это если уже прототипы и нужно быстро сделать интерактив. хорошо для мобилок.

0

Много раз заказчики тупо пугались черно-белых прототипов, как бы доходчиво до них не доводилась суть. Кто-то понимает, а кто-то подсознательно их боится до такой степени, что справится только опытный психолог. Так что все эти вайфреймы - вещь достаточно условная.

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Арчибальд

Конечно! Некоторые не опускаются до ножей и кредиток,а строят свои капиталы на пирамидах!

PewDiePie сохранил лидерство в рейтинге самых высокооплачиваемых YouTube-блогеров по версии Forbes
0
Сергей Запухляк

Я разработчик уникального плеера ВК для Mac. Вчера попросил оставить использование API, готов был сделать плеер бесплатным, на что получил ответ:

Добрый день!

Мне очень жаль, но мы ничего не можем Вам предложить.

С уважением,
ВКонтакте

«ВКонтакте» закроет публичный доступ к аудиозаписям для сторонних приложений
0
Сергей Запухляк

Я разработчик плеера ВК для Mac. Вчера попросил оставить использование API, готов был сделать плеер бесплатным, на что получил ответ.

«ВКонтакте» закроет публичный доступ к аудиозаписям для сторонних приложений
0
Арчибальд

Нажрутся своих гамбургеров,а потом снашивают друг-друга в попы.

Рекламная война брендов фастфуда: кампании McDonald’s, Burger King, Pizza Hut и Subway
0
Дмитрий Панфилов

*Соискатели не знают, как искать работу*
совершенно лишнее знание, если бы рекрутёры сами не организовывали эти "7 кругов ада"

*Наши специалисты готовы раскрыть все секреты прохождения собеседований*
сами придумали "секреты", сами их и раскрывают. Пока бесплатно ;)

Алёна Владимирская и оператор Wi-Fi в московском метро запустили проект с бесплатными карьерными советами
1
Показать еще