Integration design. Every pixel matters. Part 2
We continue to publish articles in the footsteps of Design Camp . Today we have a continuation of the speech by Evgeny Gavrilov ( studioab ) about how the design integration team works in Windows Phone. The first part is available here: habrahabr.ru/company/microsoft/blog/170719 .
Integration of the design is impossible without a change in the code. If we want to integrate design integration into the development process, we must understand that changes to the code are simply necessary. The level of confidence in the integrator should be the same as the level of trust in the programmer. The integrator is responsible for all changes made to the code. He is responsible for all the build-breaks, test-breaks that he can accomplish.
In order to improve the quality of the code, a double scheme of checking the quality of the code was introduced in our group. If we look at the integration process, as it happens with us, then each screen in the phone has a unique ID. To this ID, a task is assigned that is sent to the design integrator. In other words, any screen that you can open on the phone has a number, and a task for the design integrator is assigned to this number. Then, the integrator opens the code corresponding to this screen, makes changes, arranges all styles, all fonts, all colors and, when the files are ready to be sent for review, it packs them and sends them to an internal check. Internal checks are carried out by Senior Integrators. They check how well the styles, fonts, etc. have been installed. Also, a copy of the letter is sent to the designer so that he can look and see if the final layout corresponds to the technical task. If everyone says that the code is in order and design corresponds to the TZ, then this code goes to the development team, that is, directly to the people who wrote this code, so that they can check it and make sure that everything is correct and no breaks and so on. If everything is fine, as a result, the integrator sends the code to the repository of the already corrected screen.
')
This is how the interface screen looks like, which the integrator gets with the task. This is what the programmer did. He arranged all the necessary elements, but they absolutely have no indentation from each other. Left and right indents are absent, fonts and styles are wrong, but the program as a whole works and corresponds to the functional technical task.
Then the design integrator, having access to the code repository and development tools, makes the necessary changes. At the output we get a screen that will match the design one by one. As you can see in the picture, button styles, icons, element colors, distances and indents are applied here.
After the screen corresponds to the design, the stage of visual testing begins. This is probably the most time-consuming and resource-intensive process in integration.
This graph with multiple layers shows how Windows Phone has a complex and rather complex interface that should work in different conditions and in different scenarios. Below are the main scenarios in which the design integrator tests each screen before sending it to the repository.
(QC: I recommend this moment also to look in the recordings starting from the 25th minute.)
Very often, new features and functionality are added to the product in the course of its development and development. From release to release, developers add new features to an existing interface. With a poor application architecture, a complex interface might look like this.
For example, in the first version of the product, the interface worked only in a dark theme - this is the lowest chair in the figure. In the next release, we decided: “We need to add a light theme”, the developer inserts some script into the markup, which will replace the interface elements and icons depending on the selected theme. Then we will add several languages, add orientation and support for multiple screen resolutions. As a result, the design as a whole begins to lose its stability and stability. Now, in order to change something in the lower layer, you need to do this so that the other layers do not change and the design does not fall or be equally stable. If in such a design try to move an element or increase its size, then most likely all the layers will change.
The first release of Windows Phone 7 contained 350 unique interface screens. In the next release there were already 1000 of them. The latest release of Windows Phone 8 already contained 1,700 screens.
The numbers above indicate the number of people who have worked in the design integration department since the first release. As you can see, they were at the beginning of 7, then 12, and in the latest release there were already 25. I want to note that this is a fairly large team that requires increased attention and management. All these people make changes to the code every day, sending hundreds of files for review, and the process of checking the quality and managing the team becomes very time consuming.
If in the next release we add the N-th number of screens, then our goal is to reduce the number of integrators to 15. In our opinion, this is the most optimal in terms of budget and resources, team size for the Windows Phone integration department.
Interface standardization is one of the top priorities for Windows Phone. The optimal ratio that we have chosen for ourselves is 80% of all screens in the interface should be standard, that is, use only standard controls, styles, patterns and layout, and only 20% of screens can be unique and not contain standard interface elements. If we achieve this goal, it will allow us to reduce the number of people in the integration team, improve the quality of the code and simplify the mechanism for supporting and developing the interface.
The word "standard interface" we also understand the interface that does not require subsequent integration. In other words, then, the developer can build an interface according to the TOR in such a way that he did from the very beginning it will correspond to the design, because it consists entirely of standard elements. Thus, there is no need for the design integrator to perform integration, check styles, or how correctly and precisely the dimensions, indents, etc. are set.
A small example of how this works in Windows Phone. Here is a standard interface. On the right side we see the markup code for this screen. As you can see, all controls have built-in indents and sizes, which allows you to build an interface from small blocks that are very similar to the Lego constructor. The developer simply needs to install the correct control and connect the necessary functionality, everything else will be in accordance with the default design. As a result, we get a screen that does not require design integration. That is, this screen will immediately fall into the final product without the participation of the integration team. This is the main idea of ​​standardizing the interface - to create more standard screens and reduce the number of unique ones that require the integration of design.
Here is an example of a standard interface. Similar pages about 80% in Windows Phone. The specification for the standard interface we call Blue Lines. That is, all standard elements on the screen are highlighted in blue. This means that the developer will need to follow clearly the instructions that are specified in the specification and use the controls and put them in the specified order. The main rule is no values, numbers or sizes for standard screens. All sizes, colors, styles have their names and encoding. If the developer fulfills all the requirements prescribed to him, then the screen will correspond to the design by 100% and will not require subsequent integration.
This is what the screen we call unique. As soon as we see red icons, sizes, pixels, lines or fonts, this means that this screen requires more elaboration or polishing. That is, this screen will get to our design integration department after the developer arranges all the elements. We indicate, for example, the height of the object, what distance between the paragraph and the picture, the size of the picture, etc. That is, there are no standard elements on this screen, except for the template. We call this screen Red Lines.
Green Lines. In the green layer, we show the click area, or the touch target touch area for any objects. Because this area can go beyond the apparent size of the object.
Trusting developers and integrators is key to the success of the design integration department. Batman must trust Robin 100%. Moreover, Batman must be confident in Robin that he will complete the task of designing the interface as precisely and correctly as possible. He relies on his knowledge, skills in design. He knows that Robin will always help him, or even answer some question, which grid to use, pattern, etc. There is a close relationship or cooperation between them and a relationship of trust.
You will have to answer this question yourself - “To be or not to be an integration of design in your product?”. For each team, the moment you begin to understand that product design is so important that you need to pay special attention to this and allocate resources for its integration. This moment comes in each team at a certain time. No one can make and convince you that the integration of design is required and necessary.
If your development process allows a team of designers and programmers to work as productively and harmoniously as possible, if they work as a whole, if your product exactly matches the design and initial idea, then this is good and excellent. You do not need to change anything in a process that is debugged and works at 100%.
But if your product does not look the way it was designed by designers, if it looks more like “patchwork egg” and you are ready to say - “yes, we want to change the existing development process and start integrating the design, here’s a list of tasks to help you get started with Design Integration in your product.
How important is design - this is a key decision that needs to be made at the very beginning of product planning. If the design does not occupy the highest priority place, it makes no sense to integrate the Design.
If your product has 10 screens, and all 10 have a unique design, then I can confidently say that something is wrong with your product. Practice shows that at least 8 screens out of 10 should be standard, and they should be performed using basic templates and standard controls and only 2 screens out of 10 can be unique. Always use the 80/20 rule. That is, 80% are standard, 20% are unique.
Strange regularity - designers do not like and sometimes even hate creating technical tasks for developers. But from experience, I can say that as soon as they are immersed in this process, everything magically falls into place. They begin to see the system, the standard, begin to follow the principles and rules of standardization. In other words, as soon as they begin to do the design specification and do it correctly, it makes the design much better and takes it to a completely different level.
Frames decide everything. In our team for the past 4 years, there is a whole system and methodology for conducting interviews for the position of a design integrator. On our own experience, we learned how to search for people with design skills and programmer skills. We created special visual tests, tasks and questions that we ask for an interview. You will also have to start doing this and look for qualified integrators. Now it is almost impossible to come to an employment agency and say: “I need design integrators”. There is no such specialty and there is no such profession yet. This is a new trend, which we hope will take its place in the list of IT occupations.
Everyone in the team is doing work for common success. Trust is very important. We need to strive for this and put maximum efforts in order to build the most trusting relationships between developers and integrators.
Technically, all modern frameworks allow you to do this separation. The main thing is to start building the correct application architecture as early as possible. Maybe 10 years ago it was difficult, and in most programs, markup and styles were inside functional code, and it would be very difficult for integrators to work. Now it's all much easier and easier. Proper application architecture is the key to the success of design integration.
If there is no code verification process in your group before sending it to the repository, you should start doing this immediately. Fortunately, there are a lot of professional solutions on the market. This will improve the quality of the code and will also help developers and integrators know more about the code and make fewer and fewer errors.
The largest and most laborious part of the integration process. Without this, it is impossible to make a quality product. Design integrators need to know and be able to test the interface. They must know the product 100%. They must be experts in all possible scenarios and interface states in order to properly test it.
How clearly you follow these principles is up to you, of course. Because not all teams today have the opportunity to hire and add a design integration team to their process. But today it is simply necessary that the maximum and correct meaning be given to the details of the design, so that design becomes at the forefront in the development and design of interfaces.
Software products that are entering the market today are gaining a huge amount of new users every day. At the same time, the audience of users is rapidly expanding and today we can safely say that design only for geeks is already in the past. Today, housewives, schoolchildren and even retirees use computers, tablets and smartphones. Therefore, designers need to constantly strive to find their user, understand who he is, learn to listen to him, see his needs, desires, aspirations and eventually produce a product just for him. Not for the robot, but for the common man, then the interface design will become more intuitive, understandable and simple. I will not be afraid of this word - start loving your user and he will reciprocate you.
Question : You are talking about a new design, that you have moved away from all the canons, and have developed everything anew. What do people who now have a design? How to make Windows 8 application from Winforms?
Answer : I think that the new design language of Windows UI Language (in the past Metro) requires a radical redesign of the interface. I would advise you to design a Windows 8 application from the very beginning, because the design philosophy of the new interface is completely different from Winforms.
Question : Hello, Eugene. Thank you very much for the interesting story. Tell me, please, does the QA department check the interfaces for compliance with the terms of reference? Or after the integration department of the design interface is considered complete.
Answer : If the design integrator has performed all the necessary operations, conducted a visual test and closed the task, then the interface screen is considered final. No additional verification is required. If the developer changes something in the code of this screen, then this task is automatically sent to the integrator in order to check the integration of the design again and if there are any unwanted changes.
Question : Hello. There it was about Batman and Robin. But there are still a lot of other roles in projects. How are they involved in the process? In particular, the interface designer is interested. Because if he first painted the interface and made some kind of application architecture, then he somehow had to participate in the development and control process.
Answer : Unfortunately, I did not have the opportunity to show in the presentation all the details of how the interface development process in Windows Phone works. In fact, integrators are part of one big design studio. In the process of integration, we interact very closely with conceptual designers, designers, testers, researchers, art directors, etc. At that moment, when we send the code for internal verification, all departments of the design studio are involved in the discussion and approval. Designers or designers always have the opportunity at this stage to influence the process or say: "You know, I probably missed some nuances and would like to correct them." But, as soon as this corrected code got into the repository and the task is considered closed, then in order for the designer to fix something in the interface, much more manipulations and gestures are required.
10. Code verification at the Design Integration stage
Integration of the design is impossible without a change in the code. If we want to integrate design integration into the development process, we must understand that changes to the code are simply necessary. The level of confidence in the integrator should be the same as the level of trust in the programmer. The integrator is responsible for all changes made to the code. He is responsible for all the build-breaks, test-breaks that he can accomplish.
In order to improve the quality of the code, a double scheme of checking the quality of the code was introduced in our group. If we look at the integration process, as it happens with us, then each screen in the phone has a unique ID. To this ID, a task is assigned that is sent to the design integrator. In other words, any screen that you can open on the phone has a number, and a task for the design integrator is assigned to this number. Then, the integrator opens the code corresponding to this screen, makes changes, arranges all styles, all fonts, all colors and, when the files are ready to be sent for review, it packs them and sends them to an internal check. Internal checks are carried out by Senior Integrators. They check how well the styles, fonts, etc. have been installed. Also, a copy of the letter is sent to the designer so that he can look and see if the final layout corresponds to the technical task. If everyone says that the code is in order and design corresponds to the TZ, then this code goes to the development team, that is, directly to the people who wrote this code, so that they can check it and make sure that everything is correct and no breaks and so on. If everything is fine, as a result, the integrator sends the code to the repository of the already corrected screen.
')
This is how the interface screen looks like, which the integrator gets with the task. This is what the programmer did. He arranged all the necessary elements, but they absolutely have no indentation from each other. Left and right indents are absent, fonts and styles are wrong, but the program as a whole works and corresponds to the functional technical task.
Then the design integrator, having access to the code repository and development tools, makes the necessary changes. At the output we get a screen that will match the design one by one. As you can see in the picture, button styles, icons, element colors, distances and indents are applied here.
11. Visual testing is an integral part of the Design Integration process.
After the screen corresponds to the design, the stage of visual testing begins. This is probably the most time-consuming and resource-intensive process in integration.
This graph with multiple layers shows how Windows Phone has a complex and rather complex interface that should work in different conditions and in different scenarios. Below are the main scenarios in which the design integrator tests each screen before sending it to the repository.
(QC: I recommend this moment also to look in the recordings starting from the 25th minute.)
12. Errors in the construction of complex interfaces
Very often, new features and functionality are added to the product in the course of its development and development. From release to release, developers add new features to an existing interface. With a poor application architecture, a complex interface might look like this.
For example, in the first version of the product, the interface worked only in a dark theme - this is the lowest chair in the figure. In the next release, we decided: “We need to add a light theme”, the developer inserts some script into the markup, which will replace the interface elements and icons depending on the selected theme. Then we will add several languages, add orientation and support for multiple screen resolutions. As a result, the design as a whole begins to lose its stability and stability. Now, in order to change something in the lower layer, you need to do this so that the other layers do not change and the design does not fall or be equally stable. If in such a design try to move an element or increase its size, then most likely all the layers will change.
13. Integration of design in an ever-growing product.
The first release of Windows Phone 7 contained 350 unique interface screens. In the next release there were already 1000 of them. The latest release of Windows Phone 8 already contained 1,700 screens.
The numbers above indicate the number of people who have worked in the design integration department since the first release. As you can see, they were at the beginning of 7, then 12, and in the latest release there were already 25. I want to note that this is a fairly large team that requires increased attention and management. All these people make changes to the code every day, sending hundreds of files for review, and the process of checking the quality and managing the team becomes very time consuming.
If in the next release we add the N-th number of screens, then our goal is to reduce the number of integrators to 15. In our opinion, this is the most optimal in terms of budget and resources, team size for the Windows Phone integration department.
14. Interface Standardization
Interface standardization is one of the top priorities for Windows Phone. The optimal ratio that we have chosen for ourselves is 80% of all screens in the interface should be standard, that is, use only standard controls, styles, patterns and layout, and only 20% of screens can be unique and not contain standard interface elements. If we achieve this goal, it will allow us to reduce the number of people in the integration team, improve the quality of the code and simplify the mechanism for supporting and developing the interface.
The word "standard interface" we also understand the interface that does not require subsequent integration. In other words, then, the developer can build an interface according to the TOR in such a way that he did from the very beginning it will correspond to the design, because it consists entirely of standard elements. Thus, there is no need for the design integrator to perform integration, check styles, or how correctly and precisely the dimensions, indents, etc. are set.
A small example of how this works in Windows Phone. Here is a standard interface. On the right side we see the markup code for this screen. As you can see, all controls have built-in indents and sizes, which allows you to build an interface from small blocks that are very similar to the Lego constructor. The developer simply needs to install the correct control and connect the necessary functionality, everything else will be in accordance with the default design. As a result, we get a screen that does not require design integration. That is, this screen will immediately fall into the final product without the participation of the integration team. This is the main idea of ​​standardizing the interface - to create more standard screens and reduce the number of unique ones that require the integration of design.
15. Terms of Reference and Design Specification
Here is an example of a standard interface. Similar pages about 80% in Windows Phone. The specification for the standard interface we call Blue Lines. That is, all standard elements on the screen are highlighted in blue. This means that the developer will need to follow clearly the instructions that are specified in the specification and use the controls and put them in the specified order. The main rule is no values, numbers or sizes for standard screens. All sizes, colors, styles have their names and encoding. If the developer fulfills all the requirements prescribed to him, then the screen will correspond to the design by 100% and will not require subsequent integration.
This is what the screen we call unique. As soon as we see red icons, sizes, pixels, lines or fonts, this means that this screen requires more elaboration or polishing. That is, this screen will get to our design integration department after the developer arranges all the elements. We indicate, for example, the height of the object, what distance between the paragraph and the picture, the size of the picture, etc. That is, there are no standard elements on this screen, except for the template. We call this screen Red Lines.
Green Lines. In the green layer, we show the click area, or the touch target touch area for any objects. Because this area can go beyond the apparent size of the object.
16. Developer Trust
Trusting developers and integrators is key to the success of the design integration department. Batman must trust Robin 100%. Moreover, Batman must be confident in Robin that he will complete the task of designing the interface as precisely and correctly as possible. He relies on his knowledge, skills in design. He knows that Robin will always help him, or even answer some question, which grid to use, pattern, etc. There is a close relationship or cooperation between them and a relationship of trust.
17. Design Integration - To Be Or Not To Be
You will have to answer this question yourself - “To be or not to be an integration of design in your product?”. For each team, the moment you begin to understand that product design is so important that you need to pay special attention to this and allocate resources for its integration. This moment comes in each team at a certain time. No one can make and convince you that the integration of design is required and necessary.
If your development process allows a team of designers and programmers to work as productively and harmoniously as possible, if they work as a whole, if your product exactly matches the design and initial idea, then this is good and excellent. You do not need to change anything in a process that is debugged and works at 100%.
But if your product does not look the way it was designed by designers, if it looks more like “patchwork egg” and you are ready to say - “yes, we want to change the existing development process and start integrating the design, here’s a list of tasks to help you get started with Design Integration in your product.
"Design Driven" product
How important is design - this is a key decision that needs to be made at the very beginning of product planning. If the design does not occupy the highest priority place, it makes no sense to integrate the Design.
Interface standardization
If your product has 10 screens, and all 10 have a unique design, then I can confidently say that something is wrong with your product. Practice shows that at least 8 screens out of 10 should be standard, and they should be performed using basic templates and standard controls and only 2 screens out of 10 can be unique. Always use the 80/20 rule. That is, 80% are standard, 20% are unique.
Technical Assignment and Design Specification
Strange regularity - designers do not like and sometimes even hate creating technical tasks for developers. But from experience, I can say that as soon as they are immersed in this process, everything magically falls into place. They begin to see the system, the standard, begin to follow the principles and rules of standardization. In other words, as soon as they begin to do the design specification and do it correctly, it makes the design much better and takes it to a completely different level.
Qualified Integrators
Frames decide everything. In our team for the past 4 years, there is a whole system and methodology for conducting interviews for the position of a design integrator. On our own experience, we learned how to search for people with design skills and programmer skills. We created special visual tests, tasks and questions that we ask for an interview. You will also have to start doing this and look for qualified integrators. Now it is almost impossible to come to an employment agency and say: “I need design integrators”. There is no such specialty and there is no such profession yet. This is a new trend, which we hope will take its place in the list of IT occupations.
Trust of developers and testers
Everyone in the team is doing work for common success. Trust is very important. We need to strive for this and put maximum efforts in order to build the most trusting relationships between developers and integrators.
Clear separation of functional and markup code
Technically, all modern frameworks allow you to do this separation. The main thing is to start building the correct application architecture as early as possible. Maybe 10 years ago it was difficult, and in most programs, markup and styles were inside functional code, and it would be very difficult for integrators to work. Now it's all much easier and easier. Proper application architecture is the key to the success of design integration.
Code change checking system
If there is no code verification process in your group before sending it to the repository, you should start doing this immediately. Fortunately, there are a lot of professional solutions on the market. This will improve the quality of the code and will also help developers and integrators know more about the code and make fewer and fewer errors.
Visual testing
The largest and most laborious part of the integration process. Without this, it is impossible to make a quality product. Design integrators need to know and be able to test the interface. They must know the product 100%. They must be experts in all possible scenarios and interface states in order to properly test it.
How clearly you follow these principles is up to you, of course. Because not all teams today have the opportunity to hire and add a design integration team to their process. But today it is simply necessary that the maximum and correct meaning be given to the details of the design, so that design becomes at the forefront in the development and design of interfaces.
18. Design for people
Software products that are entering the market today are gaining a huge amount of new users every day. At the same time, the audience of users is rapidly expanding and today we can safely say that design only for geeks is already in the past. Today, housewives, schoolchildren and even retirees use computers, tablets and smartphones. Therefore, designers need to constantly strive to find their user, understand who he is, learn to listen to him, see his needs, desires, aspirations and eventually produce a product just for him. Not for the robot, but for the common man, then the interface design will become more intuitive, understandable and simple. I will not be afraid of this word - start loving your user and he will reciprocate you.
Questions and answers
Question : You are talking about a new design, that you have moved away from all the canons, and have developed everything anew. What do people who now have a design? How to make Windows 8 application from Winforms?
Answer : I think that the new design language of Windows UI Language (in the past Metro) requires a radical redesign of the interface. I would advise you to design a Windows 8 application from the very beginning, because the design philosophy of the new interface is completely different from Winforms.
Question : Hello, Eugene. Thank you very much for the interesting story. Tell me, please, does the QA department check the interfaces for compliance with the terms of reference? Or after the integration department of the design interface is considered complete.
Answer : If the design integrator has performed all the necessary operations, conducted a visual test and closed the task, then the interface screen is considered final. No additional verification is required. If the developer changes something in the code of this screen, then this task is automatically sent to the integrator in order to check the integration of the design again and if there are any unwanted changes.
Question : Hello. There it was about Batman and Robin. But there are still a lot of other roles in projects. How are they involved in the process? In particular, the interface designer is interested. Because if he first painted the interface and made some kind of application architecture, then he somehow had to participate in the development and control process.
Answer : Unfortunately, I did not have the opportunity to show in the presentation all the details of how the interface development process in Windows Phone works. In fact, integrators are part of one big design studio. In the process of integration, we interact very closely with conceptual designers, designers, testers, researchers, art directors, etc. At that moment, when we send the code for internal verification, all departments of the design studio are involved in the discussion and approval. Designers or designers always have the opportunity at this stage to influence the process or say: "You know, I probably missed some nuances and would like to correct them." But, as soon as this corrected code got into the repository and the task is considered closed, then in order for the designer to fix something in the interface, much more manipulations and gestures are required.
Source: https://habr.com/ru/post/171175/
All Articles