👨‍👩‍👦‍👦 🎟️ 🥇 Cómo hacer una tarea técnica simple y no perder dinero y nervios 💃 😑 🍴

Hola Habr! Me dirijo a este artículo a mí mismo más joven e inexperto, así como a cualquier persona que se sienta insegura sobre el enfoque de la documentación técnica. Aunque si ella ayuda a alguien del negocio del diseño, me alegraré doblemente.

Hay muchos estándares y especificaciones para redactar TK , pero si los estudios jóvenes, mientras desarrollan una tienda en línea simple, intentan cumplir con ellos, entonces no tendrán tiempo para implementar un par de proyectos, ya que irán a la bancarrota, enterrándose en un montón de documentos incomprensibles.

Lo que era antes

Somos una pequeña empresa regional dedicada al desarrollo web personalizado, que, como muchas otras, al principio emprendió proyectos, sin saber realmente cómo hacerlo. Pero ese "crecimiento forzado" tuvo un efecto extremadamente positivo en los miembros del equipo, gracias a un gran deseo de desarrollo, y ayudó a impulsar tanto las habilidades como la cabeza. El desarrollo fue mejorando, pero los términos de referencia se mantuvieron en el nivel más bajo. Como la mayoría de los estudios para principiantes, utilizamos el enfoque descriptivo habitual de los conocimientos tradicionales: qué páginas, qué se debe mostrar, algunos puntos técnicos, y eso es todo, tal vez.

En muchos proyectos, esto resultó en los siguientes problemas:

Se describe la apariencia, pero no el principio de funcionamiento. Un ejemplo simple con un carrito de compras en línea. En la declaración de trabajo, se escribió el botón "Realizar un pedido". Pero, ¿qué debería pasar cuando el usuario hace clic en este botón? ¿Con qué reglas se forma el número de orden? ¿Qué estado se le asigna? ¿A dónde va el reenvío? ¿Y si uno de los productos se vendió mientras el usuario realizó un pedido? No hubo respuestas a estas y muchas otras preguntas en los TdR, pero este es solo un pequeño elemento. Tales momentos no descritos llevaron a disputas con el Cliente, una fuerte salida del presupuesto y otras consecuencias desagradables.
Falta de bloques reutilizables. Muchos sitios tienen los mismos bloques utilizados en diferentes lugares, por ejemplo, vistas previas de productos. Pero este bloque como resultado se describió en cada página. Esto es muy malo por varias razones. En primer lugar, si es necesario, los cambios deben realizarse en varios lugares a la vez, puede perderse algo y habrá una discrepancia. En segundo lugar, incluso con los mismos elementos en la vista previa, el cliente puede requerir que los haga de manera diferente, lo que conlleva costos adicionales.
TK no se correlaciona con las tareas del equipo. Cuanto más se aleje la formulación del problema de la realidad, menor será la calidad del resultado. Este es otro problema que quería resolver.

Nuevo enfoque

Una vez determinados los objetivos, desarrollamos un concepto nuevo, bastante simple pero efectivo.

TK consta de las siguientes secciones:

Introduccion
Estática
Dinámica
Las tareas
Panel de administración
Requisitos técnicos generales

De proyecto a proyecto, la composición de estas secciones puede variar, pero la estructura básica permanece. Echemos un vistazo más de cerca.

Introducción y preparación para la implementación.

Describimos brevemente el proyecto, sus objetivos, CA, dejamos enlaces a análisis previos al proyecto.
Describimos el proceso de inicialización del proyecto: configurar el entorno para los desarrolladores y el enfoque para desarrollar un concepto de diseño para diseñadores.
Los principios de adaptabilidad o versiones. Recientemente, en nuestro trabajo, nos adherimos al siguiente principio: "adaptar todo lo que se adapte". En otras palabras, al comienzo del trabajo en TK, entendemos qué funcionalidades complejas necesitamos (o podríamos necesitar en el futuro cercano) y, junto con el diseñador y el desarrollador front-end, encontramos formas de adaptarlo. Con el nuevo enfoque, no hubo resultados negativos, por lo tanto, no se tuvieron que describir versiones separadas.

Esta sección tiene como objetivo actualizar al equipo y preparar el escenario para el desarrollo inmediato del proyecto.

Estática

Como todos sabemos, las páginas pueden contener información estática o información dinámica enviada desde el servidor. Subsecciones estáticas - páginas del proyecto. Rompemos cada página en bloques. Si el bloque es estático, entonces describimos su esencia y tipo de contenido. Por ejemplo, una descripción de uno de los bloques en la página Acerca de la empresa podría verse así. “Las principales ventajas de la empresa. 5-6 iconos descriptivos ". Esta es una descripción muy breve, pero suficiente para una evaluación precisa, del bloque. Al describir las estadísticas, el objetivo principal es establecer un marco claro. Hacer íconos adaptativos no es difícil, pero con un gráfico o una tabla, no todo es tan simple e inequívoco. Pero al mismo tiempo, no importa qué tipo de iconos y firmas habrá.

Si la página contiene un bloque que se puede "quitar de los corchetes", entonces, en el lugar de su integración, escribimos "La funcionalidad NOMBRE se está integrando, y la funcionalidad en sí misma se describe en la sección Dinámica.

Además de las páginas, Statics incluye una descripción de ventanas emergentes y letras. En mi opinión, no tiene sentido colocarlos en una sección grande separada e inflar la estructura.

Dinámica

Todo lo que se relaciona con la dinámica que llamamos funcional. Quizás alguna otra división aparecerá más tarde, porque Ya aquí pertenecen varios tipos de tareas:

Bloque Hacemos la dinámica:
- Bloques utilizados en diferentes partes del sitio.
- Bloques que tienen sentido para evaluar por separado. En primer lugar, simplifica el proceso de evaluación en sí y la comprensión del cliente de la complejidad de un elemento individual. En segundo lugar, los bloques que no son vitales para un proyecto a menudo entran en esta categoría, y con este enfoque es más fácil excluirlos del presupuesto.
- Los procesos que ocurren durante una acción específica del usuario. En primer lugar, esto incluye las acciones que ocurren al hacer un pedido, pagar, agregar a la cesta, etc. Dicha funcionalidad durante el desarrollo del proyecto a menudo se finaliza, por lo que estas mejoras son mucho más convenientes de describir.
- Integración de servicios de terceros. Dependiendo de la complejidad de la integración, puede describirse como una función o viceversa dividirse en muchas diferentes para describir consultas individuales.

Las tareas

Esta sección se utiliza para trabajos que no se pueden atribuir a ninguna de las otras secciones: dibujar un banner, establecer un contador métrico, analizar productos, etc.

Panel de administración

Aquí describimos la estructura, modelos y campos. El desglose se divide en secciones, por ejemplo, "Productos", "Catálogo", "Pedidos", etc. Describimos que los diferentes roles de usuario pueden ver qué editar.

Requisitos técnicos generales

Incluye bastantes subsecciones, no todas las cuales son realmente requisitos técnicos, pero nuevamente no tenía sentido separarlas:

Etiqueta SEO y requisitos de micro marcado
Reglas de transliteración
Pruebas manuales y automáticas.
Navegadores Soportados
...

Nuevas versiones

Al describir nuevas versiones, es necesario realizar cambios en los elementos existentes. Consideramos las siguientes formas de describir las mejoras: al comienzo de cada una de las secciones (Estática, Dinámica, AP) escriba "Mejora de la funcionalidad" NOMBRE ", o cree una sección separada" Mejoras "en la que todas las tareas cambiantes se eliminarán de una vez. Hasta ahora nos hemos decidido por la segunda opción, pero esto está bastante relacionado con la conveniencia en proyectos específicos. En otras condiciones, el primer método es mejor.

Después de escribir las especificaciones técnicas para la nueva versión, las fusionamos en una para que la siguiente se pueda escribir sobre la base de un documento.

Ejemplo

Para mayor claridad, analicemos la estructura de los conocimientos tradicionales sobre la base de una página simplificada en la sección del catálogo.

Estática

Página de la sección del directorio

Se utiliza para mostrar productos que pertenecen a una sección del catálogo de cualquier nivel, excepto la raíz.

Se integra la siguiente funcionalidad:

"Migas de pan"
"Árbol de directorios"
"Filtrado. Disposiciones generales
"Filtrado. Texto "
"Filtrado. Texto e imagen "
"Filtrado. Rango "
"Ordenar. Por defecto "
"Ordenar. Precios ascendentes "
"Ordenar. Precio descendente "
"Vista previa del producto. Azulejo
“Paginación. Página "
"Bloque de texto". Se integra como un bloque para el texto SEO frente al sótano.

URL: / c / 1745-name, donde 1745 es el id de la categoría actual del directorio, y name es el nombre transliterado de esta categoría.

Dinámica

Como la página contiene muchas integraciones, daré ejemplos de las dos más interesantes.

Funcionalidad “Filtrado. Disposiciones generales

Externamente, el filtrado es una serie (o varias filas) de botones con el nombre del filtro. Cuando hace clic en el botón, se abre una lista desplegable con casillas de verificación con valores de filtro (valores de las características del producto correspondiente). El ancho de la lista desplegable depende de la longitud máxima del valor en esta lista. En el área visible de la lista desplegable, no se muestran más de 10 elementos. Si hay más valores de filtro, aparece una barra de desplazamiento. Debajo de los valores del filtro está el botón Aplicar. Si se selecciona al menos un valor y el usuario hace clic en el botón Aplicar, fuera del área del filtro o el botón con el nombre del filtro, entonces:

la lista desplegable se cierra y se aplica el filtro. Solo los productos que coinciden con los filtros activos actuales permanecen en la sección actual
el nombre del botón de filtro toma la forma: "Nombre de filtro: K", donde K es el número de valores de filtro seleccionados, si hay 2 o más, o "Nombre de filtro: valor" si se seleccionó un valor.
el color del botón de filtro cambia al tipo de filtro utilizado
en los valores de otros filtros, solo quedan las opciones que satisfacen los filtros activos actualmente. Si un valor permanece en uno de los filtros inactivos, su botón se vuelve inactivo y el nombre se muestra en el formato "Nombre del filtro: valor"
para todos los filtros activos, se agrega una cruz después del nombre, cuando se hace clic, solo se restablece este filtro
la paginación se restablece

Si al menos un filtro está activo, después de todos los botones con filtros aparece el botón "restablecer filtros", al hacer clic, se restablece el valor de todos los filtros.

Al cambiar de la categoría actual a cualquier otra, se verifica la coincidencia de los filtros activos y los valores seleccionados en ellos con los filtros correspondientes y los valores de la categoría a la que se realizó la transición. En la categoría recién seleccionada, aquellos filtros y los valores seleccionados en ellos que son iguales permanecen activos.

El filtrado se puede integrar de 2 maneras: de forma dinámica y estática. La integración dinámica le permite establecer la característica por la cual se realiza el filtrado en el panel administrativo. Dichas integraciones se indican sin parámetros adicionales. La integración estática se aplica a la página de forma predeterminada. Al describir la integración, se indica un parámetro adicional: la característica por la cual se lleva a cabo el filtrado.

Los filtros seleccionados se agregan a la URL a través de parámetros de consulta.

Funcionalidad "Vista previa del producto. Azulejo

Es un mosaico (rectángulo) con la información más importante del producto para el usuario. En la versión en mosaico, la información clave es la imagen del producto. La vista previa contiene:

Precio (entero en rublos rusos)
Nombre del producto
Etiqueta "En la tienda" o "Desde la ventana"
Imagen
Tamaño
Botón "Al carrito" (Integración de la funcionalidad "Agregar al carrito")
Botón "Agregar a favoritos" (Integración de la funcionalidad "Agregar a favoritos")

Al hacer clic en cualquier área de la vista previa, además del botón "Agregar al carrito", se lo dirigirá a la página del producto.

En una línea se deben colocar 3-4 fichas con vistas previas del producto.

Como puede ver, otra función está integrada en esta función, que le permite crear particiones muy convenientes. Por ejemplo, "Agregar al carrito" y "Agregar a favoritos" también se utilizan en el mapa del producto.

Panel de administración

Una página requiere una gran cantidad de secciones del AP, describiré una de ellas.

Producto

Lista de todos los productos con filtrado. Al editar / agregar un elemento, los siguientes campos están disponibles:

Título (texto)
Marca (radio)
Imágenes
Precio (entero)
Descripción (bloque de texto)
Tipo (tienda / escaparate, radio)
Condición El significado incluye Título (texto) y Explicación (texto).
Estado Las opciones son:
1. en venta
2. con moderación
3. bajo revisión
4. rechazado
5. agotado
6. cheque fallido
7. cancelado por el vendedor
Tamaño de etiqueta (opcional). Campo de texto sin validación
...

Hay más de 30 campos y, para no inflar el artículo, los omitimos.

Conclusiones

Ventajas del nuevo enfoque:

Completitud Este TK le permite describir claramente los requisitos, que es el parámetro principal y necesario de cualquier TK.
Claridad Aproximadamente la mitad de nuestros clientes no tienen un especialista técnico de su lado y se enfrentan al desarrollo por primera vez. Por lo tanto, era muy importante hacer que los conocimientos tradicionales fueran lo más claros y legibles posible. Y lo hicimos! Incluso los clientes no expertos en tecnología entienden cómo funciona, pueden leerlo fácilmente y dar excelentes comentarios.
Molecularidad. TK cumple totalmente con nuestros requisitos para dividirse en elementos individuales, lo que simplifica y resuelve en gran medida los problemas descritos anteriormente. Los bloques TK corresponden directamente a las tareas que realizan los desarrolladores, lo que se encontró con una explosión. TK también encaja perfectamente en el sistema de diseño (se publicará un artículo al respecto la próxima semana).
Facilidad de estimación de costos y configuración . Las tareas bien descritas y rotas se han vuelto simples y agradables de evaluar. Si durante la evaluación entendemos que los requisitos están incompletos, los agregamos. Para cada proyecto (etapa), creamos una tabla de Google en la que el cliente puede probar diferentes configuraciones de proyecto y determinar la opción más adecuada para él por precio / funcionalidad.
La interacción con el cliente ha aumentado a un nuevo nivel . Los cambios realizados le permiten definir claramente los límites del proyecto. Si se necesitan cambios con respecto a los conocimientos tradicionales, esto se evalúa como una nueva tarea, aunque con el enfoque anterior esto causó mucha controversia.
Rentabilidad Porque esto es principalmente un negocio, este indicador, junto con el anterior, es uno de los más importantes. Un estudio detallado permitió minimizar el número de tareas mal evaluadas. Ninguno de los proyectos implementados bajo el nuevo enfoque tenía un exceso del presupuesto.

Contras:

Haciendo mejoras . En uno de los proyectos fue necesario introducir el estado de los bienes. Como resultado, se produjo una gran cantidad de mejoras de 2-3 líneas. Esto no se puede llamar un claro menos, porque la integridad de los requisitos es una prioridad, pero no se puede llamar al enfoque de datos ideal.
La complejidad de la percepción en la automatización de los procesos de negocio . Si lleva los procesos comerciales de algunas empresas desde el momento de la venta hasta la recepción de los bienes por parte del comprador, no siempre existe la posibilidad (o necesidad en las primeras etapas) de cubrir todo el proceso a expensas de Statics, Dynamics y AP, porque Muchas tareas se realizan manualmente, se discuten con los clientes por teléfono, etc. Esto complica un poco la percepción de los conocimientos tradicionales en su forma pura, y requiere una descripción adicional de los procesos.
Costo y tiempo de desarrollo . La venta de conocimientos tradicionales, por supuesto, se ha vuelto más difícil, porque no todos los que están en el primer contacto con el desarrollo están dispuestos a pagar del 10-20% del proyecto, mientras que muchos de nuestros competidores cobran entre 10 y 20 mil. Pero ese trabajo vale la pena durante la implementación, reduciendo riesgos del proyecto y mejora de la calidad.

Las ventajas del nuevo enfoque tuvieron un efecto muy positivo en todos los aspectos de nuestro trabajo y ayudaron a identificar las debilidades a las que no habíamos prestado atención anteriormente. Los contras, aunque los hay, son insignificantes, especialmente en comparación con los profesionales.
Cada proyecto trae algo nuevo, pule las esquinas y le permite cambiarlo para mejor.

Estamos tan satisfechos con el resultado que decidimos abandonar los rastreadores de tareas estándar en favor de finalizar Google Docs para trabajar completamente con tareas basadas en TK. Si el experimento es exitoso, escribiremos un artículo separado al respecto. Mientras tanto, esperamos recibir críticas objetivas y consejos de usted, con la esperanza de que este artículo haya ayudado a alguien).

Cómo hacer una tarea técnica simple y no perder dinero y nervios