В начале декабря мы анонсировали мегаконкурс на редизайн мобильной ICQ. С каждым днем он набирал обороты, работы поступали все интенсивнее, и к завершению, 21-го февраля, у нас уже было 88 работ! Мы получили несколько интересных интерфейсных и идеологических решений по видеосвязи, и бонусом любопытные параллели с трендовыми сервисами. Было также и сказочное безумие с радужными единорогами в космосе, которого мы с нетерпением ожидали.

Задача


Задачей конкурса было сделать видеочат мечты. Предлагалось сместить акценты в интерфейсе продукта в сторону видеосвязи (звонки один-на-один, видеоконференции или онлайн-трансляции), не оставляя без внимания привычное текстовое общение. Важно, чтобы у пользователя складывалось впечатление простоты и привычности, повседневности видеообщения.

Цель


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

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

Жюри


Оценивали работы дизайнеры и менеджеры ICQ. Павел Лоуцкер и Константин Рубцов (менеджеры продукта). Коля Кучкаров (дизайнер) поставил очень много минусов, Джо Макгрин (дизайнер) рассказал о логотипах и прошелся по троллям, и я, Александр Сметанка (продуктовый дизайнер), взял на себя UI/UX и прочие штуки. В оценке нам помогали организаторы конкурса Вера Бондарева (дизайнер) и Дима Плешаков (менеджер по продукту).

Работы


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

Из минусов: иногда в интересных с виду концептах не до конца ясно, что означают элементы на экране и, к сожалению, это никак не объяснено. Конечно, были и те, кто скопировал текущий дизайн, изменив цвета и иконки.

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

Нетривиальное видеообщение


Лидерами стали идеи, которые выходили за пределы привычного интерфейса видеозвонков (как проработанные концепции, так и отдельные интересные механики).

Danial Siddiki предложил «Моменты» — общую видеоленту, из которой можно перейти к общению с автором. Хорошо акцентировал внимание на кнопке в таб-баре, которая запускает камеру.



Из губительных минусов — доступ к просмотру «Моментов»: он слабо заметен, расположен далеко не «под пальцем» как хотелось бы. Присутствует избыточное при каждодневном использовании препятствие «Введите название момента».

Александр Кочеванов тоже сделал «Моменты», но в другом формате: они доступны из профиля, а также на интерактивной карте. Под моментами можно оставлять комментарии.



Misha Bilenko миновал привычный сценарий звонков при помощи быстрого включения видео во время чата.



Yarik Bright захотел записывать звонки и трансляции.



Oleg Mishkorudnyy создал подборку из снимков, сделанных во время звонка, которая приходит в чат после его завершения.



Больше всех оторвался с интерфейсом любимчик Russian Design Cup Denis Shoomov. Сделал много всего, начиная с шикарной презентации и заканчивая анимациями. В случае с видео предложил ряд форматов.



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



Баблчат — пространство с бесконечными (что бы это ни значило) видеочатами и возможностью сортировки бесконечности.



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



Видеоконкурсы.

Трансляции


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



Вариант трансляции, который отличается не только цветом баллов, предложил Dmitriy Ivanov. В его версии трансляция ведется в режиме SplitView с двумя одновременно включенными камерами.



Denis Shoomov сделал похожую на интерфейс Apple Watch витрину.



Видеозвонок


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

Например, некоторые попытались скрасить общение видеоэффектами.

Alex Ovs и Vladislav Solomaha добавили эмоциональных масок в звонки и сообщения



Danial Siddiki предложил сердечки и совместный просмотр контента.



Pavel Zametniy разрешил рисовать во время звонка.



Путь к видеообщению


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

Отвязнее всех оказался Arsen Kolyba с ностальгическим ламповым дизайном.



Ico Maker с гигантоманией еще выгодно пронес ее в чат.



Очень просто и приятно у myinterface, опрятно у Danil Siddiki и Виталий Тамашин.



Сложнее стало из-за иконок и деталей у Dmitriy Ivanov, Kirill Yarovenko и Pavel Karpov



Были еще игры с превращением логотипа в камеру и контрол. Так сделали

Vova Sharapov и Edward B.



Еще один очевидный прием — вынесение камеры в список чатов или контактов. Им воспользовались Dmytriy Kravchenko Pavel Anpleenko Khokim Sharipov Alex Martinov Alex Kurlaev Ivan Demenev.



Fliqle, как и Pavel Anpleenko выше, тоже добавил камеру и определил пространство вокруг иконки, сделав из нее довольно крупную кнопку, что хорошо.

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

Чат-лист в виде карточек — не единственная идея, но на темном фоне и с цветными полосками получилось довольно стильно.



Немного о карточках


Кстати, о карточках. Они в тренде, их используют много и по-разному, не ограничиваясь тем, что предписывают гайдлайны material-дизайна.

Sascha Yeryomin отлично выделил новые входящие и использовал карточки в чате. Выглядит как игра!

К слову, он один из немногих, кто не сделал красную кнопку во время звонка (об этом ниже).



Slava Kornilov использовал карточки повсеместно, особенно привлекательно получились лайвчаты и трансляции.



Angela Rybina использовала карточки для просмотра людей и в целом сделала интересный поиск.



Kirill Yarovenko, Fliqle, Александр Кочеванов и Pinkten применили карточки в звонках.



Ilya Gruzhevski заполнил карточками звонки и трансляции, получилось цельно и приятно.



Евгений Першин применил карточки в звонках и витрине чатов.



Андрей Иноземцев использовал прием в презентации и эффектно оформил витрины лайвчатов.



Поле ввода


Изменить поле ввода тоже может быть выгодным решением. Самые смелые смогли на этом сыграть.

Vladislav Mikhailov сделал звонок возле поля ввода.



Сразу несколько участников для быстрой отправки видеосообщений добавили камеру с соответствующей иконкой: Slava Kornilov (летающие исходящие бабблы с неоновой подсветкой!), astract (andr.novojilov) и Vyacheslav Nazarov.



Самое интересное с полем ввода сотворил Denis Shoomov. Он разрешил из поля ввода делать что угодно и (внимание!) не создал второй ряд кнопок под ним, а совсем убрал текстовое стандартное поле, сделав из него кнопку поменьше (поле ввода, по сути, и есть кнопка, большая).



Красная трубка


Иконка трубки в современном мире заслуживает целого исследования и диссертации, как и иконка дискеты. Феномен красной трубки удивителен: три четверти дизайнеров сделали в видеозвонках акцент на кнопке завершения. Даже в наполненных интересными решениями концептах этот момент никак не обыграли, как будто совсем забыли о нем.

Большинство решений стандартные — трубка в кружке, посередине или с краю, окруженная контролами или без, с незначительными отличиями.

Например, у Nikita Kokarev, Roman Kryzhanovskyi, Sergey Korneev. Ну вы поняли.



Bogdan Pavlik, Extremal и Nick Voloshyn сделали сияющее завершение видеозвонка.



Alex Bogomazov изобрел нетривиальное закрепление собеседника к краю экрана, но трубку переизобретать не стал. Теперь это чемпионская трубка!



Даже в достаточно нагруженных решениях трубка в центре всего — так у Grisha Uglanov.



Nazar Moravskyi поступил иначе и поднял завершение звонка в правый верхний угол, может уже и далековато.



Эстетика, занятные детали и космос


Виталий Тамашин удачно расставил акценты, в целом получилось легко и красочно.



Slava Kornilov сделал все приятно и навел лоск, но логика страдает. Интересный ход с градиентом при выборе действия со звонком, но неясно, как это работает. Похоже, смахиванием можно поменять кнопки.



Китя Тороповский порадовал непостижимыми единорогами в космосе. Во-первых, это красиво.



Igor Kus предлагает вращать барабан, чтоб найти знакомства.



Leon Bakadorov добавил в фотографии интерфейс. Очень много красивых фотографий нашел, разных!

Увы, таких красивых фото нет у 99,99% пользователей. Всегда нужно стараться работать с реальным контентом.



Жесть


Таб-бар с яйцами от Саша Красный.



Pavel Anpleenko покорил наши умы.



Ниндзя-свайп от короля свайпов Daniil Antipin.



Jamil Lazarev высадился.



Ihor Mikhailov …



Alex Kurlaev



Edward B. напомнил все былое! К слову, многие наши пользователи уже не знают, что такое было, они молоды и юны.



Логотип


Многие ребята пронесли идею видеообщения в логотип. Отсюда вполне ожидаемые метафоры — камера, кнопка Play, объектив и диафрагма, скрещенные с цветком.



Ностальгические диафрагмы от Vyacheslav Nazarov и Den Kulinich.



Хочется отметить дизайнеров, которые попытались сделать что-то совсем странное.

Ivan Baryshev, Alexander Dadaev, Alexandr Pesenka, Vadim Zlygastev и Jamil Lazarev.



И наш бесспорный фаворит Pavel Anpleenko. Так цветок еще никогда не развевался!



Интересная подача



Александр Кочеванов удивил развернутым описанием аналитического процесса. Сравнил конкурентов, выделил ключевые функции, описал структуру, обосновал предложенные решения и сделал прототип. Почитайте, это интересно, но заголовок поста дерзкий!



Jamil Lazarev помимо космического логотипа сделал подробное описание своей работы и крутой прототип.



Eugene Kazakov подкупил визуальным подходом к концепту.



Denis Shoomov сделал все, что было можно, и даже больше: классные анимашки, хороший промо-сайт, все описал как следует. Умничка, в общем!



Самую колоритную презентацию сделал Андрей Кравчук. Трэш-анимация и 8-битные нотки сделали свое дело и покорили сердца любителей «Поллитровой мыши». На стиле! Фитц одобряет.



www.facebook.com/dlyareganasaytah/videos/1710084605871808

Победители


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

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

1–е место: Denis Shoomov



Очень масштабно и качественно подошел к делу и проделал огромную работу.

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

Отдельного внимания заслуживает роскошный сайт-презентация. Донес все идеи, разложил по полочкам, сопроводил прекрасными анимациями, иконками, гифками. Огонь!

Минусы

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

Есть придирки и недочеты. Смелый дизайн, безусловно, прекрасен. Но важно не переборщить со смелостью. Ретрограды могут назвать приложение слишком веселым и ветреным, а кого-то оно может просто отпугнуть. Можно придраться к метафорам некоторых иконок — над ними нужно еще серьезно поработать. Особых проблем не возникло, но иногда приходилось разбираться что же это может значить. Самое удивительная недоработка это усложнение отправки фрагмента. Быстрое начало съемки и катастрофический процесс с несколькими итерациями до видео-сообщения в чате. “Загрузка” в процентах свела на нет все старания. Для каждодневной функции это провал.

2-е место: Danial Siddiki



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

Минусы

Интерфейс выдержан в слишком классическом стиле, как будто это было тестовое задание, а не конкурс на создание концепта.
Усложнение на пути простого создания момента в виде предложения ввести его название. Логотип во время звонка совершенно дикая и непонятная по функциональности штука.

3-е место: Misha Bilenko



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

Минусы

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

Выводы


Работ оказалось на удивление много. Оказалось, что даже собрать их непросто: они были отправлены на конкурс не через rebound в Dribbble. В итоге мы собирали работы с различных файловых хостингов и сервисов. Похоже, механизм проведения конкурса оказался не так прост, как казалось. Спасибо энергичному Юре Ветрову за помощь в организации конкурса, сгладил многие углы.

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

Список участников
Саша Красный fotki.yandex.ru/next/users/sashkakrasniy/album/504265/view/1525623?ncrnd=9472
Влад Qdesign bit.ly/1KJO2FA
Михаил Шунин img-fotki.yandex.ru/get/4009/154870324.0/0_160866_7b95be2b_orig
Владимир Меркушев 13iangel.deviantart.com/art/ICQ-redesign-for-iOS-577364510
Pavel Anpleenko www.behance.net/gallery/32595947/New-style-design-ICQ
Angela Rybina www.behance.net/gallery/34023672/ICQ-Redesign-Concept
Taras Shypka www.behance.net/gallery/32768219/ICQ-Redesign-Concept-of-iOS-App
Pavel Karpov www.behance.net/gallery/33787796/ICQ-Redesign
Ilya Gruzhevski www.behance.net/gallery/33803116/ICQ-App-Redesign-Concept
Arsen Kolyba www.behance.net/gallery/33932972/ICQ-redesign-contest-application
Daniil Antipin www.behance.net/gallery/33220431/redizajn-mobilnoj-ICQ
Bogdan Pavlik www.behance.net/gallery/33785122/ICQ-iOS-App-Redesign-Concept
Kirill Yarovenko www.behance.net/gallery/33680852/ICQ-Redesign-Contest
Виктор snovaON www.behance.net/gallery/33512191/Redesign-For-ICQ-messenger-2016
Alex Tokker www.behance.net/gallery/33989698/ICQ-Videocall-Redesign
www.behance.net/gallery/33882426/ICQ-Competition-Redesign
Alina Holub www.behance.net/gallery/33913746/ICQ-Android-App-and-Icon-Redesign-by-Alina-Holub
Вадим Шатилов www.behance.net/wip/1668162/2830442
Nazar Moravskyi dribbble.com/shots/2524160-ICQ-redesign
Dmitriy Ivanov dribbble.com/shots/2524011-ICQ-App-Redesign-Concept
Edward B. dribbble.com/shots/2517118-icq
Extremall dribbble.com/shots/2469178-ICQ-iOS-App-Redesign-Concept
Roman Kryzhanovskyi dribbble.com/shots/2464034-ICQ-messenger
dribbble.com/shots/2454594-ICQ-app-Material-redesign-concept
dribbble.com/shots/2446817-ICQ-app-redesign-concept
Kirill Shapoval www.behance.net/gallery/34041416/ICQ-Redesign-Android
Victor Nikitin drugmedia.ru/blog/23
Fliqle dribbble.com/shots/2533217-ICQ-app-redesign
Vladislav Mikhailov dribbble.com/shots/2534226-ICQ-Video-Chat-Concept
Nick Voloshyn icq.dreams.global
Андрей Иноземцев luckysle7in.ru/icq
Alexander Dadaev www.behance.net/gallery/34164967/ICQ-VideoChat-App-Concept
Alex Kurlaev www.behance.net/gallery/34171831/ICQ
Александр Кочеванов habrahabr.ru/post/277447
Дмитрий Волков www.behance.net/gallery/34167719/mobilnoe-prilozhenie-Icq
Ico Maker www.behance.net/gallery/34190389/ICQ-Video-Chat-Concept
Виталий Тамашин www.dropbox.com/s/aoneo57k2vkkbep/icq.png?dl=0
Vova Sharapov dribbble.com/shots/2537833-ICQ-Neo
Slava Kornilov www.behance.net/gallery/34216153/ICQ-redesigne
Grisha Uglanov dribbble.com/shots/2539355-ICQ-app-redesign
Khokim Sharipov dribbble.com/shots/2539417-Icq-redesign
Vladislav Gavriluk dribbble.com/shots/2540390-ICQ-iOS-App
Danial Siddiki dribbble.com/shots/2540525-ICQ-App-Redesign-Concept
myinterface dribbble.com/shots/2540556-ICQ-redesign
Alexandr Pesenka dribbble.com/shots/2540591-ICQ-Android-App-Redesign-Concept
Edward B. dribbble.com/shots/2540746-ICQ-NewFinalFinalDone
Valeriy Vysotskiy dribbble.com/shots/2540747-ICQ-concept-redesign
Senya Ars dribbble.com/shots/2540751-ICQ-Redesign-concept
Nikita Kokarev dribbble.com/shots/2540806-ICQ-Redesign
Lev Pirogov dribbble.com/shots/2540824-ICQ-Redesign-concept
Sergey Korneev dribbble.com/shots/2540910-ICQ-Redesign
astract (andr.novojilov) dribbble.com/shots/2540960-ICQ-Purple-Redesign
Pavel Zametniy dribbble.com/shots/2540986-ICQ-vision
Pinkten dribbble.com/shots/2540987-ICQ-mobile-app-redesign
Aleksei Mazelyuk dribbble.com/shots/2541005-ICQ-Redesign-concept
Eygeny Gulin dribbble.com/shots/2541036-Icq-Redesign
Alex Ovs dribbble.com/shots/2541067-ICQ-Redesign-Concept
Dmytriy Kravchenko dribbble.com/shots/2541082-ICQ-Redesign-for-iOS
Vladislav Solomaha dribbble.com/shots/2541118-ICQ-android
Ivan Baryshev dribbble.com/shots/2541121-ICQ-Redesign
Misha Eliseev dribbble.com/shots/2541123-ICQ-Video-Gif-chat
Misha Bilenko dribbble.com/shots/2541143-Icq
Sascha Yeryomin dribbble.com/shots/2541145-ICQ-iOS-App-Redesign-Concept
Andrii Malinovskyi dribbble.com/shots/2541146-ICQ-redesign
Alex Martinov dribbble.com/shots/2541148-ICQ-Video-Chat-Concept
Denis Shoomov dribbble.com/shots/2541150-ICQ-App-Redesign
Oleg Vishnevsky dribbble.com/shots/2541151-ICQ-Dribbble-Competition
Mihail Anisimov dribbble.com/shots/2541261-ICQ-App-Redesign-Concept-2
Vadim Zlygastev www.behance.net/gallery/34228179/ICQ-Dribbble-Competition-by-Mailru
Jamil Lazarev https://t.co/CXMd4Y8VBF
Lera Goryachaya www.behance.net/gallery/34229237/ICQ-redesign
Nikita Gulak www.behance.net/wip/1684741/2855607
Den Kulinich www.behance.net/gallery/34231267/ICQ-App-Redesign-Concept-from-Mailru
Victor Zaytsev www.behance.net/gallery/33709082/ICQ-Redesign-Concept
Евгений Першин www.behance.net/gallery/34241921/ICQ-Redesign
Китя Тороповский kityaicq.tumblr.com
Kiylo Valia www.behance.net/gallery/34243003/redizajn-ICQ
Ivan Demenev www.behance.net/gallery/34245605/redizajn-mobilnogo-prilozhenija-ICQ
Vyacheslav Nazarov www.behance.net/gallery/34246709/ICQ-App-Redesign-Concept
Eugene Kazakov readymag.com/u73810282/2016-02-21-APP
Pavlo Berezovsky www.behance.net/gallery/34250637/redizajn-mobilnogo-prilozhenija-ICQ
Igor Kus www.behance.net/gallery/34252757/ICQ-concept-App-for-android
Leon Bakadorov www.leonbakadorov.ru/icq
Андрей Кравчук www.facebook.com/dlyareganasaytah/videos/1710084605871808
Oleg Mishkorudnyy www.behance.net/gallery/34252915/ICQ-Redesign-contest-for-Mailru
Katya Konyushkova www.behance.net/gallery/34251245/koncept-prilozhenija-ICQ
Alex Bogomazov www.behance.net/gallery/34255209/ICQ-redesign
Max Krynytskyi www.behance.net/gallery/34255361/ICQ-redizajn
Yarik Bright www.behance.net/gallery/34255373/ICQ-Redesign
Михаил Сегеда bunnyartworks.myportfolio.com/icq-redesign-by-bunnyartworks
Ihor Mykhailov www.behance.net/gallery/34254115/Redesign-ICQ-for-ANDROID

Комментарии (13)


  1. jehy
    18.03.2016 17:35
    +5

    Открыл только ради "сказочного безумия с радужными единорогами в космосе" — ожидания не оправдало.


    1. kamushken
      19.03.2016 00:34

      диву даюсь, откуда столько свободного времени у людей?


  1. aimh
    18.03.2016 18:19
    +2

    А можно расстановку по местам за пределами тройки лидеров?


    1. Pashkevich
      18.03.2016 21:55

      А такое наверное не делалось.
      Выделили только 3 победителей, а дальше и не обязательно.


  1. Revkov
    18.03.2016 19:00
    +1

    Понравилось очень как сделал Денис. Прям выделился среди всех. "Глаз радуется".


  1. dom1n1k
    18.03.2016 20:57
    +11

    Моменты, карта, конкурсы, чатрулетка — хоспаде, о чем вы все?.. Сделайте кондовый мессенджер по подобию раннего Скайпа. :)


  1. mgyk
    18.03.2016 23:08
    +4

    Конкурс на дизайн и открытый код аськи. Неужили и программисты и дизайнеры разом уволились?


  1. aimh
    19.03.2016 00:59
    +1

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


  1. ElectedArt
    19.03.2016 01:47
    +1

    В чем делают такую прекрасную анимацию как у Дениса?


    1. aimh
      19.03.2016 13:13
      +1

      это констуктор https://readymag.com/


      1. kamushken
        19.03.2016 17:55

        разве не адоб АЕ?


      1. ElectedArt
        19.03.2016 19:10

        Имею ввиду приложение, не сайт