Анимация часто раздражает, и комментарии под моей последней статьей только подтверждают это. Рассказываю как делать анимации так, чтобы пользователи не страдали, а получали удовольствие от обратной связи.
1. Анимация там, где она не нужна
Попробуйте найти анимацию на картинке выше. Правильно — ее там нет, потому что отклик в 200-500ms может стоить вам жизни.
Пример попроще: всякие-разные терминалы, новые банкоматы, которые, порой просто извращаются в попытках анимировать интерфейс на железках уровня 2015 года. Если тебе по нужде приходится использовать сию дьявольскую машину, чтобы получить кровно заработанные, user experience раздражает 🏏
Причин две: первая — картинка на экране двигается слишком медленно, вторая — да вообще зачем она там нужна?
Ну и еще проще: всякие интернет-магазины сантехники, сервисы заказа мастеров и прочие подобные сайты. Анимация того, как мой заказ улетает в списки задач не сильно нужна, когда у тебя кнопок в шапке всего три и у списка задач подписано «Тут, дорогой, находятся твои задачи» ну или что-то покороче.
2. Слишком медленная анимация
Попробуйте сделать анимацию ползунка не 100-200ms, а 500 — и пациент (тьфу, пользователь) сбежит. Любая анимация должна укладываться в 100-250ms, быстрее — не заметят. Все что делается сверх 250ms — должно быть тщательно обдумано, исходя из 4 принципов:
- Какое вознаграждение, удовольствие, понимание приносит пользователю эта анимация?
- Как часто ее будут видеть пользователи за 1 сеанс?
- Точно ли ее нельзя сделать быстрее?
- Можно ли сделать иначе?
Если вы все же хотите оставить анимацию >250ms, обязательно тестируйте её. Да, тот самый A/B тест, который, скорее всего, покажет что ей тут не место.
3. Часто повторяющаяся анимация
Представим себе гипермаркет, в котором среднее количество покупок составляет >3. А теперь представим, что каждый раз (!) при добавлении товара пользователь видит 2-3 секундную анимацию того, как товар летит в корзину через весь экран. Естественно, это вызывает бурный поток не самых положительных эмоций.
Или другой кейс. Пользователь только вышел из приложения, заходит снова и опять смотрит мультфильм про старт приложения (которого можно избежать, ведь приложение грузится 200ms вместо 500).
Или третий. При переходе между страницами услуг сайта — на каждой отображается множество различных анимаций. Первый раз ты, возможно, будешь заинтересован, второй — раздосадован, на третий — уйдешь.
4. Пытаться улучшить проблемный UI за счет анимации
Самый простой пример — всякие «обратные звонки» и прочие уведомления, которые появляются, порой, на старых и неудобных сайтах. Эти уведомления часто выделяются ярким цветом, мерцают и настойчиво привлекают к себе внимание.
Но — это не работает, когда пользователь не может найти информацию о самой услуге или подробности ее оказания, которые ему нужны. Поэтому, лучше продумать UX (юзабилити), нарисовать лаконичный дизайн, маркировать CTA кнопки отдельным цветом, который будет выделяться, но не раздражать.
5. Делать из приложения, сайта мультик
Думаю, тут все понятно из названия. Анимации везде — не нужны никому и никогда, только если вы не представляете очередного конкурента Pixar. Анимацией можно представить новый продукт, как делает Apple на своем сайте, и у каждой анимации должна быть своя целевая аудитория.
Например: имеем 2 крана. Да-да, речь об обычных кранах, которые стоят у каждого на кухне. Кран за 3000 рублей не нуждается в анимации, ибо представляет собой девайс, который выбирают, в первую очередь, по цене (лишь бы что-то было) и размеру.
Дизайнерскому крану за 50000 рублей анимация на сайте производителя будет более уместна, поскольку наглядно показывает его размер (часто — нестандартный), пример места применения (часто — слишком большой или слишком маленький), примеры уместной цветовой гаммы окружающей кран среды (да, возведем кран в культ), и в остальном объясняет графически идею «За что платить».
6. Делать бесконечную анимацию загрузки
Крутящийся кружочек для тех задач, когда срок выполнения функции понятен — не лучшее решение, потому что пользователь не знает, когда оно, наконец, докрутится. Это выводит из состояния комфорта, потому что ждать — раздражает и ситуация не находится под контролем пользователя.
Отсюда, если есть возможность (да даже если и нет) лучше использовать процентный или иной способ анимации загрузки. Главное, чтобы этот способ был понятен пользователю, например, заполнение картинки.
7. Не делать анимацию вовсе
Игнорировать анимацию — тоже серьезная ошибка. Анимация окружает нас — в каждом устройстве, которым мы пользуемся, практически в каждом приложении и на каждом сайте. Анимация приносит нам удовлетворение, поскольку подкрепляет положительный эффект от наших действий.
Нажали на ползунок -> он переместился с той скоростью, с которой мы успели это заметить -> да, мы сделали то что надо и убедились что нажали именно туда.
На мобильных интерфейсах, где даже нося лопату в кармане — все равно порой сложно разглядеть экраны настроек — это особенно важно. Анимации использует Google, как и практически все ведущие IT компании.
Не игнорируйте анимации в своем сайте, приложении, помните о том, что анимация должна нести положительный эффект, обратную связь или впечатления, тестируйте свои идеи и хороших вам выходных!
Ваш UX/UI/Motion дизайнер и критик интерфейсов, Лена.
Недавно я создала сообщество «Юзабилити» и эта статья также появится в нем, поскольку анимации однозначно способствуют повышению удобства навигации и удовлетворенности пользователей.
- Подписывайтесь, вступайте в сообщество, в планах — много интересных материалов.
- Присоединяйтесь к авторам сообщества. За хорошие статьи по теме Юзабилити я предлагаю 4000-10000 рублей за материал. Свяжитесь со мной, предложите темы, чтобы начать зарабатывать.
- Всегда рада нетворкингу с UI/Motion-дизайнерами и Frond-end — вы знаете где меня найти.
Жду ваших вопросов по анимациям — в комментариях.
Анимация часто раздражает, и комментарии под моей последней статьей только подтверждают это. Рассказываю как делать анимации так, чтобы пользователи не страдали, а получали удовольствие от обратной связи.
1. Анимация там, где она не нужна
Попробуйте найти анимацию на картинке выше. Правильно — ее там нет, потому что отклик в 200-500ms может стоить вам жизни.
Пример попроще: всякие-разные терминалы, новые банкоматы, которые, порой просто извращаются в попытках анимировать интерфейс на железках уровня 2015 года. Если тебе по нужде приходится использовать сию дьявольскую машину, чтобы получить кровно заработанные, user experience раздражает 🏏
Причин две: первая — картинка на экране двигается слишком медленно, вторая — да вообще зачем она там нужна?
Ну и еще проще: всякие интернет-магазины сантехники, сервисы заказа мастеров и прочие подобные сайты. Анимация того, как мой заказ улетает в списки задач не сильно нужна, когда у тебя кнопок в шапке всего три и у списка задач подписано «Тут, дорогой, находятся твои задачи» ну или что-то покороче.
2. Слишком медленная анимация
Попробуйте сделать анимацию ползунка не 100-200ms, а 500 — и пациент (тьфу, пользователь) сбежит. Любая анимация должна укладываться в 100-250ms, быстрее — не заметят. Все что делается сверх 250ms — должно быть тщательно обдумано, исходя из 4 принципов:
- Какое вознаграждение, удовольствие, понимание приносит пользователю эта анимация?
- Как часто ее будут видеть пользователи за 1 сеанс?
- Точно ли ее нельзя сделать быстрее?
- Можно ли сделать иначе?
Если вы все же хотите оставить анимацию >250ms, обязательно тестируйте её. Да, тот самый A/B тест, который, скорее всего, покажет что ей тут не место.
3. Часто повторяющаяся анимация
Представим себе гипермаркет, в котором среднее количество покупок составляет >3. А теперь представим, что каждый раз (!) при добавлении товара пользователь видит 2-3 секундную анимацию того, как товар летит в корзину через весь экран. Естественно, это вызывает бурный поток не самых положительных эмоций.
Или другой кейс. Пользователь только вышел из приложения, заходит снова и опять смотрит мультфильм про старт приложения (которого можно избежать, ведь приложение грузится 200ms вместо 500).
Или третий. При переходе между страницами услуг сайта — на каждой отображается множество различных анимаций. Первый раз ты, возможно, будешь заинтересован, второй — раздосадован, на третий — уйдешь.
4. Пытаться улучшить проблемный UI за счет анимации
Самый простой пример — всякие «обратные звонки» и прочие уведомления, которые появляются, порой, на старых и неудобных сайтах. Эти уведомления часто выделяются ярким цветом, мерцают и настойчиво привлекают к себе внимание.
Но — это не работает, когда пользователь не может найти информацию о самой услуге или подробности ее оказания, которые ему нужны. Поэтому, лучше продумать UX (юзабилити), нарисовать лаконичный дизайн, маркировать CTA кнопки отдельным цветом, который будет выделяться, но не раздражать.
5. Делать из приложения, сайта мультик
Думаю, тут все понятно из названия. Анимации везде — не нужны никому и никогда, только если вы не представляете очередного конкурента Pixar. Анимацией можно представить новый продукт, как делает Apple на своем сайте, и у каждой анимации должна быть своя целевая аудитория.
Например: имеем 2 крана. Да-да, речь об обычных кранах, которые стоят у каждого на кухне. Кран за 3000 рублей не нуждается в анимации, ибо представляет собой девайс, который выбирают, в первую очередь, по цене (лишь бы что-то было) и размеру.
Дизайнерскому крану за 50000 рублей анимация на сайте производителя будет более уместна, поскольку наглядно показывает его размер (часто — нестандартный), пример места применения (часто — слишком большой или слишком маленький), примеры уместной цветовой гаммы окружающей кран среды (да, возведем кран в культ), и в остальном объясняет графически идею «За что платить».
6. Делать бесконечную анимацию загрузки
Крутящийся кружочек для тех задач, когда срок выполнения функции понятен — не лучшее решение, потому что пользователь не знает, когда оно, наконец, докрутится. Это выводит из состояния комфорта, потому что ждать — раздражает и ситуация не находится под контролем пользователя.
Отсюда, если есть возможность (да даже если и нет) лучше использовать процентный или иной способ анимации загрузки. Главное, чтобы этот способ был понятен пользователю, например, заполнение картинки.
7. Не делать анимацию вовсе
Игнорировать анимацию — тоже серьезная ошибка. Анимация окружает нас — в каждом устройстве, которым мы пользуемся, практически в каждом приложении и на каждом сайте. Анимация приносит нам удовлетворение, поскольку подкрепляет положительный эффект от наших действий.
Нажали на ползунок -> он переместился с той скоростью, с которой мы успели это заметить -> да, мы сделали то что надо и убедились что нажали именно туда.
На мобильных интерфейсах, где даже нося лопату в кармане — все равно порой сложно разглядеть экраны настроек — это особенно важно. Анимации использует Google, как и практически все ведущие IT компании.
Не игнорируйте анимации в своем сайте, приложении, помните о том, что анимация должна нести положительный эффект, обратную связь или впечатления, тестируйте свои идеи и хороших вам выходных!
Ваш UX/UI/Motion дизайнер и критик интерфейсов, Лена.
Недавно я создала сообщество «Юзабилити» и эта статья также появится в нем, поскольку анимации однозначно способствуют повышению удобства навигации и удовлетворенности пользователей.
- Подписывайтесь, вступайте в сообщество, в планах — много интересных материалов.
- Присоединяйтесь к авторам сообщества. За хорошие статьи по теме Юзабилити я предлагаю 4000-10000 рублей за материал. Свяжитесь со мной, предложите темы, чтобы начать зарабатывать.
- Всегда рада нетворкингу с UI/Motion-дизайнерами и Frond-end — вы знаете где меня найти.
Жду ваших вопросов по анимациям — в комментариях.
Каждую неделю мы стараемся рассказать о чем-то, что поможет вам улучшить навыки в анимации. Для достижения мастерства порой очень важно знать, что НЕ стоит делать. Проверьте себя — какие из этих ошибок вы допускаете сегодня?
Планирование, такое как эскизы (thumbnails) и раскадровка могут стать путеводителем к блестяще выполненной сцене. В отличие от неспланированной, которая будет переделана 20 раз прежде, чем достигнет хотя бы «среднего» уровня. Может показаться сначала, что это гораздо больше работы в начале, но на самом деле — это экономия времени в процессе работы. Причем большая экономия. Так что, если вы пропускаете этап раскадровки и сразу начинаете анимировать, вам стоит что-то переосмыслить.
Мы все хотим побыстрее добраться до «веселой» части в анимации. Блестящих эффектов или проникновенных сцен с персонажами. И с сегодняшними инструментами и возможностями можно действительно легко перескочить через то, что кажется ненужным. Это также один из самых быстрых способов научиться делать паршивую анимацию. Принципы и основы чрезвычайно важны, и хотя делать ещё один прыгающий мяч не так интересно, это база, которая поддержит вас, когда начнутся сложные сцены. Нужно сосредоточить внимание на основах и принципах, прежде чем делать ледяной замок из «Холодного сердца». (Ошибка номер один у начинающих аниматоров, которые затем бьются головой о стену через много лет).
Вы можете накрасить свинью, но она все-таки останется свиньей. В анимации если вы оставили рывки в движении или что-то, что уже на ранней стадии не смотрится хорошо, то никакое количество «косметики» не позволит сгладить эту ошибку. Вытащите её, разберитесь и исправьте, прежде чем работать дальше и наслаивать ещё что-то поверх.
В 3D-анимации мы можем попасть в неприятную ловушку, располагая и размещая камеру уже после создания анимации. На самом деле это должно быть первое, что следует утвердить, потому что изменения позы ваших персонажей основаны именно на расположении камеры. Вы не сможете сделать ничего «на камеру» или схитрить, потому что уловки КРАЙНЕ редко выглядят хорошо со всех ракурсов. Выставляйте камеру с самого начала!
В анимации нарушение правил и моделей – это часть процесса. Порой, необходимая, чтобы сделать что-то по-настоящему интересное. Однако 100%, что когда у вас нет ясного понимания правил, которые вы нарушаете, то вы не в состоянии будете сделать это корректно. Кроме того, если что-то пошло не так, то нет ни малейшего представления — в чем же ошибка. Поэтому, изучайте эти правила и основную часть времени играйте по ним! Потом, в один волшебный момент, когда нужно будет схитрить, вы поймете, почему и как именно это нужно сделать.
Небольшие детали такие, как субтильное тонкое движение или вторичное действие – это то, что делает анимацию великолепной. Однако очень легко уйти в эти тонкости раньше, чем будет закончена основная базовая часть анимации. Если основа движения в вашей анимации – плохая, то никакие изящные повороты кистей и рассыпающиеся каскадом кудри не сделают её лучше.
Снова и снова мы создаем потрясающие позы, а затем полностью забываем о правильных переходах от одной к другой. Ключевые позы играют огромную роль, но также важно обратить внимание на то, как именно происходит переход от позы к позе. Если все части тела двигаются одновременно, без разнесения во времени, то для зрителей это будет выглядеть топорно и безжизненно.
Старая пословица гласит: «Вы хороши настолько, насколько хорошая ваша последняя сцена». Также, предыдущая сцена сильно влияет на восприятие следующей. Если вы проведете три недели, вытачивая одну сцену, а сразу за ней поставите сделанную наспех и неаккуратную, то плохая сцена утянет вниз впечатление от хорошей, а не наоборот. Лучше вам уделить время и внимание на обе сцены, даже если это означает, что первый шот получится не таким хорошим, каким мог бы стать.
Как и в предупреждении №18, если вы создаете деморил и его основная часть потрясающая, но один маленький шот в конце – плох, то он один испортит все впечатление. Лучше убрать его совсем и пусть общая длительность рила будет меньше, чем погубить шансы на получение работы вашей мечты.
Допустим, вы спланировали вашу сцену вплоть до мельчайших деталей, и готовы начать анимацию. К сожалению, из — за того, что вы уже какое-то время работаете над сценой, очень просто позабыть, что эта ситуация должна быть в новинку для вашего персонажа! Не забывайте и даже напоминайте себе о том, почему ваш персонаж делает то или иное действие, которое вы задумали, иначе это будут пустые вычисления, вместо анимации полной жизни.
Когда мы двигаемся, даже если это всего лишь печать на клавиатуре, мыщцы и нервы продолжают работать по всему телу. Мы делаем очень небольшие, еле заметные изменения, смещая вес тела, и даже дыхание затрагивает область как минимум от плеч до ноздрей. Когда вы двигаете персонажу руку, то очень заманчиво переместить ТОЛЬКО руку, но лучше, чтобы небольшие движения коснулись разных частей. Тогда он не будет выглядеть статуей с одной подвижной конечностью.
Когда кончаются дедлайны и «горят» сроки остановиться просто невозможно! Однако исследования говорят о том, что самые обычные перерывы позволяют вашему мозгу (и телу, анимация – это тяжелые последствия для глаз и кистей :D), обновиться и работать более эффективно. Так что сделайте перерыв на некоторое время и только потом продолжайте работу!
Ваша работа, как аниматора заключается в том, чтобы донести мысль до аудитории настолько ясно и просто, насколько это вообще возможно, чтобы ничто не отвлекало от сути. Визуально может быть очень интересно сделать потрясающее движение камерой, пока ваш персонаж несется навстречу гибели, но если смысл сцены ускользнет от зрителя – это провал. Держитесь простоты и ясности. И это будет по-настоящему круто.
Это отличное чувство, когда вы сделали все хорошо. Когда вы отходите на шаг назад, чтобы полюбоваться сделанной анимацией и довольно улыбаетесь – это прекрасный день. Однако опасайтесь. Полоса успехов может также приподнять вашу гордость и прежде, чем вы поймете что произошло, начнете рассуждать так: «мне не нужно это знать» или «я уже знаю достаточно». Всегда продолжайте совершенствоваться и держаться осознания, сколько вы ещё НЕ знаете. Продолжайте развиваться и не смотрите ни на кого свысока.
Рука об руку с ошибкой №12 идет другая — мы нянчимся с нашими анимациями, как с детьми. Затем, когда кто-то высказывает конструктивную критику, мы сразу занимаем крайне оборонительные позиции и защищаем своих «детей» любой ценой. Но дело в том, что этот критик возможно прав. Мы могли пропустить какую-то проблему потому, что вложили очень много сил в работу. Поэтому сделайте глубокий вдох, оглянитесь и постарайтесь взглянуть на неё объективно. МОЖЕТ быть, действительно изменить угол камеры или да, ВОЗМОЖНО и впрямь мы использовали слишком много клише.
Если в вашей аудиодорожке есть определенный акцент (ударение на слово в диалоге или энергичный звуковой эффект) худшее, что вы можете сделать это «опоздать» с анимацией под него. Если вы умышленно собираетесь допустить ошибку, то лучше сделать это на кадр раньше, чем на кадр позже.
Подробнее вы можете узнать об этом в видео – «Звук в анимации»
Если эмоции персонажа сменяются, то этот отдельный момент хочется поставить на сцену и осветить софитами, чтобы не упустить деталей и внимания зрителя. Задержите персонажа без сильных движений, хотя бы на доли секунды, смените выражение, эмоцию по отношению к тому, что происходит. И затем переходите в следующую позу на основании этих перемен. Не изменяйте эмоции ВО ВРЕМЯ перехода к следующей эмоциональной позе.
Проходит от 4 до 6 кадров времени прежде, чем средний человек осознает — что происходит на экране. Если же действие происходит сразу же, то это дезориентирует зрителя. Вместо этого поработайте с позой или паузой, чтобы «настроить» шот. Это позволит зрителю все уловить и «подготовиться» к вашему прекрасному выступлению.
Зеркальность будет прокрадываться в ваши работы независимо от того, насколько сильно будете пытаться не допускать её. Это может быть что-то неочевидное. Как правило, это происходит автоматически с мелкими симметричными деталями вроде бровей. Но помните, что даже парные части, включая брови, могут двигаться по отдельности (не зеркально), но при этом составлять единое целое, рассказывая историю и эмоцию.
Когда персонаж говорит, то зачастую, кажется, что единственная часть тела, которая двигается – это рот и губы. Поэтому было бы разумно предположить, что именно на них нужно обратить внимание сначала. Но это не так! Удивительно, но липсинк может подождать. Поза гораздо важнее для передачи силы эмоции, чтобы подчеркнуть то, что персонаж говорит. И, когда она заработала, можно перейти к формам губ.
Если вся анимация идет с примерно одинаковым таймингом, ритмом, по схеме, то она наскучит очень быстро. Конечно, есть исключения, как например анимация под ритм музыкального клипа, но в основном следует чередовать быстрые и медленные движения, широкие и тонкие, а также любые контрасты. Также как и в музыке есть затишья и усиления мелодии, так и в вашей анимации, к удовольствию зрителей, должно быть разнообразие.
Вы уже знаете — что произойдет дальше. Тщательно спланировали сцену, прослушали звуковую дорожку на 10 000 раз. И как раз потому, что вам уже все известно, вы можете сильно поспешить с реакцией персонажа, когда он отреагирует или начнет двигаться гораздо раньше, чем это произошло бы в жизни. Особенно в диалогах. Персонажу нужно время, чтобы обдумать сказанное прежде, чем отреагировать. Это может быть всего несколько кадров, но они должны быть там. Иначе действие будет казаться вынужденным или неестественным.
Особенно верно для 3Dанимации, очень легко забыть, что есть земля внизу под ногами, если вы анимируете лицо персонажа крупным планом. Но она там все-таки есть и законы гравитации никуда не исчезали. Так, что если он смещает вес во время разговора, убедитесь, что в этом есть смысл, вплоть до пальцев ног, или баланс может быть нарушен.
Референс – великая вещь! Анимирование с референса один в один – дает ужасные результаты. Референс дает нам опору, только лишь НАПРАВЛЕНИЕ. Нельзя его полностью копировать. Придерживайтесь его, набросайте себе пометки, подсказки. Затем приступайте к анимации используя эту информацию, а не просто копируя на персонажа.
Когда вы достигните определенного уровня комфорта при анимации, то рискуете сползти в маленькую удобную колею, где вы будете полагаться на знакомые вам хитрости и позы, в которых уже уверены. Опасность заключается в том, что вы можете прекратить экспериментировать и таким образом перестанете расти как художник. Даже если люди стучатся в вашу дверь, чтобы нанять вас именно за ваш узнаваемый «стиль», не стоит почивать на лаврах. Лучшие аниматоры постоянно выходят за пределы того, что знают и тянутся все выше и выше.
#Мнения
- 12 май 2022
-
0
Спроси эксперта: что нельзя анимировать на сайте?
Разработчик Дмитрий Уткин о главных правилах анимации в интерфейсах: не навреди и не утоми.
Иллюстрация: Dana Moskvina / Skillbox Media
Всюду ищет великую красоту, работает над разумностью потребления.
Вопрос читателя
Какие элементы на сайте не стоит анимировать?
Алексей,
Белград
На этот вопрос ответил Дмитрий Уткин.
Технолог в SuperJob.
Получает от дизайнеров единицу смысла, а потом воплощает её как им надо, без переноса ошибок из макета. Кунг-фу постиг в Студии Лебедева и отточил в «Афиша Daily».
Консультирует и читает лекции.
Анимация тратит время пользователя, но привлекает его внимание. Она как повышение тона в разговоре. Общее правило такое: там, где нужно сделать акцент для пояснения или метафоры, продемонстрировать связи или отношения, анимировать можно. В остальных случаях — противопоказано.
- Не анимируй элементы, если они на проблемном макете.
«Скучный блок, анимация сделает его повеселее» — нет, так делать не надо. Сначала сверстай, пожалуйста, нормальный макет.
Постоянно вижу надоедливые фейдины на лендингах — это плохо. И кодеры реализуют идею дизайнера не всегда качественно: бывает, что видишь полупустой фон, и только через три четверти экрана появляется текст. А я мог бы уже прочитать пару слов!
- Не анимируй элементы, если они часто появляются или выглядят навязчиво.
Когда постоянно переключаешься между вкладками или листаешь ленту, никакой анимации переключения и появления постов видеть не захочешь. «Мне тут коробки носить надо, а вы мультики показываете!» — вот реакция на навязчивую анимацию. Анимация — это фейерверк, и запуск салюта каждый день наскучит практически сразу.
- Анимируй, если между изменениями элемента есть связь или пространственное отношение.
«Сюда сворачивается окошко, отсюда же раскрывается» — это отношение. Значит, можно анимировать. Если не будет навязчивым.
Ещё пример: если потянуть вбок письмо в приложении Gmail или чат в Telegram, появятся скрытые кнопки. Анимация покажет, будто чат или письмо сдвинулись, а под ними оказались кнопки.
Хорошо бы анимировать, как добавляется дополнительное значение на диаграмме. Но как только данные поменялись, анимацию надо убрать. Вредно показывать таким образом связь или «преемственность».
- Анимируй, если состояние интерактивного элемента меняется.
Пример — кнопка плавно меняет цвет при ховерении. Или «перетаскиваемая» карточка отбрасывает другую тень и слегка подкручивается — изменения состояния помогают понять, что что-то произошло. Анимируй, если это не будет навязчивым.
Разработчикам
На интерактивные элементы по умолчанию пишите: transition: all .1s ease-in;.
- Анимируй, если элемент может развлечь пользователя динамикой.
Ради шоу можно анимировать появление элементов. Но осторожно: заранее подумай, кто и на чём будет этот интерфейс или страницу показывать и смотреть. Анимировать мелкие элементы для презентации с телефона гендиректору в лифте расточительно и неразумно.
Анимировать можно всё, если это не будет навязчивым.
- Не делай анимацию разнонаправленной.
В лекции «Интерфейсные анимации» Илья Бирман отлично прояснил, что важны синхронность и схожесть анимаций. Несогласованные анимации и одновременные движения элементов в разные стороны моментально утомляют и не приносят никакой пользы. Будто двое людей говорят на повышенных тонах одновременно — в итоге никто никого не в состоянии расслышать и понять.
- И никогда не делай анимацию навязчивой.
Например, эффект сворачивания окна «Джинн» в iOS долгий, сложный и потому крайне навязчивый. Или строка поиска по iPhone (если потянуть на экране с иконками приложений), которая появляется сверху вниз, а в три раза медленнее снизу вверх выдвигается клавиатура — это некрасиво.
Учись бесплатно:
вебинары по программированию, маркетингу и дизайну.
Участвовать
Научитесь: Профессия Motion-дизайнер
Узнать больше
От автора: роль веб-анимации эволюционировала от простого декоративного пуха до конкретных целей в контексте пользовательского опыта — например, предоставления визуальной обратной связи, когда пользователи взаимодействуют с вашим приложением, направляя внимание пользователей на выполнение целей вашего приложения, предлагая визуальные сигналы, которые помогают пользователям понять интерфейс вашего приложения и т. д.
Для обеспечения того, чтобы веб анимация JavaScript соответствовала таким важнейшим задачам, важно, чтобы движение происходило в нужное время в гладкой и плавной форме, чтобы пользователи воспринимали его как помощь, а не как мешали каким-либо действиям пытаясь продолжить свое приложение.
Один страшный эффект плохо продуманной анимации jank, который объясняется на jankfree.org следующим образом:
Современные браузеры пытаются обновить содержимое на экране в синхронизации с частотой обновления устройства. Для большинства устройств сегодня экран будет обновляться 60 раз в секунду или 60 Гц. Если на экране есть какое-то движение (например, прокрутка, переходы или анимация), браузер должен создать 60 кадров в секунду, чтобы соответствовать частоте обновления. Jank — это любое заикание, искажение или просто остановка, которую пользователи видят, когда сайт или приложение не поддерживают скорость обновления.
Если анимация дергается, пользователи в конечном итоге будут взаимодействовать все меньше и меньше с вашим приложением, тем самым отрицательно влияя на его успех. Очевидно, никто этого не хочет.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
В этой статье я собрал несколько советов по производительности, которые помогут вам решить проблемы с анимацией JavaScript и упростить выполнение целевой задачи 60 кадров в секунду для достижения плавного движения в Интернете.
№1 Избегайте анимации тяжелых свойств CSS
Планируете ли вы анимацию свойств CSS Transitions/CSS keyframes или JavaScript, важно знать, какие свойства приводят к изменению геометрии страницы (макета) — это означает, что позиция других элементов на странице должна быть пересчитана или что операции отрисовки будут задействованы. Как макеты, так и задачи рисования очень дороги для обработки браузеров, особенно если на вашей странице несколько элементов. Как следствие, вы увидите, что производительность анимации значительно улучшится, если вы избегаете анимирования свойств CSS, которые запускают операции макета или рисования, и придерживаются таких свойств, как transform и opacity, поскольку современные браузеры отлично справляются с их оптимизацией.
В CSS Triggers вы найдете обновленный список свойств CSS с информацией о работе, которую они запускают в каждом современном браузере, как при первом изменении, так и при последующих изменениях.
Изменение свойств CSS, которые запускают только сложные операции — это простой и эффективный шаг, который вы можете предпринять для оптимизации вашей веб-анимации для повышения производительности.
№2 Выделяйте элементы, которые вы хотите оживить на свой уровень (с осторожностью)
Если элемент, который вы хотите оживить, находится на собственном уровне композиции, некоторые современные браузеры используют аппаратное ускорение, выгружая работу на GPU. Если использовать разумно, этот ход может положительно повлиять на производительность ваших анимаций.
Чтобы элемент был на своем слое, вам нужно его продвигать. Один из способов сделать это — использовать свойство CSS will-change. Это свойство позволяет разработчикам предупреждать браузер о некоторых изменениях, которые они хотят сделать на элементе, так что браузер может сделать необходимые оптимизации загодя.
Тем не менее, не рекомендуется, чтобы вы продвигали слишком много элементов на своем собственном уровне или что вы делаете это с преувеличением. Фактически, для каждого слоя, создаваемого браузером, требуется память и управление, что может быть дорогостоящим.
№3 Замените setTimeOut / setInterval на requestAnimationFrame
JavaScript-анимации обычно кодируются с использованием либо setInterval(), либо setTimeout(). Код будет выглядеть примерно так:
|
var timer; function animateElement() { timer = setInterval( function() { // animation code goes here } , 2000 ); } // To stop the animation, use clearInterval function stopAnimation() { clearInterval(timer); } |
Хотя это работает, риск jank высок, потому что функция обратного вызова работает в какой-то момент кадра, возможно, в самом конце, что может привести к пропущению одного или нескольких кадров. Сегодня вы можете использовать собственный JavaScript-метод, который предназначен для гладкой веб-анимации (DOM-анимация, холст и т. д.), requestAnimationFrame().
requestAnimationFrame() выполняет ваш код анимации в самое подходящее время для браузера, как правило, в начале кадра.
Ваш код может выглядеть примерно так:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
|
function makeChange( time ) { // Animation logic here // Call requestAnimationFrame recursively inside the callback function requestAnimationFrame( makeChange ): } // Call requestAnimationFrame again outside the callback function requestAnimationFrame( makeChange ); |
№4 Отделите события от анимации в коде
При 60 кадрах в секунду браузер имеет 16,67 мс для выполнения своей работы на каждом кадре. Это не так много времени, поэтому сохранение вашего кода может повлиять на плавность ваших анимаций.
Развязка кода для обработки событий, таких как прокрутка, изменение размера, события мыши и т. д. из кода, который обрабатывает обновления экрана с помощью метода requestAnimationFrame() является отличным способом оптимизации кода анимации для производительности.
№5 Избегайте долгого кода JavaScript
Браузеры используют основной поток для запуска JavaScript вместе с другими задачами, такими как вычисления стиля, макеты и операции рисования. Долгосрочный JavaScript-код может негативно повлиять на эти задачи, что может привести к тому, что кадры будут пропущены и ядовитые анимации. Поэтому упрощение вашего кода, безусловно, может быть хорошим способом обеспечить бесперебойную работу ваших анимаций.
Для сложных операций JavaScript, которые не требуют доступа к DOM, рассмотрите возможность использования Web Workers. Веб воркер выполняет свои задачи, не влияя на пользовательский интерфейс.
№6 Используйте DevTools браузера для проверки производительности при проверке
Инструменты разработчика вашего браузера позволяют отслеживать, насколько сильно ваш браузер работает для запуска вашего JavaScript-кода или библиотеки сторонних разработчиков. Они также предоставляют полезную информацию о частоте кадров и многое другое.
Вы можете получить доступ к Chrome DevTools, щелкнув правой кнопкой мыши на своей веб-странице и выбрав Inspect внутри контекстного меню. Например, запись вашей веб-страницы с использованием инструментов Performance даст вам представление об узких местах производительности на этой странице:
Нажмите кнопку записи, а затем остановите запись через несколько секунд:
На данный момент у вас должно быть множество данных, которые помогут вам проанализировать производительность вашей страницы:
Этот Chrome DevTools Guide поможет вам извлечь максимальную пользу из DevTools для анализа производительности и множества других данных в браузере Chrome. Если Chrome не является вашим браузером по выбору, это не имеет большого значения, так как большинство современных браузеров в настоящее время поставляются с супер мощными DevTools, которые вы можете использовать для оптимизации вашего кода.
# 7 Используйте Canvas вне экрана для сложных операций рисования
Этот отзыв относится конкретно к оптимизации кода для HTML5 Canvas.
Если ваши фреймы связаны с сложными операциями рисования, хорошей идеей было бы создать внеэкранный холст, где вы выполняете все операции рисования один раз или только когда происходит изменение, а затем на каждом кадре просто рисовать заставку.
Заключение
Оптимизация кода для производительности — это необходимая задача, если вы не хотите разочаровывать ожидания пользователей в Интернете сегодня, но это далеко не всегда легко или просто. Могут быть несколько причин, по которым ваши анимации не работают хорошо, но если вы попробуете советы, перечисленные выше, вы пройдете долгий путь, чтобы избежать наиболее распространенных ошибок производительности анимации, тем самым улучшив пользовательский интерфейс вашего веб-сайта или приложения.
Автор: Maria Antonietta Perna
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Смотреть
Производительность анимаций на сайтах
При разработке сайтов, выходящих за рамки условного бутстрапа, рано или поздно возникают вопросы, связанные с производительностью анимаций. Особенно важными они являются в дизайнерских сайтах, вроде тех, что попадают в каталоги Awwwards, FWA, CSS Design Awards и.т.д. При этом часто задача создания анимаций и последующей оптимизации, если она будет нужна, ложится на плечи не очень опытных разработчиков, которые даже не знают с чего начать. Обычно все это выливается в тормозящие сайты, которыми невозможно пользоваться, и последующее негативное отношение ко всему классу таких проектов. В этой статье мы постараемся разобрать, где находится граница приемлемой производительности анимаций, какие узкие места часто встречаются и куда смотреть в инструментах разработчика в первую очередь.
Небольшое замечание: поскольку эта статья предназначается скорее для начинающих разработчиков и ее цель – показать общие подходы к оптимизации анимаций, то многие вещи будут даваться в упрощенной, не совсем академичной форме.
Как браузер отображает страницу
Первым делом полезно разобраться с тем, что происходит, когда браузер отображает нам текущее состояние страницы. Существует четыре основных шага:
- Style calculation (браузер разбирает CSS-селекторы, определяет какие стили к чему нужно применять)
- Layout creation (собственно формируется макет страницы)
- Painting (создаются пиксельные представления элементов для последующего рендеринга)
- Layer composition (браузер собирает все воедино и показывает на экране)
При этом браузер всегда действует в этой последовательности и идет до конца. При первоначальном отображении страницы после ее загрузки проходят все четыре шага. В дальнейшем наши действия могут вызвать выполнение одного из них, но при этом выполнятся и все последующие. Но не предыдущие.
Узкие места каждого из этих шагов мы рассмотрим дальше, а сейчас зададимся одним глупым на первый взгляд вопросом, с которого по идее нужно начинать…
Тормозит или не тормозит, вот в чем вопрос…
Очень часто можно встретить людей, которые ничего не делают с явно тормозящим сайтом и говорят “а у меня page speed дает 100 баллов, все хорошо”. Или наоборот, на хорошо работающем сайте люди долго занимаются какими-то оптимизациями, потому, что какой-то алгоритм работает неэффективно по каким-то загадочным метрикам. Но между этими крайностями должна быть середина здравого смысла, так где же она?
Чтобы познать дзен понять, нужна ли оптимизация ваших анимаций, нужно осознать глубокую философскую мысль:
Если ты видишь, что сайт тормозит, значит он тормозит. Если ты не видишь, что сайт тормозит, значит он не тормозит.
Многие люди почему-то считают это утверждение очень глупым, но так ли это? Для конечного пользователя производительность – это не какие-то метрики или идеальные алгоритмы со строгим математическим обоснованием. Для него производительность – это одно из двух: тормозит или не тормозит.
Как он это определяет? Глаз человека, проводящего много времени за монитором, начинает резко реагировать на падение fps. Это вызывает странное чувство дискомфорта. Соответственно наша задача, как разработчиков, не допускать проседания. Пользователь привык видеть работу браузера в 60fps? Хорошо, значит делаем все, чтобы все так и оставалось. Берем ноутбук со средним железом и смотрим. Видим сильно меньше 60fps – оптимизируем. Видим около 60 – ничего не трогаем. Пользователь разницы все равно не заметит, а мы потратим кучу времени на оптимизации ради оптимизаций.
Не занимайтесь оптимизациями ради оптимизаций.
16.5ms
Выражаться в терминах fps не удобно, так что перейдем к миллисекундам. Нехитрым делением 1000ms / 60fps получаем, что на один кадр приходится примерно 16.5ms времени.
Что это означает? За 16.5ms браузер должен отобразить нам текущее состояние страницы с анимацией, пройдя по шагам, которые мы смотрели выше, и при этом должны остаться ресурсы на работу других скриптов, общение с сервером и.т.д. Если на отображение текущего состояния страницы будет тратиться большее время – мы увидим глазами лаг. Если около 16ms, то проседания не будет, но вполне вероятно, что загрузка железа будет очень высокой, кулеры будут гудеть, а телефоны греться. Таким образом нам нужно следить за тем, чтобы отрисовка одного кадра не приближалась к этому значению по времени, а еще лучше не была больше 10ms, чтобы оставался запас по производительности. Не забывайте также, что тесты проводятся всегда на среднем железе – например в последующих примерах скриншоты будут делаться на Pentium Silver со встроенной графикой.
Проводите тесты на том железе, которое более вероятно есть у ваших пользователей. Если у вас на рабочем месте топовый процессор и майнинг-ферма под столом, то у вас все будет работать хорошо, при этом у ваших пользователей с бюджетными ноутбуками все может быть очень печально.
Для того, чтобы не полагаться только на свой меткий глаз и интуицию, полезно освоить инструменты разработчика, по крайней мере на базовом уровне. Они не только дадут точные данные о производительности, но и подскажут, где искать проблему, если все работает не очень.
Инструменты разработчика в Google Chrome
Многих верстальщиков инструменты разработчика в браузере пугают чуть ли не сильнее, чем консоль linux. Но на самом деле там нечего бояться. Да, там много кнопок, но они избыточны для решения наших задач. Сейчас мы посмотрим, куда стоит обращать внимание в первую очередь, чтобы понять, что делать с анимацией, и нужно ли вообще что-то делать.
Когда речь идет о производительности, мы большую часть времени будем проводить во вкладке performance и будем нажимать одну и ту же кнопку.
Сочетание клавиш Ctrl-E или круглая кнопка слева запускают и останавливают запись происходящего. Результаты выводятся здесь же. Браузер записывает много всего, но лучше один раз увидеть, чем много раз прочитать, так что возьмем какую-нибудь анимацию и посмотрим на нее. Пусть для начала это будет простая CSS-анимация. Если открыть ее на весь экран, то можно будет увидеть, что работает она с заметными подлагиваниями:
Запишем несколько секунд в полноэкранном режиме и посмотрим, что там происходит:
Браузер записывает все, что делает. В верхней части окна мы видим график fps. По нему можно легко обнаружить аномалию, если в процессе работы со страницей она начнет резко тормозить. Если нажать на график мышкой и потянуть в сторону или покрутить колесиком, то можно будет выбрать этот диапазон времени и внизу будет отображаться детальная информация для него. В нашем простом примере нет аномалий, но хорошо видно, что все работает не очень равномерно.
Сразу обратим внимание на строку Frames, в ней содержится информация о времени, затраченном на каждый кадр. Можно заметить, что это время постоянно скачет и заметно превышает 16ms (ниже, в практических примерах, мы немного улучшим эту анимацию).
Дальше мы видим несколько строчек, в которых разными цветами отображается нагрузка – можно посмотреть, сколько времени браузер потратил на разные виды деятельности. У нас анимация равномерная и для каждого кадра выполняются одни и те же операции, обозначенные фиолетовым и зеленым цветом. Если навести мышь на цветные блоки, то станет ясно, что мы имеем дело с теми пунктами, которые упоминали в начале – recalculate style и update layer tree – фиолетовые, а paint и composite layers – зеленые.
Рассмотрим другую анимацию. На этот раз со скриптами – простой генератор шума. Это довольно показательный пример, хотя и не представляет никакого интереса с точки зрения дизайна:
Вы можете заметить, что добавились желтые блоки, отображающие выполнение скриптов. Если там будет много вызовов функций, то для каждого вызова будет добавляться еще один блок – по их размеру нетрудно найти самую “тяжелую” функцию, с которой, вероятно, и стоит начать оптимизацию.
В примере время, затраченное на один кадр, колеблется в районе 80ms. Да что уж там, даже невооруженным глазом хорошо видно, как все подлагивает. Посмотрев в раздел summary внизу, мы видим, что больше всего времени занимают скрипты. По сравнению с ними rendering и painting выглядят как погрешности, которыми можно пренебречь. Не всегда, конечно, так бывает, но довольно часто.
Если нажать на блок, помеченный как function call, то внизу будет ссылка на функцию в коде скрипта. Если по ней пройти, то можно будет увидеть, что в этом примере идет цикл по всем пикселям на экране. Такую задачу было бы логичнее делать на шейдерах, тогда производительность была бы в разы лучше. Но мы посмотрим на это в практических примерах.
Что делать, если…
Мы узнали, какие есть шаги при отображении текущего состояния страницы в браузере, и где посмотреть, какой из них занимает больше всего времени. Настала пора познакомиться с наиболее распространенными причинами, по которым тот или иной шаг начинает требовать слишком много ресурсов и дать пару советов, что делать в том или ином случае.
Style calculation
Если вы видите, что уже на этом шаге начинаются проблемы – скорее всего дело даже не в анимации, а в том, что элементов на странице слишком много. В дизайнерских сайтах это довольно редко встречается, обычно такая проблема – спутник больших таблиц с тысячами элементов, но если вы все же столкнулись с этим:
Уменьшите количество элементов на странице, упростите разметку. Особое внимание обратите на повторяющиеся куски кода с обертками, вполне вероятно, что их можно убрать.
Вторая причина, связанная с первой – это сложные селекторы в CSS. Если на небольших страницах вполне можно использовать глубокие вложенности, хитрые хаки с соседними элементами и.т.д., то на действительно большой странице это все может привести к плохой производительности.
Упрощайте селекторы в CSS, используйте БЭМ.
Layout creation
Этот пункт уже ближе к дизайну и анимациям, здесь начинаются интересные вещи. Первое, что важно уяснить, так это то, что макет формируется целиком. Если мы что-то меняем, он формируется заново. По этой причине на большой странице даже незначительные изменения могут вызывать заметные задержки на этом шаге.
Главное правило, которым мы руководствуемся при создании анимаций – не допускать перестройку макета любой ценой. Поэтому обычно мы не пытаемся оптимизировать ее (да и возможностей особо нет), а именно стараемся ее избежать.
Свойств, которые могут вызывать перестроение макета много, вы можете найти списки в интернете, например на csstriggers.com есть неплохой. Чаще других в анимациях можно встретить свойства:
display
position / top / left / right / bottom
width / height
padding / margin
border
font-size / font-weight / line-height
и.т.д.Вы можете заметить, что все эти свойства объединяет одно – они описывают геометрические характеристики элементов – параметры отображения, размер и физическое расположение. Так что вместо того, чтобы запоминать их все, помните, к чему они относятся.
Не изменяйте геометрические свойства элементов, лучше используйте transform и opacity.
Отдельно стоит отметить, что изменение фона элемента также будет возвращать нас к этому шагу. Про это постоянно забывают, так что выделим в отдельную рекомендацию:
Не меняйте background элементов.
В некоторых браузерах (не буду тыкать пальцем в Firefox) может появляться характерный лаг CSS-анимаций с трансформациями, особенно если выполняется больше одной анимации в единицу времени. Внешне это может выглядеть не только как паузы в ее работе, но и как “срывы” анимации в самое свое начало. Кажется, что браузер постоянно что-то рассчитывает заново. Такое поведение почти всегда поправляется с помощью свойства backface-visibility.
По возможности добавляйте backface-visibility: hidden анимируемым элементам.
Также перестройку макета вызывают наши обращения к элементам из скриптов. Причем это не обязательно должно быть прямое изменение CSS, это может быть и обращение к некоторым свойствам и методам элементов. Наиболее часто встречаются:
offset***
client***
inner***
scroll***В анимациях стоит проявлять осторожность с ними, т.к. если мы начнем обращаться к этим свойствам и методам у большого количества элементов, то каждый раз это будет вызывать перестройку макета.
Избегайте обращений к упомянутым свойствам и методам для отдельных элементов в циклах.
Painting и layer composition
Эти два шага рассмотрим вместе, т.к. они в некоторой степени связаны и обычно если есть проблемы с одним, то будут и с другим. Пропустить эти шаги, избежать их, уже не получится, поэтому мы пытаемся их как-то оптимизировать.
Браузер готовит пиксельное изображение страницы не целиком, а по частям – слоям. Их может быть много. Каждый слой существует как бы сам в себе и не затрагивает остальные, что создает почву для некоторых CSS-хаков. Но мы поговорим о них в другой раз. Затем из этих слоев собирается конечное изображение. В контексте анимаций очень полезно вынести анимируемые элементы в отдельный слой, чтобы их изменения не затрагивали все вокруг. Желательно, чтобы содержимое элементов было небольшим. Мы можем это сделать с помощью свойства will-change или, как это раньше делали, transform: translateZ(0). Единственное, что нужно помнить – это то, что нельзя увеличивать количество слоев бесконечно. В какой-то момент это сыграет злую шутку и производительность напротив упадет. Так что здесь будет два совета:
Используйте will-change или transform: translateZ(0), чтобы выносить анимируемые элементы в отдельный слой.
но в то же время
Не переусердствуйте с этим делом. Проверяйте в инструментах разработчика, что не стало хуже.
Очень часто серьезные проблемы вызывают фильтры, которые как-то трансформируют изображение элементов. Это могут быть простые CSS-фильтры с blur или замороченные варианты с SVG, но эффект будет одинаковым – заметное снижение производительности.
Не используйте сложные фильтры. Если все же нужен задуманный эффект – рассмотрите вариант реализации его на WebGL.
Насколько эти советы работают?
Работают, но не нужно ждать от них чуда. В сети новички иногда говорят “я добавил will-change, но ничего не изменилось”. Обычно это значит, что основная проблема была в другом месте, а этот прием дал настолько маленький прирост производительности, что он остался незамеченным. Именно поэтому важно использовать инструменты разработчика, чтобы четко понимать, где именно находится узкое место и не тратить время и силы на попытки оптимизировать то, что и так работает нормально.
Из всего этого можно сделать вывод, что есть не так много способов повлиять именно на отрисовку страницы, да и эффект от них не всегда будет значительным. Эти приемы – не серебряные пули, они скорее нужны для полировки анимации. Если мы посмотрим на сайты с действительно плохой производительностью, то заметим, что в подавляющем большинстве случаев виной тому будут наши собственные скрипты, а не загадочные проблемы с разбором CSS где-то в недрах браузера.
Скрипты…
Знаете откуда растут проблемы с тормозящими анимациями чаще всего (по моим наблюдениям)? Вот из этого подхода к разработке:
Звучит глупо, но так оно и есть. Постоянно встречаются решения, явно откуда-то скопированные совершенно без понимания, что там к чему. Бывает даже такое, что можно половину кода удалить и все продолжит работать. Часто код в ответах на SO или Тостере не предназначен для вашего продакшена. Это должно быть очевидно. Он показывает идею, отвечает на вопрос, но совершенно не является оптимальным конечным вариантом под вашу конкретную задачу.
Если уж копируете, то хотя бы просматривайте код на предмет лишних действий.
RequestAnimationFrame
Про этот метод часто говорят и рекомендуют использовать его вместо setTimeout / setInterval в анимациях. В этом есть смысл, так как те методы имеют свойство рассинхронизироваться по времени с кадрами, которые перерисовывает браузер и в результате получаются небольшие лаги. Но тут есть два замечания.
Во-первых, если на странице анимируется больше одного элемента и мы будем вызывать requestAnimationFrame много раз, то это приведет к резкому проседанию fps. В теории так быть не должно, но на практике все происходит именно так. Ознакомиться с тестами можно здесь.
Объединяйте все коллбеки для анимаций в один requestAnimationFrame.
Второй момент связан скорее с ситуацией, когда у нас уже есть тяжелая анимация, возможно с применением канваса, от которой мы не можем избавиться или времени нет переделывать, и происходит следующее: допустим анимация должна выполняться за N секунд и мы уже используем requestAnimationFrame. Но требуется много ресурсов для расчета текущего состояния и мы видим такую картину: анимация работает плавно, красиво, но за 2N, а то и 3N секунд. В результате все воспринимается оооччччеееннь меееедддллеенным. Для того, чтобы хоть как-то поправить такое поведение, можно пойти против всех рекомендаций, воспользоваться тем самым setInterval / setTimeout и привязать состояния анимируемых элементов к физическому времени, а не к абстрактным кадрам. В результате мы получим формальное уменьшение fps, но с психологическим эффектом прироста производительности.
В случае крайне медленной анимации может иметь смысл отказаться от requestAnimationFrame в пользу setInterval / setTimeout.
Canvas и шейдеры
Значительная часть анимаций на нестандартных сайтах связана с канвасом. Это вполне объяснимо, CSS – штука ограниченная, а здесь мы можем реализовать любые фантазии дизайнера. Но нужно иметь в виду, что обычный 2d-канвас – это далеко не самая производительная технология. Если вы начнете рисовать на нем много элементов или работать с пикселями напрямую, то быстро столкнетесь с тем, что fps проседает, или совершенно внезапно painting и layer composition начинают занимать неприлично много времени. Наглядно эту проблему можно увидеть в примере:
Посмотрим на то, что делает браузер (последний Google Chrome под линуксом):
Обратите внимание на то, насколько сильно разросся шаг layer composition. Это выглядит немного нелогично, там ведь только один элемент, что там можно так долго компоновать? Но при использовании 2d-канваса такое поведение – не редкость, и что-то с этим сделать очень проблематично. Это одна из причин, почему обычно мы склоняемся к использованию WebGL, там таких вопросов не возникает.
Если стоит выбор между 2d-канвасом и WebGL, выбирайте второе. Это даст изначальный бонус в производительности на тех же самых задачах.
С чем обычно ассоциируется WebGL? С шейдерами. А отладка шейдеров – это головная боль для любого, кто с ними работает. И инструменты разработчика тут практически бессильны. Обычно, если в шейдерах слишком много вычислений, мы видим в сводке внизу, что больше всего времени занимает “простой”, который по факту является выполнением наших шейдеров независимо от браузера, и никаких полезных подробностей мы получить не можем.
Есть разные рекомендации о том, какие функции предпочитать другим в шейдерах, потому, что они якобы лучше оптимизированы. Или что нужно избегать блокирующих операций. Это все верно, но по моим наблюдениям в большинстве случаев шейдеры, которые слишком тормозят работу сайта – это просто очень большие шейдеры. Если вы написали 100 строк GLSL в одном месте, это почти гарантированно будет плохо работать. А если там еще и разные вложенные конструкции, циклы, то все – пиши пропало. Дать какие-то рекомендации здесь сложно, разве что:
Если вы в процессе работы поняли, что все сложнее, чем казалось изначально, и что кода будет много и он будет тормозить – лучше как можно раньше это обсудить с дизайнером и заказчиком и подумать, что можно изменить.
Часто можно прийти к выводу, что заранее подготовленное видео будет работать куда лучше, чем попытки отрендерить какую-то замороченную штуку в реальном времени. Помните об этом. Да, все хотят показать себя, хотят покрасоваться “а я еще вот так умею”, но не забывайте о конечных пользователях.
В связи с этой мыслью вспоминается “болезнь”, которой особенно подвержены бывшие олимпиадники. Она почему-то сильно проявляется именно при работе с канвасом. По ее причине стоит всегда осторожно копировать код таких людей. Они стараются использовать “правильные” математические алгоритмы, сложные физические формулы, рассчитывать все движения элементов с большой точностью даже там, где это совершенно ни к чему. Это приводит к росту нагрузки на процессор и к тому, что за наши условные 10ms он ничего не успевает посчитать. На практике же часто можно обойтись приближенными формулами и школьными знаниями физики. Не нужно все усложнять, мы делаем сайты, а не программное обеспечение для баллистических ракет.
Используйте простые алгоритмы.
Есть еще один прием, который называется RayMarching. Некоторые люди считают создание разных эффектов с его помощью чем-то вроде челленджа, разминки для ума, и иногда результаты производят сильное впечатление. Например здесь генерируется целый подводный мир (вставил видео, потому что от расчетов этого в реальном времени телефон/ноутбук вполне может повеситься):
С самим шейдером можно ознакомиться здесь.
На практике это все требует невероятных ресурсов для работы. В полноэкранном режиме мы имеем 400-800ms на кадр (а вообще в этом примере и до 1500ms может подниматься):
Так что если вы поймали себя на мысли сделать что-то такое на боевом сайте – дайте себе клавиатурой по голове, выпейте чаю и подумайте об альтернативных вариантах реализации эффектов.
Не используйте RayMarching, это верный способ убить производительность.
Практический пример
В статьях про производительность часто не хватает примеров, а на слово поверить бывает сложно. Так что рассмотрим пару. Помните первый пример с вращающимся туннелем на CSS? Браузер делал много всего:
Мы хотим немного ускорить все это. С чего начать? Мы видим фиолетовые блоки, это значит, что браузер постоянно перестраивает макет. Скриптов там нет, но есть CSS анимации, в которых что-то меняется. Посмотрим на их код:
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
@keyframes move-block {
from {
transform: translateX(0);
background: @color1;
}
to {
transform: translateX(-@block-size * 6);
background: @color2;
}
}Трансформации нас не пугают, но мы видим изменение фона элементов. Вспоминаем, что это может вызывать перестройку макета, и думаем, что можно сделать в этой ситуации…
Изменение фона нужно убрать любой ценой, так что исходя из общей идеи анимации решаем, что можно сверху положить радиальный градиент, который создаст почти такой же эффект объема. Кто-то скажет, что градиенты плохо влияют на производительность, но мы ведь не собираемся его менять. Пусть лучше он один раз плохо повлияет, чем у нас будет целая гора постоянно плохо влияющих элементов. В результате получится:
Посмотрим, что делает браузер:
Ух ты… Вместо кучи действий мы видим редкие обращения к GPU и больше ничего, при этом сама анимация стала работать заметно плавнее.
Еще пример
Вспомним, как выглядела работа браузера в генераторе шума:
Проблема определенно в скриптах. Видно, что блок «render» самый большой. Это наша основная функция для отрисовки изображения. Посмотрим на нее:
function render() {
let imageData = CTX.createImageData(CTX.canvas.width, CTX.canvas.height);
for (let i = 0; i < imageData.data.length; i += 4) {
const color = getRandom();
imageData.data[i] = color;
imageData.data[i + 1] = color;
imageData.data[i + 2] = color;
imageData.data[i + 3] = 255;
}
CTX.putImageData(imageData, 0, 0);
requestAnimationFrame(render);
}Здесь определенно идет работа с отдельными пикселями. Это не очень здорово. Мы говорили, что по возможности лучше использовать не 2d-канвас, а WebGL, а эта задача так и хочет, чтобы ее распараллелили с помощью шейдера. Сделаем это:
Что в итоге получится? Смотрите сами:
Время на один кадр снизилось почти до 16ms. Конечно это не идеал, но все же лучше, чем 80ms. В сложных красивых анимациях такой прирост производительности может быть очень заметен. Пользуясь случаем рекомендую начинающим ознакомиться с введением в программирование шейдеров и с продолжением с примерами.
Заключение
В этой статье мы разобрались с тем, когда стоит заниматься оптимизацией производительности анимаций, как пользоваться инструментами разработчика в Chrome в этом контексте и на что обращать внимание в первую очередь. Надеюсь эта информация будет полезна разработчикам, которые впервые столкнулись с такими задачами и не знают с чего начать.
Большинство бизнесменов переводят свой бизнес из оффлайна в интернет и делают сайты для повышения продаж, удовлетворения потребностей клиентов, повышения прибыли. Однако, некоторые предприниматели не разбираются в том, какие веб-студии и дизайнеры хорошо делают свою работу, и обращаются к тем, кто совершает ошибки. Другие долгое время не обновляют свои ресурсы, и дизайн сайта становится неактуален и не учитывает современные потребности пользователей. В этой статье мы поговорим о том, какие ошибки совершают дизайнеры и как их можно предотвратить.
Ошибка 1. Устаревшие эффекты
Первое, что сразу бросается пользователю в глаза — устаревший дизайн сайта. Признаки могут быть различными — от вышедших из моды теней и эффектов придания объема на элементах до фиксированной ширины контентной части.
Данный пример иллюстрирует нам сайт из 2000-х годов. Узкая контентная часть, несогласованность шрифтов и цветов на сайте, обилие мелких элементов — раньше технологии не позволяли сделать дизайн сайта эстетически привлекательным и в то же время удобным для пользователя. Сейчас же появляется множество технологий, трендов, которые позволяют сделать сайт красивым и удобным одновременно. Например, основной тренд в дизайне сайта сегодня — использование двухцветного градиента, плоский дизайн, крупная типографика и изображения и прочее.
Такие направления дают волю фантазии дизайнеру и позволяют создавать современные и оригинальные решения.
Решение проблемы
Сделать редизайн сайта у профессионалов. О том, как сделать редизайн и не потерять клиентов мы писали в этой статье.
Ошибка 2. Отсутствие адаптивности
Еще одна ошибка связана с несоответствием сайта современным технологиям. Речь идет об адаптации ресурса под мобильные устройства. На сегодняшний день пользователи все чаще заходят на сайты со смартфонов и планшетов, поэтому пренебрегать адаптивной версией сайта не стоит. Однако, некоторые разработчики не беспокоятся об этом. Вот как выглядит декстопная версия интернет-магазина одежды:
А вот его мобильная версия:
Как видно из примера, сайт не адаптирован под меньшие размеры экрана и пользователю смартфона неудобно находится на ресурсе и совершать целевые действия. Это приводит к снижению уровня конверсии и недовольству клиентов в целом.
Решение проблемы
Привести сайт к адаптивному виду — разработать макеты для меньших разрешений под смартфоны и планшеты. Подробнее читайте в этой статье.
Ошибка 3. Некачественный контент
Что еще отталкивает пользователей и понижает уровень доверия к сайту? Как правило, присутствие на сайте некачественного контента значительно уменьшает конверсию. Что подразумевается под «некачественным» контентом:
- изображения низкого разрешения;
- заезженные стоковые фото по типу улыбающихся девушек, смеющихся семей, пожимающих руки бизнес-партнеров;
- полотна текста;
- текст с ошибками и прочее.
На данном примере видно, что используемые изображения товаров плохого качества: размытые, обрезанные. К тому же, в названиях товаров присутствует несогласованность — на одной карточке название берета написано в кавычках, а на следующей нет:
Несогласованность в текстах, плохие изображения создают у пользователя ощущение незаконченности, снижают уровень доверия к компании, что в свою очередь приводит к ухудшению конверсии сайта.
Решение проблемы
Позаботиться о качестве контента. Если у вас на сайте присутствуют изображения низкого разрешения, лучше заменить их на хорошие стоковые фото. Самый лучший вариант — нанять профессионального фотографа и сделать уникальные фотографии. Таким образом можно выделиться среди конкурентов и улучшить дизайн. Что касается текстов, важно подобрать оптимальную длину для страницы, использовать списки, таблицы, иллюстрации для лучшего восприятия пользователями.
Ошибка 4. Неудачная цветовая гамма
Кроме того, что нужно следить за контентом, также важна выбранная цветовая гамма сайта. Бывает так, что контент и фон сливаются в одну пеструю картинку, и даже если используются качественные изображения, они сливаются с множеством ярких и несогласованных друг с другом элементов. Например:
На сайте используются яркие оттенки, цветные картинки на фоне и слайдере, яркие заголовки и неподходящие акценты в виде темно-зеленого меню. Взгляд пользователя потеряется при виде этой пестроты и с большой вероятностью посетитель просто уйдет с сайта. Цель разработчика — привести клиента к целевому действию и удовлетворить его потребность. Однако, фон и яркие элементы просто отвлекают внимание и не дают сосредоточиться на основной задаче пользователя — найти и купить нужный товар.
Решение проблемы
Правильно подобрать цветовую гамму, не использовать больше 2-3 цветов. Так можно создать стильное решение, расставить нужные акценты (как правило, кнопки и формы делают яркими и более заметными для привлечения внимания). Для проверки сочетания цветов между собой можно использовать различные цветовые круги, например, круг Иттена.
Ошибка 5. Нет акцентов
Иногда сайт выглядит не как пестрая ткань с различными яркими цветами, а однотонным полотном, где взгляду не за что зацепиться. Как в этом примере:
Главная страница представляет собой каталог с перечислением всех разделов сайта. Нет привлечения внимания к целевым действиям — покупке, подписке и прочих действий пользователя для повышения конверсии сайта. Также нет каких-то ярких элементов, которые бы запомнились клиенту.
Решение проблемы
Такая однородная структура тоже требует значительной переработки — выбора цветовой гаммы, расставления акцентов с точки зрения композиции и цвета, добавления изображений, чтобы заинтересовать клиента продукцией и привлечь внимание к основным предложениям компании.
Ошибка 6. Нет четкой композиции
Некоторые сайты представляют свою продукцию с помощью набора однообразных блоков, не разбивая их по категориям. Такой подход мешает восприятию пользователя: взгляд перескакивает с одного элемента на другой и не успевает считывать информацию. В результате клиент не может найти нужное предложение, хотя информация полностью представлена на странице. Это также связано с 5 ошибкой, когда дизайнер не расставил акценты на сайте.
Решение проблемы
Разбить предложения по категориям и расставить акценты можно не только с помощью цвета, но и с помощью правильного расположения элементов. Также нужно добавлять белого пространства, чтобы отделять блоки друг от друга и выделять важные элементы. Подробнее о пространстве мы писали здесь.
Ошибка 7. Отсутствие хорошей навигации
Шестая ошибка тесно связана с отсутствием на сайте хорошо продуманной навигации. Пользователь должен четко понимать, где он находится и как ему найти нужную информацию. В противном случае он просто уйдет к конкурентам, где не нужно блуждать по страницам сайта в поиске нужного товара. На примере показан сайт с несколькими разделами, в которых элементы не согласованы друг с другом, нет элементов для призыва к действию, изображения продукции не ведут к карточкам товара. Все это затрудняет работу пользователя с сайтом, непонятно, как осуществить заказ и найти нужный товар.
Решение проблемы
Определить насколько навигация отвечает требованиям пользователя можно по следующим параметрам:
- Посмотреть структуру сайта. Логично ли расположена продукция, присутствуют ли лишние разделы, которые можно объединить с другими.
- Продумать расположение основных блоков на странице. Легко ли пользователю отличать одно от другого, заметны ли основные предложения.
- Продумать расположение целевых действий на сайте. Проверить, привлекают ли они внимание пользователей, посмотреть, как можно улучшить.
- Проверить наличие основных элементов навигации: хорошо сформированного меню, подвала сайта, поля поиска, иконок для основных действий (вход в личный кабинет, избранное и прочее).
Более подробно о навигации на сайте можно узнать в этой статье.
Ошибка 8. Креативность, а не юзабилити
Некоторые дизайнеры настолько увлекаются творчеством, что совершенно забывают об удобстве пользования ресурсом. Например, дизайнеры создали страницу с такой навигацией по сайту:
С точки зрения креативности и творческой составляющей данное решение — интересное, запоминающееся. Однако, большинству пользователей важно не просто зайти на эстетически привлекательный и оригинальный ресурс, но и быстро найти нужную информацию, сделать покупку. Такие приемы отвлекают клиентов от главных целевых действий и, соответственно, снижают уровень конверсии сайта.
Решение проблемы
Важно соблюдать баланс между креативностью и юзабилити. Быть оригинальным, отличаться от конкурентов, и в то же время думать об удобстве для клиентов, беспокоиться о быстроте и легкости взаимодействия пользователя и интерфейса. Более подробно по этой теме мы писали здесь.
Ошибка 9. Много анимации
Анимация в веб-дизайне — инструмент, который способен придать ресурсу оригинальность, привлечь внимание к нужным элементам. Однако, с анимацией и интерактивностью нужно быть осторожным. Иногда дизайнеры увлекаются и добавляют слишком много динамических эффектов, которые отвлекают пользователей от целевых действий и попросту раздражают. Много анимации уместно только в каких-либо интерактивных проектах, цель которых не увеличение конверсии за счет целевых действий, а презентация бренда:
Решение проблемы
Лучше ограничиться несколькими динамическими эффектами, которые будут выглядеть как дополнительный инструмент привлечения внимания.
Ошибка 10. Нет связи с фирменным стилем
Фирменный стиль должен прослеживаться не только в дизайне футболок и буклетов. Сайт — визитная карточка компании в интернете и пользователь должен легко идентифицировать бренд. Если же фирменный стиль в оффлайне отличается от представления компании в сети, у пользователя снижается уровень доверия к компании, бренд не будет узнаваем в интернете. Например, компания имеет фирменные цвета: черный и желтый, однако, на сайте не используется ни цветовая гамма, ни другие элементы айдентики:
Решение проблемы
Сделать сайт соответствующим фирменному стилю компании. Использовать цветовую гамму, фирменные шрифты, стилизованные изображения. Таким образом можно повысить узнаваемость и запоминаемость бренда, уровень доверия пользователей к компании. Больше об использовании элементов айдентики в веб-дизайне можно прочитать здесь.
Ошибка 11. Неудачная типографика
Если дизайн сайта кажется незаконченным, есть проблемы с восприятием контента, скорее всего проблема в типографике. Иногда дизайнеру достаточно поменять шрифты, чтобы дизайн заиграл новыми красками и выглядел стильно. Лучше не использовать много шрифтов на странице, чтобы не возникало ощущения несогласованности между элементами, как на этом примере:
Решение проблемы
Уделить внимание типографике на сайте. Использовать 2-3 шрифта на сайте или одно семейство с различными начертаниями. Настроить интервалы: кернинг и интерлиньяж. Подобрать цвет текста под цветовую гамму сайта. Больше об использовании типографике на сайте можно прочитать в этой статье.
Посетитель сайта формирует свое представление о компании в первые же секунды. Первое впечатление значительно влияет на его дальнейшие действия: уйдет ли он с сайта к конкурентам или продолжит искать нужный товар. Добиться положительного впечатления в значительной степени можно с помощью дизайна, так как большинство пользователей — визуалы. По результатам исследования Instant shift 94% клиентов не доверяют компании, если сталкиваются с неудачным дизайном.
Чтобы этого не случилось и сайт отвечал всем требованиям пользователей, предпринимателям следует обращаться к профессиональным дизайнерам, которые не допускают вышеперечисленные ошибки. Студия дизайна IDBI занимается разработкой дизайна сайтов и помогает предпринимателям увеличивать продажи. Мы не совершаем ошибок, стараемся следить за трендами, учитываем юзабилити сайта и в то же время предлагаем креативные решения. Больше работ можно увидеть в разделе «Портфолио».
Для чего нужна анимация на сайте и как она работает?
Ксения Ерохина
редактор-копирайтер
Анимация, как правило, ассоциируется с мультипликацией или видео. Можно сказать, что это смоделированное движение различных объектов. Существует огромное множество техник анимации начиная от традиционной покадровой анимации до 3D-анимации.
Но мы хотим поговорить об анимации элементов интерфейса на сайте: они могут менять положение, цвет, размеры, форму, прозрачность и так далее.
Принципы анимации
В настоящее время для анимации интерфейса используются в основном 12 принципов, описанных в книге «Иллюзия жизни: Анимация Дисней».
Книга написана американскими мультипликаторами Томасом Фрэнком и Олли Джонстоном и считается «библией» анимации. Она дает полное описание методов диснеевской анимации, начиная с самых основ.
Перечислим эти принципы:
Принципы универсальны и могут применяться для создания любой анимации в интерфейсах. Давайте подробнее рассмотрим их на конкретных примерах.
1. «Тайминг» — расчёт времени (Timing)
Этот принцип определяет количество кадров, выделенных на показ действия, и время, в течении которого происходит анимация. Если выделить меньше кадров, то движение будет резким и быстрым, а если выделить больше — движение станет плавным и медленным.
Это один из наиболее важных принципов, потому что анимация с течением времени развивается, и движения обретают смысл. Процесс создания анимации подобен созданию сцены в кино. Сначала определяется общий темп сцены, затем расставляются акценты.
В анимации интерфейсов этот принцип еще называют хореографией элементов — он отражает последовательность изменения компонентов, которая ведет внимание пользователя за собой.
Пример взят из статьи на Uxplanet.org. В этом примере сначала анимируются карточки с изображением фигуры человека, которые перемещаются и ведут наш взгляд в следующий раздел.
Продолжительность анимации должна быть достаточно медленной, чтобы дать пользователям возможность замечать изменение, но в то же время достаточно быстрой, чтобы не вызывать ожидание. Многочисленные исследования показали, что оптимальная скорость анимации интерфейса составляет от 200 до 500 мс. Пользователь не успеет распознать анимацию короче 100 мс, а при анимации более 1 секунды подумает, что сайт тормозит или зависает.
Пример взят из статьи на Medium.com.
Тайминг отвечает не только за скорость, но и за размер и вес объекта. Например, маленькому ребенку нужно больше времени и шагов, чтобы преодолеть то же расстояние, что и взрослому человеку. Такой же принцип и в анимации:
Маленькие объекты по сравнению с большими объектами движутся медленнее, так как им нужно сделать больше шагов для преодоления того же расстояния.
Среди движущихся объектов одного и того же размера первым должен остановиться объект, который прошел кратчайшее расстояние.
Меньшие элементы или анимация с небольшими изменениями двигаются быстрее, а анимация с большими и сложными элементами выглядит лучше, когда она длится дольше.
2. Разгон и торможение (Slow in and slow out)
Представьте автомобиль, который резко начинает двигаться со скоростью 60 км/час и тут же моментально останавливается. Если у вас не получилось это представить, то это нормально. Потому в реальность так не бывает. Благодаря закону инерции любому объекту нужно время, чтобы разогнаться и остановиться. В анимации в интерфейсе это выражается в том начало и конец движения любого объекта должны смягчаться, что помогает сделать движение более естественным.
В мире диджитал этот принцип называется функцией плавности (easing) или сглаживанием. Она определяет скорость течения анимации на разных участках. Например, открывая любую дверь, мы в начале ускоряем ее, а затем резко тормозим. А когда мы начинаем спуск на велосипеде с горы, то наша скорость постепенно растет.
Есть несколько видов сглаживания, которые обычно описываются графиками. Например:
Ease-out — движение заканчивается медленно.
Ease-in — движение начинается медленно.
Линейная анимация — движение имеет одинаковую скорость от начала до конца.
Сглаживание Ease-In-Out — самый распространенный тип. В начале элемент плавно ускоряется, а в конце пути — замедляется. Такая анимация выглядит очень естественно для нас, поскольку окружает повсюду — разгон, движение и остановка.
Пример взят из статьи на Medium.com.
3. Сквозные действия и наложения действий (Follow through and overlapping action)
Этот принцип гласит, что вещи вокруг нас не двигаются одинаково. Одни движения более заметны, другие менее заметны. Одни задают тон, а другие следуют. Представьте, например, дерево во время ветра. Листочки подхватываются порывом ветра по очереди, и также останавливаются сначала одни, а потом другие. Это иллюстрация сквозного действия.
Наложение действия — это когда одно действие порождает другое. Например, волнообразные движения змеи, когда она продвигается вперед по земле. Сначала действие появляется в голове, затем переходит на середину туловища и заканчивается хвостом.
В случае с веб-анимацией суть этих приемов заключается в том, чтобы небольшие части анимированного объекта двигались органично с основным действием.
Пример взят из статьи на Medium.com. В данном примере сквозные действия помогают определить иерархию элементов интерфейса, а наложение действий гарантирует, что вся последовательность будет связана между собой.
4. Второстепенные действия (Secondary action)
Второстепенные действия делают анимацию привлекательнее и объемнее. Они могут усиливать основное действие, а могу вообще отвлекать от него и нести новый смысл.
Например, мы едим вкусный бутерброд — это основное действие. И при этом мы закрываем глаза от удовольствия — это второстепенное действие, которое делает поедание бутербродом более ярким.
А теперь представьте школьника, который сидит на экзамене и незаметно подсматривает в шпаргалку. Незаметно только для учителя, а мы видим это второстепенное действие и для нас смысл происходящего полностью меняется.
На веб-сайте принцип второстепенного действия работает похожим образом с предыдущим принципом: он помогает определить, что наиболее важно для пользователя, а что можно спрятать с глаз. Важное правильно: второстепенные действия никогда не должны отвлекать внимание от основных.
Пример взят из статьи на Uxplanet.org. В данном примере второстепенное действие помогает наглядно продемонстрировать переключение из положения off в положение on.
5. Движение по дугам (Arcs)
Дугообразное движение придает анимации живое ощущение. Механические объекты, такие как автомобили, велосипеды и поезда имеют тенденцию двигаться по прямым траекториям, а живые организмы: люди, животные, птицы, рыбы и т.д. двигаются по дугообразным траекториям.
Отличный пример — ходьба. Когда вы идете, вы не просто передвигаете ноги, а одновременно поднимаете ногу и перемещаете ее вперед, затем ставите на землю. То есть ваша стопа описывает дугу в воздухе. Плавное дугообразное движение — наиболее экономичный способ передвинуть объект из одного положения в другое. С этим приемом ваши анимации будут выглядеть натурально.
Пример взят из статьи на Medium.com. Здесь представлен пример применения дуги к оси Z (вертикальная ось куба).
6. Сжатие и растяжение (Squash and stretch)
Сжатие и растяжение создают иллюзию материала, из которого созданы объекты. Он может быть гибким, мягким и податливым, а может быть жестким и твердым. Все это влияет на общее впечатление от дизайна сайта.
Пример взят из статьи на Medium.com. Величина сжатия и растяжения движущегося объекта зависит от его характеристик. Например, более мягкий объект сдавливает и растягивается больше, чем жесткий объект.
7. Сценичность (Staging)
Продолжительность анимации ограничена, поэтому за короткий срок она должна передать одну идею. Принцип сценичности задействует много других принципов: использование разных планов (крупных, средних, общих), тайминг, перекрытие действий и другие. Все это помогает выстроить нужную сцену, чёткую последовательность действий, которая должна быть очевидна для всех аудиторий и направлять их внимание к нужному взаимодействию.
Пример взят из статьи на Medium.com.
8. Преувеличение (Exaggeration)
Анимация позволяет показывать не только настоящие вещи, но и нечто выходящее за пределы реальности. Некоторые объекты могут быть намеренно увеличены или двигаться сильнее и быстрее, чем это было бы в жизни. Например, при анимации прыжка можно показать обычную высоту, а можно сделать так, чтобы персонаж улетел высоко в небо. Это придает сюжету большую выразительность и динамичность.
В анимации интерфейсов размер, форма или движение объекта могут быть намеренно преувеличены, чтобы добавить акцент и привлечь больше внимания.
Пример взят из статьи на Uxplanet.org. В этом примере анимация элемента похожа на лопающийся мыльный пузырь. Взрыв усиливается разлетающимися во все стороны частицами разной формы.
9. Подготовка к действию или к движению (Anticipation)
Это движение подготавливает зрителя к основному действию. Так, например, кошка выгибает спину и опускает уши перед тем, как поймать добычу. Этот принцип может также выражаться в полном отсутствии действия — драматическая пауза перед тем, как кошка сделает свой прыжок.
В дизайне интерфейсов можно использовать небольшие анимации, чтобы вызвать у наших пользователей интерес и предупредить, что за одним элементом может скрываться нечто большее. Отличный пример — эффекты, появляющиеся при наведении на объект.
Пример взят из статьи на Uxplanet.org. Так и хочется нажать на эти яркие кнопочки и узнать, что за ними скрыто!
10. «Прямо вперед» и «от позы к позе» (Straight ahead action and pose to pose).
В анимации есть два способа нарисовать движение: покадровое (straight ahead) и от одной позы к другой (pose to pose).
В первом случае анимацию начинают создавать с первого кадра, а затем последовательно, рисунок за рисунком доводят до конца сцены. Такой подход приводит к большей реалистичности и плавности анимации, а еще таким способом легче создавать спонтанные сцены, например, горящий огонь.
Во втором подходе сначала создают ключевые кадры, а затем заполняют между ними пространство. Большая часть анимации в пользовательском интерфейсе сегодня создаются методом «от позы к позе». Это связано с тем, что для реализации анимации используется CSS.
11 & 12. Ясный рисунок (Solid drawing/Solid posing) и Привлекательность (Appeal)
В этих двух принципах все сводится к хорошему дизайну, удобному интерфейсу, изящным и точным формам. Привлекательность — это когда нравится. А ясность — это простые формы, очевидные функции, настроение и эмоции понятны.
Пример взят из статьи на Uxplanet.org. Хорошая анимация приносит радость и наслаждение для глаз.
Как анимация влияет на восприятие пользователей?
Анимация на сайте может быть функциональной — направляет внимание пользователя и фокусирует на важных объектах, а также облегчает взаимодействие с интерфейсом. И может быть декоративной — ее цель впечатлить пользователя, выделить проект среди других и вызвать эмоции.
Анимация в интернете часто используется в рекламных баннерах. Причина популярности баннеров заключается в идее, что движение «цепляет» зрительные рефлексы пользователя, а на это сложно не обратить внимание.
Движение привлекает и направляет внимание людей. В эксперименте, проведенном Джеем Праттом из Университета Торонто, обнаружилось, что участники быстрее реагируют на оживленные предметы, чем на объекты без движения.
Хотя и существует такое явление как «баннерная слепота» — простыми словами это игнорирование тех элементов веб-сайта, которые пользователь воспринял как рекламу. Компании Nielsen Norman Group выяснила, что даже если элемент не является рекламой, но расположен там, где обычно располагается реклама или рядом с рекламными баннерами, то пользователи все равно игнорируют эти элементы.
Тем не менее дизайнеры могут сделать интерфейс таким, чтобы привлекать внимание к нужным элементам. Главное, чтобы эти элементы не были слишком похожи на классическую рекламу.
При создании анимации нужно учитывать поведение пользователя. Если ему нужно найти конкретную информацию, то он скорее всего будет игнорировать большие красочные баннеры, а сосредоточится на контенте. Кроме того, он будет искать контент в том месте на сайте, где обычно можно его найти. Так что в таких местах рекомендуется использовать анимацию, которая поможет пользователю выполнить его задачу и не будет отвлекать от его основной цели.
Если вам нужно разместить на странице рекламный баннер, то попробуйте менять его местоположение время от времени и используйте релевантный контент для размещения рекламы. Удачным решением будет провести A/B тестирование, чтобы узнать, как именно ваши пользователи реагируют на контент.
Давайте рассмотрим подробнее, какое влияние оказывает анимация:
1. Снижает когнитивную нагрузку. Когнитивная нагрузка — это те интеллектуальные усилия, которые пользователь прикладывает для совершения нужной ему задачи. Если интерфейс перегружен информацией, то потребуется больше усилий и у человека может не хватить внимания и усидчивости. Функциональная анимация помогает пользователям ориентироваться в интерфейсе и видеть, откуда берутся и куда скрываются элементы и не тратить слишком много сил. Если же пользователю приходится много размышлять и заглядывать в справку в процессе использования сайта, то рассчитывать на высокую конверсию не стоит.
Пример взят из статьи на Medium.com.
2. Помогает лучше ориентироваться в интерфейсе. В интерфейсах с анимацией пользователи решают поставленные задачи примерно в два раза быстрее, чем без анимации. Например, если ввести неверный пароль в iPhone, четыре точки над циферблатом дрогнут слева направо, имитируя покачивание головой — универсальный человеческий жест. Это анимация быстро указывает на ошибку. Если бы это было обычное уведомление, то пользователю, чтобы его заметить и понять, что произошло, потребуется больше времени.
Пример взят из статьи на Medium.com.
3. Действует как напоминание. Это не самый частый случай, но существуют такие ситуации, когда анимация может помочь. Например, при заполнении формы можно напомнить, чтобы пользователь нажал кнопку «Сохранить» и никакие данные не потерялись.
4. Снижает слепоту к изменениям. Анимация помогает понять, что что-то произошло на сайте. В реальной жизни мы можем сразу получать обратную связь от многих наших действий. Также должно происходить и в диджитал мире, чтобы взаимодействие с сайтом было похоже на то, к чему мы привыкли в реальности, и пользователь мог легко и быстро ориентироваться в интерфейсе. Например, когда клиент добавляет товар в корзину, анимация помогает зафиксировать это изменение и понять, что произошло. Анимацию также можно использовать при переходе от одного экрана к другому.
5. Помогает усилить индивидуальность бренда. Использование анимации говорит о том, что это современный бренд, который следит за трендами. Качественная анимация вызывает приятные ассоциации с брендом и укрепляет связь между компанией и клиентом.
6. Развлекает. Сущность анимации восходит к тем временам, когда ее использовали в мультфильмах, поэтому ее по-прежнему можно использовать для создания забавных моментов. Привлечь внимание пользователя можно путем добавления необычных элементов.
Анимация — must have для любого современного сайта
Итак, давайте подведем итог. Анимация в интерфейсе помогает пользователям ориентироваться в интерфейсе, упрощает работу с сайтом и направляет его к решению нужной задачи. Она не должна перегружать интерфейс лишней информацией, быть слишком яркой или навязчивой, иначе пользователь будет ее игнорировать.
Чтобы пользователь понял саму анимацию, она должна имитировать движения из физического мира — трение, ускорение и т.д. Тогда она не будет казаться зрителю чем-то странным и незнакомым, а будет выглядеть реалистично и естественно.
Если вы хотите, чтобы интерфейс вашего сайта работал на имидж компании, удобство клиента и конверсии, то вам нужна команда, которая глубоко погружается в проект, проводит аналитику и организует взаимодействие между всеми членами команды.
У нас в Uplab используется именно такой подход — разработке любого сайта задействованы специалисты из разных отделов от аналитиков и проектировщиков до дизайнеров и разработчиков.
Благодарим за прочтение статьи. Успешных вам проектов!
Читайте по теме
Подпишитесь на нашу рассылку
Мы отправляем полезные материалы, которые помогут вам в работе
Другие статьи
Новые тренды в digital: на что обратить внимание в 2022 году
20 августа 2020
30 мин.
644748
Как создавать и использовать лендинги: разбор с примерами
26 декабря 2020
5 минут
7001
Команда Uplab: как мы создаем дизайн сайта
Услуги
Сайты и сервисы
Создаем удобные и эффективные сайты, которые нравятся пользователям и хорошо продвигаются в поисковых системах.
Дизайн
Сервисный дизайн на основе аналитики, метрик и пользовательского опыта — продуктовый подход для создания привлекательных и эффективных решений.
Аналитика
Изучаем бизнес клиента и его конкурентов, подбираем инструменты и способы продвижения.
SEO-продвижение
Увеличиваем органический трафик на сайте и снижаем затраты на привлечение клиентов.
Анимация на сайте. «За» и «против»
— А вы бывали в бутиках Chopard?
— Ага. Если пускали.
— И?
— И смотрел.
— И всё?
— Всё. Второй что ли раз идти смотреть?
Анимация на сайте. Одни — категорически против неё, другие столь же категорически — за. А третьи как всегда — правы. И эти третьи вряд ли станут сегодня создавать флэш-сайт, если собираются что-то продавать или рассчитывают, что посетитель вернётся к ним второй-пятый-сорок шестой раз. Третьи не станут размещать на сайте флэш-элементы или веб-анимацию посредством javascript для того, чтобы только «развлекать». Всё это было хорошо, когда интернет был сам развлечением. Сегодня он — место работы, общения, покупок, учёбы, путешествий. Развлечения тоже, конечно, но для весьма специфической аудитории, на которую рассчитывать, если вы не владелец игрового портала или пионерской тусовки, неразумно.
Пользование интернетом и сайтами для разумной, огромной и — самое главное — платёжеспособной аудитории строится на трёх главных принципах:
- красота сайта, привлекательность равны удобству и пользе/выгоде: предложите покупателям накопительную (с каждого заказа) скидку, не сгорающую и действующую всегда, вкупе с другими и без них, — и ваш магазин в момент станет фантастически прекрасен без малейшего намёка на анимацию;
- красота сайта — это его максимальная понятность, то есть возможность для посетителя действовать по знакомому шаблону, причём — в самом простом его варианте: этот эффект связан с тем, что интернет стал обыденностью и ничего принципиально нового он уже не предлагает, потому мы ищем простого и выгодного, а на красоту можем посмотреть — один раз, не более;
- «красота» должна работать — подсказывать, направлять, предлагать (ненавязчиво), объяснять, иначе она, как прекрасная дама, которая страстно желает выйти замуж, побуждает к одному — бежать, бежать, бежать!
Вот на этих трёх принципах и строятся самые эффективные и любимые народом сайты. В рамках рассматриваемого вопроса нам интересен третий, на котором и остановимся подробнее.
Анимация — «не роскошь, а средство передвижения»
Р. Наборс, дизайнер и художник, в своей работе Animation And The Future Of UX, вышедшей в 2014 году, исследовал и обобщил все основные случаи пользы и привлекательности веб-анимации для современного посетителя сайтов. Рассмотрим вкратце основные из них.
Веб-анимация помогает формировать причинно-следственные связи и улавливать ход изменений на сайте
Названный в заголовке фактор относится скорее к психологическим, потому часто недооценивается разработчиками или владельцами веб-ресурсов. Однако для пользователя он крайне важен, пусть и на подсознательном уровне. Примерами такой причинно-следственной анимации могут служить анимированные кнопки, которые «нажимаются» по клику, кнопки, активирующиеся после необходимых действий и неактивные, если не все действия выполнены (например, при покупке, регистрации и т. д.) — пользователю значительно проще общаться с сайтом, который сразу «указывает» на ошибки, а не заставляет их искать или по 8 раз вводить информацию.
Просто необходимая, с точки зрения покупателя, анимация — значительное увеличение картинки при наведении на неё или щелчку: такая функция сайта позволяет без лишних телодвижений оценить товар «на первый взгляд» и понять, следует ли переходить на его страничку. Как многих покупателей лишились владельцы «заводов и пароходов», не позволив посетителям посмотреть товар предварительно!
Другой пример малой, но нужной анимации — увеличение в размерах или другое анимирование пункта меню, в котором находится пользователь. Огромный респект тем сайтостроителям, которые вверху страницы показывают весь путь с главной до текущей страницы, но и анимация — тоже хороший ориентир.
Просто необходима анимация (но случается она крайне редко!) при прокладывании маршрутов. На сайте одной из частных московских стоматологических клиник, которая, как водится, размещается в «специально разысканном почти недоступном месте», анимировали маршрут от ближайшей станции метро и автобусной остановки и даже «провели» потенциального посетителя по четырём этажам здания до дверей эскулапов. Что вы думаете? Потенциальный посетитель дошёл, стал реальным и увеличился в числе примерно на треть!
Анимация как средство компактного отображения контента
Анимация помогает экономить пространство страницы, в то же время отображая максимум информации, способной заинтересовать посетителя. Такую функцию выполняют табберы — блоки с автоматическим переключением вкладок, блоки с внутренней прокруткой. С их помощью можно привлечь внимание к материалам сайта, акциям, конкурсам, изменениям в обслуживании и проч., да и просто сообщить о существующей информации, причём с гарантией, что посетитель заметит.
Мы рассмотрели лишь несколько случаев применения анимации на сайте. Но они показательны: анимация уместна лишь тогда, когда она продиктована необходимостью — большим удобством, повышением информативности, отзывчивости сайта. Простое «развлекалово» сегодня не только не работает (если сам сайт не развлекательный), но и вредит, понижая доверие к нему, раздражая ненужными спецэффектами, которых на нём никто не ищет и видеть не желает.
Возможен ли хороший сайт без анимации? Безусловно! И секреты его настолько банальны, что стыдно повторять: интересное и выгодное предложение, информативность, простота и многоступенчатая фильтрация поиска, быстрота работы, разнообразие связи с администрацией, менеджерами. Всё это исключительно привлекательно! Без намёка на анимацию.
Вообще-то, анимация на сайте — это хорошо. Даже в 2002 году на сайте башкирской федерации настольного тенниса уже была анимированная бегущая строка — смотрите сами:
Шутки шутками, но маленькие приятные анимации делают сайт живее и помогают показать всякое, а какие-нибудь рекламные страницы без анимации вообще представить тяжело. Вам сейчас точно такая пришла в голову: вы мотаете вверх-вниз, а что-то крутится, вертится и схлопывается с красивым фоном. Вот это как раз оно.
Но иногда анимация делает только хуже. Смотрите, когда это происходит.
Дисклеймер: ради этой статьи нам пришлось отключить адблок. Не повторяйте этого дома.
С анимациями сайт медленно грузится
Ну логично же, да?
Первое, что приходит на ум — анимации по-настоящему тяжёлые. Например, какой-нибудь видеофон — это просто много-много склеенных друг с другом фотографий. Такое не может весить мало (вспомните свой айфончик, в котором постоянно кончается место из-за снятых сториз). С CSS-анимациями или SVG-анимациями всё получше, но тем не менее — если для загрузки одной небольшой анимашки вам нужна целая огромная библиотека, подумайте дважды.
❌ Плохой пример: использование анимированных прелоадеров или экранов загрузки с тяжёлыми анимациями. Или если весь ваш сайт — сплошная анимация. Лучше так не делать, кроме случаев, когда вы какое-нибудь креативное агентство, а ваш сайт номинируется на iF Design Awards. Лучше…
✔️ найдите или запрограммируйте лёгкие прелоадеры, которые не замедляют загрузку страницы, а пользователь с ними всё равно понимает, что происходит.
Анимация мешает смотреть и читать
Работаете, никого не трогаете, а тут ррраз — выплыла реклама лучших ботинок в вашем городе, да ещё и с видео и летающими курицами. Здесь хоть анимируй, хоть не анимируй, пользователь не доберётся до контента и уйдёт.
❌ Плохо: на сайте есть анимация всплывающих окон, рекламных баннеров или фоновых видео, которые привлекают внимание пользователя, отвлекая его от основного контента сайта.
✔️ Хорошо: умеренная анимация отдельных важных элементов, например, кнопок call-to-action (CTA), которые привлекают внимание, но не отвлекают пользователя от основного контента.
Анимация всё усложняет
Если всё просто без причины трясётся, мельтешит и переезжает с одного места на другое, то и пользователю ничего не мешает уйти с сайта просто так. Крестик на вкладке-то не двигается 
❌ Плохо: анимация кнопок, меню или других интерактивных элементов, которая мешает понять, что происходит на экране или какой элемент активен в данный момент.
✔️ Хорошо: использование плавных анимаций для интерактивных элементов, таких как кнопки или меню, которые делают интерфейс проще и понятнее.
Излишняя анимация
❌ Плохо: использование слишком много анимаций, не связанных с тем, что написано на странице. Это может привести к перегрузке визуальной информации и усложнить восприятие контента. Вот смотрите:
✔️ Хорошо: использование анимации только там, где это улучшает UX и помогает пользователю. Например, плавные переходы между разделами сайта или акцентирование ключевых элементов.
Анимация вызывает дискомфорт
❌ Плохо: анимация с быстрыми или резкими движениями, которые могут вызывать у пользователей головокружение, укачивание или дискомфорт. Помните, была история про серию «Покемонов», которую запретили из-за риска эпилепсии? Мы не будем её показывать, но поверьте на слово.
Вызывать дискомфорт могут разные анимации. Чаще всего они характеризуются быстрыми, резкими движениями или мигающими элементами. Это может быть, например, фоновое видео или анимация на сайте с быстрыми, резкими сменами кадров или мигающими объектами. Это может вызвать головокружение, укачивание или дискомфорт у пользователей, особенно у тех, кто подвержен проблемам со зрением, мигрени или эпилепсии.
Чтобы не делать такие анимации, соблюдайте правила:
✔️ Хорошо:
- Используйте плавные, медленные анимации без переходов.
- Избегайте мигающих или быстро движущихся элементов, которые могут вызвать дискомфорт.
- Разрешите отключать анимацию или предоставьте альтернативный способ представления информации.
Анимация мешает доступности сайта
Доступность — это важно. Сайты (да и любые цифровые сервисы) должны быть доступны всем пользователям, и мы можем этому или помочь, или помешать с неподходящими анимациями.
❌ Плохо: использование анимации для обозначения важных элементов, но без альтернативного способа их восприятия для пользователей с ограниченными возможностями, например, для людей с нарушениями зрения.
Допустим, на сайте есть важная кнопка call-to-action (CTA), которая анимирована для привлечения внимания пользователей. Если у неё нет описания или контрастного цвета, некоторым пользователям (например, с нарушениями зрения) будет тяжеловато понять, что там вообще происходит. Поэтому нужны альтернативы:
- Использование контрастных цветов для обозначения важных элементов, чтобы пользователи с нарушениями зрения могли легко их различать.
- Добавление текстовых описаний или подписей к анимированным элементам, чтобы читалки экрана могли корректно их обработать и передать информацию пользователям с нарушениями зрения.
- Обеспечение возможности отключения анимаций или предоставление альтернативного способа представления информации для пользователей, которым анимация может вызывать дискомфорт или проблемы с восприятием.
✔️ Хорошо: использование анимации для обозначения важных элементов с альтернативными способами их восприятия для пользователей с ограниченными возможностями, например, сопровождение анимации аудио- или текстовым описанием.
Да что там говорить. Знайте меру — в том числе и в анимациях — и тогда всё будет хорошо.
🐈
Материалы по теме
- 10 библиотек для CSS и JS-анимации — подборка проверенных библиотечек
- 10 видов микроанимаций — подборка микроанимаций с CodePen
- Зачем нужны анимации в вебе и как их создавать
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
ТелеграмПодкастБесплатные учебники
#Мнения
- 12 май 2022
-
0
Спроси эксперта: что нельзя анимировать на сайте?
Разработчик Дмитрий Уткин о главных правилах анимации в интерфейсах: не навреди и не утоми.
Иллюстрация: Dana Moskvina / Skillbox Media
Всюду ищет великую красоту, работает над разумностью потребления.
Вопрос читателя
Какие элементы на сайте не стоит анимировать?
Алексей,
Белград
На этот вопрос ответил Дмитрий Уткин.
Технолог в SuperJob.
Получает от дизайнеров единицу смысла, а потом воплощает её как им надо, без переноса ошибок из макета. Кунг-фу постиг в Студии Лебедева и отточил в «Афиша Daily».
Консультирует и читает лекции.
Анимация тратит время пользователя, но привлекает его внимание. Она как повышение тона в разговоре. Общее правило такое: там, где нужно сделать акцент для пояснения или метафоры, продемонстрировать связи или отношения, анимировать можно. В остальных случаях — противопоказано.
- Не анимируй элементы, если они на проблемном макете.
«Скучный блок, анимация сделает его повеселее» — нет, так делать не надо. Сначала сверстай, пожалуйста, нормальный макет.
Постоянно вижу надоедливые фейдины на лендингах — это плохо. И кодеры реализуют идею дизайнера не всегда качественно: бывает, что видишь полупустой фон, и только через три четверти экрана появляется текст. А я мог бы уже прочитать пару слов!
- Не анимируй элементы, если они часто появляются или выглядят навязчиво.
Когда постоянно переключаешься между вкладками или листаешь ленту, никакой анимации переключения и появления постов видеть не захочешь. «Мне тут коробки носить надо, а вы мультики показываете!» — вот реакция на навязчивую анимацию. Анимация — это фейерверк, и запуск салюта каждый день наскучит практически сразу.
- Анимируй, если между изменениями элемента есть связь или пространственное отношение.
«Сюда сворачивается окошко, отсюда же раскрывается» — это отношение. Значит, можно анимировать. Если не будет навязчивым.
Ещё пример: если потянуть вбок письмо в приложении Gmail или чат в Telegram, появятся скрытые кнопки. Анимация покажет, будто чат или письмо сдвинулись, а под ними оказались кнопки.
Хорошо бы анимировать, как добавляется дополнительное значение на диаграмме. Но как только данные поменялись, анимацию надо убрать. Вредно показывать таким образом связь или «преемственность».
- Анимируй, если состояние интерактивного элемента меняется.
Пример — кнопка плавно меняет цвет при ховерении. Или «перетаскиваемая» карточка отбрасывает другую тень и слегка подкручивается — изменения состояния помогают понять, что что-то произошло. Анимируй, если это не будет навязчивым.
Разработчикам
На интерактивные элементы по умолчанию пишите: transition: all .1s ease-in;.
- Анимируй, если элемент может развлечь пользователя динамикой.
Ради шоу можно анимировать появление элементов. Но осторожно: заранее подумай, кто и на чём будет этот интерфейс или страницу показывать и смотреть. Анимировать мелкие элементы для презентации с телефона гендиректору в лифте расточительно и неразумно.
Анимировать можно всё, если это не будет навязчивым.
- Не делай анимацию разнонаправленной.
В лекции «Интерфейсные анимации» Илья Бирман отлично прояснил, что важны синхронность и схожесть анимаций. Несогласованные анимации и одновременные движения элементов в разные стороны моментально утомляют и не приносят никакой пользы. Будто двое людей говорят на повышенных тонах одновременно — в итоге никто никого не в состоянии расслышать и понять.
- И никогда не делай анимацию навязчивой.
Например, эффект сворачивания окна «Джинн» в iOS долгий, сложный и потому крайне навязчивый. Или строка поиска по iPhone (если потянуть на экране с иконками приложений), которая появляется сверху вниз, а в три раза медленнее снизу вверх выдвигается клавиатура — это некрасиво.
Научитесь: Профессия Motion-дизайнер
Узнать больше
Большинство бизнесменов переводят свой бизнес из оффлайна в интернет и делают сайты для повышения продаж, удовлетворения потребностей клиентов, повышения прибыли. Однако, некоторые предприниматели не разбираются в том, какие веб-студии и дизайнеры хорошо делают свою работу, и обращаются к тем, кто совершает ошибки. Другие долгое время не обновляют свои ресурсы, и дизайн сайта становится неактуален и не учитывает современные потребности пользователей. В этой статье мы поговорим о том, какие ошибки совершают дизайнеры и как их можно предотвратить.
Ошибка 1. Устаревшие эффекты
Первое, что сразу бросается пользователю в глаза — устаревший дизайн сайта. Признаки могут быть различными — от вышедших из моды теней и эффектов придания объема на элементах до фиксированной ширины контентной части.
Данный пример иллюстрирует нам сайт из 2000-х годов. Узкая контентная часть, несогласованность шрифтов и цветов на сайте, обилие мелких элементов — раньше технологии не позволяли сделать дизайн сайта эстетически привлекательным и в то же время удобным для пользователя. Сейчас же появляется множество технологий, трендов, которые позволяют сделать сайт красивым и удобным одновременно. Например, основной тренд в дизайне сайта сегодня — использование двухцветного градиента, плоский дизайн, крупная типографика и изображения и прочее.
Такие направления дают волю фантазии дизайнеру и позволяют создавать современные и оригинальные решения.
Решение проблемы
Сделать редизайн сайта у профессионалов. О том, как сделать редизайн и не потерять клиентов мы писали в этой статье.
Ошибка 2. Отсутствие адаптивности
Еще одна ошибка связана с несоответствием сайта современным технологиям. Речь идет об адаптации ресурса под мобильные устройства. На сегодняшний день пользователи все чаще заходят на сайты со смартфонов и планшетов, поэтому пренебрегать адаптивной версией сайта не стоит. Однако, некоторые разработчики не беспокоятся об этом. Вот как выглядит декстопная версия интернет-магазина одежды:
А вот его мобильная версия:
Как видно из примера, сайт не адаптирован под меньшие размеры экрана и пользователю смартфона неудобно находится на ресурсе и совершать целевые действия. Это приводит к снижению уровня конверсии и недовольству клиентов в целом.
Решение проблемы
Привести сайт к адаптивному виду — разработать макеты для меньших разрешений под смартфоны и планшеты. Подробнее читайте в этой статье.
Ошибка 3. Некачественный контент
Что еще отталкивает пользователей и понижает уровень доверия к сайту? Как правило, присутствие на сайте некачественного контента значительно уменьшает конверсию. Что подразумевается под «некачественным» контентом:
- изображения низкого разрешения;
- заезженные стоковые фото по типу улыбающихся девушек, смеющихся семей, пожимающих руки бизнес-партнеров;
- полотна текста;
- текст с ошибками и прочее.
На данном примере видно, что используемые изображения товаров плохого качества: размытые, обрезанные. К тому же, в названиях товаров присутствует несогласованность — на одной карточке название берета написано в кавычках, а на следующей нет:
Несогласованность в текстах, плохие изображения создают у пользователя ощущение незаконченности, снижают уровень доверия к компании, что в свою очередь приводит к ухудшению конверсии сайта.
Решение проблемы
Позаботиться о качестве контента. Если у вас на сайте присутствуют изображения низкого разрешения, лучше заменить их на хорошие стоковые фото. Самый лучший вариант — нанять профессионального фотографа и сделать уникальные фотографии. Таким образом можно выделиться среди конкурентов и улучшить дизайн. Что касается текстов, важно подобрать оптимальную длину для страницы, использовать списки, таблицы, иллюстрации для лучшего восприятия пользователями.
Ошибка 4. Неудачная цветовая гамма
Кроме того, что нужно следить за контентом, также важна выбранная цветовая гамма сайта. Бывает так, что контент и фон сливаются в одну пеструю картинку, и даже если используются качественные изображения, они сливаются с множеством ярких и несогласованных друг с другом элементов. Например:
На сайте используются яркие оттенки, цветные картинки на фоне и слайдере, яркие заголовки и неподходящие акценты в виде темно-зеленого меню. Взгляд пользователя потеряется при виде этой пестроты и с большой вероятностью посетитель просто уйдет с сайта. Цель разработчика — привести клиента к целевому действию и удовлетворить его потребность. Однако, фон и яркие элементы просто отвлекают внимание и не дают сосредоточиться на основной задаче пользователя — найти и купить нужный товар.
Решение проблемы
Правильно подобрать цветовую гамму, не использовать больше 2-3 цветов. Так можно создать стильное решение, расставить нужные акценты (как правило, кнопки и формы делают яркими и более заметными для привлечения внимания). Для проверки сочетания цветов между собой можно использовать различные цветовые круги, например, круг Иттена.
Ошибка 5. Нет акцентов
Иногда сайт выглядит не как пестрая ткань с различными яркими цветами, а однотонным полотном, где взгляду не за что зацепиться. Как в этом примере:
Главная страница представляет собой каталог с перечислением всех разделов сайта. Нет привлечения внимания к целевым действиям — покупке, подписке и прочих действий пользователя для повышения конверсии сайта. Также нет каких-то ярких элементов, которые бы запомнились клиенту.
Решение проблемы
Такая однородная структура тоже требует значительной переработки — выбора цветовой гаммы, расставления акцентов с точки зрения композиции и цвета, добавления изображений, чтобы заинтересовать клиента продукцией и привлечь внимание к основным предложениям компании.
Ошибка 6. Нет четкой композиции
Некоторые сайты представляют свою продукцию с помощью набора однообразных блоков, не разбивая их по категориям. Такой подход мешает восприятию пользователя: взгляд перескакивает с одного элемента на другой и не успевает считывать информацию. В результате клиент не может найти нужное предложение, хотя информация полностью представлена на странице. Это также связано с 5 ошибкой, когда дизайнер не расставил акценты на сайте.
Решение проблемы
Разбить предложения по категориям и расставить акценты можно не только с помощью цвета, но и с помощью правильного расположения элементов. Также нужно добавлять белого пространства, чтобы отделять блоки друг от друга и выделять важные элементы. Подробнее о пространстве мы писали здесь.
Ошибка 7. Отсутствие хорошей навигации
Шестая ошибка тесно связана с отсутствием на сайте хорошо продуманной навигации. Пользователь должен четко понимать, где он находится и как ему найти нужную информацию. В противном случае он просто уйдет к конкурентам, где не нужно блуждать по страницам сайта в поиске нужного товара. На примере показан сайт с несколькими разделами, в которых элементы не согласованы друг с другом, нет элементов для призыва к действию, изображения продукции не ведут к карточкам товара. Все это затрудняет работу пользователя с сайтом, непонятно, как осуществить заказ и найти нужный товар.
Решение проблемы
Определить насколько навигация отвечает требованиям пользователя можно по следующим параметрам:
- Посмотреть структуру сайта. Логично ли расположена продукция, присутствуют ли лишние разделы, которые можно объединить с другими.
- Продумать расположение основных блоков на странице. Легко ли пользователю отличать одно от другого, заметны ли основные предложения.
- Продумать расположение целевых действий на сайте. Проверить, привлекают ли они внимание пользователей, посмотреть, как можно улучшить.
- Проверить наличие основных элементов навигации: хорошо сформированного меню, подвала сайта, поля поиска, иконок для основных действий (вход в личный кабинет, избранное и прочее).
Более подробно о навигации на сайте можно узнать в этой статье.
Ошибка 8. Креативность, а не юзабилити
Некоторые дизайнеры настолько увлекаются творчеством, что совершенно забывают об удобстве пользования ресурсом. Например, дизайнеры создали страницу с такой навигацией по сайту:
С точки зрения креативности и творческой составляющей данное решение — интересное, запоминающееся. Однако, большинству пользователей важно не просто зайти на эстетически привлекательный и оригинальный ресурс, но и быстро найти нужную информацию, сделать покупку. Такие приемы отвлекают клиентов от главных целевых действий и, соответственно, снижают уровень конверсии сайта.
Решение проблемы
Важно соблюдать баланс между креативностью и юзабилити. Быть оригинальным, отличаться от конкурентов, и в то же время думать об удобстве для клиентов, беспокоиться о быстроте и легкости взаимодействия пользователя и интерфейса. Более подробно по этой теме мы писали здесь.
Ошибка 9. Много анимации
Анимация в веб-дизайне — инструмент, который способен придать ресурсу оригинальность, привлечь внимание к нужным элементам. Однако, с анимацией и интерактивностью нужно быть осторожным. Иногда дизайнеры увлекаются и добавляют слишком много динамических эффектов, которые отвлекают пользователей от целевых действий и попросту раздражают. Много анимации уместно только в каких-либо интерактивных проектах, цель которых не увеличение конверсии за счет целевых действий, а презентация бренда:
Решение проблемы
Лучше ограничиться несколькими динамическими эффектами, которые будут выглядеть как дополнительный инструмент привлечения внимания.
Ошибка 10. Нет связи с фирменным стилем
Фирменный стиль должен прослеживаться не только в дизайне футболок и буклетов. Сайт — визитная карточка компании в интернете и пользователь должен легко идентифицировать бренд. Если же фирменный стиль в оффлайне отличается от представления компании в сети, у пользователя снижается уровень доверия к компании, бренд не будет узнаваем в интернете. Например, компания имеет фирменные цвета: черный и желтый, однако, на сайте не используется ни цветовая гамма, ни другие элементы айдентики:
Решение проблемы
Сделать сайт соответствующим фирменному стилю компании. Использовать цветовую гамму, фирменные шрифты, стилизованные изображения. Таким образом можно повысить узнаваемость и запоминаемость бренда, уровень доверия пользователей к компании. Больше об использовании элементов айдентики в веб-дизайне можно прочитать здесь.
Ошибка 11. Неудачная типографика
Если дизайн сайта кажется незаконченным, есть проблемы с восприятием контента, скорее всего проблема в типографике. Иногда дизайнеру достаточно поменять шрифты, чтобы дизайн заиграл новыми красками и выглядел стильно. Лучше не использовать много шрифтов на странице, чтобы не возникало ощущения несогласованности между элементами, как на этом примере:
Решение проблемы
Уделить внимание типографике на сайте. Использовать 2-3 шрифта на сайте или одно семейство с различными начертаниями. Настроить интервалы: кернинг и интерлиньяж. Подобрать цвет текста под цветовую гамму сайта. Больше об использовании типографике на сайте можно прочитать в этой статье.
Посетитель сайта формирует свое представление о компании в первые же секунды. Первое впечатление значительно влияет на его дальнейшие действия: уйдет ли он с сайта к конкурентам или продолжит искать нужный товар. Добиться положительного впечатления в значительной степени можно с помощью дизайна, так как большинство пользователей — визуалы. По результатам исследования Instant shift 94% клиентов не доверяют компании, если сталкиваются с неудачным дизайном.
Чтобы этого не случилось и сайт отвечал всем требованиям пользователей, предпринимателям следует обращаться к профессиональным дизайнерам, которые не допускают вышеперечисленные ошибки. Студия дизайна IDBI занимается разработкой дизайна сайтов и помогает предпринимателям увеличивать продажи. Мы не совершаем ошибок, стараемся следить за трендами, учитываем юзабилити сайта и в то же время предлагаем креативные решения. Больше работ можно увидеть в разделе «Портфолио».