Рефакторинг дизайна Telegram

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

Примечание. Кейс будет состоять больше из моих рассуждений и объяснений, как я пришел к определенному решению. Также постараюсь донести исходную идею.

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

C течением времени в Telegram скапливается столько барахла: мертвые переписки; каналы, которые никогда не будете читать, но себе в этом не признаетесь; боты, которых пару раз потыкали ради интереса и забыли; еще есть рабочие чаты, тематические чаты, чаты друзей, чат друзей для обсуждения именно определенной темы, семейные чаты, чат кружка ребенка, чат школьного класса ребенка…

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

По крайней мере пользователи на Android уже имеют группировку в каком-то виде, самое известное решение — Plus Messenger (неофициальный клиент Telegram от сторонних разработчиков).

Проблема этого решения в том, что оно группирует по сущностям, то есть отдельно каналы, чаты, групповые чаты, суперчаты… Но люди подписываются на каналы, вступают в чаты по определенным потребностям и интересам: для развлечения; по работе; чтобы знать, что происходит рядом; чтобы потупить… И надо группировать именно по интересам, пока лучше делать это вручную.

Теперь перейдем реализации группировки.

Самое распространенное решение — табы, но их нецелесообразно имплементировать в Telegram:

• Если ставить их в верхней части, то будет неудобно каждый раз дотягиваться, чтобы переключать. Хотя обычно табы дополняются горизонтальными свайпами для быстрого переключения, но их нельзя использовать, так как горизонтальные свайпы уже заняты в экране чатов — для вызова спрятанных кнопок: удалить, архивировать, прикрепить.
• В нижний части табы выглядят как подписи к пиктограммам.
  
• Сгенерированные пользователями названия к табам будут длинными, следовательно, табы будут состоять из обрезанных слов, а это выглядит не очень. Ещё надо учитывать другие языки, на которых Telegram работает, в большинстве этих языков количество букв в слове больше, чем на том же английском.

Дальше откинул идею с окнами. Паттерн «оконных вкладок» можно наблюдать при переключении вкладок в браузерах, в многозначности мобильной ОС. Не прошла эта идея по двум причинам

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

Поэтому я остановился на системном решении — контекстное меню iOS. Его уже используют для переключения между аккаунтами в iOS-версии Telegram.

Контекстное меню практично, потому что в этом случае мы следуем исходному паттерну — пользователя не надо будет обучать ещё раз.

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

Изначально исходный тезис этого блока был в том, что в iOS-версии Telegram нет локального поиска, если не учитывать Shared Media — нет возможности поиска именно в конкретном чате или канале. Есть только глобальный поиск, который ищет по всему вашему списку.

После написания этого блока в октябре прилетает обновление 5.12.1 для iOS-версии Telegram с описанием "Improved search. When searching for messages in a chat, tap on the number of results to view them as a list..." и я понимаю, что поиск имеется, потыкав в разные места интерфейса, я его обнаружил. Надо было нажать на название канала или чата в панели навигации — и спустится небольшая панель с кнопками: поиска, выключения уведомлений и просмотра информации.

Для меня это стало откровением, сильно возмутился — как я должен догадаться, что на него можно было нажать? Оно не обозначено никаким цветом, иконкой, плашкой и так далее. Я активно использую Telegram с 2015 года, и для меня поиск всегда был болью в iOS-версии, поэтому, если мне надо было найти что-то конкретное в конкретном канале или чате, я сразу шёл за комп.

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

Сам процесс: свайпнуть влево соответствующий канал или чат в списке результатов глобального поиска и нажать на кнопку Search in — и останутся только релевантные результаты выбранного канала или чата. А чтобы вернуться к общему поиску, надо нажать крестик, который появится в подзаголовке выше.

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

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

Самый простой способ — задвинуть аватарку к левой части к кнопке назад, а вместо неё поставить кнопку звонка, например, как в Facebook Messenger.

Но не хотелось, чтобы Telegram был похож на Facebook Messenger, да и не хотелось менять устоявшиеся привычки другого пласта аудитории. В этом случае по привычке все тянутся в правый угол, чтобы посмотреть номер, логин, аватарку или заблокировать и так далее. Принимая во внимание эти обстоятельства, решил попробовать найти другое место.

И пришел к этому:

Наверняка первая мысль, которая у вас появилась, — напрямую позаимствовано у iMessage. Не совсем так, это доработанная версия панели стикеров самого Telegram, только убрал переключающую кнопку, чтобы она была сразу на виду.

Итерация подбора:

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

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

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

Единственный минус, который имеет последний вариант, — если пользователь пользуется кастомной клавиатурой, цвет плашки под таскбаром может не совпадать с цветом кастомной клавиатуры.

Таскбар будет меняться в зависимости от сценария:

• В обычной переписке все будет включено.
• Если у вас есть канал, появиться кнопка для переключения режима уведомления при его открытии.
• В групповом чате, в зависимости от настройки чата — разрешено ли групповые звонки или нет, будут кнопки вызова.
• А при взаимодействии с ботами появится кнопка меню.

При желании можно будет отключить таскбар или же настроить под себя.

Кнопки звонилки никуда не уходят с экрана профиля

Ещё одна не сильно удобная особенность в Telegram — форматирование текста. Большинству эта функция не важна и в следствии не ощутим дискомфорт, но тем, кто ведёт каналы (в особенности на смартфоне), требуется чуть больше усилий.

Не могу сказать, что нынешнее решение плохое, это не так, по приоритету в тултипе (всплывающая плашка) оно стоит в правильном месте.

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

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

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

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

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

2. Или можно задействовать область клавиатуры, так как клавиатура не нужна после выделения.

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

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

Конечно же, можно установить локальный PIN-код и даже дополнительно включить опцию в iPhone, чтобы после 10 попытки входа все данные стёрлись, но есть вероятность, что товарищ майор настойчивый и применит административные методы воздействия или же в худшем случае насильственные методы — два удара в печень открывают любые замки. Но это конечно невозможная ситуация!

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

Это все я ввел к тому, что надо бы сделать более изощренный метод локальной защиты. Чтобы волки были сыты и овцы целы — как бы открыл доступ к Telegram, но на самом деле нет.

Можно включить альтернативный PIN-код, который при вводе его будет вызывать следующие действия по выбору:

• Скрыть отдельные чаты. После ввода PIN-кода будут скрыты выбранные чаты с общего списка.
• Скрыть все. Все будет скрыто, но самое главное — взамен будут сгенерированы другие чаты с псевдореальными людьми и диалогами, чтобы минимизировать подозрение.

Дополнительно поможет следующая опция:

• Сигнал бедствия. Вначале нужно выбрать один и более контактов. При вводе альтернативного PIN-кода — ЧП, контакт сразу же получит геолокацию в реальном времени и три-четыре снимка с фронтальной камеры, которые будут сделаны в течение первой минуты, после будут записываться 35 секундные аудио и делаться два снимка за время сессии, так как неизвестно, когда сессия закончится и выключат телефон. Чтобы как-то обеспечить передачу всех этих данных, Telegram будет запрашивать подключение к сети для псевдоподгрузки диалогов после ввода альтернативного PIN-кода, а на самом деле передавать записи.

Чтобы не спалить, что альтернативный PIN-код активирован, после его ввода в настройках будет выглядеть как деактивирован.

#telegram