Разберём лучшие практики создания чатов в мобильных приложениях!
Не будем врать себе и просто признаем тот факт, что мессенджеры для нас значат немало. Или много. Или очень много. Быть на связи, организовать встречу, напомнить о дедлайне, поделиться фотографией котика — при желании можно найти приложение практически для любой коммуникативной задачи и цели. Мы снова решили разобраться в том, что такое «хорошо» и «не очень хорошо», на этот раз на примере интерфейсов чата.
Рисунок 1 — Все рассмотренные интерфейсы
На первый взгляд, интерфейс чата довольно прост. Но при разработке появляется много вопросов: какие из элементов нужны, а какими можно пожертвовать, где их лучше расположить и как сделать общение пользователей максимально удобным.
Рисунок 2 — Фоны чатов (оранжевым выделены те, в которых цвет фона можно менять)
Фон обычно используется светло-серый или белый (только в Telegram и WhatsApp по умолчанию текстура); правда, в 4 приложениях из 10 фоновое изображение можно менять. Переписываться на фоне нейтральных оттенков нам предлагают по очевидной причине — яркая картинка может усложнять восприятие информации.
Блоки с текстом чаще всего имеют прямоугольную форму со скругленными углами и “хвостик”, направленный к аватарке. Выравниваются сообщения обычно по правому краю: ваши справа, собеседника — слева. Еще одна общая черта в оформлении всех чатов — ваше послание ярче ответа собеседника. Отличается только Slack: подложки у текста нет, выравнивание по левому краю (в этом пункте от традиции отступил и Yahoo Messenger), сообщение отправителя бледнее. Расположением элементов можно поиграть, главное, чтобы сочетание фона и текста было контрастным.
Рисунок 3 — Форма аватара и заставка, появляющаяся при отсутствии изображения пользователя
Аватар почти во всех приложениях круглый (или приближается к кругу), только Slack и WeChat остановились на квадрате. «Виртуальное лицо» собеседника вы будете видеть во время диалога всегда, а вот свое — только в 4 приложениях. Фото можно выравнивать по верхней границе блока с сообщением (больше половины рассматриваемых приложений), на панели инструментов сверху (VК, Telegram и WhatsApp) или по нижней границе текстового поля (Facebook Messenger).
Расположение даты вариативно: над текстовым блоком (6 приложений из 10), на плашке в верхней части окна (Viber и Skype), после имени (Yahoo Messenger) или под последним сообщением (Hangouts). В этих четырех приложениях дата отображается во время диалога постоянно.
Что касается времени, то Messenger, Skype и VK показывают его только после определенных действий (нажатие на сообщение или свайп вправо) — это позволяет увеличить область для вывода текста переписки. Остальные приложения сей факт игнорируют и показывают время на протяжении всей беседы.
Рисунок 4 — Поля для ввода текста
Кнопка отправить чаще всего видна не сразу, а появляется при вводе текста. Такой подход позволяет экономить место (например, Viber, Telegram и WhatsApp заменяют ею кнопку голосового сообщения). Приятное дополнение — анимированный переход от одной кнопки к другой. В большинстве приложений на месте кнопки — иконка. Только Yahoo Messenger и WeChat предлагают пользователю нажимать на текстовое поле «Send».
Функцию добавления контента 6 из 10 программ прячут за специальной кнопкой (чаще всего обозначается «+»). В остальных есть панель с иконками, закрепленная над или под строкой ввода текста. Все зависит от того, чему разработчик отдает приоритет: спрячет панель — оставит больше пространства для вывода сообщений; закрепит ее в поле видимости при переписке — повысит удобство и скорость прикрепления файлов.
Количество свободных строк, которые пользователь видит, когда набирает сообщение, как правило, равняется четырем. Блок для ввода текста растягивается вверх по мере заполнения знаками. Исключение — Pinterest: при наборе текста видно только одну строку, а скрол горизонтальный; правда, от программы для сохранения изображений большего мы и не ждем.
Почти все программы используют placeholder: в строке для ввода сообщения «висит» нейтральный текст — подсказка, помогающая пользователю сориентироваться: «Минимум 6 символов», «Введите текст» или более неформальное «Say your thing» (Tumblr).
Для того чтобы обратная связь во время диалога была более ощутимой, важно снабдить чат микровзаимодействиями. То, что сообщение прочитано, почему-то дает понять только половина приложений, а вот процесс «отвечания» отражают почти все чаты. Инструментом служит анимированный элемент («пишущий» карандашик) или текст («N. набирает сообщение...»).
Всё выше сказанное мы организовали в таблицу:
Рисунок 5 — Сводная таблица
Чаты Fingers
Решив разобраться, насколько удачны наши разработки, подразумевающие использование чатов, мы сравнили Razam и Shance с популярными мессенджерами. Вывод утешительный и вдохновляющий: делаем все правильно, однако проработать некоторые моменты не мешало бы.
Рисунок 6 — Интерфейс чатов Razam и Shance
1. В первую очередь сделаем больший акцент на микровзаимодействиях и добавим placeholder. А от линии в строке ввода текста без колебаний откажемся: освободится дополнительное пространство — и текст можно будет увеличивать.
2. Особенность Razam в том, что чаты “живут” только два часа, поэтому в отображении датынеобходимости нет. В случае с Shance последуем за разработчиками большинства приложений и вынесем ее над диалогом.
3. В Razam довольно сложная система с аватарами, возможны несколько вариантов отображения, и чтобы пользователь понимал, как его видят другие, добавим «свой» аватарв окно чата. В Shance такой необходимости нет, ведь свое фото всегда можно увидеть в настройках.
Все это мы внесли во внутренний документ Fingers Best Practices — «копилку» лучших интерфейсных решений. Думаем, у вас такой тоже есть. Если вдруг еще не обзавелись, советуем: экономит время, силы, нервные клетки и способствует внезапным озарениям :)
Помните о том, какую цель преследует ваш продукт. Например, для MVP достаточно нейтрального бэкграунда, контрастного текста, отображения аватара собеседника и отметки времени, когда адресат получил сообщение. Приятные мелочи всегда можно добавить по мере развития приложения.
Напрашивающиеся выводы
С одной стороны, общие тенденции стоит принимать во внимание хотя бы потому, что они проверены практикой. Иными словами, целиком и полностью уникальное приложение — не лучшая идея. С другой стороны, очевидно и то, что эксперименты в рамках разумного (а иногда и неразумного) приветствуются — главное, чтобы пользователь понял, принял, оценил.
И еще: фокус на деталях — плюс пятнадцать к успеху. Интерактивные элементы, создающие образ полноценного общения, окрашивают программу эмоциями, а значит, «оживляют» общение, вовлекая, вдохновляя и радуя пользователя. Ну, или, как минимум, не раздражая. ☺
