UX principles

 across fields 

The tech world is filled with an absurd amount of job titles, specially 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. 

The main titles, or shall we call it perspectives, we will compare are User Experience Designer, Visual Designer and Motion Experience designer.

UX Designer

The broadest role containing information architecture, navigation flow, structure and functionality of the interface. They have to both keep a bird’s eye view of the whole experience, and solve detailed problems, constantly having the user’s goals in mind.

Visual Designer

Often called UI designers, creating the look and feel of an app’s user interface. They are graphic designers concerning themselves with aesthetics, making sure all visual elements have a purpose.

Motion Experience Designer

Creating a smooth experience, enhancing usability and adding delight through motion.

Let's have a look at the cornerstone principles of digital design, and how they are reflected in each role. 

Design principle #1

 Hierarchy 

have a huge impact on the smoothness of the users experience. When we open an app most commonly we are met by a navigation bar at the bottom of the screen. This will contain the main pages of the app and presents the primary hierarchy. Within these pages we might find a tab menus, giving us the secondary pages and other sub-categories of content.

...in UX design

The main tool to create hierarchy in UX is through well prioritised navigation and information architecture. How we organise our content and information throughout our app or website will 

...in Visual Design

Within a page we want the visual design to put emphasis on what is most important. First off we identify what content and actions are the most important, then we place those prominently and make sure main action buttons pop out enough to encourage action. Use contrasted color, bold typography, center alignment, size and shape to guide the user though the page. 

...in Motion XD

Even before the user have 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 that button.

Design principle #2

 Consistency 

...in UX 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. We want the user to feel safe and in control.

...in Visual Design

For visual creatives this is the most fragile principle as we frequently violate it with our creativity. We define fonts, button sizes, colors, grids, spacing and alignment in a style guide that makes up rules for the visual consistency. When the app is true to this guide, the user will experience a sense of calm and familiarity, recognising the design elements throughout the app or site.

...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 recognise it when it appears in new views.

Design principle #3

 Intent 

...in UX design

We like to think that we can make assumptions when building a digital

experience, and we want to believe that our design decisions are objective. Truth is, in UX design nothing passes without verifying it with the users group. Behind every successful UX designer 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 ‘pretty’ 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. With the flat minimalist trend visual designers started questioning every element on the screen, does this fill a purpose and does it help the user fill their goal?

...in Motion XD

Use motion mindfully and know if what your animation is decorative motion to strengthen branding or if it’s conveying info 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

 Accessibility 

...in UX design

Everybody experiences the internet differently and to make the 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

Giving the user a sensory assault is a thing of the past. When adding animation into the design is cut put emphasis on an area, or distract from it. It's a powerful tool that will never should 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 screenreader, 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.