Почему каркасы бесполезны?

Мы никогда не были большими фанатами каркасов, поэтому распрощаться с ними не было для нас проблемой. Мы избавились от них раз и навсегда, когда открыли свою дизайнерскую студию четыре года назад. Но из-за одного небольшого поста в Инстаграм нам пришлось отстаивать свое решение. Этот пост принадлежал  —  Fabrice Poehlman. Автор упомянул, что считает каркас неактуальным инструментом для дизайнеров.

Мы ответили, что согласны c тем, что каркас больше не играет важную роль в нашей повседневной работе. После этого пользователи начали спорить, и появилась масса комментариев по типу «каркасы помогают передать идею продукта», «я могу быстро протестировать удобство пользования» или «каркасы незаменимы в работе дизайнера и разработчика».

В течение четырех лет мы не использовали каркасы и пришли к таким выводам, что:

· никто не столкнулся с непониманием;

· никто не критиковал нашу скорость;

· никто не оспаривал наши эстетические предпочтения;

· никто не спрашивал у нас: «А где же каркасы?».

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

Каркасы  —  что это?

Для начала дадим определение термину «каркас». В веб-дизайне каркасы используются для того, чтобы визуально показать структуру и функции сайта. Как правило, они используются в оттенках серого с заполнителем контента. 

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

Когда мы говорим о каркасах, мы не подразумеваем эскизы

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

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

Аргумент 1: каркасы позволяют решать стратегические и содержательные вопросы

Каркасы используются для принятия концептуальных решений о структуре веб-дизайна. Перед каждым дизайнерским проектом нам стоит прояснить несколько основополагающих вопросов:

· Какую цель мы собираемся достичь при помощи разрабатываемой страницы?

· Какими способами мы сможем добиться этой цели?

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

Прежде чем принять решение, как будет выглядеть страница, нам необходимо установить связь со всеми заинтересованными лицами  —  в этом нам поможет «Core Extend Jump» модель (ссылка). Данная модель дает возможность сформировать стратегические цели и найти способы, как достичь их  —  даже без дизайнерских ноу-хау. Наша система координат помогает разделить обширные вопросы на несколько частей. Такой подход позволяет принять решения на стратегическом уровне, а в последствии решить вопросы по поводу дизайна, содержания и функций. Таким образом, дизайн придерживается этих решений и правильно выражает их.

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

Аргумент 2: каркасы дают возможность протестировать продукт на ранней стадии

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

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

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

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

Аргумент 3: каркасы ускоряют рабочий процесс

Каркасы часто используются для быстрой реализации идей продукта на бумаге. Суть состоит в том, что расположение элементов без визуальных и функциональных характеристик  —  это большая экономия времени. Тот факт, что каркасы значительно экономят время  —  правда, но так было 20 лет назад. На рубеже тысячелетий дизайнеры по всему миру создавали макеты при помощи Adobe Photoshop. Много времени ушло на развитие дизайнерской индустрии. Так было до 2010. С успешным развитием графического редактора Sketch инструменты верстки нашли свое место в создании цифровых продуктов. Сегодня мы работаем с такими программами, как Sketch, Figma, Adobe XD, Invision Studio и другими. А тем временем, такие библиотеки компонентов, как Google’s Material Design, напрямую интегрируются в приложения. Такие инструменты, как Unsplash, библиотеки иконок и разнообразные наборы иллюстраций, помогают быстро создать подходящее содержание.

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

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

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

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

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

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

Хотелось бы вам распрощаться с каркасами?

Здесь то, что вам необходимо знать:

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

1. Процесс

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

2. Навык

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

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

Читайте также:

Читайте нас в Telegram, VK и Яндекс.Дзен


Перевод статьи Robert Goesch: Wireframes are useless

Предыдущая статьяЗнакомимся с основами Angular через создание простого приложения
Следующая статьяНовый подход к пониманию RxJava