it-swarm-eu.dev

Paradigma dell'interfaccia utente per l'editor di layout nidificato

Ho un'applicazione che con un editor di layout, in qualche modo simile all'editor di WinForms in Visual Studio - con posizionamento del widget drag-and-drop, un pannello delle proprietà, ecc.

Sto aggiungendo l'opzione per avere nidificato layout, in cui un widget "NestedLayout" inserito (Layout B nell'immagine) può rappresentare un intero altro layout.

Sketch of nested layout editor

Che tipo di interfaccia consiglieresti per consentire all'utente di modificare questi layout nidificati? Lavorare direttamente nel frame esistente sarebbe troppo ingombrante, dal momento che gran parte del settore immobiliare dello schermo sarebbe già in uso nel resto del layout di livello superiore.

Le possibilità potrebbero includere il caricamento massimizzando il layout nidificato nell'editor principale (forse con una sorta di transizione di zoom), facendo apparire un nuovo editor sopra, ecc.

Hai visto alcuni esempi di applicazioni editor che gestiscono efficacemente questo tipo di scenario?

6
kpozin

Il mio primo riflesso quando presentato con la schermata sopra sarebbe fare doppio clic sul layout nidificato per modificarlo. Sono d'accordo con te sul fatto che far modificare all'utente il layout nidificato nel frame esistente non sia la soluzione giusta e potrebbe diventare abbastanza confuso per i tuoi utenti.

Vorrei presentare il layout nidificato, completamente renderizzato, in uno stato grigio o sbiadito e visualizzare un messaggio al passaggio del mouse che spiega come modificarlo (ad esempio "Fare doppio clic per modificare"). Vorrei anche scegliere di aprire un secondo editor sopra il primo invece di massimizzare il layout nidificato con un effetto zoom. Trovo che l'effetto zoom, anche se abbastanza intelligente, può facilmente confondere alcuni utenti: devi stare molto attento con l'interfaccia utente in modo che non rimangano a chiedersi cosa è appena successo e perché tutti i loro widget sono scomparsi all'improvviso.

3
Tania Gobeil

Hai visto come gli strumenti di web design WYSIWYG gestiscono gli iframe? Di solito l'iframe (o altro oggetto incorporato) viene delineato come un oggetto non interattivo che è necessario fare doppio clic o attivare in altro modo per visualizzare l'editor per quell'oggetto specifico. Nel caso di iframe, ricordo strumenti come Dreamweaver che spuntano un riquadro delle proprietà che consente di accedere alla pagina di origine dell'iframe da lì.

Potrebbe non essere la migliore usabilità, ma a seconda del pubblico, seguire le convenzioni WYSIWYG potrebbe essere una buona chiamata da fare.

Probabilmente imposterai anche le aspettative in base al modo in cui esegui il rendering di NestedLayout nel controllo principale. Se il rendering è completo, gli utenti potrebbero aspettarsi di essere in grado di interagire con esso. Ma se è solo una cornice con un'icona che rappresenta il suo stato di "widget" o oggetto incorporato, ciò potrebbe avere un effetto diverso. Prova a testare entrambi in un mockup interattivo ad alta fedeltà per vedere cosa fanno le persone. Sarebbe fantastico testarlo con un test di usabilità remoto basato su uno scenario di test specifico come "Interagisci con il NestedLayout" o qualcosa del genere!

2
Rahul

Dai un'occhiata a IntelliJ IDEA Java IDE. Ha un editor molto bello per i moduli GUI con layout nidificati, che supporta l'editing drag-and-drop abbastanza utilizzabile.

1
extropy

Prendi in considerazione la possibilità di rappresentare riutilizzabili * controllo * s. Quindi modificheresti il ​​secondo layout come un layout completamente nuovo, ma in un'altra scheda/finestra del designer, come un user control su Visual Studio. Se l'utente non ha bisogno di così tanto spazio, non gli interesserà lo spazio su schermo più piccolo (forse conterrà comunque solo un paio di pulsanti).

0
Camilo Martin

Inizialmente stavo per aggiungere una risposta simile ad alcune delle precedenti, flash ad esempio in grigio e blocca il contesto racchiuso facendo doppio clic su un oggetto composto. Ma poi ho capito che in termini di progettazione, a seconda della tua applicazione, potresti non voler rendere troppo semplice la modifica di "Layout B". Se ciò che mostri nel tuo esempio è ciò che viene solitamente fatto in un editor GUI, ciò implica che tutto ciò che vediamo sullo schermo è in un oggetto. Semplificare la modifica dei layout nidificati promuoverà l'aggiunta di sempre più funzionalità a questo oggetto, facendo sì che il layout A contenga tutti i widget.

Una barriera delicata alla modifica dei layout nidificati alla fine causerà alla fine l'utente a spezzare l'implementazione e quindi a creare oggetti incapsulati migliori che sono più facili da gestire.

Per esempio. Qt Designer ti consente di modificare il contenuto di ogni scheda di una finestra all'interno dell'editor gui, se non stai attento otterrai un'implementazione di una finestra che fa il lavoro di tutta la sua scheda. Il che non è davvero una buona cosa.

0
Harald Scheirich

Adobe Flash

Puoi avere composizioni (chiamate Simboli in Flash), con le quali puoi interagire. All'interno di queste composizioni puoi avere livelli e altre composizioni. L'esperienza è piuttosto negativa perché Flash è così lento da lavorare e ha un'interfaccia utente eccessivamente complicata con pulsanti posizionati in punti sbagliati e privi di scorciatoie. Ma è un ottimo punto di partenza per l'ispirazione.

Una sorta di mix tra Interface Builder, World Craft e Adobe Flash sarebbe rock per la modifica di composizioni nidificate.

0
neoneye