Проектирование и прототипирование интерфейсов

Проектирование удобных интерфейсов и опыта взаимодействия

Подробнее
Награды 6 наград 4 номинации в UI/UX
рейтинги Профиль Evergreen — Clutch Рейтинг Evergreen — CMSMagazine Профиль Evergreen — Behance Все Все

Что такое проектирование и прототипирование интерфейсов?

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

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

Во время проектирования учитываются три ключевые составляющие, которые позволяют успешно сделать проектирование веб интерфейсов:

  • потребности пользователя,
  • финансовые и организационные возможности бизнеса,
  • техническая возможность реализовать спроектированное решения.

Когда нужно проектировать интерфейс?

Создание нового продукта.

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

Высокодетализированный прототип используется для тестирования с потенциальными пользователя. Получая обратную связь от потенциальных клиентов можно быстро вносить правки оптимизируя функционал. Это поможет сэкономить ресурсы разработки в будущем, избегая “переделок”. Готовый прототип интерфейса является базовой платформой на который ориентируются маркетологи (оценка SEO продвижения и др.) и разработчики (понимание функционала, который нужно разработать).

Редизайн существующего проекта.

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

Аналитика текущего сайта - ключевой источник информации, который даст ответы на вопрос что именно нужно улучшать и как. При редизайне используются такие инструменты: анализ систем аналитики (Google Analytics), качественное и количественное исследование аудитории, анализ поведения пользователей, субъективные метрики удовлетворенности и др. В процессе анализа собираются гипотезы (предположения что можно улучшить) и вовлекается текущая аудитория сайта для проверки верности гипотез с помощью опросов, юзабилити-тестирования, сценарного моделирования и др.

75%

– повышение выручки компаний известных как "design unicorns", сделавших ставку на высокий уровень UX

Процесс проектирования и прототипирования в Evergreen

— обязательные этапы разработки

Аналитика

Мокап

Прототип

Тестирование

Комментарии к процессу проектирования

slogan-img

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

  1. Аналитика и сбор требований - глубокое и полное понимание будущей целевой аудитории и ее потребностей - ключевый принцип, на которую мы опираемся при разработке интерфейса. Пока мы не понимаем для кого мы делаем и какие мотивы у пользователя мы не переходим к следующему этапу. В процесс аналитики максимально вовлечен и клиент, предоставляя всю имеющуюся информацию. На этом этапе анализируются рынок, конкуренты, целевая аудитория, пользователи, собираются функциональные требования, уточняются ограничения, которые есть на проекте.
  2. Мокап - это низкодетализированный прототип, задача которого синхронизировать понимание всех участников проектирования - клиента, дизайнеров, аналитиков и др. В мокапе проектируются страницы, необходимые для выполнения ключевых сценариев пользователя, второстепенные страницы на следующем этапе. Быстрое время на создание такого прототипа позволяет его легко править, меняя структуру и компоненты в процессе обсуждения с командой, без значительных потерь.
  3. Высокодетализированный прототип - это полный прототип будущего продукта со всеми сценариями и интерактивными действиями. Такой прототип полностью передает суть и функционал проекта - он работает как реальный сайт. С помощью прототипа можно проводить тестирование удобвства интерфейса, что позволяет сэкономить время на переделках проекта, когда он уже разработан и выпущен в мир.
  4. Тестирование - лучший способ проверить правильность всех гипотез (предположений что пользователи буду вести себя именно так), которые были положены в основу проектирования интерфейса. Тестирование проводится вживую или удаленно, его суть сводится к тому что потенциальный пользователь выполняет целевые действия. Опыт пользователя (успешность выполнения, ошибки, эмоциональная удовлетворенность) анализируются и, при необходимости вносятся правки. Продуманное до мелочей прототипирование интерфейсов позволяет сэкономить в будущем на доработках.
  1. Аналитика и сбор требований - глубокое и полное понимание будущей целевой аудитории и ее потребностей - ключевый принцип, на которую мы опираемся при разработке интерфейса. Пока мы не понимаем для кого мы делаем и какие мотивы у пользователя мы не переходим к следующему этапу. В процесс аналитики максимально вовлечен и клиент, предоставляя всю имеющуюся информацию. На этом этапе анализируются рынок, конкуренты, целевая аудитория, пользователи, собираются функциональные требования, уточняются ограничения, которые есть на проекте.
  2. Мокап - это низкодетализированный прототип, задача которого синхронизировать понимание всех участников проектирования - клиента, дизайнеров, аналитиков и др. В мокапе проектируются страницы, необходимые для выполнения ключевых сценариев пользователя, второстепенные страницы на следующем этапе. Быстрое время на создание такого прототипа позволяет его легко править, меняя структуру и компоненты в процессе обсуждения с командой, без значительных потерь.
  3. Высокодетализированный прототип - это полный прототип будущего продукта со всеми сценариями и интерактивными действиями. Такой прототип полностью передает суть и функционал проекта - он работает как реальный сайт. С помощью прототипа можно проводить тестирование удобвства интерфейса, что позволяет сэкономить время на переделках проекта, когда он уже разработан и выпущен в мир.
  4. Тестирование - лучший способ проверить правильность всех гипотез (предположений что пользователи буду вести себя именно так), которые были положены в основу проектирования интерфейса. Тестирование проводится вживую или удаленно, его суть сводится к тому что потенциальный пользователь выполняет целевые действия. Опыт пользователя (успешность выполнения, ошибки, эмоциональная удовлетворенность) анализируются и, при необходимости вносятся правки. Продуманное до мелочей прототипирование интерфейсов позволяет сэкономить в будущем на доработках.

Тестирование прототипов

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

Для чего нужно проводить тестирование?

Подтверждение гипотез. При проектировании формируются гипотезы и тестирование позволяет проверить так ли себя ведет пользователь как предполагает проектировщик.

Улучшение интерфейса. Определение где в интерфейсе пользователю не понятно как действовать дальше или он допускает ошибки.

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

Что нужно тестировать?

Навигацию

Позволяет убедиться что пользователю легко ориентироваться в структуре контента. Проводится тестирования дерева навигации и карточная сортировка.

Поведение

Наблюдение и анализ действий пользователя при выполнении задания. Проводится очное или удаленное юзабилити-тестирование и тестирование фокуса пользователя.

Восприятие

Проверяется соответствует ли прототип проекта ментальной модели пользователя. Проводится тест-сравнение двух вариантов или 5-ти секундный тест.

Вопрос-ответ

  • С чего обычно вы начинаете проектирование интерфейса?

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

  • Вы проводите тестирование на пользователях?

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

  • Используете ли вы опросники при проектировании интерфейса?

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

  • Вы можете сделать проектирование интерфейса совершенно нового продукта, который не имеет аналогов?

    Да. У нас есть отработанный техпроцесс проектирования и создания user experience. Над проектом работает команда, которая детально прорабатывает портреты пользователей, разрабатывает карту поведения пользователя на проекте и ищет оптимальные способы реализации задач пользователя

  • Как вы проверяете качество прототипирования интерфейса?

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

  • Проектирование интерфейса может сделать любой дизайнер или фрилансер

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

  • Прототипирование интерфейсов делать не обязательно

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