Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 57
Анимация отдельных элементов страницы может дать пользователю определенные подсказки, касаемо контента веб-сайта.
В первом примере, контент появляется снизу и тут же исчетзает. Как будто говорит: «Привет, я тут. Если я тебе нужен, ты знаешь, что делать.»
Да не, полная хрень. ИМХО повсеместная анимация всего и вся — это сейчас тот тренд, который зло. Я захожу на странцу, она грузится, появляются элементы. И при этом ещё какая-то анимация вылазит-залазит туда-сюда. В этом случае я просто подожду, когда всё успокоится и остановится, и уже потом буду разбираться, что у меня на экране.
Анимация вообще не должна происходить сама по себе. Если это не мультфильм, конечно.
(Самый адовый пример, где из-за анимации происходит чёрти-что — новый сайт альфабанка alfabank.ru/ от сами знаете кого)
Но вопрос конечно очень интересный для обсуждения.
Вот это жесть. У меня ещё и текст периодически пропадает при анимации.
Вспоминаем PowerPoint: мультфильмы с прыгающим и бегающим текстом, прилетающие и улетающие картинки — всё это было и прошло. Сейчас стандарт для презентации — это минимум анимаций, 95% презентации это статичный текст с картинками на однородном фоне. Анимации должны быть настолько незаметными и вписывающимися в работу интерфейса, насколько это возможно, в идеале их быть не должно — нужно всегда исходить из этого.
Наверное, минимализм — это тоже сейчас мода (а не стандарт вообще).
Но тут изначально в другом проблема. Кто-то сделал новомодный сайт. Он выглядит красиво, это в принципе не плохо, но проблема в том, что теперь стало непонятно, что там есть куда скроллить. И задача в том, как это обозначить. Надпись «тут можно скроллить» — самый тупой и рабочий вариант, но очевидно не идеальный. Но спонтанная анимация — точно хуже (хотя уже и не так тупо).
Ну и получается, что нужно какое-то общепринятое обозначение для прокручивающегося контента. Раньше можно было догадаться по скроллбару + по тому, что есть какой-то текст и он не заканчивается. Для огромных картинок это не работает, т.к. скроллбар можно просто не заметить.
И я сейчас как раз пытаюсь проэкспериментировать в этом направлении. На мой взгляд (очень субъективный) хороший способ — делать, чтоб контент затухал в каком-то градиенте, тогда видно, что он пропадает, но не заканчивается. Это не новая идея, так уже давно обозначали в вебе, но я пытаюсь сделать это обозначение динамическим и зависящим от контекста: asvd.github.io/intence_ru
Хотя, стоит признаться, мои идеи собрали гневных комментов наверное не меньше, чем сайт альфа-банка :-D
Но тут изначально в другом проблема. Кто-то сделал новомодный сайт. Он выглядит красиво, это в принципе не плохо, но проблема в том, что теперь стало непонятно, что там есть куда скроллить. И задача в том, как это обозначить. Надпись «тут можно скроллить» — самый тупой и рабочий вариант, но очевидно не идеальный. Но спонтанная анимация — точно хуже (хотя уже и не так тупо).
Ну и получается, что нужно какое-то общепринятое обозначение для прокручивающегося контента. Раньше можно было догадаться по скроллбару + по тому, что есть какой-то текст и он не заканчивается. Для огромных картинок это не работает, т.к. скроллбар можно просто не заметить.
И я сейчас как раз пытаюсь проэкспериментировать в этом направлении. На мой взгляд (очень субъективный) хороший способ — делать, чтоб контент затухал в каком-то градиенте, тогда видно, что он пропадает, но не заканчивается. Это не новая идея, так уже давно обозначали в вебе, но я пытаюсь сделать это обозначение динамическим и зависящим от контекста: asvd.github.io/intence_ru
Хотя, стоит признаться, мои идеи собрали гневных комментов наверное не меньше, чем сайт альфа-банка :-D
В плане скролла по-моему идеально сделано на том самом новом сайте альфабанка. Там сразу бросается в глаза скроллбар и первым делом, когда я зашел на сайт, я проскроллил именно потому что увидел, что есть куда скроллить. Зачем что-то еще придумывать?
А вы увидели, что можно скроллить вниз или скроллить вправо?
Я первым делом увидел скроллбар и то что он сигнализирует, что можно вниз проскроллить, что сразу и сделал (их сайт я смотрел еще до прочтения этой статьи). А вправо там только в одном месте можно попасть и для этого вполне четкие стрелочки (только странно, что они переход по стрелкам не продублировали с клавиатуры).
Вообще косяков в их новом сайте не мало (например, лого на некоторых страницах кривое, а также есть страницы, которые открываются в маленьком окошке, но размер страницы не вписывается в размер окошка), но вот претензий к скроллингу главной страницы у меня нет, этот момент там идеально продуман.
Вообще косяков в их новом сайте не мало (например, лого на некоторых страницах кривое, а также есть страницы, которые открываются в маленьком окошке, но размер страницы не вписывается в размер окошка), но вот претензий к скроллингу главной страницы у меня нет, этот момент там идеально продуман.
Интересно, а когда я смотрю на этот же сайт, я не понимаю, зачем мне его сколлить — там вроде бы уже всё на месте.
Когда я вижу скроллбар, то я интуитивно листаю. Поэтому у меня не возникло никакой проблемы с этим. Даже несмотря на то, что я не часто вижу подобного типа сайты, у меня не возникло чувства дискомфорта. Как раз отсутствие скроллбара (если бы они его заменили стрелкой вниз) у меня бы вызвало чувство дискомфорта.
Кстати, такое ощущение, что они сегодня еще оптимизировали сайт, так как у меня вообще перестало тормозить фоновое видео.
Кстати, такое ощущение, что они сегодня еще оптимизировали сайт, так как у меня вообще перестало тормозить фоновое видео.
новый сайт альфабанка alfabank.ru/
В точку! Это просто «шедевр креатива». Настолько «вырвиглазно», что первый порыв закрыть скорее это месиво. Затем останавливаешься на долю секунду и… закрываешь.
Пересилил сейчас себя, зашел посмотреть внимательнее. Нет, не могу. Все смысловые (текстовые) элементы разбросаны по краям (моего большого) экрана. Глаз в конце рабочего дня просто отказывается это читать.
p.s. я не злой, и более того их клиент… но нельзя же так над людьми издеваться.
а еще это не работает на телефонах, вообще никак)
«сделано в студии артемия лебедева»
Это не трейдмарк, это диагноз. Того же авторства был сайт медиамаркта, где тоже был дизайн во все поля, и при этом — в магазине, итить! — невозможно было что-то искать по цене/названию…
Это не трейдмарк, это диагноз. Того же авторства был сайт медиамаркта, где тоже был дизайн во все поля, и при этом — в магазине, итить! — невозможно было что-то искать по цене/названию…
Недавно спорил с коллегами, что всем этим фоновидосикам и излишним анимациям(в этом правда сильно переборщили) не место на сайте банка. Почему-то мне не поверили. И неверующими были дизайнеры.
Это ад какой-то, скоро чтоб сайты посмотреть надо будет суперкомпьютер ставить. Это чудо подтормаживает на intel-2500K (4ГГц) в firefox и chrome.
Ужас.
Ужас.
Отправился ловить флюиды таланта на сайт. Раздел инвестиционные услуги, атас. Там шесть разделов и первый, четвертый, пятый раздел при нажатии обновляет заголовок сверху, а вот остальные нет. Можно переключаться между вторым, третьем, шестым ничего сверху не происходит, стоит тронуть активные, заголовки меняются. Ниже тоже класс: большой белый блок разрывающий пространство. Протянул мышкой, там большими буквами заголовок написан белым по белому, хм. Сам сайт нормальный, но когда при переходе от раздела к разделу меняется цвет фона на 32'' есть чувство цветного сумасшествия и напряжения зрения от смены яркости.
С сайта альфы:
Да! Мы действительно изменили сайт. Постарались сделать так, чтобы вы могли легко найти подходящее для себя решение, сравнить предложения между собой на одной странице, не расшифровывая банковские термины. Как и для чего мы это сделали — мы рассказываем в видеоролике https://www.youtube.com/user/alfabankru?x=fQuImk7VvMg
Дизайн жесть… видимо не доплатили
Да! Мы действительно изменили сайт. Постарались сделать так, чтобы вы могли легко найти подходящее для себя решение, сравнить предложения между собой на одной странице, не расшифровывая банковские термины. Как и для чего мы это сделали — мы рассказываем в видеоролике https://www.youtube.com/user/alfabankru?x=fQuImk7VvMg
Дизайн жесть… видимо не доплатили
На планшета альфабанк просто завис на семь секунд. После пары тапов «в пустоту» перекинуто на страницу с каким-то предложением. Шедеврально.
Порадовало название «скрелка» ) По поводу её наличия/отсутствия у меня сложилось несколько иное мнение, нежели мнение автора. В некоторых ситуациях разумным видится наличие такой «скрелки» по той простой причине, чтобы показать пользователю более зомбирующую целостную и привлекательную картинку. Ведь если пользователь крутит колёсико, то он вполне может себе остановить прокрутку так, чтобы в верхней части экрана был один логический блок, а внизу другой и тогда чудеса внушения эстетический эффект не будет воздействовать на пользователя по максимуму. Проблема в том, что руководствуясь стадным инстинктом модой, эту кнопку-«скрелку» пытаются поместить туда, где она не уместна.
В win pnone отлично реализовано через показ следующей части контента. А вот всякая анимация как в статье — только раздражает.
Терпеть не могу сайты в таком виде. Они же не удобны! Они тяжеловесны. Единственный их плюс — это просмотр на планшете, когда хочется просто полистать картинки не вникая в суть (и не делясь этим с кем-либо, ибо дать ссылку на конкретный элемент данной страницы (подстраницу страницы?) обычно довольно сложно).
Да десктопе же они не удобны в принципе.
Да десктопе же они не удобны в принципе.
Оставлю гневный коммент.
Вот не пойму, неужели нельзя сделать лёгкий, но аккуратный сайт на чистом HTML?
Если вам (или вашему заказчику) так не нравится дизайн в стиле web 1.0, ну сделайте что-то посовременнее, но всё равно на чистом HTML. Чтобы страница весила килобайты без картинок и сотни килобайт с картинками (а не мегабайты) и не отжирала оперативку и процессор.
Не надо тотально использовать тяжёлые элементы интерфейса и всякие flash и прочую фигню!
Вот пример. У меня есть нетбук Asus EeePC 701 2g surf, там стоит процессор Intel Celeron M 800, заниженный по частоте до 500 МГц. По сути это урезанный третий пенёк. Не надо говорить, что это мало: это не 80286, на третьем пне люди играли в кучу 3D игр. :) Так вот. На этом нетбуке многие современные сайты скроллятся с фризами и задержками по 10-15 секунд! И 512 Мб оперативки не хватает, от нескольких открытых вкладок браузер вылетает.
Уважаемые разработчики сайтов, можете купить за пару тысяч такой же нетбук (именно такой же, не на атоме. Или просто третий пень) на барахолке и разрабатывать сайты так, чтобы они нормально работали на нём? Потому что то, что делается сейчас — неюзабельно и заметно тормозит даже на современных многоядерных компах… Из-за таких чудо-сайтов смартфоны тоже быстрее сажают аккумулятор и греются. Плюс вся эта красота может не работать как надо, если открыть её в немного устаревшем браузере.
Вот не пойму, неужели нельзя сделать лёгкий, но аккуратный сайт на чистом HTML?
Если вам (или вашему заказчику) так не нравится дизайн в стиле web 1.0, ну сделайте что-то посовременнее, но всё равно на чистом HTML. Чтобы страница весила килобайты без картинок и сотни килобайт с картинками (а не мегабайты) и не отжирала оперативку и процессор.
Не надо тотально использовать тяжёлые элементы интерфейса и всякие flash и прочую фигню!
Вот пример. У меня есть нетбук Asus EeePC 701 2g surf, там стоит процессор Intel Celeron M 800, заниженный по частоте до 500 МГц. По сути это урезанный третий пенёк. Не надо говорить, что это мало: это не 80286, на третьем пне люди играли в кучу 3D игр. :) Так вот. На этом нетбуке многие современные сайты скроллятся с фризами и задержками по 10-15 секунд! И 512 Мб оперативки не хватает, от нескольких открытых вкладок браузер вылетает.
Уважаемые разработчики сайтов, можете купить за пару тысяч такой же нетбук (именно такой же, не на атоме. Или просто третий пень) на барахолке и разрабатывать сайты так, чтобы они нормально работали на нём? Потому что то, что делается сейчас — неюзабельно и заметно тормозит даже на современных многоядерных компах… Из-за таких чудо-сайтов смартфоны тоже быстрее сажают аккумулятор и греются. Плюс вся эта красота может не работать как надо, если открыть её в немного устаревшем браузере.
Ребята. это нужно перетерпеть. Держимся, не срываемся. Работаем аккуратно, пробуем ковырять объяснения в сторону модного сейчас карго культа. Я убежден, что скорость работы сайта очень хороший показатель. Я оплатил kroogi.com на год подписку в ложу, которой не могу пользоваться. Я просто забил! Потому что сайт при такой скорости не рабочий вообще! Его невозможно серфить больше 5 минут.
Мне почему то кажется что из этих 512 минимум 200-300 жрется осью, если это ХР, еще больше если это 7 и выше.
XP без HDA звука влезает в 60-70мб, с ним — 100-120.
200-300 это как раз оттюненая по самое небалуйся 7ка будет. ну, может 400. а браузеры нынче и правда жрут так, что на их фоне любая ОС — шедевр аскетизма. FF 32bit с парой десятков вкладок после старта 600мб, через сутки 1200.
Waterfox (FF 64bit/win) — после полной прогрузки около полусотни вкладок жрет гига 2, через несколько дней — ну, 8 гигов укушаных я там точно видел.
200-300 это как раз оттюненая по самое небалуйся 7ка будет. ну, может 400. а браузеры нынче и правда жрут так, что на их фоне любая ОС — шедевр аскетизма. FF 32bit с парой десятков вкладок после старта 600мб, через сутки 1200.
Waterfox (FF 64bit/win) — после полной прогрузки около полусотни вкладок жрет гига 2, через несколько дней — ну, 8 гигов укушаных я там точно видел.
У вас утечка памяти в каком-то дополнении (или сайте). У меня 64-bit Nightly неделями не вылезает дальше 1-1.5 ГБ при сотнях тяжелых открытых вкладок.
а что из дополнений при этом стоит?
habrastorage.org/files/b08/c32/ffe/b08c32ffe0bc4691bb37bf591980d6a9.png
Простите что картинкой.
Простите что картинкой.
Ох зря, зря! Сейчас подтянутся тру-программисты с одной из веток гиктаймса и расскажут, что Вы ничего не смыслите в профессиональном программировании с фремйворками и поэтессами :)
Есть некоторая логика почему сайты для таких устройств никто не оптимизирует. На нем разрешение экрана 800х480, на моем дешевом смартфоне lenovo разрешение выше, не говоря про нормальные fullhd экраны и уж совсем умалчивая про retina. И если выбирать с оптимизацией под retina экран и под старый нетбук, все-таки в большинстве логичнее оптимизировать под retina, если отталкиваться от платежеспособного спроса. Кому надо, тот делает отдельные версии картинок и прочего под низкие разрешения, но надо это не всем.
К сожалению в большинстве случаев сайты делаются не с требованием быть удобными для клиентов, а с требованием впечатлить заказчика. Заказчику же обычно надо визуальные рюшечки, т.к пользоваться сайтом он не собирается, а просто смотрит на него. Отсюда имеем расхождение реальной цели и мнимой.
Я скажу больше, у меня макбук про, с i5, так вот в нем вышеуказанный сайт альфабанка тоже знатно подтормаживает :)
Утечка памяти — это наверняка не проблема ни html, ни css, ни изображений и наверняка javascript тоже не виноват. Это проблема движка браузеров. У меня есть подозрение, что движок браузера при скролле копит в памяти полноразмерные изображения рассчитанных наложений прозрачных элементов. Если положение фона или эта скролл-стрелка закреплены, то память пожирается вмиг.
Главная проблема – это параллакс, который заставляет тормозить сайт на 99% компьютеров. Я еще не видел ни одного грамотного параллакса, который бы тянула моя Retina 15" late 2013.
Повсеместно распространяется зараза с живым фоном: пейпэл, уже упомянутый альфабанк и остальные.
И ведь не окажешься от них ежесекундно — альтернативы нет (хотя, от с банка думаю соскочить из-за кривого телебанка и жёстких тарифов за каждый пук).
И ведь не окажешься от них ежесекундно — альтернативы нет (хотя, от с банка думаю соскочить из-за кривого телебанка и жёстких тарифов за каждый пук).
Заставлять пользователя непременно скролить страницу – это не всегда является задачей страницы. Если начало скроллинга страницы начинается перманентно после загрузки страницы – это может говорить о том, что верхняя часть страницы не состоятельна. если она создана только для того, чтобы начать скроллинг, может быть, все эти красивости не так уж и нужны?
Сколько пользователей оставили свой емайл или перешли по ссылке (совершили запрограммированное действие) с первого экрана – тоже не понятно. Кто доскролил до конца нашел ли ответ на свой вопрос, который стал причиной его посещения этой страницы? Если это лонгрид с увлекательной историей и пользователь читал ее 15 минут – это успех, а если это инфопродукт и просмотр километра html-а за 10 секунд?
Если пользователь не нашел информацию на первом экране, которую он ожидал увидеть, скролл – это следующее, что он сделает. И печаль, если он ниже не найдет ее.
Делайте страницы не для красивости, а для пользы, продумайте каждое свое движение в организации страницы не с точки зрения актуальности трендов, а с точки зрения решения конкретных задач сайта (приложения) и непосредственно каждой его страницы. Кто-то сделал эффектную страницу с параллаксом и длинным скроллом, решая свою задачу – ему респект, а тысячи дизайнеров, увидевших за этим «фишку» – ринулись пихать этот «тренд» куда попало.
Господа, включайте мозг по любому поводу, и будет всем в этом мире счастье!
Сколько пользователей оставили свой емайл или перешли по ссылке (совершили запрограммированное действие) с первого экрана – тоже не понятно. Кто доскролил до конца нашел ли ответ на свой вопрос, который стал причиной его посещения этой страницы? Если это лонгрид с увлекательной историей и пользователь читал ее 15 минут – это успех, а если это инфопродукт и просмотр километра html-а за 10 секунд?
Если пользователь не нашел информацию на первом экране, которую он ожидал увидеть, скролл – это следующее, что он сделает. И печаль, если он ниже не найдет ее.
Делайте страницы не для красивости, а для пользы, продумайте каждое свое движение в организации страницы не с точки зрения актуальности трендов, а с точки зрения решения конкретных задач сайта (приложения) и непосредственно каждой его страницы. Кто-то сделал эффектную страницу с параллаксом и длинным скроллом, решая свою задачу – ему респект, а тысячи дизайнеров, увидевших за этим «фишку» – ринулись пихать этот «тренд» куда попало.
Господа, включайте мозг по любому поводу, и будет всем в этом мире счастье!
Зашёл сюда, чтобы прочитать этот комментарий! Действительно, не стоит забывать о том, что цель 99% сайтов предоставление информации о продукте или услуге — интересующую информацию или прямую ссылку на неё, пользователь должен получать с первого экрана.
Да, дизайнеры сами виноваты, что делают страницу, которая выглядит законченной на экране: целостное, подогнанное по высоте изображение, текст ссылок/меню на экране снизу… Достаточно просто сделать пустые поля слева и справа, чтобы было понятно, что это вертикальный сайт с обычным подвалом в конце.
Помню при написании всевозможных дипломов нам рекомендовали не увлекаться анимацией. Сайт в примерах статьи перегибает именно эту палку. Наткнувшись на такое изобилие прыгающе\морагюще привлекающих\отвлекающих внимание вещей, я поспешу закрыть эту вкладку и постораюсь больше никогда на неё не заходить
Имхо, автор испытывает сильные эмоции не по поводу. Или точнее, совсем не прав.
Стрелка — указатель направления. Это такой же валидный инструмент UX, как и, скажем, прописанный у картинок alt. Они однозначно (т.е. понятно и ребенку, и пенсионеру, а не только 25-летнему it-шнику) говорят, что надо делать.
И если это конкретное UX решение (паралакс вертикальный или горизонтальный, or whatever) решает поставленную задачу, то стрелка указывающая вниз, имеет право на существование, так же, как и стрелки впрво/влево у slide-show, pagination etc.
PS очень жаль, что эта статья (оригинал) стала такой популярной. это значит, что ад с анимацией начнет распространятся еще быстрее.
Стрелка — указатель направления. Это такой же валидный инструмент UX, как и, скажем, прописанный у картинок alt. Они однозначно (т.е. понятно и ребенку, и пенсионеру, а не только 25-летнему it-шнику) говорят, что надо делать.
И если это конкретное UX решение (паралакс вертикальный или горизонтальный, or whatever) решает поставленную задачу, то стрелка указывающая вниз, имеет право на существование, так же, как и стрелки впрво/влево у slide-show, pagination etc.
PS очень жаль, что эта статья (оригинал) стала такой популярной. это значит, что ад с анимацией начнет распространятся еще быстрее.
Некоторые дизайнеры гугла с Вами согласны, как впрочем и я — вот сайт с применением стрелочки www.googlesciencefair.com/ru/. Причём скрол на мышке, у людей частенько глючит и просто бесит постоянно попадать мышкой на таск бар и перематывать страничку. А вот попасть на кнопочку, без проблем и страица сама перелистнётся — считаю удачным решением.
Абсолютно согласен. В данных примерах нет ничего плохого в стрелке. Гораздо хуже то что предлагает автор статьи, типа добавить анимацию, вот как раз это жесть.
Пользуюсь Stylebot — помогает развидеть ненавистный дизайн.
Интересна была бы статистика, какой процент посетителей сайта воспользовался этой кнопкой.
P.S. А новый сайт альфабанка ужасен просто. Хорошо, что не успели добраться до click.alfabank.ru.
P.S. А новый сайт альфабанка ужасен просто. Хорошо, что не успели добраться до click.alfabank.ru.
Раньше пользователь знал про кнопку Home, а теперь в социальных сетях (да и много где ещё) сделали постоянно болтающуюся на экране кнопку «Наверх». Скоро и скроллить разучится, только пальцем тыкать будет.
Ещё раздражает вот эта кнопка «наверх». Даже не кнопка, а невидимое поле слева, нажав на которое, попадаешь на верх страницы.
Порой бывает — читаешь сайт и нажал случайно правую кнопку мыши (ну вот рука на ней лежала и палец случайно кликнул). Естественно, тут же кликаешь по пустому месту левой кнопкой мыши, чтобы убрать вылезшее контекстное меню. И сцуко кликал по вроде бы пустому месту, а попадаешь на это невидимое поле, которое уносит тебя в верх страницы! На сайте должны быть действительно пустые поля, по которым можно кликать вхолостую. А сейчас на некоторых сайтах куда ни кликни — или унесёт в начало страницы, или перейдёт по ссылке, спрятанной в каком-то кликабельном элементе, или случайно поставишь кому-то лайк. Потому что эти элементы становятся видимыми только при наведении курсора.
Порой бывает — читаешь сайт и нажал случайно правую кнопку мыши (ну вот рука на ней лежала и палец случайно кликнул). Естественно, тут же кликаешь по пустому месту левой кнопкой мыши, чтобы убрать вылезшее контекстное меню. И сцуко кликал по вроде бы пустому месту, а попадаешь на это невидимое поле, которое уносит тебя в верх страницы! На сайте должны быть действительно пустые поля, по которым можно кликать вхолостую. А сейчас на некоторых сайтах куда ни кликни — или унесёт в начало страницы, или перейдёт по ссылке, спрятанной в каком-то кликабельном элементе, или случайно поставишь кому-то лайк. Потому что эти элементы становятся видимыми только при наведении курсора.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Дорогой веб-дизайнер, давай перестанем нарушать возможность скроллить