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

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

Методы

UX-воркшоп

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

подробнее

Концептуальное проектирование

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

подробнее

Детальное прототипирование

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

подробнее

Документирование интерфейса

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

подробнее

Авторский надзор

Метод контроля пользовательских качеств продукта на всех этапах: от визуального дизайна и программной реализации до финального наполнения контентом.

подробнее

Артефакты

UX-стратегия

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

Концептуальный прототип

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

Интерактивный прототип

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

Спецификация интерфейса

Документация, объединяющая все требования к пользовательскому интерфейсу и функциональности программного продукта.

Методы и артефакты

Методы
  • Концептуальное проектирование
  • Детальное прототипирование
  • Документирование интерфейса
  • Авторский надзор
  • UX-воркшоп

Концептуальное проектирование

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

Детальное проектирование

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

Документирование интерфейса

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

Авторский надзор

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

UX-воркшоп

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

 
Юзабилити- исследование Проектирование- интерфейсов Юзабилити- аудит
Артефакты
  • Концептуальный прототип
  • Детализированный прототип
  • Интерактивный прототип
  • Спецификация интерфейса
  • UX-стратегия

Концептуальный прототип

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

Детализированный прототип

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

Интерактивный прототип

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

Спецификация интерфейса

Документ, объединяющий все требования к пользовательскому интерфейсу и функциональности продукта

UX-стратегия

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

 

Как мы проектируем интерфейсы

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

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

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

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

4. Создании концепции интерфейса (концептуальное проектирование). Концепция интерфейса — это черновой набросок будущего продукта: мы продумываем логику перехода между разделами интерфейса и схематически обозначаем, как будет располагаться контент на экране. Самого контента (текстов, иллюстраций) в концепции ещё нет. Такой низкодетализированный прототип нужен, чтобы убедиться: мы и заказчик одинаково понимаем, как пользователь должен взаимодействовать с продуктом.

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

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

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

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

Наш опыт по отраслям

 
 

Наши клиенты

Сбербанк
Сбербанк
Вэ Тэ Бэ Двадцать Четыре
Вэ Тэ Бэ Двадцать Четыре
Райффайзенбанк
Райффайзенбанк
Тинькофф Банк
Тинькофф Банк
Ростелеком
Ростелеком
Спортмастер
Спортмастер
МТС
МТС
Эльдорадо
Эльдорадо
Федеральная налоговая служба
Федеральная налоговая служба
Центральный Банк Российской Федерации
Центральный Банк Российской Федерации
Мосэнергосбыт
Мосэнергосбыт
Зептолаб
Зептолаб
ИВИ
ИВИ
Интач
Интач
Эрcтайл
Эрcтайл
Деливери Клаб
Деливери Клаб
Флорист точка ру
Флорист точка ру
Фабрика окон
Фабрика окон
Интернет-магазин Утконос
Интернет-магазин Утконос
Платежная система Киви
Платежная система Киви
Форекс Клаб
Форекс Клаб
Группа компаний Брокеркредитсервис
Группа компаний Брокеркредитсервис
Альфа-Капитал
Альфа-Капитал
Бибика точка ру
Бибика точка ру
Деликатеска точка ру
Деликатеска точка ру
Сони
Сони
Метро кэш энд кэрри
Метро кэш энд кэрри
Росбанк
Росбанк
Альфа-Банк
Альфа-Банк
Риа Новости
Риа Новости
СТС Медиа
СТС Медиа
Страховой дом ВСК
Страховой дом ВСК
Росгосстрах
Росгосстрах
Альфа-Страхование
Альфа-Страхование
Ресо Гарантия
Ресо Гарантия
РБК Недвижимость
РБК Недвижимость
Циан точка ру
Циан точка ру
Аскона
Аскона
Нетология
Нетология
Казанский Федеральный Университет
Казанский Федеральный Университет
Московский Государственный Университет
Московский Государственный Университет
Хэдхантер точка ру
Хэдхантер точка ру
Яндекс
Яндекс
Киномакс
Киномакс
Банк Урал Эф Дэ
Банк Урал Эф Дэ
Шереметьево
Шереметьево
Промсвязьбанк
Промсвязьбанк
Банк Открытие
Банк Открытие
Банк Москвы
Банк Москвы
Бинбанк
Бинбанк
Газпромбанк
Газпромбанк
Банк Восточный
Банк Восточный
Банк Траст
Банк Траст
Совкомбанк
Совкомбанк
Банк Русский Стандарт
Банк Русский Стандарт
Россельхозбанк
Россельхозбанк
Банк Ренессанс Кредит
Банк Ренессанс Кредит
Банк Вэ Пэ Бэ
Банк Вэ Пэ Бэ
Банк Алтын
Банк Алтын
Банк Астаны
Банк Астаны
Банк Санкт-Петербург
Банк Санкт-Петербург
Банк Держава
Банк Держава
Кредит Европа банк
Кредит Европа банк
Глобэкс Банк
Глобэкс Банк
Банк Хоум Кредит
Банк Хоум Кредит
Московский Кредитный Банк
Московский Кредитный Банк
Эм Тэ Эс Банк
Эм Тэ Эс Банк
Номос Банк
Номос Банк
Эс Дэ Эм Банк
Эс Дэ Эм Банк
Соверен Банк
Соверен Банк
Связной Банк
Связной Банк
Транскредитбанк
Транскредитбанк
Уральский банк реконструкции и развития
Уральский банк реконструкции и развития
Юникредит Банк
Юникредит Банк
Банк Урал Эф Дэ
Банк Урал Эф Дэ
Яр Банк
Яр Банк
Запсибкомбанк
Запсибкомбанк
Билайн
Билайн
Интернет хостинг центр
Интернет хостинг центр
Майтикол Энтерпрайз
Майтикол Энтерпрайз
Руцентер
Руцентер
Стрим
Стрим
Вестколл
Вестколл
Оранж телеком
Оранж телеком
Оператор связи Велком
Оператор связи Велком
Связной
Связной
Манго Телеком
Манго Телеком
Мегафон
Мегафон
Межрегиональный ТранзитТелеком
Межрегиональный ТранзитТелеком
Мобилмани Телеком
Мобилмани Телеком
Евафон
Евафон
Департамент информационных технологий города Москвы
Департамент информационных технологий города Москвы
Правительство Российской Федерации
Правительство Российской Федерации
Московская Торгово-промышленная палата
Московская Торгово-промышленная палата
Федеральная служба по труду и занятости Роструд
Федеральная служба по труду и занятости Роструд
Сочи две тысячи четырнадцать точка ру
Сочи две тысячи четырнадцать точка ру

Отправкой данных даю безусловное «Согласие на обработку персональных данных»,
c «Политикой обработки персональных данных» ознакомлен.

Спасибо!

Наш UX-менеджер свяжется с вами в ближайшее время

Номер вашей заявки

Описание юзабилити-проблем — это навык. В статье вы можете познакомиться с примерами описания проблем.

Подробнее

Юзабилити лаборатория - Usabilitylab

Расскажите о своем продукте, и мы предложим варианты сотрудничества

Расскажите, над чем вы сейчас работаете, и мы подберем примеры решения похожих задач

Отправкой данных даю безусловное «Согласие на обработку персональных данных»,
c «Политикой обработки персональных данных» ознакомлен.

Спасибо!

Наш UX-менеджер свяжется с вами в ближайшее время

Номер вашей заявки

Описание юзабилити-проблем — это навык. В статье вы можете познакомиться с примерами описания проблем.

Подробнее

[contact-form-7 404 "Not Found"]