Как я улучшал интерфейс 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

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

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

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

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

Это же касается чата, тут тоже проблема выглядит надуманной. Этот функционал уже есть - вы можете написать человеку из блока "контакты". Переписки появятся в приложениях. Зачем допиливать интерфейс чатов, если пользователи пишут о другой проблеме. На скринах написано - перепутал общий чат и персональный чат. Речь идет о чате конференции, а не о личных сообщениях. Тогда уж надо было работать с интерфейсом выбора получателя сообщений - всем или кому-то лично - там действительно есть куда улучшать.

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

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

10
Ответить

Ответил вам в следующем комментарии 

Ответить

Спасибо за статью, было очень познавательно! Можете рассказать поподробнее про количественное исследование - использовали какой-то сервис для его проведения и на основе чего составляли вопросы в нём?

1
Ответить

Александр, я не использовал никакого сервиса, предназначенного именно для UX исследований. Свою работу я выстраивал в Miro. Прикрепляю ссылку на борд со своим исследованием, можете посмотреть :)

Как я проводил исследование? 
1. Я начал с изучения самого приложения, читал про функции на сайте Zoom и тестировал их.
2. Дальше я проводил глубинные интервью с пользователями, чтобы понять их боли. Это все дает необходимое погружение в тему 
3. Проводил AВ тестирования, выбирал какой-то пользовательский сценарий и просил респондента пройти его. Так я наблюдал за опытом пользователя и делал выводы :)
4. Читал отзывы в Appstore, сохранял повторяющиеся жалобы
5. Потом составил количественный опрос в Google Forms и распространил среди студенческих бесед. Так я подтвердил или опровергнул идеи из интервью, отзывов и тестирования
6. В ходе работы я создавал еще несколько опросов и спрашивал пользователей, если появлялись вопросы

Как-то так, надеюсь, ответил на ваш вопрос

1
Ответить

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

1
Ответить

Спасибо! Понравилось качество прототипа: все плавно, прям как в нативе iOS) Это надо еще отдельно изучать как делать такие micro-interactions. Хорошо сейчас есть интерактивные компоненты, хоть и в бете)

1
Ответить

Большое спасибо за развернутый отзыв, я постараюсь конструктивно ответить!

1. С проблемой включения звука полностью согласен. Эта функция отлично реализована в упомянутом мной Whereby

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

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


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

Еще раз спасибо за комментарий, может, я что-то прояснил в основаниях тех или иных решений

1
Ответить