Создание улучшенного интерфейса для мобильных чатовых приложений

Общаясь со своими друзьями, я часто ловлю себя на мысли, что наличие действия или команды в определенной части приложения было бы очень кстати. Я долго размышлял над тем, как привнести лучший накопленный опыт и фичи в приложение чата. Это натолкнуло меня на проведение детального анализа прошлого опыта и я внес все в документ. Такой анализ помог мне вынести несколько идей как усовершенствовать опыт использования чата. Данная статья — симбиоз коллективных пожеланий и исследований, в которой все идеи объединены в концептуальное приложение содержащее гармоничный язык дизайна.

Этот пост содержит идеи, которые объединены под заголовками с разделами:

Целесообразность

Описывает проблему и общее описание предложенного нами решения.

Визуальный дизайн

Мы обсудим как и почему визуальный дизайн работает в UI с небольшим описанием свойств выбранного нами стиля и почему мы выбрали именно его, а не другой.

Дизайн в действии

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

Начальный экран

Визуальный дизайн

Мы перепробовали около десятка возможных видов экрана для конечного вида интерфейса. И теперь он выглядит так:

Начальный экран

Окно чата

Целесообразность

Современные чатовые приложения информируют вас о том, что сообщение, которое вы отправили, было получено вашим другом. В данный момент это уведомление имеет вид маленькой иконки (обычно в виде «галочки») рядом с написанным текстом. Это слишком малозаметно для начинающего пользователя. Это как в анекдоте: моя мама начала использовать чатовое приложение. Она отправляла мне сообщение и подходила ко мне через время с вопросом, получил ли я его?. Ей было тяжело разглядеть галочку, которая стала синей. Поэтому, ей приходилось надевать очки, чтобы рассмотреть ее.

Визуальный дизайн

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

chat bubbles

Дизайн в действии

chatbubble

Я добавил небольшую деталь — «моргающий глаз». Это дает понять, что вторая сторона общения в данный момент читает сообщение. В момент, когда «глаз» перестает «моргать» и становится статичным, можно утверждать, что окно чата закрыли и ответят позже.

Уведомления

Целесообразность

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

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

Дизайн в действии

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

notification

Индикаторы сообщений

Целесообразность

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

Визуальный дизайн

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

Дизайн в действии

message-types

Групповые «лайки»

Целесообразность

Эту фичу я хотел видеть очень давно. Большую часть времени в групповых чатах (в которых происходят всякого рода обсуждения), возникает необходимость некоторого положительного одобрения вместо написания сообщения с текстом: Я согласен". Для этого теперь есть возможность просто тапнуть кнопку «лайка».

Дизайн в действии

liking

Программы, которые использовались для создания данного интерфейса:

Sketch

Визуальная часть интерфейса была создана в Sketch. Если вы UI дизайнер и у вас нет этой программы, вы многое теряете.

Самое подробное руководство по дизайну в Sketch

Quartz Composer

Все прототипы, показанные выше, сделаны в Quartz Composer от Apple.

Quartz Composer, Facebook Origami и Sketch для прототипирование интерфейса Apple TV

Origami

Анимация интерфейсов создана в Origami, Quartz Composer плагин Facebook.

Quartz Crystal

Данная программа конвертирует прототипы, созданные в Quartz Composer, в видео файлы высокого качества.

FFmpeg

FFmpeg конвертирует видео файлы в .gif, которые вы видели на странице.