Мы никогда не были большими фанатами каркасов, поэтому распрощаться с ними не было для нас проблемой. Мы избавились от них раз и навсегда, когда открыли свою дизайнерскую студию четыре года назад. Но из-за одного небольшого поста в Инстаграм нам пришлось отстаивать свое решение. Этот пост принадлежал — 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-дизайнер, дизайнер интерфейса и технический дизайнер специализируются на разных сферах. Некоторые из этих профессий настолько узкоспециальные, что даже не подкреплены традиционным дизайнерским образованием. Однако для того, чтобы рассмотреть архитектуру, взаимодействие и внешний вид одновременно, необходимы обширные знания по дизайну и понимание соответствующих элементов. Этот способ расширит диапазон новых решений. Мы предпочитаем доверять профессионалам широкого уровня. Они способны увидеть общую картину и использовать необходимые инструменты для создания высокоэффективных продуктов с самого начала.
Необходимо полностью изменить образ мышления, чтобы избавиться от каркасов. Поэтому я скажу следующее: в течение четырех лет мы не использовали каркасы, и это позитивно сказалось на наших продуктах. Работа без каркасов означает, что наша команда способна правильно установить стратегию, получить ценный пользовательский отклик, а затем разработать дизайн для всего цифрового опыта. Сейчас наши продукты стали лучше, чем были когда-либо. Поэтому мы никогда не вернемся к каркасам.
Читайте также:
- 10 источников вдохновения для дизайнера
- Иконки в веб-дизайне
- Современные шаблоны проектирования архитектуры
Читайте нас в Telegram, VK и Яндекс.Дзен
Перевод статьи Robert Goesch: Wireframes are useless
