Desarrollamos herramientas de trabajo para empleados y socios del cliente. La mayor铆a de los m贸dulos que creamos contienen tablas, registros, tarjetas con informaci贸n detallada.
Inicialmente, la parte principal de los m贸dulos se agudiz贸 para la web, porque los trabajadores de oficina de computadoras estacionarias trabajan con los sistemas. Sobre c贸mo elaboramos un sistema de dise帽o para la web,
escribimos anteriormente .
Pero la vida se acelera constantemente, por lo que la velocidad de la toma de decisiones aumenta significativamente. Nuestros usuarios deben estar actualizados en cualquier momento y no solo sentarse en el lugar de trabajo. Y entendemos que debemos proporcionar informaci贸n m贸vil suficiente para tomar decisiones operativas.
Para la ingenier铆a de dise帽o, esto nos plantea 2 tareas:
1. Convierta lo grande en peque帽o: traduzca listas grandes en una presentaci贸n m贸vil.
2. Desarrolle un enfoque de unificaci贸n: unifique la presentaci贸n m贸vil para diferentes listas dentro de nuestro ecosistema. Para que la experiencia del usuario sea coherente, independientemente del m贸dulo con el que trabaje el usuario.
En esta nota, compartiremos c贸mo abordamos la soluci贸n de los problemas de traducir tablas en listas y unificar la presentaci贸n de diferentes listas.
Estamos de acuerdo con los conceptos en la orillaEl objeto de dise帽o que tenemos es esencialmente una fila en la tabla.
Por ejemplo
- Solicitud de viaje
- informe de gastos
- informaci贸n de ventas
- Solicitud para conectar un socio y as铆 sucesivamente.
M谩s adelante en el art铆culo llamaremos a nuestro objeto una l铆nea.
Descomponiendo la tarea
En primer lugar, reunimos y analizamos todos nuestros servicios, de hecho, los desarmamos en componentes.
Determinamos los datos que deben transferirse a la versi贸n m贸vil.
A pesar del hecho de que hay muchos datos, y son diferentes, cada unidad (la l铆nea de la tabla (aplicaci贸n, transacci贸n, noticias, etc.) tiene un n煤mero de identificaci贸n, un nombre humanoide, fecha (creaci贸n, actualizaci贸n), estado y oportunidad. hacer algo Y luego comienzan las variedades y los detalles.
Definir un patr贸n de tabla
驴C贸mo ajustaremos esta cantidad de datos en una p谩gina? El sistema de dise帽o de materiales de Google es similar en estructura al nuestro, y sus soluciones resultaron ser bastante aplicables a nuestras realidades.
En el concepto de dise帽o de materiales, los datos se muestran como listas y tarjetas.
Decidimos trabajar con tarjetas, porque hay mucha informaci贸n y debe estar claramente separada. Y la lista es m谩s adecuada para estructuras simples.
Fuente de imagenDe hecho, la tarjeta representa un bloque de informaci贸n 煤nico, autosuficiente e indivisible. Adem谩s, las tarjetas tienen muchas opciones para mostrar informaci贸n y acciones adicionales, lo cual es importante para los datos comerciales.
Arreglamos las reglas sobre c贸mo unificar datos
Al crear un sistema, es importante garantizar la uniformidad para que las tarjetas se presenten por igual, independientemente de la naturaleza de la informaci贸n.
- Reglas unificadas para construir una tarjeta. Las tarjetas deben tener una estructura similar: el usuario no debe ser reentrenado para cada nuevo servicio. Por lo tanto, los bloques de informaci贸n y la prioridad de su visualizaci贸n se fijan en las reglas.
- La tarjeta, no toda, pero la informaci贸n m谩s importante de la tabla, deber铆a estar visible en la pantalla del tel茅fono inteligente.
- Los m茅todos para obtener (mostrar) informaci贸n detallada adicional de la tabla tambi茅n deben ser uniformes.
Construye el constructor
Destacamos la esencia de la l铆nea.
Para que el usuario reconozca de inmediato la tarjeta deseada en la lista, seleccionamos la informaci贸n que identifica la l铆nea y hacemos que los datos adicionales sean menos visibles.
Dividimos el contenido de la tarjeta en 3 grados de importancia:
1. Informaci贸n clave : es necesaria, pero quiz谩s no suficiente para tomar una decisi贸n. Pero esto es exactamente lo que hay en todos los m贸dulos, y es precisamente su presentaci贸n lo que unificamos.
1.1. Identificador de objeto : ID, n煤mero, fecha y otros valores 煤nicos para cada tarjeta.
1.2. El estado es lo que le sucede a un objeto. Por estado, los usuarios deciden qu茅 hacer con la tarjeta. A menudo solo vienen de un tel茅fono inteligente para verificar el estado.
Establecemos las acciones a continuaci贸n, porque el estado, como regla, determina las acciones posibles, y las acciones conducen a un cambio en el estado.
1.3. Acciones : cada l铆nea siempre tiene acciones de destino (aceptar / rechazar) y varias acciones adicionales (redirigir, hacer una pregunta, etc.).
Las acciones clave no pueden ser m谩s de uno o dos. Los ponemos a disposici贸n expl铆citamente; los colocamos directamente en la tarjeta. Y ocultamos otros adicionales en Acci贸n.
2. La informaci贸n espec铆fica de cada uno de los m贸dulos son los detalles que aclaran la informaci贸n y son importantes para comprender la tarea y tomar decisiones. Los ocultamos en una vista detallada y los mostramos a pedido. De esta forma, evitamos la sobrecarga de detalles, dejando informaci贸n adicional f谩cilmente disponible.
3. Detalles adicionales , informaci贸n que es necesaria para un estudio en profundidad de la situaci贸n, pero que no afecta la toma de decisiones. No podemos incluirlo en una presentaci贸n m贸vil. Solo permanece en la versi贸n web.
Principio de construcci贸n de tarjeta
Actuamos de acuerdo con el
patr贸n F.- Colocamos la informaci贸n clave en la esquina superior izquierda.
Fuente de imagen- Organizamos la informaci贸n a la izquierda; esto es familiar para el usuario, es m谩s probable que lea la informaci贸n que se encuentra all铆 en primer lugar.
Fuente de imagen- Presentamos informaci贸n en texto, no en im谩genes o iconos. Lo hicieron, porque en nuestro caso abarrotan el lugar y a menudo pueden ser percibidos de manera ambigua.
- Evitamos contenido excesivo y no transferimos detalles adicionales de la web.
Fuente de imagen
Filtros y clasificaci贸n
Independientemente de si se trata de una presentaci贸n web o m贸vil, una tabla o tarjetas, cualquier lista compleja debe clasificarse y filtrarse.
Para la presentaci贸n m贸vil, acordamos lo siguiente:
- Las secciones con filtros y clasificaci贸n se contraen a la apariencia de un bot贸n.
- Cuando haces clic en los filtros, se abre una caja de luz con configuraciones.
- Al hacer clic en ordena, se abre una lista desplegable para el dispositivo.
Resultado
Entonces, guiados por las t茅cnicas descritas anteriormente, preparamos presentaciones m贸viles para diferentes m贸dulos del ecosistema del cliente:
- Aplicaciones para conectar un socio a la red de agentes
- Panel de Administraci贸n de Noticias Corporativas
- Solicitudes de viaje
Total
Unificamos los datos de la lista en la aplicaci贸n m贸vil en estructura y apariencia. Independientemente de la esencia de las posibles acciones con la tarjeta o la esencia de la informaci贸n que contiene, las tarjetas se ven uniformes. En cada caso, es intuitivamente claro qu茅 acciones conducir谩n a qu茅 resultado.
El desarrollo de presentaciones m贸viles para los siguientes m贸dulos se limita a lo que necesita.
- Definir un conjunto de informaci贸n.
- Priorizar bloques de informaci贸n,
- Escribe los textos apropiados en la interfaz,
- "Fecha de publicaci贸n" / "Fecha de salida" / "Fecha de publicaci贸n".
- "De acuerdo / Rechazar" o "De acuerdo / En desacuerdo".
- Si es necesario, resuelva elementos visuales individuales.
