Interactive design and user experience design

App and web: Interactive design is a system flow consisting of three basic elements: page, icon and text.

Interactive design concept

Path efficiency behavior

1, use the shortest path to achieve your desired goal.

2. Interactive design determines the efficiency of users using products.

3. Help users guide in the simplest way, and let users find the content they care about and the functions they want to use.

User experience design concept

feel

User experience is a pure subjective feeling established by users in the process of using products. In the whole process, it is an all-round physical and mental contact and experience.

User experience runs through the product:

Usefulness (basic)

usability

Friendly (you can't lose the user's recognition of your product)

? Core elements of user experience

The core and essence of user experience is to study people's thinking mode and logic in specific situations, and then adapt and use it.

For example, through the shortest path to promote the user's desire to buy.

Timely feedback

Indicators of communication between products and users

Is interaction design effective?

Is the information conveyed accurately?

Feedback Type-Visual

The most common feedback method, so it is also the most easily overlooked by users.

1, Toast Tip: Generally, it appears briefly within 2 to 3 seconds, can appear anywhere on the screen, and then disappears automatically without any operation. Content messages are not important.

2. Pop-up prompt: mainly used to ask the user whether it is necessary to perform an operation.

3. Button pressed state: When the user presses the button being used, a pressed state usually appears to let the user know that his operation has been responded.

4. Dynamic feedback: It helps users to understand the operation intuitively, and at the same time, it will leave a deep impression on users and enhance the attractiveness of products.

Note: Simple and easy to understand, simple to operate, feedback information, appropriate use of illustrations to attract users' attention and help users prompt to judge the type.

(sense of) hearing

The intensity is higher than the vision, but the usage rate is not very high, so it can't be used as the main feedback. Users should be given the right to close it, because users will resent excessive use.

sense of touch

Relatively rare but very strong feedback, basically as an aid.

The operation process is simple

1, using natural thinking and non-programmed thinking

2. Design around the user's purpose

3, reduce the search steps

4. Advanced common functions.

5. Follow established user habits.

Audit interaction:

Predictable before operation 1

2 there is feedback in the operation

3. It can be revoked after operation.

User habits and user experience:

User habits are greater than user experience.

UE: abbreviation of user experience (called UX abroad)

The soul position of product design, through the analysis of user psychological model, product functional requirements. Design the task flow, use interactive knowledge to build the core structure of the product, and design the prototype to finally realize the usability and usability of the product.

Mind Map and Prototype Diagram of PM Project Manager

Front-end development: FE (front-end development) can only be used.

R&D: RD (research and development) focuses on back-end technology realization: functional technology realization, which can be seen and used.

Testing: quality assurance

At least 2-3 product managers,

When the designer travels for 3 people, there must be 6 people at the front end and 9 people at the back end. The test is 1-2.

User interface design concept

Project meeting: brainstorming

User avatar (user pain points, user stories)

Competitive product analysis

Make product documents and flow charts.

Participants: Everyone

Communication meeting to confirm product documents

The designer checks the prototype drawings.

Programmers consider development costs.

Participants: product managers, designers and programmers.

Prototype drawing-low fidelity (no picture icon)

Why do we need low fidelity? The low fidelity prototype helps us to verify the rough expression of ideas in the initial stage of design.

It is easier and cheaper to make low-income prototypes.

Communication meeting: confirming the truth of subsistence allowances

The product manager checks the minimum living allowance.

Engineers check whether the minimum living guarantee can really be realized.

Engineers build frames.

Communication meeting: confirming high fidelity

The product manager confirms that the interface meets the product requirements.

Can engineers interact with each other?

Communication meeting: how to contact?

How to crop pictures and how to name them.

How to interact, how to interact

Product development completed

Designer check interface

Test engineers look for bugs

Engineers correct mistakes.

Project meeting: brainstorming

Next version planning

Test engineers continue to look for vulnerabilities.

The engineer continued to correct the mistake.

Time node: app78, ten pages, about three months, web week.

Six principles of interactive design

Fitz's Law: The time for the cursor to reach the target is related to the distance between the current cursor position and the target position and the size of the target.

Hick's Law: This means that the more choices a person faces, the longer it takes to make a decision.

Tesler's Law: This law points out that there is a critical point in the inherent complexity of a product, beyond which the process can no longer be simplified.

4 error-proof principle

5 razor rule: we should not be too complicated in function when making products, but should ensure simplicity and instrumentality (good use abroad, poor use at home)

6 Approach Rule: Try to put similar and related information together, don't confuse users, and subconsciously know where to find the information you want.

The misunderstanding of designers

Myth 1: Mapping is the job of background operation.

This page consists of icons, text and pictures.

Myth B: There can only be one color in the status bar.

Myth c: the dynamic effect of the interface is given to AE.

1code4app

The market has completed its dynamic effect.

3AE auxiliary implementation (with preconditions)

4keynote auxiliary implementation

Myth D: Satisfy all users (more than 50%)

Misunderstanding E: Do exactly as the product manager intended.

1 refute the unreliable demand of product managers.

2. Actively analyze and study data to improve user experience.

3 Think deeply about the usage scenario

Follow up the development and find an economical and efficient solution.

5 Find innovative and interesting ways to interact

? Didot serif English: fashion accessories