Motion design

But perhaps the most important reason for semantic naming is accessibility.

Some HTML elements have built-in keyboard accessibility. So, for users who aren’t using a mouse-driven cursor, they can tab between sections of your page, and activate their selection via the keyboard. You can use a screen-reader to check these HTML elements are operating as they should be.

Produced by the World Wide Web Consortium, Web Content Accessibility Guidelines (WCAG) are gaining importance in today’s accessibility-conscious society.

Increasingly, certain levels of accessibility are required in order for businesses to avoid being penalised: in the UK, for example, public sector digital services must meet WCAG level AA.

So, semantic naming allows you to stay one step ahead of accessibility demands as you scale your website(s) to accommodate as large an audience as possible. Providing an even better user experience.

You now have a website which is accessible, easy to navigate, and scalable. But you can take things one step further with motion design.

Motion design refers to interactive elements on a website.

Some elements may indicate a movement or response, like when a button ‘depresses’ slightly at the click of your cursor, or your shopping cart lights up after a product is added to your basket.

Motion can also be used to indicate next steps, leading visitors toward a desired action, with animation naturally drawing more attention than static images or text alone.

Important to note

Motion design shouldn’t distract or confuse. It should follow the rules of real-world forces – think gravity, or friction. And you only want to include it where there’s purpose.

Any interactive elements you design should be four things:

Responsive
Natural
Aware
Intentional

Responsive motion

is directly instigated by a user action. It takes the form of an energetic and accurate movement, caused by a click, scroll or hover.

Natural motion

refers to its mimicking of real-world forces, taking physics into consideration (unnatural movements can look out of place and robotic).

Awareness

refers to both the user, and any website elements surrounding interactive elements. Choreographing interactive elements appropriately includes never moving multiple elements in different directions, or having them cross paths.

Intentional motion

uses movement to direct the user to the right place at the right time. Drawing attention elsewhere can distract your visitor and pull them off-course.

Is motion design necessary?

It might be a small part of your user interface, but motion has a big impact on UX (User experience).

Motion is informative

It shows users where an interaction can take place, provides clues on what options are available, and what happens if an action is taken. Plus, it illustrates on-page hierarchy.

Motion reinforces your brand personality

Motion cues add character. So, whether it’s celebrating a particular moment in the user journey, entertaining your visitor during loading times, or simply adding style to your layout, motion’s use is an opportunity to strengthen brand recall.

Benefits in motion:

Reinforces your brand image
Makes users stay on your website longer
Improves comprehension levels
Directs your users’ attention
Encourages desired actions
Improves UX

Coronavirus
A guide for your business

Think big

Future-proof your website more quickly, seamlessly and cost-effectively with scalable design

Chapter Title

KV-S1057C / KV-S1027C

Motion design

Putting your website into action

But perhaps the most important reason for semantic naming is accessibility.

You now have a website which is accessible, easy to navigate, and scalable. But you can take things one step further with motion design.

Motion design refers to interactive elements on a website.

Important to note

Any interactive elements you design should be four things:

Responsive motion

Natural motion

Awareness

Intentional motion

Is motion design necessary?

It might be a small part of your user interface, but motion has a big impact on UX (User experience).

Motion is informative

Motion reinforces your brand personality

Benefits in motion:

It’s your secret weapon to creating beautiful digital services which build trust and brand loyalty, and directly influence your bottom line.

CoronavirusA guide for your business

Chapter Title

KV-S1057C / KV-S1027C

Motion design

Putting your website into action

But perhaps the most important reason for semantic naming is accessibility.

You now have a website which is accessible, easy to navigate, and scalable. But you can take things one step further with motion design.

Motion design refers to interactive elements on a website.

Important to note

Any interactive elements you design should be four things:

Responsive motion

Natural motion

Awareness

Intentional motion

Is motion design necessary?

It might be a small part of your user interface, but motion has a big impact on UX (User experience).

Motion is informative

Motion reinforces your brand personality

Benefits in motion:

It’s your secret weapon to creating beautiful digital services which build trust and brand loyalty, and directly influence your bottom line.

Coronavirus
A guide for your business