Основные принципы эффективного использования анимации в UX сайта. Часть 1: Восторг и обратная связь

Основные принципы эффективного использования анимации в UX сайта. Часть 1: Восторг и обратная связь

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

Восторг

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

Поддержание обратной связи

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

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

Продолжение

Добавить комментарий

Нам важно знать ваше мнение. Оставьте свой отзыв или ответ

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent

Комментариев 0