Как я улучшал интерфейс Zoom. Тестовое в школу Яндекса

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

Как я улучшал интерфейс Zoom. Тестовое в школу Яндекса

Задание

Часть 1

  • Исследовать проблемы Zoom
  • Выбрать 2 самые острые проблемы
  • Спроектировать возможные решения для мобильной версии программы
  • Оформить свои мысли в виде презентации на 15 слайдов

Часть 2

  • Записать 2-х минутное видео с кратким рассказом о вступительном задании

Часть 3

  • Приложить портфолио, но об этом речь не пойдет

Итоговое видео

Если вам не интересны тонкости проекта, то сразу предлагаю посмотреть то самое 2-х минутное видео с итогами моей работы :)

Как я улучшал интерфейс Zoom. Тестовое в школу Яндекса

Процесс решения задания

Я изначально принял решение заниматься UX проблемами, так как в 90% случаев редизайн не оправдан, требует значительных затрат и заставляет пользователей привыкать к новому интерфейсу. Это неоправданно для сервиса с такой огромной аудиторией. А вот локальные улучшения в удобстве пользования не потребуют больших затрат и принесут больше пользы

  1. Исследование
  2. Выявление и приоритизация проблем
  3. Генерация идей и выбор лучшей
  4. Прототипирование
  5. Тестирование
  6. Исправление ошибок
  7. Результат

Шаг 1. Исследование

  • Изучил все функции Zoom, открывая для себя неочевидные возможности сервиса и тестировал их, созваниваясь со своими друзьями. На созвонах я попутно задавал общие вопросы по сервисам видеосвязи, слушал истории о проблемах. В результате я остался с кучей непроверенных ошибок, проблем и багов
  • Посмотрел отзывы в AppStore (увы, петь хором в зуме вряд ли получится)
Как я улучшал интерфейс Zoom. Тестовое в школу Яндекса
  • Исследовал основных конкурентов. Открыл для себя Whereby, очень удобное и красивое приложение, но в количестве функций заметно уступает зуму
1. Первый экран при запуске           2. Главная            3. Экран конференции Скриншоты из приложения Whereby
1. Первый экран при запуске           2. Главная            3. Экран конференции Скриншоты из приложения Whereby
  • Чтобы проверить насколько актуальны найденные проблемы, я провел количественное исследование
Пример вопроса с ответами
Пример вопроса с ответами

Шаг 2. Приоритизация проблем

В результате исследования я отобрал 9 найденных проблем

Проблемы участников

  1. 55% путают общий чат и личные сообщения
  2. 86% опрошенных когда-то забывали в зале ожидания
  3. 87% не могли найти ссылку перед началом постоянной конференции
  4. 38% долго искали функцию поднять руку
  5. Посторонние участники/хулиганство
  6. Непонятный язык интерфейса. Предполагаю, что это машинный перевод

Проблемы организаторов

  1. 74% не могли отключить зал ожидания
  2. 88% не могли разрешить демонстрацию экрана
  3. Посторонние участники/хулиганство

На этом этапе мне предстояло выбрать 2 самые острые проблемы, но как? Я начал перебирать некоторые методы приоритизации и решил остановиться на RICE, но тут же столкнулся с тем, что определить охват и трудозатраты я не могу из-за отсутствия метрик и опыта

  • Reach — охват
  • Impact — влияние
  • Confidence — уверенность в вашей оценке охвата, влияния и трудозатрат
  • Effort — трудозатраты

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

1. Проблема путаницы между общим и приватным чатом


2.Проблема безопасности, зала ожидания и поиска ссылок

Обоснования проблемы чата

  • В отзывах в Appstore я нашел много отрицательных комментариев про чат, люди путали общий чат и личные сообщения и писали не туда
  • Количественный опрос подтвердил наличие проблемы
Как я улучшал интерфейс Zoom. Тестовое в школу Яндекса

Обоснования проблемы безопасности, зала ожидания и поиска ссылок

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

Шаг 3. Решение проблемы путаницы между общим и приватным чатом

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

Экран конференции

  • 90% опрошенных никогда не использовали функцию «Поделиться» в мобильном приложении. 70% опрошенных пользуются чатом, поэтому я поменял эти функции местами
Экран конференции. Мое решение
Экран конференции. Мое решение

Экран с диалоговыми окнами

  • Диалоговые окна чата выглядят и работают как в обычных мессенджерах
  • Общая беседа всегда закреплена в начале страницы
  • Чтобы начать личный диалог с другим участником нужно нажать на него в списке ниже
Диалоговые окна. Мое решение
Диалоговые окна. Мое решение

Личный чат с участником

  • Добавилось время отправки сообщения в чаты
Чат с участником. Мое решение
Чат с участником. Мое решение

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

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

  • Респонденты с легкостью выполняли поставленные задачи
  • Респонденты не путались среди чатов
  • Сократилось количество необходимых шагов для выполнения задачи

Шаг 4. Решение проблемы безопасности, зала ожидания и поиска ссылок

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

Как это работает?

Как я улучшал интерфейс Zoom. Тестовое в школу Яндекса

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

Главный экран

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

Понимая, что у Zoom очень широкая целевая аудитория, я заложил 3 уровня взаимодействия для пользователей с разным опытом

Для обычных пользователей

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

Для опытных пользователей

  • Иконки. Удалить нажав на иконку корзины, или скопировать ссылку, нажав на соответствующую иконку. Экономия одного действия
Управление через иконки
Управление через иконки

Для продвинутых пользователей

  • Жесты. Удалить, свайпнув влево. Максимальная быстрота выполнения действия
Удаление по свайпу влево
Удаление по свайпу влево

Информация о конференции для организатора

  • Раздел с участниками для администраторов
Информация о конференции для организатора
Информация о конференции для организатора

Участники

  • Теперь организатор конференции может удалить или назначить соорганизатором участника до начала конференции
  • При нажатии на деструктивное действие «Удалить» система запросит подтверждение
Участники в информации о конференции
Участники в информации о конференции

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

Я протестировал свой вариант на 5 студентах. Механика использования понятная, но респонденты хотели бы иметь больше контроля над системой

+ Респонденты с легкостью выполняли поставленные задачи и использовали функционал

- Респонденты не понимали, когда конференция будет добавлена в расписание, а когда нет

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

Исправление ошибок

  • При переходе по ссылке на постоянную конференцию, участник сможет решить добавлять конференцию в расписание или нет
Уведомление о добавлении конференции в расписание
Уведомление о добавлении конференции в расписание
  • Появилось всплывающее уведомление об успешности действия «Скопировать ссылку»
Подтверждение успешности действия
Подтверждение успешности действия

Заключение

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

Спасибо, что прочитали мою статью, буду рад получить фидбек :)

Связаться со мной в Telegram

40
27 комментариев