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.
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 Reveal | Ease Out 300ms |
| Mask Remove | Ease In 350ms |
Slide
| Slide Left | ease In-Out 350ms |
| Slide Right | ease In-Out 350ms |