Есть такой динозавр — ICQ. Вспомнили тот самый звук входящего сообщения? О да! Еще мне сразу вспомнилась учеба в универе: именно тогда я застал расцвет этого мессенджера. Правда, самим клиентом я пользовался другим, кажется, это был QIP. Сейчас уже точно и не вспомню. У Аськи был слишком навороченный интерфейс, мой молодой не мог с ним справиться. А еще были крутые номера, которыми все хвастались. Точнее хвастались количеством цифр в нем. У моего соседа по общаге был 5-значный. И это было круто.
А теперь к делу. Недавно Mail.ru решили организовать конкурс на дизайн мобильного приложения этого клиента. Я решил поучаствовать. Что из этого вышло, смотрите дальше.
Сначала выбор платформы: Android или iOS. Я выбрал первую, т.к. пользуюсь ей в данный момент.
По заданию нужно было сделать акцент на видеосвязи, но текстовые сообщения должны остаться и быть не менее доступны для пользователя. Какая может быть видео связь:
● видеозвонок
● видеосообщение
● видеоконференция
● видеострим
Какой из них выбрать нужно решить самому.
1. Сначала пробежимся по конкурентам
Скайп
Конечно, это главный конкурент. Скайп — это синоним видеосвязи. Приложение представляет собой 3 таба: последние действия, контакты и набор любого номера телефона для звонка. Мне понравилась плавающая кнопка, которая разворачивает список действий, которые можно выполнить: сообщение, звонок, видеосообщение и видеозвонок. И последняя — это запись и отправка новогоднего поздравления. Но такой функционал только на табе с последними действиями. На табе контактов это уже поиск друзей. И это плохо, потому что вид табов почти одинаковый и при быстрой работе с приложением постоянно путаешься.
Взаимодействовать с человеком можно начать, открыв диалог с ним. Голосовые и видео звонки осуществляются сверху, текстовые снизу.
Телефон
Я думаю, мечта любого разработчика — это когда люди пользуются его приложением вместо стандартного предустановленного приложения от Гугла. Так и здесь. Если ICQ заменит приложение “Телефон”, это будет полная победа, но эта миссия очень сложная, близкая к невыполнимой.
Структура. Тоже 3 таба: избранное, последние звонки, контакты. Интересный способ показа карточки контакта: всплывает снизу с возможностью свайпом вверх или вниз, соответственно, открыть полностью карточку или закрыть её.
Из особенностей: постоянно висящая стока поиска контакта с помощью клавиатуры или текста.
Hangouts
Гугловский менеджер в первую очередь для СМС переписок. Его интерфейс отличается от интерфейсов большинства мессенджеров. Нет табов. При запуске приложения открывается список диалогов в хронологическом порядке. Переключаться между разделами приложения можно с помощью левого меню, при открытии которых, кнопка меню превращается в кнопку назад. Это характерно и мобильным приложениям и даже веб-интерфейсам Гугла.
До этого момента я, как и многие, не обращали внимание на то, что из этого приглашения можно звонить (ссылка на приложение «Телефон») и связываться по видео.
С помощью плавающей кнопки можно связаться по видео, написать СМС и создать группу для переписки.
WhatsApp
Не прямой конкурент, но близкий. Приложение также поделено на 3 таба, но немного другие: вызовы, чаты (открывается по умолчанию), контакты. Кнопка звонка расположена сверху. А снизу голосовое сообщение, работа которого мне не понравилось: нужно непрерывно держать кнопку для записи и нельзя прослушать результат перед отправкой, анимация отмены слишком сложная. Концептуально, это текстовый мессенджер с возможностью звонить. Плюс: в табе “Вызовы” есть кнопка моментального вызова (как и в приложении “Телефон”).
Messenger (Facebook)
Отличается по дизайну от остальных мессенджеров. Так же все организовано табами, которых 4. В последний переместили все пользовательские настройки и тем самым избавились от всяческих вылезающих из-за краев менюшек. Экран чата аналогичен скаповскому.
Periscope
Модный сейчас стриминговый сервис. Приятный современный дизайн. Прост в использовании, поэтому стримят все, кому не лень.
Glide
Имеет 2 интересных решения, на мой взгляд:
1. В табе “Discover” показываются люди, которые находятся недалеко от тебя с сортировкой по расстоянию. Формат отображения — большая карточка на весь экран. Большая фотография, на которой можно все рассмотреть без перехода на страницу человека и кнопки “открыть диалог” и “скрыть пользователя”
2. Когда открываешь диалог с пользователем клавиатура не разворачивается, как это происходит в большинстве мессенджерах. На нижней панели центральное место занимает голубая круглая кнопка записи видео сообщения. Текстовое сообщение можно отправить нажав на иконку слева на этой же панели. Справа — отправка картинки.
Tango
Самый интересный мессенджер из тех, которые мне встретились. В нем даже можно играть на фоне разговора. Это не просто мессенджер, а минисоцсеть с профилями, лентой активности друзей и собственной лентой новостей.
Есть 2 варианта поиска людей. По текстовому запросу и вывод в виде стандартного списка. И рекомендуемые люди с выводом в красивом “карточном” виде. Второй вариант напоминает многие приложения знакомств (Badoo, Tinder и др.), где листаешь карточки людей и выбираешь собеседника.
Групповые чаты называются комнатами (приятное название). Красиво оформлен список этих комнат тоже в “карточном” виде и сама страница чата.
На стене своего профиля можно размещать как текстовое сообщение, так и видео, фото и аудио,
Еще можно отправлять сообщения людям из полного списка контактов телефона, даже если у человека не установлено приложение. Сообщение отправляется в виде СМС с ссылкой на установку приложения, конечно.
ICQ (на данный момент)
На табе последних чатов плохой аналог плавающей кнопки, понравившейся мне в скайпе. Имеет 2 функции: начать чат и начать групповой чат. Но по большому счету, только одну, потому что, начать чат можно нажав на пользователя. Таб контактов хорош наличием кнопки быстрого видеовызова. Страница чата — это аналог страницы в скайпе, но проще, с меньшим количеством функций.
2. Концепция
Задача состоит в смещении акцентов на видео-связи, но копировать Skype и надеяться на то, что все его пользователи “перелезут” на ICQ глупо. Стандартные мессенджеры, которых полно и все похожи друг на друга, не очень интересны. В них люди заходят только для того чтобы что-то отправить и нажимая на пуш-уведомление, когда что-то приходит.
Существует 2 типа развития: эволюционный и революционный. Я считаю, для этой задачи подходит больше второй. Нужно внедрить что-то новое и интересное, вокруг чего бы люди могли коллоборировать и возвращаться к приложению снова и снова.
Начнем со значения самого названия. ICQ расшифровывается как «I seek you», а по-русски «я ищу тебя». Раньше название имело только интернет-сущность: человека можно было найти в сети, зная его uin-идентификатор. Но сегодня в это можно вложить новый смысл. Я могу знать человека лично или узнать о нём, опять же, найдя его в соцсетях. Он, в свою очередь, географически находится в определенное время в определенном месте.
Таким образом получаем 3 составляющие одной сущности: человек, его географические координаты и время. Сущность — момент.
Жизнь человека состоит из моментов: плохих и хороших. Время проходит и в суете дней многое забывается. Но приятные моменты хочется запомнить. И нужно находить способ фиксировать его прямо здесь и прямо сейчас. Часто хочется поделиться моментом с конкретным человеком или рассказать всем друзьям. На помощь приходят социальные сети. Чем они плохи? Они полны фейковых страниц, рекламы, грязной политики, репостов сомнительных страниц и конкурсов. ICQ в данный момент уже превратилась из мессенджера в соцсеть, но не в полном смысле этого слова.
Я предлагаю продолжить развитие “социальности” приложения. Дополнительные социальные элементы мотивируют чаще заходить в приложение, проводить там больше времени. Как для того, чтобы посмотреть активность друзей, так и для того, чтобы чем-то поделиться.
Добавим такую сущность, как “Момент”. Это фиксация места, времени и мыслей или чувств человека с помощью видео, фото или текста. Результат можно размещать на своей стене и отправлять в диалогах.
3. Иконка приложения
Логотип и в тоже время иконку приложения, я считаю кардинально менять не нужно. Он узнаваем, не вызывает каких-то негативных ассоциаций. Единственное, его можно обновить, сделать более современным и аккуратным. Дешевые приемы добавления элементов видео на цветок тоже ни к чему.
Итого
Иконка приложения
4. Начинаем со структуры
Я решил отказаться от выезжающего левого меню с гамбургером — это сложно. Сделал 4 таба, в которых происходит вся работа с приложением.
Табы простоты, минимум нажатий и сразу перед глазами все возможности приложения. В этом плане приложение Youtube является трендсеттером. Его разработчики одни из первых начали использовать левое выезжающее меню с гамбургером и первые же от него отказались.
5. Запускаем приложение
Пощелкать прототип, приближенный к реальности можно на Invision.
5.1. Диалоги
Абсолютно новый интерфейс приложения. Здесь я избавился от табов второго уровня, которые тоже осложняют восприятие. В первую очередь показываются последние диалоги, по ним люди ориентируются чаще всего.
Панель с аватарками под шапкой приложения — это быстрый доступ к 7-ми популярным контактам и стрелка влево перекидывает в окно «общение», где находится много интересного (пункт 5.2).
Что мешает людям звонить в мессенджерах? Конечно возможность набора сообщения, ведь это мессенджер. Чтобы сместить акцент на видеозвонок, я переделал нижнюю панель. Теперь там 3 кнопки:
- Центральная — моментальный видеозвонок
- Левая — открывает набор сообщения
- Правая — быстрая отправка фото из галереи или снимок камеры
А если человек уже начал набирать сообщение, но вдруг решил позвонить, то в верхней панели дублируется кнопка звонка.
Общение
Окно делится на 2 части: друзья и комнаты.
Друзья. Это в первую очередь список всех друзей из ICQ в алфавитном порядке. Но также внизу еще один список контактов из адресной книги телефона. На эти контакты можно отправить СМС сообщение, внизу которого будет ссылка на приложение.
Поиск людей. Можно попасть сюда нажав на плавающую кнопку в предыдущем окне. Изначально показываются карточки рекомендуемых людей. Они слайдятся пальцем вверх. Если человек нажимает на блок поиска по тексту с лупой, то раскрывается клавиатура и найденные по запросу люди выводятся стандартным списком.
Комнаты — это лайфчаты, только с новым названием. Я хотел изменить это заморское слово на что-то более приятнее на слух и понятнее русскому человеку. Комната — удачная аналогия этому способу общения.
Здесь комнаты сразу выводятся в карточном виде, а при нажатии на иконку поиска они выводятся в виде списка с возможностью поиска по тексту.
5.2. Профиль человека
Перейду прежде чем рассказывать об окнах «Лента новостей» и «Ката моментов», перейду сначала к профилю, потому что там вводится новое понятие «Момент».
Момент
Сдублирую этот текст еще разок. Жизнь человека состоит из моментов: плохих и хороших. Время проходит и в суете дней многое забывается. Но приятные моменты хочется запомнить. И нужно находить способ фиксировать его прямо здесь и прямо сейчас. Часто хочется поделиться моментом с конкретным человеком или рассказать всем друзьям.
Сохранить момент очень просто. Всего несколько простых шагов:
- Выбор способа сохранения (фото или видео)
- Сохранение
- По желанию цветовая коррекция
- По желанию текстовое описание момента
- По желанию добавление участников момента
- Публикация
5.3. Лента новостей
Обыкновенная лента активности друзей в хронологическом порядке. Все просто, но именно она заставляет кучу народу залипать во всех соцсетях.
5.4. Карта моментов
Интерактив нравится всем. На основе карт существует много успешных проектов. Посмотреть что происходит рядом с тобой в данный момент очень интересно. Если выводить на карту моменты, произошедшие за последние 24 часа, они имею ценность, поскольку ограничены по времени. Кроме того, количество меток на карте не будет таким огромным, что по карте невозможно было перемещаться.
На картинке слева обычное состояние карты, а справа всплывающий блок при нажатии на метку карты.
6. Итого
Ключевые преимущества которые я бы хотел еще раз выделить:
- «Горячая» иконка звонка во всех списках людей
- Другой принцип общения в диалоге
- «Горячая» иконка звонка во всех списках людей
- Повышенная социальность приложения
- Простота навигации
- Карточки людей при поиске
- Наличие интерактива
Еще раз продублирую ссылку на прототип, где можно немного пощелкать.
Автор: aimh
