Тенденции пользовательского интерфейса, которые будут определять 2019

Позвольте мне спросить вас кое-что, что может звучать немного как научная фантастика. Тебе когда-нибудь приходило в голову, что, может быть, в последнее время планета Земля движется немного быстрее, но мы еще не заметили? Похоже, что только вчера мы пересмотрели то, что ожидали, когда перешли в 2018. Но как ни странно, это уже почти 2019!

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

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

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

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

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

Увлекательный, не так ли?

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

Итак, какие тенденции мы с нетерпением ждем?

С первых мобильных

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

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

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

Затем что-то интересное произошло в конце 2016 - мобильный трафик в конечном итоге превзошел трафик ПК. К концу этого года мобильные телефоны 50.31% доли рынка, в то время как таблетки добавляются до 4.9%.

доля мобильного рынка

Тем не менее, несмотря на это, мы по-прежнему уделяем первостепенное внимание интерфейсу рабочего стола, потому что так получилось, что пользователи ПК сохранили лидерство по совокупному количеству времени, проведенного в сети. В Северной Америке, например, серфинг по мобильным телефонам все еще отстает в 2017, составляя 33% времени серфинга.

время серфинга

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

доля трафика

Что это значит для пользовательского интерфейса?

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

Использование теней и глубины

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

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

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

тени и глубина

Поэтому в 2019 мы ожидаем увидеть прогрессивное использование теневых вариаций для достижения различных перспектив интерфейса 3D.

Например, дизайнеры, стремящиеся привлечь внимание к конкретным элементам, могут создавать ложные тени с различной степенью мягкости и интенсивности. Конечным результатом является элемент, который может отображаться над остальными в 3D.

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

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

Другими словами, расширенное использование теней продолжит достигать более тонкой глубины на дисплее 2D. При этом устраняется необходимость в специальных экранах 3D.

Минимализм

В год 2000 средняя продолжительность внимания человека, по крайней мере, согласно исследованию Microsoft, было 12 секунд. Тогда угадайте что? К 2015 он неожиданно упал до 8 секунд - забавно короче, чем стандартная золотая рыбка.

Что ж, именно тогда, когда мы подумали, что хуже быть не может, Интернет сделал людей более нетерпеливыми. 47% посетителей вашего сайта теперь ожидайте, что ваши страницы загрузятся менее чем за 2 секунд. Они просто не могут ждать дольше. На самом деле, 40% из них уйдут, если это займет больше времени, чем 3 секунд.

Удивительно, но многие веб-дизайнеры не воспринимают это всерьез. Электрический ток средняя скорость загрузки страницы составляет 8.66 секунд- несмотря на то, что Google рекомендует меньше 3 секунд для 2018.

время загрузки страницы

И это еще не все. Оказывается, ситуация с мобильными сайтами значительно хуже, поскольку они среднее из секунд 22 загрузить. Тем не менее, к сожалению, 53% посетителей мобильных страниц не торопятся более трех секунд.

Но как это связано с пользовательским интерфейсом?

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

Итак, что это значит для 2019?

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

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

Перекрывающиеся эффекты

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

Но держись. Что такое перекрывающий эффект в первую очередь?

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

перекрывающиеся эффекты

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

Samsung Mobile, например, перешел с ЖК-дисплеев на очень продвинутая технология OLED когда они выпустили Galaxy S7 два года назад. Затем Apple присоединилась к группе с iPhone X, который теперь имеет большую контрастность дисплея, чем его предшественники LCD. Компания даже имеет планы поддержания этого на всех моделях iPhone, запланированных для 2019.

И кто выиграет больше всего?

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

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

Бескаркасные конструкции

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

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

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

безрамочный край

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

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

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

Micro-Анимация

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

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

микро-анимация

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

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

Вывод

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

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

изображение заголовка любезно предоставлено Валид Бено

Богдан Рэнца

Богдан является одним из основателей Inspired Mag, накопив за этот период почти 6-летний опыт. В свободное время он любит изучать классическую музыку и изучать изобразительное искусство. Он тоже одержим исправлениями. У него уже есть 5.