15 способов развлечь пользователя, пока он ждет загрузки сайта

Вероника Елкина
Расскажите друзьям
Вероника Елкина

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

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

gif

Автор: Алексей Цветков

Основная фишка: загадочные дымовые эффекты, которые притягивают внимание.

Чему можно поучиться: в своем варианте анимации можете использовать вращающиеся круги или колонны с эффектом дыма. Лучше выбрать черный фон, чтобы сильнее выделялся объект.

gif

Автор: Ник Бутуришвили

Основная фишка: анимация интуитивно понятным образом показывает процесс производства продукта.

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

pic

Автор: Виталий Силкин

Основная фишка: простая графика и красивый градиент.

Чему можно поучиться: в своей версии анимации вы можете перемещать графические элементы не только по горизонтали, но и по вертикали. Можно добавить свечение или эффект жидкости, чтобы графика выглядела динамичнее. Другими словами, простая анимация выглядит интересно и привлекательно.

pic

Автор: Макито Ниномия

Основная фишка: яркие песочные часы привлекают внимание пользователя, а надпись «Благодарим за ожидание» создает с ним эмоциональную связь.

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

pic

Автор: Лилиан Тедон

Основная фишка: сочетание разных форм, вращения и прыжков.

Чему можно поучиться: можете попробовать другие формы и добавить к ним больше динамических эффектов. Пусть объекты меняют цвет и тень.

pic

Автор: Виталий Силкин

Основная фишка: интересные эффекты жидкости и цвета. Сочетание черного и синего цвета дает эффект свечения. Анимация завораживает и заставляет пользователя ждать дольше.

Чему можно поучиться: обратите внимание на эффекты жидкости, таяния и свечения. Они выглядят необычно и привлекают внимание.

gif

Автор: UI8

Основная фишка: интересные 3D-эффекты и плавное погружение объектов.

Чему можно поучиться: используйте этот простой шаблон погружения для создания гибких анимаций. Интуитивно понятная 3D-технология позволяет имитировать сложные визуальные эффекты.

gif

Автор: Родейто Праст

Основная фишка: милый уникальный стиль. Идеально подходит для рождественского оформления сайтов с контентом для детей и онлайн-магазинов.

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

gif

Автор: Бурхан Кхаважа

Основная фишка: многоэкранность, градиенты, эффекты вращения.

Чему можно поучиться: комбинируйте несколько экранов с эффектами изменения цвета, динамикой и различными формами.

pic

Автор: Нгуен Тран

Основная фишка: контрастные цвета, создающие крутой эффект в стиле научной фантастики.

Чему можно поучиться: используйте похожую цветовую схему и понятную полосу загрузки.

pic

Автор: Алекс Сейлер

Основная фишка: быстрая смена цифр и вращение.

Чему можно поучиться: больше всего во время загрузки пользователи боятся остаться без информации и увидеть перед собой пустой экран. Вращение и смена цифр успокаивают пользователя, они говорят ему, что сайт/приложение быстро обрабатывают информацию.

gif

Автор: Алекс Сейлер

Основная фишка: прямая демонстрация загружаемого контента

Чему можно поучиться: такая анимация загрузки очень информативна. Кроме того, милые и яркие стикеры привлекают внимание. Можно заменить их фотографиями автора.

gif

Автор: Дэнни Перри

Основная фишка: вращение разноцветных полосок.

Чему можно поучиться: можете изменять шаблоны вращения любым способом, чтобы анимация выглядела более впечатляюще.

pic

Автор: Зак Рожшевски

Основная фишка: яркая комбинация разных иконок.

Чему можно поучиться: покажите самые популярные иконки вашего сайта или приложения. Можете использовать различные анимации вращения, цвета и расположение.

gif

Автор: Грег Медериос

Основная фишка: логотип компании/продукта и эффект свечения.

Чему можно поучиться: эта анимация показывает, как создается 3D-логотип компании или продукта. Эффект подсветки захватывает внимание пользователя.

Источник.


Материалы по теме:

Ссылка дня: бесплатный сервис проверки сайта на привлекательность для пользователей

20 полезных сервисов для дизайнеров и веб-разработчиков

Как заставить пользователей читать ваш сайт: 10 советов

Что почитать, если вы хотите ориентироваться в UX


Актуальные материалы — в Telegram-канале @Rusbase

Нашли опечатку? Выделите текст и нажмите Ctrl + Enter


Комментарии

  • Гонзо Секрет
    Гонзо Секрет 01:15, 4.05.2018
    0
    большинство примеров достаточно тривиальны, выводы автора показывают насколько он далек от процесса разработки, но зато всё сплошь интуитивно.
Зарегистрируйтесь, чтобы оставлять комментарии и получить доступ к Pipeline — социальной сети, соединяющей стартапы и инвесторов.
Innovate or Die
13 ноября 2018
Ещё события


Telegram канал @rusbase