Interaction + Experience Design
Microsoft.com Motion

Overview

The Microsoft Web Framework, Moray, is an agnostic framework compatible across multiple platforms and provides designers and developers a systemized library that can be adopted by varying product groups. I lead the initiative where the goal was to enhance and add motion into the framework that is consistent, aids an improved user experience, and supports ADA regulations.

Planning

Defining a road map during this time was important in order to setup a schedule for the project.  Given that the project was to take 5 months starting, I devised a road map to have 5 phases that would fall within the time periods for each- Phase 1: Research, Phase 2: Define, Phase 3: Ideate, Phase 4: Hardening, Phase 5: Implementation.  

Design

The design process consisted of 5 phases that were outlined in the design road map: 1 Research and Define, 2 Ideate, 3 Harden, and 4 Implement. Within Phase 1-Research: interviews with product groups, competitor analysis, brand alignment would occur. Phase 2-Define: definition around principles, understanding what intentful design is, and a motion assessment around what motion would be baked into the system would all be answered. Phase 3-Ideate: motion foundations with specs, effects, a prototyping library, and examples would all be explored. Phase 4-Hardening: this would bring alignment with development and accessibility again to solidify the motion specs. Phase 5-Implement: would be the last phase in this versioning that would execute the motion specs into the framework.

Research

By the end of the first phase, I created an audit that would give me insights into some of the current decisions that were implemented into the framework. I grouped my findings into three type categories: Micro Interactions, Transitions, and Loading Sequences; that way I could track any patterns that were currently instilled to understand why specific foundational decisions were made. By understanding the type categories, when conducting the audit, I could create filtering systems that would determine the foundational aspects of each type of motion to draw similarities, and make sure things were unified to help streamline the implementation process.

Micro-Interactions

Micro interactions are events that have one single use case. This form of animation provides feedback to convey system statuses, supports error prevention, and communicates the brand. Examples of this can be seen through buttons, scroll bars, loading functions, and error states.

Transitions

Transitional motion offers a connection between components, patterns, or whole pages. There are three types of transitional animation, on-page transitions occurring between components and patterns and page-to-page. These events are triggered by a hyperlink either anchoring somewhere on the page, to another page, or transitioning content within a component/pattern.

Loading Sequence

Hierarchal Animation is the use of motion to load a sequence in which information is presented. The most common way this is executed is with typography. The order that typography enters and exits the screen can be done sequentially.

Motion Assessment

Defining what qualifies a component/pattern to need motion was a big question that would support the objective of this project in order to answer what gets motion and what motion. In order to assess the situation, I did a workshop with the other designers to understand what those qualifying questions are and to answer if something gets motion.

Collaborative motion assessment to determine the types of motion required for the framework.

Define

Principles

I started by determining the framework’s principles to help guide all motion decisions. The motion principles chosen were those that follow the values of the MWF framework, Microsoft Brand, and support the Microsoft.com UI.

Connection

Continuity in motion should create consistency within the user’s experience in relation to the flow and functionality of objects. Continuity can be seen within a single scene as well as within multiple scenes interacting with one another.

Narrative

The sequential order that occurs amongst the course of a page or story line is the narrative. Motion should support the narrative and guide users through a story.

Relationship

The way objects interact with one another should relate spatially, temporally, and hierarchically. Motion should react naturally as it would amongst in every day life.

Inclusive

Motion needs to be inclusive and accessible to all. Motion be used when opted for and shouldn’t defer a user from experiencing an output.

Anatomy

In order to understand how motion works, it was important to define a critical aspect of the project, the anatomy of motion. Motion is obtained by a a user triggering something that responds a specific way determined by defintion and rules. Micro interactions occur at the component level, or a single use case, and macro interactions occur at the page level, but they both have something in common- a trigger, a rule, and feedback to determine the motion and choreography of the motion.

Triggers

Triggers initiate an Interaction. Triggers can be user-initiated or system initiated and can be started by scroll, load, or click, hover, or mouse enters or exits.

Rules

Rules determine what happens when the trigger is initiated and are a set of parameters that the interaction follows.

Feedback

Feedback is anything that a user experiences when they initiate a trigger. For example, if a user clicks a button and something happens whatever they experience that happens is the feedback.

Loops and Modes

Loops refer to how long an animation occurs for. This includes how an object repeated and how it changes over time.

Ideate

Foundation

The foundation of motion can be represented by 5 areas, timing functions, durations + delays, distance, and direction. The default and alternative specs listed for each area are to be considered the ruling for the triggers determined.

Timing Functions

The way movements enter, exit, and move around on the page are considered how things ease in movement. Since our brains aren’t trained to see things linearly, a more natural approach involves acceleration and deceleration.

Duration and Delays

Duration is how long motion takes to get from start to finish and should depend on the size of an object and the distance traveled. Delays are the time in between motion starts.

Distance

How far something moves from point A to point B is the distance that something travels. This will help to determine what is considered a macro verse micro interaction.

Direction

Direction determines how fast something moves. The farther something moves away from its starting coordinate, the faster it needs to move in order for it to still display efficiency. The longer someone waits for a motion sequence, the less attention they will be able to provide.

Effects

Predetermined effects were defined and created in order to create a cohesive and streamlined experience. Below each in tables are specs that were used to create each using foundational aspects.

Color Fill
Color In
Outline to Color
ease Out – 250ms
Color Out
Color to Outline
ease In – 300ms
Glow
Opacity In
0-50
ease Out – 600ms
Opacity Out
50-0
ease In – 600ms
Fade
Opacity In
0-50
ease Out 600ms
Opacity Out
50-0
ease In 600ms
Grow and Shrink
Scale Up 110%ease Out 250ms
Scale Down 100%ease In 250ms
Mask
Mask RevealEase Out 300ms
Mask RemoveEase In 350ms
Slide
Slide Leftease In-Out 350ms
Slide Rightease In-Out 350ms
Next Case Study
Product Design
Disney Express Apps