Как изменилось отношение последних десяти лет к горизонтальной прокрутке на веб-сайтах?

Часто цитируемый юзабилити-гуру Якоб Нильсен написал статью « Десять ошибок веб-дизайна в 2002 году » и разместил по 3 горизонтальной прокрутке как ошибка веб-дизайна с мотивацией:

  

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

     

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

Несмотря на то, что указанный размер экрана и предпочтительная ширина веб-страницы являются исторической ретроспективой и недействительны на сегодняшней ширине экрана или ширине веб-сайта, сущность этого может быть по-прежнему действительна. Я сделал веб-сайты (SharePoint) более широкими, чем 1900 пикселей, и в качестве эффекта веб-сайт прокручивается по горизонтали. Меня это раздражает, но я раньше был неправа.

Другим видом горизонтальной прокрутки будет статья веб-дизайнера Ledgers " 40 из Лучшие веб-сайты с прокруткой по горизонтали », где они обсуждают возможные проблемы юзабилити:

  

Но что относительно юзабилити?

     

Посмотрим правде в глаза. Юзабилити - чрезвычайно важная часть веб-дизайна, и горизонтальные веб-сайты не очень удобны для пользователей. Однако удобство использования - не самая важная часть уравнения. Те, кто повышают удобство использования, прежде всего, часто сводят к минимуму «дизайнерскую» часть веб-дизайна. Да, вы можете создать очень стилизованный и удобный веб-сайт, но где футуристическое и воображаемое мышление внутри вертикального прямоугольника? Будущее представляет собой горизонтальный прямоугольник. Не будем забывать, что в Интернете было время, когда JPEG не приветствовался в веб-дизайне, потому что это вызвало более медленное время загрузки. Технологии продвинуты, дизайнеры созданы и адаптированы для пользователей. Однажды, то же самое произойдет с горизонтальными веб-сайтами.

     

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

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

12 голосов | спросил 4rchit3ct 15 SatEurope/Moscow2012-12-15T18:33:01+04:00Europe/Moscow12bEurope/MoscowSat, 15 Dec 2012 18:33:01 +0400 2012, 18:33:01

6 ответов


6

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

С отзывчивым ростом ( RWD & A List Apart article from 2010 ), страницы с обычной горизонтальной прокруткой выглядят как « ошибочные проекты », которые заставляют браузер показывать горизонтальные полосы прокрутки , Это еще менее приемлемо, поскольку это было 5-10 лет назад.

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

Однако есть также события, которые обновляют appoach до горизонтальной прокрутки. С RIA'а hainvg, выросший в значении за последние 5-10 лет, существуют типы веб-сайтов, которые больше работают как интерактивные анимации и, таким образом, может игнорировать некоторые старые стигмы, когда дело доходит до горизонтальной прокрутки. Важно отметить, что горизонтальная прокрутка редко используется «как есть» по соглашению браузера, но с ней связан какой-то эффект или анимационная навигация. (См. Примеры прокрутки параллакса , где эффект визуальной анимации дал оправдание приведению назад горизонтальная прокрутка как часть хорошо спроектированного пользователя.)

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

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

ответил kontur 15 SatEurope/Moscow2012-12-15T21:35:06+04:00Europe/Moscow12bEurope/MoscowSat, 15 Dec 2012 21:35:06 +0400 2012, 21:35:06
4

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

Среда - браузер на ПК или ноутбуке. Прокрутка через трекпад или мышь.

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

Теперь это быстро меняется, потому что среда «прокрутки» меняется быстро:

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

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

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

Другим примером является использование горизонтальной прокрутки в операционных системах. Это занимает огромную популярность в новом дизайне «Metro» Windows 8. Все вы видите его для просмотра фотографий на iOS.

Дальнейшее изменение среды - это продвижение в возможностях браузера. Теперь его очень легко прокрутить человека влево или вправо с помощью JQuery, так что вы можете сделать это с помощью щелчка мыши, чем с помощью мыши с ужасной горизонтальной полосой прокрутки. Отличным примером большой организации, использующей дополнительную горизонтальную прокрутку таким образом (явно нажимая функциональность на рынке планшетов) является домашняя страница BBC: www.bbc.co.uk

Домашняя страница BBC использует расширенный горизонтальный для отображения содержимого

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

Я думаю, что общий консенсус таков:

  • Не используйте его в качестве основной навигации, если только небольшой сайт (например, портфолио)
  • Используйте его в рамках прогрессивного улучшения, чтобы улучшить взаимодействие на веб-сайте, поскольку люди, которых вы знаете, будут использовать сенсорные экраны (например, пример приложения Facebook).
  • Проверка: кто ваши пользователи, какие устройства они используют для доступа к вашему сайту? ПЕРЕД выполнением этих функций.

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

ответил slawrence10 15 SatEurope/Moscow2012-12-15T21:15:10+04:00Europe/Moscow12bEurope/MoscowSat, 15 Dec 2012 21:15:10 +0400 2012, 21:15:10
3

Отношения изменились главным образом из-за:

  1. Горизонтальная прокрутка на планшете
  2. Способность мыши легче прокручиваться с помощью расширенного кодирования
  3. Повышенное значение веб-сайтов на китайском языке

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

TWO: Проблема становится немного более липкой на ПК из-за мыши, но есть способы закодировать ее, чтобы вертикальный скроллер прокручивался по горизонтали: http://css-tricks.com/snippets/jquery/Horz-прокручивать-с-мыши колеса /

ТРЕТИЙ: Я думаю, что отношения могут также измениться из-за нового (ish) CSS-кодирования, которое позволяет кодировать ханские языки (китайский) вертикально, а не горизонтально.
http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/ Если вы читаете справа налево или слева направо, вам потребуется прокрутить вниз, чтобы получить дополнительную информацию, но языки, которые читаются сверху вниз, требуют горизонтальной прокрутки. Я не эксперт на сайтах китайского языка, но я предполагаю, что это станет все более важным фактором в будущем.

ответил UXAndrew 15 SatEurope/Moscow2012-12-15T21:38:09+04:00Europe/Moscow12bEurope/MoscowSat, 15 Dec 2012 21:38:09 +0400 2012, 21:38:09
2

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

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

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

ответил Marjan Venema 15 SatEurope/Moscow2012-12-15T19:18:00+04:00Europe/Moscow12bEurope/MoscowSat, 15 Dec 2012 19:18:00 +0400 2012, 19:18:00
1

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

http://album.alexflueras.ro/ имеет макет содержимого горизонтально, но прокрутка вверх и вниз по мыши перемещает содержимое влево и вправо. Такая настройка не требует дополнительного времени, чтобы привыкнуть и во многих случаях работать. Если пользователь должен либо вручную захватить полосу прокрутки для прохождения через контент (или использовать комбинации клавиш, такие как сдвиг смены), то это, вероятно, будет намного более раздражать.

http://www.bartleboglehegarty.com/#/europe действительно требует захвата сайта для перемещения (или с помощью пользовательской горизонтальной полосы прокрутки вверху). Мне потребовалось некоторое время, чтобы понять, и это было не приятно, когда это было реализовано, поэтому мне было бы трудно сказать, что это хорошая замена обычной навигации.

http://carrotcreative.com/#!/ и http://www.charliegentle.co.uk/ прокручивайте содержимое слева направо, но на самом деле не требуйте от пользователя сделайте любую специальную навигацию, чтобы выполнить ее. Нажатие на ссылки перемещает содержимое внутрь и снаружи, что, не влияя на навигацию, не кажется вредным. Хотя может быть трудно назвать их «горизонтальными прокручивающими сайтами».

http://www.clholloway.co.za/ - это то же самое, что и первый сайт , содержимое которого перемещается горизонтально, но позволяет верифицировать прокрутку для навигации. И это работает.

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

ответил gotohales 15 SatEurope/Moscow2012-12-15T19:25:37+04:00Europe/Moscow12bEurope/MoscowSat, 15 Dec 2012 19:25:37 +0400 2012, 19:25:37
1

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

Существует также разница между горизонтальной прокруткой и горизонтальной страницей . Для непрерывного прокрутки не создается хороший пользовательский интерфейс, будь то горизонтальный или вертикальный. Я считаю, что концепция вертикальной прокрутки возникла из-за того, что (по крайней мере, в США) мы читаем от верхней части страницы донизу, поэтому естественно перемещаем содержимое, которое мы просматриваем в верхней части страницы, чтобы продолжить этот процесс. около. Я вижу, по крайней мере, один сайт, упомянутый в ссылке OP, ссылающейся на верхние 40 горизонтальных сайтов прокрутки, в которых используется пейджинг. Я считаю, что, вероятно, было бы лучше для горизонтальных сайтов, поскольку прокрутка нарушит естественный процесс движения глаз вниз при просмотре слева направо, так как теперь им нужно будет двигаться вниз, слева направо и больше слева при прокрутке страницы, если это имеет смысл. Чтобы упростить задачу, пользователь может просто прокрутить всю страницу , прежде чем пытаться просмотреть остальную часть содержимого, вот что я буду делать. Теперь мы заставляем пользователя усердно работать с нашим контентом, и это плохо. Дизайнер может выполнять правильную подкачку горизонтально, чтобы смягчить эту проблему.

ответил MDMoore313 6 J0000006Europe/Moscow 2014, 18:55:40

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132