.png)
Prisma Motion
overview
Motion is the body language of a product; it creates an active two-way conversation with the end-user. Used deliberately, it communicates and handles everyday user needs that help them complete their goals. Below is a collection of motion components and usage examples that form part of the Splunk design system: Prisma.
Problem statement
Splunk tools for analyzing and managing large amounts of data often feel robotic and unintuitive, lacking the right amount of guidance and interactivity. In addition, user personas ranging from beginners to expert levels may require different amounts of interaction and feedback to achieve their goals more effectively.
With Prima Motion, we set out to determine common patterns in usage and make them accessible for other teams through a component library. Documenting these patterns and best practices empowers designers to solve user problems and elevate the look and feel of our products.
PRISMA components
TRANSITIONS AND LOADING STATES:
The perceived performance of an application impacts user focus; without paying close attention to these areas, we risk user retention. Within the context of a dashboard view, latency is a constant factor. The concept of search transparency revolves around sequentially revealing data, keeping the viewer informed while they interact with the data. The left side shows a user flow in our mobile alerts app. A loading screen for an IoT device; the screen captures the user's interest and inserts delight into a software update.
indicators:
Guiding the user through completing a process requires focus and guidance; these mobile gestures originally designed for Splunk AR app prompt the user to take an action or initiate an authentication flow through scanning a QR code.
ERROR and empty states:
Error and empty states are often overlooked and lack continuity in products. However, meaningful error states can turn these moments around, help guide users towards a solution or soften the impact from an unavoidable system error. The left side is using an illustration to connect with the user, the error state on the right: visualize a sequence within a chart and provides some user feedback and actions.
PRISMA: motion Icons
PROCESS
Step 1: Research
identify usage
Mobile and web usage are bound to different limitations and UX patterns. I began the research process by categorizing usage and terminology. I then identified the high-impact icons that were most commonly used within Prisma before I started animating.
Step 2: DESIGN
COLLECT FEEDBACK
Once I have defined the usage and meaning behind each icon, I applied them to different product scenarios. We can compare and determine the appropriate duration and easing curves that can be scaled across other icons and further systematized in navbars, buttons, banners, etc.
Step 3: Implementation
deliverables
Upon further validating our designs and iterating, handing off to developers includes collaborating on a prototype or a build; considering the product and technical constraints, we can create motion specs with described easing and durations.
The component structure is also available through our component library as Lottie files, GIF, and in-product examples for context.
Using an accent color creates an engaging use of the motion icon while keeping the animation subtle.
This exploration ends up seeming a bit too jarring, there are also potential issues with truncating the characters to more than single digits.
Interactivity in the "drag and drop" functionality, providing feedback, and adding an extra layer of delight makes this task seamless and fluid.
Icons within a navigation bar; the durations are shorter to minimize distraction and provide a delightful experience without becoming distracting or repetitive.
Conclusion
My takeaway from bringing motion design into Splunk products through discovery, iteration, and research is that motion can't solve everything. Enterprise software applications are often robust tools that require some technical knowledge on behalf of the users. Users can be off-put by excessive animation during repetitive tasks. However, motion design plays a crucial role in creating great experiences when used intently and in the right amount. It's imperative to consider what business value there is in elevating the look and feel of a product. These details and guidelines do more than enhance and delight. More often than not, they are the difference between a mundane day-to-day product and a premium user experience. Meeting accessibility standards, increasing user's time to value, and the overall quality of an end-to-end experience is dependent on how we introduce motion into our product.