Apply to the UI principles of great interaction design to make websites highly interactive

Interactive Design is now a very common problem, but many designers and developers still do not know its specific meaning. Today, we will be different from the past: We will explain in depth the user interface and design principles that enable your website to have good interactivity.

First, what is IxD?

Interactive Design (IxD) is a new field that has developed rapidly. It came about 10-15 years ago and was identified and accepted by professional designers because of some research that reflected design problems.

Interaction design promotes communication between people and the environment. Here we refer to communication between people and websites. Interaction designers only need to consider the interaction between users and computers, you do not have to think about all aspects of the software or system that involve users as UX designers do. You may have heard of human-computer interaction in different universities-these degrees are basically developed in the IxD field.

　What should such a designer do?

An interaction designer will think about who is the target user of the product and who will use it. The user investigator or information architect will provide the information. Based on these studies, it takes a long time for an interactive designer to communicate with the software, but it is necessary to create such an amazing way of interaction as soon as possible.

Designers must identify key interactions and draw out-of-the-box diagrams, so they must constantly draw sketches. Some designers will draw them out directly, some designers will use software to assist (some good examples are shown at the end of the article), and some other designers will or independently or collaboratively create interfaces.

　　

 

The interaction design (IxD) constantly presents new ways of interaction, because users always expect new things to happen on the website. But Interaction designers need to be aware of how these features affect users, and then choose what they really want to implement and can be put for a while in many ideas.

Below we will see some concepts that drive interaction design.

　　Target drive design

Although IxD does not need to be done, user research is crucial to get the best design feedback. When users use software, they generally have some goals in mind. Your applications should meet these goals well. In order to successfully combine the design and functions, user research is precisely the most important element.

This is so important that many user researchers can also find their work as Interaction designers because of their skills in analyzing human behavior patterns for software.

　　Simplicity

People do not know what the user interface is. In fact, they don't care either. They don't know how people plan what they see behind their websites. They only know that they need a simple website. They need an easy-to-use system with fast loading/response speed. Do not let users think and do not give users any reason for injury.

　　Scenarios and modes

Some of the products we use are usually designed with clear features, so everyone knows how to use them. Take Scissors as an example. A three-year-old knows how to use it. Two fingers stretch into two rings and only one activity method can use it. Nothing is simpler than this. Your website should be as easy to use as a pair of scissors.

Why is the word "scenario" used here? This word expresses the functions of some columns behind a website or system.

The user interface should be composed of a series of well-known components. If you want to submit a form, they will first find the submit button. This button is a common element, and the designer does not have to repeat the early wheel every time when accepting a new project.

　　

 

Some people will say that they will follow the existing model. If we don't reinvent the wheel, we will feel like there is no innovation. It is an idiot to discuss innovation when usability is not guaranteed. Remember, usability and innovation are two things.

If you want to innovate, you still need to understand the known patterns. However, if you are pursuing high usability, no one will encourage you to repeat the wheel because users need time to adapt to your wheel.

Creating an easy-to-use system requires Interaction designers to have a deep understanding of conventions, scenarios, and web usability.

Now that you understand some principles of interaction design, let's take a look at how a great interaction design affects users.

　Visitor Location

Interaction designers need to know which users their designs target, so they can position their products through users.

The page shows where the user stays. This experience will not confuse the user when browsing. You can also know how to jump from one page to another. It is very important to let users know where they are currently. Do not let them fall into a dead end. This interactive experience is poor when no search results are found and the user is not informed of the next operation selection.

　　Continuous Dialog

Interactive Design focuses a lot of energy on giving continuous feedback to users. Tell users whether they are doing right or wrong. Even at the unconscious level, this is also a popular element for users. You only need to tell the user that the operation has been completed.

When you buy an item on Amazon, you will get a confirmation letter in your browser and your mailbox. When you submit an email through the contact form, you will receive a confirmation letter on the page.

　　

 

This makes interaction not only focus on website browsing and feature usage, but also brings interaction to a new level: it helps users better understand their current status, and minimize doubts and problems, while also removing the user's frustration.

　Thinking Workflow

The IxD should also consider the workflow. If you have a registry ticket, what will happen if the user uses it to submit information? Will the page be refreshed, will it go to the home page, will it show confirmation information, will it go to the login page, or will it go to the last two pages at the same time?

It's about having between choices and choosing the one that will fit your users expectancies best. All the elements mentioned are part of the website workflow. Each interaction should follow the next logical step and be consistent with the experience created before your website.

　Visual hierarchy

You can use visual hierarchies to help users operate on what they mean. You can use the layout, element size, and color combination to highlight your eyes.

You can also use the visual hierarchy to help users find what they want. Do you want to rent a car? Make sure that you can use the visual hierarchy to guide users to the "lease" page.

　　Good box-based tools

It is so important to draw drafts and line charts, so I am willing to show you some useful tools so that you can begin interaction design immediately.

Mockingbird

　　

 

Mockingbird is a web-based application on which you can create, connect, preview, and share a diagram of a site or application. The interface is simple and friendly. You can drag and drop elements, resize them, and share them with colleagues through a link.

Because Mockingbird is a Web-based application, it means that you create and modify your ideas everywhere from any computer.

Lovely Charts

　　

 

Lovely Charts is an online chart application that allows you to create flowcharts, organizational Charts, site maps, and flow diagrams.

The main feature of this application is to speculate on recommendations based on the content you have drawn-This helps simplify the drawing process and easily return the old version and undo changes.

Mockflow

　　

 

MockFlow is also a good Web application, which has a clean and simple organizational interface and a wide range of features.

You can also use drag-and-drop components, including charts, menus, advertisements, and drop-down menus. You can upload your own images or select the general materials provided by the website, so the process of building the block diagram is very fast.

SimpleDiagrams

　　

 

Simplediagrams is another desktop application that helps users express their ideas by creating a block diagram. It is implemented using the same drag-and-drop technology as the application mentioned above.

Although less than other applications, simplediagrams provides basic tools to help users create block charts more quickly.

This is the end of today's simplediagrams article. Don't forget the importance of user testing. Remember that innovation and availability are usually in a different direction. Constantly innovate when creating a magical interactive interface, focusing on how to make it easier for people who use it.

Keep this in mind and you will become a great website or application interaction designer.

How do you think of this great interactive design field? Have you tried to design a similar interface element before, or do you want it to be desired after you know these principles?

All translations in this article are only used for learning and communication purposes. For reprinting, please be sure to indicate the author, source, and link to this article.

Our translation work complies with the CC protocol. If our work infringes your rights and interests, please contact us in time