Earlier I wrote that there is no design in 1C UI \ UX . This article is about how we, with the help of technologies such as Java Script, React.js and Google Firebase, decided to create a web service that will allow us to work out the UI with less labor, in comparison with 1C: Configurator and even more so 1C: EDT and UX design of the future 1C application, correct it on the fly and transfer the already agreed prototype of the future business application to the programmer.
To begin with, I'll tell you about the painful things when implementing projects on 1C, and so much so that they abandoned 1C and began to develop web technologies, but, oddly enough, to correct the situation in 1C.
Part 1 - problems. Tasks to be Solved
1. Tools for business analysts, project managers, sales managers.
Despite the development of technical tools of the 1C ecosystem (I wrote about 1C: EDT , etc.), the tools for those professionals who are at the forefront in development and implementation projects: business analysts, consultants, project managers, remain extremely scarce , one of the first to meet with the Customer, collect requirements, interpret what they heard, formalize in the form of technical specifications and other project documents. Moreover, so many advanced tools for forming TK, prototyping, and design, like programmers, do not have a “front-office”.
To show the Client what awaits him as a result of the project (programming), consultants draw forms in Paint, MS Excel and other tools that are not far from convenience. Until now, there is no consensus, a standard in the tools for formalizing business processes, someone uses Business Studio, someone Visio, the vendor itself is 1C: DSS, etc., not to mention the standard notation (IDF0, ARIS etc.).
2. Multiple iterations of work delivery
After the requirements are collected, formalized and agreed upon, all the material is transferred to the programmer, development begins, as a result of which a product is born that goes through two, three or more cycles of revisions, alterations, both technical (logic, algorithms) and interface, project terms increase, the budget is melting before our eyes, customer loyalty is being tested, the team is under stress and pressure. I am not talking about situations when a programmer is just learning and 4-5 iterations of delivery cannot be avoided, I am talking about alterations that arise due to the problems described above - the lack of adequate visualization tools for analysts, task managers.
3. Communication and the complexity of perception. Online implementation of 1C
Classic: The customer says one thing, means another, the analyst - the third, and the programmer - the fourth. In the current realities, the quarantine restrictions of face-to-face meetings are additionally imposed on this, and introductions by remote location begin.
4.UI and UX design, development of interfaces for solutions on 1C
For several years now, the 1C community has been pronouncing and discussing such terms as UI, UX, now we will talk about them, and we will also talk about CX.
- User Experience (UX) - user experience. The goal of a UX designer is to make sure that the user quickly and easily gets from the program what he is using it for.
- User Interface (UI) - user interface. The goal of a UI designer is to create an aesthetic product interface design.
The most striking example of UI and UX in everyday life (these are not only IT terms :-), when UI is good, but UX is not: We
fix the situation and bring it up to a high level of UX:
The line between UI and UX is very thin and sometimes it difficult to distinguish, but it is.
Did you know that UI and UX directly affect CX?
- CX (customer experience) - customer experience. Your product is the face of your company or personal brand (reputation). A well-designed, well-thought-out software solution with a beautiful design increases customer loyalty (NPS) to your brand and company.
As a result, the correlation of these three components is as follows:
5. Staff hunger
It was, it is, and it will always be so, and not only in the IT industry. We will not be able to defeat this problem, but we will definitely minimize it. At the same time, the 1C community needs not only programmers, as they also say, techies, but also business analysts, RPs, administrators, and humanities. Above, I said that in related industries, such as the development of websites and mobile applications, there are such specialists (professions) as UI \ UX (they are often combined in one person) designers, and in 1C of the UI \ UX industry, a designer is a programmer. We need to attract UI and UX designers to the industry, start growing them, this will give a triple effect:
- Will free up the time of programmers, shift some of the preliminary work to designers.
- , .
- , (, , ..).
, :
- -, , . , , , , , , , .
- , , , , .
- Communications and perception of complexity, amplified by remote work and an increasing transition to online work and project implementation on 1C; Appearance and design - there are reports
- Convenience and quality of interfaces, daily increasing requirements of customers in a deeper study of UI \ UX design solutions. Competition from the "Web Products". Difficulties in communication and understanding each other
- Personnel hunger.
Part 2 - the use of web technologies to popularize 1C technologies 1C. Solution of the indicated problems
In the process of comprehending and searching for solutions to the identified problems, the requirements for the future product were formulated:
- The tool should be simple, intuitive, allowing beginner business analysts and consultants to quickly learn the prototyping mechanism for 1C solutions.
- Online, which does not require installation and 1C enterprise licenses, available to a wide audience.
- Simplicity and convenience of working on UI and UX design, which will allow you to design an optimal interface without involving a programmer, at the stage of collecting requirements.
- Possibility of online collaboration between the contractor (business analyst) and the customer in order to improve the quality of communication and reduce the negative factors of the transition to the online mode of work and interaction.
- In the meantime, a requirement was added - a multilingual interface and the ability to easily, automatically translate the interface into the most popular languages.
Frontend technology overview
- It is based on the Single Page Application approach and the React framework.
ru.reactjs.org - To implement the UI of the form constructor, let's take the Material UI.
material-ui.com/ru - The grid for designing forms and implementing columns will also be taken from Material, but will require customization.
material-ui.com/ru/components/grid - Examples of implementing a similar idea of Drag & Drop creating a layout from elements:
github.com/chriskitson/react-drag-drop-layout-builder
github.com/kiho/react-form-builder
github.com/saravananangu/react-drag-drop-form- builde
Backend
- At the first stage, it is enough to use the serverless approach and take Google Firebase as the basis.
- In the future, we will begin to develop our own backend application on Node.js.
Architecture:
What happened in the end, we will analyze the functional in order:
1. Online service that does not require deployment of the platform, 1C licenses, available always and everywhere.
2. Simple and intuitive constructor for prototyping forms 1C.
3. Ability to share the link even with those who do not have an account.
EXAMPLE
4. Online display of changes when editing forms: the contractor makes adjustments, the customer sees the changes online via the link (the browser page does not need to be updated).
5. Creating project documentation (TK, TP) becomes much easier, and most importantly they look more realistic and have a business style and standard.
6. A pleasant surprise was that web-technologies opened up new opportunities that were not planned, namely, automatic online translation of texts into any language.
Part 3 - Conclusion
We hope that 1CMaker will solve these problems, lower the threshold for entering the industry, attract new staff and even create a new competence in the 1C community - UI \ UX designer (1C: Designer). A start has been made, but this is just the beginning and we plan to implement many more tasty things:
- Uploading the form in XML format.
- Adapt the interface for the mobile platform.
- Uploading the designed forms with a description in MS Word format - a template for a technical task.
- Tasks for the development and assessment of labor costs.
- Relations between objects, etc. etc.
Thank you for reading to the end, successful projects and remember: beauty will save the world (F.M. Dostoevsky) !