Как создавать каркасы за 6 простых шагов

Если вы новичок или любитель, эти шесть простых шагов для создания каркасов пригодятся вам!

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

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

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

Но прежде чем мы углубимся, что такое каркас?

Что такое каркас?

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

Пример каркаса, разрабатываемого в MockFlow WireframePro (исходный код)

Покончив с этим, давайте рассмотрим этапы создания каркаса.

Проведите исследование, чтобы получить ясность и направление

Может возникнуть соблазн сразу же начать изливать свои каркасные идеи, но прежде чем вы это сделаете, подумайте о более крупной цели: разработке привлекательного пользовательского интерфейса (UI). А для этого вам нужно будет оценить требования вашего дизайн-проекта и ожидания заинтересованных сторон и конечных пользователей.

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

Вот как вы можете пройти этот шаг:

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

Упростите возврат к данным исследования

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

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

Вот несколько быстрых способов сделать это:

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

Сопоставление пользовательских потоков для удовлетворения потребностей пользователей

Пользовательский поток относится к пути или пути пользователя во время сеанса веб-сайта или приложения. Это путешествие включает в себя точку, в которой они вошли на ваш веб-сайт / приложение, все точки, в которых они взаимодействовали с веб-сайтом / приложением (например, страницы, которые они посетили, и кнопки, на которые они нажимали до своей последней транзакции), и где они покинули веб-сайт / приложение. .

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

Это виды взаимодействий внутри вашего веб-сайта / приложения, которые вместе составляют пользовательский поток.

Пример пользовательского потока для посетителя веб-сайта электронной коммерции ( Источник )

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

Непосредственным воздействием в таком случае будут недовольные или разочарованные клиенты, что также будет означать сокращение конверсий и увеличение числа отказов.

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

• Составьте карту потребностей пользователя, задав себе вопрос: какой цели пытаются достичь посетители веб-сайта / приложения? Какие функции они ищут? Какие у них могут быть начальные вопросы? Какая информация может им понадобиться для плавной навигации?
• Создайте схему потока, которая включает точку входа пользователя на веб-сайт / приложение и все шаги, которые они могут предпринять до финальной транзакции.
• Убедитесь, что пользовательский поток логичен и учитывает все возможные потребности пользователя при навигации.

Создайте минималистичный макет для каркаса

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

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

Кроме того, при проектировании структуры не поддавайтесь искушению добавить слишком много деталей - на данном этапе лучше меньше, да лучше. Забудьте о шрифтах и ​​цветах, просто сосредоточьтесь на создании ориентировочного дизайна, а не на последнем.

Вот несколько вопросов, на которые вы можете ответить, чтобы сделать этот шаг правильно:

• Как лучше всего организовать компоненты пользовательского интерфейса для достижения конечной цели посетителя?
• Что должен увидеть пользователь, зайдя на страницу?
• Где разместить основное сообщение страницы?
• Какая информация должна отображаться наиболее заметно?
• Какие кнопки понадобятся пользователю для навигации по сайту или дизайну приложения?

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

Определите уровень верности и заполните детали

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

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

• Черновые макеты, в основном прямоугольники и линии
• Практически нет конкретных деталей
• Нет ощущения масштаба, пикселей или сетки

• Представляя несколько концепций или вариаций
• На начальном этапе проектирования, когда детали не нужны

• Более точное изображение макета
• Немногое деталей, ключевые элементы выделены отдельно
• Без изображений или шрифтов

• Когда нужно проработать каркас с низкой точностью
• Когда нужно представить каркас другим в понятной форме

• Макет для каждого пикселя
• Цвета, изображения и стилистические элементы по мере необходимости
• Почти нет текста

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

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

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

Пройдите тестирование!

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

Тестирование также поможет выявить любые важные элементы, которые могут отсутствовать, или любые дополнительные требования, которые необходимо решить. Например, вместо двух полей на странице входа в систему (одно для имени пользователя и другое для пароля) ваш каркас имеет только одно. Или, может быть, на домашней странице нет панели навигации, хотя, по логике, она должна быть. Такие промахи необходимо исправить до того, как каркас перейдет в процесс проектирования.

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

Определение критериев для нового теста в UserTesting ( Источник )

Вот как вы можете протестировать свой каркас:

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

После того, как вы закончите тестирование и соберете отзывы, внесите улучшения по своему усмотрению.

Готовы к блицкригу? Не так скоро!

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

Инструмент для создания каркасов может помочь вам значительно сократить время, необходимое для создания каркаса. Вы можете просто использовать перетаскиваемые элементы-заполнители и готовые каркасные шаблоны. Инструмент также позволяет легко сотрудничать с членами команды или клиентами и получать отзывы в режиме реального времени. Более того, вы можете интегрироваться с такими приложениями, как Adobe Creative Cloud или Jira, для создания высококачественных каркасов.

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