UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Новый взгляд на интерфейс чата мобильного приложения
Редакція
Редакція

Опубліковано • Оновлено

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

#ux

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

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

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

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

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

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

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

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

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

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

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

Окно чата

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

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

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

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

Уведомления

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

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

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

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

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

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

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

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

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

Групповые “лайки”

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

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

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

Sketch

Визуальная часть интерфейса была создана в Sketch. Если вы UI дизайнер и у вас нет этой программы, вы многое теряете. http://ux.pub/podrobnoe-rukovodstvo-po-dizajnu-v-sketch/

Quartz Composer

Все прототипы, показанные выше, сделаны в Quartz Composer от Apple. http://ux.pub/quartz-composer-facebook-origami-i-sketch-dlya-prototipirovanie-interfejsa-apple-tv/

Origami

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

Quartz Crystal

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

FFmpeg

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


Перевод статьи prabros.com

Топ коментарі (0)