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

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

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

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

Группировка чатов

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

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

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

Plus Messenger​

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

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

Решение

Самое распространенное решение — табы, но их нецелесообразно имплементировать в 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 Designers

Taskbar

Когда работал над своим концептом дизайна аудиозвонков для конкурса 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-код активирован, после его ввода в настройках будет выглядеть как деактивирован.

0
64 комментария
Написать комментарий...
Максим Емельянов

про пин код - тема

Ответить
Развернуть ветку
Гриша Булыжников

Я так понимаю автор надеется на то, что в телеге прочитают эту статью, особенно мне понравился момент про права человека, куда ж без этого...и тут же возьмут его к себе на работу. Дуров уже сидит и думает как они существовали без этого раньше..

Ответить
Развернуть ветку
walkpryce
Автор

Не переживайте, Дурову не до этой статьи

Ответить
Развернуть ветку
3 комментария
Константин

вы не правы. Мой знакомый рисует для дурова стикеры. Ничего такого. Работа по удалёнке, это всё равно работа в телеграме.

Ответить
Развернуть ветку
1 комментарий
Yuri Trenin

Господа, а можно объяснить динозавру, что есть такого интересного и ценного в телеграмме? Почему я должен обязательно установить это приложение?

Ответить
Развернуть ветку
Semyon Krylov

Олдскульным я объясняю так
Телеграмм - это смесь ICQ, IRC и RSS в одном месте =)

Ответить
Развернуть ветку
Steve Evets

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

Ответить
Развернуть ветку
6 комментариев
Максим

Конкретно вы не должны. Ну а так на вскидку если сравнивать с конкурентами, то у whatsapp десктопный клиент привязан к приложению на телефоне. А через viber идет столько спама, причем не только в виде рассылок но и «посмотрите, очень важно!!! У нас новый стикерпак» что это просто невозможно, пришлось удалить

Ответить
Развернуть ветку
Гриша Булыжников

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

Ответить
Развернуть ветку
5 комментариев
Сергей Удалов

Сейчас половина всех сервисов работают через телеграм. Из полезного чем лично я пользуюсь:
1. Avinfobot - пробивает владельца автомобиля по номеру машины
2. В частности столкнулся с тем, что делал приглашения на свадьбу, и там была форма которую нужно заполнять типа имя фамилия И так далее. Так вот, когда заполняешь форму - она тебе падает в телеграмм сообщением. Безумно удобно.
И куча куча куча всего.

Ответить
Развернуть ветку
1 комментарий
Gen Ross

Паше нада монетизировать свою аудиторию. 

Ответить
Развернуть ветку
RK

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

Ответить
Развернуть ветку
walkpryce
Автор

Я бы вас попросил внимательно прочитать, прежде чем строчить комментарий:

1. Если говорить про звонилку на клавиатуре, то это не для вас, а для тех кто не имеет большого опыта работы с цифровыми продуктами. Не всем понятно что надо переходить в экран профиля. Я об это написал.

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

Ответить
Развернуть ветку
6 комментариев
walkpryce
Автор

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

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
walkpryce
Автор

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

2. Про свайп по чату, это системные решения самой операционки и ее надо учитывать, поэтому ваша полемика бессмысленна.

3. Вам там огромный онбординг показывают при первом использовании архивации

Ответить
Развернуть ветку
2 комментария
Тинькофф Бот

Группировка чатов будет реализована подобным образом, это уже добавлено в бета-версии клиента для MacOS – tele.cx/tgbeta/3963

Некоторые предложенные решения достойны внимания, спасибо!

Ответить
Развернуть ветку
Yes, Your Grace

А когда в мобильные (iOS)? И да - группировка только по типам чатов, но нет ручного варианта сортировки, как я понял?

Ответить
Развернуть ветку
2 комментария
Всеволод Волчанский

Про во время выделения не нужна клавиатура. Нужна, есть кейс с набором текста поверх выделенного. 

Ответить
Развернуть ветку
walkpryce
Автор

Да клавиатура нужна, особенна в айОС, начиная с айфон 6 эс она служит как для быстрой ориентации курсора по текстовому полю

Ответить
Развернуть ветку
PV

В Аське в QIP удобная группировка была про группам которую можно было отключать

Ответить
Развернуть ветку
Nik Luchnikov

Наивные, думают что Telegram не читают :)

Ответить
Развернуть ветку
Виктор

Всё уже сделано до вас и вполне удобно. 
Nicegram для ios, Telegraph и BGram для андроид. Попробуйте, Telegram'у есть чему поучиться.
А вот с безопасностью есть лучше варианты. 

Ответить
Развернуть ветку
Roman Kovbasyuk

Классный концепт, автор молодец. 

Похожий паттерн с воркспейсами реализовал Franz (агрегатор мессенджеров на маке). В телеге хаос с каналами и личной перепиской, наверное, бесит 99% пользователей. Но, хитрые продакты не спешат улучшать ux — мы бы все проводили меньше времени там если было бы удобно.. 

Как делали прототип? Framer/ собрали прямо под ios? 

Ответить
Развернуть ветку
walkpryce
Автор

After Effects

Ответить
Развернуть ветку
Даниил Фоминов

Про группировку чатов. Как узнать, что пришло новое сообщение в группу "Строительство" если ты находишься в "Садоводстве" ?

Ответить
Развернуть ветку
walkpryce
Автор

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

Второй момент, у вас еще остаются системные решения уведомление в шапке и на экране блокировки.

А при переключении в списке можно сделать счетчик

Ответить
Развернуть ветку
4 комментария
Roman Fixt

Есть уже подобный клиент для телеги - telefuel.com

Ответить
Развернуть ветку
zulus

еще нет

Ответить
Развернуть ветку
Антон

Про вкладки уже есть bgram Качайте бета версию. Такой удобной работы с вкладками нет нигде. Можно дать текстовое название или emoji значек. Добавленный во вкладку чат исчезает из других вкладок.
Таким образом к меня есть вкладки избранные все, только боты, юмор, работа со стикерами, мои личные боты ,Каналы по разработке , каналы на тему велосипеда и самоката

По форматированию там тоже продумано. Выделяет текст и появляется меню форматирования.

Ответить
Развернуть ветку
Nurdaulet Yermahanbet

успехов

Ответить
Развернуть ветку
Ilia Yarets

Лично для меня само важно это группировка и возможность поиска в этих группах

Ответить
Развернуть ветку
Vitaliy Kobytsia

в чем прототип делали?) спасибо

Ответить
Развернуть ветку
walkpryce
Автор

В After Effects

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку

Комментарий удален модератором

Развернуть ветку
61 комментарий
Раскрывать всегда