Будьте осторожны при использовании этих популярных тенденций веб-дизайна

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

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

Недостаточно отрицательного пространства

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

Веб-дизайнерам стоило бы прислушаться к совету Коко Шанель о том, что чем меньше, тем лучше: «прежде чем выйти из дома, посмотрите в зеркало и снимите один аксессуар». Веб-дизайнеры должны учитывать, что элементы CSS и HTML по умолчанию не содержат пустого пространства, прежде чем они начнут добавлять дополнительные ресурсы.

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

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

Меню гамбургеров

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

Проблема возникает, когда сайт зависит от пользователя, органически обнаруживающего контент. Как говорит Люк Вроблески, «очевидное всегда побеждает». И это очевидно – чем выше видимость, тем выше использование. Рассмотрим пример Facebook. Когда социальная сеть переместилась из верхнего гамбургер-меню в нижнюю панель вкладок в своем приложении для iOS, вовлеченность пользователей резко возросла, как и возросла удовлетворенность пользователей, более высокие доходы и скорость (и ее восприятие).

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

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

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

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

Если ваша компания все еще пытается заявить о себе, используйте карусели с осторожностью. Карусели затрудняют людям поиск вашей страницы и могут негативно повлиять на поисковую оптимизацию (SEO), поскольку они обычно означают меньше контента в основной части страницы. Чем меньше текста на странице, тем меньше метаинформации может найти Google.

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

Карусели не только делают сайт менее доступным, но и не привлекают посетителей, которые имеют доступ к сайту. Исследование 2013 года показало, что около 1% посетителей сайта нажимали на карусель, в зависимости от того, была ли карусель переадресована автоматически или вручную.

И если принять во внимание советы, которые дает Вроблевски по поводу гамбургер-меню, то беда та же, что и с каруселями – они не очевидны. В приведенном выше исследовании 83% из 1% кликавших кликнули по первому изображению. Что это значит для четырех других изображений, которыми вы надеетесь привлечь пользователей? Они не получают прибыли и мало что делают для продвижения вовлеченности.

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

Всплывающие окна

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

Когда все сделано правильно, всплывающие окна отлично подходят для составных входных данных — ввода дат, роста, веса — и значительно упрощают процесс.

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

Сочетание бесконечной прокрутки с содержимым нижнего колонтитула

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

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

Медленно загружающиеся экраны

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

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

Излишне сложная типографика

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

Хотя могут быть обстоятельства, которые оправдывают использование нескольких шрифтов, обычно лучше сосредоточиться на чистой и четкой подаче информации. Вроблевски предлагает свои заметки о передовом опыте Тима Брауна в типографике. Одним из наиболее важных элементов типографики является баланс — баланс размера, интерлиньяжа и меры улучшает читабельность и эстетическую привлекательность. Какой смысл в шрифте, если его нельзя читать? Затенение ясности дизайна противоречит здравому смыслу и не увеличит вашу читательскую аудиторию.

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

Плавающие элементы

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

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

Параллаксная прокрутка

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

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

Максимально используйте тренды

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