A complete guide to interactive design Beginners

Interactive design originated from website design and graphic design, but now it has grown into an independent field. Today's interaction designers are far from just being responsible for text and images, but are responsible for creating all the elements on the screen that all users might touch, tap or enter: In short, all the interactions in the product experience.

　　

This article is a good starting point for anyone interested in learning more about interactive design. We will briefly discuss the history of interactive design, relevant guidelines, noteworthy contributors, and tools for this fascinating subject.

First, what is interactive design?

Interaction Design (IxD) defines the structure and behavior of an interactive system. Interaction designers strive to create meaningful associations between users and the products or services that users use, whether from computers to mobile devices, home appliances, or anything else. Our practice will continue to evolve with the world. --Interactive Design Association (IxDA)

The interaction design began the day the first screen was designed to hold information other than a static copy. From the button, everything linked to the form is part of the interactive design. Over the past few decades, a number of related books have been published, explaining all aspects of interactive design and exploring ways to cross and overlap interaction design with experiential design.

The development of interactive design helps and facilitates interaction between people and the environment in which they are located. Unlike user experience design, which occupies all user-oriented systems, interaction designers only care about specific interactions between users and screens. In practice, of course, it is never so clearly separated.

Second, the common design method of interaction

Although interactive design spans countless types of web and mobile applications and websites, there are some fixed ways that all designers can rely on. We will explore some of the more common approaches: target-driven design, usability, five dimensional theory, cognitive psychology, and HMI guidelines.

1. Target-driven design

The goal-driven design was promoted by Allen Coux Cooper in his book "Prisoners are escaping from asylum: Why high-tech products make us crazy, how to Restore Sanity" (published in 1999). Allen defines a goal-driven design as the design process that solves the problem as the highest priority. In other words, the goal-driven design focuses on meeting the specific needs and desires of the end user, unlike the old design approach that focuses on the technical side.

Today, some of Allen's ideas are obvious because designers rarely choose to design interactions that are completely constrained by technological development constraints. However, its core approach is to meet the needs of end users and want, that is, this is as necessary for now and once.

According to Allen, the goal-driven design process needs to be transformed into five ways of thinking as an interaction designer.

　　

1) First design, re-programming. In other words, the goal-driven design first needs to consider how the user interacts with the product, rather than starting with the technical factors.

2) Independent design and programming of the responsible. The need for this is that it allows the interaction designer to embrace the user as much as possible without worrying about technical limitations. A designer should trust his or her developers to deal with technical issues, in fact Allen suggests, or put the designer in a conflict of interest position.

3) Designers are responsible for product quality and customer satisfaction. Although stakeholders or clients will have their own goals, the interaction designer is also responsible for anyone on the other side of the screen.

4) Define a specific user for your product. The idea has grown to become the most common object of user research now: the role model. However, Allen continues to remind us to link the role model back to the product and ask ourselves, "Where will this user be using this product?" Who is he or she? What goal does he or she want to accomplish?

5) pair work. The last point is that the interaction designer should not do the work alone, but should collaborate with others, Allen calls it the key "design communicator." Although Allen, as a design communicator, conceived in 1999 as a typical ad-writing writer to provide copies of marketing products, the design Communicator has expanded to include many others, including project managers, content strategists, information architects, and so on, today.

2. Availability

　　

Usability may feel like a vague concept, but its core is just a simple question for the designer-"is it easy for anyone to use this product?". This concept has been explained in countless books and web articles, and we will review some of the different definitions to discover some common themes and nuances:

In Allendix, Jennitfenly, La Selbille, Gregory Aberde, the book "Man-Machine Interaction", usability is divided into three principles:

Easy to learn: how easy is it for new users to navigate the system?

Flexibility: How many ways can you achieve user and system interaction?

Robustness: How do we support users when they are faced with their operational errors?

At the same time, the availability explained by Nielsen and Schneider Derman is made up of five principles:

Easy to learn: how easy is it for new users to navigate the system?

Validity: How quickly does a user perform a task?

Memory: If a user does not have access to the system for a period of time, how much do they remember the interface?

Error degree: How many errors did the user make and how quickly did they recover from the error?

Satisfaction: Do users like the interface they use, and are they satisfied with the results?

Finally, international standards (ISO 9241) also break down the term usability into five principles:

Easy to learn: how easy is it for new users to navigate the system?

Understandable: How much do users understand the interface they see?

operability: How much control does the user have on the interface?

Attraction: What is the visual appeal of the interface?

Ease of Use compliance: Does the interface follow the standard?

Clearly, in these explanations, we can see that the interface that makes up the available is a common theme, regardless of the principle that a designer is based on, and usability is an important consideration when designing any interface.

3. Five dimensional theory

In Bilmogrich's interview book "Design Interaction", Gillian Smith, an interactive design scholar, introduced the concept of four-dimensional space of "interactive design language". In other words, these dimensions can form the interaction itself, so they finally form the communication between the user and the screen. The original four dimensions are this: discourse, visual representations, objects or spaces, and time. Recently, Kevin Silve, a senior interaction designer at Idexx Labs, added the fifth dimension to behavior.

One-dimensional: discourse should be as easy as possible for the user to understand, in such a way that information can be easily communicated to the end user.

Two-dimensional: visual representation is generally a graphic or image, basically refers to all non-textual things. They should be used in moderation rather than overwhelmed.

Three-dimensional: a physical object or space refers to physical hardware, whether it is a mouse and keyboard, or a mobile device that any user can interact with.

Four-dimensional: time is the length of time the user spends interacting with the first three dimensions. It also includes ways that users might use to measure progress, including sound and animation.

Five-D: Kevin Silve added the dimension of behavior in his article "Design in interactive design". This refers to the emotions and reactions that occur when users interact with the system.

By using these five dimensions, the interaction designer can focus on the user's experience of communicating and connecting with the system.

　　

4. Cognitive psychology

Cognitive psychology is a study of how the brain works, with its psychological processes occurring. According to the American Psychological Association, these processes include "attention, language use, memory, perception, problem solving, creativity and thinking."

Although psychology is a very broad field, cognitive psychology attaches particular importance to some of these key elements, in fact, this may help in the formation of the field of interactive design. Donnoman mentioned many of these concepts in his book, The design of everyday life. Here are just a few of those concepts:

1) Mental model refers to a picture in the user's mind, so that they produce a specific interaction or system expectations. By learning the user's mental model, the interaction designer can create a system that allows users to feel intuitively.

2) interface metaphor refers to the use of known behavior to guide users to generate new actions. For example, the Trash can icon on most computers is similar to a real trash bin, which is intended to remind users to do what they expect.

3) Functional visibility means that interface elements are designed not only to achieve functionality, but also to make them look like they can be achieved. For example, a button looks like an object that can be pressed, which is the design of a functional visibility so that people unfamiliar with the button can still understand how to interact with it.

5. HMI Guide

　　

This part of the content is actually a bit inappropriate, in fact, there is no complete human-machine interface guide. However, the idea behind creating a man-machine interface Guide is itself a methodology. The guidelines are built by major technology design companies, including Apple and Android, Java, and Microsoft. Their goals are the same: use these suggestions and recommendations to alert future designers and developers, which will help them create a universally intuitive interface and programs.

Iii. Daily tasks and deliverables

The interaction designer is a key player throughout the development process. The series of activities he or she engages in are key to the project team. These activities typically include the formation of design strategies, the making of key interactions into wireframes, and the creation of all interactions as product prototypes.

1. Design Strategy

Although the boundaries of this will be blurred, one thing is certain: an interaction designer needs to know who he is designing for and what the user's goals are. Typically, this information will be provided by the user researcher. The interaction designer will then evaluate the goals and form a design strategy, independently or by the help of other designers in the team. A good design strategy will help team members to have a common understanding of what needs to happen in what areas of interaction to facilitate user goals.

2. Wireframe for key interactions

　　

Once the interaction designer has a good idea of the design strategy used to motivate the design, it is possible to begin sketching and drawing out the interfaces that will facilitate the necessary interaction. The great doors of interaction are hidden in the details: in the process, some experts sketch directly on the cardboard, while others use the online application to help them, while others use a combination of the two. Some experts work together to create these interfaces, while others create them on their own. It all depends on the interaction designer's own specific workflow.

3. Prototypes

　　

Depending on the needs of the project, the next logical step for the interaction designer might involve creating a prototype. There are many different ways in which a team makes interactive prototypes, such as html/css prototypes, or paper prototypes, where we don't cover a wide range of details.

4. Keeping the epidemic

For a real interaction designer, the hardest part is adapting to the pace of industrial change. Every day, a new designer may have to look at the medium in a different direction. As a result, users will also expect these new types of interactions to appear on your site. Discreet interaction designers respond to this evolution, constantly exploring online interactions and leveraging new technologies, but we always have to remember that the right interactions or technologies are the ones that best meet the needs of role users, not just the most innovative or exciting ones. Interactive designers also promote the development of the media itself by following an interactive design of thought leaders (such as the following famous designers) on Twitter to keep the epidemic alive.

Four, famous designers

　　

From left to right, top to bottom, respectively:

ALAN cooper,bill Scott,brad Frost,brenda Laurel,brenda SANDERSON,

DAN Saffer,don norman,karen mcgrane,kim goodwin,mat MARQUIS,

MIKE Monteiro,theresa Neil,whitney HESS

Translator Note: This space is too long, so the designer is aggregated, you can view the detailed personal description in the original text.

V. Tools

Interaction designers use many different tools to accomplish their work. Whether you're drawing an interactive sketch on a napkin or showing a prototype to a customer, the goal is the same: communicate through dialogue. What interaction designers need most is communication. The following list is a series of tools for promoting dialogue. Remember, the resulting web interface is often done with user-facing (front-end) technology, such as css/html.

1.BALSAMIQ MOCKUPS

　　

Balsamiq's simple interface, using hand-drawn style elements and Comic Sans fonts, makes the process of making interactive wireframes simple and can be thought of as an online version of a paper prototype!

2.INVISION

　　

Invision is a free prototyping tool for websites and mobile apps. Invision aims to promote communication by combining other applications such as Photoshop,sketch. Designers can upload wireframes and connect them through hot zones. Customers, stakeholders, and colleagues are designed to add comments directly and have real-time presentation tools LiveShare.

3.OMNIGRAFFLE

　　

OmniGraffle is an interactive designer on OSX that can take advantage of charting software that uses a monotonous aesthetic to create charting software OmniGraffle more focused on the interactive design behind it rather than on the design itself, while also having many excellent simulation functions.

4.PATTERNRY

　　

No one wants to waste time reinventing the wheel. Good interaction design or code aggregation can save time and effort, and ensure design consistency. Patternry is a tool that allows team interaction designers to share and store their design and code assets in a central location.

5.SKETCH

　　

Sketch is a design tool (MAC) that is best used for the advanced Fidelity model of icons and is a lightweight alternative to Adobe Photoshop.

6.AXURE

　　

Axure RP can be said to be the best interactive design tool on the market. More powerful features, built-in collaboration and sharing capabilities, and the ability to easily implement wireframe prototypes than Balsamiq. The downside is that it may provide too much, which means it has a slow learning curve.

7.UXPIN

　　

Uxpin is a collaborative design platform that supports low-fidelity wireframe and high Fidelity animated prototypes. Designers use Photoshop or sketch to create layered prototypes that can be imported directly and then get feedback from stakeholders. The tool also includes usability testing and live demo capabilities.

Vi. Associations and organizations

Whether or not an interaction designer belongs to any particular organization, it is still an interaction designer. However, finding other designers ' networks is a good way to learn from others. These associations are available in the United States, and some are international organizations.

1) Ixda-interaction Design Association

The Interactive Design Association, which provides an online forum for discussing interactive design issues.

2) Agia-american Institute of Graphic Arts

Graphic designers at the American Academy of Graphic Arts, which are more often designing works for new media, play an important part in interactive design.

3) meetup-meetup.com

In the Meetup interface search for "interactive design" and your city, you will find a certain number of network groups, educational organizations and social groups.

VII. Books

In fact, the list of related interactive design books can take up a lot of pages. Here, we narrowed it down into a list of several iconic books. If you really want to expand your book collection, you can look at the recommended book collection for our site search user experience.

　　

From left to right, in turn,

"Interactive design: Creating innovative applications and Devices (second edition)",

"Designing the Digital Age: How to create people-oriented products and services",

"Design Interface",

"Interactive design: Beyond human interaction",

"The design of everyday life",

Also recommended "Midas touch".

A complete guide to interactive design Beginners