Philosophy

Motion Design plays an important role in how users interact with applications. It communicates spatial relationships between elements, drives focus to points of interest and creates a delightful experience. Because animation is inherently exciting; it is often considered to be a novelty and treated as an afterthought. This can lead to complicated and unnecessary solutions. Thinking about motion design at the beginning phase of the process will help teams avoid redundant animations and focus on value.

Principles

When I came to LinkedIn, there was no patterns or standards for how we approached interactions. My first task as the first UX Motion Designer at the company, was to create a set of motion principles that teams of all skillsets could reference to create shared understanding. 'The 12 Basic Principles of Animation' is based on Disney animation of the 1930s in hopes of producing more realistic illusions based on the laws of physics.

Although these principles were created for traditional character animation, many of them are relevant to what we do in user experience. All successful motion design we see today adheres to these ideals in one way or another. I modified these original principles into 10 UX Motion Principles in order to align with our design language. 

Specifications

Once we established the foundation of how animation should be approached, I had to create specifications for how these principles would translate accurately in code. I work closely with Engineers on this front to build consistency that aligns with our principles and philosophies. Timing and easing functions are the biggest attributes to creating a coherent ecosystem that represents the style and brand of the company. 

I experimented with various velocity curves to find a range that communicated proper weight and physics. Elements within the interface had to feel representative in relation to user expectation. After I conducted research on multiple velocity ranges, I concluded the best percentages to use and then converted them into cubic bezier curves for engineers to implement into their easing functions.

Timing is extremely important as well. I found multiple cognitive studies on visual awareness and how fast or slow visual input was recognized by the human brain. Using this information, I created a timing range in miliseconds that designers and engineers could reference. Actions that have to be quick and considered a part of a multitask action tend to be the fastest. Important elements and alerts that demand attention move in a more focused and deliberate speed. Casual and delightful moments moved with leisure. Anything outside of these bounds are considered too fast or too slow. 

I also created patterns to avoid, in order to reduce the amount of weak solutions and increase consistency. Linear movements, breaking the plane / flipping elements, violent bouncing and over rotations are all solutions that I found to have negative impact and did not align with the LinkedIn brand. 

Engineering Motion

We can create beautiful and dynamic animations all day, but it means nothing if it cannot be built. I realized very quickly that I was only as good as my Engineers. Implementing complex and consistent UI motion can be a challenge for developers across different teams. I wanted to establish a close relationship with all of them, but this can be quite a challenge in a large company. My solution was to create a team of talented and passionate engineers to build custom APIs and motion code libraries. Thankfully there was already a small group of mobile engineers who began creating a similar library, and we combined forces to create our own motion team within the company.

What started as small team of iOS Engineers, has grown with additions of multiple Android and Desktop Developers. With this diversity, we can build consistency throughout all of our platforms and find common ground on how to approach problems on all fronts. I constantly work one on one with engineering to review and tweak code, and we meet weekly about strategy and metrics. We try to keep a close eye on how our solutions are performing and also conduct A/B testing when applicable. Because I have built a close rapport with my Engineering team, there is more communication with the Engineering department as a whole and a lot less is lost in translation. Relationships and collaboration are paramount to these successes.

Rudimentary Integration

Buttons

Once we had established the foundations, I started to exercise these fundamentals at a rudimentary level so that teams could see these principles in the simplest form. Buttons are often the primary call to action for user navigation and often commands a high level of attention. 

The philosophy of the radial effect we established, is based on 'connections' and adopts the 'in' dot as its constant. The shape also reflects the mapping dots of the economic graph, which is the main goal of LinkedIn as a company. It was important for our interactions to reflect this. The dot attracts to the point of touch to further illustrate the 'connections matter' motto. Ultimately, this interaction created tacticle feedback that was analogous to the company brand.

Building these for desktop and mobile had its own unique challenges. Developers attempted to create these animations using only CSS for simplicity. We created many versions and came up with clever hacks to re-create the interaction, but ultimately we decided to add JavaScript to authentically re-produce the dynamic look of the original idea.

Mobile revealed issues with button varying button lengths. Although this problem can exist on desktop, it was particularly apparent on mobile devices. Since the main feedback interaction is attracting to the touch point, long buttons took too much time to catch up to the origin of touch before the user had already lifted their finger and the page transition had begun. Our solution was to provide instant visual feedback and produce the animation when the user was engaged in a press & hold action. On release, the animation fades out as the transition begins. This provides the same tactile principle without causing jarring visual queues to the user.

Mobile Swipe Patterns

LinkedIn has multiple mobile apps that have similar elements, but sometimes they behave in different ways. When users jump from one  LinkedIn product to the next, they trust that it will all work similarly, since they originate from the same family company. For example, if swiping a card downward is a dismiss action, it is expected to be the same behavior on all of our products. This is why we created guidelines for mobile swipe patterns.

I partnered up with Designers to come up with swipe proposals in order to build a consistent system that all teams could reference. We created general behaviors and articulated on how to approach special edge cases. I was responsible for taking the guidelines set by the team, and creating the interactions using the motion patterns we established. I have worked closely with Engineers to implement these swipe patterns and many of them are being added to our motion code library today.

Progressive Integration

Once these principles demonstrated success at a rudimentary level, I started to expand into intermediate actions such as dynamic transitions, custom loaders and engaging iconography. I pushed the boundaries of what is currently possible in order to find the limit of our platforms. Some of my explorations ended at the concept level, but many elements from those concepts became incredibly important down the line in creating feesible interactions.

This technique of building ux motion design patterns from the ground up has positioned LinkedIn to produce unique and consistent experiences that are both functional and delightful for their users.

  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image