Комментарии 32
Все, у кого подрывает с анимации в интерфейсах — делитесь конкретными случаями, ресурсами использования/взаимодействия с интерфейсом. БУдем разбирать негативный опыт.
Судя по комментариям ко всем статьям на Habr про анимацию, видно, что большинство пользователей выражают вкусовщину, не вникая в суть. Таким образом выяснилось что использование сервисов с плохим UX/UI в котором бездумно напихана анимация, зачастую от фронтов — вызывает отвращение к слову анимация.
Не нужно рассказывать о том что я отключаю всю анимацию всегда, не добавляя что у тебя например слабый ПК, или у тебя мегалофобия. Пользователи разные.
Любое движение в визуале триггерит пользователей лучше. По данным, Engagement Rate у видео и анимаций в 2 раза выше, в сравнении со статикой.
Пожалуйста выкиньте всю эту анимацию с ваших веб сайтов. Все это отвратительно. п 6 самый трешевый
Почему п6 самый трешовый по вашему мнению? Презентацию продукции лучше в pdf смотреть по вашему?)
Я ведь привел пример использования такой презентации например компанией Apple. Выглядит достойно.
Выглядит ужасно. Низкая информационная насыщенность страницы побуждает быстрее скроллить, хочется скорее пропустить эту картинку и увидеть, наконец, контент. Что, эта картинка и есть контент?! Нет уж, я нафиг с такого сайта!
А не затруднит ли вас дать ссылку на сайт Apple - где именно используется такой ужас? Я заглянул туда, но не увидел этих безумных анимаций, все довольно чистенько. То же самое по остальным сайтам из ваших примеров - анимация везде минимальная и почти незаметная.
Зато я мог бы привести множество примеров сайтов, где анимация сделана совершенно бездумно и очень мешает. Например, на сайте одного крупного банка:
Захожу, тычу в один из нескольких счетов, чтобы посмотреть транзакции. Справа неторопливо выезжает панелька и разворачивается вниз.
Тычу "скачать транзакции". Поверх первой неторопливо выезжает вторая панелька для выбора дат и формата.
Скачиваю, тычу "закрыть" панель скачивания. Панель уезжает в сторону. Предыдущая панель с транзакциями снова плавно выезжает справа и разворачивается вниз, как в первый раз.
Тычу "закрыть" транзакции. Панель неторопливо уезжает в сторону.
Повторяю все то же самое с другим счетом, потом с третьим, тихо матеря любителей неуместной анимации.
А можно поделиться ссылкой на банк?)
chase.com, но увидеть всю эту красоту можно только залогинившись.
Хотя, впрочем, вот на этой странице прокрутка между ссылками в шапке работает примерно с такой же скоростью.
Да, согласен. На данном сайте используется бездумная анимация.
Действительно подтормазживает топлайн, навигация сильно тормозит при клике на меню и при этом не имеет анимации взаимодействия даже такой как hover эффекты.
Из увиденного могу отметить что не продуман UX и бездумно накидана анимацию везде, где она не нужна. Это хороший пример - плохого примера как для опыта пользователя, так и для использования анимации в целом. Так делать не нужно))
Если про ссылку на Apple было адресовано мне - в примере статьи есть. Да в принципе кейсы презентации продукции у Apple выглядят круто. А для тех кто например знаком - всегда есть возможность пропустить анимированную презентацию и перейти к чекауту.
Это было адресовано вам. Как раз потому, что я не нашел по вашей ссылке из статьи ничего похожего на пункт 6. Хотелось бы более прямую ссылку на пример подобного у эппла.
Пожалуйста:
https://www.apple.com/iphone/
https://www.apple.com/ipad-pro/
Посмотрев - поделитесь какая из анимации по вашему мнению ухудшила ваш опыт на этой странице или отвлекла например.
Спасибо.
На первой странице из анимации я увидел только небольшое увеличение размеров плашек при наведении мыши и плавное появление панелей при нажатии на плашку. Обе анимации очень умеренные, но даже без таких я бы предпочел обойтись. Да, есть еще очень тормозная горизонтальная прокрутка этих самых плашек, за которую надо убивать.
На второй странице не нашел никакой анимации кроме изменения цвета меню при прокрутке с темной на светлую часть страницы.
Я вас просил привести пример взрыва мозга из пункта 6:
Почему п6 самый трешовый по вашему мнению? ...
Я ведь привел пример использования такой презентации например компанией Apple.
Хотя, возможно, для разных стран сайты разные. Тогда я рад, что мне показывают статичный вариант.
Ни на одной из этих страниц я не смог находиться. ТАКОЕ анимацией уже не ухудшить. Некуда. Впечатление, будто дизайн сделан для телефона, а для ПК он просто растягивается под ширину вьюпорта.
Всё ОГРОМНОЕ и в основном ненужное.
Если я иду на сайт бургерной, мне нужно посмотреть меню, или карту с бургерными, или скачать приложение или что-то такое. Вместо это по экрану начинают летать телефоны и взрываться бургеры, я должен ждать пока это закончится. Из чего состоит бургер я и так знаю, и все знают.
А есть примеры анимации которые отнимают время?
Пожалуйста. В самих бургерных висит штук пять + экранов, которые показывают какую то бессмысленную анимацию и фрагменты меню с ценами, эта информация продублирована на нескольких экранах. Чтобы посмотреть все меню мне нужно просмотреть весь цикл с меню, а чтобы выбрать обед нужно пройти несколько циклов, это несколько минут. Плюс запомнить все что предлагается, чтобы сравнивать. Плюч запомнить названия чтобы заказать - ведь они сейчас исчезнут. Другого меню нет. Хотя площади экранов достаточно, чтобы показать все меню статически с картинками и описанием.
Если я иду на сайт бургерной, мне нужно посмотреть меню, или карту с бургерными, или скачать приложение или что-то такое. Вместо это по экрану начинают летать телефоны и взрываться бургеры, я должен ждать пока это закончится.
Если попадаете на промо страницу — то естественно. Но для чего вам промо страница с рекламой, если вы пользователь?
Есть четкое разделение между маркетингом и функционалом. То что вы обсуждаете сейчас - это больше относится к маркетингу. Естественно, такая анимация не допустима на целевых страницах)
Главное помните, что простота использования может быть незаметной, но ее отсутствие - нет.
Всегда выключаю анимацию везде, где возможно. Но скорее всего я не репрезентативен.
Всему своя мера. Но полностью исключать тоже не стоит. Да, минимально можно оставить
Привет. Пост немного не об этом. Смею полагать что скорее всего реч о java на сайте) Навязчивая реклама и тд.
Вообще я не против анимации. Бывает что свистелки-перделки хорошо оживляют, украшают, разнообразят и развлекают, но всегда должна быть возможность их сразу отключить
При малейшей возможной альтернативе, закрываю сайты с анимацией сразу же (исключение могу сделать для изредка меняющихся рекламных баннеров, из уважения к сайту). Пункт 6 просто ужас летящий на крыльях ночи, пункт 4 звучит как форменное издевательство.
(выдохнув) А теперь постараюсь без эмоций.
Анимация ухудшает UX — делает его более запутанным и, как заметили выше, может воровать время пользователя (пока не досмотришь мультик не очевидно что же делать).
Анимация ворует ресурсы моего компьютера, и не надо ссылок на чрезмерную мощь современных процессоров.
Анимация ворует моё внимание, и это самый страшный грех. Со времён HTML тэга marquee и кучи анимированных GIF-ов избегал, избегаю и буду избегать.
Я лишь рассмотрел примеры анимации которую используют в интерфейсе и подытожил. Да, действительно плохо продуманная анимация не только отвлекает, но и ухудшает пользовательский опыт.
А вот то — что анимация ухудшает UX, не согласен (если только анимация наляпата бездумно). Плохая анимация или неуместная - ухудшает.
А когда показываешь пользователю взаимодействие с интерфейсом - это уже другая анимация, в пример приведу например uploader. Если бы он не имел анимации - было бы в моменте понятно что происходит на странице? Нет! Это и есть пример уместной/полезной анимации в интерфейсе.
А что касается анимации GIF на постоянной основе — это 98 год примерно. Выглядит не только стремно, но и максимально дешево и бесполезно на сайте в целом.
Вывод: используйте анимацию правильно — "Правильно примененная анимация может сделать сайт или приложение более привлекательным, информативным…"
Плохая анимация или неуместная - ухудшает.
Все примеры из вашей статьи попадают под этот пункт.
А когда показываешь пользователю взаимодействие с интерфейсом - это уже другая анимация
Я не вижу среди ваших примеров ничего подобного. Можно было бы попытаться натянуть сову на глобус в примере с размером иконки (робот), но и тут засада - проще было бы не заставлять пользователя елозить мышью по экрану, пытаясь найти подходящий размер, а показать сразу все размеры, чтобы ткнуть сразу в нужный.
Давайте я ещё кину камень в огород и попытаюсь объяснить, в чём проблема с примерами 4 и 6.
Вообще я по возможности отключаю анимации. Например, как только получаю в руки новый смартфон, сразу вырубаю все красивые переходы окошек. Потому что если я хочу посмотреть мультики, я могу открыть мультики, а я хочу получить информацию.
В примере 4 я ожидаю следующее взаимодействие: увидел интересную информацию - нажал - сразу прочитал всё необходимое. Вместо этого я жду, пока мне закончат показывать анимацию с тем, что я уже видел, и покажут что-то новое. Анимация длится 10 секунд, но только на протяжении 4 секунд идут действительно полезные вещи.
Пример 6 хорошо бы смотрелся на электронном рекламном щите. Он был бы яркий, заметный и привлекал внимание. Но если я зашёл на сайт tastyburger, то я, вероятно, хочу найти их адреса, время работы, меню и цены. Я 7 секунд листаю и ожидаю, пока мне покажут анимации, после чего узнаю, что мне за это время только показали, что в бургерах есть помидоры и я могу сделать свой бургер. Теперь я начинаю листать туда и сюда, выискивая какие-нибудь кнопки, которые позволили бы мне перейти на нормальный режим, где я бы прочитал нормальную информацию.
В примере 3 звонок звонит 3 секунды. Это не так страшно, потому что я получил отклик и могу идти дальше, но меня всё равно раздражает, что кто-то тратит моё время впустую. Это не вовлечённость. Это тупое ожидание. Может, кому-то это и нравится, но если я пришёл смотреть видео, то я хочу смотреть видео, а не анимации лайков. Я хочу быстро поставить его и продолжить потреблять контент. Для меня такие вещи равносильны окошку во весь экран "А теперь подождите 3 секунды, прежде чем продолжить просмотр".
Я люблю отклик, но я люблю высокую информативность на единицу времени. Время, проведённое мною на сайте, не должно быть метрикой. Я должен с сайта что-то вынести. Честно, я хочу так: чтобы я без особых временных затрат мог залогиниться и осуществить необходимые операции (например, в разговоре хочу быстро показать что-то собеседнику, не ставя диалог на паузу). Чтобы я мог глянуть маршрут до вашей бургерной, не останавливаясь на ближайшие пять минут, а прямо на ходу. Если я у вас на сайте - я у вас неслучайно. Дайте мне то, чего я хочу.
P.S. Прошу прощения за простыню, но это наболевшая тема, особенно когда под десктоп/мобильные устройства пишется одно и то же и не проверяется на другом типе устройств, так что всё вдобавок ломается.
Вот, не буду голословен. Только сегодня искал GLIMPS project. Зашёл на этот сайт и почти минуту, сбитый с толку анимациями, не мог понять, куда я попал и где сканы головного мозга. Делу не помогало и то, что некоторые организации с базами данных тоже делают яркие сайты.
Вы из тех, кто углы тропинок срезают и vimом пользуются? То есть, тех, кто отрицает вкус и эстетику ради ускорения процесса на 0.1%?
Все, у кого подрывает с анимации в интерфейсах — делитесь конкретными случаями, ресурсами использования/взаимодействия с интерфейсом. БУдем разбирать негативный опыт.
Судя по комментариям ко всем статьям на Habr про анимацию, видно, что большинство пользователей выражают вкусовщину, не вникая в суть. Таким образом выяснилось что использование сервисов с плохим UX/UI в котором бездумно напихана анимация, зачастую от фронтов — вызывает отвращение к слову анимация.
Не нужно рассказывать о том что я отключаю всю анимацию всегда, не добавляя что у тебя например слабый ПК, или у тебя мегалофобия. Пользователи разные.
Любое движение в визуале триггерит пользователей лучше. По данным, Engagement Rate у видео и анимаций в 2 раза выше, в сравнении со статикой.
Анимация в веб-интерфейсе