I take delight in modern interactions at both the macro and microscopic scales, and I have already published a technical demonstration on this subject. Before you return, feel free to take a detour and briefly explore my implementation of a dialogue using microinteractions.
Just this year, I delved deeply into the subject of interaction design and its disciplines in order to enrich the user experience and transform good digital products into great ones. Although this practice has yet to reach many products, rest assured that a vested interest is already forming.
The purpose of this issue is thus to shine a spotlight on great minds and sources of inspiration, but also to foster an understanding of, and excitement for, the sustainable gains that this discipline might deliver to designers, engineers, product and, ultimately, end users.
Rauno Freiberg's "Spatial Tooltip" illustrates the intricacies of simple interactions in an isolated context, such as a tooltip. Including a deliberate detail like this in frequent interactions elevates the quality and emotional connection to the product through craftsmanship.
Great Minds & Sources
My experience of the discipline has been shaped by the work of influential design engineers across the field who share their knowledge with the wider community through posts, newsletters and courses. I’d now like to share with you my favorite engineers in this regard.
Curiously, all of these excellent engineers honed their skills at the same company, which some of you may already know thanks to its prevalence in the web application market. It is jokingly called 'the triangle company', but you may know it as Vercel.
Vercel’s dedication to its craft is both enviable and admirable, embraced by its engineers across all areas. They shape this craft within and beyond their organisation, enabling engineers and projects to flourish through sponsorships and occasional job offerings.
Rauno Freiberg
Paco Coursey
You might have noticed that two of these design engineers now work at Linear. I first came across Linear when their new website was launched and took the web design community by storm. Their excellence in craft undoubtedly ushered in a new design aesthetic that remains prevalent to this day.
Linear, like Vercel, promotes excellence in both design and engineering across its board and you’ll notice this early on when using their products. Interactions are delightful and thoughtfully managed throughout the application but never outshine the purpose of the product.
Both companies promote design and interaction, provide us with methods to strive for excellence in these disciplines. They produce captivating work for end users and employees alike, demonstrating their dedication to continuing to use and create great products.
From Great Animations, Emil Kowalski showcases the fluidity of user interfaces through transforms and presence animation. This creates the perception of continuity and increases relevance for on-screen elements throughout the user journey.
Intricacies
The essence of interaction design lies in its intricacy, which knows no bounds. It is up to designers and engineers to create meaningful interactions that do not distract the user. Feedback from interactions at every scale should enhance the product, rather than outshining it.
Repetitive, excessive or unfitting feedback based on interactions can quickly detract from an otherwise meaningful feature. Interactions should be unexpected in the sense of being thoughtful considerations for those experiencing them, rather than being out of place.
Many factors must align to provide great interactions that meet these criteria. Companies that excel in this area often employ guidelines to aid in their purposeful implementation. Like any other discipline, interaction requires disciplined and considered use to be purposeful.
Add motion purposefully, supporting the experience without overshadowing it. Don’t add motion for the sake of adding motion. Gratuitous or excessive animation can distract people and may make them feel disconnected or physically uncomfortable.
Motion | Apple Developer Documentation
On the other hand, these intricacies present a breadth of design considerations akin to the Sisyphean Struggle I recently wrote about. As with design, something good can be great if it serves its purpose. It is equally important to systemize components and patterns to reduce effort and enforce uniformity.
Regarding systemization, incorporating interactions into design systems enhances existing components and patterns consistently across the product, furthering the overall objective of dedicating part of the process to the excellence of the craft.
Like many other efforts, the efforts of this discipline must be carefully delegated so as not to lose focus on the respective team's overarching goals. Interactions are essential; the intricacies of their feedback are ephemeral.
In-nav link bookmarking pic.twitter.com/Kz54Zd3mjJ
— Paco (@pacocoursey) March 2, 2024
The sidebar of Paco Coursey gains a secondary layer of interaction through the conditional animation of presence. This layer provides a nested features capability, offering users an additional path of consideration when interacting with the product.
Rationale
Intentional interactions that transcend surface-level specifications demand acute attention to detail and a commitment to the craft. The ability to intricately communicate the user’s desired outcome extends beyond the systematization and application of common feedback patterns.
Through this dedication, designers and engineers can acquire interdisciplinary knowledge, which promotes further communication and collaboration within and across teams. It is beneficial for all parties involved to participate in the interdisciplinary discourse that this field requires.
This participation enables creatives to deliver quality software, from design to engineering, based on a collaborative understanding that establishes common expectations for fidelity. This interdisciplinary effort increases awareness and readiness to challenge the status quo.