2019
UX principles
across roles
The tech world is filled with an absurd amount of job titles, especially in the design department. UX, UI, Ixd, UR, ExS, IA, VD, SD, and on it goes. We add new steps in our design process and assign a role to it. If you’re an animator trying to break into the world of tech, you might find yourself struggling to find your place in these ranks.
I’ll let you in on a little secret: No matter the title, they all work according to the same principles.
Design principle #1: Hierarchy
...in Interaction Design
The main tool to create hierarchy in IxD is through well prioritised navigation and information architecture, which involves organizing content into logical groupings and creating a structure that reflects the user’s goals and tasks. Through the use of hierarchy, designers can help users navigate and understand their experience more easily.
...in Visual Design
Visual hierarchy in digital products is the arrangement of elements on a page that conveys a visual order to the user. It helps the user understand the importance and relationships of the elements, and guides them through the content in a logical order. By creating a visual hierarchy, the user can easily find what they need and understand the page quickly. Visual hierarchy can be achieved through the use of color, size, shape, texture, and placement of elements on the page.
...in Motion
Even before the user has registered what is on the screen, good motion puts emphasis on the right elements. The animator guides the user though the experience with the help of correct transitions and hints. On top of the UI hierarchy of a page is often the main action; answering a call, logging in, or maybe snapping a photo. The use of motion can draw the users eye to this action.
Design principle #2: Consistency
...in Interaction Design
Usability and the way we learn improve when elements have a consistent look and function. When building digital products the UX designer aims to use a set of predefined components and digital patterns: navigation bars, tab menus, hamburger menus, lists, back buttons, etc. The user recognises these components and intuitively knows how to use them. The goal is to create functional consistency, making the experience predictable.
...in Visual Design
Visual consistency create a memorable brand experience. A consistent design language creates an emotional connection between the user and the product. When users see a familiar colour palette, logo, typography and layout, they instantly recognise the brand.
...in Motion XD
Using the correct transition in an app, upwards movement for a modal view and left movement for a push view for example, lets the user know where in the navigation they are at. Be consistent with how your screens move in and out of the view. When we show the user a certain animation repeatedly, they will learn the meaning of it and recognize it when it appears in new views.
Design principle #3: Intent
...in Interaction Design
As a UX designer, few assumptions are made when building a digital experience without verifying it with the users group. Behind every successful product we find a researcher doing A-B testing and comparing the design to competitors, constantly asking the hole question ‘Why?’.
...in Visual Design
Using excessively bold and distracting visuals just because it makes out brains tingle is a thing of the past. We now use color to highlight what’s important for the user to notice and remove all unnecessary clutter. As a visual designers you should question every element on the screen, does this fill a purpose and does it help the user fulfill their goal?
...in Motion XD
Use motion mindfully and know if what you're animating is decorative motion to strengthen branding or if it’s conveying information and enhancing usability. Every movement is telling the user something; where am I? Where did that go? Where did that come from? Did I fail or succeed with my action? Make every keyframe count and remove unnecessary bounces and bobs if they are not contributing to the message.
Design principle #4: Accessability
...in Interaction Design
Everybody experiences the internet differently and to make a digital product usable by a wide range of people we need to include the needs of people with visual, speech, auditory, motor or cognitive disabilities.
...in Visual Design
When making the visual design accessible to visual impaired and individuals with disabilities it creates a better experience to everyone. The visual language becomes more mature and refined without clutter and distractions. Making sure the text and background has enough contrast between them is something every one wins from.
...in Motion XD
Added animations to the design can put emphasis on an area, or distract from it. It's a powerful tool that should never be misused or overdone. Motion design is at its best when subtle and used as feedback after the user has preformed an action. We also have to consider that some user use screenreaders, and animated transitions and temporary text might get missed. Therefore important messages should never be temporarily shown. Try to always test your design with a screen reader or in a user test with someone with a visual impairment. Meeting accessibility standards can seem like a trouble, but motion design is a great example of how it can actually improve the design and keep the creatives from overdoing it.
● ● ●
So no matter the title, the core principles of design remain the same. More and more these roles blend together, and often you as a Product designer where all the hats.
As an animator it's tempting to stay in the After Effects safe zone and take a backseat when it comes to the UX side of things. But trust me when I say - magical things will happen when you dive into that world, your perspective as a Motion Designer is a great asset when ideating the foundational part of the product.
