Оригинал публикации вышел в блоге компании на vc.ru.
По известным причинам уходящий год изменил взгляды человечества на жизнь и отдельные её аспекты. Мы стали по-другому общаться, передвигаться, потреблять, платить за товары и услуги. Отразится ли это на том, каким будет взаимодействие людей с технологиями? Студия ADCI Solutions и приглашённые эксперты из области дизайна интерфейсов и продуктов прогнозируют, какие тенденции будут общими для сайтов и мобильных приложений в следующем году.
Наряду с визуальными трендами мы приводим и технологические, помня о том, что дизайн — это проектировочная, фактически инженерная работа, а не только подбор градиентов. Мы ценим вещи в первую очередь не за цвет, а за то, насколько хорошо они решают свои задачи. Ручка у чайника, её форма, материал — часть дизайна.
Если ручки нет или она сильно нагревается, чайник — не чайник. Мобильные и веб-дизайнеры, которые знакомы с технологиями, предложат голографические звонки вместо общения через мессенджеры там, где это будет правильным.
Каким-то трендам предстоит пройти проверку временем, а какие-то унаследованы у прошлых лет, но теперь их стоит воспринимать не как забавную безделушку, а как естественную часть продукта, выжившую в отборе среди хайповых новинок. Мы советуем владельцам бизнеса подойти к описанным трендам с позиции прикладной пользы и учесть их при планировании стратегии продвижения продукта как минимум на следующий год.
Необходимость что-то нажимать и печатать текст постепенно пропадает. Голосом можно делать всё, начиная с управления бытовой техники и заканчивая поиском информации на сайте. А ещё голосовому управлению пророчат большое будущее в шоппинге: с ним ищут продукты, добавляют их в корзину, делают заказы, общаются с техподдержкой. Всё это возможно благодаря поддержке браузерами Web Speech API и нескольким строчкам JavaScript-кода на сайте.
Наличные выходят из обихода, а передавать вещи из рук в руки даже до 2020 года не было гигиеничным. Бесконтактная оплата будет всё больше внедряться, приветствоваться, поощряться, особенно на фоне очередного скачка онлайн-покупок в мире и в России, где их число в этом году достигло исторического максимума. Недавно держатели карт «Сбербанк» работающих по системе Mastercard, получили возможность расплачиваться с помощью Android-смартфона при помощи сервиса Sberpay.
Также новый виток востребованности переживают QR-коды. Пользователи мобильного приложения «Сбербанк Онлайн» могут сгенерировать QR-код и оплатить через него покупку в тех магазинах, где есть соответствующие считывающие устройства, например, онлайн-касса «Эвотор».
Оплата по QR-коду
С помощью этих технологий магазины одежды, ювелирных украшений и мебели уже несколько лет помогают своим потребителям сделать правильный выбор ещё до самой покупки и не пожалеть о ней. Бизнес, в свою очередь, несёт меньше убытков из-за возвратов и потери лояльных клиентов. В этом году онлайн-примерку продвигают ещё и с позиции безопасности: посетители магазинов одежды не могут быть уверенными в здоровье того, кто пользовался примерочной кабинкой до них. Оценить кроссовки и одежду дистанционно уже помогают Adidas, Nike и Lamoda, а спроектировать интерьер — приложение IKEA Place. Недавно первый в России мебельный салон, где покупатели с помощью VR-шлема могут встроить мебель в интерьер, открыл холдинг «Ангстрем».
Приложение Nike с дополненной реальностью
Это удовольствие доступно только владельцам устройств, поддерживающих VR и AR на должном уровне? Нет. Недавно российский бренд одежды Silvashi реализовал виртуальную примерочную на базе инструмента для оцифровки одежды AstraFit. Посетитель сайта бренда может выбрать элемент гардероба, задать параметры своего тела и увидеть, насколько потенциальная покупка будет соответствовать фигуре. У AstraFit множество конкурентов, это очень активный сектор.
Как работает Astrafit в онлайн-магазине silvashi.com
Число точек контакта бренда с потребителем увеличивается, и потребители редко выбирают какую-то одну. Задача бренда — дать им одинаковый опыт взаимодействия на всех платформах. Обслужить этот запрос способна технология Headless eCommerce, смысл которой — в разделении серверной и клиентской части.
Расскажем упрощённо, как это работает. Серверная часть занимается только бизнес-логикой (созданием продуктов, обработкой платежей и т. д.) и может быть построена на CMS, в том числе Drupal.
За отображение этих данных отвечает клиентская часть, разработана на фреймворках типа React или Vue.js. Общение между частями происходит через прикладной интерфейс, такой как Rest API или GraphQL.
Таким образом, один сервис может работать на несколько клиентских сторон, и если у ритейлера уже есть сайт, а позже он решит сделать мобильное приложение или PWA, или даже настроить систему на базе Internet of Things для персонифицированных предложений, то вместо разработки нового бэкенда достаточно подключиться к уже готовому.
Качать приложения целиком больше не обязательно: пользователям iOS 14 теперь доступны App Clips. Это небольшие части мобильных приложений размером не более 10 Мб, которые выполняют одну конкретную задачу и автоматически удаляются с телефона через 30 дней после установки.
App Clips от Apple
Тремя годами ранее Google представил Android Instant App — мгновенные приложения, выполняющие схожую с эпловскими App Clips роль: предложить пользователю решить проблему здесь и сейчас, без необходимости скачивать приложение целиком. Идеологически очень похоже на технологию Google AMP, позволяющую работать с облегчёнными страницами сайта при медленном интернете.
Швейцарские ножи в мире мобильных приложений, супераппы сначала вошли в жизнь азиатов, а теперь эта концепция интересует большие компании с многомиллионным охватом аудитории.
“Наряду с мини-приложениями, супераппы — это другой пример ухода от большого количества приложений в телефоне. Теперь есть несколько больших приложений, внутри которых можно сделать огромное количество действий. Покупка билетов в «Тинькофф», заказ еды в приложении такси и вызов такси в приложении Вконтакте — всё это будущее пользовательского взаимодействия, которое мы видим уже сейчас.” —Саша Лопатюк, Арт-директор в IDT Corp.
Суперапп
Первый разговор с голограммой состоялся в 2017 году, в нём участвовали американский оператор Verizon и южнокорейский провайдер телекоммуникационных услуг KT. В России операторы Билайн и МТС протестировали новый способ связи в 2018 и 2019 годах соответственно при аппаратной поддержке китайской компании Huawei.
5G голографический звонок в Москве, Билайн совместно с Huawei
Хотя коммерческое внедрение голографических звонков начнётся только в 2022 году, начать привыкать к тому, что скоро мы будем жить во вселенной «Звёздных войн», стоит уже сейчас. Дело за внедрением 5G-сетей — только с их скоростью и пропускной способностью такие звонки возможны. За этим последует полное изменение подхода к разработке коммуникативного дизайна в веб-интерфейсе.
Технология, благодаря которой можно построить модель объекта или целого куска пространства на основе отражённого этим объектом света. За долгие годы развития она нашла применение в исследовании атмосферы, геодезии, изучении морей и, что наиболее актуально в последние годы, в проектировании беспилотных автомобилей. В этом году сканер LiDAR стал ещё ближе к массам: его включили в функциональность сначала iPad Pro 4 поколения, а чуть позже и iPhone 12 Pro. Клонирование объектов выглядит круто, но в практической необходимости этой технологии сомневаются, и пока вменяемых кейсов использования немного: AR-игры, фотосъёмка, измерение роста.
LiDAR в iPhone 12
Миссия accessibility-дизайна заключается в том, чтобы облегчить работу с цифровым продуктом людям с ограниченными возможностями и тем самым облегчить работу с ним для всех — и расширить целевую аудиторию. Голосовой помощник, субтитры, большие шрифты — для любого вида контента необходимо продумать путь пользователя с ограниченными возможностями. Все точки взаимодействия бренда с клиентом должны быть отражены и проработаны.
Если понятия accessibility и инклюзивность в отношении веб-дизайна вам пока в новинку, мы написали для вас статью об этом в трёх частях: раз, два, три.
Этот режим стал уже нормой для сайтов и приложений, а с точки зрения аксессибилити это одна из нужных функций.
Чтобы рассмотреть товар со всех сторон, не нужно идти в магазин или обладать шлемом виртуальной реальности. Объёмные объекты можно использовать как для баннеров и второстепенных элементов дизайна, так и в функциональности магазинов для ознакомления с товаром.
“Использование трехмерных объектов на сайтах и в мобилках стало возможным благодаря развитию производительности браузеров и появлению большего числа специалистов, которые могут реализовывать подобные вещи,” — Роман Храмов, Сооснователь Cuberto
Важную роль в том, что 3D-объекты наводнили веб, сыграла и демократизация процесса их создания. Прежде чем перейти на платные профессиональные инструменты Cinema 4D, Adobe After Effects и 3ds Max, можно поиграться с бесплатными программами 3D-моделирования вроде Vectory, SketchUp Free и 3D Slash.
“3D — это новый скевоморфизм (принцип в дизайне, предполагающий имитацию объектов из реального мира — прим.ADCI Solutions), объёмы активно возвращаются в повседневные интерфейсы как элементы графики. Посмотрите на новые иконки в macOS Big Sur, например,” — Саша Лопатюк, арт-директор в IDT Corp.
Иногда вместо экспериментов с непроверенными инновациями достаточно поиграться со шрифтами, чтобы продукт запомнили.
“Шрифтовая часть все чаще используется в качестве украшения. Cтали встречаться сайты или приложения, где работа со шрифтами выводится на первое место, оттесняя иллюстрации и фото,” — Роман Храмов, сооснователь Cuberto.