New Trends in web design: immersive interactive design

The wheel of time is rolling forward, constantly changing our perception of the world, some websites and apps from rounds to empty may only take a few months, but every time an old technology ends, it means the rise of a new technology.

Here are some of the modern interactive design techniques I've collected that have been popular with users, some of which are really novel and some are just some of the improvements to old ideas, but in any case, these technologies will help you stay ahead of the times and keep pace with the world.

I. Animations and transitions

A mention of interactive design, we will think of one of the most popular concept, that is, animation effect, from a cool hover to a full-screen cartoon animation background, all belong to the category of dynamic effect.

Animation is not uncommon for interactive design, the real reason for their popularity may be related to HTML5, JavaScript, and CSS, and animating in the Flash era is a very extravagant design (wow, this icon bounces), but now they are a necessary part of the design (eh? This icon does not bounce?! ）。

photocredit:http://gaetanpautler.com/

The dynamic effect not only can visually attract the user, but also plays an important transition role in the process of interface switching, because the interface switch is the link that connects the various dynamic effects. How do users transition from one state to another? What should I tell or ask the user to do in each state? A brilliant switching effect can solve the above two problems effortlessly.

In a user-friendly interface, the dynamic effect is a connecting link by helping the user understand how to interact with the interface; (Note that when people interact with the interface, some new techniques or interactions may make the user feel unnatural, Strange or delayed) The dynamic effect is also a wise choice for users who log on for a long time, because it can temporarily distract users, lighten the user's visual pressure, and keep the user in a good state of experience for a long time.

The dynamic effect is also a good choice for the framework design, in the best interactive design case, the following five functions are very important:

1. Action alert (animated notifications)
2. Information presentation (revealing information)
3. Content highlighting (highlighting)
4. Folding forms and menus (collapsing forms and menus)
5. Scrolling action (especially for single-page sites) (scrolling, especially for one-page websites)

When the interaction begins, the continuous motion of the film is the key to the entire interaction. Users typically enjoy cinematic style, high definition, and pixel-level design, and the famous Disney painter Frank Thomas and Ollie Johnston's 12 animation design principles are still applicable today, and these 12 basic principles should be the basis for future dynamic design.

two. Narrative interaction (image site)

Although the social media sharing model makes information visualization as a visual information medium, the role of web site graphic design and interactive design is equally important, in the site graphic design plate is not everywhere, but we can still learn a lot of interactive design knowledge. Graphic design methods and image sites are very similar to the design method, image sites also use HTML5, CSS3 and jquery tools through color, text, and smooth animation to convey the interactive experience.

photocredit:http://www.psd2html.com/10-years-in-review/

Image site This word is Venture Beat Technology blog site created in 2013, it usually requires users to perform an action, in the course of operation to obtain a complete storyline; These actions can sometimes be very simple, such as a slight click, sometimes relatively complex, Like typing or touching a picture on the screen.

The real strength of the image site is that they can easily integrate the user's behavior, unlike information visualization sites, you can design the image site as a "mountain Louwai Lou" user experience, this design can let users completely indulge in it, Providing relevant links and information during the user experience can make the content available more persuasive.

Photocredit:http://www.irwinmitchell.com/safety-on-the-slopes.html

For example, the above "Safety on the slopes (safer to ski)" banner interface is a good example of a picture site that integrates relevant information, maps, videos, events and members to illustrate the dangers of winter sports, If you do not present these content in the form of an image website, you will feel that this knowledge is as dull as a pale lecture.

Indeed, the image site does not use slogans to appeal to you to act, or to manipulate something with subtle hints, but in fact these actions and actions have been fulfilled. For example, if this site is created by a retailer of outdoor sports equipment, and he takes the site as part of a seasonal promotion, you can embed a link to a product or product that describes the dangers of winter sports, thereby expressing the dangerous theme of winter sports.

We know that not everyone has the resources to build a separate interactive chart (whether it's on their own site or a separate URL), but you can certainly use some of the information visualization techniques to make your site feel more realistic.

photocredit:http://humaan.com/about/

For example, the rolling-touch effect is common in interactive design of information visualization, but a Web site like the above Humaan (see) that reflects teamwork and flat management will also use this technology.

photocredit:https://houseofborel.com/

House of Borel () is a popular luxury brand website that gives people a feeling more like a Web site that tells an interactive story than a website in the traditional sense. The following is a case of information interaction elements: scrolling triggers video playback-an experience that guides users through different chapters and focuses on visual narrative rather than hierarchical navigation; it works on some elegant and noble brand sites, and this interactive experience will first make you feel the elegance and nobility of life, Then slowly show its products.

three. Micro-interaction

Micro-interaction is an instant interaction event that completes a single task, such as reminding a user of a ringtone on an iphone, logging in to a Web bank, or collecting an article on Facebook that is part of a micro-interactive experience design.

When browsing the Web or using the app, you may have been involved in hundreds of of daily micro-interactions, all of which add up to create a complete user experience. Micro-interactions can be said to be the smallest interactive design element, but the effect is very important (FASTCO) design is said to be called the design of the Star of tomorrow. Imagine how fast you can get out of this site if you can't set a username and password after a few clicks, or if the Ad pop-up window is too frequent when you browse the site.

photocredit:https://www.formlets.com/

Photocredit:http://surpris.es/#url

Whether it's a small blog or a large global e-commerce site, these tiny interactions are almost all about the core features of each site:

? Perform tasks-This interaction includes simple actions such as logging in to the interface, adding update status, setting alarms, and so on.

? Element link-Synchronize two identical elements between two devices or two sites to create a microscopic interaction, whether the synchronization mode is synchronized between the devices via multiplayer or through the app, or simply synced via Bluetooth headset and mobile phone, all of which belong to the element link category.

? Make adjustments-any changes in the functionality of the site (such as turning an app to mute or lowering the volume of the music player) and the corresponding visual or auditory feedback will form a micro-interaction, and some micro-interactions are so small that the user does not feel at all during the operation, This is why in the process of micro-interaction design requires extra care, to make people feel that there is enough feedback without any feeling of compulsion.

? State tuning-turning a website or a feature on or off to change their state is actually a small interaction.

? Unique data interaction-data interaction refers to obtaining real-time user data (such as viewing local weather or traffic conditions), which is the result of performing an action, opening an application or checking a site with a location function to produce the corresponding data.

Each operation initiates one of these behaviors, and the user starts the program by doing something on the site or application (even after the previous step). All of these principles are designed according to the user's "Call to Action" pattern (the principle of interaction design-what is going to happen and how it happens, the user's feedback-whether to do it or not, how it happens-whether it happens or not), and once the interaction begins, every tiny detail becomes part of the overall design plan , if you want to learn more about micro-interaction, we highly recommend you visit the Dansaffer website.

Four. Hierarchical Relationships

Creating a fascinating interactive experience is not simply the ability to add functionality to the site, it needs to be planned, which requires not only layered design technology but also the user's traffic and behavior habits, and if you can combine visual perspective, long axis scrolling and background video technology, Your design can visually attract and retain customers, but this technology should be careful not to overdo it, a bad design and a fine hierarchical relationship with only a line.

Below we recommend three well-structured web sites that fully interpret the connotation of immersive interactive design:

I. AIGA-Years of Design

Design This "Years of design Web site (centennial)" website is to celebrate web design as an art form has gone through 100 years of history, this site uses a variety of technology and popular elements, From a scrolling operation to a hamburger-style menu to a user-contributed visual design, each new interface contains information, animations that support the design concept, and clues to the next operation, whether through navigation or the use of a boot key on the display.

photocredit:http://celebratedesign.org/

II. Eventbrite Seat Designer

Eventbrite's online ticketing platform provides users with an amazing tool that provides a user-defined booking experience for special locations and events that was previously only available on a large site, and only a few clicks on the website's operating platform. You can easily customize your preferred seating arrangement.

Eventbrite's interactive interface uses a nearly flat design style, with lots of vivid colors, easy-to-use menus, and smooth interface transitions in the interface.

photocredit:https://www.eventbrite.com/l/reserved-seating/

iii. Sonoran ' s Valley

The Sonoran's Valley site features a game-based experience where users enter a number of unique information to participate in a magical journey of numbers. The site uses fantastic animations, video layering, and a standardized burger-style navigation design, and the main interface is loaded with a minimalist design that gradually transforms into a wide-screen video playback style (a site that lets you browse for hours without having to stay).

photocredit:http://sonorans-valley.com/

thinking goes beyond the current

These sites and technologies may be at the forefront of today's design, but how long can these advanced technologies stay in the eyes of the user? The best way to always stay ahead is to think ahead and carefully study the evolution of user needs, and we can confidently (not necessarily) predict future trends.

Many people think wearables are the next blue Sea of interactive design, but the interactive design of wearable devices may turn to more subtle tactile designs, while less visual design elements, and watch vibrations may be more popular than voice reminders or large pictures on the screen.

photocredit:http://cinderellapastmidnight.tumblr.com/

In all media, interactive design may be more likely to become an episodic design like a TV show, but it will maintain the core function of its digital design.

When you want to use your design to help users achieve their goals, as you put the user's choice into a part of the plot presented on the site, of course, this does not apply to all sites (such as e-commerce sites or bank sites), But it will certainly play an important role in the content traffic highly visualized site, and we have seen this technology as a common web design technique for the background design of the video.

As a visual medium, the boundaries between television, computers and mobile phones will become increasingly blurred, and interactive design will constantly integrate visual elements and environmental elements, and vibrations, sounds and some necessary operations will become more common. This is especially true for websites and applications designed for mobile phones or wearable devices with user-controlled elements.

While many of the plans for the future are only speculative, the basic features of the user generally do not change, for example, we can foresee that the user is always fond of the interactive and participatory design, and the only change is that the method of providing such interaction and participation will change.

New Trends in web design: immersive interactive design