You understand what they are saying about taking part in sounds on an internet site: don’t. Autoplaying audio is commonly thought of intrusive and disruptive, which is why fashionable internet practices discourage it. Nonetheless, sound design, when used thoughtfully, can improve the consumer expertise and reinforce a model’s identification. So when Arts Company approached me to revamp their web site with a request to combine audio, I noticed a possibility to create an immersive expertise that complemented their inventive imaginative and prescient.
To make sure the sound expertise was as seamless as doable, I began excited about methods to refine it, corresponding to muting audio when the tab is inactive or when a video is taking part in. That concentrate on element made me marvel: what are another UX enhancements which might be typically missed however might make a big distinction? That query set the inspiration for a broader exploration of how refined refinements in animation and interplay design might enhance the general consumer expertise.
When an Thought is Good on Paper
The consumer got here in with sketches and a powerful imaginative and prescient for the web site, together with a key function: “building traces” overlaid throughout the design.
These traces needed to transfer individually, as if being “pushed” by the transferring cursor. Whereas this appeared nice in idea, it launched a problem: guaranteeing that customers wouldn’t change into pissed off when making an attempt to work together with components positioned behind the traces.
After some testing and looking for methods to maintain the interplay, I noticed a compromise was essential. Utilizing GSAP ScrollTrigger, I made certain that when sections together with buttons and hyperlinks turned seen, the interactive traces can be disabled. In the long run, the interplay remained solely in a couple of locations, however the idea wasn’t well worth the frustration.
Splitting Textual content Like There’s No Tomorrow
One other problem in balancing animation and value was guaranteeing that textual content remained readable and accessible. Splitting textual content has change into a normal impact within the business, however not everybody takes the additional step to forestall points for customers counting on display readers. The most effective answer in my case was to easily revert to the unique textual content as soon as the animation was accomplished. One other answer, for individuals who want the textual content to stay break up, can be utilizing aria-label and aria-hidden.
<h1 aria-label="Howdy world">
<span aria-hidden="true">
<span>H</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>
</span>
<span aria-hidden="true">
<span>W</span>
<span>o</span>
<span>r</span>
<span>l</span>
<span>d</span>
</span>
</h1>This manner the consumer hears solely the content material of the aria-label attribute, not the textual content inside the factor.
Scroll-Primarily based Disorientation
One other essential consideration was scroll-based animations. Whereas they add depth and interactivity, they will additionally create confusion if customers cease mid-scroll and components seem frozen in surprising positions.
To counter this, I used GSAP ScrollTrigger’s snap function. This ensured that when customers stopped scrolling, the web page would snap to the closest part naturally, sustaining a seamless expertise.
Arrays Begin at 5?
Autoplaying sliders could be an efficient approach to sign interactivity, drawing customers into the content material reasonably than letting them assume it’s static. Nonetheless, they will additionally create confusion if not carried out thoughtfully. Whereas integrating the positioning, I noticed that as a result of some slides had been numbered, customers would possibly land on the web page and discover themselves on the fifth slide as an alternative of the primary, disrupting their sense of move.
To handle this, I set sliders to autoplay solely once they entered the viewport, guaranteeing that customers at all times began on the first slide. This not solely maintained consistency but in addition bolstered a structured and intuitive looking expertise. By making autoplay purposeful reasonably than arbitrary, we information customers by the content material with out inflicting pointless distractions.
Transition Confusion
Web page transitions play an important function in sustaining a clean, immersive expertise, but when not dealt with rigorously, they will result in momentary confusion. One problem I encountered was the danger of the transition overlay mixing with the footer, since each had been black in my design. Customers wouldn’t understand a transition in any respect, making navigation really feel disjointed.
To resolve this, I ensured that transition overlays had a distinct distinction by including a special shade of black, stopping any ambiguity when customers navigate between pages. I additionally optimized transition timing, ensuring animations had been quick sufficient to maintain interactions snappy however clean sufficient to keep away from feeling abrupt. This stability created a looking expertise the place customers at all times had a transparent sense of motion and course inside the website.
I Can Really feel a Shift
A standard situation in internet growth that usually will get missed is the cellular resize set off that happens when scrolling, notably when the browser’s handle bar seems or disappears on some gadgets. This resize occasion can disrupt the smoothness of animations, inflicting sudden visible jumps or inconsistencies because the web page shifts.
To sort out this, I made certain that ScrollTrigger wouldn’t refresh or re-trigger its animations unnecessarily when this resize occasion occurred by turning on ignoreMobileResize:
ScrollTrigger.config({
ignoreMobileResize: true
});I additionally ensured that any CSS or JavaScript primarily based on viewport peak wouldn’t be recalculated on a vertical resize on cellular. Right here’s a utility operate I exploit to deal with resize for example:
/**
* Attaches a resize occasion listener to the window and executes a callback when the situations are met.
*
* @param {Perform} callback - The operate to execute when the resize situation is met.
* @param {quantity} [debounceTime=200] - Time in milliseconds to debounce the resize occasion.
*/
operate onResize(callback, debounceTime = 200) {
let oldVh = window.innerHeight;
let oldVw = window.innerWidth;
const isTouchDevice = 'maxTouchPoints' in navigator && navigator.maxTouchPoints > 0;
// Outline the resize handler with debounce to restrict operate execution frequency
const resizeHandler = $.debounce(() => {
const newVh = window.innerHeight;
const newVw = window.innerWidth;
/**
* Situation:
* - If the gadget is contact and the viewport peak has modified considerably (≥ 25%).
* - OR if the viewport width has modified in any respect.
* If both situation is met, execute the callback and replace outdated dimensions.
*/
if ((isTouchDevice && Math.abs(newVh - oldVh) / oldVh >= 0.25) || newVw !== oldVw) {
callback();
oldVh = newVh;
oldVw = newVw;
}
}, debounceTime);
// Connect the resize handler to the window resize occasion
$(window).on('resize', resizeHandler);
}Copy That! Rethinking Contact Hyperlinks
It was the consumer’s request to have a easy contact hyperlink with a “mailto” as an alternative of a full contact web page. Whereas this appeared like an easy method, it shortly turned clear that mailto hyperlinks include usability points. Clicking one robotically opens the default e mail app, which isn’t at all times the one the consumer really needs to make use of. Many individuals depend on webmail providers like Gmail or Outlook of their browser, which means a compelled mail consumer launch can create pointless friction. Worse, if the consumer is on a shared or public pc, the mail app won’t even be configured, resulting in confusion or an error message.
To enhance this expertise, I opted for a extra user-friendly method: mailto hyperlinks would merely copy the e-mail to the clipboard and show a affirmation message.
The Takeaway
This challenge bolstered the significance of balancing creativity with usability. Whereas daring concepts can drive engagement, the most effective experiences come from refining particulars customers could not even discover. Whether or not it’s stopping pointless animations, guaranteeing clean scrolling, or rethinking how customers work together with contact hyperlinks, these small choices make a big impression. In the long run, nice internet design isn’t nearly visuals, it’s about crafting an expertise that feels easy for the consumer.
