Перемены в интерфейсах, многослойная анимация и структурированный визуальный хаос: обзор веб-тенденций на 2019 год

https://medium.com/facility/interface-mutations-content-consumption-and-structured-chaos-an-overview-of-trends-for-web-in-deb8dc8b4b09
  • Перевод


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

1 / Технологии


1.1. Машинное обучение


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


Без машинного обучения добиться успеха будет очень сложно

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

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

Переведено в Alconost

1.2. Чат-боты


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

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


Взаимодействие с пользователем, имитирующее общение с консультантом

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

1.3. Загрузка страниц


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

Например, уже сегодня вполне актуальна технология AMP (ускоренные мобильные страницы), продвигаемая корпорацией Google. Она позволяет повысить конверсию сайта почти в два раза — за счет более быстрой загрузки. AMP основана на открытом исходном коде, а сами страницы кэшируются в облаке Google, что ускоряет их загрузку. Данная технология используется такими компаниями, как The Washington Post, Tesla, eBay и др.

Есть и другие способы ускорить загрузку страницы: отложенная загрузка (четыре разновидности), оптимизация контента и кода, а также системы распределенных серверов.


Пример отложенной загрузки: Pinterest.

2 / Интерфейсы


2.1. Взаимодействие


Визуальная обратная связь станет еще более важной частью интерфейса — благодаря технологиям и высокоскоростному Интернету :). В 2019 году взаимодействие приобретет многослойную структуру и перейдет на новые уровни динамики, цвета и звука.

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



1. Микровзаимодействие: приложение прослушивает музыку, звучащую рядом с устройством.
2. Микроминивзаимодействие: возможность включить и отключить распознавание композиции нажатием на кнопку Shazam.
3. Нановзаимодействие: размер кнопки Shazam меняется в ответ на нажатие, имитируя реальное взаимодействие; анимация внутренних окружностей реагирует на звуки басовых частот, внешних — на более высокий тембр.
4. Пиковзаимодействие: кнопка Shazam увеличивается на несколько пикселей, «испуская» волны, а значок слегка меняет размер в соответствии с уровнем низких частот.


Анимация будет встраиваться даже в интерфейс и действия пользователя. Она станет отличительной частью бренда и будет органично вписываться в макет веб-сайта, выполняя роль визуального гида. Например, на веб-сайте Family Garden курсор является частью логотипа и активно взаимодействует с другими элементами пользовательского интерфейса.


Как можно видеть, реализованная на сайте многослойная анимация курсора помогает эффективно информировать пользователя.

2.2. Голосовой интерфейс


Мы постоянно стремимся к простоте и эффективности. В сфере цифровых технологий уже не всегда достаточно обычной графической навигации, и одна из самых доступных альтернатив — голосовое управление, которое, впрочем, станет не полной заменой привычного интерфейса, а лишь посредником между пользователем и основными функциями сайта. Чтобы пояснить, почему так, приведу несколько основных аргументов.

Преимущества:

1. Простота и скорость. Голосовое управление может работать очень быстро: пользователю не нужно изучать графический интерфейс и учиться использовать его по назначению. Люди умеют говорить почти с рождения — эта способность у нас развита очень хорошо.

2. Удобство. Если вы готовите ужин, управляете автомобилем, рисуете картину или принимаете душ, у вас не всегда есть возможность взять в руки телефон. Голосовые команды в таких случаях — отличное решение.

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



Паттерн извлечения файлов из хранилища Dropbox для Brain.ai. Автор изображения — Глеб Кузнецов.

Недостатки:

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

2. Шум.Харуки Мураками в своей книге «Страна чудес без тормозов и конец света» наглядно описал действительность, в которой люди научились отключать шум — во имя сохранности барабанных перепонок. Сегодня это, конечно, невозможно, поэтому десятки отдающих голосовые команды людей превратили бы улицы в гудящие рои двуногих пчел.

3. Необратимость.Поговорка «слово — не воробей: вылетит — не поймаешь» остается актуальной. Для голоса нет кнопки «Отмена», тут не нажмешь CTRL + Z — поэтому голосовые интерфейсы еще далеки от идеала в плане реализации более универсальной функциональности.


2.3. Жесты


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

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


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

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

3 / Контент


3.1. Вместо текста — видео


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



Во многих случаях предпочтение отдается подаче в форме видеоисторий — как, например, в Нью-Йоркской публичной библиотеке. Даже на дизайнерской платформе Dribbble наконец-то осилили загрузку видео :). Этот формат с уверенностью находит все новые ниши и останавливаться не собирается.

3.2. Трехмерная графика


Увеличится и количество 3D-контента: объемные фигуры более естественны, и люди их легче воспринимают.

Возможно, в будущем грань между реальностью и цифровой средой будет постепенно стираться, и онлайн-мир тоже станет объемным. К примеру, сегодня 3D-контент — катализатор очень быстро развивающегося сегмента электронной коммерции с использованием дополненной реальности — A-Сommerce, — где действия в виртуальном мире полностью замещают процесс покупки в реальности.


Дополненная реальность становится одним из самых успешных маркетинговых инструментов.

3.3. Персонализация


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


Приятного аппетита, сэр.

3 / Визуальная составляющая


3.1. Цвет


Останутся популярны естественные пастельные оттенки, ассоциирующиеся с экологичностью — благодаря тренду на ответственное потребление (подробнее — в подразделе ниже). Особое внимание следует уделить полутонам: качество дисплейных матриц стремительно растет, и это дает возможность обогатить визуальную составляющую контента.



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

3.2. Иллюстрации


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


Иллюстрации в Помощнике Google.

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

3.3. Хаос


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

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


Подробнее о набирающем популярность стиле «брутализм» можно узнать, например, здесь или здесь.

4 / Психология


4.1. Ответственное потребление


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



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

Рука об руку с сознательным потреблением идет размеренный, вдумчивый образ жизни, который тоже приобретет большую популярность: люди все яснее осознают, что сегодня в условиях полного изобилия важно не только найти время на всё — нужно уметь избегать стресса и сохранять внутреннее равновесие. Поэтому в ответ на социальные и экологические проблемы станут актуальны услуги и продукты, которые будут ассоциироваться с «размеренностью» образа жизни.

Задумайтесь: как часто вы можете позволить себе остановиться и по-настоящему насладиться моментом?

4.2. Прямолинейность (разделение действий)


О, как много всего красивого и интересного хочется разместить на огромных экранах смартфонов! Но делать этого я, конечно же, не буду. Самый простой маршрут — без поворотов в неизвестные закоулки, без съездов с главной дороги и сложных развязок. В мире Интернета это называют линейной навигацией.


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

На каждом экране должно быть только одно основное действие — это позволит избежать сомнений. В 2019 году путь пользователя станет более простым и коротким, ведь темп жизни неуклонно растет, и начинает казаться, что даже время бежит быстрее. Что ж, не будем отставать! :)

4.3. Вовлеченность и простота возвращения


Как часто вы пробуете новые веб-сайты, сервисы и приложения? А как часто возвращаетесь к уже известным, проверенным временем?

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

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


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

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

Дополнительная информация


Завоевать сердца пользователей поможет еще одна хитрость — внезапные моменты радости.

Комплимент человеку, когда он этого не ожидает, сюрприз или похвала — малозаметный, но эффективный инструмент привлечения и удержания клиентов.Любая награда воспринимается как достижение, трофей и приносит радость.

Дарите радость, практичность и красоту — и оставайтесь в тренде!



О переводчике

Перевод статьи выполнен в Alconost.

Alconost занимается локализацией игр, приложений и сайтов на 70 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.

Мы также делаем рекламные и обучающие видеоролики — для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.

→ Подробнее
Alconost
87,00
Локализуем на 68 языков, делаем видеоролики для IT
Поделиться публикацией

Комментарии 3

    0
    Оба случая можно дополнить еще одной особенностью — ощущением свободы. Вопросы пользователю о национальности, поле и возрасте станут почти грубостью. Выбор подходящих алгоритмов доставки контента будет основан на фактических действиях и интересах пользователя, а не на стереотипах и предрассудках.
    Правильно, зачем эти глупые стереотипы и предрассудки, просто введите номер банковской карточки.
    А для всего остального: вы уже залогинились к нам из своего ФБ\ВК, так что мы можем узнать ваш пол, возраст, национальность и все лайки, без того, чтобы отвлекать ваше внимание от вот этой красивой анимации.
      +1
      Чат-боты

      Это прям как возвращение в старые добрые времена BBS, но на более интеллектуальном уровне.

        +2
        Информационная емкость. Голос может передать гораздо больше информации, чем печатный текст.
        Текст (если вы умеете читать), сделает это гораздо быстрее. Так что тезис про «емкость» — туфта.

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

        Особое внимание следует уделить полутонам
        Еще одним модным направлением станут яркие, энергичные цвета
        Это что то вроде прогноза погоды — возможно солнце или дождь, верно?

        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

        Самое читаемое