Оставьте скроллинг сайта в покое

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

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

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

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

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

Не усложняйте

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

Не удаляйте, будет хуже

У AIC просто очень плохой сайт:

Ну и спецэффекты, Aic.

Медленные и «интересненькие» слайдеры должны были умереть в 2012 году. Бесконечно долго ждать загрузки невозможно. У слайдера на главной очень много лишней анимации. Скроллинг вообще отсутствует, поведение страницы неочевидно. Один из худших сайтов.

Покажите хоть что-нибудь

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

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

Упрощайте

Пример хорошей прокрутки, но сомнительной навигации.

Ребята из Hungry Boys спрятали скроллинг, но сделали функциональность интуитивно отзывчивой. Это очень хороший пример «нестандартного» скроллинга — анимация приятная и быстрая.

Усложняйте, если умеете

Вот пример того, как можно сделать скроллинг и вообще сёрфинг по сайту интересным.

Старая версия сайта студии Олега Чулакова

В студии Чулакова сделали «сложно», но хорошо. Гулять по сайту приятно и понятно. Однако анимация сильно обращает на себя внимание, а это первый признак плохого скроллинга. Сейчас они вообще все упростили до стандартной функциональности — молодцы.

Хороший скроллинг не обращает на себя внимание.

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

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

Перед тем как придумывать очередной контринтуитивный скролл, задайте себе пару вопросов:

  • Зачем я это делаю?
  • Для кого?
  • Какую задачу будет решать?
  • Не хочу ли показать, что я классный?

Если адекватных ответов в пользу нового и модного скролла нет — забейте на свои грязные желания. Решите другие вопросы.
У меня все.

0
8 комментариев
Написать комментарий...
Кохоне

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

Ответить
Развернуть ветку
Pixel Lens

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

Ответить
Развернуть ветку
Илья Снеговской

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

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Denis Kiselev

Нестандартный скроллинг лагает даже у Эппла - а уж они то пытались сделать всё максимально хорошо.

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

Ответить
Развернуть ветку
Pixel Lens
а уж они то пытались сделать всё максимально хорошо.

С чего такой странный вывод?

Ответить
Развернуть ветку
stivstivsti

Меня бесят эти километровые буквы, которые стали модными последние 3-5 лет, чудовищный шрифт, ничего нельзя найти.

Ответить
Развернуть ветку
Nikolay Kenig

Лично я всегда ищу инфу а не красивые картинки с анимашками

Ответить
Развернуть ветку
Александр Ефимов

По-моему это просто крик души автора, которого это зацепило) Если ты заходишь на сайт и после 2-3 прокруток у тебя на экране сайт не съезжает вниз, а сменяются 2-3 картинки и ты не можешь составить логическую связь - ну сами понимаете, это уже дело каждого)) С анимацией да, главное не переборщить, но смотреть полностью статичные сайты - это не интересно. Их спасут только очень красивые и качественные фотографии/изображения. У меня возник вопрос только к CreativePeople.

Ответить
Развернуть ветку
5 комментариев
Раскрывать всегда