animation Articles & Videos

  • Skeleton Screens vs. Progress Bars vs. Spinners

    Skeleton screens, progress bars, and spinners all indicate the system is loading content, but they serve different purposes and work best in different contexts.

  • Scroll Fading 101

    Whether scroll fading is more distracting than usable depends on the following factors: its persistence, responsiveness, and how sparingly it is applied to elements on the page. When used right, this design pattern can improve brand perception, optimize page loading, and make content more digestible.

  • Scrolljacking 101

    Altering the normal pace or direction of scrolling can contradict user expectations, control, and freedom. If businesses adopt the pattern, they can minimize usability risks by weighing it against functional value, cognitive load, and user efficiency.

  • Skeleton Screens 101

    A skeleton screen is used as a placeholder for a loading page. This progress indicator is used for full-page loads and reduces the perceived loading time.

  • UX Animations

    Animations can make user interfaces both easier and nicer to use, but the timing has to be right, as we demonstrate in this video. Many other details also contribute to the quality of animation in the user experience.

  • Mask Interaction Delays with Progress Indicators

    In case of slow response times in a user interface, indicate that the wait time will soon be over by showing an animation. For longer delays use a percent-done indicator.

  • Animated GIFs in Email Are Worse Than Static Emails

    On average, people have a more positive reaction to emails without animated GIFs compared to those with animated GIFs.

  • Executing UX Animations: Duration and Motion Characteristics

    Define a trigger, transformations, duration, and easing of the animation, and be mindful of accessibility issues and annoying the user.

  • The Role of Animation and Motion in UX

    Animation in UX must be unobtrusive, brief, and subtle. Use it for feedback, state-change and navigation metaphors, and to enhance signifiers.

  • Designing Effective Carousels for Websites and Mobile Apps

    Sliding hero images that rotate through a set of promotions, news, or the like on the top of web pages are often annoying to users and are definitely error prone, unless they are designed according to usability guidelines.

  • What Parallax Lacks

    Parallax-scrolling effects add visual interest, but they often create usability issues, such as content that is slow to load or hard to read. Consider if the benefits are worth the cost.

  • Animations Are Distracting!

    Moving UI elements attract attention, which often means distracting users from accomplishing their primary goals. Some types of animations are more distracting than others, and it's important to match how attention grabbing the motion is to the context and user needs.

  • Microinteractions in User Experience

    Microinteractions convey system status, support error prevention, and communicate brand. They are initiated by a trigger, are single-purpose, and can make the experience engaging.

  • Change Blindness in UX: Definition

    Significant changes in a web page can remain unnoticed when they lack strong cues, due to the limitations of human attention.

  • Scroll-Triggered Text Animations Delay Users

    When misused, animations intended to add aesthetic appeal slow down content consumption and get in the user’s way.

  • A Theory of User Delight: Why Usability Is the Foundation for Delightful Experiences

    UI embellishments can only produce surface delight; deep delight can only be achieved in functional, reliable, and usable interfaces.

  • Timing Guidelines for Exposing Hidden Content

    Events triggered via hover or click require distinct timing to avoid accidental activations and ensure that the user feels in control of the interface.

  • Animation for Attention and Comprehension

    Moving elements are a powerful tool to attract users’ attention. When designing an animation consider its goal, its frequency of occurrence, and its mechanics.

  • Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility

    The user's target was at the top of the page in 98-point font. But she failed to find it because the panel auto-rotated instead of staying still.