3 опасных дизайн-тренда в 2016 году
16 мая 2016

С чем не стоит усердствовать, а чего вообще нужно избегать в дизайне в 2016-м.

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

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

Скрыть все под Hamburger меню

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

Например, сайт Squarespace использует навигацию в этом стиле независимо от устройства.

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

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

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

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

На это указывают авторы Дженнифер Кардело и Кэтрин Витентон:

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

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

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

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

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

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

Немного пищи для ума:

  • Карусели плохи для SEO. Отсутствие содержания означает, что трудно получить мета информацию страницы. Google теперь определяет тематику исходя из контекста страницы, а когда у вас нет либо мало текста, то это совершенно дурной знак для поисковых систем.
  • Отрицательно влияют на производительность. Наличие картинок в высоком разрешении в каруселях часто приводит к увеличению времени загрузки первой страницы, которая является самой важной на сайте. Слайды используют JavaScript или JQuery, который также добавляет головной боли производительности.
  • Уводят часть контента за видимые грани страницы. Пока пользователь видит один слайд, вся остальная информация находится за пределами досягаемости.
  • Она малопривлекательны для посетителей. Исследование в 2013 показало, что только 1% людей кликают на карусели. Многие их просто игнорируют благодаря явлению, известному как баннерная слепота.

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

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

Parallax Scrolling

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

Параллакс имеет несколько потенциальных проблем:

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

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

Если вы всё же не можете обойтись без параллакса в вашеем проекте, вот несколько подсказок вам в помощь:

  • Отложите парсинг JavaScript - это поможет уменьшить "блокирование рендеринга страницы".
  • Минимизируйте CSS и JavaScript.
  • Также сайт должен использовать CDN

Так что если вы рассматриваете создание параллакс сайта, спросите себя, стоит ли эта история времени посетителей?

Читайте также
Давайте ускоримся
Давайте ускоримся

Продолжаю делиться с Вами историями из своего опыта в дизайне.

14.02 0
Точно по брифу
Точно по брифу

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

10.02 0
Что нужно знать дизайнеру перед присоединением к стартапу
Что нужно знать дизайнеру перед присоединением к стартапу

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

13.11 0
JavaScript, Flash и типографика - когда это вредно?
JavaScript, Flash и типографика - когда это вредно?

Как JavaScript, Flash и неудачная типографика могут обернуться катастрофой для посетителей вашего сайта.

16.05 0
Комментарии

×
Подписка на новости Skillsup

Заполните поля, чтобы получать новости о дизайне от Skillsup,
обещаем не тревожить чаще 2-х раз в неделю.
Если передумаете — во всех письмах будет ссылка на отписку.