Projetando a administração de um CMS: torne as interfaces mais fáceis e convidativas

Esta semana, na empresa onde trabalho, surgiu um novo serviço para a equipe: fazer o redesign de um sistema de gerenciamento de conteúdo (CMS) de um de nossos clientes. Sem reprogramação, apenas design. Apesar da interface atual não merecer ser mostrada aqui, não pelo fato de ter sido desenvolvida por outra empresa, mas pelo simples fato de não ser adequado exibir algo tão desleixado, para fins comparativos, cá está:

Lembre-se sempre: você deve entregar a melhor experiência ao seu cliente e ao seu usuário, sempre. O que ocorre muitas vezes é que com prazos apertados geralmente o programador é quem desenvolve a interface administrativa, ou ela acaba sendo deixada por último, e feita às pressas. A atual interface do gerenciador de conteúdo é pouco convidativa e confusa. O sistema possui muitas ramificações de conteúdo, e para isso, a atual interface propôs um sistema de navegação via dropdown menus que só complicam, pois não mostram de maneira clara a organização do conteúdo.

Além disso, na mesma barra de menus os desenvolvedores optaram por juntar opções referentes ao sistema em si com o próprio gerenciamento. Isto é, junto a opções como notícias, atas e boletins, encontravam-se opções como alterar senha do administrador ou efetuar logout. Com a proposta inicial de reformulação que desenvolvi, procurei resolver estes problemas e ainda deixar a interface mais agradável e convidativa.

Problema #1: a organização do conteúdo

Há bastante conteúdo no site do cliente, principalmente na área restrita aos colaboradores. A estrutura anterior, baseada em menus dropdown, não oferece ao administrador a clareza necessária e a agilidade para uma administração eficiente. Perde-se muito tempo procurando opções e tentando mirar o mouse sobre o item escolhido sem errar a pontaria. Nas opções do menu também haviam ícones pouco descritivos acerca do que cada opção representava.

Ícones, usar ou não usar?

Como quase tudo nesta vida, depende. Em sistemas administrativos onde a estrutura do conteúdo se refere a termos muito específicos, talvez a utilização de ícones consuma mais tempo e dinheiro do que traga reais benefícios aos usuários. Por isso, me restringi a utilizar ícones em contextos onde eles consegue realmente ajudar no reconhecimento da tarefa. Por enquanto, os únicos lugares que utilizei foi nos links no topo para opções e logout, já que seus usos e representações são amplamente conhecidos e, por isto, justificam a utilização de ícones.

Problema #2: administração do conteúdo vs. administração da administração

O que acontecia no painel antigo era que as opções do menu estavam mal organizadas. Não somente por sua estrutura hierárquica e por sua má apresentação, mas também por misturar tarefas referentes ao gerenciamento do conteúdo com tarefas referentes ao gerenciamento do sistema de gerenciamento, como cadastro de usuários, troca de senha e logout. A dica aqui é simplificar. Separe o que é específico das tarefas que envolvem o conteúdo do restante das opções. Assim você facilita para o usuário do sistema, removendo todas as distrações de seu caminho.

Utilize sim o apelo gráfico, mas com moderação

Há designers que, às vezes, colocam elementos tão ou mais chamativos que o site principal na administração. O que rege o sistema administrativo é o foco na realização das tarefas, de maneira fácil e sem distrações. Por isso, pense duas vezes antes de incluir Flash ou outros elementos que não agilizem a execução do fluxo administrativo. Isso não significa que você não deva se preocupar com o refinamento estético da interface.

Utilize uma linguagem gráfica simples, abusando dos espaçamentos e do espaço em branco, porém mantendo alinhamento coerente e uma cartela de cores suaves. Como qualquer outro sistema, seja ele desktop ou Web, a interface bem acabada e esteticamente agradável motiva o usuário a explorar os recursos que ela oferece e, de quebra, executar as tarefas desejadas com mais eficiência e rapidez.

Ofereça comodidades em JavaScript para automatização e simplificação dos processos em lote

Um benefício evidente do uso de JavaScript e de requisições assíncronas é tornar tarefas repetitivas mais simples, evitando redirecionamentos desnecessários. No nosso caso, em determinadas divisões do conteúdo, o cliente frequentemente apaga todos os registros para atualizar com novos, e então oferecer o recurso de selecionar múltiplos ou todos os itens ao mesmo tempo para apagá-los é outra comodidade simples de implementar, mas que faz total diferença no fluxo de trabalho.

Mantenha o usuário informado com feedback constante

Principalmente quando se usa bastante AJAX na página, é comum que o desenvolvedor esqueça de informar ao usuário o que está acontecendo, e se está acontecendo alguma coisa. Não esqueça de loaders que, por mais simples que sejam, já dão um bom motivo para o usuário aguardar e não achar que algo está errado.

Com relação aos botões, se você cria links que se parecem com botões, um pequeno detalhe que torna a experiência mais rica é adicionar os estados de quando o mouse está sobre o botão e quando o botão está sendo pressionado. Além disso, você pode aproveitar os botões também para fornecer um feedback imediato e prévio sobre as consequências de sua ativação. Nos botões de apagar, por exemplo, coloquei a borda e o texto em vermelho, para dizer ao usuário – com antecedência – no que o clique resulta.

Informe os usuários sobre o sucesso de uma tarefa ou sobre eventuais erros

É frequente vermos sistemas prontos, completos, que se esquecem completamente de informar ao usuário quando uma tarefa foi completada ou, o que é pior, quando um erro aconteceu. Este tipo de situação é previsível, pois muitos fatores podem acarretar em um erro, desde erros de validação de dados até erros no servidor ou na sintaxe do código. Por isso, escreva sempre mensagens de erro que não somente informem o que aconteceu mas, mais importante, como resolver o erro.

Seja produtivo: utilize a mesma (boa) interface administrativa para todos os seus clientes

Se todos os clientes de sua empresa utilizam o mesmo sistema de gerenciamento de conteúdo, ou mesmo dividem o mesmo framework de desenvolvimento, o que você pode fazer é utilizar a mesma interface administrativa para todos eles. Assim, todos os clientes terão uma boa experiência administrativa em seus sistemas on-line e você não precisará se preocupar com o desenvolvimento de uma nova interface a cada projeto.

Para finalizar, a mensagem é esta: não descuide da administração. Gerenciar é uma tarefa fundamental ao funcionamento de um sistema e tornar esta tarefa mais agradável ao seu cliente é lucro tanto para ele quanto para você. Espero em breve, com a evolução deste projeto – que está apenas começando, compartilhar mais sobre o processo de redesign que estou realizando na agência onde trabalho.