1 1160x620 - Проверяйте идеи дизайна продукта с помощью вайрфреймов

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

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

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

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

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

Что такое вайрфрейминг в UI дизайне?

Вайрфрейм – это архитектурный проект технического продукта. Он дает вам возможность определить базовую структуру продукта и организовать иерархию его пользовательского интерфейса (UI).

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проверяйте идеи дизайна продукта с помощью вайрфреймов
Определение базовой структуры и иерархии с помощью вайрфрейма

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

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

Опасность избегания вайрфреймов

Это происходит снова и снова, и снова.

Команды разработчиков пропускают этот этап, чтобы как можно быстрее выпустить продукт

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

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

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

Вайрфреймы могут подтвердить обоснованность ваших идей

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проверяйте идеи дизайна продукта с помощью вайрфреймов
Используйте вайрфреймы низкой точности для проверки своих дизайнерских идей

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

Как создать работающий вайрфрейм

Создание вайрфрейма и разработка прототипа

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

Иногда полезно сначала нарисовать вайрфреймы физически. Однако на каком-то этапе вам нужно будет перевести их в цифровой формат. Я создал набор фреймов различных устройств и браузеров формата A4, который вы можете распечатать, чтобы начать работу. Они доступны по этой ссылке.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проверяйте идеи дизайна продукта с помощью вайрфреймов
Шаблоны вайрфреймов от Simon McCade

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

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

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

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

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

Прототипирование вайрфреймов может занять немного больше времени, но это окупится в будущем

Тестирование вайрфреймов пользователями

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проверяйте идеи дизайна продукта с помощью вайрфреймов
Тестирование с реальными пользователями для определения траектории развития вашего продукта

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

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

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

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

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

Обработка фидбека

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

Настало время расставить приоритеты в отношении того, что стоит обсудить, что нужно предпринять, а что можно игнорировать.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проверяйте идеи дизайна продукта с помощью вайрфреймов
Собирайте, анализируйте и обрабатывайте отзывы пользователей, чтобы улучшить свой продукт

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

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

Как я могу вам помочь с вайрфреймами

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

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

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

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

Свежие вакансии
                        MYTONA MYTONA Game UI/UX Designer Удаленно Санкт-Петербург По договоренности ₽
                        ООО "Компания В.И.К." ООО "Компания В.И.К." Дизайнер (в офис) Офис Краснодар 35 000 ₽
                        ООО РЖД-Технологии ООО РЖД-Технологии Графический дизайнер Офис Москва
                        Ак Барс Цифровые Технологии Ак Барс Цифровые Технологии UI/UX дизайнер Офис Казань от 70 000 ₽
                        Kodix Kodix UX/UI Designer Офис Москва (Moscow, Russia)
Все вакансии

Оригинал: Simon McCade

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Тренды UI/UX дизайна на 2020 год

Подборка основных трендов UI/UX дизайна, которые мы увидим в 2020 году

Как упростить свой дизайн, большое руководство

Свыше 20 понятных иллюстрированных примеров Компании постоянно стремятся создавать простые и полезные…

10 эвристических принципов для мобильных интерфейсов

Якоб Нильсен консультировал и обучал юзабилити-инжинирингу, когда начал изучать множество паттернов. В…