усы2

Стой под стрелой

Поступки и мысли, о которых могу вспомнить не краснея

Previous Entry Поделиться Next Entry
Летающий асфальтоукладчик
усы2
tonsky

Вот тут рассуждения про прокрутку и листалки

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

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

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

Прокрутка содержимого внутри окна, вообще-то, не самая натуральная метафора. Точнее так: для нас важно, что у прокрутки есть ментальная модель. Человек представляет, что «имеется в виду», когда он крутит колесо и перед глазами проносятся цветные пиксели.

Вот это представление, что «что-то имеется в виду», очень важно. Нарисовать на экране можно что угодно. Но человеку проще, когда есть какие-то правила игры. Правила можно запомнить, привыкнуть к ним, предсказывать поведение. Если правила напоминают объекты реального мира, то интерфейс воспринимается легче — часть правил известны из повседневной жизни. Гугл на этом целую философию построил (см. Material design).

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

А теперь представьте, что приходит дизайнер, и вешает на скролл СПЕЦЭФФЕКТ. Друзья дизайнера, ну, наверное, скажут ВАУ. Обычные люди, наверное, смирятся: вот такой у нас теперь веб, что ж, надо терпеть.

↑ спецэффект на рэдимаге. Трудно объяснить, но, в общем, когда долистываешь до конца, под первым листом как бы оказывается второй

Меня же одолевают следующие эмоции:

  1. Беспомощность. Раньше контент слушался малейшего моего движения по тачпаду, теперь уже я не решаю, что и как будет двигаться. Теряется контроль. Некоторые сайты прям специально плавно замедляют скорость прокрутки, чтобы ты четко долистал до нужного блока и не проскочил, и это (искусственно замедленный скролл) ощущается почти как физическая боль. Из серии, хочу встать со стула, но руки-ноги не слушаются.

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

  3. Неуверенность. Я всегда пытаюсь понять, чего хотел дизайнер, и правильно ли я смотрю на его задумку? Листаю ли с нужной скоростью, не проскакиваю ли, можно ли крутить назад?

  4. Раздражение. Это всё еще и тормозит. Да, даже на моем macbook pro с дискретной видеокартой это почти никогда не 60fps. То есть чувствуется, как страница напрягается и выдает с заметным лагом что-то тормозное, о чем ты не просил. Ну какое тут удовольствие? Еще интересно, дизайнеры, которые это рисуют, они просто игнорируют этот факт или как? То есть предполагается, что тормоза надо терпеть? Что когда-нибудь компьютеры станут мощнее? Дизайн с прицелом на будущее, так сказать?

  5. Расстройство от непродуманности. Модель с прокруткой хорошо понятна и изучена. Когда прокрутку перехватывают и показывают какие-то сценки, анимации, эффекты, это всё не рассчитано на нелинейное потребление. Нельзя попрыгать по странице, вернуться в какой-то кусок вверх, листать назад. Лучше бы вставили видеоролик, там тоже анимашки, но хотя бы все эти вопросы продуманы.

В добавок ко всему, это еще и бесполезно. Никто не заставляет перехватывать прокрутку. Любой контент можно оформить без спецэффектов. Любой! Это чистое украшательство. В кавычках. Огромных, иронических кавычках. Меня, на самом деле, ужас берет, когда представлю, что вот так у Бюро Горбунова целая книга сверстана. Это не дает какой-то особенной пользы, кроме того, что хотелось сделать не как у всех.

Представьте, что вы едете на велосипеде, с более-менее постоянной скоростью и усилием. И вот на перекрестке велосипед неожиданно вместе с вами поднимают в воздух и начинают показывать видеоролик. Что делать? Крутить дальше? Остановиться и смотреть? Покрутить назад? Будет ли эффект? Зависит ли от меня хоть что-то? Как я мог это предвидеть? И т.п. И даже если разобраться в ситуации, как ей управлять, остается еще один вопрос: хочу ли я на таких условиях вообще управлять?

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


  • 1
После тридцати это нормально

Мне кажется, арт-директорам в Бюро тоже за 30 или около того

(Анонимно)
Вроде бы совершенно очевидные вещи. От Горбунова не ожидал такой подставы, по ссылке и вправду жесть. Согласен с постом. Идея, вроде, здравая, но результат...

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

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

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


(Анонимно)
Так это общее место современного веба: делать что-то, не понимая зачем. Просто потому, что это модно.
Нечитаемые тонкие шрифты, низкий контраст, бессмысленные анимации, тонны javascript, горизонтальная прокрутка на десктопе...
Перечислять можно бесконечно, однако мне, как пользователю, кажется, что веб становится всё менее и менее юзабельным.
При этом, программистам это всё подаётся, как прогресс и динамичное развитие области.

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

(Анонимно)
Вообще не удивлён. Достаточно посмотреть на IT-гигантов: достаточно вспомнить отказ Microsoft от кнопки пуск в Windows 8, или посмотреть на то, как Google тащит мобильный UI в Web (Google play music это же просто ад). Это вроде бы клиентоориентированные компании, которые, уверен, не экономят на дизайнерах.


Ну у гигантов другая проблема, design by committee

(Анонимно)
У меня лучший опыт от мобильного веба был на телефоне nokia с браузером opera mini. Он превращал страницу просто в текст с заголовками. Там были еще аппаратные кнопки для листания. Я жал на кнопку и попадал точно на следующую страницу. Не надо было целиться как на айфоне и смотреть на движущийся текст.
Веб как платформа устарел, он не приспособлен под чтение с мобильников и слишком раздут по функциональности. Думаю через год-другой появится что-то новое.

>Раздражение. Это всё еще и тормозит. Да, даже на моем macbook pro с дискретной видеокартой это почти никогда не 60fps. То есть чувствуется, как страница напрягается и выдает с заметным лагом что-то тормозное, о чем ты не просил

Вот это и правда очень интересный феномен. Видимо, существует какая-то профессиональная деформация у дизайнеров и фронтендеров, которая позволяет не замечать таких вот лагов. Например, как-то раз я буквально записывал видео, чтобы показать аутсорсерам, где же лаги — три человека хором утверждали, что всё гладко и нормально. Это со мной что-то не так или с ними?

Ещё один случай: я читал пару победных текстов от авторов https://gyrosco.pe/ про то, как они бились (и побеждали) за гладкие анимации, но всегда, когда я захожу на их лендинг, он слегка и мерзко подлагивает даже в хроме, на MBP 13 2015. Все анимации чуть-чуть тормозят. Ну вот как так?

Возможно, один из факторов — сочетание JIT'а и workflow фронтендера. Пользователь смотрит на первые несколько запусков куска кода (когда ещё никакой статистики по горячим веткам нет), а фронтендер, скорее всего, дёргает эту анимацию миллион раз.

Про JIT хорошая идея, я зашёл на гироскоп (mbp 15" 2015), подтормаживает немного. Покрутил туда-сюда несколько раз и стало плавно.

Было бы интересно получить ответ или комментарий от Бирмана или Горбунова. Не хочешь в комментариях отметиться к совету?

У них и так чересчур много людей отметилось, в постах про книгу у Артема в фейсбуке. Я думаю они в курсе

А есть прямая ссылка на запись? (У меня нет фейсбука - хочу просто пролистать комментарии.)

>Еще интересно, дизайнеры, которые это рисуют, они просто игнорируют этот факт или как?

я не встречал практики, чтобы дизайнерам ставили задачу "чтобы сайт не тормозил". Хотя мой опыт, естественно, не всеобьемлющ

Задача дизайнера - не сделать удобно, а стать знаменитым.

А проблема прокрутки в том, что это свиток. И он, естественно, проигрывает книге.

"А проблема прокрутки в том, что это свиток. И он, естественно, проигрывает книге."

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

Кто сейчас использует свитки?

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

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

Плюс ссылки - это уже не свиток.

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

Люди очень быстро переходят на то, что им удобнее. Телефоны с диском сменились на кнопочные, а потом на хенди и смартфоны.

Ну ок. Так в чём удобство книги относительно свитка с учётом вышеизложенного?

Скорость доступа к определённой записи.

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

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

Мне кажется, что хотелось как раз как у всех.

  • 1
?

Log in