The following article is from the official account: Hechueyan, author: Hechueyan.
Have you ever struggled with all the details (spacing, size) to keep your prototype from looking ugly, resulting in longer work hours and lost energy? In order to make the prototype close to the real effect, I will think about various delicate layouts. As a result, the leader says, “Why are you so beautiful now? This function has not been determined”…. Inappropriate prototypes were drawn at various stages.
So today I want to talk about the topic of “interaction prototype”, which is also a summary and precipitation of my own growth.
Article Contents:
· Different stages of the prototype
· 5 layers of prototyping and user experience
· Principles of prototype production
Part1: The different stages of prototyping
In fact, I think the concept of prototype drawing and design is the same: there is no good or bad, only whether it is suitable ~
When the product manager/interaction designer fails to recognize the current requirements phase, no matter how good or bad your drawing looks, some of the worst things can happen: paying attention to detail from the beginning, neglecting functional and logical thinking when the prototype needs to be output focused, trying to look good on the page when the functionality is uncertain…
Here is my definition of a ‘prototype’, drawn to represent requirements characteristics at different stages.
01. Idea Stage:
In the initial stages of product requirements, functional concepts are vague and most ideas remain in mind and spoken (typical scenarios at work, such as team storms, requirements discussions, meeting reviews). It requires us to constantly clarify concepts, verify the rationality of the requirements and the correctness of the goals.
So the emphasis of this stage is: prototype – visualization of our ideas, conceptual needs, and discussion and validation. Therefore, the most appropriate way is to use ‘sketch’ expression, rapid production and rapid modification, can see the prototype of the product immediately.
In addition to expressing ideas and exploring directions, the advantages of using ‘sketches’ to outline product prototypes include:
A. Improve your ability to think quickly, test hypotheses, and optimize your design process.
B. Can demonstrate your process of thinking about problems (design thinking) and demonstrate professional competence.
02. Modification Stage:
At this stage, the goal and direction of the product are relatively clear. Next, it is necessary to optimize the original concept idea, create an information architecture for the product, sort out the function logic and other work, which is convenient to promote the progress of product functions in the requirement review meeting and team discussion. This stage emphasizes: clarifying objectives – according to user demands, business objectives, operational needs and other different objectives, gradually sorting out the functional content (interface layout, information trade-off) to be displayed on the prototype.
So for the product manager/interaction designer, it’s just a matter of producing a ‘mid-fidelity prototype’ that is broadly legible and clarifies the functionality of the product. Facilitate immediate modification and transition to product finalization/high fidelity prototyping.
03. Determination stage:
At this stage, the functional layout and information design of the product requirements have all been determined. At this time, a comprehensive and rigorous’ high-fidelity prototype ‘is particularly important. On the one hand, it can provide basis for UI output of visual colleagues and implementation of development. On the other hand, hi-fi prototypes can be useful in A variety of work scenarios, such as interactive reviews, lead drafts, A/B tests, demos, and so on.
This stage emphasizes: detail check – because it is related to UI output and interface implementation, it is necessary to pay attention to various interaction details to prevent design and process loopholes. There are two latitude checks: a. Standard alignment If the team has a design specification, be sure to align visual elements such as font size, color, layout, spacing, etc. If existing styles can be reused, try to reuse them to avoid the situation of “one function, two styles”, as shown in the figure:
B. Interactive walk check
After the output of the high-fidelity prototype, it is necessary to sort out whether there are any loopholes in the prototype description one by one according to the interactive self-check table to prevent abnormal process and content status.
Also, try to use high-fidelity prototypes when you want to get user feedback and test if your idea is creating value for the business/users. The reason is that it can produce real operation effects and give users an ‘immersive’ browsing experience.
Finally, to summarize the use of prototypes at different stages:
· Sketch: Express ideas quickly, validate requirements, and show thought processes.
· Mid-fidelity prototype: Comb the general product framework and continue to optimize functions.
· High-fidelity prototype: provided basis for UI output and development implementation, tested user feedback, made interactive demo, submitted draft to leaders, etc.
Part2: Prototype and user Experience at different stages I also found how well the prototypes fit together with the five levels of user experience.
01. Strategic layer and Scope Layer – Sketches
What does the product want to do? How to meet strategic objectives? Sketching is a great way to conceptualize goals and requirements into ideas and content: express them quickly, validate them instantly, and ‘visualize’ ideas immediately.
02. Structural Layer – Mid-fidelity prototype
After the idea is expressed, it is necessary to formulate a specific framework for the product. According to business objectives and user demands, product functions and information design should be constantly modified to gradually finalize the product. So all you need to do is produce a roughly legible, easily modifiable, mid-fidelity prototype.
03. Frame Floor – HighFidelity prototype
This is the final stage of prototyping, where the product relationships have been clarified and the functional content has been determined. In this stage, attention is paid to the interface details of the prototype, such as sorting out abnormal processes, different states of information, alignment specifications and so on, so that the interface can be realized in the later stage, so a high-fidelity prototype is particularly important.
04. Presentation layer-UI renderings
After the prototype is determined, the next stage is the UI optimization, at this time the final effect of the product is also out. The next functional iteration of the product is also based on the prototype optimization and modification of the UI renderings.
Part3: Principles of interactive prototyping
Finally, a brief introduction to the principles of prototype production: ‘Use grey graphics’ and’ reuse existing styles’ to avoid future work:
01. Use gray maps
A prototype should look like a prototype, with a large color layout that makes it easy to think of it as a UI rendering, especially in interaction reviews.
02. Reuse existing styles
This has been said above, can reuse style reuse, avoid the situation of “one function two styles”, otherwise, and visual, development colleagues docking prototype, will cause a certain understanding interference.
Summary: Please comment on some of the insights on interaction prototypes that have been misdescribed.
Previous recommendations:
The Unchanging proposition of UX Design: How to Make interface design readable?
Case study | Treasure App “learning power” business logic
PRD can be read online now! Make document management easier
Copy guest canteen | Do product managers need to know technology?