it-swarm-pt.com

Paradigma da interface do usuário para o editor de layout aninhado

Eu tenho um aplicativo que, com um editor de layout, um pouco semelhante ao editor WinForms no Visual Studio - com posicionamento de widget de arrastar e soltar, um painel de propriedades, etc.

Estou adicionando a opção de ter layouts aninhados, onde um widget "NestedLayout" colocado (Layout B na imagem) pode representar um outro layout inteiro.

Sketch of nested layout editor

Que tipo de interface você recomendaria para permitir ao usuário editar esses layouts aninhados? Trabalhar diretamente no quadro existente seria muito complicado, pois grande parte do espaço da tela já estaria em uso pelo restante do layout de nível superior.

As possibilidades podem incluir o carregamento, maximizando o layout aninhado no editor superior (talvez com algum tipo de transição de zoom), abrindo um novo editor acima, etc.

Você já viu alguns exemplos de aplicativos de editor que lidam com esse tipo de cenário de maneira eficaz?

6
kpozin

Meu primeiro reflexo, quando apresentado com a tela acima, seria clicar duas vezes no layout aninhado para editá-lo. Concordo que o fato de o usuário editar o layout aninhado no quadro existente não é a solução certa e pode se tornar bastante confuso para os usuários.

Eu apresentaria o layout aninhado, totalmente renderizado, em um estado acinzentado ou desbotado e exibia uma mensagem sobre o mouse que explica como editá-lo (por exemplo, "Clique duas vezes para editar"). Também escolheria abrir um segundo editor em cima do primeiro, em vez de maximizar o layout aninhado com um efeito de zoom. Acho que o efeito de zoom, apesar de inteligente, pode facilmente confundir alguns usuários - é preciso ter muito cuidado com a interface do usuário para que eles não se perguntem o que aconteceu e porque todos os seus widgets desapareceram repentinamente.

3
Tania Gobeil

Você já viu como as ferramentas de design da web WYSIWYG lidam com iframes? Normalmente, o iframe (ou outro objeto incorporado) é delineado como um objeto não interativo que é necessário clicar duas vezes ou ativar para exibir o editor desse objeto específico. No caso de iframes, lembro-me de ferramentas como o Dreamweaver abrir um painel de propriedades que permite acessar a página de origem do iframe a partir daí.

Pode não ser a melhor usabilidade, mas, dependendo do seu público, seguir as convenções do WYSIWYG pode ser uma boa opção.

Você provavelmente também definirá expectativas, dependendo de como renderizar o NestedLayout no seu controle pai. Se for totalmente renderizado, os usuários podem esperar poder interagir com ele. Mas se for apenas um quadro com um ícone representando seu status como um "widget" ou objeto incorporado, isso poderá ter um efeito diferente. Tente testar os dois em uma maquete interativa de alta fidelidade para ver o que as pessoas fazem. Seria ótimo testar com um teste de usabilidade remoto baseado em um cenário de teste específico como "Interagir com o NestedLayout" ou algo assim!

2
Rahul

Dê uma olhada no IntelliJ IDEA Java IDE. Ele possui um editor muito bom para formulários da GUI com layouts aninhados, suportando uma edição de arrastar e soltar bastante utilizável.

1
extropy

Considere representar * controle reutilizável * s. Então, você editaria o segundo layout como um layout totalmente novo, mas em outra guia/janela do designer, como um user control no Visual Studio. Se o usuário não precisar de tanto espaço, ele não se importará com propriedades menores da tela (talvez contenha apenas alguns botões).

0
Camilo Martin

Inicialmente, eu adicionaria uma resposta semelhante a algumas das opções acima: o flash, por exemplo, fica acinzentado e bloqueia o contexto envolvente se você clicar duas vezes em um objeto composto. Mas então percebi que, em termos de design, dependendo do aplicativo, talvez você não queira facilitar a edição do "Layout B". Se o que você mostra no seu exemplo é o que geralmente é feito em um editor de GUI, isso implica que tudo o que vemos na tela está em um Objeto. Facilitar a edição de layouts aninhados promoverá a adição de mais e mais funcionalidades a esse objeto, fazendo com que o layout A contenha todos os widgets.

Colocar uma barreira suave para a edição de layouts aninhados acabará fazendo com que o usuário desmonte a implementação e, portanto, crie objetos encapsulados melhores e mais fáceis de lidar.

Por exemplo. o Qt Designer permite editar o conteúdo de cada guia de uma janela dentro do editor de GUI, se você não tomar cuidado, obterá uma implementação de uma janela que faz o trabalho de todas as suas guias. O que realmente não é uma coisa boa.

0
Harald Scheirich

Adobe Flash

Você pode ter composições (chamadas Símbolos no Flash), com as quais você pode interagir. Dentro dessas composições, você pode ter camadas e outras composições. A experiência é um pouco ruim porque o Flash é muito lento para trabalhar e possui uma interface de usuário excessivamente complicada, com botões posicionados nos lugares errados e sem atalhos. Mas é um ótimo ponto de partida para inspiração.

Algum tipo de mistura entre o Interface Builder, o World Craft e o Adobe Flash seria ótimo para editar composições aninhadas.

0
neoneye