3 критических UX-соображения перед параллаксом

  1. 1. Параллакс и SEO обычно не смешиваются
  2. 2. Параллакс может быть медленным и не мобильным
  3. 3. Нет реального преимущества юзабилити
  4. Последнее слово об UX и параллаксе

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

В этой части мы объясним несколько вещей, которые вы должны учитывать, если хотите, чтобы этот метод работал на вас.

Прокрутка как основного, так и фонового содержимого на разных скоростях создает иллюзию глубины. Как Жаклин Кё Томас указывает на ее превосходная статья UX Matters на эту тему «Прокрутка параллакса очень эффективна в управляемом рассказывании историй». Другими словами, вы можете помочь продавать свои продукты или услуги с помощью прокручиваемого сборника рассказов.

Такие сайты, как « Лодка Нэм Ли использует параллакс в качестве повествовательного устройства. Однако возникает вопрос: действительно ли они обеспечивают хороший UX?

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

1. Параллакс и SEO обычно не смешиваются

Как описано в бесплатной электронной книге Лучшие практики веб-интерфейса Параллакс может прийти за счет - поисковая оптимизация вашего сайта.

Линдси Колович в своей статье Hubspot « Виноват ли Параллакс за плохое SEO? Говорит, что в основе SEO лежит размещение всего сайта на одном URL - то, что поощряет прокрутка параллакса. Это означает, что поисковые системы, такие как Google, будут индексировать только эту страницу. Распределение контента по большему количеству страниц дает вашему сайту больше видимости в поисковых системах.

Распределение контента по большему количеству страниц дает вашему сайту больше видимости в поисковых системах

Источник изображения: Плоский дизайн против реализма 2013

Но есть несколько способов обойти это. Давайте посмотрим на них:

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

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

2. Параллакс может быть медленным и не мобильным

Другими недостатками являются скорость и мобильность.

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

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

Источник изображения: Cyclemon

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

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

Источник изображения: Cyclemon

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

Источник изображения: Cyclemon

По мере продвижения по странице показано двадцать различных типов велосипедов.

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

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

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

Источник изображения: Cyclemon

Пойдем на мобильный. Эффект параллакса теряется.

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

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

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

3. Нет реального преимущества юзабилити

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

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

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

Тем не менее, исследование показало, что двое из участников, использующих сайт параллакса, страдали «укачиванием и испытывали значительные проблемы с юзабилити при взаимодействии с сайтом параллакса».

Суть? Параллакс - не лучший выбор, если пользователи хотят выполнять четкие задачи (например, покупки в Интернете). Представьте себе, к примеру, как разочаровал бы Amazon, если бы вам пришлось пролистать 8 разделов несвязанных продуктов, чтобы найти нужный вам жесткий диск.

Источник изображения: Cyclemon

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

Последнее слово об UX и параллаксе

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

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

Давайте рассмотрим их:

  • Параллакс поощряет плохие практики SEO. Хотя есть несколько обходных путей, SEO может быть серьезно затруднен. Это потому, что если весь контент находится на одной странице с одним URL, поисковые системы будут индексировать сайт только один раз.
  • Параллакс не совместим с мобильными устройствами. Время загрузки ужасно, потому что параллакс интенсивно использует JavaScript. Это делает его непрактичным как для мобильного, так и для адаптивного дизайна.
  • Параллакс не имеет большого преимущества для удобства использования. Он отлично подходит для веселых сайтов, но не обязательно делает его более удобным, чем без него. Тем не менее, мы все знаем UX требует больше, чем простота использования , Если вашей целью является интерактивное рассказывание историй, то параллакс, безусловно, добавляет слой восторга.

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

Если вы хотите узнать о других практических методах веб-интерфейса, ознакомьтесь с бесплатной электронной книгой Лучшие практики веб-дизайна , 109-страничная электронная книга содержит анализ более 30 примеров таких ведущих компаний, как Spotify, Apple и Skullcandy.

Если вы хотите узнать о других практических методах веб-интерфейса, ознакомьтесь с бесплатной электронной книгой   Лучшие практики веб-дизайна   ,  109-страничная электронная книга содержит анализ более 30 примеров таких ведущих компаний, как Spotify, Apple и Skullcandy

Похожие

SEO
... им крайний срок, и как только проект закончен, это все. SEO - это долгосрочная маркетинговая стратегия, и над ней нужно постоянно работать в рамках постоянной маркетинговой программы, которая продолжает определять основные этапы и результаты. Вехи SEO не должны быть наивысшими по этому ключевому слову или фразе; это для того, чтобы ваша долгосрочная маркетинговая стратегия SEO приносила жизнеспособные продажи и ведет к вашему бизнесу. Как работает SEO?
SEO Обучение
Наша SEO работа призвана привлечь больше трафика и конверсии на ваш сайт. Хотя наши услуги соответствуют правилам, они состоят из долгосрочных результатов. Самый простой способ получить трафик от Google - это доказать Google, что вы являетесь сайтом высокого качества и соответствует его стандартам качества. Google наказывает сайты, которые не соответствуют требованиям качества. Я контролирую ваш сайт с учетом требований поисковых систем, и в будущем я выполняю работу по оптимизации,
Мастер SEO
Seo Sem Master и веб-аналитика Сделайте с Euroinnova ваши Мастер Сео Сем и Веб-аналитика. Этот мастер в SEO предлагает все необходимые знания в: 2.0, AdWords, блог, поиск, кампании, маркетинг, коммерция и сообщества , предлагая простое обучение в 2.0, AdWords, блог, поиск и кампании. По окончании
SEO услуги
... нес . Методы SEO могут иметь неприятные последствия, если вы не знаете, как правильно их использовать. Пытаясь использовать SEO на своем сайте для увеличения трафика, убедитесь, что ваш сайт хорошо закодирован. Если у вас запутанный сайт с неаккуратным кодированием, пауки не смогут найти ваш сайт. В настоящее время контент должен быть в центре внимания, и широкий спектр средств массовой информации, таких как видео и статьи, распространяемые на авторитетных
SEO смерть, SEO мертв?
В 1987 году Империя выпустила сингл Rock'n'Roll мертв. Сегодня, 23 года спустя, я не могу понять, что это так, во всяком случае, рок-н-ролл был доминирующим жанром на протяжении большей части этих лет. Мало того, что рок-н-ролл оказал влияние и вошел во все другие жанры. когда
SEO изображения
... ий способ выбрать изображения Актуальность изображения Создание привлекательных и удобных для чтения страниц - важная часть работы пользователя, которая может оказать заметное влияние на SEO ; плохой UX приводит к высоким показателям отказов, что является сигналом ранжирования, используемым поисковыми системами"> Лучший способ выбрать изображения Актуальность изображения Создание привлекательных и удобных для чтения
SEO ТЕХНИКИ
... преимущества, которые она может предложить. В «Правде» мы не только эксперты в области онлайн-маркетинга, но и Google, и Bing также поддерживают нас. С 2010 года у нас есть сертификаты качества, одобренные в обеих поисковых системах, что дает клиенту уверенность в работе с квалифицированными специалистами. Нажав на значки, вы можете получить доступ к онлайн сертификатам сами. В настоящее время принято определять, какая компания хочет предоставить вам продукты или услуги,
SEO копирайтинг
SEO копирайтинг Копирайтинг SEO - это метод написания текста таким образом, что он может быть проиндексирован алгоритмами поисковых систем и, таким образом, расположен на верхних позициях в своих результатах. Важно то, что текстовое содержимое не должно копироваться с другого веб-сайта, но оно должно быть полностью оригинальным. Первые результаты в поиске Google, чаще всего, веб-сайты, содержание которых написано
SEO предложения
... не подпадают под определенный стандарт. Потому что на цену влияет множество различных факторов, и мы оцениваем размер исследования после оценки всех этих элементов. Объем поиска запрашиваемых ключевых слов Конкурс по ключевым словам для изучения SEO совместимость вашего сайта Возраст вашего сайта Был ли ваш сайт ранее подвергнут некорректным приложениям в контексте SEO Сила сайтов, с которыми вы конкурируете, предыдущие и текущие
SEO оптимизация
Есть много компаний, которые так или иначе предлагают позиционирование в Интернете и гарантируют результаты поиска / позиции. Но что именно вы ищете? Это действительно сложный мир, и компании ищут действительно простые решения, заставляют наших клиентов приходить к нам, встречать
Преимущества и преимущества SEO в бизнесе
... имание SEO или (поисковая оптимизация) Теперь преимущества и преимущества SEO для бизнеса? SEO преимущества для бизнеса 1. Привнесите потенциальный трафик на бизнес-сайт

Комментарии

Может быть, вы думаете: «О, нет, это не другая компьютерная сертификация… у нас уже есть Microsoft, Cisco, Novell, Adobe, A +… нам также нужна сертификация Google?
Может быть, вы думаете: «О, нет, это не другая компьютерная сертификация… у нас уже есть Microsoft, Cisco, Novell, Adobe, A +… нам также нужна сертификация Google?» Моя позиция заключается в том, что это именно то, что нужно индустрии онлайн-рекламы, чтобы установить профессиональный стандарт. В конце концов, хотели бы вы, чтобы Джо Блоггс с улицы выполнял операцию на сердце без какой-либо степени или квалификации? Или вы бы проверили ваши глаза кем-то, кроме квалифицированного окулиста?
Как раньше понимание SEO или (поисковая оптимизация) Теперь преимущества и преимущества SEO для бизнеса?
Может быть, вы думаете: «О, нет, это не другая компьютерная сертификация… у нас уже есть Microsoft, Cisco, Novell, Adobe, A +… нам также нужна сертификация Google?» Моя позиция заключается в том, что это именно то, что нужно индустрии онлайн-рекламы, чтобы установить профессиональный стандарт. В конце концов, хотели бы вы, чтобы Джо Блоггс с улицы выполнял операцию на сердце без какой-либо степени или квалификации? Или вы бы проверили ваши глаза кем-то, кроме квалифицированного окулиста?
Если вы позиционируете себя с фразами, которые вы не знаете ранее и у которых может быть очень мало трафика или которые никто не ищет в интернете, что хорошего в этом?
Если вы позиционируете себя с фразами, которые вы не знаете ранее и у которых может быть очень мало трафика или которые никто не ищет в интернете, что хорошего в этом? Не позволяйте вашему веб-позиционированию и фразам позиционировать их решать за вас. Мы все должны подумать, прежде чем приступить к работе. Каждое ключевое слово и для каждого сектора требуют задания веб-позиционирования по-разному. Вы должны проанализировать каждый случай. Есть фразы с большей
Вы когда-нибудь чувствовали, что SEO, что у вас не получилось, или ваши SEO-сервисы окончательно отказались от SEO на вашем сайте?
Вы когда-нибудь чувствовали, что SEO, что у вас не получилось, или ваши SEO-сервисы окончательно отказались от SEO на вашем сайте? Есть так много причин, почему это может произойти, и с точки зрения методов SEO, которые сделаны до вещей, которые вообще не связаны с SEO. Да, вещи, которые, по вашему мнению, не повлияют на результаты SEO, на самом деле имеют большое влияние. И это стало большим врагом народа опытные SEO услуги Так что обычно
Может быть, «хаос» жанра был слишком велик, чтобы мешать песне Что либо слишком много, либо просто венгерские СМИ еще не готовы к этому?
Может быть, «хаос» жанра был слишком велик, чтобы мешать песне Что либо слишком много, либо просто венгерские СМИ еще не готовы к этому? Тогда время покажет вам! Герои и Дениз - я буду как-то Долгое время Heroes были одной из самых популярных команд в отечественном рэпе, и их сопровождала песня или клип в барселоне казино, но они уже Дениз в Будапеште, один из самых популярных сольных насильников в Венгрии. ) является участником, возможно, из-за их "подкрепления"
Предоставляет ли ссылка дополнительную информацию или контекст, который не может быть интегрирован в историю, например, ссылку на ветку Twitter, как указано выше?
Предоставляет ли ссылка дополнительную информацию или контекст, который не может быть интегрирован в историю, например, ссылку на ветку Twitter, как указано выше? Является ли связанный контент неотъемлемой частью истории, но по какой-либо причине не может быть размещен на веб-сайте публикации? Со стороны пиара, ссылка, которую вы просите добавить в историю? Вклад, который вы внесли в историю, заслуживает ссылки? Если ответ на любой вопрос - нет, то я бы не стал тратить
Может ли ваш сайт быть найден в поисковых системах, если он не сканируется?
Может ли ваш сайт быть найден в поисковых системах, если он не сканируется? Конечно, нет. Сканирование - это первый шаг к индексации. Когда и если ваши страницы загружаются медленно, ваш бюджет сканирования может быть исчерпан до сканирования всего сайта. Это означает, что новые страницы на вашем сайте могут индексироваться медленнее, а любые внесенные вами изменения обрабатываются поздно.
Так что мы должны использовать SEO или PPC, или, может быть, даже оба?
Так что мы должны использовать SEO или PPC, или, может быть, даже оба? Что такое реклама в поисковой оптимизации? SEO - это маркетинговая дисциплина, ориентированная на растущую наглядность в органических (неоплачиваемых) результатах поиска. SEO включает в себя как технические, так и креативные элементы, необходимые для повышения рейтинга, привлечения трафика и повышения осведомленности в поисковых системах.
Например, когда я ссылаюсь на естественные ссылки, мне может быть полезно отослать вас к моей Пояснительное руководство по SEO ?
Так что мы должны использовать SEO или PPC, или, может быть, даже оба? Что такое реклама в поисковой оптимизации? SEO - это маркетинговая дисциплина, ориентированная на растущую наглядность в органических (неоплачиваемых) результатах поиска. SEO включает в себя как технические, так и креативные элементы, необходимые для повышения рейтинга, привлечения трафика и повышения осведомленности в поисковых системах.
До сих пор в своем блоге я описал множество советов по SEO, как вы должны делать поисковая оптимизация , Я подумал, почему бы не поделиться тем, что не следует делать?
Так что мы должны использовать SEO или PPC, или, может быть, даже оба? Что такое реклама в поисковой оптимизации? SEO - это маркетинговая дисциплина, ориентированная на растущую наглядность в органических (неоплачиваемых) результатах поиска. SEO включает в себя как технические, так и креативные элементы, необходимые для повышения рейтинга, привлечения трафика и повышения осведомленности в поисковых системах.
Удобный способ протестировать варианты сайта для улучшения UX, может ли это плохо повлиять на SEO?
Удобный способ протестировать варианты сайта для улучшения UX, может ли это плохо повлиять на SEO? На самом деле оказывается, что другая сторона медали особенно чувствуется в случае плохой практики ... Контекст: внезапная потеря позиции Чтобы лучше понять наш вывод, давайте поместим вещи в контекст. Предупреждение было дано падением позиции в поисковой выдаче. Соответствующий сайт, сначала по довольно конкурентному запросу, был жестоко найден на второй странице.

Однако возникает вопрос: действительно ли они обеспечивают хороший UX?
Линдси Колович в своей статье Hubspot « Виноват ли Параллакс за плохое SEO?
Суть?
Как работает SEO?
Но что именно вы ищете?
Имание SEO или (поисковая оптимизация) Теперь преимущества и преимущества SEO для бизнеса?
Может быть, вы думаете: «О, нет, это не другая компьютерная сертификация… у нас уже есть Microsoft, Cisco, Novell, Adobe, A +… нам также нужна сертификация Google?
В конце концов, хотели бы вы, чтобы Джо Блоггс с улицы выполнял операцию на сердце без какой-либо степени или квалификации?
Или вы бы проверили ваши глаза кем-то, кроме квалифицированного окулиста?
Может быть, вы думаете: «О, нет, это не другая компьютерная сертификация… у нас уже есть Microsoft, Cisco, Novell, Adobe, A +… нам также нужна сертификация Google?
Меню сайта
Мини-профиль
  • Регистрация Напомнить пароль?

    Бесплатно можно смотреть фильмы онлайн и не забудьте о шаблоны dle на нашем ресурсе фильмы бесплатно скачать c лучшего сайта
    Опросы
    Топ новости
    Инструкция: как включить подсветку клавиатуры на ноутбуке Asus


    Заблокировалась и отключилась встроенная клавиатура на ноутбуке: как снять блокировку и включить? 


    Ремонт ноутбука ASUS N75S в Санкт-Петербурге (СПб): замена дисплея, замена клавиатуры, ремонт корпуса Асус N75S, замена матрицы
    Услуга Стоимость, руб. Диагностика ASUS N75S Бесплатно (500р при необходимости разбора) Профилактические работы с системой охлаждения + замена кулера 2500 р * Замена чипа (видеочипа) ASUS N75S 6000-6500 Замена

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

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

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

    Замена и ремонт клавиатуры для ноутбука, видео-инструкции
    Замена клавиатуры и кнопок ноутбука показано на видео с подробным объяснением процесса. Цена замены в сервисном центре от 200 рублей . Звоните по тел: +7 (812) 640-03-20 . Замена или ремонт

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

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

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