Платформа

Анимация пользовательского интерфейса: 5 ключевых советов

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

1. Анимация. Начало

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

2. Анимация – не панацея

Превратить сайт или приложение в бесконечный анимированный ролик – это, конечно, очень заманчиво, но на деле недопустимо. Безразборное добавление анимации в пользовательский интерфейс будет крахом UI- и UX-принципов по отношению к вашему ресурсу. Использовать анимацию следует лишь там, где это действительно уместно, например, при переходе на другую страницу, ожидании или для подсказок пользователю.

3. Скорость анимации

Еще один важный момент – скорость анимации. Если ее воспроизведение занимает меньше одной секунды, за анимацией становится сложно уследить. Если же больше 5-6 секунд – она однозначно будет восприниматься пользователем как слишком затянутая.

4. Анимация, сокращающая ожидание

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

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

5. Микроанимация

Кнопки, меняющие цвет при прокрутке или нажатии, движущиеся при наведении курсора блоки и многие другие элементы микроанимации отлично акцентируют внимание клиента на нужном контенте и мотивируют к ожидаемому действию. Не пренебрегайте микроанимацией, она реально работает.

Не забудьте сохранить эти рекомендации, когда-нибудь пригодятся. А если хотите заказать разработку сайта «под ключ», звоните нам по номеру +38-063-454-71-54 или пишите на hello@greatpro.com.ua. Организуем.

 

Похожие материалы:

10 заповедей типографики

Что нужно знать о геймификации сайта?

Форма входа и регистрации на сайте: советы веб-дизайнеру

Страница 404: яркие идеи по оформлению

6 признаков того, что ваш сайт устарел

4 ошибки, которые с головой выдают слабого веб-дизайнера

Поделиться
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (2 оценок, среднее: 5,00 из 5)
Загрузка...