Хороший интерфейс начинается не с красивых макетов, а с проектирования. Именно на этом этапе решается, поймёт ли пользователь продукт, найдёт ли нужную функцию и дойдёт ли до цели. Ошибку, допущенную в проектировании, потом очень дорого исправлять: её приходится переделывать уже в дизайне, коде и тестах одновременно.
Проектирование UI/UX интерфейсов — это последовательность понятных шагов. Ниже — практический гайд, по которому мы проводим проекты: от формулировки задачи до кликабельного прототипа, который можно показать пользователям и передать в дизайн. Он подойдёт и для нового продукта, и для переработки существующего сервиса.
Самая частая ошибка — открыть графический редактор в первый же день. Кажется, что так быстрее: заказчик видит картинки, команда чувствует прогресс. Но макет без проектирования отвечает на вопрос «как это выглядит», а не на вопрос «как это работает». Через несколько недель выясняется, что сценарии не продуманы, экраны не связаны между собой, а половину функций некуда поставить.
В итоге проект раз за разом возвращается на доработку, сроки растут, а бюджет уходит на перерисовку. Проектирование решает эту проблему: сначала логика и структура, потом визуал. Это не лишний этап, а способ сэкономить время и деньги на всём проекте.
Проходите шаги по порядку — каждый следующий опирается на результат предыдущего.
Запишите, зачем нужен интерфейс и как вы поймёте, что он работает: рост заявок, сокращение времени на операцию, снижение числа обращений в поддержку. Без измеримой цели проектирование превращается в спор о вкусах.
Поговорите с пятью-десятью реальными пользователями или клиентами, изучите аналитику существующего продукта, посмотрите на обращения в поддержку. Задача — понять, кто пользуется интерфейсом, в каких ситуациях и что им мешает сейчас.
Для каждой группы пользователей сформулируйте три-пять главных сценариев: «записаться на тренировку на завтра», «перенести занятие», «оплатить абонемент». Сценарий — это путь от задачи до результата, и именно под него проектируются экраны.
Соберите все экраны и переходы между ними в одну схему. Карта показывает, сколько шагов нужно пользователю, где есть тупики и лишние развилки. На этом этапе легко убрать ненужные экраны — пока они ничего не стоят.
Вайрфрейм — это черно-белая схема экрана без цветов и декора: блоки, кнопки, заголовки, их порядок и приоритет. Начинать можно с бумажных набросков, затем переносить в редактор. Главное на этом шаге — иерархия: что пользователь должен увидеть первым и что сделать.
Свяжите вайрфреймы переходами так, чтобы по ним можно было «пройти» сценарий, как по настоящему продукту. Прототип позволяет проверить логику до дизайна и разработки.
Дайте прототип трём-пяти людям из целевой аудитории и попросите выполнить ключевые сценарии. Не подсказывайте — наблюдайте, где они сомневаются, ошибаются или ищут кнопку. По итогам внесите правки и, если нужно, повторите тест.
Результат проектирования — не набор картинок, а пакет документов, с которым дальше работают дизайнеры и разработчики:
Такой пакет позволяет точно оценить стоимость дизайна и разработки, а заказчику — увидеть продукт до того, как в него вложены основные деньги.
Прототип за неделю дешевле, чем переделанный продукт за квартал. Проектирование — это страховка от самых дорогих ошибок.
Проектировать для всех сразу. Интерфейс, который пытается угодить каждому, не удобен никому. Выделите главные группы пользователей и главные сценарии, остальное — вторым приоритетом.
Копировать конкурентов целиком. Паттерны брать можно и нужно, но чужой интерфейс решает чужие задачи. Без понимания ваших пользователей копия почти всегда работает хуже оригинала.
Пропускать состояния экранов. Пустые списки, ошибки, долгая загрузка, отсутствие интернета — всё это тоже часть интерфейса. Если их не спроектировать, разработчики придумают решения сами, и чаще всего неудачные.
Тестировать только на коллегах. Команда знает продукт слишком хорошо и не видит проблем. Для проверки нужны люди, которые видят прототип впервые.
Забывать о мобильной версии. Проектирование интерфейсов сайтов и приложений должно учитывать смартфон с самого начала. Ужимать десктоп в последний момент — верный способ получить неудобную мобильную версию.
Прежде чем переходить к визуальному дизайну, проверьте, что на каждый пункт ответ — «да»:
Если хотя бы один пункт вызывает сомнение, лучше вернуться на шаг назад: исправить проблему в прототипе в разы дешевле, чем в готовом дизайне или коде.
Хорошая новость: для качественного проектирования не нужен дорогой софт. Важнее последовательность и дисциплина, чем инструменты.
Бумага и маркер. Лучший инструмент для первых набросков и мозгового штурма. Быстро, дёшево и не жалко выбросить неудачный вариант. Многие сильные интерфейсы начинались с листа А4.
Онлайн-доски. Удобны для карт пользовательских путей, группировки результатов исследования и совместной работы с заказчиком. Вся команда видит общую картину и может оставлять комментарии.
Редакторы интерфейсов. В них собираются вайрфреймы и кликабельные прототипы, а затем и финальный дизайн. Главное преимущество — возможность связать экраны переходами и показать продукт так, будто он уже работает.
Инструменты для тестирования. Сервисы для удалённых юзабилити-тестов, записи сессий и опросов помогают проверить прототип на реальных людях, даже если они находятся в другом городе.
Выбор конкретных сервисов вторичен. Если команда пропускает исследование и тесты, никакой инструмент не спасёт интерфейс от ошибок.
Стоимость проектирования зависит от числа сценариев, экранов и глубины исследования. Небольшой сервис с несколькими ключевыми сценариями проектируется за пару недель, сложная система с разными ролями пользователей — за один-два месяца. В общей смете продукта это, как правило, небольшая доля, которая при этом сильнее всего влияет на итоговый результат.
Заказывать проектирование стоит до дизайна и разработки, а также перед крупным редизайном, когда существующий интерфейс перестал справляться с задачами. Подробнее о составе работ — на странице проектирование UI/UX интерфейсов.
Проектирование — это путь от цели к прототипу через исследование, сценарии, карту экранов и тесты. Пройдя его, вы получаете продукт, логику которого проверили реальные люди, и точную оценку дальнейших работ. Начните хотя бы с первых трёх шагов: сформулируйте цель, поговорите с пользователями и опишите сценарии — это уже изменит качество интерфейса.
Если нужен опытный взгляд со стороны, Onebanan возьмёт на себя исследование, прототипирование и тестирование, а на выходе передаст пакет, с которым удобно работать любой команде разработки. Узнать, как устроена работа и из чего складывается бюджет, можно на странице заказать проектирование UI/UX интерфейсов.
Если интерфейс уже существует, начать можно с аудита главного экрана — пошаговый алгоритм мы описали в статье об аудите первого экрана.
Сравниваем готовую систему и собственную разработку по бюджету, срокам, гибкости и стоимости владения — и даём вердикт, когда что выгоднее.
Пошаговый гайд: 7 шагов проверки первого экрана, подводные камни и чек-лист, который можно пройти самостоятельно за вечер.
Восемь шагов, через которые проходит профессиональный логотип: от брифа и исследования до тестов на носителях и комплекта файлов.
© Onebanan Digital Agency.