Paradigma de interfaz de usuario para editor de diseño anidado
Tengo una aplicación que tiene un editor de diseño, algo similar al editor de WinForms en Visual Studio, con colocación de widgets de arrastrar y soltar, un panel de propiedades, etc.
Estoy agregando la opción de tener anidado diseños, donde un widget "NestedLayout" colocado (Diseño B en la imagen) puede representar un diseño completamente diferente.
¿Qué tipo de interfaz recomendaría para permitir al usuario editar estos diseños anidados? Trabajar directamente en el marco existente sería demasiado engorroso, ya que gran parte del espacio de la pantalla ya estaría en uso por el resto del diseño de nivel superior.
Las posibilidades pueden incluir cargar maximizando el diseño anidado en el editor superior (quizás con algún tipo de transición de zoom), abrir un nuevo editor arriba, etc.
¿Has visto ejemplos de aplicaciones de editor que manejen este tipo de escenario de manera efectiva?
Mi primer reflejo cuando se me presenta la pantalla anterior sería hacer doble clic en el diseño anidado para editarlo. Estoy de acuerdo con usted en que hacer que el usuario edite el diseño anidado en el marco existente no es la solución correcta y podría ser bastante confuso para sus usuarios.
Presentaría el diseño anidado, totalmente renderizado, en un estado gris o desvaído y mostraría un mensaje en el mouse que explica cómo editarlo (por ejemplo, "Haga doble clic para editar"). También elegiría abrir un segundo editor encima del primero en lugar de maximizar el diseño anidado con un efecto de zoom. Creo que el efecto de zoom, aunque es bastante inteligente, puede confundir fácilmente a algunos usuarios: hay que tener mucho cuidado con la interfaz de usuario para que no se pregunten qué acaba de suceder y por qué todos sus widgets han desaparecido repentinamente.
¿Has visto cómo las herramientas de diseño web WYSIWYG manejan los iframes? Por lo general, el iframe (u otro objeto incrustado) está delineado como un objeto no interactivo que uno debe hacer doble clic o activar para que aparezca el editor de ese objeto específico. En el caso de los iframes, recuerdo herramientas como Dreamweaver que muestra un panel de propiedades que le permite acceder a la página de origen del iframe desde allí.
Puede que no sea la mejor usabilidad, pero dependiendo de su audiencia, seguir las convenciones WYSIWYG podría ser una buena decisión.
Probablemente también establezca expectativas dependiendo de cómo represente el NestedLayout en su control principal. Si está completamente renderizado, los usuarios pueden esperar poder interactuar con él. Pero si es solo un marco con un icono que representa su estado como un "widget" u objeto incrustado, eso podría tener un efecto diferente. Intente probar ambos en una maqueta interactiva de alta fidelidad para ver qué hace la gente. ¡Esto sería genial para probar con una prueba de usabilidad remota basada en un escenario de prueba específico como "Interactuar con NestedLayout" o algo así!
Eche un vistazo a IntelliJ IDEA Java IDE. Tiene un editor muy agradable para formularios GUI con diseños anidados, que admite la edición de arrastrar y soltar bastante utilizable.
Considere la posibilidad de representar reutilizable * control * s. Así que editaría el segundo diseño como un diseño completamente nuevo, pero en otra pestaña/ventana del diseñador, como un user control en Visual Studio. Si el usuario no necesita tanto espacio, no le importará el espacio en pantalla más pequeño (de todos modos, tal vez solo contendrá un par de botones).
Al principio, iba a agregar una respuesta similar a algunas de las anteriores, flash, por ejemplo, atenúa y bloquea el contexto de cierre si hace doble clic en un objeto compuesto. Pero luego me di cuenta de que, en términos de diseño, dependiendo de su aplicación, es posible que no desee facilitar la edición del "Diseño B". Si lo que muestra en su ejemplo es lo que generalmente se hace en un editor de GUI, implica que todo lo que vemos en la pantalla está en un Objeto. Hacer que los diseños anidados sean fáciles de editar promoverá la adición de más y más funcionalidades a este único objeto, haciendo que el diseño A contenga todos los widgets.
Poner una barrera suave a la edición de diseños anidados eventualmente hará que el usuario rompa la implementación y, por lo tanto, cree mejores objetos encapsulados que sean más fáciles de manejar.
P.ej. Qt Designer le permite editar el contenido de cada pestaña de una ventana dentro del editor de interfaz gráfica de usuario, si no tiene cuidado obtendrá una implementación de una ventana que hace el trabajo de toda su pestaña. Lo que realmente no es bueno.
Adobe Flash
Puede tener composiciones (llamadas Símbolos en Flash), con las que puede interactuar. Dentro de estas composiciones puedes tener capas y otras composiciones. La experiencia es algo mala porque Flash es muy lento para trabajar y tiene una interfaz de usuario demasiado complicada con botones ubicados en lugares incorrectos y carece de atajos. Pero es un gran punto de partida para la inspiración.
Algún tipo de mezcla entre Interface Builder, World Craft y Adobe Flash sería genial para editar composiciones anidadas.