18
Янв

Будьте осторожны с этими трендами в 2016

источникawwwards.com
авторawwwards-team

Гамбургер-меню, параллакс скроллинг и сложная типографика — помощь или помеха?

Тренды в веб дизайне, также, как и в моде — приходят и уходят. Иногда они продиктованы нуждой (например, разумный дизайн). Иногда — изменением индустрии, как например переход от скевоморфизма к плоскому дизайну.

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

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

1. Скрывать все в меню «гамбургер»

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

Например, Squarespace использует боковую панель на всем сайте на всех устройствах.

Фото: Squarespace

На картинке выше и ниже видно, что все меню скрыто в вездесущем «гамбургере».

Фото: Squarespace

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

Последствия применения подобного меню на сайте могут быть не очень хороши для новостных или сайтов интернет-магазинов, где эта самая понятность заголовков или предметов продажи имеет решающее значение для восприятия. Как пояснили в книге «Тренды веб-дизайна 2015/2016», принуждение пользователей нажимать на это меню может создать для них неприятную ситуацию.

Фото: Time

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

Как отмечено в превосходной статье Nielsen Norman Group, «Убивая глобальную навигацию: Одна из тенденций, которую стоит избегать», скрытая навигация может оттолкнуть пользователей.

Как говорят авторы Дженнифер Карделло и Кетрин Вайтентон:

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

Как они упомянули, есть пара способов понять, нужно ли вам скрывать глобальную навигацию:

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

  • Куда нажимают пользователи. Действительно ли они пользуются гамбургер-меню? Если пользователи не нажимают на меню и у вас возрос показатель отказов, ясно — что-то не так. Вы всегда можете проверить клики с помощью тепловой карты кликов, например с CrazyEgg или Usability Tools. 


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

2. Карусель главной страницы

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

Фото: Iquadart

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

Несколько вещей на раздумье:

  • Карусель это плохо для SEO. Отсутствие контента означает, что трудно получить метаинформацию страницы. Это особенно актуально сейчас, когда Google больше не выдает ключевые мета слова (хотя Bing выдает), и поэтому берет всю ключевую информацию со страницы. Конечно, вы можете разместить несколько слов внизу карусели. Большинство слайдеров, хотя и содержат заголовки, в которых есть код H1, меняются, когда слайдер девальвирует ключевые слова в них.
  • Отрицательное влияние на характеристики. Часто карусели содержат изображения с высоким разрешением, которые не оптимизируются, замедляя таким образом время загрузки первой страницы — как правило наиболее важной страницы, которую стоит загружать как можно быстрее. Сайдеры также используют JavaScript или JQuery, что тоже добавляет головной боли производительности.
  • Помещает контент в нижнюю часть экрана. И хотя все мы сегодня знаем, как скролить, Google все же не рекомендует размещать контент внизу страницы. Вся тонна рекомендации из поисковика говорит о размещении информации наверху, карусель не предлагает ничего ценного пользователю — это просто красивый эффект.
  • Обычно воспринимаются с трудом. Даже самые лучшие фреймворки не могут в полной мере решить проблемы доступности, которые окружают карусель.

В дополнение к этому, исследование 2013 года показало, что всего 1% людей нажимают на карусель. А многие просто игнорируют ее и не обращают внимание на содержание, благодаря явлению, известному как баннерная слепота.

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

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

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

Фото: Iquadart

3. Параллакс Скроллинг

За последние несколько лет все мы видели множество сайтов с параллакс скроллингом.

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

У параллакса есть несколько больших проблем:

  • Плохо для SEO. В основном сайты с параллакс скроллингом одностраничные с не очень большим количеством контента, который может просматриваться поисковыми системами. Особенно в тексте, который как правило, быть встроен по графику.
  • Может снизить производительность. Из-за интенсивного использования графики и JavaScript, страницы бывают перегружены. Безусловно, это головная боль для пользователей мобильных телефонов. Время загрузки на мобильный телефон, как правило, очень бедные, когда параллакс используется, в связи с интенсивным использованием JavaScript.
  • Может отрицательно повлиять на пользователей. The Journal of Usability Studies провели исследование, которое выявило, что сайты с параллаксом считаются более веселыми, чем сайты без него, а некоторые пользователи испытывают «укачивание и значительные проблемы с юзабилити при взаимодействии с веб-сайтом, где есть параллакс».

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

Фото: The McWhopper Proposal

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

Как вы можете видеть, у страницы есть счетчики А PageSpeed и С YSlow. Это не страшно, но взгляните на время загрузки страницы — 18,2 секунды, что гораздо медленнее большинства коммерческих сайтов, с которыми вы столкнетесь (у них загрузка, согласно GT Metrix, в среднем составляет 6.6 секунд).

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

«У следующих ресурсов есть набор символов в мета тегах. Но это приводит в негодность предварительную загрузку в IE8. Для улучшения ресурсов следует скачать распараллеливание, переместите набор символов в соответствующий заголовок HTTP Content-Type».

Другие советы:

  • Отложить разработку JavaScript, как в данном случае, 313.6kb JavaScript обрабатывается в течение начальной загрузки страницы и помогает уменьшить блокировку рендеринга страницы.
  • YSlow рекомендует сокращать CSS и JavaScript где это возможно.
  • Сайт должен использовать CDN

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

4. Сложная загрузка экранов

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

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

Мы можем предположить, что сайт имеет какое-то отношение к кино, но ничто не может подтвердить наши предположения. Значок Apple, позволяет открывать видео в Itunes, но при вводе URL на iPad, говорит, что сервер не найден.

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

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

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

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

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

5. Слишком много JavaScript

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

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

JavaScript можно найти во многих современных библиотеках и фреймворках, таких как Angular.js, Backbone.js и Knockout.js. MVVM (Model-View-View) это один из последних фреймворков, который полностью написан на JavaScript.

Есть куча причин, почему чрезмерное использование JavaScript может навредить вашему сайту:

  • Время загрузки. Это связано с плагинами и слайдерами, которые создают множество различных файлов JavaScript и CSS. Гораздо более эффективно убедиться, что все они загружаются из одного файла (каждого типа).
  • Отрицательное влияние на просмотр с мобильных. Это связано со скоростью загрузки.
  • Легко влияет на функциональность и части сайта из-за ошибки. Вы можете узнать больше об ошибках и как избежать и исправить с помощью веб-ресурсов, таких как Pluralsight.
  • Безопасность. JavaScript, как и многие веб-языки/сценарии, могут быть использованы, даже если неправильно реализованы. Это распространено, потому что он часто переходит на другие сайты для лучшей работы (спасибо социальным плагинам). Вредоносные коды делаются, как правило, с целью кражи информации.
  • SEO. JavaScript не показывается поисковыми системами и поэтому, если у вашего сайта его много, то вы можете потерять несколько ключевых слов в рейтинге.

Здраво оценивайте надобность в JavaScript вашему сайту.

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

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

6. Сложная типографика

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

Слишком много шрифтов создает путаницу и суматоху, такой сайт невозможно читать.

Фото: Andre Luis, Creative Commons

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

В приведенном ниже примере с UXPin, сайт использует шрифты одного типа (Proxima Nova), тактика, которая хорошо работает для ясности. Тем не менее, расстояние тоже важно, и шрифтам не обязательно быть одного типа. Главное, чтобы они хорошо смотрелись вместе.

Вот несколько советов:

  • Эксперементируйте со шрифтами. Стремитесь к простой и понятной презентации, которая будет отражать визуальный стиль бренда.
  • Придерживайтесь шрифтов и начертаний, которые дополняют друг друга, или, наоборот, очень различны и создают интересный контраст. Думайте также о том, что они несут пользователю на психологическом уровне. У людей схоже восприятие шрифтов, если они цветные. Верьте или нет, эмоции и чувства также связаны с типографикой. Засечки создают формальность. Без засечек — надежность.
  • Если вы хотите, чтобы ваш бизнес выглядел традиционно, используйте засечки. Если хотите, чтобы воспринимался как что-то стабильное, то шрифт без засечек — ваш лучший выбор.

Хороший дизайнер в первую очередь скептик.

Несколько совершенно потрясающих трендов появились за последние годы.

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

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

Если хотите узнать о 10 наиболее полезных тенденциях веб-дизайна, можно бесплатно посмотреть электронную книгу «Тренды веб-дизайна 2015/2016». Книга включает в себя 100 ресурсов и анализ 166 примеров из таких компаний, как Google, Apple, Reebok, Adidas, Dropbox, и других.

комментариикомментарии по теме