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

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

Предположим, какие из этих паттернов появились в дизайне приложений и перешли в дизайн веб-страниц.

Веб-дизайн испытывает влияние дизайна приложений на нескольких уровнях:

1. На уровне структуры страницы. На первый план выходят принципы простоты, видимости. Максимум информации должно уместиться на одном экране, контент и структура стали более сжатыми для быстроты восприятия, а навигационная панель — понятнее.
2. На уровне взаимодействия с интерфейсом. Сенсорный принцип взаимодействия в первую очередь влияет на дизайн навигационных элементов. Появились более крупные шрифты, а кнопка должна быть достаточно большого размера, чтобы на нее было удобно нажимать.
3. На уровне контекста. Издание Design Modo говорит о том, что в последние десятилетие веб-дизайн ушел от тяжелых, основанных на тексте сайтов к интерактивным приложениям, насыщенным изображениями и видео. Эти приложения в несколько раз повышают уровень вовлечения.

Новые ключевые приемы

Минималистичность во всем

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

Скрытые функциональности

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

Больше фото и иллюстраций

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

Иконки

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



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

Прокрутка

Трудно определить, где прокрутка появилась раньше — на сайте или в приложении. Сейчас этот элемент ассоциируется со свайпом — основным движением для перехода по разделам приложения или просмотра ленты. Жест, преобразованный из drag and drop, используется для показа контента в фотогалереях, баннерах-слайдерах.


Баннер-слайдер на сайте Сбербанка

Скрытые элементы

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

Флэт-дизайн

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

Функции браузеров

Расширения: принцип и внешний вид — лаконичность и запуск в один клик.

Пуш-уведомления как необходимость максимально краткой коммуникации с пользователем.



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

Скроллинг

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

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

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


Мы добавили подсказку — значок скролла на главную страница сайта компании CCI


Одностраничный сайт для премиального сервиса Kia

Вид и расположение меню

Появление burger menu: вынужденная мера для экономия места на портативных устройствах превратилась в обычный элемент для многих десктопных версий сайтов.

Несколько прогнозов

В дальнейшем на веб-дизайн может оказать влияние технология Progressive Web Apps. Google начали работу над в 2015 году такими приложениями. Фактически это сайт, который работает как приложение: его можно установить на смартфон и пользоваться офлайн.

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

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

В итоге

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

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