Long gone are the days of Flash animation, but motion and movement are still very much a part of website design. Attention spans are shrinking, and motion can help users stay on task. Plus, who doesn’t love a happy little GIF?
With clever little movement additions, you can control the pacing, direction, and emotion of a person’s online experience—even on a template website (but more on that later).
Here’s what lawyers in 2023 need to know about designing websites with movement.
Examples of movement on a website
- Video Backgrounds: A video loops as the background of a website section, adding dynamic visual appeal.
- Hover Effects: Elements—like buttons or images—change appearance when users hover over them (desktop only).
- Scrolling Animations: Content elements animate into view as a user scrolls down the page below the fold.
- Animated Icons: Icons or illustrations move or change when interacted with, making the content more engaging.
- Loading Animations: Creative loading animations entertain users while content loads. To be used sparingly when big data needs a moment to load.
- Parallax Scrolling: Background and foreground elements move at different speeds to create a sense of depth.
- Gallery Thumbnails: Thumbnail images expand or zoom in when clicked for a closer view.
- Navigation Menus: Menu transitions, like dropdowns or sliding sidebars, are animated for a more interesting user experience.
Movement draws the eye and creates emphasis
Psychology 101: Human eyes are attracted by what moves rather than what is still. This is a simple biological impulse rooted in our ancestors’ experiences on the savanna.
Although today’s humans face a higher risk of encountering an Elon Musk GIF in the wild than a saber-toothed tiger, we’re still wired to scan for all manner of threats using movement as our cue.
Visual cues can instinctively capture a viewer’s attention and direct it where you want it to go.
In this way, motion can be the guiding force that emphasizes critical elements on your legal website. Whether it’s a subtle hover effect, a scrolling animation, or a captivating video header, motion is your digital spotlight. It ensures that your audience doesn’t just glance at your website but engages with the key information you want to convey.
Not only do animated elements drive visitor action by creating emphasis on the most vital parts of your page, but motion can help your site stand out from competitor sites online.
Movement taps into emotions
Motion is more than just a visual gimmick. It’s a powerful tool for eliciting emotions (e-motions, if you like).
When used effectively, movement on a website can evoke feelings of intrigue, excitement, or trust.
For instance, a slow, smooth animation can convey professionalism and calm, while a sudden, vibrant movement can spark excitement. You have to know your target audience really well to understand what kind of animation is appropriate for the situation. A sharp, off-kilter movement could be stressful for a car accident survivor but exciting for a corporate executive.
By tapping into emotions, you can foster a deeper connection between a visitor and your brand. Motions can help you express the human side of your legal practice. Furthermore, an emotional experience is a memorable one, setting your site apart from boring, uptight competitors.
Movement can clarify communication
Motion can help eliminate ambiguity, confirming user actions and simplifying complex information without the need for lengthy text-based explanations.
Here’s an example. Let’s say a person types a query into your website’s Contact form.
Upon clicking the “Submit” button, you could use a subtle animation to give immediate visual feedback and reduce uncertainty. The Submit button could enlarge noticeably, flip over to reveal another side that says “Thanks!”, or a shooting star could fly across the screen with a banner that says “We got your message!”
Another example is a loading spinner or progress bar to reassure a user that their request is being processed. Kayak used this technique to improve their user experience.
Motion is a simple, silent way to streamline communication, ensuring that visitors feel confident and informed when navigating your site without crowding the page full of text.
Movement can introduce uniqueness in an otherwise basic site
This one’s a good one, so 1-2-3, eyes on me:
Movement can make a template site feel like a custom site.
Templates are a smart choice when designing a website. Building your site from scratch is time-consuming, unpredictable, and almost definitely unsustainable over the long term when you have to manage changes while managing a law firm.
The biggest risk with using a template is that your site could feel similar to another site with a related template. Using custom motions with a template site is truly the best of both worlds. You get the benefit of the time-tested layouts and bulletproof code along with the personalization of animations and movement that speak directly to your target market in your brand’s personality.
Final words
You don’t need fancy animations or a million-dollar video campaign to benefit from the power of movement on your website.
Even simple motions can help your site stand out from the crowd, guiding users, sparking emotion, and giving a custom feel to a template website.
So, what’s your next move? Check out OneFirst designs or book a quick consultation with one of our designers.
