Конкурс на дизайн для Android 2021

Задача конкурса — редизайн UI и UX голосовых звонков и видеозвонков для Android, как между двумя пользователями, так и в голосовых чатах.

English version

Срок подачи работ: 1 августа, 23:59 по Дубайскому времени.

Призовой фонд: не менее $30,000, из которых $10,000 — награда за первое место (если будет возможность присудить первое место одной из присланных работ).

Задача

  1. Разработать полноценный и завершённый концепт голосовых и видеозвонков — как между двумя пользователями, так и в голосовых чатах — для Telegram X на Android.
  2. Подойти с нуля к внешнему виду, продумать каждую деталь пользовательского взаимодействия с интерфейсами звонков.
  3. Унифицировать общие компоненты и логику интерфейса; уменьшить количество элементов, выполняющих одни и те же функции, но различающихся по поведению.
  4. Создать простые и доступные интерфейсы.

Работа победителя может быть реализована в Telegram X для Android в рамках одного из будущих конкурсов для разработчиков.

Формат работ

Ближе к концу конкурса @ContestBot начнёт принимать архивы с работами. Архив должен содержать все необходимые ресурсы для реализации Вашего дизайна в приложении: макеты, анимации, иконки, детальное описание принципа работы функций (если это необходимо).

  • Макеты могут быть реализованы в виде статичных файлов .png, а также анимированных .mp4 без звука для демонстрации анимаций.
  • Архив может также содержать исходники.
  • Если для демонстрации интерфейсов используются .mp4, все ключевые кадры должны быть также продублированы и в статичном формате .png.
  • Иконки должны быть исполнены в виде чёрных векторных ресурсов drawable с параметрами viewportWidth, viewportHeight 24x24 (цвет отображения определяется темой, а реальный размер отображения должен задаваться за счёт полей width и height). Можно использовать иконки Material.
  • Если используются сложные анимированные иконки (такие как махающий рукой человек в классическом клиенте Android), необходимо использовать формат lottie json или .tgs.

В списке макетов перечислены некоторые предложения относительно возможного содержимого архивов.

При оценке работ дополнительные баллы могут быть начислены за креативный подход к задаче облегчить разработчикам осмысление и внедрение дизайна. (Например, предоставив в дополнение к ресурсам в форматах .png и .mp4 макеты в Figma/Sketch.)

Критерии оценки

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

Любые анимации должны быть уместными и простыми для восприятия, не должны перегружать интерфейс или порождать желание поскорее дождаться конца анимации.

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

Идеальная работа из этого конкурса могла бы быть сразу же использована в качестве задания для конкурса на реализацию личных и групповых звонков в приложении Telegram X для Android.

Рекомендованный подход

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

Не пропустите также список макетов, рекомендованных к включению в проект.

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

Частные случаи

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

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

Управление вводом и выводом

Управление вводом и выводом должно адаптироваться в зависимости от встроенных и подключенных устройств.

  1. Управление микрофоном в личном звонке и голосовых чатах может быть одинаковым с точки зрения взаимодействия (с режимом push-to-talk при выключенном микрофоне). Единственное исключение — исходное состояние при создании звонка или присоединении к голосовому чату (в звонках включен, в голосовых чатах выключен).

  2. Управление вводом/выводом и выбором устройств должно работать одинаково в личных звонках и голосовых чатах всегда, когда это возможно. Наиболее очевидные режимы: а) Режим включено/выключено, когда доступно только два варианта; б) Режим мультивыбора, когда доступно несколько вариантов и вариант по умолчанию не может быть определен (например, выбор вывода звука при наличии нескольких подключенных устройств); в) Режим включено/выключено со скрытой возможностью выбора альтернативного варианта для продвинутых пользователей, когда установка по умолчанию известна (например, возможность изменить микрофон или динамик на встроенный при подключенных наушниках).

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

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

Микрофон

  1. Доступен только один микрофон, может быть обычным переключателем вкл/выкл
  2. Нет возможности говорить, только поднять руку (в голосовых чатах)
  3. Доступно два микрофона, устройство по умолчанию известно (например, подключены наушники с микрофоном, по умолчанию будет использоваться микрофон наушников, но может быть полезно иметь возможность переключиться и на встроенный микрофон)
  4. Доступно несколько микрофонов, используемый по умолчанию не известен (например, когда одновременно подключены аналоговый и беспроводной микрофоны).

Звук

  1. Доступны два встроенных динамика (самый частый случай), может быть просто вкл/выкл.
  2. Доступно только одно устройство вывода (только один динамик на некоторых планшетах).
  3. Доступны одно или несколько встроенных устройств, а также одно внешнее. Устройство по умолчанию определяется системой, но может пригодиться возможность переключить на любое из них.
  4. Доступны одно или несколько встроенных устройств и несколько внешних.

Видео

  1. Доступны две встроенные камеры (фронтальная и тыловая, самый частый случай)
  2. Доступна только одна встроенная камера (бывает, что есть только тыловая)
  3. Доступна возможность трансляции экрана (на некоторых устройствах может не быть, в личных звонках пока что невозможно одновременно делиться и экраном, и картинкой с камеры разными потоками)
  4. Отсутствует поддержка со стороны приложения собеседника (не может ни получать, ни отправлять)
  5. Присоединены внешние камеры / альтернативные источники видео (редкий случай, но можно рассмотреть)

Личные звонки

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

  2. Ограничений на логику интерфейса нет (кроме тех, что зависят от полученных прав в системе).

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

Голосовые чаты

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

Picture-in-Picture

При использовании режима картинка-в-картинке или его аналогов важно следовать следующему принципу:

  1. Если у приложения нет права на рисование поверх других приложений: использовать PiP в пределах приложения, а вне приложения — управление через системное уведомление.

  2. Когда есть право на рисование поверх других приложений, использовать PiP везде. Системное уведомление может по-прежнему использоваться для технических целей.

Дополнительные цели

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

Проверка микрофона

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

Информация о разрыве соединения

Текущий статус качества соединения не даёт понять, что произошёл полный разрыв соединения, и определить сторону, с которой он произошел — хотя иногда существует техническая возможность это установить.

Можно поддержать различные варианты статусов: помехи с другой стороны, помехи с текущей стороны и неустановленные помехи.

Рекомендованный список макетов

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

Личные звонки

  1. Входящий видео/голосовой звонок и процесс отклонения/ответа с установлением соединения
  2. Входящий видео/голосовой звонок при закрытом приложении (если отличается)
  3. Входящий видео/голосовой звонок с ясным отображением пользователя, которому звонят (для ситуации, когда в приложении используется несколько учетных записей одновременно)
  4. Исходящий голосовой звонок с процессом обмена ключами и установкой соединения
  5. Исходящий видеозвонок с процессом обмена ключами и установкой соединения
  6. Завершение видео/голосового звонка
  7. Прерывание и восстановление сети во время активного звонка
  8. Управление микрофоном в различных ситуациях
  9. Выбор устройства вывода в различных ситуациях
  10. Начало / конец трансляции видео с камеры
  11. Переключение камеры (например, с тыловой на фронтальную)
  12. Начало / конец трансляции экрана
  13. Переключение между трансляцией экрана и трансляцией видеопотока с камеры
  14. Начало / конец трансляции видеопотока от собеседника
  15. Поворот ориентации видеотрансляции с обеих сторон
  16. Отображение информации о том, что вторая сторона выключила микрофон
  17. Отображение информации о заряде батареи собеседника (когда уровень заряда низкий)

Голосовые чаты

  1. Создание голосового чата и подключение к нему
  2. Активный разговор между несколькими собеседниками (обновления статуса “говорит”)
  3. Создание и начало отложенного голосового чата
  4. “Отображать меня как…” до и после присоединения к голосовому чату
  5. Редактирование названия голосового чата
  6. Редактирование права говорить для новых участников
  7. Запись голосового чата
  8. Начало/конец трансляции видео с камеры
  9. Переключение камеры во время трансляции
  10. Начало/конец трансляции видео с экрана
  11. Начало/конец трансляции видео с экрана во время трансляции с камеры (и наоборот)
  12. Начало/конец трансляции видео от других участников
  13. Активный разговор между участниками с видео и полноэкранный просмотр
  14. Изменение громкости конкретных участников
  15. Цепочка запретить говорить — поднять руку — разрешить говорить
  16. Отключение звука от конкретного участника только для себя
  17. Изменение громкости звука экрана (отдельно от громкости микрофона)
  18. Отображение ограничения “видеотрансляция доступна только первым Х участникам”
  19. Picture-in-picture
  20. Завершение голосового чата

Интерфейс в чатах и списке чатов

  1. Отображение наличия активного голосового чата в сообществе в списке чатов
  2. Точка входа в голосовой чат
  3. Точка входа в создание голосового чата