CMS Interface Logic. - Essa é a melhor abordagem?
Estou desenvolvendo um sistema de cms. Atualmente, estou trabalhando na interface para adicionar novos itens de menu a um menu. (Devido à lógica do cms, os menus são fixos, o usuário não pode adicionar ou remover menus, excluir apenas todos os itens de menu e atribuir itens de menu a menus ou itens de menu).
Para adicionar um novo item de menu, o usuário deve clicar na grande área acima dos menus (consulte a img 2). Isso fará com que os campos de entrada apareçam. Salvar suas entradas resultará no aparecimento de um novo item de menu na caixa “Não atribuído”. Para posicionar o item de menu, basta arrastá-lo para um dos menus para a posição desejada.
Se você deseja excluir um item de menu, basta arrastá-lo para a lixeira. Se você deseja editar um item, basta clicar nele, o item será destacado e os campos de entrada (como os da adição de um novo item) aparecerão preenchidos com as informações do item de menu selecionado. Basta alterá-lo e clicar em Salvar. Para alterar a posição de um item, basta arrastá-lo para a posição desejada.
Espero que tudo seja fácil de entender.
Minhas perguntas são:
Essa ideia é fácil de usar e lógica? É a melhor maneira de fazer isso ou você tem uma ideia melhor? Você tem algum comentário/idéia para melhoria?
img 1
img 2
// Update.
Ok, então eu fiz uma maquete. Estou incorporando todos os comentários do ArchieVersace como eu o entendi. Quanto à caixa de edição modal: é apenas um esboço rápido, portanto, não há entradas reais, tamanho, ....
// Atualização 29/10/2010
Então, minhas alterações atuais:
- sem lixeira
- estrutura em árvore vertical
- botão adicionar (próximo ao nome do menu, mas pode ser reposicionado)
- item de menu não atribuído acima dos menus, se criado sem escolher a posição antes de Colocar 3 menus (quantidade média de meus projetos) um ao lado do outro, cada um com cerca de 300 px de largura. Isso deve ser suficiente, porque quase nunca tenho um menu com mais largura. Adicionarei botões para recolher o menu, mas todos os itens não serão recolhidos na inicialização (mas talvez salvemos a última preferência via cookie).
Eu preciso de javascript para o meu cms de qualquer maneira, ele não será distribuído como wordpress, mas vendido por projeto, para que eu possa exigir js. Isso significa que não há necessidade de um fallback (salvar/cancelar) para o posicionamento do menu.
Meu usuário pode estar usando o sistema quase diariamente, mas alguns também podem atualizar o conteúdo de sua página da Web apenas a cada dois meses. Portanto, acho que deve ser o mais fácil possível. Por isso, acho vital incluir outro botão de adição que esteja sempre visível. A adição de um item de menu com esse botão resulta em um item de menu não atribuído a nenhum menu. Nesse caso, a parte acima dos menus pode aparecer segurando o item recém-criado.
Você acha que essa é uma boa ideia? Não ficará visível/ocupará espaço se nenhum item de menu for criado.
Eu acho que o layout horizontal do menu pode ser confuso. Primeiro, não faz sentido hierárquico - Por que apenas o primeiro nível é definido horizontalmente e os outros níveis são verticais? Outro problema é o que acontece quando há mais itens de primeiro nível? A rolagem horizontal não é uma ótima solução na maioria dos casos. Eu tornaria tudo vertical e recuaria os subitens, como você já fez.
As seções lixeira e meta menu são desnecessárias, na minha opinião. Se você tiver apenas 3 entradas a serem preenchidas para cada item de menu, a recuperação da lixeira não é tão importante. Além disso, a funcionalidade da seção do meta menu pode ser substituída por uma cópia do menu existente quando você estiver criando um novo menu. (Se for preenchido automaticamente por todas as páginas do site, novamente, você precisará pensar em escala). Ambas as seções podem ser substituídas por uma seção de item de menu de edição.
À parte disso parece bem. Eu amo a simplicidade da sua maquete.
Se eu apenas olhar essas telas sem a sua longa explicação, é difícil descobrir o que fazer, o que clicar e qual é a ordem da interação. Isso por si só é bastante revelador: uma ótima interface de usuário geralmente precisa de uma explicação mínima (pense em algo como o iPhone ou o Wii, onde é muito rapidamente muito óbvio o que você precisa fazer sem precisar de um parágrafo de texto para começar) .
Portanto, a primeira coisa que eu faria é mostrar essas telas para mais algumas pessoas (IRL) e ver como elas respondem sem a sua explicação. Eles entendem? Eles sabem o que estão vendo e o que se espera deles aqui? Caso contrário, se você precisar explicar as coisas, considere reorganizar as telas. Você pode fazer isso coletando comentários das pessoas ou criando um protótipo do aplicativo e fazendo com que as pessoas o usem (tenha cuidado ao sugerir o que eles devem fazer - deixe-os tropeçar sozinhos).
O feedback que você recebe nesse estágio será muito mais útil do que qualquer opinião que as pessoas aqui possam lhe dar.
Além disso, considere que, como suas imagens atualmente são quadros de arame preto e branco, será mais difícil determinar o peso visual para as pessoas que olham para o design do que se você aumentasse um pouco a fidelidade, acrescentasse cor e usasse tipografia em graus variados para ajudar com como meus olhos devem se mover sobre a tela.
Posso oferecer ajuda com determinadas interações (como abaixo), mas isso será de uso limitado, pois não sei o que você está tentando alcançar. O que você realmente precisa fazer é indicar os requisitos do sistema. O que seus usuários estão tentando alcançar? Com que frequência eles estarão usando o sistema? Quais são os seus níveis de habilidade? etc.
Por exemplo, um usuário pouco frequente do sistema pode esquecer como usá-lo entre usos, portanto, nesse caso, você precisaria tornar a interface muito simples de usar e captar. No entanto, se seus usuários estiverem visitando com frequência, uma abordagem simplificada pode torná-la frustrante, pois os usuários não ficam iniciantes por muito tempo; eles rapidamente se tornarão usuários intermediários que demandam energia extra. Não estou dizendo que você faz algo difícil de usar, mas para usuários intermediários não deve ter medo de adicionar potência e complexidade extras.
Em termos de mock-up que você forneceu, aqui estão algumas sugestões específicas:
- Remova os painéis não atribuídos, adicione e lixeira, pois eles não oferecem ao usuário funcionalidade útil suficiente para a quantidade de espaço que ocupam.
- Coloque o botão Adicionar no contexto de onde está sendo adicionado também, para que o usuário possa adicionar onde quiser, em vez de adicioná-lo e posicioná-lo.
- Quando um usuário deseja configurar um item de menu, mostre uma caixa cinza com os campos para coletar as informações
- Adicione um botão de edição e exclusão a cada item de menu
- Adicione botões de contrato e expansão a cada nível no menu; por padrão, todos os níveis são contratados.
- Permita uma boa quantidade de espaço para itens de menu mais longos
- Você deve adicionar opções de reversão, como os botões salvar e cancelar
Abaixo está mock up: 
Outra atualização. 
Não tenho certeza de perder o botão Adicionar. As pessoas descobririam como adicionar itens de menu facilmente?
Além disso, como você tornaria possível adicionar itens de menu no mesmo nível ou subnível? O que está agora provavelmente me subnível (na verdade, para isso, o botão deve ser movido um pouco para a direita). Mas como você adicionaria um novo item no mesmo nível no local desejado?
No menu de rodapé, tentei mostrar como seria arrastar um item de menu para uma posição diferente.