Как я улучшал интерфейс Zoom. Тестовое в школу Яндекса
Совсем недавно Яндекс объявил об открытии летних школ по 5 направлениям, одним из которых был дизайн. Я решил попробовать и предложил свое решение тестового. Цель этой статьи — поделиться итогом и рассказать о сложностях на пути. Как любой студент, буду крайне рад получить комментарии по работе
Задание
Часть 1
- Исследовать проблемы Zoom
- Выбрать 2 самые острые проблемы
- Спроектировать возможные решения для мобильной версии программы
- Оформить свои мысли в виде презентации на 15 слайдов
Часть 2
- Записать 2-х минутное видео с кратким рассказом о вступительном задании
Часть 3
- Приложить портфолио, но об этом речь не пойдет
Итоговое видео
Если вам не интересны тонкости проекта, то сразу предлагаю посмотреть то самое 2-х минутное видео с итогами моей работы :)
Процесс решения задания
Я изначально принял решение заниматься UX проблемами, так как в 90% случаев редизайн не оправдан, требует значительных затрат и заставляет пользователей привыкать к новому интерфейсу. Это неоправданно для сервиса с такой огромной аудиторией. А вот локальные улучшения в удобстве пользования не потребуют больших затрат и принесут больше пользы
- Исследование
- Выявление и приоритизация проблем
- Генерация идей и выбор лучшей
- Прототипирование
- Тестирование
- Исправление ошибок
- Результат
Шаг 1. Исследование
- Изучил все функции Zoom, открывая для себя неочевидные возможности сервиса и тестировал их, созваниваясь со своими друзьями. На созвонах я попутно задавал общие вопросы по сервисам видеосвязи, слушал истории о проблемах. В результате я остался с кучей непроверенных ошибок, проблем и багов
- Посмотрел отзывы в AppStore (увы, петь хором в зуме вряд ли получится)
- Исследовал основных конкурентов. Открыл для себя Whereby, очень удобное и красивое приложение, но в количестве функций заметно уступает зуму
- Чтобы проверить насколько актуальны найденные проблемы, я провел количественное исследование
Шаг 2. Приоритизация проблем
В результате исследования я отобрал 9 найденных проблем
Проблемы участников
- 55% путают общий чат и личные сообщения
- 86% опрошенных когда-то забывали в зале ожидания
- 87% не могли найти ссылку перед началом постоянной конференции
- 38% долго искали функцию поднять руку
- Посторонние участники/хулиганство
- Непонятный язык интерфейса. Предполагаю, что это машинный перевод
Проблемы организаторов
- 74% не могли отключить зал ожидания
- 88% не могли разрешить демонстрацию экрана
- Посторонние участники/хулиганство
На этом этапе мне предстояло выбрать 2 самые острые проблемы, но как? Я начал перебирать некоторые методы приоритизации и решил остановиться на RICE, но тут же столкнулся с тем, что определить охват и трудозатраты я не могу из-за отсутствия метрик и опыта
- Reach — охват
- Impact — влияние
- Confidence — уверенность в вашей оценке охвата, влияния и трудозатрат
- Effort — трудозатраты
В итоге я приоритизировал, исходя из результатов количественных исследований. 95% опрошенных пользуются мобильной версией zoom как участники, поэтому я работал над проблемами участников. Так я выбрал 2 проблемы
1. Проблема путаницы между общим и приватным чатом
2.Проблема безопасности, зала ожидания и поиска ссылок
Обоснования проблемы чата
- В отзывах в Appstore я нашел много отрицательных комментариев про чат, люди путали общий чат и личные сообщения и писали не туда
- Количественный опрос подтвердил наличие проблемы
Обоснования проблемы безопасности, зала ожидания и поиска ссылок
- В Appstore многие жаловались на сложности поиска ссылок перед конференцией
- Негативные отзывы по поводу безопасности, хулиганы попадают в конференции
- В количественном опросе я подтвердил инсайт о сложности поиска ссылок перед началом конференции, а также выяснил, что многих забывали в зале ожидания в начале занятия
Шаг 3. Решение проблемы путаницы между общим и приватным чатом
Я остановился на том, чтобы сделать интерфейс чата внутри конференции, приближенный к популярным мессенджерам. Таким образом пользователи бы узнавали знакомые паттерны взаимодействия с интерфейсом и проходили бы сценарий интуитивно
Экран конференции
- 90% опрошенных никогда не использовали функцию «Поделиться» в мобильном приложении. 70% опрошенных пользуются чатом, поэтому я поменял эти функции местами
Экран с диалоговыми окнами
- Диалоговые окна чата выглядят и работают как в обычных мессенджерах
- Общая беседа всегда закреплена в начале страницы
- Чтобы начать личный диалог с другим участником нужно нажать на него в списке ниже
Личный чат с участником
- Добавилось время отправки сообщения в чаты
Тестирование решения
Для тестирования я давал задания респондентам по заранее заготовленным сценариям и смотрел, как они его проходят и с какими трудностями сталкиваются. Протестировав прототип на 5 студентах, я в целом остался доволен. Использование чата стало интуитивным и у респондентов не возникло проблем на протяжении всего сценария. Пару человек даже не заметили особых изменений, что очень хороший знак, ведь им не придется привыкать, а следовательно ругаться
- Респонденты с легкостью выполняли поставленные задачи
- Респонденты не путались среди чатов
- Сократилось количество необходимых шагов для выполнения задачи
Шаг 4. Решение проблемы безопасности, зала ожидания и поиска ссылок
Снова перебрав разные варианты решения, я остановился на расписании постоянных конференций для участников на главном экране. Решение хорошо тем, что в какой-то мере выполняет функцию команд в MS Teams, но при этом происходит все автоматически
Как это работает?
После добавления данной функции, встала необходимость добавить возможность управления и контроля как для участников, так и для организатора
Главный экран
- Появилось расписание конференций, сейчас я покажу основные функции и изменения
- Я объединил главную и страницу Конференции, потому что их функционал умещается на 1 странице без ущерба удобству пользования
Понимая, что у Zoom очень широкая целевая аудитория, я заложил 3 уровня взаимодействия для пользователей с разным опытом
Для обычных пользователей
- Меню. Нажать на 3 точки, чтобы увидеть все действия
Для опытных пользователей
- Иконки. Удалить нажав на иконку корзины, или скопировать ссылку, нажав на соответствующую иконку. Экономия одного действия
Для продвинутых пользователей
- Жесты. Удалить, свайпнув влево. Максимальная быстрота выполнения действия
Информация о конференции для организатора
- Раздел с участниками для администраторов
Участники
- Теперь организатор конференции может удалить или назначить соорганизатором участника до начала конференции
- При нажатии на деструктивное действие «Удалить» система запросит подтверждение
Тестирование решения
Я протестировал свой вариант на 5 студентах. Механика использования понятная, но респонденты хотели бы иметь больше контроля над системой
+ Респонденты с легкостью выполняли поставленные задачи и использовали функционал
- Респонденты не понимали, когда конференция будет добавлена в расписание, а когда нет
- Респонденты сомневались, что ссылка на конференцию была скопирована после нажатия на иконку скопировать
Исправление ошибок
- При переходе по ссылке на постоянную конференцию, участник сможет решить добавлять конференцию в расписание или нет
- Появилось всплывающее уведомление об успешности действия «Скопировать ссылку»
Заключение
В этом проекте я старался не делать ничего просто так, и это дало мне понимание того, насколько важно принимать каждое маленькое решение, основываясь исключительно на данных исследования. Моя работа не идеальна, но я удовлетворен процессом и результатом, потому что я улучшил свои навыки в UX-дизайне от начальной фазы исследования до прототипирования и пользовательского тестирования и решил некоторые проблемы Zoom.
Спасибо, что прочитали мою статью, буду рад получить фидбек :)
Связаться со мной в Telegram