Проектирование интерфейса системы видеоконференцсвязи

Кейс IVA ВКС

Мы в юзабилити-агентстве Юзетикс спроектировали интерфейс системы видеоконференцсвязи (ВКС) с учетом результатов итерационных исследований для IVA Technologies.

Хотим поделиться полученным опытом и знаниями о некоторых особенностях проектирования интерфейсов систем ВКС.

Дизайнеры, которым предстоит проектировать похожие интерфейсы, узнают:

• какие разделы есть в структуре сервиса ВКС;
• какие бывают роли пользователей;
• как выглядит интерфейс изнутри.

Начинающие дизайнеры познакомятся с примером дизайн-процесса.

Цель проекта

«Cоздать простой и современный интерфейс системы видеоконференцсвязи, не требующий инструкций и обучения пользователей».

Команда IVA Technologies

Как мы достигли поставленной цели

1. Собрали исходные данные

Задача бизнеса

Сделать систему привлекательной для руководителей, принимающих решение о покупке.

Наши задачи

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

2. Сравнили IVA с конкурентами и собрали хорошие решения

Провели сравнительное исследование 12 систем ВКС и составили список из 100+ хороших решений. Сформулировали гипотезы о том, что и как можно улучшить в текущем продукте.

Примеры хороших решений

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

3. Изучили целевую аудиторию (ЦА)

ЦА — сотрудники компаний, где IVA ВКС внедрена как корпоративная система видеоконференцсвязи. Мы выявили трех персонажей и их основные задачи:

Участник

• Чат и быстрые созвоны.
• Участие в мероприятиях.
• Хранение и обмен файлами.

Докладчик

• Подготовка материалов для выступления.
• Выступление.

Модератор

• Организация мероприятий.
• Модерация мероприятий.

4. Улучшили структуру сервиса

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

5. Подготовили концепцию интерфейса

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

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

b) Лучшие практики: разместили меню по вертикали — в горизонтально ориентированных интерфейсах так помещается больше полезной информации.

c) Изменили группировку разделов в меню и сократили количество разделов на верхнем уровне, чтобы упростить навигацию.

6. Нарисовали макеты ключевых сценариев

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

Чаты

a) Вынесли «Чаты» на первый уровень меню, потому что ими пользуются чаще всего.

b) Добавили пиктограмму, чтобы можно было быстрее найти группу.

c) Сгруппировали похожую функциональность в один раздел. Например, «Адресную книгу» и «Мои контакты» — в раздел «Контакты».

Лучшие практики:

d) Cообщения одного автора, которые он отправляет друг за другом в течение короткого периода времени, объединили визуально в «монолог».

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

Проведение мероприятий

a) Поскольку в сервисе все видео отображаются в формате 16:9, в макете мы выделили пространство под видео в этом же формате.

b) Добавили возможность видеть большое количество участников.

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

d) Сгруппировали кнопки по функциональности: снизу — кнопки для управления созвоном и интерфейсом, сверху — кнопки для просмотра контента.

Лучшие практики:

e) Проведение мероприятия оформили в темном стиле, чтобы сделать акцент на видео и снизить нагрузку на глаза.

f) Отделили модераторов и докладчиков от участников.

Мероприятия

a) Завершенные события разместили над текущими. Чтобы увидеть их, нужно прокрутить страницу вверх или перейти по ссылке «Прошедшие мероприятия».

b) Добавили возможность быстро принять приглашение.

c) Сделали быстрый вход в мероприятие по ID.

d) Информацию в карточке мероприятия сгруппировали в смысловые блоки, чтобы пользователю было проще ориентироваться.

Лучшие практики:

e) Добавили напоминание о событии, которое скоро начнется.

f) Если организатор и пользователь находятся в разных часовых поясах, то мы показываем время, актуальное для пользователя.

g) Из карточки мероприятия можно связаться с модератором.

7. Проверили ключевые сценарии в ходе исследований

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

План каждой итерации

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

Примеры решенных проблем

Пример 1

😕 Проблемы, обнаруженные во время исследования:

a) Пользователи не понимали, что «Календарь»/«Список» — это переключатель, потому что он был оформлен в виде пиктограмм.

b) Пользователи не понимали ярлыки мероприятий.

c) Не было единой пиктограммы входа в мероприятие, а кнопку входа пользователи не замечали.

👍 Решения:

d) Доработали переключатель: пиктограммы заменили на текст.

e) Ярлыки мероприятий заменили на текст.

f) Сделали единую пиктограмму входа, а кнопку входа сделали более заметной.

Пример 2

😕 Проблемы, обнаруженные во время исследования:

a) Пользователи не понимали, что именно им предлагается настроить.

b) Не понимали, как работают кнопки камеры и микрофона.

👍 Решение: полностью обновили интерфейс.

8. Дорисовали остальные сценарии

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

9. Создали графический дизайн

После проектирования интерфейса и отработки логики системы мы перешли к графическому дизайну:

• выбрали несколько ключевых страниц, придумали и согласовали дизайн для них;
• подготовили UI Kit с набором уникальных компонентов, чтобы разработчики в будущем смогли создать любые необходимые страницы в интерфейсе.

Шрифт

Выбрали Open Sans — проверенный нейтральный бесплатный шрифт, который точно отображается во всех браузерах.

Цвет

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

Экраны в графическом дизайне

a) Чтобы повысить узнаваемость бренда, добавили паттерн. Разместили паттерн на фоне, чтобы он был заметным, но не отвлекал от работы.

b) Добавили возможность легкого брендирования для клиентов IVA ВКС за счет использования акцентных цветов, которые можно заменить.

10. Передали материалы разработчикам

В составе решения для интерфейса IVA ВКС мы передали разработчикам:

• отчет с результатами исследований и рекомендациями;
• интерактивный прототип в InVision (700+ страниц);
• графический дизайн (70+ уникальных экранов и элементов в UI Kit);
• описание поведения интерфейса при адаптиве;
• проект, экспортированный в Zeplin;
• исходники в Sketch.

Спасибо!

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

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

Над интерфейсом системы IVA ВКС работали: Диана Бурмистрова, Вера Ерохина, Алексей Козлов, Алексей Нарбеков, Ольга Крюкова, Борис Мельниченко.

Кейс также можно посмотреть в нашем портфолио на Behance.