Interactive design. The best effective trends of the past year

As a rule, to stimulate a person using a product, service, system, the opportunity to give a response is needed. This response should be valued, clearly communicated, and, in most cases, produce a clear and semi-predictable response. And then it works.

The above is a basic definition of Interaction Design (IxD), bringing together the general trends of definitions given by renowned designers Dan Saffer 1 ) and Robert Reimann 2 ), as well as the Interaction Design Association 3 ).

It is also very important to note that interaction design is a completely different concept from other types of design. This is not information architecture or industrial design. It's also not a type of user interface. Interaction design is not about any form or structure, but something more ephemeral - it is more about the why and when rather than the what and how.

For any type of design, the first priority is to formulate what is called basics or basic elements. The creation of such semantic concepts ensures:

• better communication between participants
• creation of common aesthetic concepts
• best learning tools
• area for research

These, as well as other reasons that are currently unimportant, are a reason to talk about the basics.

What are grounds?

My first introduction to the “foundations” was during the industrial design program at Pratt Institute in Brooklyn, New York. The program was created by Roweena Reed Kostellow based on her educational foundation philosophy (for more information, see "Elements of Design" by Gail Greet Hannah - Elements of Design Gail Greet Hannah 4 ).

According to Costellow, there are six elements that form the foundations of industrial design: line, lighting and color, space, volume (dimensions), negative space (background), and texture (surface, texture). Mixing and experimenting with these elements is the heart of 3D shape design. Pratt Institute students mastered these fundamentals during a year-long course. They had to define boundaries and dependencies by discussing abstractions and real projects.

Since I'm not the only person who has thought about these things, it's safe to assume that we all think about it differently. For example, Dan Saffer, in his book Designing Interactivity, devotes a large chapter where he describes the elements of interaction design: time, movement, space, appearance, texture and sound. Den's elements are arranged according to how I can call them on a form to create interactivity, not according to what form of interactivity will be available to me or not, except perhaps in time.

If these are truly the foundations of interaction design, they must be completely abstracted from form and have no physical attributes.

Foundations of Interaction Design

Time

"Time" distinguishes interactive design from other types. This is the shell of our concepts of interactivity.

But time is not the only basis for interaction design. There are many interconnected aspects of time manipulation. And as we all know, time is relative, it exists along many axes at the same moment. So there are three time-dependent foundations of interaction design:

Pace

Interaction design is about creating a narrative, incremental changes in an individual's experience, while still staying within boundaries. For example, if I use an email client, I would absolutely not want to turn on the stove at the moment when I am writing a letter.

The narrative has a pace. We understand this clearly when we watch movies. If the movie is good, we never look at the clock. Pacing is also part of interaction design, since sometimes you may be looking at the clock not out of boredom, but because you want to see if you can complete the “interactivity” process in time.

In my opinion, pacing in interaction design often correlates with what we can do at any given moment. At the same time, it is not enough that I can do something, it is also necessary that I can do it before moving on to the next step. For example, when I buy something, I can fill out one very huge form where there is all the information about me and check all the data at once, or I can check the data in parts, dividing the verification process into several.

Since the overall length of the fields is the same, the time to fill should also be about the same in each case, but the sense of pacing will be different in each design. In general, one large shape is more efficient, and one divided into pieces is more manageable.

Reaction

The simplest way to define time in interaction design is “reaction time.” How long does it take for the system to respond to an event? This happens when we see the cursor turn into an hourglass or into the now-talking progress bar, and we wait for the system to respond to us, but other reaction times are also important.

An action that occurs in real time (synchronously) is connected to the current moment, while an asynchronous action loses this connection. Because some systems are time sensitive, you need to know how to account for the differences between these types of responses.

Context

Each basic element, such as time, must have a sub-element - “context”. In our case, the interactivity of the course for humans, this means that the design itself cannot be considered. For example, when we say “time,” we cannot design an application without understanding how long a person can spend directly contacting the system.

Metaphor

Metaphor is a literary device in which one well-understood phenomenon or concept is used to explain another concept that is more difficult to understand or is difficult to explain in another way. The virtual nature of computers requires finding "material" metaphors in order to explain all these vague things to people. The quality and emotional perception of your product directly depends on what type and how many metaphors you use.

The most obvious example of a metaphor is a trash can or trash can (in the operating system on your computer). The idea is that your files sit in a virtual “bucket” or “recycle bin,” so if you make a mistake, you can dig around (Oops!) and restore them to their original form. And of course, you can always "empty the bucket" by making the contents unrecoverable. Metaphor works well for all people because it relates to reality precisely and flexibly.

All metaphors cannot be reversed. For example, we tried to use the term "remove" to quickly explain how to add something to a bucket or trash can. But we can’t put something in a real trash can or trash can, can we?

But sometimes the metaphor is too distant. Then it allows us to expand the boundaries of our imaginative abilities. If I have a notebook, filing cabinet, mailbox, calendar and the like to work conveniently on my screen, I can call my objects cards, use a notepad, leave my messages in the mailbox and mark appointments on the calendar, right? ?

But at the same time, metaphors achieve their goal better if they are slightly inaccurate, and the user himself must fill in the gap according to his own understanding of the subject. So, for example, we have adapted desktop metaphors to our modern computers.

The interaction designer must achieve this balance by carefully using the metaphors of his predecessors and building on top of them, as long as the original metaphor (perhaps universally accepted) can resist new trends.

Abstraction

Working in tandem with metaphor, abstraction relates more to the physical and mental activity that is essential for interactivity to take place. I first started thinking about abstraction when I read an article by Jonas Lowgren 7 , about what he designated by the term “plasticity”. After reading this article and using this term several times in conversations and discussions, I suddenly realized that Jonas was actually talking about how the abstraction in the interface is a representation of the product.

By and large, everything we see in a computer is initially an abstraction, since we have two primary interfaces for the input point - the mouse and the keyboard. Some actually place the monitor inside a special kind of pointing device and lower the level of abstraction for some type of interactivity, mainly for drawing. However, most of us use keystrokes, pointing, clicking, and moving the mouse around the screen.

Let's focus on mouse breeding. We look at the monitor on which the cursor (in the form of an icon) moves in accordance with the movements of the mouse. Without looking at the mouse (usually), we move it and, in accordance with the given direction, the icon on the screen (usually an arrow) moves too. Great, let's sort. Right and left works as it seems, but moving the mouse “away” moves the cursor up, and “pull” moves the cursor down the screen. A great metaphor opportunity for the concept of perspective.

When we bring the icon to the target, we click on the mouse button. This is the highest level of abstraction. The mouse, monitor and processor work in unison and create a series of effects that we are connected to these three devices. But this connection is very, very abstract and must be studied.

Mouse behavior involves different levels of abstraction. My favorites to compare this to are Google Maps and MapQuest. In Google Maps, by clicking the mouse button and moving my hand, I can move the center of the map area. There's very fast reaction time, but the type of movement - moving my hand as if I were moving a piece of paper in a beam of light - is less abstract than in MapQuest, where I simply click on a frame or map (setting the appropriate mode). You could say clicking is faster (less skill set), but it's more abstract, probably less fun, and definitely less accurate. All of this makes working with Google Maps (and its imitators) more enjoyable and interactive.

Systems are becoming more complex and more integrated into our lives. Many systems have become completely abstract and this is not always good when complexity increases the abstractness of information. Each of us has encountered pressure-sensitive screens sooner or later. This is a sharp decrease in the level of abstraction when interacting with computer devices.

Some new and popular technologies pose challenges for the new wave of interaction designers... The expanding world of spatial pointing, RFID, and other similar devices provides a leap in abstraction, as there is simply no interface for direct interaction with such devices. For them, it is simply impossible to find simple, effective metaphors to give users an understanding of how such devices work, like the metaphors we found for the mouse.

Negative space

All “proper” design disciplines have a concept of the form of negative space. In architecture and industrial design, these are cavities or spaces between masses. In graphic design, this is "white space" without color, lines or shapes - like the white spaces on a printed piece of paper. Sound design uses silence, lighting design uses darkness.

So what is denial of interactivity?

There are many places where “something” may be missing, or to be more precise, there are many layers. Can we only talk about the actions of the product? About our actions? About the space between action parts?

Pause– A very clear concept of the time when no actions related to interactivity are performed. Often interaction design tries to fill these gaps, but maybe those gaps are useful.

Stop and think– What to do if there is no response from the system? Think about what one student at the Swedish Institute of Interactivity did and came up with a “thought ball.” If you don't think enough, the ball rolls further and further.

Inactivity– Do nothing, the product does not respond to the action, perhaps due to its incorrectness. This is not the same as a pause, since in this case inactivity is a reaction to an action, and not a stop in action.

Mixing in interactivity

Unlike other formative design disciplines, interaction design is very messy because it requires other disciplines to construct interactions. For this reason, interaction design is more akin to choreography. 8 or making a film than with music or tailoring costumes. The core elements listed above are only suitable for interaction design or have been redefined exclusively for it.

For example, using color as an aesthetic tool improves or detracts from the level of interactivity. In general, for most cases, an information architecture is required to prepare the information before interactivity can be created.

After all, interaction design is the choreography or orchestral arrangement of other, formative types of design to create an interconnected dialogue between people and the products and systems around us.

4 As captured in this recent book: Hannah, Gail Greet, Elements of Design: Rowena Reed Kostellow and the Structure of Visual Relationships , New York: Princeton Architectural Press, 2002.

8 Heller, David (NKA Malouf, David), “Aesthetics and Interaction Design: Some Preliminary Thoughts.” (ACM membership required) , Interactions 12:5 (September-October 2005): 48-50.

From the author: The past year has brought a wave of new techniques, styles and trends, most of which have emerged to meet the needs of the growing mobile device market. Technological advances have changed user expectations regarding the aesthetics and functionality of websites and applications. In this article we will discuss interactive website design, namely the 5 best trends of 2015.

Let's break down a few common tactics outlined in the book Interaction Design Best Practices.

Framing– The way you present certain information. Instead of showing that paying by card will cost more, you could include it in the total price and present other payment methods as a discount.

Anchoring– The idea is to display the more expensive product higher, thereby setting its price beyond the standard. In this case, cheaper products will look much more attractive. The method is especially effective when paired with discounts, when the user clearly sees how much he can save.

Fear of loss– According to the results of the study, it turned out that the buyer’s instinct to avoid pain is much stronger than the instinct of pleasure from the purchase. Asking the question “If you don't register, you will lose $10” is much more effective than “If you register, you will save $10.”

Shortage– The smaller the product, the greater the demand for it. If you take a close look at Groupon and Amazon, you'll notice how they highlight product scarcity to drive conversions.

Invisible interface

Good design doesn't draw attention to itself. This design works in the background, giving users the feeling that everything they have achieved is due to their efforts alone. Below I have presented several useful ways to enhance the user's ability to interact with the site:

Reduce and simplify steps – The fewer steps a user takes to achieve a goal, the more successful your interface is. The steps may be small, but even if you save the user from one extra click, he will appreciate it. Just take a look at how Uber (screenshot below) turned the multi-step process of adding credit card information into one simple step.

Clear Visual Communication – Stick to a consistent visual theme and consistent, clear icons to avoid user confusion (i.e. does the mail icon mean message list or inbox).

Forgiving interface – Anticipate common user mistakes and set appropriate security measures. These measures include cancellation, autosave, multi-format data entry, and explanatory feedback.

Monitor the user's movement - The best way to identify interface redundancy and unnecessary steps is to visualize the user's movement around the site. Using her "tentacle map" as an example, Jessica Downey creates a visual map to help you organize the steps correctly. Ryan Singer from Basecamp came up with a similar, but faster method.

Meaning of spaces

The book "User Interface Best Practices in Web Design" says that white space is not always boring. Whitespace should be used as an active part of the design. In terms of interactive web design, spaces are pauses between words and sentences. Recognizing and processing elements on the screen quickly becomes meaningless without a brief break.
Below I've compiled a couple of whitespace tips to keep in mind:

White space creates hierarchy – The more empty space around an object, the more attention will be drawn to it. This trick alone can help designers influence the visual hierarchy of what they want to look at first.

Modern trends and approaches in web development

Learn the algorithm for rapid growth from scratch in website building

Minimalism adds sophistication – By minimizing the number of elements and increasing white space, you give your site an atmosphere of elegance and luxury. This approach can often be found on fashion brand websites.

Space affects legibility – Space isn't just for background; if you strip it down and look at design at the atomic level, white space can make or break the readability of text. In our case, clarity means the ease of reading complex letters in a word. Follow these spacing tips between lines/letters to ensure your text is readable.

Interface text is also part of the design

Developing the analogy of user interaction as a dialogue, we can say that the interface must carefully select its words. Everything on the screen of an application or website is considered an interface, and text is no exception. If the meaning of the written words does not coincide with the purpose of the site, even the best font will not help.

It won't help that your body text can take on different shapes and sizes. Typically, all text can be divided and changed into categories. The greeting words can be casual or friendly, but the call to action text on the same page should be bolder and more concise. Regardless of the purpose of your text, the following tips can help convey the right message to the user:

Know your audience – This advice is as old as time. Know your users and what they want you to tell them. For example, on a website for children, words or phrases may be repeated to attract attention, while on a legal website this approach is discouraged.

Determine the context of your site's use – Are you writing for a website or an app? Home or description page? Just as you changed the main text for the audience, change the site for the environment. If your app is designed for use in busy or distracting situations (Waze while driving), shortening the text will speed up information processing.

Show off your personality – Your writing style contributes to the overall mood and atmosphere of the site just as much as strong imagery or smooth animation. It is necessary to understand what emotions certain colors evoke. Text should not conflict with visual interaction.

Great design

Last but not least, good interaction design is always a pleasure. Emotional connection with users is the most reliable way to gain trust. When it comes to design, the heart is as important as the mind.

Using MailChimp as an example, the confirmation window is the most important part of attracting users through email newsletters. A funny picture and funny text only enhance the enjoyment of using the site (not to mention the fact that this approach reduces the irritation of mass mailing). I've put together some quick tips below:

Don't sacrifice usability – Think of great design as the icing on the cake: the cherry adds flavor to the cake, but it doesn't add anything on its own. Never sacrifice design at the expense of clarity.

Break Away – As Ben Rowe said, your first priority is to create “meaningful delight.” How can your website or app bring people into a state where there are no limits to what they can do?

Research – Users love surprises. The right micro-interactions (such as an animation fading out when the user completes a task) can make fairly common tasks more emotionally rewarding. The image below shows how even a simple menu fade-in animation adds fun to repetitive actions.

Interactivity helps make user interfaces expressive and easy to use. Despite its great potential, interactivity is perhaps the least understood of all design disciplines. This may be because interactivity is one of the newer members of the user interface family. Visual and interaction design date back to early graphical interfaces, but interaction design had to wait for more modern hardware to render animations smoothly. Layering UI interactivity on top of traditional animation creates its own misunderstanding. A lifetime can be spent mastering Disney's 12 core principles, does that mean UI interactivity is also difficult? People often tell me that interactivity is difficult to design, or that choosing the right values ​​is tricky. I argue that in the areas that matter most to the user experience, interaction design can and should be simple.

Where to begin?

The main goal of interaction design is to help users navigate an application by illustrating the relationships between user interface elements. Interactive Design also has the ability to add a character to the application with animated icons, logos and illustrations; however, usability should take precedence over elements of expression. Before showing off your character animation skills, let's start by creating some basic interactivity, focusing on navigation transitions.

Transition patterns

When designing a navigation transition, simplicity and consistency are key. To do this, we will choose two types of movements:

1. Container based transitions
2. Transitions without a container.

Container based transitions

Elements such as text, icons and images are grouped inside containers

If the composition includes a container, such as a button, card, or list, then the transition design is based on container animation. Containers are usually easy to spot based on their visible borders, but remember that they can also be invisible until the transition begins, like an undelimited list item. This pattern breaks down into three steps:

* Animation slowed down to illustrate elements appearing and disappearing

Applying this pattern to all container transitions establishes a consistent style. It also makes the connection between the starting and ending compositions clear, since they are connected by an animated container. To demonstrate the flexibility of this pattern, five different compositions are shown here:

* The animation is slowed down to illustrate how the start and end compositions are connected by the container

Some containers simply appear from behind the screen using standard softening. The direction of its movement is determined by the location of the component to which it is connected. For example, clicking the navigation menu icon in the top left corner will move the container to the left.

If the container is outside the screen, it appears smoothly and zooms in. Instead of animating from 0%, it starts the animation from 95% to avoid focusing too much on the transition. Large-scale animation uses easing easing, meaning it starts at maximum speed and slows down gently. To fade out, the container simply fades out without scaling. The end of the animation should be less pronounced than the beginning to focus the user's attention on the new content.

* The animation is slowed down to illustrate how containers can appear due to gradual changes in the element (scaling, appearing and disappearing)

Transitions without container

Some compositions do not have a container on which to base the transition, such as clicking an icon in the bottom navigation that takes the user to a new destination. In these cases, a two-step pattern is used:

1. The composition begins with a smooth fade-out and ends with a smooth fade-in.
2. As the final composition fades out, it also scales up subtly using the softening of the elements. Again, scaling is only applied as the composition appears to emphasize new content over old content.

* The animation is slowed down to illustrate how transitions occur without a container using zooming, elements appearing and disappearing

If the beginning and end of the composition have a clear spatial or stage-by-stage connection, then joint movement can be used to enhance it. For example, when navigating through a step component, the start and end of the composition scrolls vertically as they fade in or out. This enhances their vertical layout. When you press the next button to view further material, the composition scrolls horizontally. Moving from left to right enhances understanding of the subsequent event. Co-motion uses elements of standard softening.

*Animation is slowed down to illustrate how vertical and horizontal movement occurs

Best practics

The simpler the better

Given their high frequency and close links to usability, navigation transitions should generally support functionality in style. This doesn't mean they should never be styled, just make sure the style choice makes sense for the brand. Eye movement usually lingers best on elements such as small icons, logos, loaders or free state. The simple example below may not get as much attention on Dribbble, but it will make the app more user-friendly.

*Animation slowed down to illustrate different styles of movement

Choose the right duration and softening

Navigation transitions should use durations that prioritize functionality, being fast, but not so fast that they become disorienting. The duration is selected depending on what percentage of the screen the animation occupies. Since navigation transitions typically take up a large portion of the screen, 300ms is a proven method. In contrast, small components such as switches use a short duration of 100 ms. If the transition is too fast or slow, adjust its duration in 25ms increments until it reaches the right balance.

Easing describes the rate at which the animation speeds up and slows down. Most navigation transitions use standard element softening, which is an asymmetrical softening type. This means that elements quickly speed up and then slow down gently to focus attention on the end of the transition. This type of softening gives animation a natural quality because objects in the real world don't suddenly start and stop moving. If the transition seems harsh or robotic, it is likely that symmetrical or linear softening was selected incorrectly.

*Animation slowed down to illustrate the different types of softening

The patterns and best practices outlined in this article are intended to create a movement style that is practical and unobtrusive. This is suitable for most applications, however some brands may require more intense style expressions. To learn more about motion stylization, check out our customization instructions.

Once the navigation transitions are implemented, the task of adding a character to your application begins. This is where simple patterns don’t work, and here you can fully realize your animation skills...

Personal animation can add casualness to a serious mistake

If you're interested in learning more about the ability to move, be sure to read our

A whole wave of new methods, styles and trends was introduced. Most of them have emerged to meet the needs of the growing mobile device market. Technological advances have changed user expectations of the aesthetics and functionality of websites and web applications.

Of everything that happened in the world of interaction design in 2015, we identified the 5 most significant trends that will most likely carry over into the current year.

Convincing design

The heart of interaction design has always been to humanize the interaction with the computer, the conversation between the user and the site. Despite the fact that almost every site has its own business goals, almost half of these interactions use classic sales methods. Let's take a look at some of the most common tactics used in interaction design:

— Framing.
The way you present certain information is called framing. Instead of offering a credit card surcharge as an extra charge, you can frame it as a normal price and say that by paying for the item using an alternative method, the customer earns a discount.

- Consolidation.
Present the more expensive item first, offering that price as the standard. Then every lower price will seem like a trade deal to the client. This works especially well on discounted prices, where users can see exactly how much they're saving.

- Loss aversion.
Research shows that customers respond more to avoiding a loss than to acquiring additional bonuses. A window with the message “if you don’t register, you’ll lose $10” brings more results than “if you register, you’ll save $10.”

- Shortage.
The smaller the quantity supplied, the higher the demand. You see how sites like Groupon and Amazon still manage consumption by highlighting scarcity.

Discreet interface

Good projects do not pull the blanket over themselves. They work in the background so that users feel that any success is due entirely to their own efforts. Here are some useful ways to enhance the user experience when interacting with a site:

- Smaller and simpler.
The fewer steps your user needs to take to achieve a goal, the more successful your interface will be. The steps may be small, but even if you remove at least one click, the user will appreciate it. See how Uber turns the multi-step process of entering your credit card information into one simple step.

— Clear visual communication.
To avoid confusion, maintain a consistent visual theme and use clear labels. For example, the mail icon represents a message or mailbox.

- Forgiving interface.
The ability to anticipate common user mistakes and provide appropriate guarantees in interaction with the site is a very useful design quality. We mean undo options, autosave, inputs in different formats, and educational feedback.

— User journey map.
The best way to identify design redundancy and unnecessary steps is to visually map out the user path to the service.

The importance of white space

Empty space isn't always boring. White, or negative, space should be implemented in the design in the same way as visually active elements. From the point of view of interactive design, white space is like pauses between words. Without short breaks from viewing information, all the elements on the screen quickly lose their meaning. Here are some basic white space guidelines to keep in mind:

— Negative space creates hierarchy.
The more white space you place around an object, the more attention it receives. This simple trick alone can help designers influence visual hierarchy, making the user see the exact element they want first.

— Minimalism adds sophistication.
Minimizing the number of elements and maximizing the amount of negative space gives your site an air of elegance and luxury. This tactic is most commonly used on fashion brand websites.

— Space affects readability.
White space isn't just used for background noise. Going down to the atomic level, spacing can make or break readability. In this case, clarity is the correct use of symbols in a word. Spacing between lines and letters can provide acceptable readability.

Interface text as design

Considering the interface as an analogy to the user interaction in a conversation, the designer must choose his words carefully. Everything that is on the screen of an application or website is considered an interface. And the text is no exception. If the meaning behind the words doesn't match your site or app, even great typography won't matter.

Typically, you can change your design options for different categories. The greeting can have a casual and friendly tone, while the call to action text on the same page should be bolder, more precise and concise. Regardless of the purpose of the text, the following principles will help you convey the right message to the user:

- Know your audience.
This advice is as old as time. Know your users and what they want. For example, a website for children might repeat phrases and words to improve attention span, while a website for a law firm should do the exact opposite.

- Consider the context.
Imagine: you are writing text for a website or application; for the home page or about the home page. You will likely change the text to suit your audience's expectations. Do the same for the web environment in general. If your app is intended to be used in busy or distracting situations (such as when moving), keeping text in a short, thick font will help you absorb information faster.

- Display your personality.
The writing style will contribute to the overall mood and atmosphere of the site as much as strong imagery or animation. Color coordinating will ensure that the text does not clash with the visual interaction.

Charming design

Last but not least note. Good interactive design is always enjoyable. Forming an emotional connection with your users is a sure way to earn their loyalty. When it comes to design, listen not only to your head, but also to your heart.

On the MailChimp website, the confirmation window is an integral part of email marketing. Adding funky graphics and humorous text adds a little fun without breaking the bank (not to mention it undercuts some of the tension inherent in mass email). Here are some simple tips to help make your design enjoyable:

- Don't sacrifice convenience.
Think of design as the icing on a cake: the icing adds oomph to the cake, but the icing alone is not the cake. Never get carried away by subtlety at the expense of clarity.

- Go beyond.
Your ultimate goal is to create “meaningful delight.” Behind the delightful design aesthetic is the goal of luring people to the site and making them feel the unlimited possibilities.

- Ability to make discoveries
People love surprises. Relevant micro-interactions (such as animated elements that help the user complete a task) greatly help your site. Sometimes even a simple fading animation in the navigation menu adds fun to repetitive activities.

The level of modern digital technologies allows designers and web developers to safely experiment when creating interfaces for various devices. Modern interfaces are becoming more and more interactive and it’s hard not to notice. Today, many designers begin to think about user experience long before creating the first prototypes, since the cost of a possible mistake is very high, and no one wants to take risks. This is where there is so much talk about UX - the old web is becoming a thing of the past and new trends are beginning to dominate the Internet. And one of the main trends is interactive design. But this is a global trend, a kind of tectonic shift that everyone feels, but so far few people can imagine what the interfaces of the near future will look like. However, we can already note 6 trends in interactive design that we will undoubtedly see in 2016.

CINEMAGRAPHICS

Cinemagraphs are a cross between photographs and videos. Looping GIF images combine static and dynamic and look very impressive. The trend appeared in 2011 and quickly gained popularity. Using cinemagraphs in interactive design will draw users' attention to interesting graphic content, so designers should consider the presence of looping GIFs in their projects.

LANDINGS WITH LONG SCROLL

Today, many sites can do just fine without using a large number of pages, as evidenced by the emergence of a huge number of landing pages. Mobile device users find it much easier to view content on a one-page site, as they only need to scroll the page with their finger. A one-page website with an interactive design looks much better on a smartphone screen than a website with a standard multi-page layout. Of course, in such a design you will have to use large clickable areas and buttons, which will significantly increase the length of the page, but with the right selection of content this will not be a problem.

MATERIAL DESIGN

Material Design, created by Google developers, emerged as a result of efforts to unify interfaces for Android applications. In an effort to make interfaces more interactive, designers started from the idea of ​​quantum paper. Flat paper located in three-dimensional space obeys the laws of physics, and animation is actively used in the design. Elements have shadows, glows, they can move, speed up or slow down. This style allows you to bring additional depth and realism to the design, and animation is used not only to “revive” the interface - the user always remains aware of what is happening. In material design, the application responds to the user's actions, which allows for easier visual connections when viewing different types of content. Using the principles of Material Design makes it possible to design effective interactive websites and applications.

ANIMATED TYPOGRAPHY

You can also add interactivity to your site using typography. The main thing is not to overdo it. Animated headings look best in design, and it is not at all necessary for the text to spin, twirl, or behave in a way that is not very clear to the user. If the header responds to mouseover, for example by changing color, it will make interaction with the interface more interesting.

COMPLEX VISUALIZATION

Everyone understands that high-quality, beautiful infographics are much more interesting than boring diagrams and charts. But it is worth paying attention to such a growing trend as the use of interactive infographics with complex visualization. This infographic can look like a series of slides or be a single slide. In the second case, the user receives the necessary information by highlighting the elements that are most interesting to him. Obviously, this trend will be relevant in the coming years - such content is very informative and allows the user to more easily absorb information.

ORGANIC LAYOUTS

The name of this trend can be translated as “organic layouts”. Since interactive design doesn’t necessarily have to adhere to standard grids, this gives designers the opportunity to present content as naturally as possible. The free arrangement of various elements, such as text, illustrations or multimedia, allows you to diversify the design and present information in the most user-friendly form.